Question

我正在使用基于此处列出的轻量级插件模式的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。完成此任务的最佳方法是什么？如果插件模式并不意味着有多个脚本，那么还有其他适用于此的练习吗？

谢谢。

Answer 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);

JQuery插件模式 - 多个脚本的代码组织

1 个答案: