avalon 單頁面程序（種子工程）之一用requirejs引入avalon

時間 2019-12-10

標籤 avalon 頁面程序種子工程之一 requirejs 引入欄目 JavaScript 简体版

原文原文鏈接

這篇文章是寫在公司項目結束以後的，由於我我的不太會把沒有實踐過的東西寫出來，實踐是檢驗真理的惟一標準麼，用的怎麼樣，好很差用，在成熟實踐過的項目上能體現出來。

咱們公司一開始技術選型的時候是考慮用angularjs的，可是公司高層爲了市場容量說最好須要支持下 ie , 然而angularjs 對ie8的支持都不是很好，因此最後使用了可以兼容全部瀏覽器的avalon, 正如司徒大大本身說的，國內的環境就是這樣，ie 仍是有大量的市場份額的。（如今微軟終於痛定思痛決定放棄了ie , 不支持ie的安全更新，對咱們前端來講，真的是重大利好啊）javascript

言歸正傳，這篇文章的目的就是把怎麼用 avalon 構建一個單頁面程序介紹如下，是對本身的一個總結，也喜歡對你們有必定的借鑑做用，寫的很差不對的地方但願你們多評論評論, 謝謝。css

創建項目結構

這個我參考了司徒正美寫的結構目錄。 js 文件夾是放置全部的js 引用類庫的，不管是其餘類庫仍是本身公司寫的類庫也好，我把本身寫的類庫放在了 js/common文件夾下面； modules 是放置不一樣的業務模塊的，如圖，我創建了一個 sub1業務，還有一個 sub2業務，後面咱們就根據這兩個子業務來進行開發講解；其它css,fonts,images 目錄就不用講你們也都知道了；而後main.js爲入口文件，與index.html 主頁面放在根目錄下面html

編寫index主頁

主頁很簡單，新建一個常規html頁面，引用require.js, 定義入口main.js位置。其中ms-controller="root"就是avalon的一個controller, 一個model 對應一個controller , 規定一個做用域，這個跟angularjs差很少,也有mvc的思想. 一個頁面能夠定義多個controller前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>avalon工程</title>
    <script src="js/require/require.js" data-main="main"></script>
</head>
<body ms-controller="root">
{{name}}
</body>
</html>

下面咱們再來看看main.js文件

第一塊內容配置了requirejs ，配置了avalon的引用位置
第二塊內容經過require引入avalon
requirejs的學習請參考官網 http://requirejs.org/
而後定義了一個 avalon的model, 這個其實就是一個對象，裏面能夠封裝html controller中須要用到的數據和方法，默認$id屬性是必需要的，這個id 會找到html頁面的對應的controller, 如前面咱們定義的controller叫 root. 最後又添加了一個屬性name, html頁面對應 {{name}}java

require.config({//第一塊，配置
    baseUrl: '',
    paths: {
        avalon: ["js/avalon/avalon"]//必須修改源碼，禁用自帶加載器，或直接刪提AMD加載器模塊
    }
});


require(['avalon'],function(avalon){
    avalon.log("引入avalon");

    var model = avalon.define({
        $id: "root",
        name: "tangolivesky"
    })
});