Question

我在外部文件和命名空间中使用 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");
     };
};

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

这会引起麻烦吗？

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

如果在加载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 ...
 };

如果有人读完所有内容，我会很高兴留下一些评论。

提前谢谢你。

Answer 1

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

取决于您的使用案例。如果你不希望同时存在多个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吗？

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

页面和对象的JavaScript外部代码 - 最佳实践

1 个答案: