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

solocoder 发布于2019-08-19 17:27 / 1374人阅读

摘要：现在微软终于痛定思痛决定放弃了不支持的安全更新，对我们前端来说，真的是重大利好啊言归正传，这篇文章的目的就是把怎么用构建一个单页面程序介绍以下，是对自己的一个总结，也喜欢对大家有一定的借鉴作用，写的不好不对的地方希望大家多评论评论谢谢。

这篇文章是写在公司项目结束之后的，因为我个人不太会把没有实践过的东西写出来，实践是检验真理的唯一标准么，用的怎么样，好不好用，在成熟实践过的项目上能体现出来。

我们公司一开始技术选型的时候是考虑用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 单页面程序的工程构建，下一节详细介绍下按需加载和路由系统

云服务器服务器托管 avalon avalon cdn avalon绑定属性 avalon.js cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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