亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

ディレクトリ 検索
導論 前言 為什么學習JavaScript JavaScript的歷史 基本語法 語法概述 數值 字符串 對象 數組 函數 運算符 數據類型轉換 錯誤處理機制 JavaScript 編程風格 標準庫 Object對象 包裝對象和Boolean對象 Number對象 String對象 Math對象 Date對象 RegExp對象 JSON對象 ArrayBuffer:類型化數組 面向對象編程 概述 封裝 繼承 模塊化編程 DOM Node節(jié)點 document節(jié)點 Element對象 Text節(jié)點和DocumentFragment節(jié)點 Event對象 CSS操作 Mutation Observer 瀏覽器對象 瀏覽器的JavaScript引擎 定時器 window對象 history對象 Ajax 同域限制和window.postMessage方法 Web Storage:瀏覽器端數據儲存機制 IndexedDB:瀏覽器端數據庫 Web Notifications API Performance API 移動設備API HTML網頁元素 Canvas API SVG 圖像 表單 文件和二進制數據的操作 Web Worker 服務器發(fā)送事件 Page Visibility API Fullscreen API:全屏操作 Web Speech requestAnimationFrame WebSocket WebRTC Web Components HTML網頁的API HTML網頁元素 Canvas API SVG 圖像 表單 文件和二進制數據的操作 Web Worker 服務器發(fā)送事件 Page Visibility API Fullscreen API:全屏操作 Web Speech requestAnimationFrame WebSocket WebRTC Web Components 開發(fā)工具 console對象 PhantomJS Bower:客戶端庫管理工具 Grunt:任務自動管理工具 Gulp:任務自動管理工具 Browserify:瀏覽器加載Node.js模塊 RequireJS和AMD規(guī)范 Source Map JavaScript 程序測試 JavaScript高級語法 Promise對象 有限狀態(tài)機 MVC框架與Backbone.js 嚴格模式 ECMAScript 6 介紹 附錄 JavaScript API列表
テキスト

    • 原始寫法

    • 對象寫法

    • 立即執(zhí)行函數寫法

    • 放大模式

    • 寬放大模式(Loose augmentation)

    • 輸入全局變量

    • 使用構造函數封裝私有變量

    • IIFE封裝私有變量

隨著網站逐漸變成"互聯(lián)網應用程序",嵌入網頁的JavaiScript代碼越來越龐大,越來越復雜。網頁越來越像桌面程序,需要一個團隊分工協(xié)作、進度管理、單元測試等等......開發(fā)者不得不使用軟件工程的方法,管理網頁的業(yè)務邏輯。

JavaScript模塊化編程,已經成為一個迫切的需求。理想情況下,開發(fā)者只需要實現核心的業(yè)務邏輯,其他都可以加載別人已經寫好的模塊。

但是,JavaScript不是一種模塊化編程語言,ES5不支持"類"(class),更遑論"模塊"(module)了。ES6正式支持"類"和"模塊",但還沒有成為主流。JavaScript社區(qū)做了很多努力,在現有的運行環(huán)境中,實現模塊的效果。

原始寫法

模塊就是實現特定功能的一組方法。只要把不同的函數(以及記錄狀態(tài)的變量)簡單地放在一起,就算是一個模塊。

function m1(){
  //...
}

function m2(){
  //...
}

上面的函數m1()和m2(),組成一個模塊。使用的時候,直接調用就行了。

這種做法的缺點很明顯:"污染"了全局變量,無法保證不與其他模塊發(fā)生變量名沖突,而且模塊成員之間看不出直接關系。

對象寫法

為了解決上面的缺點,可以把模塊寫成一個對象,所有的模塊成員都放到這個對象里面。

var module1 = new Object({
 _count : 0,
 m1 : function (){
  //... },
 m2 : function (){
   //... }
});

上面的函數m1()和m2(),都封裝在module1對象里。使用的時候,就是調用這個對象的屬性。

module1.m1();

但是,這樣的寫法會暴露所有模塊成員,內部狀態(tài)可以被外部改寫。比如,外部代碼可以直接改變內部計數器的值。

module1._count = 5;

立即執(zhí)行函數寫法

使用"立即執(zhí)行函數"(Immediately-Invoked Function Expression,IIFE),可以達到不暴露私有成員的目的。

var module1 = (function(){
 var _count = 0;
 var m1 = function(){
   //... };
 var m2 = function(){
  //... };
 return {
  m1 : m1,
  m2 : m2
 };
})();

使用上面的寫法,外部代碼無法讀取內部的_count變量。

console.info(module1._count); //undefined

module1就是JavaScript模塊的基本寫法。下面,再對這種寫法進行加工。

放大模式

如果一個模塊很大,必須分成幾個部分,或者一個模塊需要繼承另一個模塊,這時就有必要采用"放大模式"(augmentation)。

var module1 = (function (mod){
 mod.m3 = function () {
  //... };
 return mod;
})(module1);

上面的代碼為module1模塊添加了一個新方法m3(),然后返回新的module1模塊。

寬放大模式(Loose augmentation)

在瀏覽器環(huán)境中,模塊的各個部分通常都是從網上獲取的,有時無法知道哪個部分會先加載。如果采用上一節(jié)的寫法,第一個執(zhí)行的部分有可能加載一個不存在空對象,這時就要采用"寬放大模式"。

var module1 = ( function (mod){
 //... return mod;
})(window.module1 || {});

與"放大模式"相比,"寬放大模式"就是"立即執(zhí)行函數"的參數可以是空對象。

輸入全局變量

獨立性是模塊的重要特點,模塊內部最好不與程序的其他部分直接交互。

為了在模塊內部調用全局變量,必須顯式地將其他變量輸入模塊。

var module1 = (function ($, YAHOO) {
 //...
})(jQuery, YAHOO);

上面的module1模塊需要使用jQuery庫和YUI庫,就把這兩個庫(其實是兩個模塊)當作參數輸入module1。這樣做除了保證模塊的獨立性,還使得模塊之間的依賴關系變得明顯。

使用構造函數封裝私有變量

可以利用構造函數,封裝私有變量。

function StringBuilder() {
    var buffer = [];

    this.add = function (str) {
        buffer.push(str);
    };

    this.toString = function () {
        return buffer.join('');
    };

}

這種方法將私有變量封裝在構造函數中,違反了構造函數與實例對象相分離的原則。并且,非常耗費內存。

function StringBuilder() {
    this._buffer = [];
}

StringBuilder.prototype = {
    constructor: StringBuilder,
    add: function (str) {
        this._buffer.push(str);
    },
    toString: function () {
        return this._buffer.join('');
    }
};

這種方法將私有變量放入實例對象中,好處是看上去更自然,但是它的私有變量可以從外部讀寫,不是很安全。

IIFE封裝私有變量

var obj = function () {  // open IIFE    // public    var self = {
        publicMethod: function (...) {
            privateData = ...;
            privateFunction(...);
        },
        publicData: ...
    };

    // private
    var privateData = ...;
    function privateFunction(...) {
        privateData = ...;
        self.publicData = ...;
        self.publicMethod(...);
    }

    return self;
}(); // close IIFE


前の記事: 次の記事: