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 相关文章推荐
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
浅析Jquery操作select
Dec 13 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 Javascript
Openlayers学习之地图比例尺控件
Sep 28 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学习笔记(毕业设计)
2012/02/21 PHP
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
javascript优先加载笔记代码
2008/09/30 Javascript
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
js日历功能对象
2012/01/12 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
Python fileinput模块使用介绍
2014/11/30 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
pandas数值计算与排序方法
2018/04/12 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
Python3的socket使用方法详解
2020/02/18 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
电子商务专业个人的自我评价
2013/12/19 职场文书
社区八一活动方案
2014/02/03 职场文书
杜甫草堂导游词
2015/02/03 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
超强台风观后感
2015/06/09 职场文书
golang中的空slice案例
2021/04/27 Golang