avalon2+webpack2手脚架与avalon2介绍

avalon起源

avalon 是一个简单易用迷你的MVVM框架,它最早发布于2012.09.15, 为解决同一业务逻辑存在各种视图呈现而开发出来的。 事实上,这问题其实也可以简单地利用一般的前端模板加jQuery 事件委托 搞定, 但随着业务的膨胀, 代码就充满了各种选择器与事件回调,难以维护。 因此彻底的将业务与逻辑分离,就只能求助于架构。 最初想到的是MVC,尝试过backbone,但代码不降反升,很偶尔的机会,碰上微软的WPF, 优雅的MVVM架构立马吸引住我,我觉得这就是我一直寻找的解决之道。

avalon将所有前端代码彻底分成两部分,视图的处理通过绑定实现(angular有个更炫酷的名词叫指令), 业务逻辑则集中在一个个叫VM的对象中处理。我们只要操作VM的数据,它就自然而然地神奇地同步到视图。 显然所有神秘都有其内幕,C#是通过一种叫访问器属性的语句实现,那么JS也有对应的东西。 感谢上帝,IE8最早引入这东西(Object.defineProperty),可惜有BUG,但带动了其他浏览器实现它, IE9+便能安全使用它。 对于老式IE,我找了好久,实在没有办法,使用VBScript实现了。

Object.defineProperty或VBS的作用是将对象的某一个属性,转换一个setter与getter, 我们只要劫持这两个方法,通过Pub/Sub模式就能偷偷操作视图。为了纪念WPF的指引, 我将此项目以WPF最初的开发代号avalon来命名。 它真的能让前端人员脱离DOM的苦海,来到数据的乐园中!

avalon的所有指令都是以ms-*命名,ms是用纪念我之前的一个框架mass Framework!

在线教程

http://avalonjs.coding.me/home.html

相关UI框架(oniui)

http://hotelued.qunar.com/oniui/index.html#!/widgets

介绍

这个一个以webpack2为基础的脚手架正式版,一个多资源统筹的脚手架。
本项目使用avalon2作为演示框架。
为兼容低版本浏览器,我也是强烈推荐一下它。市面上应该也算唯一能够支持到IE8以下的MVVM框架了吧。

关于【Webpack】

服务端使用Koa。需要注意的是,只有一个目的那就是提供了webpack-dev-middleware 和 webpack-hot-middleware(代码热替换)。使用自定义的Koa程序替换webpack-dev-server,让它更容易实现universal 渲染和为了不使这个包过于庞大。
针对不同的loader采用了多线程编译,极大的加快了编译速度。
使用webpack.DllReferencePlugin打包框架和库。加快编译与打包速度。
启动新技术tree-shaking
提供测试框架进行单元测试,代码覆盖率报告,可与Travis-ci和Coveralls快速对接。【配置说明】
Babel被配置babel-plugin-transform-runtime可以让代码更优化。

关于【Css】

css的模块化,预处理器的编译。(支持sass,scss,less,postcss)
针对低版本浏览器和其他浏览器内核的特殊性,启用autoprefixer自动添加浏览器前缀
针对移动开发,有独特的处理方案。(具体文档等待补充)
可导入字体和字体图标,操作非常简单。(如阿里系icon)【配置文档】
每次修改都会生成新的文件名,防止旧样式缓存带来的影响。(与JS间做了特殊处理,通过JS引入的CSS不会因JS改变而改变它的hash值)
针对开发模式启用修改自动刷新页面。(做了特殊处理,发布模式将得到优化)

关于【Js】

支持ES6的最新特性
模块化,可才用ES6的import,也可用AMD规范的require
每次修改都会生成新的文件名,防止旧脚本缓存带来的影响。(与CSS间做了特殊处理,通过JS引入的CSS不会因CSS改变而改变它的hash值)
快速编译,自动刷新。
将常用的框架和库进行单独打包。(Dll)防止重复引用,导致打包文件臃肿。
提供公共脚本的文件入口,此文件将被所有页面自动引用。(可设置全局变量,引入公共的库。如Jquery)

关于【Html】

支持单页应用和多页应用的混合开发。
自动引入页面的CSS和JS文件。无需手动设置URL。(所有文件hash的改变都会导致文件名改变,这里的资源引用全由内部自动完成)
如有使用常用的框架和库进行单独打包。(Dll),将需要单独引用dll的vendor.js;

开始

环境配置

安装node.js
安装git

依赖配置

确认好你的环境配置,然后就可以开始以下步骤。

$ git clone https://github.com/sayll/avalon-webpack-start.git
cdavalonwebpackstart npm install # Install project dependencies
$ npm start # Compile and launch

如果一切顺利,就能正常打开端口:http://localhost:1000/

开发过程中,你用得最多的会是npm start,但是这里还有很多其它的处理:
npm run

avalon2+webpack2手脚架

https://github.com/sayll/avalon-webpack-start

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值