这些年,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
![]() |
Austin Liu 刘恒辉
Project Manager and Software Designer E-Mail:lzhdim@163.com Blog:https://lzhdim.cnblogs.com 欢迎收藏和转载此博客中的博文,但是请注明出处,给笔者一个与大家交流的空间。谢谢大家。 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步