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 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
Ajax基础知识详解
Feb 17 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 Javascript
JS实现纵向轮播图(初级版)
Jan 18 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 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
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
重新认识php array_merge函数
2014/08/31 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
详解Python如何生成词云的方法
2018/06/01 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
Django配置文件代码说明
2019/12/04 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
浅析Python 责任链设计模式
2020/09/11 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
雷人标语集锦
2014/06/19 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS