常用的jquery模板插件
来源: 阅读:712 次 日期:2016-06-20 10:38:50
温馨提示: 小编为您整理了“常用的jquery模板插件”,方便广大网友查阅!

在初次进行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 命名空间模式,在和其他插件一起使用时,采用命名空间模式避免和其他插件的冲突问题。

更多信息请查看脚本栏目
下一篇:文字逐个变色
手机网站地址:常用的jquery模板插件
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map