資訊專欄INFORMATION COLUMN
摘要：插件編寫入門什么是插件插件的由來很簡單，當(dāng)開發(fā)人員在制作一個頁面的時候，比方遇到制作一個日歷，或者一個彈出框，這些組件都需要通過去控制，同時很多頁面都可以公用這些組件。那么我們將在下一期文章中，去到函數(shù)體內(nèi)，看看具體一個插件如何去寫。
JQ插件編寫入門（1）
什么是JQ插件
jq插件的由來很簡單，當(dāng)開發(fā)人員在制作一個頁面的時候，比方遇到制作一個日歷，或者一個彈出框，這些組件都需要通過js去控制，同時很多頁面都可以公用這些組件。那么我們就想要抽象出來，讓一個項目中的每一個小伙伴都可以拿來直接使用，同時也可以精簡每個js文件的代碼量，更加直觀。
為你的插件新建一個文件夾
傳統(tǒng)的項目文件夾組織目錄大概如下：
現(xiàn)在讓我們?yōu)槲覀兊牟寮陆ㄒ粋€文件夾，方便我們管理：
插件該如何命名
一個不好的示范就是，雖然插件js的名字的確表示了業(yè)務(wù)功能：
從上圖可以看出，這個文件夾里面，被不同人添加著插件，但是看命名就知道有些是新手，有些是懂命名，但沒有完全遵循規(guī)范。像以時間／版本號命名的，我們完全沒法以名字去了解這個插件是拿來干什么的，我們就必須點進這個文件，看了一大段代碼后，才可能知道這個插件能讓我們干什么。
而規(guī)范的開發(fā)下的命名方式是：
|jquery.plugin_calendar.js |jquery.plugin_dialog.js |jquery.plugin_upload.js
當(dāng)我們用gulp或者webpack去build到生產(chǎn)時候，它的命名應(yīng)該是：
|jquery.plugin_calendar.min.js |jquery.plugin_dialog.min.js |jquery.plugin_upload.min.js
插件形式大概
插件函數(shù)該如何寫
大概形式如：
1.function（$）{...}的形式的意思是將$這個變量作為參數(shù)傳入函數(shù)之內(nèi)。但是我們知道，當(dāng)我們開發(fā)一個項目的時候，引用的js庫可不僅僅是jq，可能會引用一些其他的js庫，而在別的js庫中，恰巧$被全局定義了，那么當(dāng)我們把打包壓縮的時候，就可能出現(xiàn)難以debug的錯誤。這個時候我們就用立即執(zhí)行函數(shù)來寫。
2.function（$）{...}（jQuery）；的形式就是立即執(zhí)行函數(shù)，簡化一下的意思就是定義了一個函數(shù)，然后（），就相當(dāng)于執(zhí)行了這個函數(shù)，所以（）里可以傳入?yún)?shù)，這個函數(shù)就像我們普通函數(shù)一樣，只不過換了一個樣子，一眼難以看盡。因為這個函數(shù)是立即執(zhí)行的，所以將jQuery作為參數(shù)傳入了函數(shù)中，總是可以保證$可以綁定jQuery。
在大多數(shù)情況下，上面的形式就是一般開發(fā)人員常用的，但是有比這種寫法更好的
增進形式
在這里我們傳入了window和document兩個參數(shù)，目的很明顯，那就是增加window和document的局部引用，達到精簡函數(shù)體的作用，同時查詢這兩個域的時候，有更加快的性能！性能可以成倍數(shù)的增加。
而在jq的其他地方，也有過類似的應(yīng)用
這里同樣是簡短了查詢的域，由原來的document，縮短到了某id下，同時id查詢又是性能最好的，所以，這樣的查詢／獲取元素的方式，會讓性能提升十?dāng)?shù)倍。
回到剛才，在函數(shù)定義的時候，多了一個undefined，是什么原因呢？因為我們在低版本的ECMAScript中，是允許對undefined重新定義的，如果有其他人無意修改了undefined，那么則會影響到我們的插件，我們甚至也不知道如何定位那個bug。所以，我們定義函數(shù)的時候，定義了undefined這個參數(shù)，但是卻沒有傳入這個參數(shù)，那么它就變成undefined了。
再增進形式
ok，我們看到剛剛那個函數(shù)，前面的位置多了一個前導(dǎo)分號；
我們在寫代碼的時候，不是所有的時候都記得給我們語句的結(jié)束的地方，加上分號。但是很多時候我們編譯的時候并不會報錯，程序也可以正常運行，原因是我們程序環(huán)境幫我們隱式加入了分號。但是我們真正去開發(fā)時候，我們會打包壓縮各種js文件到一個文件來減少http請求。這個時候，如果我們的插件碰到分號使用不正確的代碼，就會報錯。
所以這個前導(dǎo)分號的作用，就是用來避免這樣的情況。
ES3中可以被修改，ES5修復(fù)了這個問題，undefined不再可以修改
好，現(xiàn)在我們已經(jīng)大概了解插件一些外部工程的東西，以及一個大概的函數(shù)定義形式。那么我們將在下一期文章中，去到函數(shù)體內(nèi)，看看具體一個插件如何去寫。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86862.html
摘要：設(shè)計的宗旨是，，即倡導(dǎo)寫更少的代碼，做更多的事情。它封裝常用的功能代碼，提供一種簡便的設(shè)計模式，優(yōu)化文檔操作事件處理動畫設(shè)計和交互。 今日任務(wù) 使用JQuery完成頁面定時彈出廣告 定時器: ? setInterval clearInterval ? setTimeout clearTimeout 顯示: img.style.display = bloc...
摘要：設(shè)計的宗旨是，，即倡導(dǎo)寫更少的代碼，做更多的事情。它封裝常用的功能代碼，提供一種簡便的設(shè)計模式，優(yōu)化文檔操作事件處理動畫設(shè)計和交互。 今日任務(wù) 使用JQuery完成頁面定時彈出廣告 定時器: ? setInterval clearInterval ? setTimeout clearTimeout 顯示: img.style.display = bloc...
摘要：設(shè)計的宗旨是，，即倡導(dǎo)寫更少的代碼，做更多的事情。它封裝常用的功能代碼，提供一種簡便的設(shè)計模式，優(yōu)化文檔操作事件處理動畫設(shè)計和交互。 今日任務(wù) 使用JQuery完成頁面定時彈出廣告 定時器: ? setInterval clearInterval ? setTimeout clearTimeout 顯示: img.style.display = bloc...
摘要：書籍如下面向?qū)ο缶幊讨改希L(fēng)格輕松易懂，比較適合初學(xué)者，原型那塊兒講得透徹，種繼承方式呢。還有另一件事情是，比如發(fā)現(xiàn)自己某個知識點不太清楚，可以單獨去百度。 作者：小不了鏈接：https://zhuanlan.zhihu.com/p/...來源：知乎著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。 鑒于時不時，有同學(xué)私信問我（老姚，下同）怎么學(xué)前端的問題。這里統(tǒng)一回...
閱讀 2145·2023-04-26 02:19
閱讀 1928·2021-11-19 09:40
閱讀 1715·2021-09-29 09:35
閱讀 3585·2021-09-29 09:34
閱讀 4361·2021-09-07 10:16
閱讀 5572·2021-08-11 11:14
閱讀 3594·2019-08-30 15:54
閱讀 1643·2019-08-30 15:53
