美文网首页我爱编程
如何开发jQuery插件&js文档加载完毕的几种写法

如何开发jQuery插件&js文档加载完毕的几种写法

作者: 不高兴_d651 | 来源:发表于2017-07-18 21:32 被阅读0次

    js文档加载完毕有哪几种写法

    1:js加载完毕有哪几种写法

    一、当不引入jQuery框架,只写原生JS代码时,需要用window对象的onload事件

    window.onload= function(){

    //要执行的js代码段

    }

    (注:在使用时,window.onload可直接简写成onload,但是为了不发生歧义及造成不必要的错误,最好是把window写上)

    二、在引入jQuery时,可以有多种写法,

    这里只列出一种最复杂(其他写法基本都是此种的变形)的,和2种最常见的写法

    1、最复杂的一种写法:

    ;(function($,window,document,undefined){

    //要执行的js代码段

    })(jQuery,window,document);

    (1)、在最开始使用分号的目的是为了防止多个文件压缩合并时,因为其他文件最后一行语句没加分号,而引起合并后的语法错误(如果能确保不会有多个文件压缩合并的情况,可以不写这个分号)

    (2)、这就是一个匿名函数的自执行,一般js库都采用这种自执行的匿名函数来保护内部变量

    (3)、形参中的$是jQuery的简写,很多方法和类库也使用$,这里$接收jQuery对象,也是为了避免$变量冲突,保证多个插件之间可以正常运行(如果只引入了jQuery这一个插件,可以不写这个)

    (4)、实参分别接收window,document这两个对象,window,document这两个对象都是全局环境下的,而在函数体内的window,document其实是局部变量,不是指全局的window,或是document对象。这样做有个好处就是可以提高性能,减少作用域的查询时间(如果在函数体内需要多次调用window,或是document对象,这样把window或是document对象作为参数传进去,是非常有必要的。如果代码中没有用到这两个对象,那么就不需要传这两个参数了)

    (5)、使用undefined的原因:

    ①因为undefined是window的属性,声明为局部变量之后,在函数中如果再有变量与undefined做比较的话,程序就可以不用到window下搜索undefined,可以提高程序的性能

    ②undefined在有些版本较旧的浏览器是不被支持的,直接使用会报错,js框架就要考虑到兼容性问题,所以增加一个形参undefined

    2、比较常用的写法:

    $(document).ready(function(){

    //要执行的js代码段

    });

    (注:①在不确定是否只引入jQuery一个js框架的时候,代码中的$可以像复杂写法那样通过参数的形式传递,②代码中的document可省略)

    3、最简单的一种写法:

    $(function(){

    //要执行的js代码段

    });

    &如何开发jq插件

    1:什么是jQuery插件?jQuery插件如何使用?

    jQuery插件就是用来扩展jQuery原型对象的一个方法,简单来说就是jQuery插件是jQuery对象的一个方法;

    jQuery插件的使用方式就是jQuery对象方法的调用

    2:jQuery插件有哪些常见的开发方式

    1:通过$.extend()来扩展jQuery;

    2:通过$.fn 向jQuery添加新的方法;

    3:通过$.widget()应用jQuery UI的部件工厂方式创建;

    通常我们使用第二种方法来进行简单插件开发,说简单是相对于第三种方式。第三种方式是用来开发更高级jQuery部件的,该模式开发出来的部件带有很多jQuery内建的特性,比如插件的状态信息自动保存,各种关于插件的常用方法等,比较高级也比较复杂,就不细说了。

    基本方法

    先看一下它的基本格式:

    $.fn.pluginName =function() {

    //your code goes here

    }

    基本上就是往$.fn上面添加一个方法,名字是我们的插件名称。然后我们的插件代码在这个方法里面展开。

    比如我们将页面上所有链接颜色转成红色,则可以这样写这个插件:

    $.fn.myPlugin =function() {

    //在这里面,this指的是用jQuery选中的元素

    //example :$('a'),则this=$('a')

    this.css('color', 'red');

    }

    在插件名字定义的这个函数内部,this指代的是我们在调用该插件时,用jQuery选择器选中的元素,一般是一个jQuery类型的集合。比如$('a')返回的是页面上所有a标签的集合,且这个集合已经是jQuery包装类型了,也就是说,在对其进行操作的时候可以直接调用jQuery的其他方法而不需要再用美元符号来包装一下。

    所以在上面插件代码中,我们在this身上调用jQuery的css()方法,也就相当于在调用 $('a').css()。

    理解this在这个地方的含义很重要。这样你才知道为什么可以直接商用jQuery方法同时在其他地方this指代不同时我们又需要用jQuery重新包装才能调用,下面会讲到。初学容易被this的值整晕,但理解了就不难。

    现在就可以去页面试试我们的代码了,在页面上放几个链接,调用插件后链接字体变成红色。

    我的微博

    我的博客

    我的小站

    这是p标签不是a标签,我不会受影响

    $(function(){

    $('a').myPlugin();

    })

    运行结果:

    下面进一步,在插件代码里处理每个具体的元素,而不是对一个集合进行处理,这样我们就可以针对每个元素进行相应操作。

    我们已经知道this指代jQuery选择器返回的集合,那么通过调用jQuery的.each()方法就可以处理合集中的每个元素了,但此刻要注意的是,在each方法内部,this指带的是普通的DOM元素了,如果需要调用jQuery的方法那就需要用$来重新包装一下。

    比如现在我们要在每个链接显示链接的真实地址,首先通过each遍历所有a标签,然后获取href属性的值再加到链接文本后面。

    更改后我们的插件代码为:

    $.fn.myPlugin =function() {

    //在这里面,this指的是用jQuery选中的元素

    this.css('color', 'red');

    this.each(function() {

    //对每个元素进行操作

    $(this).append(' ' + $(this).attr('href'));

    })) }

    调用代码还是一样的,我们通过选中页面所有的a标签来调用这个插件

    运行结果:

    到此,你已经可以编写功能简单的jQuery插件了。是不是也没那么难。

    下面开始jQuery插件编写中一个重要的部分,参数的接收。

    回到顶部

    支持链式调用

    我们都知道jQuery一个时常优雅的特性是支持链式调用,选择好DOM元素后可以不断地调用其他方法。

    要让插件不打破这种链式调用,只需return一下即可。

    $.fn.myPlugin =function() {

    //在这里面,this指的是用jQuery选中的元素

    this.css('color', 'red');

    returnthis.each(function() {

    //对每个元素进行操作

    $(this).append(' ' + $(this).attr('href'));

    })) }

    让插件接收参数

    一个强劲的插件是可以让使用者随意定制的,这要求我们提供在编写插件时就要考虑得全面些,尽量提供合适的参数。

    比如现在我们不想让链接只变成红色,我们让插件的使用者自己定义显示什么颜色,要做到这一点很方便,只需要使用者在调用的时候传入一个参数即可。同时我们在插件的代码里面接收。另一方面,为了灵活,使用者可以不传递参数,插件里面会给出参数的默认值。

    在处理插件参数的接收上,通常使用jQuery的extend方法,上面也提到过,但那是给extend方法传递单个对象的情况下,这个对象会合并到jQuery身上,所以我们就可以在jQuery身上调用新合并对象里包含的方法了,像上面的例子。当给extend方法传递一个以上的参数时,它会将所有参数对象合并到第一个里。同时,如果对象中有同名属性时,合并的时候后面的会覆盖前面的。

    利用这一点,我们可以在插件里定义一个保存插件参数默认值的对象,同时将接收来的参数对象合并到默认对象上,最后就实现了用户指定了值的参数使用指定的值,未指定的参数使用插件默认值。

    为了演示方便,再指定一个参数fontSize,允许调用插件的时候设置字体大小。

    $.fn.myPlugin = function(options) {    var defaults = {        'color': 'red',        'fontSize': '12px'    };    var settings = $.extend(defaults, options);    return this.css({        'color': settings.color,        'fontSize': settings.fontSize    }); }

    现在,我们调用的时候指定颜色,字体大小未指定,会运用插件里的默认值12px。

    $('a').myPlugin({    'color': '#2C9929' });

    运行结果:

    同时指定颜色与字体大小:

    $('a').myPlugin({    'color': '#2C9929',    'fontSize': '20px' });

    保护好默认参数

    注意到上面代码调用extend时会将defaults的值改变,这样不好,因为它作为插件因有的一些东西应该维持原样,另外就是如果你在后续代码中还要使用这些默认值的话,当你再次访问它时它已经被用户传进来的参数更改了。

    一个好的做法是将一个新的空对象做为$.extend的第一个参数,defaults和用户传递的参数对象紧随其后,这样做的好处是所有值被合并到这个空对象上,保护了插件里面的默认值。

    $.fn.myPlugin = function(options) {    var defaults = {        'color': 'red',        'fontSize': '12px'    };    var settings = $.extend({},defaults, options);//将一个空对象做为第一个参数    return this.css({        'color': settings.color,        'fontSize': settings.fontSize    }); }

    到此,插件可以接收和处理参数后,就可以编写出更健壮而灵活的插件了。

    相关文章

      网友评论

        本文标题:如何开发jQuery插件&js文档加载完毕的几种写法

        本文链接:https://www.haomeiwen.com/subject/qqfkkxtx.html