写jQuery插件
2016-03-16 17:19
561 查看
如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘述了,用过的都知道。今天我们来讨论下jquery的插件机制,jquery有着成千上万的第三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式了,如下面就是一个简单扩展Jquery对象的demo:
4.暴露公共方法 给别人来扩展你的插件(如果有需求的话)
比如的高亮插件有一个format方法来格式话高亮文本,则我们可将它写成公共的,暴露给插件使用者,不同的使用着根据自己的需求来重写该format方法,从而是高亮文本可以呈现不同的格式。
5.插件私有方法
有些时候,我们的插件需要一些私有方法,不能被外界访问。例如 我们插件里面需要有个方法 来检测用户调用插件时传入的参数是否符合规范。
6.其他的一些设置,如:为你的插件加入元数据插件的支持将使其变得更强大。
完整的高亮插件代码如下:
调用
1 //闭包限定命名空间 2 (function ($) { 3 $.fn.extend({ 4 "highLight": function (options) { 5 var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数 6 return this.each(function () { //这里的this 就是 jQuery对象。这里return 为了支持链式调用 7 //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。 8 var $this = $(this); //获取当前dom 的 jQuery对象,这里的this是当前循环的dom 9 //根据参数来设置 dom的样式 10 $this.css({ 11 backgroundColor: opts.background, 12 color: opts.foreground 13 }); 14 }); 15 16 } 17 }); 18 //默认参数 19 var defaluts = { 20 foreground: 'red', 21 background: 'yellow' 22 }; 23 })(window.jQuery);
4.暴露公共方法 给别人来扩展你的插件(如果有需求的话)
比如的高亮插件有一个format方法来格式话高亮文本,则我们可将它写成公共的,暴露给插件使用者,不同的使用着根据自己的需求来重写该format方法,从而是高亮文本可以呈现不同的格式。
//公共的格式化 方法. 默认是加粗,用户可以通过覆盖该方法达到不同的格式化效果。 $.fn.highLight.format = function (str) { return "<strong>" + str + "</strong>"; }
5.插件私有方法
有些时候,我们的插件需要一些私有方法,不能被外界访问。例如 我们插件里面需要有个方法 来检测用户调用插件时传入的参数是否符合规范。
6.其他的一些设置,如:为你的插件加入元数据插件的支持将使其变得更强大。
完整的高亮插件代码如下:
//闭包限定命名空间 (function ($) { $.fn.extend({ "highLight": function (options) { //检测用户传进来的参数是否合法 if (!isValid(options)) return this; var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数 return this.each(function () { //这里的this 就是 jQuery对象。这里return 为了支持链式调用 //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。 var $this = $(this); //获取当前dom 的 jQuery对象,这里的this是当前循环的dom //根据参数来设置 dom的样式 $this.css({ backgroundColor: opts.background, color: opts.foreground }); //格式化高亮文本 var markup = $this.html(); markup = $.fn.highLight.format(markup); $this.html(markup); }); } }); //默认参数 var defaluts = { foreground: 'red', background: 'yellow' }; //公共的格式化 方法. 默认是加粗,用户可以通过覆盖该方法达到不同的格式化效果。 $.fn.highLight.format = function (str) { return "<strong>" + str + "</strong>"; } //私有方法,检测参数是否合法 function isValid(options) { return !options || (options && typeof options === "object") ? true : false; } })(window.jQuery);
调用
//调用 //调用者覆盖 插件暴露的共公方法 $.fn.highLight.format = function (txt) { return "<em>" + txt + "</em>" } $(function () { $("p").highLight({ foreground: 'orange', background: '#ccc' }); //调用自定义 高亮插件 });
相关文章推荐
- jquery 排除选择某个元素的正确写法
- 如何阅读jQuery源码整体架构
- Jquery mobile技术咖们走进来瞧瞧吧
- jQuery学习
- jQuery $.proxy
- jquery_layout
- [前端]使用JQuery UI Layout Plug-in布局 - wolfy
- 你可能不需要 jQuery!使用原生 JavaScript 进行开发
- jquery判断toggle()的状态
- jQuery ajax - ajax() 方法
- jQuery Ajax 实例 ($.ajax、$.post、$.get)
- jquery html5 视频播放控制
- 使用Ajax以及Jquery.form异步上传图片
- jQuery 过滤器选择器
- jQuery EasyUI DataGrid Checkbox 数据设定与取值
- JQuery效果集锦
- jquery省市区插件
- jquery绑定事件与动画
- 沫沫金:JQuery批量选择/取消,诡异问题【第一次正常,第二次失效】
- jquery tab