轩枫阁

首页 / Web前端 / 授人以渔 / Javascript / jQuery插件写法总结以及面向对象方式写法总结

jQuery插件写法总结以及面向对象方式写法总结

前言

最近在折腾jQuery插件,写成插件的目的就是为了实现功能与项目相分离,使得这个代码在下一个项目中能直接引用不出错。这使得我们在写插件的时候,就得考虑清楚,怎么写才能使得插件能够通用、灵活度高、可配置、兼容性好、易用性高、耦合度低等。

接下来就对以下几种写法进行分析,前两个是jQuery插件,后面2个是以对象的形式开发,都类似。而且写法也很多,我们要懂得这样写的利弊。另一篇基础文章:jQuery 插件写法

写法一

插件主体

调用

点评

1. 自调用匿名函数

用处:通过定义一个匿名函数,创建了一个“私有”的命名空间,该命名空间的变量和方法,不会破坏全局的命名空间。这点非常有用也是一个JS框架必须支持的功能,jQuery被应用在成千上万的JavaScript程序中,必须确保jQuery创建的变量不能和导入他的程序所使用的变量发生冲突。

2. 匿名函数为什么要传入window

通过传入window变量,使得window由全局变量变为局部变量,当在jQuery代码块中访问window时,不需要将作用域链回退到顶层作用域,这样可以更快的访问window;这还不是关键所在,更重要的是,将window作为参数传入,可以在压缩代码时进行优化,看看jquery.min.js:

3. 全局变量this定义

使得在插件的函数内可以使用指向插件的this

4. 插件配置

设置默认参数,同时也可以再插件定义时传入参数覆盖默认值

5. 初始化函数

一般的插件会有init初始化函数并在插件的尾部初始化

6. 私有函数、公有函数

私有函数:插件内使用,函数名使用”_”作为前缀标识

共有函数:可在插件外使用,函数名使用”this.”作为前缀标识,作为插件的一个方法供外部使用

7. return this

最后返回jQuery对象,便于jQuery的链式操作

写法二

主体结构

点评

1. 美观

插件的方法写在外部,并通过在插件主体传递this的方式调用

2. 定义插件版本号

不过在这里还是没有用到

3. 关于call

这里的第一个参数为传递this,后面的均为参数

语法:

定义:调用一个对象的一个方法,以另一个对象替换当前对象。

说明:call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

4. 关于”this”

在插件的方法中,可能有用到指向插件的this、和指向事件触发的this,所以事件触发的this用event来获取:event.cuerrntTarget

  • event.currentTarget:指向事件所绑定的元素,按照事件冒泡的方式,向上找到元素
  • event.target:始终指向事件发生时的元素

如:

html代码

 js代码

结果输出

写法三(原生写法)

主体结构

使用

点评

1. 关于属性覆盖(对象深拷贝)

原生函数实现方法

demo:

基于jQuery的实现方法

用一个或多个其他对象来扩展一个对象,返回被扩展的对象。

如果不指定target,则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象。否则的话,副本会与原对象共享结构。 未定义的属性将不会被复制,然而从对象的原型继承的属性将会被复制。

demo:

 2. 关于this

这个对象的所有方法的this都指向这个对象,所以就不需要重新指定

写法四

主体结构

点评

写法四和写法三其实都差不多,但是你们有没有看出其中的不一样呢?

1. 两种都是利用原型链给对象添加方法

写法三:

写法四:

细看写法四利用“对象直接量”的写法给EditorUtil对象添加方法,和写法三的区别在于写法四这样写会造成consturctor属性的改变

constructor属性:始终指向创建当前对象的构造函数

每个函数都有一个默认的属性prototype,而这个prototype的constructor默认指向这个函数。如下例所示:

 

当时当我们重新定义函数的prototype时(注意:和上例的区别,这里不是修改而是覆盖),constructor属性的行为就有点奇怪了,如下示例:

为什么呢?

原来是因为覆盖Person.prototype时,等价于进行如下代码操作:

而constructor属性始终指向创建自身的构造函数,所以此时Person.prototype.constructor === Object,即是:

怎么修正这种问题呢?方法也很简单,重新覆盖Person.prototype.constructor即可:

一个最近写的拖拽排序的demo(惯例F12查看代码吧):http://xuanfengge.com/demo/201401/dragSort/

267/470
269/470

相关阅读

文章评论

  • 看完感觉都快爱上楼主了,好腻害的样子

  • 不明觉厉

  • 写法3 私有方法和共有方法 区别在哪?

  • lz真腻害,谢谢分享

  • 请问下,第三四种,构造函数加原型的方式写的js,也可以叫做插件吧。(因为自己习惯了纯js的写法,没有特意去看jq…)

    • 算是的,很多插件也是按照这个写法,面向对象的方式

  • 234

    <img src="%5B%E8%A1%B0%5D" alt=" ” />

  • 喜欢第一种和第二种模式,作者写的太任性了,怎么可以这么的透彻。

  • 哇哦,搞前段开发的。网站的主题不错,自己写的吗?

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子