我的前端之旅第一彈--SeaJs基礎和spm編譯工具運用[圖文]
1. 概述
本文章來源於本人在專案的實際應用中寫下的記錄。因初期在安裝和使用Seajs和SPM的時候,有點不知所措的經歷。為此，我們編寫本文件，通過圖文並茂的方式來為大家講解seajs和spm編譯環境的搭建和基本使用方法。
2. 認識SEAJS
seajs是一種前端模組化載入框架,與jQuery等JavaScript框架不同，SeaJS不會擴充套件封裝語言特性，而只是實現JavaScript的模組化及按模組載入。SeaJS的主要目的是令JavaScript開發模組化並可以輕鬆愉悅進行載入，將前端工程師從繁重的JavaScript檔案及物件依賴處理中解放出來，可以專注於程式碼本身的邏輯。SeaJS可以與jQuery這類框架完美整合。使用SeaJS可以提高JavaScript程式碼的可讀性和清晰度，解決目前JavaScript程式設計中普遍存在的依賴關係混亂和程式碼糾纏等問題，方便程式碼的編寫和維護。
3. 下載Seajs和spm編譯環境
1.首先需要本機安裝Nodejs，nodejs也是目前比較流行的技術之一，至於nodejs，有興趣的可以在www.nodejs.org 官網檢視具體API。一般情況下安裝好之後,是會預設安裝好npm工具的，可以進入本機cmd鍵入npm -v 檢視，正常是話會提示下列版本資訊。
2.設定全域性路徑(可選，如不執行此步驟，預設安裝會安裝在appdata)：我的理解就是這個路徑是你通過npm安裝之後所以的東西存放的路徑。建議安裝好之後設定一下npm的全域性變數，因為預設是在appdata裡面的，可以將全域性變數設定成自己想要的位置，具體方法：
首先在本地你安裝路徑下新建兩個資料夾（你想要放下載檔案的地方）：
在cmd命令：npm config set prefix "D:\Program Files\nodejs\node_global"
以及npm config set cache "D:\Program Files\nodejs\node_cache"
基本上全域性路徑就配置好了，以後安裝的外掛和工具都會放在這裡面，我試了試 npm install jquery -g(-g 這個引數就是安裝在全域性);
命令執行完成之後，就會在剛剛global/node_modules目錄裡面自動生成jquery的資料夾和js檔案。
3.安裝需要的外掛:
首先，我們需要使用seajs的東西,所以下載seajs：
如果在目錄下有了，說明正常：
然後我們需要安裝spm編譯打包工具，這步我們推薦 npm install [email protected] -g ，如果直接npm install spm預設使用最高版本3.X，在這個版本下我發現編譯工具不能編譯我寫的JS（查了原因原來是3.X和2.X在寫法上有一些區別,所以編譯不成功），因之前接觸的都是2.X版本的寫法所以就繞道至2.x版本了。
到這步的時候,我們的spm編譯工具就能用了。
4. Seajs怎麼用
主要是程式碼外層有一些規則，具體寫法和目前js書寫方法一致，我就根據我們專案應用上來做一個demo，來一步一步說說怎麼用的吧。
Ø 框架搭建
1.專案框架還是採用前端一般的資料夾路徑，如下圖：
2.把我們需要使用的seajs檔案引入，，從第三步我們下載下來的module中拷貝過來就行的,如下圖：
3.Seajs檔案路徑格式（分為模組和原始檔即[sea-modules和static]），模組不需要我們寫，但如果引用外部的JS則需要手動加入，具體結構件上圖，在js資料夾下建立static資料夾,用來裝原始檔js，也就是我們寫的js檔案，我們也先建立demo資料夾用來區分不同的JS模組，在demo目錄下需要有src資料夾,即原始檔，和package.json，如下圖：
4.編寫我們需要的程式碼檔案：
Src裡面放我們寫的js檔案，我這裡寫的是demo.js,程式碼如下:
/**
*demo
*/
define(function(require,exports,module){
/**
* 建構函式
*/
function PolicyIntlAdd(paramA,paramB,paramC){
this.functionA();
}
/**
* 定義需要用到的方法
*/
/**
*demo
*/
define(function(require,exports,module){
/**
* 建構函式
*/
function Demo(paramA,paramB,paramC){
this.functionA();
}
/**
* 定義需要用到的方法
*/
Demo.prototype={
//初始化方法
functionA:function(){
alert('this is a demo!');
},
//提交方法
functionB:function(){
//to do songmeing...
}
};
module.exports=Demo;
});
我在裡面寫了一句alert方法打印出一些資訊，packa.json裡面內容：
{
"family": "demo",
"name": "demo",
"version": "1.0.0",
"description": "demo",
"author": "[email protected]",
"spm":
{
"alias":{
},
"output": ["demo.js"]
}
}
不要問我為什麼這樣寫,我們將在第二彈給你想要的解釋.
下面就是把我們寫的js編譯一次了，首先cmd進入src的目錄執行spm build，如下圖：
編譯完成後，目錄下會多一個dist資料夾：
在來我們就是要install我們編譯的js檔案了。
還是在cmd這個路徑下，執行 spm install . -d ../../sea-modules/seajs,結果:
現在我們去js/sea-modules/seajs裡面看看：
就多了demo這個模組了，再看看裡面的東西：
現在我們就來寫根目錄下的demo.html，我的程式碼這樣寫的：
<html>
<head>
<title>demo</title>
</head>
<body>
</body>
<script type="text/javascript" src="js/sea-modules/seajs/sea.js"></script>
<script type="text/javascript" src="js/sea-modules/seajs/seajs-style.js"></script>
<script>
seajs.use(['demo/demo/1.0.0/demo'],function(Demo){
var demo = new Demo(null,null,null);
});
</script>
</html>
開啟demo.html，執行結果為：
5. 結語
在本step by step中只簡單介紹了SeaJs和他的初步應用,可能看似有些複雜，但是這種模組化的思想,對我們大型專案的前端是很有幫助的,我們將在下一季更加深入的介紹SeaJs,敬請期待。