的頁面和對象的JavaScript外部代碼 - 最佳實踐

我對使用JavaScript的在外部文件和命名空間最佳實踐幾個問題。的頁面和對象的JavaScript外部代碼 - 最佳實踐

讓我們有一個命名空間MyCompany，全局配置的東西，代碼爲單個頁面，也許一些「API」。在HTML MyCompany.root = 「/」

var MyCompany = {};

全局配置;

哪種方法更好

首先

MyCompany.Page = {}; 

(function(ns} { 
    ns.init = function() { 
     var root = MyCompany.root; 
     ajax(root+"somepage.html"); 
    }; 
}(MyCompany.Page.Home = MyCompany.Page.Home || {});

在HTML中使用

<script> 

$(function() { 
    MyCompany.Page.Home.init(); 
}); 

</script>

二（頁作爲一個類及其實例）

MyCompany.Page.Home = function() { 
    var root = MyCompany.root; 
    this.init = function() { 
      ajax(root + "somepage.html"); 
    }; 
};

在HTML

<script> 
var page = new MyCompany.Page.Home(); 

$(function() { 
    page.init(); 
}); 
</script>

子模和與頁中的JavaScript

如果我們的首頁有一些評論混合API。

MyCompany.Page.Home.Reviews = function() { 
     this.init = function() { 
      load_stuff(); 
     } 
};

現在內頁的init使用

MyCompany.Home.Page = function(data) { 
    var reviews = new MyCompany.Home.Page.Reviews(); 

    this.init = function() { 
      reviews.init(); 
    }; 
};

莫非肇事？

很明顯，評論擴展了MyCompany.Home.Page，但MyCompany.Home.Page需要評論。

如果MyCompany.Home.Page上的實例是在MyCompany.Home.Page.Reviews加載後創建的，那麼不應該引起麻煩，對嗎？因爲評論實際上會擴展功能對象，是嗎？

我想這取決於第一個問題的答案。

它也可能是

(function(ns) { 
    ns.init = function() { MyCompany.Page.Home.Reviews.init(); }; 
})(MyCompany.Page.Home = MyCompany.Page.Home || {}); 

(function(ns) { 
    ns.init = function() { load_stuff(); }; 
})(MyCompany.Page.Home.Reviews = MyCompany.Page.Home.Reviews || {});

也應我有點單獨的頁面的JavaScript API的？

如

MyCompany.APIS.Maps = function(location) { 
      /* Private variables */ 
      var _location = location; 

      /* Private functions */ 
      function search_address(address) { .. do search .. } 

      /* Public interface */ 
      this.search = search_address; 

      do some initialization ... 
};

如果有人讀它都留下一些評論，我會很高興。

預先感謝您。

來源

2013-04-14 Douglish

似乎你可以使用適當的模塊，認爲CommonJS或AMD。 – elclanrs

哪種方法更好？揭示單例模塊（第一個）或構造函數/類及其實例（第二個）？

取決於您的用例。如果你不希望多個對象同時存在（你幾乎看不到），那麼這個單例（帶有一個init函數）確實很好。其他一切都可能被認爲是錯誤的或至少是過度的。

同樣的事情適用於您的MyCompany.Page.Home.Reviews（或MyCompany.Home.Page.Reviews？）類模塊，其中您似乎只需要一個實例。

如果MyCompany.Home.Page上的實例是在MyCompany.Home.Page.Reviews加載後創建的，那麼不應該引起麻煩，對吧？因爲評論實際上會擴展功能對象，是嗎？

是的。

(function(ns) { 
    ns.init = function() { MyCompany.Page.Home.Reviews.init(); }; 
})(MyCompany.Page.Home = MyCompany.Page.Home || {});

如果您有ns快捷鍵可用，你應該使用它：

(function(ns) { 
    ns.init = function() { ns.Reviews.init(); }; 
})(MyCompany.Page.Home = MyCompany.Page.Home || {});

也應我頁中的JavaScript不知何故單獨的API？

對於開發：是的，在任何情況下。每個模塊應該有自己的文件。部署時，可以將它們連接在一起以加快加載速度，但這是一個不同的問題。

來源

2013-04-14 23:48:00 Bergi

的頁面和對象的JavaScript外部代碼 - 最佳實踐

回答

相關問題