일반적으로 사용되는 jquery 템플릿 플러그인 - jQuery 상용구 소개_jquery

jquery 플러그인을 처음 개발할 때 어디서부터 시작해야 할지 모를 때가 많습니다. 물론 jquery에서 제공하는 공식 형식에 따라 간단한 플러그인을 개발할 수도 있지만 완벽하지 않은 경우가 많습니다. 조심하지 않으면 매우 "나쁜" 플러그인을 만들 것입니다. "플러그인: 유지 관리가 어렵고, 확장이 어렵고, 사용이 번거롭고, 성능이 좋지 않습니다... 지속적인 연습을 통해 천천히 축적되면서 일부 문제는 효과적으로 해결되었습니다. 피했지만 새로운 문제도 발생했습니다. 많은 jquery 플러그인 개발 모델 중에서 어떤 모델이 가장 좋습니까?

개발자가 특정 제약 조건과 사양을 통해 jquery 플러그인 개발 시 "혼란"을 해결하는 데 도움이 되는 템플릿을 제공할 수 있다면 좋을 것 같습니다! 여기서는 실제 개발에서 다음으로 가장 많이 사용되는 jquery 템플릿 플러그인인 jQuery Boilerplate를 주로 소개합니다

jQuery Boilerplate는 jquery 플러그인 개발을 위한 만능 솔루션이 아닙니다. 물론 이는 초보자에게 가장 기본적인 템플릿을 제공하는 것이 목적이 아닙니다. . , 이 템플릿을 기반으로 해당 수정 작업을 수행하기만 하면 됩니다. jQuery Boilerplate에서 제공하는 기본 템플릿을 살펴보겠습니다(익숙해 보이나요? 예, 부트스트랩이 이 모델입니다).

  // 这个分号的作用是防止和其他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 );

위 템플릿은 개체가 한 번만 인스턴스화되고, 체인 호출, 기본 매개변수, 공개 및 비공개 메서드 호출 등 개발 중 대부분의 요구 사항을 충족할 수 있는 경량 기본 템플릿입니다. 예를 살펴보겠습니다.

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

그러나 실제 개발, 특히 특정 규모의 컴포넌트 개발에서는 네임스페이스 충돌, 플러그인 확장성, 공용 메소드를 편리하게 호출하는 방법 등 해결해야 할 많은 문제에 여전히 직면하고 있습니다. 물론 그 중 일부는 개인적인 선호도 때문입니다. 나는 다른 개발 모드를 사용하는 것을 좋아합니다. 여기에서 jQuery Boilerplate는 여러 가지 구성 요소 개발 모드를 제공하며 자신에게 적합한 모드를 선택할 수 있습니다.

경량(기본) 모드는 기본 기본 객체, 간단한 생성자, 기본 매개변수와 전달된 매개변수의 병합, 객체의 다중 인스턴스화를 방지하는 생성자를 포함하여 초보자를 위한 간단하고 보편적인 기본 템플릿을 제공합니다.

위젯 팩토리 팩토리 모드는 복잡한 상태 저장 구성 요소를 구축하기 위해 객체 지향 접근 방식을 사용하는 jquery UI에서 사용되는 일반적인 모드입니다. 이 기본 템플릿은 다음을 제공합니다. 이벤트에 의해 트리거되는 메소드를 포함한 다수의 기본 메소드.
위젯 팩토리 RequireJS 이는 AMD 모듈 로딩 사양을 지원하기 위해 RequireJS를 사용하는 위젯 팩토리의 간단한 캡슐화입니다.
네임스페이스 패턴: 다른 플러그인과 함께 사용할 경우 다른 플러그인과의 충돌을 피하기 위해 네임스페이스 패턴을 사용합니다.