seajs官網(wǎng)說：seajs是一個(gè)模塊加載器，所以學(xué)習(xí)它并不難。

在我的理解就是：本來我們是需要手動(dòng)創(chuàng)建 script標(biāo)簽 引入 js文件的，但用seajs后，它就自動(dòng)幫我們完成這些工作。

?

?這里只說實(shí)現(xiàn)原理，具體使用請(qǐng)看seajs官網(wǎng)：http://seajs.org/docs/

下面總結(jié)一下：

1. sea.js 是怎樣解決 模塊加載(這里說的模塊其實(shí)就是js文件加載)，

2.?sea.js 是怎樣解決?模塊依賴

3. sea.js 是怎樣解決?命名沖突

?

1.模塊加載

　　其實(shí)，原理很簡(jiǎn)單，和手動(dòng)引入js文件是一樣的。

　　就是當(dāng)調(diào)用有加載功能的函數(shù) 如 seajs.use 、 require 、require.async 時(shí)，

　　其內(nèi)部代碼會(huì)創(chuàng)建一個(gè)script標(biāo)簽，把src設(shè)置成你要引入的js文件，然后append到DOM文檔中進(jìn)行加載，

　　當(dāng)加載完畢后，再把這個(gè)script標(biāo)簽移除掉，所以當(dāng)我們審查元素時(shí)看不到有那個(gè)<script>標(biāo)簽，

　　但因?yàn)槲募呀?jīng)引入了，即使把這個(gè)script移除也不會(huì)影響代碼使用.

　　我們可以用360衛(wèi)士限制網(wǎng)速的功能，把網(wǎng)速降低，然后引入jq,是可以看到它就是這樣處理的

　　

加載完畢后，sea.js會(huì)把這個(gè)script標(biāo)簽移除：

總的一句 ： 就是利用 script 標(biāo)簽進(jìn)行模塊加載

?

2.模塊依賴

　　上面的問題清楚了，其實(shí)這個(gè)依賴也很簡(jiǎn)單啦，也就是 加載 順序的問題。

　　例如 a.js 依賴于 b.js， 那在sea.js內(nèi)部代碼中，就先加載b.js然后再加載a.js，這樣就可以解決依賴問題了。

?

3.命名沖突

　　解決了上面的兩個(gè)問題，就剩下依賴接口的問題了， 就是模塊的依賴是搞定了，但是sea.js是用define( fn )函數(shù)來定義模塊的，里面的變量都是局部的，

　　得給外面一個(gè)接口調(diào)用才行啊。

　　so, ?exports對(duì)象就出場(chǎng)啦， 當(dāng)你使用sea.js定義一個(gè)模塊的時(shí)候，你可以把你的 對(duì)外函數(shù)接口 都放在exports對(duì)象上，　　如：?

1 define(function (require, exports, module){ 2 var arr = [12,3,4,5,56]; 3 var method = function (){ 4 //code... 5 } 6 exports.arr = arr; //對(duì)外接口 7 exports.method = method; //對(duì)外接口 8 })

當(dāng)別一個(gè)文件要依賴此文件時(shí)， 調(diào)用 require( url )時(shí)，返回值就是這個(gè)exports對(duì)象，所以就解決了接口的問題。

同時(shí)也很好的解決了命名沖突的問題，就算幾個(gè)同事都用一樣的名字，也不會(huì)有問題。

因?yàn)檫@里返回的exports就相當(dāng)于一個(gè)命名空間了。

轉(zhuǎn)載于:https://www.cnblogs.com/aaa6818162/p/4511692.html

總結(jié)

以上是生活随笔為你收集整理的模块化开发之sea.js实现原理总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。