第一期：JQ插件編寫入門（1）

sumory 發布于2019-08-21 11:34 / 2522人閱讀

摘要：插件編寫入門什么是插件插件的由來很簡單，當開發人員在制作一個頁面的時候，比方遇到制作一個日歷，或者一個彈出框，這些組件都需要通過去控制，同時很多頁面都可以公用這些組件。那么我們將在下一期文章中，去到函數體內，看看具體一個插件如何去寫。

JQ插件編寫入門（1）

什么是JQ插件

jq插件的由來很簡單，當開發人員在制作一個頁面的時候，比方遇到制作一個日歷，或者一個彈出框，這些組件都需要通過js去控制，同時很多頁面都可以公用這些組件。那么我們就想要抽象出來，讓一個項目中的每一個小伙伴都可以拿來直接使用，同時也可以精簡每個js文件的代碼量，更加直觀。

為你的插件新建一個文件夾

傳統的項目文件夾組織目錄大概如下：

現在讓我們為我們的插件新建一個文件夾，方便我們管理：

插件該如何命名

一個不好的示范就是，雖然插件js的名字的確表示了業務功能：

從上圖可以看出，這個文件夾里面，被不同人添加著插件，但是看命名就知道有些是新手，有些是懂命名，但沒有完全遵循規范。像以時間／版本號命名的，我們完全沒法以名字去了解這個插件是拿來干什么的，我們就必須點進這個文件，看了一大段代碼后，才可能知道這個插件能讓我們干什么。

而規范的開發下的命名方式是：

|jquery.plugin_calendar.js
|jquery.plugin_dialog.js
|jquery.plugin_upload.js

當我們用gulp或者webpack去build到生產時候，它的命名應該是：

|jquery.plugin_calendar.min.js
|jquery.plugin_dialog.min.js
|jquery.plugin_upload.min.js

插件形式大概

插件函數該如何寫

大概形式如：

1.function（$）{...}的形式的意思是將$這個變量作為參數傳入函數之內。但是我們知道，當我們開發一個項目的時候，引用的js庫可不僅僅是jq，可能會引用一些其他的js庫，而在別的js庫中，恰巧$被全局定義了，那么當我們把打包壓縮的時候，就可能出現難以debug的錯誤。這個時候我們就用立即執行函數來寫。

2.function（$）{...}（jQuery）；的形式就是立即執行函數，簡化一下的意思就是定義了一個函數，然后（），就相當于執行了這個函數，所以（）里可以傳入參數，這個函數就像我們普通函數一樣，只不過換了一個樣子，一眼難以看盡。因為這個函數是立即執行的，所以將jQuery作為參數傳入了函數中，總是可以保證$可以綁定jQuery。

在大多數情況下，上面的形式就是一般開發人員常用的，但是有比這種寫法更好的

增進形式

在這里我們傳入了window和document兩個參數，目的很明顯，那就是增加window和document的局部引用，達到精簡函數體的作用，同時查詢這兩個域的時候，有更加快的性能！性能可以成倍數的增加。

而在jq的其他地方，也有過類似的應用

這里同樣是簡短了查詢的域，由原來的document，縮短到了某id下，同時id查詢又是性能最好的，所以，這樣的查詢／獲取元素的方式，會讓性能提升十數倍。

回到剛才，在函數定義的時候，多了一個undefined，是什么原因呢？因為我們在低版本的ECMAScript中，是允許對undefined重新定義的，如果有其他人無意修改了undefined，那么則會影響到我們的插件，我們甚至也不知道如何定位那個bug。所以，我們定義函數的時候，定義了undefined這個參數，但是卻沒有傳入這個參數，那么它就變成undefined了。

再增進形式

ok，我們看到剛剛那個函數，前面的位置多了一個前導分號；

我們在寫代碼的時候，不是所有的時候都記得給我們語句的結束的地方，加上分號。但是很多時候我們編譯的時候并不會報錯，程序也可以正常運行，原因是我們程序環境幫我們隱式加入了分號。但是我們真正去開發時候，我們會打包壓縮各種js文件到一個文件來減少http請求。這個時候，如果我們的插件碰到分號使用不正確的代碼，就會報錯。

所以這個前導分號的作用，就是用來避免這樣的情況。

ES3中可以被修改，ES5修復了這個問題，undefined不再可以修改

好，現在我們已經大概了解插件一些外部工程的東西，以及一個大概的函數定義形式。那么我們將在下一期文章中，去到函數體內，看看具體一個插件如何去寫。

云服務器 GPU云服務器 jq插件 jq滾動條插件 jq彈出層插件 jq 1.8.3 cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86862.html

JavaWEB開發04——JQuery

摘要：設計的宗旨是，，即倡導寫更少的代碼，做更多的事情。它封裝常用的功能代碼，提供一種簡便的設計模式，優化文檔操作事件處理動畫設計和交互。今日任務使用JQuery完成頁面定時彈出廣告定時器: ? setInterval clearInterval ? setTimeout clearTimeout 顯示: img.style.display = bloc...

chunquedong 2019-08-29 17:05 評論0 收藏0
JavaWEB開發04——JQuery

摘要：設計的宗旨是，，即倡導寫更少的代碼，做更多的事情。它封裝常用的功能代碼，提供一種簡便的設計模式，優化文檔操作事件處理動畫設計和交互。今日任務使用JQuery完成頁面定時彈出廣告定時器: ? setInterval clearInterval ? setTimeout clearTimeout 顯示: img.style.display = bloc...

nicercode 2019-08-02 11:51 評論0 收藏0
JavaWEB開發04——JQuery

摘要：設計的宗旨是，，即倡導寫更少的代碼，做更多的事情。它封裝常用的功能代碼，提供一種簡便的設計模式，優化文檔操作事件處理動畫設計和交互。今日任務使用JQuery完成頁面定時彈出廣告定時器: ? setInterval clearInterval ? setTimeout clearTimeout 顯示: img.style.display = bloc...

pakolagij 2019-08-23 12:34 評論0 收藏0
如何學JavaScript

摘要：書籍如下面向對象編程指南，風格輕松易懂，比較適合初學者，原型那塊兒講得透徹，種繼承方式呢。還有另一件事情是，比如發現自己某個知識點不太清楚，可以單獨去百度。作者：小不了鏈接：https://zhuanlan.zhihu.com/p/...來源：知乎著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。鑒于時不時，有同學私信問我（老姚，下同）怎么學前端的問題。這里統一回...

light 2019-08-21 11:23 評論0 收藏0