1. 程式人生 > >記錄關於js模組的淺薄探索(一)——從別人部落格中的理解

記錄關於js模組的淺薄探索(一)——從別人部落格中的理解

沒錯,我之前的部落格都沒寫完,我又挖了一個坑!! 之前一直在圍繞著 vue webpack es6 之類的亂七八糟的東西打轉,但是一無所獲。今天突然又在想,webpack到底幹嘛用的,一直在說管理資源啊,打包啊什麼的,但是都不懂,今天看了幾篇別人的部落格,然後想記錄一下自己的心路歷程。因為工作室學前端都是把 html+css+js學一下就完了,個人覺得這樣的學習註定了可能以後沒有人會去學前端,並且學習了也可能對以後的一些規範專案開發不清楚(其實我也不清楚...) 所以想自己多看看大佬們的部落格,然後對前路有一個清晰一點點的規劃! (豪情壯志啊 我的天,哪裡來的這麼大的膽子)

先來看一個部落格

https://www.cnblogs.com/qingkong/p/5092003.html // 淺談前端js模組化演變 來自部落格園的 peter_zhou(晴空)
這篇部落格講了一個模組化演變過程, 可以簡單看一下,瞭解一下
-----
那麼為什麼要模組化,其實這個部落格也講了,那麼還有一個部落格詳細的講了一下原因
http://www.cnblogs.com/haoxl/p/5492692.html // 來自部落格園的 haoxl 裡面有個demo講了原因

簡單概括就是很直白的原因,你跟別人一起做專案的時候,可能會有命名衝突,於是就像部落格demo一樣

var module1={};
module1.fn={};
module1.fn.Utils={};
module1.fn.Utils.module=function(){
    console.log("I am module1.js");
}

一層一層的定義 ,就像java裡解決名稱空間的方法一樣, 查資料看有說 實際上,Java設計者是希望程式設計師反過來使用自己的 Internet域名,因為這樣可以保證它們肯定是獨一無二的。(之前看網課視訊的時候,比如極客,老師命名就喜歡是 com.jike.xx.xx)反轉域名後,句點就用來代表子目錄 [ 這裡的js的寫法就能感覺到子目錄的那種feel ] 的劃分。因此,現在整個包名都是小寫了。Java2 的這種機制意味著所有的檔案都能夠自動存活於它們自己的名字空間內,而且同一個檔案內的每個類都有唯一的識別符號。這樣就算我們兩個人用的方法一樣,我import不一樣的包 去呼叫方法,沒啥大問題 ,如果還怕重複,大不了,我可以加上自己名字縮寫 哈哈哈。

此處插一個關於C++名稱空間的介紹 ,畢竟這個詞是從這裡來的
C++類( Java 類基於此)將函式包於其內,從而避免了與其它類中的函式名衝突。然而,C++仍允許全域性資料和全域性函式的存在,所以還是有可能發生衝突。
為了解決這個問題,C++通過幾個關鍵字,引入了“名字空間”的概念。

關於模組化具體怎麼使用,以及機制 後續再貼

第二個原因,也講的很清楚,就是檔案依賴問題。關於依賴,最常見的就是我js引用的那個順序,到底怎麼擺放,很多時候報錯都是因為順序問題導致的,比如我後面有自己寫的js檔案裡用了"$" 但是不起效果,那很可能是我網頁先載入的它後加載的JQ ,上次幫徒弟找bug 連著幾個報錯都是因為順序有誤導致的(部落格裡說到的Bootstrap也非常典型)這就是我們平時接觸到最頻繁的依賴問題
之前用webpack的時候就不用再index.html裡寫標籤,因為它自己找好了對映關係,依賴也處理好了,npm start就可以了(所以好像直接不能從index.html開啟這個專案 不然沒效果)

哦豁 部落格後面的完全看不懂了,因為沒有學過模組化寫法,所以就為我後面的時間指明瞭目標,啦啦啦,就是學習模組化開發
模組化開發有:

1.伺服器端規範:CommonJs---nodejs使用的規範,

2.瀏覽器端規範:AMD---RequireJS國外相對流行(官網)

         CMD--SeaJS國內相對流行(官網)

在思索 如果先看CommonJs-是不是要先學Node.js ... 啊 痛苦 那就先看一下AMD看看不看得懂把~