JavaScript插件化开发教程 (一)


Posted in Javascript onJanuary 27, 2015

一,开篇分析

Hi,大家!今天这系列文章主要是说说如何开发基于“JavaScript”的插件式开发,我想很多人对”插件“这个词并不陌生,

有的人可能叫“组件”或“部件”,这不重要,关键是看如何设计,如何做一个全方位的考量,这是本文的重点阐述的概念。我想大家对

“jQuery插件的方式”有一定的了解,我们结合这个话题一起讨论一下,最终给出相关的实现方案,来不断提高自己的谁能力。

JavaScript插件化开发教程 (一)

二,进入插件正题

一般来说,jQuery插件的开发分为两种:一种是挂在jQuery命名空间下的全局函数,也可称为静态方法。

另一种是jQuery对象级别的方法,即挂在jQuery原型下的方法,这样通过选择器获取的jQuery对象实例也能共享该方法。

(1),类级别的插件开发

类级别的插件开发最直接的理解就是给"jQuery"类添加类方法,可以理解为添加静态方法。典型的例子就是"$.ajax()"这个函数,将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展:

1.1添加一个全局函数,我们只需如下定义,看代码: 

$.hello = function(){

    alert("Hello,大熊君!") ;

} ;

1.2添加多个全局函数,可采用如下定义:

$.extend({

    hello : function(name){

        // put your code here

    } ,

    world : function(){

        // put your code here

    }

}) ;

说明:”$.extend(target, [object1], [objectN])“(该方法主要用于合并两个或更多对象的内容(属性)到第一个对象,并返回合并后的第一对象。

如果该方法只有一个参数target,则该参数将扩展jQuery的命名空间,即作为静态方法挂在jQuery全局对象下)。

(2),对象级别的插件开发

 对象级别的插件开发需要如下的两种形式:

 2.1通过“$.fn.extend()”为原型动态挂载相关的属性。

(function($){   

    $.fn.extend({   

        pluginName : function(opts){   

            // put your code here

        }   

    }) ;   

})(jQuery) ;  

 2.2直接添加动态属性到原型链上。

 (function($) {     

     $.fn.pluginName = function(){   

         // put your code here  

     } ;   

 })(jQuery) ; 

说明一下:二者是等价的,对于一个jQuery插件,一个基本的函数就可以很好地工作,但是对于复杂一点的插件就需要提供各种各样的方法和私有函数。

你可能会使用不同的命名空间去为你的插件提供各种方法,但是添加过多的命名空间反而会使代码变得混乱,健壮性下降。所以最好的解决办法是适当地定义私有函数和方法。

所以我们通过自执行函数与闭包的结合实现模拟的私有插件单元,就像我们上面的实例中一样。

(三),下面给一个简单的例子看看实现的过程:

(1),“html”片段代码,如下:

<div id="bb" style="width:220px;border:1px solid #ccc;">

   <span></span>

   <div 

       style="margin-top:10px;

       margin-bottom:30px;"

   >8     </div>

</div>           

(2),“data.json”定义如下:

{


"text" : "你好,大熊君{{bb}} !" ;

}

(3),"bb.js"代码如下:

$(function(){

    $("#bb").bigbear() ;

}) ;

(function($){

    $.fn.bigbear = function(opts){

        opts = $.extend({},$.fn.bigbear.defaults,opts) ;

        return this.each(function(){

            var elem = $(this) ;

            elem.find("span").text(opts["title"]) ;

            $.get(opts["url"],function(data){

                elem.find("div").text(data["text"]) ;

            }) ;

        }) ;

    } ;

    $.fn.bigbear.defaults = {

        title : "这是一个简单的测试" ,

        url : "data.json"

    } ;

})(jQuery) ;

运行效果:

JavaScript插件化开发教程 (一)

小结一下

(1)“$.fn.bigbear.defaults”提供插件的默认参数选项一个扩展性良好的插件应该是可以让使用者根据需求自定义参数选项,并控制插件的行为,所以提供恢复默认选项是很有必要的。你可以通过jQuery的extend方法来设置这些选项。

(2),“return this.each(){...}”遍历多个元素并返回jQuery使用Sizzle选择器引擎,Sizzle可以为你的函数提供多元素操作(例如对所有类名相同的元素)。这是jQuery几个优秀的特性之一,在开发插件过程中即使你不准备为你的插件提供多元素支持,但为这做准备仍然是一个很好的方式。另外,jQuery有一个很好的特点就是可以进行方法级联,也可称为链式调用,所以我们不应该破坏这个特性,始终在方法中返回一个元素。

(四),最后总结

(1),jQuery为开发插件提拱了两个方法,分别是:jQuery.fn.extend(object);  给jQuery对象添加方法。
jQuery.extend(object);  为扩展jQuery类本身.为类添加新的方法。

(2),把全部代码放在闭包(一个即时执行函数)里此时闭包相当于一个私有作用域,外部无法访问到内部的信息,并且不会存在全局变量的污染情况。官方创建开发规范的解释是:a) 避免全局依赖;b) 避免第三方破坏;c) 兼容jQuery操作符'$'和'jQuery '。

(3),提供插件的默认参数选项一个扩展性良好的插件应该是可以让使用者根据需求自定义参数选项,并控制插件的行为,所以提供恢复默认选项是很有必要的。你可以通过jQuery的extend方法来设置这些选项

(4),遍历多个元素并返回jQuery使用Sizzle选择器引擎,Sizzle可以为你的函数提供多元素操作(例如对所有类名相同的元素)。这是jQuery几个优秀的特性之一,在开发插件过程中即使你不准备为你的插件提供多元素支持,但为这做准备仍然是一个很好的实践。另外,jQuery有一个很好的特点就是可以进行方法级联,也可称为链式调用,所以我们不应该破坏这个特性,始终在方法中返回一个元素。

(5),一次性代码放在主循环以外这一条很重要,但是常常被忽略。简单的讲,如果你有一段代码是一堆默认值,只需要被实例化一次,而不是每次调用你插件功能的时候都需要实例化,你应该把这段代码放在插件方法的外面。

(6),大家学习完思考一下,如果项目技术选型换了这些插件又是强依赖“jQuery”机制,我们以前写的插件将会不能用(假设不用jQuery的情况),如何做重构那?

明天的文章就会说一下这个问题,并且将会重构插件的关键逻辑,敬请期待。。。

Javascript 相关文章推荐
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
javaScript call 函数的用法说明
Apr 09 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 Javascript
JavaScript实现前端实时搜索功能
Mar 26 Javascript
微信公众号H5支付接口调用方法
Jan 10 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
javascript canvas实现简易时钟例子
Sep 05 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 Javascript
vue+canvas实现拼图小游戏
Sep 18 Javascript
Js类的构建与继承案例详解
Sep 15 Javascript
js的toLowerCase方法用法实例
Jan 27 #Javascript
js的toUpperCase方法用法实例
Jan 27 #Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 #Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 #Javascript
js判断是否按下了Shift键的方法
Jan 27 #Javascript
js获取json元素数量的方法
Jan 27 #Javascript
javascript修改图片src的方法
Jan 27 #Javascript
You might like
php实现登陆模块功能示例
2016/10/20 PHP
PHP会话控制实例分析
2016/12/24 PHP
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
JsChart组件使用详解
2018/03/04 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
使用python生成杨辉三角形的示例代码
2018/08/29 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
python如何实现复制目录到指定目录
2020/02/13 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
Linux Interview Questions For software testers
2013/05/17 面试题
音乐教学案例
2014/01/30 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
会计岗位职责
2015/02/03 职场文书
公路施工安全责任书
2015/05/08 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
Golang实现AES对称加密的过程详解
2021/05/20 Golang