插件开发

http://www.jianshu.com/p/518d424d4994


我们先看个例子:$("a").css("color","red")。我们知道每个jQuery对象都会包含jQuery中定义的DOM操作方法,这里使用$方法来选择a元素,返回一个a元素的jQuery对象,这个对象就可以使用jQuery中定义的DOM操作方法。那么jQuery对象是如何获取这些方法的呢?其实jQuery内部定义了一个jQuery.fn对象,查看jQuery源码可以发现jQuery.fn=jQuery.prototype,也就是说jQuery.fn对象是jQuery的原型对象,jQuery的DOM操作方法都在jQuery.fn对象上定义的,然后jQuery对象就可以通过原型继承这些方法。

基础版jQuery插件

知道了上面这些知识,我们就可以来写一个简单的jQuery插件。假如我现在需要一个jQuery插件用来改变标签内容颜色,就可以按下面的方式来实现这个插件:

$.fn.changeStyle =function(colorStr){this.css("color",colorStr);}


满足链式调用的jQuery插件

满足链式调用的jQuery插件

链式调用时jQuery的一大特色,一个通用的插件应该遵循jQuery风格,满足链式调用要求。实现链式调用的方式也很简单:

$.fn.changeStyle =function(colorStr){this.css("color",colorStr);returnthis;}

然后使用的时候就可以链式调用其他方法了:

$("p").changeStyle("red").addClass("red-color");



保护好默认参数

注意到上面代码调用extend时会将defaults的值改变,这样不好,因为它作为插件因有的一些东西应该维持原样,另外就是如果你在后续代码中还要使用这些默认值的话,当你再次访问它时它已经被用户传进来的参数更改了。

var settings = $.extend({},defaults, options);//将一个空对象做为第一个参数

-------------------------------------------------------------------------------------------------

.$.fn2.全局变量-闭包?构造函数 参照开源代码


2种调用

div上 

$('#table').bootstrapTable({})

构造函数 new



amd

cmd

mit

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 芙蓉雨 郭相麟 芙蓉雨 在心海里飘落 那些被雨湿透的心情 点点滴滴 滋润着干枯的灵魂 生命里的遇见 ...
    郭相麟阅读 254评论 0 3
  • 灵芝的应用范围非常广泛,就中医辩证看,由于本品入五脏肾补益全身五脏之气,所以无论心、肺、肝、脾、肾脏,均可服之。灵...
    拉斐尔针织生活馆阅读 2,339评论 0 1
  • 根据李叫兽的痛点文案方法,区分两种场景下文案的不同。 广告海报,本质上是广告,(需要绑定某个用户群)专注某一用户群...
    Tim爱运营阅读 1,811评论 0 3
  • 12.30日精进:敬畏—进入—体验—交给—持续 1,缺啥补啥,怕啥练啥; 2,一切为我所用,所用为团队家; 3,...
    京心达毕玉娜阅读 192评论 0 0

友情链接更多精彩内容