Commonly used jquery template plug-ins - jQuery Boilerplate introduction_jquery

When we first develop jquery plug-ins, we often have no idea where to start. Of course, we can develop simple plug-ins according to the official format provided by jquery, but many times it is not perfect. If we are not careful, we will create a very "bad" plug-in. "Plug-ins: difficult to maintain, difficult to expand, cumbersome to use, poor performance... As we slowly accumulated through continuous practice, some problems were effectively avoided, but it also brought new problems: Among the many jquery plug-in development models, which model is the best?

It would be great if a template could be provided to help developers solve the "confusion" in jquery plug-in development through certain constraints and specifications! Here we mainly introduce the next most commonly used jquery template plug-in in actual development-jQuery Boilerplate

jQuery Boilerplate is not a silver bullet for jquery plug-in development. It does not provide perfect solutions for various modes. Of course, this is not the goal it pursues. Its purpose is only to provide a most basic template for beginners. , you only need to make corresponding modifications based on this template. Let’s take a look at a basic template provided by jQuery Boilerplate (does it look familiar? Yes, bootstrap is this model):

  // 这个分号的作用是防止和其他jquery插件合并时，别人不规范的jquery插件忘记使用分号结束
  //影响到我们当前的插件，导致无法运行的问题。 
  ;(function ( $, window, document, undefined ) {

      // undefined作为形参的目的是因为在es3中undefined是可以被修改的
      //比如我们可以声明var undefined = 123,这样就影响到了undefined值的判断，幸运的是在es5中,undefined不能被修改了。
      // window和document本身是全局变量，在这个地方作为形参的目的是因为js执行是从里到外查找变量的（作用域），把它们作为局部变量传进来，就避免了去外层查找，提高了效率。

      // 声明默认属性对象
      var pluginName = "defaultPluginName",
          defaults = {
          propertyName: "value"
      };

      // 构造函数
      function Plugin ( element, options ) {
          this.element = element;
          // 将默认属性对象和传递的参数对象合并到第一个空对象中
          this.settings = $.extend( {}, defaults, options );
          this._defaults = defaults;
          this._name = pluginName;
          this.init();
      }

      // 为了避免和原型对象Plugin.prototype的冲突，这地方采用继承原型对象的方法
      $.extend(Plugin.prototype, {
          init: function () {
                // 初始化，由于继承自Plugin原型，
                // 你可以在这里直接使用this.element或者this.settings
              console.log("xD");
          },
          yourOtherFunction: function () {
              // some logic
          }
      });

      // 对构造函数的一个轻量级封装，
      // 防止产生多个实例
      $.fn[ pluginName ] = function ( options ) {
          this.each(function() {
              if ( !$.data( this, "plugin_" + pluginName ) ) {
                  $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
              }
          });

          // 方便链式调用
          return this;
      };

  })( jQuery, window, document );

The above template is a lightweight basic template that can meet most of our needs during development, such as: objects are instantiated only once, chain calls, default parameters, and calls to public and private methods. Let’s look at an example:

http://jsfiddle.net/mirandaasm/wjPvF/3/

But in actual development, especially in component development of a certain scale, we still face many problems that need to be solved, such as namespace conflicts, plug-in scalability, and how to conveniently call public methods? Of course, part of it is due to personal preference. I like to use other development modes. Here jQuery Boilerplate also provides several different modes of component development. You can choose the one that suits you:

The lightweight (basic) mode provides a simple and universal basic template for beginners, including basic default objects, simple constructors, merging of default parameters and passed parameters, and constructors to prevent multiple instantiations of objects. Simple encapsulation.

Widget factory factory mode, yes, the typical mode used by jquery ui, using an object-oriented approach to build complex stateful components. Most of the components in jquery ui rely on the widget factory basic component. This basic template provides a large number of Some of the default methods, including event-triggered methods.
Widget factory RequireJS This is a simple encapsulation of the Widget factory using RequireJS to support the AMD modular loading specification.
Namespaced pattern: When used with other plug-ins, the namespace pattern is used to avoid conflicts with other plug-ins.