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"
    })
});

执行结果以下

这就是一个经典的MVVMangularjs

avalon 单页面程序 （种子工程）之一 用requirejs引入avalon

创建项目结构

编写index主页

下面咱们再来看看main.js文件

执行结果以下

这一小节简单介绍下avalon 单页面程序的工程构建，下一节详细介绍下按需加载和路由系统

avalon 单页面程序（种子工程）之一用requirejs引入avalon