在移动浪潮袭来的时候,小钗有幸进入框架组做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:当然,小钗这里有点扯淡,并不是说小钗是高手,其实我在公司也只是小码农
本文转自叶小钗博客园博客,原文链接:http://www.cnblogs.com/yexiaochai/p/3837713.html,如需转载请自行联系原作者