• JQuery插件开发简述


    jQuery优秀的插件不计其数,个人还是看好JQ对DOM完善的操作性。

    先了解几个概念

    把代码放在闭包中

    (function ($) {
        $.fn.extned({
         //code here  
        });
    })(jQuery);
    上述代码等价于
    var justFun = function ($) {
        $.fn.extned({//Code here
        });
    }
    justFun(jQuery);
    为什么要这样,说的官方一点避免全局依赖,避免第三方库的兼容,兼容jQuery与$ 总之好处多多(一般还会在前面加‘;’,体现压缩代码需要遵循规则)。

    为插件提供默认选项

    可以通过jQuery的extend功能来设置这些选项,具体猛击这里:JQuery.extend()与JQuery.fn.extend()
    var defaults = {
        Text: "this is my first JqPlug.",
        Color: "red"
    }; 
    var setting = $.extend({}, defaults, options);

    遵循链式操作

    $.fn.Tabs = function (options) {
        return this.each(function () {
            $(this).xxx; //code here
        })
    }
    这样我们的插件将会支持链式操作

    把一次性的代码放在循环体外

    如插件的配置参数
    var defaults = { Text: "this is my JQPlug",
        Color: "red"
    };
    $.fn.textHover = function (options) {
        var setting = $.extend({}, defaults, options); //code here
    }
    简单的说如果有一段代码是一堆默认值,只需要被实例化一次,而不是每次调用你插件功能的时候都实例化,你应该把这段代码放在插件方法的外面。
    这样可以让你的插件运行的更高效,节省内存。

    管理好 prototype(原型与面向对象)

    function Person(options){ 
        this.name=”Irving”,
        this.age=”22”,
        this.photo=null
     }
     Person.prototype={
     generate:function(){  
        //code here
      } }
    这样有什么好处呢,保证数据是每一个实例自己的,可以用this来引用,避免重复代码,节省内存,好吧 总之各种好处。

    闭包传递正确的this引用(js中的闭包还是要理解一下的)

    可以声明变量来保存 var $this =this;这个要看具体应用,高级话题,我也不太深入 哈哈哈!

    插件的种类

    ok,继续说几点概念,开发JQ插件有几种方式呢!

    封装全局函数($.ajax等方法) 封装对象方法(如$('xx').appendto等方法) 选择器插件(自定义自己的选择器 如$('girlfind bf guy:money(1000000…)'))

    一般情况下选择器插件可以是不必要的,原因不解释,但特殊情况下还是蛮有用的,如做一个隔行变色的插件,后面将会介绍,当然其他方式也可以实现。
    jQuery插件的机制就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法来扩展jQuery的功能。
    扩展全局函数插件
    ; function ($) {
        $.extend({
            getSize: function () { },
            getPage: function () { } //……
        });
    } (jQuery)
    或者简写
    jQuery.getSize=function(){}; jQuery.getPage=function(){};
    备注:上述的写法当然可以加上命名空间
    jQuery.myNameSpace = {
        getSize: function () { },
        getPage: function () { }
    };
    调用jQuery.getSize();或$.getPage();
    优点就是方便,缺点就是破坏JQ本身的贞操,具体什么时候用看最后摘抄的2条,这能为我们扩展什么功能呢,如取出字符串中的空字符串,序列化对象数据,数据验证,数值的操作等等。
    扩展对象方法插件
    要扩展对象方法就需要在$.fn.extend({});上扩展我们的插件,如扩展一个能使元素淡出的动画(只是为了示例),我们命名为jquery.myFadeOutPlugin.js
    ; (function ($) {
        $.fn.extend({ "myFadeOutPlugin": function (value) { return this.fadeOut("5000"); } });
    })(jQuery);
    或者简写
    ; (function ($) {
        $.fn.myFadeOutPlugin = function () { return this.fadeOut("5000"); };
    })(jQuery);
    备注:如果需要多个方法
    ;(function($){$.fn.extend({
           "myFadeOutPlugin":function(){        
               return this.fadeOut("5000");        
             },       
            "myFadeInPlugin":function(){} //and so on    
           });
    })(jQuery);
    调用(注意这里的return为了链式)
    $('#XX').myFadeOutPlugin();
    这里只有一个元素(没有元素的遍历)并没有提供任何默认参数
    如果有多个元素呢,OK ,so easy!
    (function ($) {
        $.fn.myFadeOutPlugin = function () { return this.each(function () { $(this).fadeOut("5000"); }); };
    })(jQuery);
    要提供默认参数呢如 渐变的时间,ok,改造如下
    (function ($) {
        var defaults = { time: 5000 }; $.fn.myFadeOutPlugin = function (options) { options = $.extend({}, defaults, options); return this.each(function () { $(this).fadeOut(options.time); }); };
    })(jQuery);
    调用:
    $('.div').myFadeOutPlugin({time:1000});//当然也可以使用缺省值
    一般开发插件都是基于对象方法的插件,尽量保持JQAPI不变动,具体神马功能自己挖掘吧!
    OK,最后给一个模板方便自己
    选择器插件

    I’am wroking on my way,waiting! 表格渐变插件介绍一个Ajax插件与反射的案例

    附一个模板
    /*
    * @Extends jquery.1.7.2
    * @Overview 搜索提示框
    * @Author Irving
    * @Email  * @version 0.xx
    * @Date xxxx年1月4日1:11:33
    * @Copyright (c) xxxx Irving
    */
    (function ($) {
        var defaults = { xxx: xxx }; //params
         $.fn.yourPlugName = function(options){   
           options = $.extend(defaults, options);     
               this.each(function(){               
                       //code here
                   });     
            };
    })(jQuery);
     摘抄一段话
    jQuery插件的文件名推荐命名为jquery.[插件名].js,以免和其他JS库插件混淆。
    所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身。        可以通过this.each 来遍历所有的元素      在插件头部加上一个分号,以免他人的不规范代码给插件带来影响。
    所有的方法或函数插件,都应当以分号结尾,以免压缩时出现问题
    除非插件需要返回的是一些需要获取的变量,插件应该返回一个jQuery对象,以保证插件的可链式操作。
    利于jQuery.extend()方法设置插件方法的默认参数,增加插件的可用性。          在插件内部,this指向的是当前通过选择器获取的JQuery对象,而不像一般方法那样,内部的this指向的是DOM元素。
    网络上说开发插件是多用data(.data()方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险),绑定事件用Bind(xxx,function(){});不过我还没领悟其中的奥秘。要想写出优秀的插件,需要对原生js理论有一定的功底,JQ api的熟练,看大牛们写的插件源码,Good luck!
  • 相关阅读:
    关于ios8斯坦福公开课第二课
    关于cocoapods和swift中使用oc第三方
    swift 关于闭包和函数
    同步、异步请求
    AFNETWORKING tabelView没有reloadData,报错unsupported URL
    在模型中获取网络数据,刷新tableView
    界面随键盘顶起来
    Java并发编程:线程池的使用
    比较好的介绍线程池的文章
    一篇很不错的dubbo学习文章
  • 原文地址:https://www.cnblogs.com/Irving/p/2843653.html
Copyright © 2020-2023  润新知