打鱼网站怎么做,北京网站建设培训班,深圳网站建设网站推广方案,wordpress首页地址怎么修改http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发#xff0c;jquery 几乎是必不可少的#xff0c;就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘述了#xff0c;用过的都知道。今天我们来讨论下jquery的插件…http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发jquery 几乎是必不可少的就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘述了用过的都知道。今天我们来讨论下jquery的插件机制jquery有着成千上万的第三方插件有时我们写好了一个独立的功能也想将其与jquery结合起来可以用jquery链式调用这就要扩展jquery写成插件形式了如下面就是一个简单扩展Jquery对象的demo //sample:扩展jquery对象的方法bold()用于加粗字体。(function ($) {$.fn.extend({bold: function () {///summary/// 加粗字体////summaryreturn this.css({ fontWeight: bold });}});})(jQuery); 调用方式这是一个非常简单的扩展。接下来我们一步步来解析上面的代码。 一、jquery的插件机制 为了方便用户创建插件jquery提供了jQuery.extend()和jQuery.fn.extend()方法。 1. jQuery.extend() 方法有一个重载。 jQuery.extend(object) ,一个参数的用于扩展jQuery类本身也就是用来在jQuery类/命名空间上增加新函数或者叫静态方法例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的有点像 “类名.方法名” 静态方法的调用方式。下面我们也来写个jQuery.extend(object)的例子 //扩展jQuery对象本身jQuery.extend({minValue: function (a, b) {///summary/// 比较两个值返回最小值////summaryreturn a b ? a : b;},maxValue: function (a, b) {///summary/// 比较两个值返回最大值////summaryreturn a b ? a : b;}});//调用var i 100; j 101;var min_v $.minValue(i, j); // min_v 等于 100var max_v $.maxValue(i, j); // max_v 等于 101 重载版本jQuery.extend([deep], target, object1, [objectN]) 用一个或多个其他对象来扩展一个对象返回被扩展的对象。 如果不指定target则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true则jQuery返回一个深层次的副本递归地复制找到的任何对象。否则的话副本会与原对象共享结构。 未定义的属性将不会被复制然而从对象的原型继承的属性将会被复制。参数 deep: 可选。如果设为true则递归合并。 target: 待修改对象。 object1: 待合并到第一个对象的对象。 objectN: 可选。待合并到第一个对象的对象。示例1合并 settings 和 options修改并返回 settings。var settings { validate: false, limit: 5, name: foo }; var options { validate: true, name: bar }; jQuery.extend(settings, options);结果settings { validate: true, limit: 5, name: bar } 示例2合并 defaults 和 options, 不修改 defaults。var empty {}; var defaults { validate: false, limit: 5, name: foo }; var options { validate: true, name: bar }; var settings jQuery.extend(empty, defaults, options);结果settings { validate: true, limit: 5, name: bar } empty { validate: true, limit: 5, name: bar }这个重载的方法我们一般用来在编写插件时用自定义插件参数去覆盖插件的默认参数。 jQuery.fn.extend(object)扩展 jQuery 元素集来提供新的方法通常用来制作插件。 首先我们来看fn 是什么东西呢。查看jQuery代码就不难发现。 jQuery.fn jQuery.prototype { init: function( selector, context ) {.....};}; 原来 jQuery.fn jQuery.prototype也就是jQuery对象的原型。那jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。我们知道扩展原型上的方法就相当于为对象添加”成员方法“类的”成员方法“要类的对象才能调用所以使用jQuery.fn.extend(object)扩展的方法 jQuery类的实例可以使用这个“成员函数”。jQuery.fn.extend(object)和jQuery.extend(object)方法一定要区分开来。 二、自执行的匿名函数/闭包 1. 什么是自执行的匿名函数? 它是指形如这样的函数: (function {// code})(); 2. 疑问 为什么(function {// code})();可以被执行, 而function {// code}();却会报错? 3. 分析 (1). 首先, 要清楚两者的区别: (function {// code})是表达式, function {// code}是函数声明. (2). 其次, js预编译的特点: js在预编译阶段, 会解释函数声明, 但却会忽略表式. (3). 当js执行到function() {//code}();时, 由于function() {//code}在预编译阶段已经被解释过, js会跳过function(){//code}, 试图去执行();, 故会报错; 当js执行到(function {// code})();时, 由于(function {// code})是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到();时, 便会被执行. 另外 函数转换为表达式的方法并不一定要靠分组操作符()我们还可以用void操作符~操作符!操作符…… 例如 bootstrap 框架中的插件写法 !function($){ //do something; }(jQuery); 和 (function($){ //do something; })(jQuery); 是一回事。匿名函数最大的用途是创建闭包这是JavaScript语言的特性之一并且还可以构建命名空间以减少全局变量的使用。例如 var a1; (function()(){ var a100; })(); alert(a); //弹出 1更多 闭包和匿名函数 可查看 Javascript的匿名函数与自执行 这篇文章。 三、一步一步封装JQuery插件 接下来我们一起来写个高亮的jqury插件1.定一个闭包区域防止插件污染 //闭包限定命名空间
(function ($) {})(window.jQuery); 2.jQuery.fn.extend(object)扩展jquery 方法制作插件 //闭包限定命名空间
(function ($) {$.fn.extend({highLight:function(options){//do something}});
})(window.jQuery); 3.给插件默认参数实现 插件的功能 //闭包限定命名空间
(function ($) {$.fn.extend({highLight: function (options) {var opts $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数this.each(function () { //这里的this 就是 jQuery对象//遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。var $this $(this); //获取当前dom 的 jQuery对象这里的this是当前循环的dom//根据参数来设置 dom的样式$this.css({backgroundColor: opts.background,color: opts.foreground});});}});//默认参数var defaluts {foreground: red,background: yellow};
})(window.jQuery); 到这一步高亮插件基本功能已经具备了。调用代码如下 $(function () {$(p).highLight(); //调用自定义 高亮插件
}); 这里只能 直接调用不能链式调用。我们知道jQuey是可以链式调用的就是可以在一个jQuery对象上调用多个方法如$(#id).css({marginTop:100px}).addAttr(title,测试“); 但是我们上面的插件就不能这样链式调用了。比如$(p).highLight().css({marginTop:100px}); //将会报找不到css方法原因在与我的自定义插件在完成功能后没有将 jQuery对象给返回出来。接下来return jQuery对象让我们的插件也支持链式调用。其实很简单就是执行完我们插件代码的时候将jQuery对像return 出来和上面的代码没啥区别 View Code 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 }); //调用自定义 高亮插件}); 如发现文中内容有误欢迎交流指出!转载于:https://www.cnblogs.com/coikeizeon/p/3809459.html
