个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章常用的jquery模板插件——jQuery Boilerplate介绍由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// 这个分号的作用是防止和其他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 命名空间模式，在和其他插件一起使用时，采用命名空间模式避免和其他插件的冲突问题.

最后此篇关于常用的jquery模板插件——jQuery Boilerplate介绍的文章就讲到这里了,如果你想了解更多关于常用的jquery模板插件——jQuery Boilerplate介绍的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： 深入理解javascript构造函数和原型对象
文章推荐： 最强蜗牛蜗牛翻翻乐怎么玩 蜗牛翻翻乐玩法大全
文章推荐： Javascript的setTimeout()使用闭包特性时需要注意的问题
文章推荐： 万灵启源青龙阵营详解 万灵启源青龙阵营阵容搭配攻略
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com