什麼是js組件
我們先理解下什麼是組件？通俗的講，可以認為組件是能滿足我們某項或某些需求的“東西”，它是什麼無所謂。比如我想要一個能放money的東西，那麼錢包就是這個“組件",我不用管它是怎麼加工的，用的什麼材質。
這就是一個”組件“
那麼回過頭來理解下js組件，就可以理解為能夠滿足我們某個功能需求的js。我們不關心它內部怎麼實現的，只要知到怎麼用就行了。
最簡單的js組件
任性的需求：我就想要在我的web頁面點擊任何地方都要給我彈出個框框
-- 這種產品估計會被拍死
客戶有需求，我們不得不滿足啊，所以我們這樣實現
一般一個js組件會單獨寫在一個文件中，那麼我就新建個js文件把，起名叫做click4alert.js，
寫下如下內容：
; (function (window) {
window.addEventListener("click", function (e) {
alert("我是最牛的需求");
})
})(window);
只要在我們html文件尾部引入這個文件，那麼我們偉大的需求就搞定了：
根本不用測試驗證，效果肯定完美！
解析下這個js組件
- 最前面用了個分號，起初很納悶，這有啥用的，雖然我讀書少，但也不能欺騙我吧，後來經過我大量閱讀文章才發現其中的奧妙，原來它僅僅是用來避免跟別的js文件合併時，上個程序員小哥哥（小姐姐）在最後忘了寫分號而兼容的。那在我這裡真沒啥用途，不過為了國際規範還是寫上吧。
- 那後面的(function(window)...{..})(window)又是什麼鬼！其實這是一個自執行函數，即當js文件被引入後就會立馬執行，據說這裡用到了閉包的概念，目的是為了減少變量的汙染。那這樣就可以理解了，它就是一個函數，最後一個window是函數的參數，前面的window是外面傳進去的參數（window可以理解為js的根對象把,就像java中的Object?）
- 整個流程下來就是，當html引入js時，裡面的自執行函數開始執行，執行的內容就是給window加一個click監聽，動作是觸發alert彈窗。
所以我們頁面啥也沒做就完成了這麼變態的需求，以後再有這種產品也不怕了，直接用這個插件搞定。當然這只是玩笑，複雜的插件還是很難寫的。不過了解了插件中的helloworld就有種啥都會的感覺了，後面就可以把之前寫的div拖動實現改成插件了（先吹個牛。）
分享到:
閱讀更多 景柯學 的文章
