前端模塊化開發之seaJs

時間 2019-11-30

標籤前端模塊化開發之 seajs 简体版

原文原文鏈接

瞭解後端語言的童鞋必定聽過模塊化開發的概念，好比java、python等後端語言都有本身的模塊化特性，然而和後端語言相比，javascript還還沒有實現模塊化的功能，雖然以後的更高版本可能引入模塊化開發的概念，可是現階段咱們能夠經過第三方控件來實現。javascript

今天我就來給你們介紹下能夠幫助咱們實現前端模塊化的工具——seaJs。若是對seaJs已經有實際使用經驗的小夥伴能夠直接忽略這篇文章。css

若是有小夥伴瞭解requireJs，那麼學習seaJs會至關的容易，由於requireJs也是前端模塊化的構建工具之一，二者的主要區別就是requireJs是基於AMD規範的，而seaJs是基於CMD規範的。html

至於什麼是AMD和CMD，在這裏不作詳細介紹啦，想要了解的童鞋能夠查看seaJs做者玉伯的回答：http://www.zhihu.com/question/20351507/answer/14859415前端

好了，咱們切入正題，首先先介紹下seaJs的下載及配置。java

1、seaJs的下載及配置node

下載：http://seajs.org/docs/#downloads （當前最新版本爲3.0.0，還可使用smp下載）python

配置：（1）將下載後的sea.js文件挪到本身的網站目錄下（sea.js位於sea-modules\seajs\seajs中）；jquery

　　　個人網站目錄以下：git

　　　（2）在templates下的demo.html中進行載入，以下所示：github

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <title>Examples</title>
 7 <link href="" rel="stylesheet">
 8 </head>
 9 <body>
10     <p class="text">111</p>
11     <script type="text/javascript" src="../static/seajs_module/jquery/2.1.4/jquery-2.1.4.min.js"></script>
12     <script type="text/javascript" src="../static/seajs_module/seajs/2.2.0/sea.js"></script>
13     <script>
14     seajs.config({
15         base:"../static/seajs_module"  //基準文件目錄
16     });
17     seajs.use("../static/app/src/demo.js")</script>  //入口模塊
18 </body>
19 </html>

配置主要包括：載入sea.js文件、seajs.config配置及使用入口模塊這三塊，在這裏我就不作詳細介紹了，官方文檔介紹的很是詳細 http://seajs.org/docs/#quick-start

其中seajs.config的配置項主要有以下幾個：

 1 seajs.config({
 2     // 別名配置    alias: {
 3         'jquery'     : '/static/lib/jquery/2.1.4/jquery',
 4     },
 5     map: [
 6         [ /^(.*\.(?:css|js|tpl))(.*)$/i, '$1?'+seajsTimestamp ]
 7     ],
 8 
 9     // 路徑配置    paths: {
10         'lib': '/static/lib',
11         'util': '/static/component/base/util'
12     },
13 
14     // 變量配置//vars: {//    'locale': 'zh-cn'//},// 映射配置//map: [//    ['http://example.com/js/app/', 'http://localhost/js/app/']//],// 預加載項
15     preload: ['jquery', 'seajs-text','common'],
16     //preload: ['jquery', 'seajs-text', 'seajs-combo'],// 調試模式
17     debug: true,
18 
19     // Sea.js 的基礎路徑//base: 'http://example.com/path/to/base/',// 文件編碼
20     charset: 'utf-8'
21 });

2、seaJs模塊的編寫

seaJs遵循一個文件即一個模塊的規則，模塊與模塊之間能夠存在依賴關係。

模塊編寫方法以下：

demo.js文件

1 define(function(require, exports, module) {  
2        var until=require('../src/untils'); //引入須要的模塊（即相應js文件）  
3        //你的代碼
4  　　$(".text").css("color","red");
5 　　 until.rule(); //調用until中的方法
6 });

以上代碼說明，demo.js中的代碼依賴於until.js中的代碼

untils.js文件

1 define(function(require, exports, module) {
2     exports.rule=function(){
3         console.log('111');
4     }
5 });

untils.js中經過exports將rule方法暴露到全局。

這樣咱們就實現了js模塊與模塊之間的編寫與功能實現，效果以下：

雖然咱們再頁面中沒有引入untils.js，可是經過模塊之間的依賴關係，seaJs也會自動幫咱們加載進來，而demo.js是做爲入口模塊載入。

這裏須要注意的是jquery模塊若是以require方式在demo.js中引入的話會報 Uncaught TypeError: $ is not a function 的錯誤。具體緣由是jquery是非CMD標準的，若是須要調用能夠經過以下解決方案：

（1）直接在頁面中引入jquery文件，就像本文上方的demo.html中同樣

（2）刪除jquery中的相應代碼，2.14版本中刪除源碼底部的 && define.amd 便可（親測可行）。

（3）官方解決方案請查看 https://github.com/seajs/seajs/issues/286

總之這也是使用seaJs比較深的坑了。

3、使用spm壓縮合並模塊

剛剛上面演示的模塊加載例子，咱們能夠看到瀏覽器運行的時候自動會把咱們的模塊加載進去，那麼若是咱們構建一個稍微複雜的功能後，咱們使用的模塊也會愈來愈多，若是這樣一會兒加載不少js文件顯然是很是影響性能的，那麼怎麼解決呢，這裏就須要用到seaJs的包管理工具spm。

用過npm的童鞋確定知道它是node.js的包管理工具，這裏咱們須要下載node 和 npm來安裝spm。

至於如何下載安裝node.js就不作介紹了，能夠訪問 https://nodejs.org/en/ 進行下載。

下載安裝完成後，打開命令行(cmd)，輸入 npm install -g spm開始下載spm

等待一段時間下載完成後咱們就可使用spm命令了。

進入咱們所要壓縮合並的項目js目錄，輸入spm build demo.js --combine 就能夠壓縮咱們的demo模塊文件了：

壓縮成功後會在demo.js的同級目錄下新建一個dist文件夾存放壓縮後的js文件。

接下來咱們再來打開網頁看一下加載的文件就會發現只加載了demo.js了：

ok，大功告成，咱們的前端模塊化之路就邁進了一小步了，至於詳細的spm命令請查看 http://spmjs.io/documentation/develop-a-package#build

後續還會介紹前端自動化開發，雖然都不是什麼新鮮玩意了，可是本身探索的過程纔是最重要的，值得記錄分享。

歡迎關注、分享、評論。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。