常用的jquery模板插件——jQuery Boilerplate介绍


Posted in Javascript onSeptember 23, 2014

在初次进行jquery插件开发时,我们往往无从下手,当然我们可以按照jquery官方提供的格式进行简单的插件开发,但是很多时候往往不尽完美,一不小心,就造出一个很“烂”的插件:难以维护、难以扩展、使用繁琐、性能不佳...当我们在不断的实践中,慢慢积累下来时,有些问题得到了有效的避免,但也带来了新的问题:在众多纷杂的jquery插件开发模式中,究竟哪一种模式才是最好的呢?

如果能提供一个模板,通过一定的约束和规范为开发者解决在jquery插件开发中的“迷惘”那该多好!在这里主要介绍下一个在实际开发中最常用的jquery模板插件——jQuery Boilerplate

jQuery Boilerplate不是jquery插件开发的银弹,他并没有提供各种模式的完美解决方案,当然这也不是他所追求的目标,他的目的只是提供一个最基础的模板,对于初学者而言,你只需要在这个模板的基础上做相应的修改即可。来看一下jQuery Boilerplate提供的一个基础模板(是不是觉得很熟悉呢?没错,bootstrap就是这个模式):

// 这个分号的作用是防止和其他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也提供了几种不同模式的组件开发方式,你可以选择一个适合你的使用:

轻量级(基础)模式 为初学者提供的一个简单通用的基础模板,包括基础的默认对象、简单的构造函数、默认参数和传递参数的合并以及防止对象多次实例化的构造函数的简单封装。

Widget factory 工厂模式,没错,jquery ui使用的典型模式,使用面向对象的方式构建复杂有状态的组件,jquery ui中的组件大部分依赖于widget factory基础组件,这个基础模板提供了大部分的默认方法,包括事件触发方法。
Widget factory + RequireJS 这是个使用RequireJS对Widget factory进行简单封装,使其支持AMD模块化加载规范。
Namespaced pattern 命名空间模式,在和其他插件一起使用时,采用命名空间模式避免和其他插件的冲突问题。

Javascript 相关文章推荐
jquery 简短右键菜单 多浏览器兼容
Jan 01 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
详解JavaScript的this指向和绑定
Sep 08 Javascript
Nuxt 项目性能优化调研分析
Nov 07 Javascript
JavaScript中的几种继承方法示例
Dec 06 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 #Javascript
IE6 hack for js 集锦
Sep 23 #Javascript
深入理解javascript作用域和闭包
Sep 23 #Javascript
js变量、作用域及内存详解
Sep 23 #Javascript
js单独获取一个checkbox看其是否被选中
Sep 22 #Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 #Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 #Javascript
You might like
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
php中的时间处理
2006/10/09 PHP
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
php计算税后工资的方法
2015/07/28 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
WebStorm ES6 语法支持设置&babel使用及自动编译(详解)
2017/09/08 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
mac下如何将python2.7改为python3
2018/07/13 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
奖学金自我鉴定范文
2013/10/03 职场文书
好的自荐信包括什么内容
2013/11/07 职场文书
旷课检讨书大全
2014/01/21 职场文书
期中考试后的反思
2014/02/08 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
影子教师研修方案
2014/06/14 职场文书
节能减耗标语
2014/06/21 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
销售合作意向书范本
2015/05/08 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python