• jQuery组件写法


    知识点:
    什么是插件
    jQuery插件的模式
    jQuery插件的Lightweight Start模式(入门级插件模式)
    
    8.1 插件(Plug-in)
            “插件”这个关键字,估计大家在日常生活中经常有所耳闻。例如:各网页浏览器,允许用户安装一些插件,增强用户体验,常见的Adobe Flash播放器,银行安全交易插件等。对于不做编程的朋友来说,是一个无所谓的词,但是对于咱们IT技术行业的朋友来说,是必须要了解,知道的。
           咱们不是学者,不做特别规范的学术性研究,只要能够理解、够用就可以了。
           因为咱们只是编程行业,所以将插件首先约束在编程领域试着理解。“插件”,是一段程序,它是与主应用程序交互,并扩展、替代主应用程序特定模块(功能)。
            在js及js的一些框架Jqurey、ExtJs、Prototype···也比较流行以开发插件的形式,增强其程序的健壮性、伸缩性、安全性。其中JQuery的流行程度、市场占有率是最高的,当然也是咱们本次学习的 主题。
            以下两个网址是官方资料,感兴趣的朋友可以去了解一下。
            jQuery官网:http://jquery.com/
            jQuery官网插件,有许多比较稳定、实用的插件,如果您感兴趣,也可以向官方贡献你的代码:http://plugins.jquery.com/  
    
            下面一段代码展示了jQuery插件Django Superformset 的写法:
            /*
     * django-superformset
     * https://github.com/jgerigmeyer/jquery-django-superformset
     *
     * Based on jQuery Formset 1.1r14
     * by Stanislaus Madueke
     *
     * Original Portions Copyright (c) 2009 Stanislaus Madueke
     * Modifications Copyright (c) 2013 Jonny Gerig Meyer
     * Licensed under the BSDv3 license.
     */
    
    (function ($) {
    
        'use strict';
    
        var methods = {
            init: function (opts) {
                var vars = {};             var opti = $.extend({}, $.fn.superformset.defaults, opts);
                var wrapper = vars.wrapper = $(this);
                var rows = vars.rows = wrapper.find(options.rowSel);             var c = rows.closest(options.containerSel);
    
    //@余下的代码略···
    }(jQuery));
     
            完整代码示例下载:http://plugins.jquery.com/django-superformset/
            另外,谢谢Jonny Gerig Meyer代码。
            如果您还帮助别人解决一些常见的问题,或者想按照自己的想法写一些有趣并可以重复使用的一些插件,那么请跟紧我的步伐,继续学习
    8.2 模式
           学习任何知识首先需要了解一下基础和一些规则,才能够在其上面构建自己需要的东西。学习jQuery插件也不例外,在很多社区都有一些最佳实践,我们先看看一些最基本的jQuery插件知识。
            第一种写法如下,
            代码1:
            $.fn.myPluginName = function(){
                    //@您的插件业务逻辑
            }
            代码2:
            (function ($) {
                $.fn.myPluginName = function(){
                     //@您的插件业务逻辑
                 }
            })(jQuery);
            代码1与代码2有什么不同,相信对于大家已经明朗化了。第一,将带有 $.fn.myPluginName的代码放入闭包中,可以与外部环境隔离,防止产生冲突,还可以将闭包看做一个模块,以结构化代码的作用;第二,将jQuery以参数的形式传递进去,映射到$符上,可以防止在其它JavaScript库之间产生冲突。
            第二种写法如下,
            我们可以利用jQuery的jQuery.extend(),能够一次定义多个函数,这种写法的主要意义就是在语义表达上更好。
            代码3:
            (function ($) {
                $.extend($.fn, {
                    myPlugin : function () {
                         //@您的插件业务逻辑
                    }
                });
            })(jQuery)
    8.3 Lightweight Start模式
            通过上边的介绍,大家已经具备jQuery插件的基础知识了。下面通过一段简单的代码向大家展示一下Lightweight Start模式,具体解释请看代码注释。
            代码4:
            /*
             * jQuery Lightweight 插件
             * 新浪微博  :@席新亮_javascript_html5 
             * QQ:939898101
             * Email:939898101@qq.com
             */
            
            /*
             *1,在代码开始之前,加一个分号,可以防止没有正常关闭的插件
             *2,undefined是ECMAScript3中定义的,可以修改,但在ECMAScript5中undefined不能修改。
             *   undefined没有真正传递进来以保证是真正的undefined
             *3,把window与document传递进来作为局部变量,可以减少作用域的访问,加快速度,以及降低引用同一个插件的影响
             */
            ; (function ($, window, document, undefined) {
                    //私有  默认变量
                    var myPluginName = "defaultName",
                          defaults = {
                              otherName : "value"
                          };
                    //私有 构造插件的函数
                    var ctorPlugin = function (element, options) {
                        this.element = element;
                       
                         //利用jQuery 的extend 方法合并对象                     this.opti defaults, options);
                        
                        this._default = defaults;
                        this.name = myPluginName ;
                        this.init();
                    };
                //原型链上添加方法
    
                ctorPlugin .prototype.init = function () {
    
                    //执行一些初始化的逻辑,然后就可以访问DOM,进行一些业务处理  
    
                };
    
                
    
                //将插件包装起来,利用模块模式,防止多次实例出现
    
                $.fn[myPluginName ] = function (options) {
    
                    return this.each(function () {
    
                        var myPluginNameStr =  "plugin_"   myPluginName ;
    
    
                        if (!$.data(this, myPluginNameStr )) {
    
                            $.data(this, myPluginNameStr   , new ctorPlugin (this, options));
    
                        }
    
                    });
    
                };
                
            })(jQuery, window, document);
    
            用法如下:  elementStr为获取节点的指定字符
            $(elementStr). defaultName({
                otherName : "your value"
            });
            通过以上代码可以看出:
    必须有分号
    将window、document、undefined作为参数传入
    一些基本的(私有)默认对象
    简单的插件构造函数,执行一些初始化
    扩展默认值的一些选项
    一个包装器避免多次创建
    8.4 扩展视野
        jQuery 插件官方学习:http://learn.jquery.com/plugins/
    just do myself
  • 相关阅读:
    Javascript常见全局函数
    字符串入门练习题1 好长好长的字符串 题解
    字符串入门 讲义
    初等排序 大纲
    初等排序 讲义
    排序入门练习题10 病人排队 题解
    排序入门练习题9 合影效果 题解
    排序入门练习题7 分数线划定 题解
    排序入门练习题8 整数奇偶排序 题解
    排序入门练习题6 奖学金 题解
  • 原文地址:https://www.cnblogs.com/rookieCat/p/4612312.html
Copyright © 2020-2023  润新知