由 NordriDesign™提供www.nordridesign.com

上海盛付通电子商务有限公司haiyang5210@gmail.com

前端架构方向漫谈 – Shengpay.com

Page 2

前端发展历史

1. 使用整张图片 + 热点（ MAP ） 2. 将图片切割成块，使用 TABLE 布局 3. 使用元素 inline style 呈现页面 4. 使用外部 CSS 以达到复用的目的 5. 使用 MVC 的理念达到结构和样式分离 6. 页面语义化 /SEO/ 移动设备 HTML5

Page 3

前端遇到的问题

1. 团队间及团队内部协作问题 2. 多系统复用问题 3. 新老系统互相影响问题 4. 前端性能问题 5. 样式优先级混乱问题 6.SEO 搜索引擎优化问题（应该 IMG 出现的地方出现的却是背景图片） 7. 多人协作时操作多份 CSS 冲突问题 8. 使用，选择符导致强耦合问题 9.CSS 重名冲突检测的问题 10. 样式移植问题 11.Z-index 混乱问题 12.background/font 缩写易覆盖问题

Page 4

前端遇到的问题

13. 背景图片无法显示问题 [ 某些情况 background 缩写导致 ]

14.CSS 在开发流程中流转一致性问题 15.CSS 名称 HTML 结构之间的对应问题（即如何能只看 CSS 名称就能知

道 HTML 结构）、 16.ID 冲突问题 17.position:relative 导致页面元素层级混乱问题 18.position:absolute 使用 left/top 需依赖外层定位问题 19. 图片和页面分离问题 20.UL/TABLE 无法在后期特殊化处理问题 21.CSSSprite 累加易出错问题如 position:1361px1471px;

22. png24 透明浏览器不兼容问题 23.Iframe 导致的问题 24. 为什么是 DIV+CSS 而不是 P+CSS

Page 5

前端架构目的

建立一个提高用户体验的基础技术平台，提高公司利润

解决前端开发中潜在的问题，规避项目风险

快速实现设计到产品转化，降低产品开发成本

Page 6

前端架构方向

横向架构

前端小组A

前端小组B

前端小组…

Page 7

前端架构方向

纵向架构

UED设

计

前端开发

后端开发

Page 8

前端横向架构

如何让多个团队更快、更好、更有效地

协作？

Page 9

前端横向架构

1. 良好的基础架构 2. 良好的规范性

Page 10

良好的基础架构

硬件条件 1. 拥有静态资源服务器及 CDN

2. 使用 JS/CSS 在线压缩 3. 采用 Shell 脚本或 ANT 自动发布 4. 使用了缓存技术

Page 11

良好的基础架构

使用稳定，兼容性强的页面结构及实现方式，如 1. 弹出遮罩层的实现 2. 校验提示信息如何显示 3. 圆角 panel 的实现 4. 使用额外标签清除浮动 5. 空 DIV 或 TD 中加  

6. 在 UL标签加一层 DIV ， class 加在 DIV 上 7. 使用透明 png 解决鼠标事件穿透问题 8. 使用兼容性高的方法如 removeChild

Page 12

良好的基础架构

User infomation

Base info

Name:

Gender:

Set Password

Password:

Confirm:

Submit Cancel

Page 13

良好的基础架构

<form action="" method="post">

<fieldset>

<legend>User infomation</legend>

<dl class="section">

<dt class="section_title">Base info</dt>

<dd class="section_content">

<div class="field_item">

<label class="field_item_title" for="name">Name: </label>

<input type="text" id="name" />

</div>

<div class="field_item">

<label class="field_item_title" for="gender">Gender: </label>

<input type="text" id="gender" />

</div>

</dd>

</dl>

</fieldset>

</form>

Page 14

良好的规范性

1. 尽量在前期解决 IE6 潜在的 bug ，如背景图片不缓存， expression闪动问题

2. 不推荐多重继承 [ 解耦 ]

3. 使用分隔符下划线表示父子级关系 [ 高聚 ]

4.模块化设计 [ 结构化 ]

5. 前期使用一个 CSS文件 [ 及早发现命名冲突 ]

6. 前期 CSS 中不使用 #ID[预留给后期 JS 及避免 ID 冲突 ]

7. font/background尽量不使用缩写的方式 [便于后期合并样式 ]

8. 非 .net 项目尽量不使用 iframe[破坏页面整体性 ]

Page 15

两种 CSS 流派

.page {}

.page .head {}

.page .body {}

page .foot {}

.page {}

.page_head {}

.page_body {}

page_foot {}

VS

Page 16

CSS组织结构化

// 公共样式

html{}

body{}

form{}

img{}

// 布局样式

.page {}

.page_head{}

.page_body{}

.page_foot{}

// 特殊页面样式

.product_item_hover{}

Page 17

JS 规范

1. 变量是用之前必须使用 var声明 2. 使用命名空间及 use strict.[ 上线之前需注释掉 ]

(function(){

"use strict";

// your code here

}());

3.函数返回自身对象时注意不要形成意外的闭包

Page 18

JS小测试

<script type="text/javascript">

function foo(){

foo.abc = function(){alert('def')};

this.abc = function(){alert('xyz')};

abc = function(){alert('@@@@@')};

var abc = function(){alert('$$$$$$')};

}

foo.prototype.abc = function(){alert('456');};

foo.abc = function(){alert('123');};

var f = new foo();

f.abc();

foo.abc();

abc();

</script>

Page 19

JS工具库 jMin

轻量级 JS工具库 jMin

主要功能 : 封装了前端常用功能 , 如 trim,日期格式化 ,cookie 操作 ,

事件绑定 , 动态加载 ,异步请求等 面向对象 : 有一定经验的前端开发人员

https://my-javascript-library-jmin.googlecode.com/svn/trunk/

感谢您的关注 www.Shengpay.com