jQuery扩展插件和拓展函数的写法（匿名函数使用的典型例子）

Posted on 2010-10-18 21:17 lzhdim 阅读(32731) 评论(0) 编辑收藏举报

这些年，JavaScript火起来了，主要归功于AJAX的推广应用，Web2.0的发展。。。于是，出现了很多的JavaScript框架。我选择了jQuery，最主要是它的思想“write less,do more"，因为我是一个挑剔的人，以前写过的代码，会时不时翻出来，看看有没有可以精简，优化的地方。一来是对不断学习的推动，二来可以将新的思想，技术应用到里面去。

对于jQuery插件的写法，以前就有介绍过，网上也有很多例子。这里简要地进行些写法，主要是简写的说明，见下列代码：

　　1、主页面HTML代码：

<!DOCTYPE html>

<html>

<head>
    <title>jQuery Extend Demo</title>

    <link href="Scripts/jQuery/PlugIn/jquery.shadow/jquery.shadow.css" rel="stylesheet">

    <script type="text/javascript" src="Scripts/jQuery/jquery-3.6.4.min.js"></script>
    <script type="text/javascript" src="Scripts/jQuery/PlugIn/jquery.shadow/jquery.shadow.js"></script>
    <script type="text/javascript" src="Scripts/jQuery/Function/TestExtFunction.js"></script>

    <script type="text/javascript">
        $(function () {

            //测试扩展函数
            var params = {
                param1: "3",
                param2: "4"
            };

            alert($.FN_TestExtendFunction.FunctionWithParam(params));


            //测试扩展插件
            $("#divTest").shadow();
        });
    </script>
</head>

<body>
    <div id="divTest"
        style="width: 100px;height: 100px;position: fixed;top:50%;left:50%;transform: translate(-50%,-50%);">
    </div>
</body>

</html>

　　2、拓展函数代码：

　　建议放在单独的js后缀文件中，然后用VS Code中添加jsDoc插件并对该文件进行编辑，这样就能够在函数头部添加/**这样就能对函数进行注释了。

/***
    jQuery拓展函数，演示用函数
  
    Austin Liu 刘恒辉
    Project Manager and Software Designer
 
    E-Mail: lzhdim@163.com
    Blog:   http://lzhdim.cnblogs.com
    Date:   2023-01-02 15:18:00
  
    使用方法:
        //页面里加载JS
        //$.FN_TestExtendFunction.FunctionWithParam(params)
***/


//jQuery拓展函数的写法（不需要传入操作对象），即API函数
;
(function ($) {
    $.extend({
        /**
         * 测试用的jQuery拓展函数
         */
        FN_TestExtendFunction: {
            /**
             * 该拓展函数的基本信息
             */
            Info: {
                Name: "ExtendFunction",
                Ver: "1.0.0.0",
                Corp: "Lzhdim",
                Author: "lzhdim",
                Date: "2010-01-01 08:00:00",
                Copyright: "Copyright @ 2000-2010 Lzhdim Technology Software All Rights Reserved",
                License: "GPL"
            },
            /**
             * 具有对象参数的函数，这里参数是一个对象，具有属性
             * 
             * @param {object} paramObj 函数参数
             * @returns 返回信息
             */
            FunctionWithParams: function (paramObj) {
                //使用参数，是否使用默认值
                var params = paramObj ? paramObj : {
                    param1: "1",
                    param2: "2"
                };

                return this.Info.Name + ".FunctionWithParamObect";
            },        
            /**
             * 具有参数的函数，这里参数是一个变量
             * 
             * @param {object} varparam 函数参数
             * @returns 返回信息
             */
            FunctionWithParam: function (varparam) {
                //使用参数，是否使用默认值
                var param = varparam ? varparam : null;

                return this.FunctionWithOutParam() + ".FunctionWithParam";
            },            
            /**
             * 不具有参数的函数对象
             * 
             * @returns 返回信息
             */
            FunctionWithOutParam: function () {
                return this.Info.Name + ".FunctionWithOutParam";
            }
        }
    });
})(jQuery);

　　3、扩展插件代码：

　　建议放在单独的js后缀文件中，然后用VS Code中添加jsDoc插件并对该文件进行编辑，这样就能够在函数头部添加/**这样就能对函数进行注释了。

　　推荐这种写法格式：

　　1）主函数定义（包括参数）；

　　2）插件内使用的函数；

　　3）主函数参数的默认值；

/***
    jQuery '边框阴影'插件程序
  
    Austin Liu 刘恒辉
    Project Manager and Software Designer
 
    E-Mail: lzhdim@163.com
    Blog:   http://lzhdim.cnblogs.com
    Date:   2023-01-02 15:18:00
  
    使用方法:
        //页面里加载JS及CSS

        //$('.post').shadow();
***/

;
(function ($) {

    /**
     * 插件主函数
     * 
     * @param {*} options 插件设置参数
     * @returns 
     */
    $.fn.shadow = function (options) {

        // options could just be the type
        if (typeof options !== "object")
            options = {
                type: options
            };

        // set up the options using the defaults
        options = $.extend({}, $.fn.shadow.defaults, options);

        var els = this;

        // add the necessary css classes
        els.addClass('jquery-shadow');
        els.addClass('jquery-shadow-' + options.type);

        // some require extras js
        switch (options.type) {
            case 'sides':
                $.fn.shadow.sides(this, options.sides);
                break;
            case 'rotated':
                $.fn.shadow.rotated(this, options.rotated);
                break;
        }

        $.fn.shadow.borderRadius(this, options.radius);

        return this;
    };

    /**
     * rotate these bad boys
     * 
     * @param {*} els 对象主体
     * @param {*} rotate 参数
     */
    $.fn.shadow.rotated = function (els, rotate) {
        // one property to rule them all, if only!
        els.css('-webkit-transform', 'rotate(' + rotate + ')')
            .css('-moz-transform', 'rotate(' + rotate + ')')
            .css('-ms-transform', 'rotate(' + rotate + ')')
            .css('-o-transform', 'rotate(' + rotate + ')')
            .css('transform', 'rotate(' + rotate + ')');
    }

    /**
     * sides have funky stuff
     * 
     * @param {*} els 对象主体
     * @param {*} sides 插件参数
     */
    $.fn.shadow.sides = function (els, sides) {
        els.addClass('jquery-shadow-sides-' + sides);
    }

    /**
     * border-radius goodness..
     * 
     * @param {*} els 对象主体
     * @param {*} radius 参数
     */
    $.fn.shadow.borderRadius = function (els, radius) {
        els.css('-moz-border-radius', radius)
            .css('border-radius', radius);
    }

    /**
     * 插件的默认参数
     */
    $.fn.shadow.defaults = {
        type: 'standard', // AVAILABLE standard, lifted, perspective, raised, sides
        radius: 4,
        sides: '', // used when type = "sides", AVAILABLE vt-1, vt-2, hz-1, hz-2
        rotate: '-3deg'
    };

})(jQuery);

上面文件例子下载地址：https://download.csdn.net/download/lzhdim/87774450

具体的应用请看这个系列的博文：https://www.cnblogs.com/lzhdim/category/2131696.html

会员力量，点亮园子希望

刷新页面返回顶部

Lzhdim's Fashion

公告

jQuery扩展插件和拓展函数的写法（匿名函数使用的典型例子）