模組化前端開發入門指南(二)

2022-01-17 10:21:10 字數 1578 閱讀 1446

使用seajs模組化載入器進行模組化開發,以及它的一些弊端。

專案目錄

新建新專案

引入sea.js,檔案路徑modules/sea.js

引入公共庫jquery。

新建index.html,index.js

專案目錄如下:

關於sea.js的公共模組路徑sea.js載入時,會自動獲取sea.js所在的路徑,將sea.js檔案存放的路徑做為公共模組的根目錄。

以modules/sea.js為例,require('a')載入的是modules/a.js模組,require('a/b')載入的是modules/a/b.js模組。

index.html內容如下:

建立模組

建立檔案modules/modulea.js。接上篇三種封裝形式,使用cmd規範後,分別是這樣:

// 建立jquery外掛程式形式,不需要返回值

// 使用方法require('modulea'),返回為null

define(function(require, exports, module) ;

});//object字面量方式

define(function(require, exports, module) ,

fun2: functdion() {}

};});

//prototype繼承,new function方式

define(function(require, exports, module)

modulea.prototype.fn1 = function() {};

modulea.prototype.fn2 = function() {};

module.exports = modulea;

});

模組的使用
/*

jquery外掛程式形式的模組載入方式

*/define(function(require, exports, module) );

/*object形式

*/define(function(require, exports, module) );

/*原型鏈繼承, new function形式

*/define(function(require, exports, module) );

seajs作為一款國人創造的乙個工具庫,一直是被放在與requirejs齊平的地位上**,個人覺得非常不易。使用方式也簡單易懂。而且有配套的打包和構建工具,做工程化也不是問題。不足之處是文件不足,提供的工程化產品在國外的grunt、gulp、bower、browserify、components等工程化產品的生態和完整使用文件衝擊下,受眾不多。

如何改造現有檔案為cmd模組

玉伯回答seajs和其他模組載入器的異同

玉伯近期說要給seajs立碑悼念,知乎人的看法

前端模組化

前端模組化解決什麼問題?有了模組,我就可以很方便的使用別人的 想要什麼功能,就用載入什麼模組。但是,這樣做需要有乙個前提,那就是大家必須以同樣的方式編寫模組,否則就亂套了。所以組內需要有一套統一的模組規範。如何實現模組?1 物件字面量的變體 2 js設計模式的模組模式 3 採用成熟的庫檔案。前兩種方...

前端模組化

定義 具有相同屬性和行為的事物的集合 在前端中 將一些屬性比較類似和行為比較類似的內容放在同乙個js檔案裡面,把這個js檔案稱為模組 目的 為了每個js檔案只關注與自身有關的事情,讓每個js檔案各行其職 模組化 指的就是遵守commonjs規範,解決不同js模組之間相互呼叫問題 commonjs a...

前端模組化

當多人開發同一專案時,很容易就會產生命名衝突的問題,尤其是js檔案,任何的js引入順序的打亂都可能導致專案執行失敗,為了解決命名衝突的問題,在es6之前,可以使用函式閉包來解決這個問題。即可能像這樣 function 這樣雖然可以解決命名衝突的問題,但也使得 的復用性變得極差,因為其它的檔案將無法再...