[原创]jQuery插件开发模式_Android, SSH及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Android, SSH及开发编程讨论区 »
总帖数
1
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 1390 | 回复: 0   主题: [原创]jQuery插件开发模式        上一篇   下一篇 
    本主题由 hui.chen 于 2017-3-16 9:49:17 版块置顶
panpan.nie
注册用户
等级:大校
经验:4759
发帖:217
精华:2
注册:1970-1-1
状态:离线
发送短消息息给panpan.nie 加好友    发送短消息息给panpan.nie 发消息
发表于: IP:您无权察看 2016-5-30 16:58:39 | [全部帖] [楼主帖] 楼主

jQuery插件开发模式

软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我们的代码,并且从这些前人总结出来的模式中学到很多好的实践。

根据《jQuery高级编程》的描述,jQuery插件开发方式主要有三种:

  1. 通过$.extend()来扩展jQuery

  2. 通过$.fn 向jQuery添加新的方法

  3. 通过$.widget()应用jQuery UI的部件工厂方式创建

通常我们使用第二种方法来进行简单插件开发,说简单是相对于第三种方式。第三种方式是用来开发更高级jQuery部件的,该模式开发出来的部件带有很多jQuery内建的特性,比如插件的状态信息自动保存,各种关于插件的常用方法等。而第一种方式又太简单,仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而已。所以我们调用通过$.extend()添加的函数时直接通过$符号调用($.myfunction())而不需要选中DOM元素

$.extend({
    sayHello: function(name) {
        console.log('Hello,' + (name ? name : 'Dude') + '!');
    }
})
$.sayHello(); //调用$.sayHello('Wayou'); //带参调用

 上面代码中,通过$.extend()向jQuery添加了一个sayHello函数,然后通过$直接调用。到此你可以认为我们已经完成了一个简单的jQuery插件了。

 但是这种方式无法利用jquery 强大的选择器带来的便利,要处理DOM元素以及将插件更好的运用于所选择的元素上,还需要使用第二种开发方式。

插件开发

 基本格式:

$.fn.pluginName = function() {    //your code goes here}

往 $.fn 上面添加一个方法,名字是我们的插件名称。然后 插件代码在这个方法里面展开。

例:

<ul>
    <li>
        <a href="http://www.webo.com/liuwayong">我的微博</a>
    </li>
    <li>
        <a href="http://http://www.cnblogs.com/Wayou/">我的博客</a>
    </li>
    <li>
        <a href="http://wayouliu.duapp.com/">我的小站</a>
    </li>
</ul>
<p>这是p标签不是a标签,我不会受影响</p>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.myplugin.js"></script>
<script type="text/javascript">
    $(function(){
        $('a').myPlugin();
    })</script>

而 jquery.myplugin.js 为我们自定义的插件,内容如下:

$.fn.myPlugin =  this.css('color', 'red');
}

有的时候,当一个页面可能会引用多个插件的时候,为了保证插件的正确,我们可以在我们的插件起始加一个 ; 来表示上一个插件结束,开始新的插件

 

调用插件的方法 $('a').myPlugin() 相当于 $('a').css('color','red'); 即把所有的a标签转为红色

插件里面的this 指代jquery 选择器返回的集合,而通过调用 jQuery 的.each() 方法可以处理合集中 的每个元素了。在each 方法内部,this指代的时候普通的DOM 元素,所以需要用$包装,如$(this) 

$.fn.myPlugin = function() {    //在这里面,this指的是用jQuery选中的元素
    this.css('color', 'red');    this.each(function() {        //对每个元素进行操作
        $(this).append(' ' + $(this).attr('href'));
    }))
}

上面的插件意思:把所有的链接转为红色,并且将每个链接显示真实的链接地址

 

jquery有一个特性就是 支持链式调用,选择好的DOM元素后可以不断的调用其他方法,要不打破这种链式调用,需要把最后的值 return 一下

而一个好的插件是可以让使用者随意定制的,所以需要在编写插件是要考虑的全面一些,尽量提供合适的参数。比如,我们可以让用户定义显示什么颜色。需要让使用者在调用的时候传入一个参数,我们在插件代码里面接受即可。为了灵活,使用者可以不传递参数,插件里面采用默认值。为了保护好默认参数,所以第一个值使用新的空对象{}

$.fn.myPlugin = function(options) {    
var defaults = {        
'color': 'red',        
'fontSize': '12px'
    };    
    var settings = $.extend({},defaults, options);    
    return this.css({        
    'color': settings.color,        
    'fontSize': settings.fontSize
    });
}

在处理插件参数的接收上,通常使用Jquery的extend方法。当给extend方法传递一个以上的参数时,它会将所有参数合并到第一个里,同时,如果对象中有同名属性时,合并的时候后面的会覆盖前面的。

 

 面向对象的插件开发

 需要一个方法是就去定义一个function,需要变量是就去定义一个变量,这样不方便维护,也不够清晰。一旦代码较多的时候,还是使用面向对象的思维比较好。

将需要的重要变量定义到对象的属性上,函数变成方法,当我们需要的时候通过对象来获取,一来方便管理,二来不会影响外部命名空间,因为变量名和方法名都在对象内部

(function() {
    //定义Beautifier的构造函数
    var Beautifier = function(ele, opt) {
        this.$element = ele,
        this.defaults = {
            'color': 'red',
            'fontSize': '12px',
            'textDecoration': 'none'
        },
        this.options = $.extend({}, this.defaults, opt)
    }
    //定义Beautifier的方法
    Beautifier.prototype = {
        beautify: function() {
            return this.$element.css({
                'color': this.options.color,
                'fontSize': this.options.fontSize,
                'textDecoration': this.options.textDecoration
            });
        }
    }
    //在插件中使用Beautifier对象
    $.fn.myPlugin = function(options) {
        //创建Beautifier的实体
        var beautifier = new Beautifier(this, options);
        //调用其方法
        return beautifier.beautify();
    }})();

在写任意js代码时都应该注意 不要污染全局命名空间。因为随着代码的变多,全局范围的变量很难维护,也容易跟别人的代码有冲突。最好始终用 自调用匿名函数 包裹代码

如上面的例子,我们调整了代码的组织结构,并将其用自调用匿名函数包裹。自调用匿名函数里面的代码会在第一时间执行,方便后面的代码使用插件。

为了防止多个插件同时使用时,有的插件没有用分号结尾,最好在代码开始加个分号 ; 

而,原有的系统变量也有可能被更改,所以最好将系统变量以参数形式传递到插件内部。这样插件内部就有一个局部的引用,可以提高访问速度,会有些许性能提升

结构如下:

;(function($,window,document,undefined){
    //我们的代码。。
    //blah blah blah...
})(jQuery,window,document);

  而至于这个undefined,稍微有意思一点,为了得到没有被修改的undefined,我们并没有传递这个参数,但却在接收时接收了它,因为实际并没有传,所以‘undefined’那个位置接收到的就是真实的'undefined'了。

最终,这个插件应该为:

;(function($, window, document,undefined) {
    //定义Beautifier的构造函数
    var Beautifier = function(ele, opt) {
        this.$element = ele,
        this.defaults = {
            'color': 'red',
            'fontSize': '12px',
            'textDecoration': 'none'
        },
        this.options = $.extend({}, this.defaults, opt)
    }
    //定义Beautifier的方法
    Beautifier.prototype = {
        beautify: function() {
            return this.$element.css({
                'color': this.options.color,
                'fontSize': this.options.fontSize,
                'textDecoration': this.options.textDecoration
            });
        }
    }
    //在插件中使用Beautifier对象
    $.fn.myPlugin = function(options) {
        //创建Beautifier的实体
        var beautifier = new Beautifier(this, options);
        //调用其方法
        return beautifier.beautify();
    }
})(jQuery, window, document);

  

参考:http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html

 



该贴被panpan.nie编辑于2016-5-30 17:01:03



赞(0)    操作        顶端 
总帖数
1
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论