2

我有几个关于在外部文件和命名空间中使用javascript的最佳实践的问题。

让我们有一个命名空间 MyCompany、全局配置内容、各个页面的代码，也许还有一些“API”。

var MyCompany = {};

HTML 中的全局配置 MyCompany.root = "/";

哪种方法更好

  • 第一的

    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>

子模块和混合 API 与页面 javascript

如果我们的主页有一些评论。

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

现在在 Page init 内部使用

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

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

会不会造成麻烦？

很明显，Reviews 扩展了 MyCompany.Home.Page，但 MyCompany.Home.Page 需要 Reviews。

如果在 MyCompany.Home.Page.Reviews 加载之后创建 MyCompany.Home.Page 上的实例，它应该不会造成麻烦，对吧？因为评论实际上会扩展函数对象，对吗？

我想这取决于对第一个问题的回答。

也可以是

(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 || {});

我还应该以某种方式分离 Page 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 ...
 };

如果有人阅读所有内容以发表评论，我会很高兴。

先感谢您。

4

1 回答 1

0

哪种方法更好？揭示单例模块（第一个）或构造函数/类及其实例（第二个）？

取决于您的用例。如果您不希望page同时存在多个对象（而且您似乎几乎没有），那么单例（带有init函数）真的很好。其他一切都可能被认为是错误的，或者至少是矫枉过正。

您的MyCompany.Page.Home.Reviews（或MyCompany.Home.Page.Reviews？）类模块也是如此，您似乎只需要一个实例。

如果在 MyCompany.Home.Page.Reviews 加载之后创建 MyCompany.Home.Page 上的实例，它应该不会造成麻烦，对吧？因为评论实际上会扩展函数对象，对吗？

是的。

(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 || {} );

我还应该以某种方式分离 Page javascript 的 API 吗？

对于发展：是的，在任何情况下。每个模块都应该有自己的文件。部署时，您可以将它们连接在一起以加快加载速度，但这是一个不同的问题。

于 2013-04-14T23:48:00.790 回答