blade利刃出鞘】一起进入移动端webapp开发吧
龚宏壮
前言
在移动浪潮袭来的时候，小钗有幸进入框架组做webapp框架开发，过程中遇到了移动端的各种坑，也产生了各种激情，就我们公司的发展历程来说
第一阶段：使用传统方式开发移动站点，少量引入HTML5元素
第二阶段：框架化，使用jquery mobile框架，发现慢，组件不好管理，不好维护给搞掉了
第三阶段：jquery+Backbone的组合，最后为了瘦身将jquery换成了zepto
第四阶段：框架适应Hybrid版本，Hybrid相关频道与H5站点一套代码，业务扩展遍地开花
第五阶段：框架适应ipad版本/实现前端ABTesting，由于不可控原因，计划夭折
框架使用过程中需要快速适应业务需求，框架中过多的掺杂了业务代码，并且随之发展，框架本身的耦合度、设计不合理的地方也体现了出来
小钗虽然知道哪里有问题，但框架的代码不是想象那么好改，一个API的改变会导致整个业务线的崩溃，听之任之又很不爽
开发一套干净webapp框架的想法油然而生，于是该框架便出现了
诚然，此框架比不上Backbone、比不了anglarJS，毕竟小钗的资历、水平有限，所以框架本身可能都会有一些缺陷，但作为初步接触前端的同学
或者想在前端看到一些设计思想的同学，或者想在移动webapp试水的公司。此框架还是有一些他一些优势，我们带着看看不吃亏的想法，还是可以看看嘛！！！
也希望各位多多支持，代码写的不好也在提高，因为小钗不是专业的重构，其中的CSS及DOM结构全部由在线网站down下来了，这里是抄袭我说清楚了哦。
① 这次首先出一篇大体介绍性文章，简单结束
② 而后有1,2篇博客对其中的全局MVC相关做说明，这里使用了hashChange与pushState两种方案
③ 然后对其中的UI继承关系做梳理，并拿其中比较复杂的几个UI组件说一下设计思路，预计会有3-5篇
④ 最后根据反馈对框架做一些调整，效果好的话，我也试试捐赠，我们家的左小萌居然也在搞捐赠，我觉得我也该搞个！！！
框架主要用途还是自我学习交流，以及框架思维整理，BUG在所难免，若是有BUG请给我留言！
框架简介
快速浏览
想简单看看demo的朋友请到： http://yexiaochai.github.io/blade/
对源码有兴趣的朋友请入：https://github.com/yexiaochai/blade
若是PC端浏览请使用chrome浏览器，不用谢我叫雷锋，若是只有IE的同学请装chrome暂时抛弃IE
支持情况
由于做是个人框架，并且是学习，框架便抛弃了一些系统现在支持情况是
IOS6+
android4+
那些手机不过千的浏览器上渲染可能会有问题，至于wp或者低版本兼容，小钗便需要看后续精力与工作强度
框架发展
第一期-MVC
该框架第一期的目标是简单的webapp MVC的实现，现在也基本实现了，app支持hashChange与pushState两种方式做路由加载view
对此有兴趣的同学可以看看helloWord，关于app与页面级View的关系如下：
Toast UML
第二期-通用工具
框架第二期的想法是，完善本身一些通用的东西，比如UI组件或者简单的flip手势工具等
这里小钗不是专业的前端，就直接从线上将公司的CSS Down下来了，也用了他的Dom结构 但是
整个组件的扩展非常方便，有兴趣的同学看看UI一块的代码，UI的继承关系如下：
Toast UML
第三期-ABTesting
框架第三期目标是实现前端ABTesting方案
第四期-ipad适配
框架第四期的目标是一套业务代码，可以同时用于mobile与ipad
第五期-Hybrid
框架第五期目标是实现Hybrid交互适配，由于小钗本身不懂native开发所以此方案要靠后
随机期-疑难杂症
框架还会单开一个频道做一些疑难杂症处理，比如： ① fixed问题 ② 区域滚动问题 ③ app唤醒 ④ History路径问题等
目录简介
有些项目文件或者不相关的文件我们不予关注，整个框架代码在blade文件目录中主要
demo在demo中......
dest为框架打包后的文件
doc用于存放一些文档，暂时还未补齐，我的想法是博客作为文档，因为后期会源码解析，并分析设计思维
grunt存放着打包文件
helloworld为最简单的入门代码，教我们如何进入webapp开发
res存放资源样式文件，这里是直接用的别人的
test用于存放测试用例，当然现在很多用例未加上......
Helloworld
要进入webapp开发非常简单，只需要将代码下载下来即可，其中helloworld异常简单
blade框架每个页面为一个页面片，一个页面片对应一个js文件，并且可能会对应一个html模板文件
一个频道的运行只需要这些文件即可（其实有点多的），最外层的index.html是基本入口
1 <!doctype html>
2 <!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!-->
3 <html class="ie">
4 <!--<![endif]-->
5 <html>
6 <head>
7 <meta charset="utf-8" />
8 <title>hello world</title>
9 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
10 <meta content="telephone=no" name="format-detection" />
11 <meta name="apple-mobile-web-app-capable" content="yes" />
12 <link href="../res/style/style.css" rel="stylesheet" type="text/css" />
13
14 </head>
15 <body onselectstart="return false">
16
17 <script src="../blade/libs/require.js" type="text/javascript"></script>
18
19 <script src="../blade/libs/zepto.js" type="text/javascript"></script>
20 <script src="../blade/libs/underscore.js" type="text/javascript"></script>
21 <script src="../blade/libs/underscore.extend.js" type="text/javascript"></script>
22 <script src="../blade/libs/fastclick.js" type="text/javascript"></script>
23
24 <script src="../blade/common.js" type="text/javascript"></script>
25 <script type="text/javascript" src="./main.js"></script>
26 </body>
27 </html>
他这里引入了源码文件，我这里未做任何处理，实际使用请参考demo的dest.html
可以看到，js入口为对应的main.js：
1 (function () {
2
3 window.getViewTemplatePath = function (path) {
4 return 'text!helloworld/templates/' + path + '.html';
5 }
6
7 require.config({
8 baseUrl: '../',
9 paths: {
10 }
11 });
12
13 require(['AbstractApp'], function (App) {
14 //实例化App
15 var app = new App({
16 'defaultView': 'index',
17 'viewRootPath': 'helloworld/views/'
18 });
19
20 });
21 })();
那里引入了我们全局抽象App，并进行了实例化，这个时候整个代码便开始运行了，这里默认加载的是index View
View Code
我们每个View皆是继承至MVC中的View，对于业务层的View只需要关注上面四个事件点即可，描述文字写的比较清楚了，我这里便不多说了
这个时候直接运行index.html便会默认加载index.js的逻辑代码，webapp卡片设计由此开始
demo
是否引入第三方组件？
demo中会列举出框架中的一些UI组件与一些通用功能的API，并做简单示例，一个框架是否好用的一个标识便是其API是否丰富好用
blade这里还需要很多努力，这里还望各位多多提点
稍微成熟点的公司一般不会使用什么第三方组件，什么创业团队就最喜欢使用第三方的插件，或者通用功能，我原来就见过一个公司：
① 需要一个弹出层组件便引用国外的，1000-2000行代码，功能非常全面
② 需要一个flip手势工具也引用一个第三方的，代码500-2000行，功能非常全面
但是一来程序员抓不住其中的关键，一旦遇到不能适应项目的功能便完蛋了，这个时候对程序员的水准要求便高了可能需要源码修改
往往完全读懂后却发现自己只是需要其中的一点点功能而已，这个时候很有可能会重写，或者寻找另外的库，所以只有2B公司才会完全依赖什么第三方库
一般放出来的库文件，都是十分全面，会满足很多场景，但是你只会用到一个，或者你基本适用，但是总有一个两个地方不适用，那么怎么办呢？再从新引入一个第三方库么？？？
这样的话产品前端代码便会越发臃肿难以维护，并且BUG无数，又烂又慢。
demo简介
算了，这里扯远了，回到demo中来，demo中的代码逻辑便稍微复杂一点了，首先他存在着两个入口文件，分别是：
① debug.html 用于调试，其中的所有文件皆是源码形式
② dest.html 这个文件稍有不同，其使用的框架文件和控制器js文件全部被grunt打包好了，我们这里不存在Ajax数据请求，所以整个浏览不会发生请求延时，按道理来说比较快
dest目录便是装的压缩后的文件，我们其实将所有相关文件全部打包至了其中的dest/main.js，包括模板文件，这个多亏grunt与requireJS之功
整个demo的设计我们放到下一章节再说，这里简单描述下，其中比较关键的是ex_mvc中的文件，顾名思义，他代表对框架mvc的扩展
扩展的基石是继承，业内前端面试一道必考提便是继承，但是前端真正使用该技术的人感觉不多，很多前端都喜欢堆代码，还停留在面向过程。
blade这里便对js的继承做了一个很好的示例，希望对js的继承、面向对象知识点有所了解的朋友，不妨看看两个MVC中的代码有何不同
View Code
这里代码比较简单，主要是继承至AbstractView，然后做了demo项目的一些通用工作
其中有一大段代码是对代码高亮做处理的，这里小钗可耻的引用了一个第三方库。。。。。。
实现继承的代码在underscore.extend中，这段代码需要各位仔细研读，是本项目的基石。
继承基石
总的来说，各个view页面卡片的代码存放与views里面，对应的模板文件存放与templates中，具体原理我们后面点说明
业务入口与全局控制器
这里入口的js文件为main.js，这个是最为关键一个js，我们将里面的动画相关逻辑去掉，来看看主干代码：
1 (function () {
2 var project = 'demo/';
3
4 window.getViewTemplatePath = function (path) {
5 return 'text!' + project + 'templates/' + path + '.html';
6 }
7
8 require.config({
9 baseUrl: '../',
10 paths: {
11 'View': project + 'ex_mvc/view'
12 }
13 });
14
15 var animations = {};
16
17 require(['AbstractApp'], function (App) {
18 //实例化App
19 var app = new App({
20 //选择pushState还是hashChange
21 hasPushState: false,
22 'defaultView': 'index',
23 'viewRootPath': '' + project + 'views/',
24 animations: animations
25 });
26
27 $.bindFastClick && $.bindFastClick();
28
29 });
30 })();
核心代码是17-27行，这里首先做了一些初始化变量定义，然后使用requireJS引入了我们的全局控制器，这个文件虽然不到400行，却是整个框架的最大核心！
全局控制器的工作
这里点一下便是，后续我们会详解之，这里简单介绍全局控制器app应该干的事情
① 提供URL解析机制，以便让控制器可以根据URL获得当前是要加载哪个view的实例，比如
http://www.baidu.com/index.html#index
http://www.baidu.com/index
若是使用hashChange实现浏览器跳转便直接取出index这个键值；
若是使用pushState方案的话，便需要业务同事给出取出URL键值的方法，最终我们需要得到index这个键值
② app应该保留各个view的实例，并且维护一个队列关系
以现在博客园为例，我们可能具有两个view页面片：index->detail
我们首次便是加载index这个view，点击其中一个项目便加载detail这个view，这个时候app是应该同时保存两个view，并且内部要维系一个访问顺序队列
这个队列最好可与浏览器保存一致，若不能保存一致，后期便可能会出现点击浏览器后退死循环的问题
③ app应该提供view实例化的方法
所以的view实例若无特殊原因，皆应该由app生成，app应该具有实例化view的能力，view一般使用AMD规范管理，这里涉及异步加载
PS：真实工作环境中，view需要自建一套事件机制，比如实例化时候要触发什么事件，显示时候要触发什么事件，皆需要有，app只会负责
实例化->显示->隐藏
④ app应该提供监控浏览器事件，每次自动加载各个view
如上面所述，app会注册一个hashChange事件或者popState事件以达到改变URL不刷新页面的功能，这个功能主要用于用户点击浏览器原生后退键
可扩展性/共性与继承
blade的构想是高扩展性，比如我们核心的MVC的代码即可被继承扩展
无论是AbstractView还是AbstractAPP或者AbstractModel，皆是可继承扩展的
我们后面会根据需要以AbstractApp继承一个ipadAPP版本出来
我们也会根据AbstractModel继承至十月localstorage缓存请求数据的版本
AbstractView的继承扩展更是家常便饭
以上是MVC的扩展，完了就是UI组件的扩展，简单由日历组件的demo来看
我只需要提供简单的实现，用户几行代码便可以实现假日日历，很多公司会出现价格日历，也仅仅是几行代码的事情
我们可以继承下来做单独实现，也可在实例化时候传入数据解决，总之这里的观点便是
UI需要寻找共性，做抽象，而不是重复编码
再以弹出层类为例：
我们的alert、toast、bubble.layer（冒泡层），皆是继承至ui.layer，这样做的好处是什么呢？
简单来说他们具有以下共性：
① 都需要mask蒙版，也可以不具有
② 点击mask可关闭
③ 居中排列
④ 以绝对定位的形式出现
于是我们可以轻易实现这样的代码：
View Code
至于气泡弹层当然不是居中的，于是气泡弹层中只需要重写掉repositon接口罢了
前端经常会提到继承，经常会提到闭包，但是到底如何使用继承，或者闭包是什么，还是必须真正使用才能掌握
若是不使用就不会真正明白，那么如何成为优秀的前端，如何成为前端架构只是空想！更何论站在顶端呢？
PS：当然，小钗这里有点扯淡，并不是说小钗是高手，其实我在公司也只是小码农
结语
好了，扯着扯着，就扯多了，今天暂时到此，其实也没有什么好介绍的，代码在那里各位自己看吧，若是有什么问题请给位留言
最后，各位若能点一下推荐，或者在git中为我加一颗心便善莫大焉了
后面点，小钗会对框架进行源码解读，希望对入门级的前端朋友有所帮助，也不知道各位是否感兴趣
您可以考虑给小钗发个小额微信红包以资鼓励
本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/p/3837713.html，如需转载请自行联系原作者
类似资料：