0

我正在使用基于此处列出的轻量级插件模式的 JQuery 开发客户端。

https://github.com/jquery-boilerplate/jquery-patterns/blob/master/patterns/jquery.basic.plugin-boilerplate.js

我一直在处理一个文件，但由于超过 1000 行代码，它变得臃肿不堪。所以我决定拆分脚本，但我无法找到使用 jQuery 保存多个脚本的最佳实践。

我的主要脚本如下：

;(function($, window, document, undefined) {
   function MainClass(){
       this.other = new Otherclass(); // Otherclass is defined in separate script
   }

   MainClass.prototype = {
   ...
   }

   $.fn.mainclass = function(){
   ...
   }
})(jQuery, window, document);

HTML如下：

<html>
   <head>
      // JQuery included
      <script type="text/javascript" src="mainclass.js></script>
      <script>
      $(function() {
         $("body").mainclass();
      });
      </script> 
   </head>
</html>

问题：我需要在单独的文件中定义 otherclass。实现这一目标的最佳方法是什么？如果插件模式不打算有多个脚本，还有其他适合这个的做法吗？

谢谢你。

4

1 回答 1

1

您正在使用的模块模式是朝着正确方向迈出的良好的第一步。插件模式的真正目的是为给定的一组元素封装一个特定的功能，并且很好地遵循开放/封闭原则，通过设计（为扩展开放）。但是，由于它的主要行为是作为 jQuery 对象的扩展方法，因此它不是多对象交互的好方法。

我能够将 JavaScript 拆分为页面/多个文件的一件事是结合使用命名空间和模块扩充/导入/导出。

命名空间非常适合导入和取消引用应用程序的其他部分，模块模式有助于选择暴露并导出适量的对象可重用成员。从那里，我可以取消引用命名空间中的任何对象，从中创建新实例，等等：

//In some common site-wide file, declare a common namespace and known base objects within it:

var App = {
   View: {},
   Utilities: {}
};

// view.js
App.View = (function($, window, document, undefined) {
    var localProp = "Hi, i'm a private property for App.View to access";

    function doSomething(){
       // a private method for use
    }

    return {
       reuseableMethod: function() {
          // exported for access through App.View.reusableMethod()
       }
    };

})(jQuery, window, window.document, undefined);

// another script, more specific, different file
// NOTE: the import and export of App.View and view
(function($, window, document, view) {
   // consume your other objects after importing them
   var me = Object.create(view);

   me.reuseableMethod();

   function localFunction() {
     //do something private
   }

})(jQuery, window, window.document, App.View);
于 2013-08-13T06:38:53.010 回答