插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在另外的地方重复使用,方便后期维护
插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在另外的地方重复使用,方便后期维护
$.extend()相对简单,一般很少能够独立开发复杂插件,仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以
$.widget()是一种高级的开发模式,该模式开发出来的部件带有很多jQuery内建的特性,比如插件的状态信息自动保存,各种关于插件的常用方法等
$.fn则是一般插件开发用到的方式,可通过jQuery强大的选择器带来的便利,以及将插件更好地运用于所选择的元素身上,使用的插件也大多是通过此种方式开发
说明:上面代码中,通过$.extend()向jQuery添加了一个sayHello函数,然后通过$直接调用
基本上就是往$.fn上面添加一个方法,名字是我们的插件名称。然后我们的插件代码在这样的解决方法里面展开
1、在插件名字定义的这个函数内部,this指代的是我们在调用该插件时,用jQuery选择器选中的元素,一般是一个jQuery类型的集合。在插件名字定义的这个函数内部,this指代的是我们在调用该插件时,用jQuery选择器选中的元素,一般是一个jQuery类型的集合
2、如果通过调用jQuery的.each()方法处理集合中的每个元素时要注意的是,在each方法内部,this指带的是普通的DOM元素了,若需要调用jQuery的方法那就需要用$来重新包装一下
jQuery一个时常优雅的特性是支持链式调用,选择好DOM元素后可以不断地调用其他方法。要让插件不打破这种链式调用,只需return一下即可
1、一个强劲的插件是可以让使用者随意定制的,这要求咱们提供在编写插件时就要考虑得全面些,尽量提供合适的参数
2、比如现在我们不想让链接只变成红色,我们让插件的使用者自己定义显示什么颜色,要做到这一点很方便,只需要使用者在调用的时候传入一个参数即可。同时我们在插件的代码里面接收
4、在处理插件参数的接收上,通常使用jQuery的extend方法,当给extend方法传递一个以上的参数时,它会将所有参数对象合并到第一个里。同时,如果对象中有同名属性时,合并的时候后面的会覆盖前面的。
5、可以在插件里定义一个保存插件参数默认值的对象,同时将接收来的参数对象合并到默认对象上,最后就实现了用户指定了值的参数使用指定的值,未指定的参数使用插件默认值
6、保护好默认参数:做法是将一个新的空对象做为$.extend的第一个参数,defaults和用户传递的参数对象紧随其后,这样做的好处是所有值被合并到这个空对象上,保护了插件里面的默认值
1、不单单是jQuery插件的开发,我们在写任何js代码时都需要注意的一点是不要污染全局命名空间。因为随着你代码的增多,如果有意无意在全局范围内定义一些变量的话,最后很难维护,也容易跟别人写的代码有冲突
2、比如你在代码中向全局window对象添加了一个变量status用于存放状态,同时页面中引用了另一个别人写的库,也向全局添加了这样一个同名变量,最后的结果肯定不是你想要的。所以不到万不得已,一般我们不会将变量定义成全局的
这样能够尽可能的防止我们将这段代码放到页面后,前面别人写的代码没有用分号结尾,这样,这个插件代码就会报错。
1、我们下载的插件里面,大多数都会提供一个压缩的版本一般在文件名里带个min字样。也就是压缩后的版本。并且平时个人会使用的jQuery也是官网提供的压缩版本,jquery.min.js
2、这里的压缩不是指代码进行功能上的压缩,而是通过将代码里面的变量名,方法函数名等等用更短的名称来替换,并且删除注释(如果有的话)删除代码间的空白及换行所得到的浓缩版本。同时由于代码里面的各种名称都已经被替代,别人无法阅读和分清其逻辑,也起到了混淆代码的作用
在javascript中,没有真正意义的共有变量、私有变量、常量等概念,当javascript代码达到一定数量级时,过段时间回头看自己写的代码,会把自己也搞晕的
4、object、array变量前加“o”、“a”很多人喜欢给数组变量加个”s”,这也能的,按个人习惯,如果你觉得有必要还可以给函数前加个“fn”。
1、请多使用data()方法jquery中data()方法很有用,尤其在jquery插件开发中,因为data()所创建的缓存,可以完整的保存各种数据类型的数据,这是其他缓存机制无法比拟的
4、插件名加个独有前缀 jquery插件有太多了,插件撞车时很容易的事,比如搜索框插件:
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
Hashslider – 带有 Hash 标签功能的 jQuery 内容滑块
一条命令迁移,帮你实现 OpenClaw 与 Hermes Agent 记忆互通!