• <nav id="i44m4"></nav>
  • <kbd id="i44m4"></kbd>
    經典案例推廣高端H5電商設計公司聯系報價
    QQ聯系
    微信聯系
    手機聯系
    QQ聯系
    微信聯系
    手機聯系

    前端開發知識:JavaScript命名空間常用方法

    發布時間:2019-08-28
    發布者:eidea
    瀏覽次數:2414
    很多學習前端開發的小伙伴都會遇到這樣的問題:在JavaScript中全局變量經常會引起命名沖突,甚至有時侯重寫變量不是按照想象中的順序來。避免全局變量名沖突的最好辦法還是創建命名空間,接下來小編就給大家分享在JavaScript中創建命名空間的幾種常用方法。

    JavaScript的執行環境由各種各樣的全局變量構成,這些全局變量先于函數執行環境而創建、這些全局變量都掛載于“全局對象”下。當名稱有沖突時就會產生一些不可控的問題,比如命名沖突、代碼的脆弱性、難以測試等。



    在編程開發中合理的使用命名空間可以避免相同的變量或對象名稱產生的沖突,而且命名空間也有助于組織代碼有更強的可維護性和可讀性。JavaScript中雖然沒有提供原生的命名空間支持,但我們可以使用其他的方法(對象和閉包)實現類似的效果。

    1、單一全局變量

    JavaScript中一個流行的命名空間模式是選擇一個全局變量作為主要的引用對象,因為每個可能的全局變量都成為唯一全局變量的屬性,也就不用再創建多個全局變量,也就避免了和其他聲明的沖突。不過單一全局變量模式已經在不少的JavaScript類庫中使用,如:YUI定義了唯一的YUI全局對象,jQuery定義了$和jQuery,$由其他類庫使用時使用jQuery等。示例如下:

    var myApplication = (function() {

    function() {

    // ***

    },

    return {

    // **

    }

    })();

    2、命名空間前綴

    命名空間前綴模式其思路非常清晰,就是選擇一個獨特的命名空間,然后在其后面聲明聲明變量、方法和對象。示例如下:

    var = myApplication_propertyA = {};

    var = myApplication_propertyA = {};

    function myApplication_myMethod() {

    // ***

    }

    從某種程度上來說,它確實減少了命名沖突的發生概率,但其并沒有減少全局變量的數目,在使用這種模式時一定要特別注意。

    3、對象字面量表示法

    對象字面量模式可以認為是包含一組鍵值對的對象,每一對鍵和值由冒號分隔,鍵也可以是代碼新的命名空間。示例如下:

    var myApplication = {

    // 可以很容易的為對象字面量定義功能

    getInfo:function() {

    // ***

    },

    // 可以進一步支撐對象命名空間

    models:{},

    views:{

    pages:{}

    },

    collections:{}

    };

    對象字面量為我們提供了優雅的鍵/值語法,我們可以非常便捷的組織代碼封裝不同的邏輯或功能,而且可讀性、可維護性、可擴展性極強。

    4、嵌套命名空間

    嵌套命名空間模式可以說是對象字面量模式的升級版、它也是一種有效的避免沖突模式、因為即使一個命名空間存在、它也不太可能擁有同樣的嵌套子對象、示例如下:

    var myApplication = myApplication || {};

    // 定義嵌套子對象

    myApplication.routers = myApplication.routers || {};

    myApplication.routers.test = myApplication.routers.test || {};

    當然、我們也可以選擇聲明新的嵌套命名空間或屬性作為索引屬性、如:

    myApplication[′routers′] = myApplication[′routers′] || {};

    使用嵌套命名空間模式可以使代碼易讀且有組織性,而且相對安全、不易產生沖突,其弱點是如果我們的命名空間嵌套過多會增加瀏覽器的查詢工作量。

    5、立即調用的函數表達式

    立即調用函數(IIFE)實際上就是匿名函數,被定義后立即被調用。IIFE是用于封裝應用程序邏輯的常用方法,以保護它免受全局名稱空間的影響。示例如下:

    // 命名空間和undefined作為參數傳遞,確保:

    // 1.命名空間可以在局部修改,不重寫函數外部上下文

    // 2.undefined 的參數值是確保undefined,避免ES5規范里定義的undefined

    (function (namespace, undefined) {

    // 私有屬性

    var foo = "foo";

    bar = "bar";

    // 公有方法和屬性

    namespace.foobar = "foobar";

    namespace.sayHello = function () {

    say("Hello World!");

    };

    // 私有方法

    function say(str) {

    console.log("You said:" str);

    };

    })(window.namespace = window.namespace || {});

    可擴展性是任何可伸縮命名空間模式的關鍵,使用IIFE可以輕松實現這一目的,我們可以再次使用IIFE給命名空間添加更多的功能。

    6、命名空間注入

    命名空間注入是IIFE的另一個變體,從函數包裝器內部為一個特定的命名空間“注入”方法和屬性,使用this作為命名空間代理,這種模式的優點是可以將功能行為應用到多個對象或命名空間。示例如下:

    var myApplication = myApplication || {};

    myApplication.utils = {};

    (function () {

    var value = 5;

    this.getValue = function () {

    return value;

    }

    // 定義新的子命名空間

    this.tools = {};

    }).apply(myApplication.utils);

    (function () {

    this.diagnose = function () {

    return "diagnose";

    }

    }).apply(myApplication.utils.tools);

    // 同樣的方式在普通的IIFE上擴展功能,僅僅將上下文作為參數傳遞并修改,而不是僅僅使用this,如果你經常被全局變量沖突困擾,一定要牢記JavaScript命名空間知識點。

    網站案例欣賞

    豪爵摩托車

    產品H5專題頁制作

    蔚知知識產權平臺

    響應式企業官網

    合眾生物股份

    響應式企業網站

    老板把我摁倒在办公桌啪啪_人禽杂交在线播放网站_我原来是富二代_女人和男人啪视频在线观看_又黄又刺激超爽动态图_色偷偷2019免费视频观看