JavaScript MVC 學習筆記（四）類的使用(下)

Rango 發布于2019-08-21 10:25 / 1009人閱讀

摘要：基于函數進行調用的，用來確保函數是在指定的值所在的上下文中調用的。添加私有函數目前上面為類庫添加的屬性都是公開的，可以被隨時修改。以基于的富應用開發為主要學習資料。

控制“類”庫的作用域

在類和實例中都添加proxy函數，可以在事件處理程序之外處理函數的時候保持類的作用域。下面是不用proxy的辦法：

var Class = function(parent){
    var klass = function(){
        this.init.apply(this, arguments);
    };

    klass.prototype.init = function(){};
    klass.fn = klass.prototype;

    // 添加一個proxy 函數
    klass.proxy = function(func){
        var self = this;
        return(function(){
            return func.apply(self, arguments);
        });
    }

    // 在實例中也添加這個函數
    klass.fn.proxy = klass.proxy;
    return klass;
};

下面是用proxy()函數來包裝函數，以確保它們在正確的作用域中被調用：

var Button = new Class;
    Button.include({
    init: function(element){
        this.element = jQuery(element);

        // 代理了這個click 函數
        this.element.click(this.proxy(this.click));
    },
    click: function(){ /* ... */ }
});

如果沒有使用proxy將click()的回調包裝起來，它就會基于上下文this.element來調用，而不是Button，這會造成各種問題。在新版本的JavaScript——ECMAScript 5（ES5）——中同樣加入了bind()函數用以控制調用的作用域。bind()基于函數進行調用的，用來確保函數是在指定的this值所在的上下文中調用的。例如：

Button.include({
    init: function(element){
        this.element = jQuery(element);
        // 綁定這個click 函數
        this.element.click(this.click.bind(this));
    },
    click: function(){ /* ... */ }
});

這個例子和proxy()函數是等價的，它能確保click() 函數基于正確的上下文進行調用。老版本的瀏覽器不支持bind()，但可以手動實現它，兼容性也不錯，直接擴展相關對象的原型，這樣就可以像在ES5 中使用bind()，在任意瀏覽器中調用它。下面是一段實現了bind() 函數的代碼：

if (!Function.prototype.bind) {
    Function.prototype.bind = function (obj) {
        var slice = [].slice,
        args = slice.call(arguments, 1),
        self = this,
        nop = function () {},
        bound = function () {
        return self.apply( this instanceof nop ? this : (obj || {}),
            args.concat(slice.call(arguments)));
        };

        nop.prototype = self.prototype;
        bound.prototype = new nop();
        return bound;
    };
}

如果瀏覽器原生不支持bind()，則僅僅重寫了Function 的原型。現代瀏覽器則可以繼續使用內置的實現。

對于數組來說這種“打補丁”式的做法非常有用，因為在新版本的JavaScript 中，數組增加了很多新的特性。可以使用es5-shi項目，它涵蓋了ES5 中新增的盡可能多的特性。

添加私有函數

目前上面為“類”庫添加的屬性都是“公開的”，可以被隨時修改。關于給“類”添加私有屬性，JavaScript支持不可變屬性，但在主流瀏覽器中并未實現，沒辦法直接利用這個特性。可以利用JavaScript 匿名函數來創建私有作用域，這些私有作用域只能在內部訪問：

var Person = function(){};

(function(){
    var findById = function(){ /* ... */ };
    Person.find = function(id){

    if (typeof id == "integer")
        return findById(id);
    };
})();

上面的代碼將類的屬性都包裝進一個匿名函數中，然后創建了局部變量（findById），這些局部變量只能在當前作用域中被訪問到。Person變量是在全局作用域中定義的，可以在任何地方都能訪問到。定義變量的時候不要丟掉var運算符，如果丟掉var就會創建全局變量。如果需要定義全局變量，可以在全局作用域中定義，或者定義為window的屬性：

(function(exports){
    var foo = "bar";

    // 將變量暴露出去
    exports.foo = foo;
})(window);

assertEqual(foo, "bar");

“類”庫

jQuery 本身并不支持類，但通過插件的方式可以輕易引入類的支持，比如HJS。HJS 允許通過給$.Class.create傳入一組屬性來定義類：

var Person = $.Class.create({

    // 構造函數
    initialize: function(name) {
        this.name = name;
    }
});

可以在創建類的時候傳入父類作為參數，這樣就實現了類的繼承：

var Student = $.Class.create(Person, {
    price: function() { /* ... */ }
});

var alex = new Student("Alex");
alex.pay();

可以直接給類掛載屬性：

Person.find = function(id){ /* ... */ };

HJS 的API 中同樣包含一些工具函數，比如clone() 和equal() ：

var alex = new Student("Alex");
var bill = alex.clone();
assert( alex.equal(bill) );

還有 Spine 同樣實現了類，通過直接在頁面中引入spine.js（http://maccman.github.com/spine/spine.js）來使用它：

jQuery 的作者John Resig 在他的博客中寫過一篇文章：專門講解如何實現經典的類繼承。

公開記錄學習JS MVC，不知道能堅持多久= =。以《基于MVC的JavaScript web富應用開發》為主要學習資料。類的部分終于看完了，再慢慢消化。JS真是博大精深！

GPU云服務器云服務器 javascript學習筆記 javascript類的繼承 asp 類的使用 _JavaScript_MVC

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85509.html

JavaScript MVC 學習筆記（二）類的使用（上）

摘要：任何函數都可以用做構造函數，構造函數必須使用運算符作為前綴來創建新的實例。當使用關鍵字來調用構造函數時，執行上下文從全局對象變成一個空的上下文，這個上下文代表了新生成的實例。默認情況下，如果構造函數中沒有返回任何內容，就會返回當前的上下文。公開記錄學習JS MVC，不知道能堅持多久= =。以《基于MVC的JavaScript web富應用開發》為主要學習資料。 JavaScr...

caozhijian 2019-08-21 10:25 評論0 收藏0
JavaScript MVC 學習筆記（三）類的使用（中）

摘要：實際上，可以將其理解為某種形式的繼承。如果上下文是，則使用全局對象代替。例如的第個參數是上下文，后續是實際傳入的參數序列中允許更換上下文是為了共享狀態，尤其是在事件回調中。公開記錄學習JS MVC，不知道能堅持多久= =。以《基于MVC的JavaScript web富應用開發》為主要學習資料。接上一篇類的學習，發現實在是看暈了，有些例子是能看懂在干嘛，但是不知道為什么這樣做，有的甚至...

DandJ 2019-08-22 10:56 評論0 收藏0
JavaScript MVC 學習筆記（一）初識JS MVC

摘要：以基于的富應用開發為主要學習資料。下面用實現一個例子使用匿名函數來封裝一個作用域在頁面加載時綁定事件監聽上面的代碼創建了控制器，這個控制器是放在變量下的命名空間。然后用了一個匿名函數封裝了一個作用域，以避免對全局作用域造成污染。公開記錄學習JS MVC，不知道能堅持多久= =。以《基于MVC的JavaScript web富應用開發》為主要學習資料。什么是MVC MVC 是一種設...

xorpay 2019-08-22 10:55 評論0 收藏0
JavaScript MVC 學習筆記（五）事件的基本操作

摘要：事件是應用程序的核心，是所有內容的驅動。將對這兩種事件模型的支持都加入標準規范之中。根據型，事件首先被目標元素所捕捉，然后向上冒泡。取消事件冒泡當事件冒泡時，可以通過數來終止冒泡，這個函數是對象中的方法。事件是 JavaScript 應用程序的核心，是所有內容的驅動。盡管后來W3C 對此做了標準化，但 IE 仍然堅持使用與 W3C 不兼容的事件模型，直到 IE9 才遵循標準。有很多諸...

Julylovin 2019-08-21 10:26 評論0 收藏0
Backbone.js學習筆記（一）

摘要：它通過數據模型進行鍵值綁定及事件處理，通過模型集合器提供一套豐富的用于枚舉功能，通過視圖來進行事件處理及與現有的通過接口進行交互。本人兼職前端付費技術顧問，如需幫助請加本人微信hawx1993或QQ345823102，非誠勿擾 1.為初學前端而不知道怎么做項目的你指導 2.指導并扎實你的JavaScript基礎 3.幫你準備面試并提供相關指導性意見 4.為你的前端之路提供極具建設性的...

FrancisSoung 2019-08-21 10:21 評論0 收藏0