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

solocoder 發布于2019-08-19 17:27 / 1542人閱讀

摘要：現在微軟終于痛定思痛決定放棄了不支持的安全更新，對我們前端來說，真的是重大利好啊言歸正傳，這篇文章的目的就是把怎么用構建一個單頁面程序介紹以下，是對自己的一個總結，也喜歡對大家有一定的借鑒作用，寫的不好不對的地方希望大家多評論評論謝謝。

這篇文章是寫在公司項目結束之后的，因為我個人不太會把沒有實踐過的東西寫出來，實踐是檢驗真理的唯一標準么，用的怎么樣，好不好用，在成熟實踐過的項目上能體現出來。

我們公司一開始技術選型的時候是考慮用angularjs的，但是公司高層為了市場容量說最好需要支持下 ie , 然而angularjs 對ie8的支持都不是很好，所以最后使用了能夠兼容所有瀏覽器的avalon, 正如司徒大大自己說的，國內的環境就是這樣，ie 還是有大量的市場份額的。（現在微軟終于痛定思痛決定放棄了ie , 不支持ie的安全更新，對我們前端來說，真的是重大利好啊）

言歸正傳，這篇文章的目的就是把怎么用 avalon 構建一個單頁面程序介紹以下，是對自己的一個總結，也喜歡對大家有一定的借鑒作用，寫的不好不對的地方希望大家多評論評論, 謝謝。

建立項目結構

這個我參考了司徒正美寫的結構目錄。 js 文件夾是放置所有的js 引用類庫的，無論是其他類庫還是自己公司寫的類庫也好，我把自己寫的類庫放在了 js/common文件夾下面； modules 是放置不同的業務模塊的，如圖，我建立了一個 sub1業務，還有一個 sub2業務，后面我們就根據這兩個子業務來進行開發講解；其它css,fonts,images 目錄就不用講大家也都知道了；然后main.js為入口文件，與index.html 主頁面放在根目錄下面

編寫index主頁

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




    
    avalon工程
    


{{name}}

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

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

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


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

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

執行結果如下

這就是一個經典的MVVM

這一小節簡單介紹下avalon 單頁面程序的工程構建，下一節詳細介紹下按需加載和路由系統

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78532.html

avalon 單頁面程序（種子工程）之二按需加載和路由系統

摘要：的成功離開不這三個東西，分層架構，路由系統，儲存系統。分層架構是我們組織復雜代碼的關鍵，路由系統是將多個頁面壓縮在一個頁面的關鍵。在這個種子工程中，我都調用了同一個方法，就比較適合目錄動態生成，需要按需調用不同的頁面的情況。 SPA的成功離開不這三個東西，分層架構，路由系統，儲存系統。分層架構是我們組織復雜代碼的關鍵，路由系統是將多個頁面壓縮在一個頁面的關鍵。其中avalon路由用到...

fanux 2019-08-19 17:30 評論0 收藏0
avalon2初體驗

摘要：最近因項目進展需求對現有項目進行重構，由于目前項目還未實現真正意義上的前后端分離后續會循序重構實現，在時間緊產品循序迭代的情況下，想一次性實現前后端分離精力實在有限主要是前端開發人力不足。最近因項目進展需求對現有項目進行重構，由于目前項目還未實現真正意義上的前后端分離（后續會循序重構實現），在時間緊產品循序迭代的情況下，想一次性實現前后端分離精力實在有限（主要是前端開發人力不足）。所...

youkede 2019-08-01 15:51 評論0 收藏0
avalon與masonry的結合

摘要：相關組件版本最近，在公司的項目中，要開發一個使用瀑布流的前臺，衡量了各種解決方案后，還是覺得最成熟，所以就選用了它。測試的結果很令人沮喪，依然沒有控制節點的位置，所以應該不是這個問題。相關組件版本：avalon 1.3.6、masonry 3.1.5 最近，在公司的項目中，要開發一個使用瀑布流的前臺，衡量了各種解決方案后，還是覺得masonry最成熟，所以就選用了它。而在之前開發后臺...

Kosmos 2019-08-22 10:59 評論0 收藏0
webpack2正式版

摘要：正式版正式版，簡單方便的構建單頁和多頁用用。下一步是完善單元測試，代碼覆蓋率報告如果大家有更好的想法及建議請提。開啟測試并生成覆蓋率報告。頁面的其他資源文件，通過引入單元測試日后調整，待開發樣式使用可添加替換預處理。 webpack2正式版 webpack2正式版，簡單方便的構建單頁和多頁用用。（啟用tree-shaking新技術）地址：avalon-webpack-start 這個啟...

WilsonLiu95 2019-08-21 15:06 評論0 收藏0
webpack2正式優化版，簡化操作

摘要：啟動新技術提供測試框架進行單元測試，代碼覆蓋率報告，可與和快速對接。關于的模塊化，預處理器的編譯。頁面的其他資源文件，通過引入單元測試日后調整，待開發使用手冊流程基本位于創建視圖更多說明主動引入的默認地址為位于配置相關的和文件。 webpack2-Scaffolding showImg(https://segmentfault.com/img/remote/14600000082840...

0x584a 2019-08-20 14:03 評論0 收藏0