模塊化開發--sea.js

當你的網站開發愈來愈複雜的時候,會常常遇到一下問題嗎?
1.衝突
2.性能
3.依賴
若是在多人開發或者是複雜的開發過程當中會常常遇到這些問
題,就能夠用模塊化開發來解決.
以上問題是如何產生的?
1.衝突:若是你寫了一個commen.js,這個JS文件主要是寫一些
公用的方法,好比選項卡tab,拖拽等等...當你寫好這些JS以後
可能交給同事用.同事首先引入這個JS文件,有可能這個頁面又
交給新同事開發,這個同事寫了一個function,名爲tab,這時這
個tab就和你寫的公用JS文件裏的tab方法起了衝突致使頁面
出現問題,這時你的同事就會和你協商解決方法,同事能夠改自
己的方法名,最崩潰的狀況是你的新同事引用了一個插件,好比
:xxx.js,這時若是衝突了,你的同事可能會和你協商更名.你可能
會這個時候去把你的公用JS修改一下,用命名空間,這個方法可
以下降衝突,可是不能徹底避免衝突.緣由是有的公司前端較多
,這樣的話命名空間仍是容易衝突.
2.性能:假設仍是同樣的,如今頁面由你的同事來開發,在新的頁
面中可能只用一個功能,這時若是把總體的公用JS引入到頁面
中就不是很合理了,由於咱們只用一個方法,其餘方法用不到就
會浪費不少白白請求的資源.這時咱們的解決方法是能夠拆分
JS,把單獨的JS方法寫到一個JS文件中,這是按需引入不一樣的
JS,使性能提高,這時新的問題又接踵而至,引入的這些JS文件
若是是相互獨立呢,若是有相互依賴就更麻煩,須要注意放置順
序等等.
3.依賴.好比你寫了一個JS文件:text.js,使用方法:text();
你的同事拿去用,先引入了JS文件,而後正常調用,看着沒有問
題可是出問題了,你的同事發現這個文件依賴了另外一個文件
a.js,這時解決了.過了幾天產品提出需求,須要加一些功
能,text.js又須要依賴B.js,你須要再告訴同事,再引入B.js,這時
候你的同事已經很不爽了,他可能不少頁面都調用了,須要改很
多.若是產品又改須要了,b.js不須要了,須要刪除,你又告訴你同事需刪除,這時你的同事發現頁面出問題,緣由是刪除的文件有依賴關係......這就是依賴的問題.因此致使咱們修改bug,工做中大部分是在修改bug,加班也就在所不免.若是咱們能夠避免這些問題,就能夠在工做中省去不少力氣.

模塊化就能夠解決以上問題.

sea.js:
一個適合web端的模塊加載器.解決以上問題,提高
代碼可維護性.

 

模塊的概念:爲了提升性能,咱們把一個方法放到一個JS中,按
需引入提高性能,經過模塊化這個庫來解決依賴 衝突和性能三
個問題,咱們把每一個JS文件都看作是一個模塊.

 

sea.js使用:
1.引入庫
2.如何變成模塊?
----define

3.如何調用模塊
----export:對外的接口,創建關係的方式:exports.name = tab;

 

 

----seajs.use :

經過以上的模塊調用形式就避免了命名衝突.,好比sea1.js是a同事開發的,調用是b同事,
4.如何解決依賴?
----require

假設a.js依賴於b.js,咱們能夠經過sea.js就不須要寫到頁面上了,而是把b.js寫到sea1.js這個文件當中進行依賴,這樣的話咱們只須要引入sea1.js便可.