比方表达jquery插件的编写制定方法

 新葡新京     |      2020-03-13 00:00
  1. 写插件部分,如下:

    ;{ $.fn.plugin = function{ var defaults = { //各类质量,各类参数 } var options = $.extend; this.each{ //功用代码 var _this = this; }); }});

    ;{ $.fn.table = function{ var defaults = { //arguments , properties evenRowClass : 'evenRow', oddRowClass : 'oddRow', currentRowClass : 'currentRow', eventType : 'mouseover', eventType2 : 'mouseout', } var options = $.extend; this.each{ //function code var _this = $; //even row _this.find('tr:even:not.addClass; //_this.find.removeClass; // odd row _this.find.addClass; /_this.find.mouseover.addClass(options.currentRowClass); }).mouseout.removeClass(options.currentRowClass); });/ _this.find.bind(options.eventType, function.addClass(options.currentRowClass); }); _this.find.bind(options.eventType2, function.removeClass(options.currentRowClass); }); }); return this; }});

jquery插件开辟分为类品级开辟和对象品级开拓

html部分调用插件如下:

类级别($.extend)

jQuery.extend(object)类等级正是用来在jQuery类/命名空间上增添新函数,能够领略为实行jquery类,最醒目标例子是$.ajax(...),ajax方法都以用jQuery.ajax()如此那般调用的,有一点像 “类名.方法名” 静态方法的调用形式。开采扩大其方式时行使$.extend新葡新京,方法,即jQuery.extend(object);

{});==$; 

;${ $.table({ //arguments , properties evenRowClass : 'evenRow1', oddRowClass : 'oddRow1', currentRowClass : 'currentRow1' });});

  Document  *{margin:0; padding:0;} table{ border-collapse:collapse; width:100%; border:1px solid red; margin-top:50px; text-align:center; } tr, th, td{ height:30px; border:1px solid red; } .evenRow1{ background:red; } .oddRow1{ background:orange; } .currentRow1{ background:blue; } #ss{ float:right; margin-right:100px; } #search{ font-size:14px; width:50px; }       ;${ $.table({ //arguments , properties evenRowClass : 'evenRow1', oddRowClass : 'oddRow1', currentRowClass : 'currentRow1' }); $.click{ var text = $.val(); $('#table1 tr:not.filter(':contains; }); });      

jQuery.extend(卡塔尔国 方法有二个重载

上面大家也来写个jQuery.extend(objectState of Qatar的例证:

jQuery.extend({
    "minValue": function (a, b) {
        return a < b ? a : b;
    },
    "maxValue": function (a, b) {
        return a > b ? a : b;
    }
});

调用:

var i = 100; j = 101;
var min_v = $.minValue(i, j); // min_v 等于 100
var 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" }

以此重载的法子,我们平时用来在编排插件时用自定义插件参数去隐讳插件的暗许参数

姓名 学号 性别 年龄
张三 1 20
李四 2 30
张三 1 20
李四 2 30
王五 3 30
王五 3 30
张三 1 20
李四 2 30

目的品级

目的等第则足以精通为依赖对象的拓宽,如$("#table").changeColor(...); 这里那个changeColor呢,便是基于对象的开展了。
支付扩充其形式时使用$.fn.extend方法,即jQuery.fn.extend(object);

## 首先准备好一个架子

;(function($){})(jQuery);

这个架子是你编写插件代码要写入的空间,下面简单解释一下这个架子

1.自执行的匿名函数:是指形如这样的函数: 

(function {// code})();

在jQuery环境下封装自己的插件,首先为避免与其他库的冲突,需要在插件的后面传一个jQuery参数进去,对应的函数里面的参数写入$

2 为避免出现问题,需在插件的前后加入分号(分号的增加并不会影响程序的运行)

3.为什么```(function{// code})();```可以被执行, 而```function{// code}();```却会报错?

首先, 要清楚两者的区别:``` (function {// code})```是表达式, ```function {// code}```是函数声明.    

其次, js"预编译"的特点: js在"预编译"阶段, 会解释函数声明, 但却会忽略表式.    

当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 a=1;
(function(){
var a=100;
})();
alert(a); //弹出 1

## 再上一个架子

;(function($){
$.fn.tab = function(options){
var defaults = {
//种种参数,各个质量
}
var options = $.extend(defaults,options);
this.each(function(卡塔尔(قطر‎{ //未有供给再作 $(thisState of Qatar ,因为"this"已然是 jQuery 对象了.$(this卡塔尔(قطر‎ 与 $($('.tab'卡塔尔卡塔尔国 是一成不改变的
//各样功效
});
return this; //直接写成return this.each(State of Qatar这里可以大致
}
})(jQuery);

这个架子就是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)方法一 定要区分开来



$.fn.tab  tab是这个功能插件的名字,可任意改变名字

var options = $.extend(defaults,options);  这个是利用extend方法把 defaults对象的方法属性全部整合到 options里,也就是options继承了defaults对象的方法以及属性。这个defaults和options名字是可以随意更改的,只要是满足js的命名规范

this.each(function(){});是实现功能代码的地方

## tab选项卡实例

1.先备好html

  

  •     
  • html     
  • css     
  • js   

  

    

html

    

css

    

js

  

2.现在来写插件代码

;(function($){
$.fn.tab = function(options){
var defaults = {
//各类参数,各个品质
}
var options = $.extend(defaults,options);
this.each(function(){
//各类功效 //能够领会成作用代码
var _this = $(this);
_this.find('.tab_nav>li').click(function(){
$(this).addClass('current').siblings().removeClass('current');
var index = $(this).index();
_this.find('.tab_content>div').eq(index).show().siblings().hide();
});
});
return this;
}
})(jQuery);

3.在html代码里我们只需要:

1) 找到外部容器,并调用你所写的tab方法(就是你所写的插件名字):

$.fn.tab = function(options){}

2) 作为可扩展性的插件代码里面的class元素以及事件是不可以写死的;解决这个问题就要在```var defaults = {}```中配置它

$.fn.tab = function(options){
var defaults = {
currentClass:'current',
tabNav:'.tab_nav>li',
tabContent:'.tab_content>div'
}
var options = $.fn.extend(defaults,options);
this.each(function(){
var _this = $(this);
_this.find(options.tabNav).click(function(){
$(this).addClass(options.currentClass).siblings().removeClass(options.currentClass);
var index = $(this).index();
_this.find(options.tabContent).eq(index).show().siblings().hide();
});
});
return this;
}

因为extends将default对象的属性以及方法都整合到了options里,这时候只需要用options调用就可以了

4.同样的如果需求是把click事件改为mouseover事件,此时我们需要用到on() or bind() ,这样就方便我们改事件参数啦,如下:

$.fn.tab = function(options){
var defaults = {
currentClass:'current',
tabNav:'.tab_nav>li',
tabContent:'.tab_content>div',
eventType:'click'
}
var options = $.fn.extend(defaults,options);
this.each(function(){
var _this = $(this);
_this.find(options.tabNav).on(options.eventType,function(){
$(this).addClass(options.currentClass).siblings().removeClass(options.currentClass);
var index = $(this).index();
_this.find(options.tabContent).eq(index).show().siblings().hide();
});
});
return this;
}

因为需求是mouseover,这里就不需要改插件源码啦,直接在html里的js代码进行相应的变化就ok啦

5:jQuery最强大的特性之一莫过于链式操作,此时如果你在$('.tab').tab()后面追加操作,你会发现无法实现,如下:

$('.tab').tab().find('.tab_nav>li').css('background','red');

但是当你return this把对象返回出去的时候你会发现又重新实现了

## 总结

jQuery 插件使库把最有用的功能抽象成可重用代码,这将进一步提高开发效率。下面是你开发jQuery 插件时的注意事项:

总是把插件包装在闭包中 { /* plugin goes here */ })( jQuery );

不在插件函数的立即作用域中额外包装 this 关键字

总是让插件函数返回 this 关键字以保持 chainability ,除非插件有真正的返回值

不要传给插件大量参数,应该传一个可以覆盖插件默认选项的设置对象

在单个插件中,不要让一个以上的名称空间搞乱了 jQuery.fn 对象;总是为方法、事件和数据定义名称空间

据说90%以上的插件就是用$.fn.extend()方式实现的,因为jquery的特色就是先选择dom节点,然后链式处理这些节点。还有不常见的$.extend()插件编写方式,该方式编写的插件是在jquery命名空间内添加方法,也就是说在使用时不需要先选择dom节点,使用时直接$.method()即可

接下来我们一起来写个高亮的jqury插件

### 定一个闭包区域,防止插件"污染"

(function ($) {})(window.jQuery); //window.jQuery = window.$ = jQuery;

### jQuery.fn.extend(object)扩展jquery 方法,制作插件

(function ($卡塔尔国 { //闭包节制命名空间
$.fn.extend({
"highLight":function(options){
//do something
}
});
})(window.jQuery);

### 给插件默认参数,实现 插件的功能

//闭包限制命名空间
(function ($) {
$.fn.extend({
"highLight": function (options) {
var opts = $.extend({}, defaluts, optionsState of Qatar; //使用jQuery.extend 覆盖插件暗许参数
this.each(function () { //这里的this 就是 jQuery对象
//遍历全数的要高亮的dom,当调用 highLight(卡塔尔国插件的是贰个集合的时候
var $this = $(this卡塔尔; //获取当前dom的jQuery对象,这里this是当下轮回的dom 
$this.css({ //依据参数来安装 dom的体制
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 出来,和上面的代码没啥区别)

//闭包约束命名空间
(function ($) {
$.fn.extend({
"highLight": function (options) {
var opts = $.extend({}, defaluts, options卡塔尔; //使用jQuery.extend 覆盖插件暗许参数
return this.each(function (卡塔尔 { /这里的this 便是 jQuery对象。这里return 为了帮助链式调用
//遍历全部的要高亮的dom,当调用 highLight(卡塔尔国插件的是一个会面的时候
var $this = $(this卡塔尔; //获取当前dom的jQuery对象,这里this是当下循环的dom 
$this.css({ //根据参数来设置 dom的样式
backgroundColor: opts.background,
color: opts.foreground
});
});
}
});
var defaluts = { //暗许参数
foreground: 'red',
background: 'yellow'
};
})(window.jQuery);

### 暴露公共方法给别人来扩展你的插件(如果有需求的话)
比如的高亮插件有一个format方法来格式话高亮文本,则我们可将它写成公共的,暴露给插件使用者,不同的使用者根据自己的需求来重写该format方法,从而是高亮文本可以呈现不同的格式

//公共的格式化方法. 私下认可是加粗,客户能够透过覆盖该措施到达不一样的格式化效果
$.fn.highLight.format = function (str) {
return "" + str + "";
}

### 插件私有方法

有些时候,我们的插件需要一些私有方法,不能被外界访问。例如 我们插件里面需要有个方法 来检测用户调用插件时传入的参数是否符合规范    

### 其他的一些设置,如:为你的插件加入元数据插件的支持将使其变得更强大。

完整的高亮插件代码如下:

//闭包限制命名空间
(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 "" + txt + ""
}
$(function () {
$("p").highLight({foreground: 'orange', background: '#ccc' }卡塔尔国; //调用自定义高亮插件
});

透过那些事例学到了jquery 对象级插件开拓

如上那篇jquery插件方式实现table查询功用的简易实例就是作者分享给我们的全体内容了,希望能给大家多少个参照,也期望大家多多点拨脚本之家。