【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:当然,小钗这里有点扯淡,并不是说小钗是高手,其实我在公司也只是小码农





本文转自叶小钗博客园博客,原文链接:http://www.cnblogs.com/yexiaochai/p/3837713.html,如需转载请自行联系原作者
上一篇:$(window).load(function() {})和$(document).ready(function(){})的区别


下一篇:一起来乐邮邮——妙趣小软件:MailMail发布预告