大家好，我是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
