zoukankan      html  css  js  c++  java
  • Backbone的写类方式

    Backbone提供给客户端程序员的类都是通过 构造函数+原型 的方式写的,Backbone.Model的代码大致如下

    // 定义构造器
    var Model = Backbone.Model = function(attributes, options) {
        // ...
        this.set(attrs, options);
        this.changed = {};
        this.initialize.apply(this, arguments);
    };
     
    // 扩展原型,往原型上添加了很多方法,如Events
    _.extend(Model.prototype, Events, {
        // ...
    });

    这种写法很传统,Backbone.Collection / Backbone.View / Backbone.Router / Backbone.History 都是通过这种方式定义的。

    二、Backbone的外部写类方式

    说外部的写类方式,不得不提 extend 方法,该方法定义在Backbone.js的底部。不到30行代码,它是私有的,外部并不能访问。
    也就是说,这个方法只在Backbone内部使用,为其它模块服务。

    其实这个说法不严谨,虽然extend不能直接访问,但它通过仅一行代码

    Model.extend = Collection.extend = Router.extend = View.extend = History.extend = extend;

    转身变为以下方法

    • Backbone.Model.extend
    • Backbone.Collection.extend
    • Backbone.View.extend
    • Backbone.Router.extend
    • Backbone.History.extend

    这时,外部还是可以访问得到。

    在一个闭包内,写一个私有的函数,然后把该函数赋值给多个类或类原型。这些写法并不少见,这样写节省了内存,函数实例其实只有一份。

    此外,不要把这里的extend 和 _.extend 搞混了。_.extend是underscore提供的较底层的方法,用来Mixin对象。这里的extend则是用来写类。

    介绍下extend

    1. 它接受两个参数,都是对象类型
    2. 它返回一个类(构造器,函数),怎么叫都行
    3. 第一个参数的所有属性、方法都会拷贝到类的原型上(实例对象上)
    4. 第二个参数的所有属性、方法都会拷贝的类上(类静态属性、方法)
    5. 第一个参数中如果有constructor属性,那么最后就返回它,否则返回内部提供的child
    6. 返回的类有个特殊属性 __super__。

    上面的第六点,使用它很方便的取得父类原型,进而取到父类构造器,进而在子类中去调用父类,这类似于Java里的super关键字。

    拿示例详细说说

    1. 两个参数,都是对象类型,第一个扩展为原型方法,第二个扩展为类方法

    var instanceObj = {
        name: '',
        getName: function() {},
        setName: function(name) {}
    }
    var classObj = {
        trim: function(str) {},
        mix: function() {}
    }
     
    // 生成一个新类CustomModel,它具有Backbone.Model的所有方法
    var CustomModel = Backbone.Model.extend(instanceObj, classObj)
     
    // instanceObj属性都拷贝到了CustomModel.prototype 上
    _.each(['name','getName', 'setName'], function(attr) {
        console.log(attr in CustomModel.prototype)
    })
     
    // classObj属性都拷贝到了 CustomModel 上
    _.each(['trim','mix'], function(attr) {
        console.log(attr in CustomModel)
    })

    2. 参数中如果有constructor属性,那么最后就返回它,否则返回内部提供的child

    这实际上告诉使用者可以自定义构造器,而不使用内部的child。

    function MyConstructor(name, age) {
        this.name = name;
        this.age  = age;
    }
    var CustomModel = Backbone.Model.extend({
        constructor: MyConstructor,
        getName: function(){},
        setName: function(){}
    })
     
    var m1 = new CustomModel('John', 30)
    console.log(m1.constructor === MyConstructor) // true

    3. 返回的类有个特殊属性 __super__,用它很方便的取得父类原型,进而取到父类构造器,最后在子类中去调用父类

    function Person(name, age) {
        this.name = name
        this.age = age
    }
    Person.extend = Backbone.Model.extend // 把Backbone的extend拿出来用,O(∩_∩)O~
     
    function ManConstructor(name, age) {
        ManConstructor.__super__.constructor.call(this, name, age) // 调用父类构造器
        this.gender = 'male'
    }
    var Man = Person.extend({
        constructor: ManConstructor
    })
    var man = new Man('John', 30)
    console.log(man) // ManConstructor { name="John", age=30, gender="male"}

    总结下Backbone的写类方式

    Backbone内部的写类方式是 构造函数+原型。外部写类则是通过extend,写类和继承同时存在。

    1. 通过Model(View/Router等)的extend方法写类,产生的类直接继承了Model(View/Router等)
    2. 如果写的类不是Backbone提供的类,那么可以象3那样,把extend方法拿出来

    使用Backbone开发,多数时候都采用方式1,它强制要求把代码分为了几层,一些实用工具函数由underscore提供。

    如果是浏览器端开发,DOM及HTTP通讯操作一般由jQuery或zepto等提供。你写的代码几乎都集中在业务处理,无非就是模型(Model)、集合(Collection)、视图(View)、路由(Router)、历史管理(History)。

    转自:http://www.cnblogs.com/snandy/archive/2013/05/27/3097429.html

  • 相关阅读:
    Longest Consecutive Sequence 分类: Leetcode(线性表) 2015-02-04 09:54 55人阅读 评论(0) 收藏
    Median of Two Sorted Arrays 分类: Leetcode(线性表) 2015-02-04 09:05 54人阅读 评论(0) 收藏
    Python+Scrapy(完整包全安装过程) 分类: 安装配置说明 2015-02-02 21:29 108人阅读 评论(0) 收藏
    Remove Element 分类: Leetcode(线性表) 2015-01-29 10:47 55人阅读 评论(0) 收藏
    Search in Rotated Sorted Array 分类: Leetcode(线性表) 2015-01-29 10:23 58人阅读 评论(0) 收藏
    机器学习基础(四)LMS,代价函数的求解和概率意义 分类: 机器学习 2015-01-26 14:52 114人阅读 评论(0) 收藏
    机器学习基础(一)线性回归
    AcWing1341. 十三号星期五
    JavaWebServle执行流程解析
    AcWing 466. 回文日期
  • 原文地址:https://www.cnblogs.com/dkwlxq/p/3101431.html
Copyright © 2011-2022 走看看