分享一个下午做的avalon-webpack-spa,算是avalon工程化的一个示例吧
不知道cnode有没有人在使用avalon?
avalon与webpack写单页面应用
学习和使用avalon已经一个多月了,中间历经坎坷,踩坑跳坑,也算是积累了一些avalon的相关实践的经验. 趁着项目结束,终于有闲暇实践来整理和沉淀这些知识.
至于avalon是什么,百度知乎都有说明,是去哪儿的司徒正美写的一个兼容IE6+的MVVM框架
这是一个集成了
avalon
jquery
gulp
webpack
mmstate
的偏工程化的一个单页面应用项目模板,使用mmState
管理路由,支持异步加载和打包,替换oniui的avalon和avalon.shim版本为1.4.7.1,目前热替换部分还有一些问题,等以后再解决了.
在线访问
项目主页
使用方法
注意事项
-
mkdir demo && cd demo && git clone https://github.com/wandergis/avalon-webpack-spa.git
-
npm install
确保安装了node,及全局安装了gulp和webpack,复制webpack-amdcss-loader中的amdcss-loader目录到node_modules目录下,切记切记 -
gulp
或者npm start
效果截图
关于ie8的兼容问题
- ajax在低版本ie下默认会从缓存读取,需要加上对应的时间戳,直接在avalon.ajax的请求配置的
cache
设置为false
- 需要取vm的值的情况下请使用vm的
$model
属性 - 数组的增加和获取长度请使用
pushArray
和size
- 不要直接定义
data:{}
然后给data动态增加属性,不要过多的嵌套 - oniui的分页控件在数据获取之后再设置,否则ie8下面不出现
- 验证控件的异步问题,将逻辑写在
validationVM.validateAll
的验证成功的方法中 - 绑定下拉框的数据获取,只需要select的绑定的对象的值
- 使用oniui最好使用1.4.7版本的avalon,解决了光标和下拉联动的问题
参考文章
5 回复