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");
        }
    }
});
时间: 2024-10-12 11:42:22

JS 中面向对象的5种写法和拓展JS对象的写法的相关文章

js中继承的几种用法总结(apply,call,prototype)

本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下,希望对大家有所帮助 一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 <SPAN style="<SPAN style="FONT-SIZE: 18px"><html>   <body>  <script type="text/javascript"> 

【学习笔记】——原生js中常用的四种循环方式

一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0   网页输出"欢迎下次光临" 在网页中弹出框输入1   网页输出"查询中--" 在网页中弹出框输入2   网页输出"取款中--" 在网页中弹出框输入3   网页输出"转账进行中--" 在网页中弹出框输入其他字符   网页输出"无效按键" 四种循环: for循环 while循环 for  in

JS 中深拷贝的几种实现方法

JS 中深拷贝的几种实现方法1.使用递归的方式实现深拷贝 //使用递归的方式实现数组.对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象,是数组的话进行数组拷贝,对象的话进行对象拷贝 var objClone = Array.isArray(obj) ? [] : {}; //进行深拷贝的不能为空,并且是对象或者是 if (obj && typeof obj === "object") { for (key i

js 中使用el表达式 关键总结:在js中使用el表达式一定要使用双引号

js 中使用el表达式 关键总结:在js中使用el表达式一定要加双引号 js控制中用到了el表达式,最开始源码如下: Java代码   var selected = ${requestScope.xxxxForm.recordNumPerPage} 这样始终js错误,因为在第一次的时候requestScope.xxxxForm.recordNumPerPage为null.于是在boss的指导下,简单的加了两个引号,代码变成 Java代码   var selected = "${requestSc

【JS】Js中函数的三种调用方式

在同一个页面中,函数名必须是唯一的,并且区分大小写.Js中可以通过下面三种方式调用函数: 1. 函数的简单调用 2. 在事件的响应中调用函数 3. 通过连接调用函数 具体是怎么操作的呢,下面一一讲解: 函数的简单调用:函数的定义语句通畅被放在HTML文件的<head>内,而函数的调用语句通常被放在<body>中.如果函数定义之前调用函数,执行将会出错. 语法如下: <head> <script type="text/javascript">

js中创建对象的几种方式

js中的几种创建对象的方式. 一共有5种: 一 , 工厂方式 var lev = function() {    return this.age;};function Parent() {    var child = new Object();    child.name = '小芳';    child.age = 30;    child.lev = lev;    return child;}var x = Parent();alert(x.name);alert(x.lev()); 说

node.js中函数的两种封装方式

1.创建一js文件(funs.js)function  controller(req,res){          //res.write("发送");          call('hello',req,res);          res.end("");      }module.exports  =  controller;    //此文件中只有一个函数被发布 其他文件中调用:require('./models/funs.js'); controller(

JS中创建对象的三种方式

<script> 2 //创建对象的三种方式 3 // 1.利用对象字面量(传说中的大括号)创建对象 4 5 var obj1 = { 6 uname: 'ash', 7 age: 18, 8 sex: "女", 9 sayhi: function() { 10 console.log("hello kitty"); 11 12 } 13 } 14 15 //访问属性的两种方法 16 console.log(obj1.uname); 17 console

JS中的函数、Bom、DOM及JS事件

本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的声明及调用] 1.函数声明的格式: function 函数名(参数1,参数2,参数3,--){//函数体 return 结果; } >>>函数的调用格式: 直接调用:函数调用的格式:函数名(参数一的值,参数二的值,--): 事件调用:事件名=函数名( ); 2.函数声明的几点强调: ①函数名