使用seajs進行模塊管理

saucxs 發布于2019-08-19 17:36 / 1826人閱讀

摘要：一類是以國內的等類庫為代表的大教堂模式。在大教堂模式下，所有組件都是顆粒化模塊化的，各組件之間層層分級環環相扣。在集市模式下，所有組件彼此獨立職責單一，各組件通過組合松耦合在一起，協同完成開發兼容性持續更新中。。。

前端模塊化開發的價值 解決命名沖突

我們做項目是常常會做一些通用功能的封裝,封裝成一個個的函數,然后保存在一個名叫util.js的文件中.這種情況就很有可能在另一個開發人員開發時發生命名沖突.

解決繁瑣的文件依賴

基于util.js，我們開始開發UI層通用組件dialog.js,那么我們現在的引用情況應該這樣:

假如有更多的依賴關系引用起來就非常的繁瑣.

使用Sea.js來解決

seajs是一個模塊管理框架,使用seajs需要遵守CMD(Common Module Definition)模塊定義規范.一個文件就是一個模塊.

通過define函數進行模塊定義.

util.js文件的代碼如下:

define(function(require,exports){
    exports.each = function(){
        //實現代碼
    };
    esxports.log = function(str){
        //實現代碼
    }
});

這里的exports向外提供了each和log方法,當這個模塊被引用時,可以調用這兩個方法.

通過require函數進行模塊調用.

dialog.js文件的代碼如下:

define(function(require,exports){
    var util = require("./util.js");
    exports.init = function(){
        util.each();
        util.log();
    }
});

這里通過require("./util.js")來調用到util模塊.

Sea.js 帶來的好處

通過exports暴露接口.這意味著不需要命名空間,也不需要全局變量,解決了命名沖突的問題.

通過require引入依賴.這是一種很好的關注分離，解決了繁瑣的文件依賴.

模塊的版本管理.通過別名等配置,配合構建工具,可以比較輕松的實現模塊的版本管理.

提升可維護性. 模塊化可以讓每個文件的職責單一,非常利于代碼維護.seajs提供nocahce debug等插件,擁有在線調試等功能,能比較明顯的提升效率.

前端性惡能優化.seajs通過異步加載模塊對頁面性能非常有益.seajs提供了combo flush插件，配合服務端,可以很好對頁面性能進行調優.

跨環境共享模塊.CMD模塊定義規范與NOdejs的模塊規范非常相近.通過seajs的Nodejs版本,可以很方便實現模塊的跨服務器和瀏覽器共享.

前端的模塊化構建可分為兩大類。一類是以 Dojo、YUI3、國內的 KISSY 等類庫為代表的大教堂模式。在大教堂模式下，所有組件都是顆粒化、模塊化的，各組件之間層層分級、環環相扣。另一類是以 jQuery、RequireJS、國內的 Sea.js、OzJS 等類庫為基礎的集市模式。在集市模式下，所有組件彼此獨立、職責單一，各組件通過組合松耦合在一起，協同完成開發.

seajs兼容性

Chorme 3+

Firfox 2+

Safari 3.2+

Opera 10+

IE 5.5+

持續更新中。。。

GPU云服務器云服務器 seajs模塊如何使用云服務器進行分配如何使用云服務器進行游戲靜態資源使用cdn進行服務分發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78672.html

sea.js

摘要：目標了解目前公司所用得代碼模塊式開發。比較目前比較流行得框架。模塊化可以讓每個文件的職責單一，非常有利于代碼的維護。模塊定義規范與的模塊規范非常相近。一類是以國內的等類庫為代表的大教堂模式。目標：1.了解目前公司所用得sea.js,代碼模塊式開發。 2.比較目前比較流行得bootstrap,angularJS,reactJS框架。參考：http://seajs.org/docs/...

renweihub 2019-08-19 17:48 評論0 收藏0
前端seajs模塊化實踐

摘要：前端模塊化開發的價值惱人的命名沖突煩瑣的文件依賴使用來解決除了解決命名沖突和依賴管理，使用進行模塊化開發還可以帶來很多好處模塊的版本管理。模塊化可以讓每個文件的職責單一，非常有利于代碼的維護。模塊定義規范與的模塊規范非常相近。前端模塊化開發的價值1、惱人的命名沖突2、煩瑣的文件依賴使用 Sea.js 來解決除了解決命名沖突和依賴管理，使用 Sea.js 進行模塊化開發還可以帶來很多好...

SHERlocked93 2019-08-22 16:06 評論0 收藏0
再談JavaScript模塊化

摘要：應用日益復雜，模塊化已經成為一個迫切需求。異步模塊加載機制。引用的資源列表太長，懶得回調函數中寫一一對應的相關參數假定這里引用的資源有數十個，回調函數的參數必定非常多這就是傳說中的簡述緣起模塊通常是指編程語言所提供的代碼組織機制，利用此機制可將程序拆解為獨立且通用的代碼單元。模塊化主要是解決代碼分割、作用域隔離、模塊之間的依賴管理以及發布到生產環境時的自動化打包與處理等多個方面...

MorePainMoreGain 2019-08-26 10:14 評論0 收藏0
前端模塊化開發

摘要：來源于阿賢博客模塊化今天給大家寫一篇關于前端模塊化開發知識點。前端模塊化開發那點歷史模塊化是指在解決某個復雜混雜問題時，依照一種分類的思維把問題進行系統性的分解以之處理。來源于：阿賢博客 javascript模塊化今天給大家寫一篇關于前端模塊化開發知識點。前端模塊化開發那點歷史模塊化：是指在解決某個復雜、混雜問題時，依照一種分類的思維把問題進行系統性的分解以之處理。模塊...

tianhang 2019-08-23 16:44 評論0 收藏0
JavaScript模塊化發展

摘要：所有依賴這個模塊的語句，都定義在一個回調函數中，等到所有依賴加載完成之后前置依賴，這個回調函數才會運行。如果將前面的代碼改寫成形式，就是下面這樣定義了一個文件，該文件依賴模塊，當模塊加載完畢之后執行回調函數，這里并沒有暴露任何變量。模塊化是我們日常開發都要用到的基本技能，使用簡單且方便，但是很少人能說出來但是的原因及發展過程。現在通過對比不同時期的js的發展，將JavaScript模...

mengbo 2019-08-22 18:05 評論0 收藏0