五,搭建一個工程環境
到此,基礎的理論都搞得差不多了,是時候做個實際的例子
換個教程,根據《avalon學習教程》系列--《1、引入avalon》建立一個新項目。
我用的vs2013community版
首先open->web site,指向一個空目錄
新建兩個folder,一個modules,一個reference。
Modules裏存放網站的一個一個模塊,reference裏面放上我們要用到的第三方庫,比如avalon,還有常用的requirejs,jquery等等
按照例子裏說的,用到了avalon(我打算用modern版本),requirejs(及其插件domready,css,text),jquery
因爲用到了require和domready,avalon裏自帶的就可以刪掉了。
因爲用的是modern版,需要仿照shim版改一下
從AMD加載器開始,都注掉,然後把shim裏的end開始的代碼拷過來。
然後把文件名裏的modern去掉,還叫avalon
然後是作爲入口的兩個文件
Index.html
<!DOCTYPE html>
<html>
<head>
<title>avalon練習</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="Reference/require/require.js" data-main="main.js"></script>
<style>
.ms-controller {
visibility: hidden;
}
</style>
</head>
<body ms-controller="root">
<div>{{header | html}}</div>
<div ms-include-src="page"></div>
<div>{{footer}}</div>
</body>
</html>
有幾個東西還是值得注意下
首先是引到了requirejs,data-main是requirejs的屬性,指明瞭最外層的js
然後,把body分成了三個部分,分別綁定了header和footer,header還是按html的格式來解析。
中間用了一個叫page的模板
Style應該是用來保證畫面不閃出綁定前的內容,這個入門教程裏有提。
然後是main.js
require.config({//第一塊,配置
baseUrl: '',
paths: {
jquery: 'Reference/jquery/jquery-2.1.3',
avalon: "Reference/avalon/avalon",//必須修改源碼,禁用自帶加載器,或直接刪提AMD加載器模塊
text: 'Reference/require/text',
domReady: 'Reference/require/domReady',
css: 'Reference/require/css'
},
priority: ['text', 'css'],
shim: {
jquery: {
exports: "jQuery"
},
avalon: {
exports: "avalon"
}
}
});
require(['avalon', "domReady!"], function () {//第二塊,添加根VM(處理共用部分)
avalon.log("加載avalon完畢,開始構建根VM與加載其他模塊")
avalon.templateCache.empty = " "
avalon.define("root",function(vm){
vm.header= "這是根模塊,用於放置其他模塊都共用的東西,比如<b>用戶名</b>什麼的",
vm.footer= "頁腳消息",
vm.page= "empty",
vm.page2="empty"
})
avalon.scan(document.body)
require(['./modules/testModule/test'], function () {//第三塊,加載其他模塊
avalon.log("加載其他完畢")
});
});
主要都是requirejs的格式,這個需要看requirejs的文檔,大概就是給每個js設定一個名字,然後直接在js裏引用名字就可以了
第一塊,是requirejs的配置
第二塊,就是root的viewmodel定義
第三塊,是加載別的模塊了,我這裏起名字叫testModule
每個模塊應該至少包括一個html和一個js,所以新建兩個文件,一個test.html,一個test.js,放到testModule文件夾下
test.html
<div ms-controller="testVM">
<input ms-duplex="value" />{{value}}
</div>
test.js
define(["avalon", "text!./test.html"], function (avalon, test) {
avalon.templateCache.test = test
avalon.define("testVM",function(vm){
vm.value= "test text"
})
avalon.vmodels.root.page = "test"
})
avalon.templateCache.test = test和avalon.vmodels.root.page = "test"這兩句話很關鍵。
avalon.templateCache.test = test是說把test.html加入到templateCache裏,並定義個名字叫test
avalon.vmodels.root.page = "test"是說把一開始在main.js裏定義的root的page屬性改成剛纔定義的test。
這樣,test.html裏的內容就可以在index的第二個div裏顯示出來了。
Ok,到此爲止,用avalon結合requirejs就生成了一個簡單的網站開發工程環境
可喜可賀,可喜可賀