javascript組件封裝中一段通用代碼解讀
有圖有真相，先上圖。
相信很多想去研究源碼的小夥伴一定被這段代碼給嚇著了把，直接就打消了往下看下去的想法。我剛開始看的時候也是有點一頭霧水，這是什麽東東這麽長，但是慢慢分析你就會發現其中的奧秘，且聽我慢慢到來。
首先我們先來看一下整體的結構。（function (global, factory) {}）（this, (function() {})）,這個看著是不是還有點不明白，那（function (a ,b) {console.log(a,b)}）(a, b)這個你總不會陌生了把，就是把a和b這兩個參數傳到前面的函數中,然後再在函數中進行後續的一系列的操作。那這個你搞懂了，開始的代碼是不是優點眉目了，就是把this和（function() {}）當成兩個參數傳到前面那個括號中，然後用global，和factory這兩個參數來接收，所以前面函數中的factory就是後面傳入的函數，而global就是this代表的值，一般在調用時this即為window對象。整體的結構清楚了，再來看一下函數裏面是什麽意思把。
首先第一眼掃過去js中應該是一個三元運算表達式（不懂也沒關系，我會解釋噠），可是為啥有好幾個":"和"?"呢，我們先來看一個標準的結構 1&&2 ? console.log("a") : console.log("b"),標準的三元運算表達式，即如果1&&2判斷為真則會執行第一個語句如果為假就會執行第二個語句。那這個1&&2 ? console.log("a") : 0&&1 ? console.log("b") : console.log("c")是不是也就不那麽難理解了。就是把第二個執行語句有換成了一個三元表達式而已。也就是當第一個判斷為真是執行第一個語句console.log("a")而如果判斷為假則執行第二個三元表達式再進行判斷如果為真則執行console.log("b"),如果為假則執行console.log("c")。好了鋪墊都已走完，我們再來看一下最初的那個表達式，這回小夥伴是不是能看懂了。
即先判斷exports是對象並且同時module不是undefined這時候通過module.exports將factory（這個就是後面傳入的函數，別又懵了）函數導出（兼容commonjs寫法），如果這個判斷不成立再執行後面那一條語句判斷defined是function並且define.amd存在，即將factory導入defined中（兼容amd模式），如果不成立則將factory賦值給Vue對象，並且將Vue綁定到global（window對象）下，以便可以在全局調用，這個就是我們直接通過script標簽引入時調用的方法了。
終於解釋完了，小夥伴又可以開心的去做源碼分析了.....
javascript組件封裝中一段通用代碼解讀