面向未来的重构

⾯面向未来的“重构”
kejun
hikejun.com | twitter/weibo: @kejunz | douban.com/people/listenpro

http://www.ﬂickr.com/photos/fernando_alda/6399170943/in/set-72157628144032827

Sunday, November 4, 12

“重构”观念的理解



第一层“重构”是指基于Web标准发网站




第二层“重构”的目标是实现代码用、⻚页面性能和可维护性





第三层“重构”的目标是实现活性和响应性





第三层“重构”的目标是实现活性和响应性

前个层次是解决过去和当前的问题，第三个层次是解决未来问题的基础


迭代频率

C类

B类

A类

生命周期


迭代频率

C类活性

B类易维护性

A类效率

生命周期


现象分析
⻚页面生命周期⻓长、迭代频繁的情况最容易产生代码冗余

未用到用到扫描⻚页面数 Last-Modiﬁed

weibo frame.css 1686 485 25 11/02
index.css 299 38 25 10/10
A_index.css 3203 384 25 11/02
douban _init_.css 163 180 47 10/10
_all.css 256 118 47 10/17
douban.css 2011 360 47 11/01


douban.css douban.js

150

112.5

75

37.5

0
2007-7 2009-2 2010-7 2011-7 2012-6


A/B测试、灰度上线、快速迭代、响应式发......



杂度更高、迭代更快、多版本并存......传统架构难于应付




深度重构前端架构，增强前端的“机动性”




深度重构前端架构，增强前端的“机动性”

a. 改造模板系统，实现真正模块化的view层
b. 完善静态文件管理系统


模块

在程序设计中，为完成某一功能所需的一段程序或子程序；

或指能由编译程序、装配程序等处理的独立程序单位；

或指大型软件系统的一部分。


模块

在程序设计中，为完成某一功能所需的一段程序或子程序；

或指能由编译程序、装配程序等处理的独立程序单位；

或指大型软件系统的一部分。

1. 模块如何分

2. 模块应具有的独立性。装载/卸载不影响整个系统运行


http://en.wikipedia.org/wiki/Open_Source_Ecology_%28project%29

传统写法
<head>
<script src="jQuery.js"></script>
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="boutique.css">
<style>
#db-boutique { ... }
</style>
</head>

<body>

<%include file=”boutique.html” />

<script src="boutique.js"></script>
<script>
$('#bn').click(function(e){ ... });
</script>
</body>


传统写法
<head>
<style>
</style>
</head>

<body>


<script>
</script>
</body>


<div id=”db-boutique” class="mod">
<a id="bn">link</a>
</div>

传统写法
<head>
<style>
</style>
</head>

<body>


<script> 没有真正独立
带来维护隐患
</script>
</body>

<a id="bn">link</a>
</div>


传统写法模块真正实现独立
<head>
<script src="jQuery.js"></script> <head>
<link rel="stylesheet" href="common.css"> <script>
<link rel="stylesheet" href="boutique.css"> ${istatic(‘/js/lib/head.js’)|n}
<style> </script>
#db-boutique { ... } <link rel="stylesheet" href="common.css">
</style> </head>
</head>
<body>
<body>
<script src="do.js" data-corelib="jQuery.js"></scri
<script src="boutique.js"></script> </body>
带来维护隐患
</script>
</body>

<a id="bn">link</a>
</div>


传统写法模块真正实现独立
<head>
<script src="jQuery.js"></script> <head>
<link rel="stylesheet" href="common.css"> <script>
<link rel="stylesheet" href="boutique.css"> ${istatic(‘/js/lib/head.js’)|n}
<style> </script>
#db-boutique { ... } <link rel="stylesheet" href="common.css">
</style> </head>
</head>
<body>
<body>
<script src="do.js" data-corelib="jQuery.js"></scri
<script src="boutique.js"></script> </body>
带来维护隐患
</script>
</body> 
<%block filter=”collect_css”>
</%block>
<div id=”db-boutique” class="mod"> <div id=”db-boutique” class="mod">
<a id="bn">link</a> <a id="bn">link</a>
</div> </div>
<script>
Do(‘boutique.js’, function(){
});
</script>

业务代码和通用代码分离



公共文件冗余小




模块迭代，模块内部解决





安装和卸载方便





安装和卸载方便

封装杂度和多状态


n年前

发

3年前前端按需加载&依赖管理

静态文件构建

现在



<a href="url" class="btn" style="padding-left:8px;" >
<i style="margin-right:2px; font-size:14px;" >+</i>添加照片
</a>

<%block ﬁlter="collect_css">
.btn-add-pic { padding-left:8px; }
.btn-add-pic i { margin-right:2px;font-size:14px; }
</%block>
<a href="url" class="btn btn-add-pic"><i>+</i>添加照片</a>

线上态


线上态

发态


内联用

少量⻚页面业务相


项目JS文件使用场景

外联用 (粗粒度)

内联用 (细粒度)


CSS模块库

<link rel="stylesheet" type="text/css" href="http://l.yimg.com/zz/combo?nn/lib/metro/g/
core_yui_3.4.2.css&nn/lib/metro/g/core_srvc_1.0.9.css&nn/lib/metro/g/core_mod_1.0.116.css&nn/
lib/metro/g/fp/fp_widecc_0.0.23.css&nn/lib/metro/g/fp/fp_403_0.0.2.css&nn/lib/metro/g/
masthead/masthead_0.2.141.css&nn/lib/metro/g/masthead/masthead_403_0.0.34.css&nn/lib/metro2/g/
announcebar/announcebar_1.0.22.css&nn/lib/metro/g/contentcarousel/
contentcarousel_widecc_0.0.12.css&nn/lib/metro/g/multimedia/multimedia_1.0.48.css&nn/lib/
metro/g/contentcarousel/contentcarousel_news_0.0.10.css&nn/lib/metro/g/mostpopular/
mostpopular_0.0.10.css&nn/lib/metro/g/marketindices/marketindices_widecc_0.0.9.css&nn/lib/
metro/g/news/offlead_0.1.15.css&nn/lib/metro/g/news/news_accordion_0.1.83.css&nn/lib/metro/g/
contentcarousel/contentcarousel_polls_0.0.37.css&nn/lib/metro/g/tuc/tuc_wave3_0.0.20.css&nn/
lib/metro/g/tabbar/tabbar_0.0.45.css&nn/lib/metro/g/uicontrib/locdrop_widget_0.0.6.css&nn/lib/
metro/g/mail/mail_0.0.44.css&nn/lib/metro/g/mail/mail_403_0.0.21.css&nn/lib/metro/g/fptoday/

导入依赖的CSS模块
fptoday_widecc_0.0.20.css&nn/lib/metro/g/pa/pa_widecc_0.1.25.css&nn/lib/metro/g/pa/
pa_detached_0.1.91.css&nn/lib/metro/g/pa/pa_add_0.1.68.css&nn/lib/metro/g/tts/
tts_widecc_0.0.18.css&nn/lib/metro/g/footer/footer_0.1.79.css&nn/lib/metro/g/footer/
subfooter_0.0.15.css" />


静态文件管理

• 前端的加载器负责粗粒度文件的按需加载和依赖管理

• 后端的静态文件管理

a. 细粒度文件引用

b. 自动分离内联css/js代码

c. css/js的预处理（SCSS、伪语法）


变量嵌套

mixin

单行注释
运算


变量嵌套

mixin

单行 vs. 多行 ?
单行注释
问题：输入优美输出运算
肿 :(
嵌套问题：避免杂的嵌套
组合问题：冗余的定义
继承问题：继承多余的定义
保持简单！保持平！
调试问题，chrome24支持SASS的Source Mapping


“ 用”不是简单的组合
完全用。大而全未必好
粒度越细、功能越单一越有可能用
基础代码用
copy 用


http://sheldonbrown.com/retroraleighs/catalogs/1977-drawings/pages/22-track-bike.html

框架


小粒度
元件

框架


小粒度
元件

框架大粒度
组件


小粒度
元件

框架大粒度
组件

组件的分解


.. ...
超越传统响应式发


响应性图片

响应性布局

viewport meta

原始⻚页面


适配大小、精度
响应性图片 dataURL

320 px mobile portrait
响应性布局 480 px mobile landscape
600 px small tablet
768 px tablet portrait
viewport meta 1024 px tablet landscape
1280 px desktop

原始⻚页面


性能优化注⻚页面性能、电池消耗

响应交互增强触屏行为和兼容面事件

适配大小、精度
响应性图片 dataURL

320 px mobile portrait
响应性布局 480 px mobile landscape
600 px small tablet
768 px tablet portrait
viewport meta 1024 px tablet landscape
1280 px desktop

前端原始⻚页面

响应性模块可定制、可组合
后端

响应性静态资源文件(JS/CSS) 可兼容面版，也可以重新发


group.douban.com


<%def name=”main”>
<%include ﬁle=”path/mod1.html” args=”data=data” />
</%def>
<%def name=”mobile_main”>
${self.main()} ## 简单!
</%def>

path/mod3.html
mobile_mod3.html
js_path/mod3.js
mobile_mod3.js Desktop Mobile
css_path/mod3.css
mobile_mod3.css


增强触屏行为和兼容面事件

mobile浏览器和面浏览器的事件模型有明显差




a. 绑定document上的事件代理挂了

b. mouse事件的顺序:
mouseover > mousemove > mousedown > mouseup

c. mouseout再次击非点击区域时触发

d. click最后发生(大约300ms，有延迟感), 且有可能不发生




a. 绑定document上的事件代理挂了
body { cursor:pointer; }

b. mouse事件的顺序:
mouseover > mousemove > mousedown > mouseup

c. mouseout再次击非点击区域时触发

d. click最后发生(大约300ms，有延迟感), 且有可能不发生

利用jQuery的sepcial event重写click、mousedown/up/move
https://gist.github.com/3358036
TouchPunch(http://touchpunch.furf.com)


调试和监测

http://hikejun.com/blog/?p=693

发环境同时预览 ;P
group.douban.com


adobe edge inspect(adobe shadow) + 本地weinre server


tcpdump
sudo tcpdump -i en1 -n -s 0 -w yourapp.pcap tcp or port 53

用Charles或pcapperf打


用户不心流量
快、流畅、省电


新“角色” − 电池


新“角色” − 电池

iPhone 5: 3.8v 5.45Whr, 5.45 / 3.8 = 1434mAh
总电能 5.45 * 3600 = 19620J(焦耳)

iPhone 4S: 3.7v 5.3Whr, 5.3 / 3.7 = 1432mAh
总电能5.3 * 3600 = 19080J(焦耳)

HTC(G6，我的手机): 3.7v , 1500mAh
总电能3.7 * 1.5 * 3600 = 19980J(焦耳)

S3: 3.8v 7.98Whr, 7.98/3.8 = 2100mAh
总电能7.98 * 3600 = 28728J(焦耳)


下载260K，耗电约25J

上传260K，耗电约15J

显示600px宽的图片(no cache)，耗电约1.4J

显示600px宽的图片(cache)，耗电约0.6J

显示JPEG图片耗电 < PNG < GIF

有cache能耗远小于没cache

......

出自 http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf


平均⻚页面大小

下载260K，耗电约25J 1Ｍ
上传260K，耗电约15J

显示600px宽的图片(no cache)，耗电约1.4J

显示600px宽的图片(cache)，耗电约0.6J

显示JPEG图片耗电 < PNG < GIF

有cache能耗远小于没cache

......

出自 http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf


影响能耗的键因子：

cache、请求数、图片大小、js/css的冗余、css/js的杂度


总结

1. 改造模板系统和完善静态文件管理系统提升机动性，在此基础上进行重构

2. 模块化view层的实现

3. 在上面实现后，顺利进入响应式发阶段

4. 响应式发实践的一些收获


Q &A
kejun


我说完了
看？
芳，你怎么
元

Q &A
kejun


谢谢！
kejun


面向未来的重构

More Related Content

What's hot

Viewers also liked

Similar to 面向未来的重构

面向未来的重构