大家好，我是IT修真院北京总院第24期的学员，一枚正直纯洁善良的web程序员
今天给大家分享一下，修真院官网js任务4，深度思考中的知识点——js文档加载完毕有哪几种写法以及如何开发jq插件？
1.背景介绍
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代码段
});
2.知识剖析
1：什么是jQuery插件？jQuery插件如何使用？
jQuery插件就是用来扩展jQuery原型对象的一个方法，简单来说就是jQuery插件是jQuery对象的一个方法；
jQuery插件的使用方式就是jQuery对象方法的调用
3.常见问题
2：jQuery插件有哪些常见的开发方式
4.解决方案
1：通过$.extend()来扩展jQuery;
2：通过$.fn 向jQuery添加新的方法;
3：通过$.widget()应用jQuery UI的部件工厂方式创建;
通常我们使用第二种方法来进行简单插件开发，说简单是相对于第三种方式。第三种方式是用来开发更高级jQuery部件的，该模式开发出来的部件带有很多jQuery内建的特性，比如插件的状态信息自动保存，各种关于插件的常用方法等，比较高级也比较复杂，就不细说了。
5、编码实战
先看一下它的基本格式：
$.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 }); }
到此，插件可以接收和处理参数后，就可以编写出更健壮而灵活的插件了。
6.拓展思考
如果插件体积较大，如何使插件结构更清晰，易维护
使用面向对象的方法去开发插件
7.参考文献
8.更多讨论
在框架流行的今天，你有没有遇到过必须要使用jq插件的场景
密码: gep4
感谢大家观看
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~
我的邀请码：12361358，或者你可以直接点击此链接：http://www.jnshu.com/login/1/12361358
网友评论