JavaScript库基本格式写法

/*********************************************************************
 *                    JavaScript库基本格式写法
 * 说明:
 *     由于自己有单独实现一些Javascript函数,希望将其做成库的形式被重复
 * 利用,不过后续需要进一步去分析一些库的源代码才能清楚如何写一个JS库。
 *
 *                                   2017-8-28 深圳 龙华樟坑村 曾剑锋
 ********************************************************************/

一、参考文档:
    1. 如何编写一个JS库
        http://www.jianshu.com/p/4c895dbbf116
    2. What does (function($) {})(jQuery); mean?
        https://stackoverflow.com/questions/2937227/what-does-function-jquery-mean
    3. jquery.fn.extend与jquery.extend
        http://www.cnblogs.com/wyjgreat/archive/2011/07/19/2110754.html
    4. JQuery Plugin Defaults and Options
        https://stackoverflow.com/questions/8905507/jquery-plugin-defaults-and-options
    5. jQuery.extend()
        https://api.jquery.com/jquery.extend/

二、(function($) {})(jQuery);
    1. a code block that looks like (function(){})() is merely a function that is executed in place. 
    2. function($) {}:           相当于函数声明;
    3. (函数声明)(函数参数):     相当于执行函数;
    4. (function($) {})(jQuery): 相当于声明一个function($) {}的函数,并直接执行,将JQuery作为参数传入,形参是$;

三、jquery.fn.extend、jquery.extend
    1. jQuery.extend(object):    为扩展jQuery类本身.为类添加新的方法。
    2. jQuery.fn.extend(object): 给jQuery对象添加方法。
    3. jQuery.extend():          调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现。
    4. jQuery.fn.extend():       调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法。

四、库默认、修改配置写法:
    <script>
        var defaults = { validate: false, limit: 5, name: "foo" };
        var options = { validate: true, name: "bar" };
         
        // Merge defaults and options, without modifying defaults
        var settings = $.extend( {}, defaults, options );
         
        // Assuming JSON.stringify - not available in IE<8
        $( "#log" ).append( "<div><b>defaults -- </b>" + JSON.stringify( defaults ) + "</div>" );
        $( "#log" ).append( "<div><b>options -- </b>" + JSON.stringify( options ) + "</div>" );
        $( "#log" ).append( "<div><b>settings -- </b>" + JSON.stringify( settings ) + "</div>" );
    </script>

 

posted on 2017-08-28 11:26  zengjf  阅读(734)  评论(0编辑  收藏  举报

导航