[JS] 面向对象的5种写法和拓展JS对象的写法

面向对象的JAVA 最开始当然是对象的定义了收集了以下的五种写法

//第1种写法  
function Circle(r) {  
      this.r = r;  
}  
Circle.PI = 3.14159;  
Circle.prototype.area = function() {  
  return Circle.PI * this.r * this.r;  
}  
  
var c = new Circle(1.0);     
alert(c.area());

//第2种写法
var Circle = function() {
   var obj = new Object();
   obj.PI = 3.14159;
   
   obj.area = function( r ) {
       return this.PI * r * r;
   }
   return obj;
}

var c = new Circle();
alert( c.area( 1.0 ) );

//第3种写法
var Circle = new Object();
Circle.PI = 3.14159;
Circle.Area = function( r ) {
       return this.PI * r * r;
}

alert( Circle.Area( 1.0 ) );

//第4种写法
var Circle={
   "PI":3.14159,
   "area":function(r){
   　　return this.PI * r * r;
　　}
};
alert( Circle.area(1.0) );

//第5种写法
var Circle = new Function("this.PI = 3.14159;this.area = function( r ) {return r*r*this.PI;}");

alert( (new Circle()).area(1.0) );

说明：

用得最多的还是1/4两种而且也比较好理解特别是第四种基于json格式来定义JS对象比较普遍 SAIKU的JS编写风格就是这种

=========================================

第四种，代码量少点。JSON在传递时更灵活。

=========================================

第1种:
优点:体现了OO的继承特性. 每次初始化Circle对象,都只设置了必须的值(r).

第2种:
缺点:每次都必须初始化很多变量,时间成本+内存成本,相比第一种高昂了点.

第3种:
缺点:虽然实现了封装,但貌似Circle只是一个包名,对于OO的继承好像发挥不大.

第4种:
缺点:同第3种. 只是用了Object Literal方式初始化了对象.

第5种:
缺点:代码编写,确实不方便.没体现更好的分离.

=========================================

个人觉得第一种更符合OO开发要求！
第四种适合可以理解成封包！且非常灵活，本身就是一种json格式，所以方便应用于json格式传递环境下，eg:ExtJs就是采用了第一种方式封装核心，第四种方式打包UI

=========================================

第一种从java角度来说，是一个普通的类，这个类需要调用的时候，就new xx()这样一个对象出来。
第四种，从java的角度来说，是一个单例类！你调用的时候直接XXX.xx()这样调用，不需要new。

saiku的写法

定义 JS 对象 - > Settings

var Settings = {

　　 //常量配置
    I18N_LOCALE: "en",
    QUERY_PROPERTIES: {
        'saiku.olap.query.automatic_execution': true,
        'saiku.olap.query.nonempty': true,
        'saiku.ui.render.mode' : 'table',
        'saiku.olap.result.formatter' : "flattened"
    },
    TABLE_LAZY: true,
    PLUGINS: [
        "Chart"
    ],
    MAPS_TYPE: 'OSM' // OSM || GMAPS
};

//函数拓展
Settings.GET = function () {
    var params = {1,2,3};
    return params;
}();
_.extend(Settings, Settings.GET);

//常量拓展
Settings.REST_URL = Settings.TOMCAT_WEBAPP + Settings.REST_MOUNT_POINT;

拓展的JS对象定义

有时候有一些编写好的JS框架，我们需要拓展JS框架的内容

这时候需要定义一个继承自框架对象的JS自定义对象

举例如下：

//SessionWorkspace对象继承自backbone.js的Backbone.Model对象
// var Model = Backbone.Model = function(attributes, options) {};
//  _.extend(Model.prototype, Events, {
//        initialize: function(){}
//  });

// initialize/destroy/url 和 fetch 是父类的方法，SessionWorkspace 重写了该方法
// refresh/process_datasources/prefetch_dimensions 是 SessionWorkspace  独有的自定义方法
//这样看来，还挺像Java的继承的嘛
var SessionWorkspace = Backbone.Model.extend({
        
    initialize: function(args, options) {//parent
        _.extend(this, Backbone.Events);
        _.bindAll(this, "process_datasources","prefetch_dimensions");
        this.initialized = false;
        this.first = true;
        this.fetch({success:this.process_datasources},{});
    },

    refresh: function() {//this
        this.fetch({success:this.process_datasources},{});
    },
        
    destroy: function() {//parent
        if (typeof localStorage !== "undefined" && localStorage) {
            localStorage.clear();
        }
        return false;
    },
    
    process_datasources: function(model, response) {//this
    },
    
    prefetch_dimensions: function() {//this      
    },
    
    url: function() {//parent
        if (this.first) {
            this.first = false;
            return encodeURI(Saiku.session.username + "/discover");
        }
        else {
            return encodeURI(Saiku.session.username + "/discover/refresh");
        }
    }
});