![上海盛付通电子商务有限公司 [email_address] 前端架构方向漫谈 – Shengpay.com](https://image.slidesharecdn.com/1-110509095505-phpapp02/85/-1-320.jpg)
![前端遇到的问题 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](https://image.slidesharecdn.com/1-110509095505-phpapp02/85/-4-320.jpg)
![良好的规范性 1. 尽量在前期解决 IE6 潜在的 bug ，如背景图片不缓存， expression 闪动问题 2. 不推荐多重继承 [ 解耦 ] 3. 使用分隔符下划线表示父子级关系 [ 高聚 ] 4. 模块化设计 [ 结构化 ] 5. 前期使用一个 CSS 文件 [ 及早发现命名冲突 ] 6. 前期 CSS 中不使用 #ID[ 预留给后期 JS 及避免 ID 冲突 ] 7. font/background 尽量不使用缩写的方式 [ 便于后期合并样式 ] 8. 非 .net 项目尽量不使用 iframe[ 破坏页面整体性 ]](https://image.slidesharecdn.com/1-110509095505-phpapp02/85/-14-320.jpg)
![JS 规范 1. 变量是用之前必须使用 var 声明 2. 使用命名空间及 use strict.[ 上线之前需注释掉 ] (function(){ "use strict"; // your code here }()); 3. 函数返回自身对象时注意不要形成意外的闭包](https://image.slidesharecdn.com/1-110509095505-phpapp02/85/-17-320.jpg)
![彪叔 [2010]webrebuild](https://cdn.slidesharecdn.com/ss_thumbnails/2010webrebuild-100828150352-phpapp01-thumbnail.jpg?width=560&fit=bounds)
More Related Content
Viewers also liked (6)
Similar to 前端架构漫谈 (20)
More from 裕波 周 (11)
前端架构漫谈
- 1. 上海盛付通电子商务有限公司 [email_address] 前端架构方向漫谈 – Shengpay.com
- 2. 前端发展历史 1. 使用整张图片 + 热点（ MAP ） 2. 将图片切割成块，使用 TABLE 布局 3. 使用元素 inline style 呈现页面 4. 使用外部 CSS 以达到复用的目的 5. 使用 MVC 的理念达到结构和样式分离 6. 页面语义化 /SEO/ 移动设备 HTML5
- 3. 前端遇到的问题 1. 团队间及团队内部协作问题 2. 多系统复用问题 3. 新老系统互相影响问题 4. 前端性能问题 5. 样式优先级混乱问题 6.SEO 搜索引擎优化问题（应该 IMG 出现的地方出现的却是背景图片） 7. 多人协作时操作多份 CSS 冲突问题 8. 使用，选择符导致强耦合问题 9.CSS 重名冲突检测的问题 10. 样式移植问题 11.Z-index 混乱问题 12.background/font 缩写易覆盖问题
- 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
- 5. 前端架构目的 建立一个提高用户体验的基础技术平台，提高公司利润 解决前端开发中潜在的问题，规避项目风险 快速实现设计到产物转化，降低产物开发成本
- 6. 前端架构方向 横向架构 前端小组 A 前端小组 B 前端小组…
- 7. 前端架构方向 纵向架构 UED 设计 前端开发 后端开发
- 9. 前端横向架构 1. 良好的基础架构 2. 良好的规范性
- 10. 良好的基础架构 硬件条件 1. 拥有静态资源服务器及 CDN 2. 使用 JS/CSS 在线压缩 3. 采用 Shell 脚本或 ANT 自动发布 4. 使用了缓存技术
- 11. 良好的基础架构 使用稳定，兼容性强的页面结构及实现方式，如 1. 弹出遮罩层的实现 2. 校验提示信息如何显示 3. 圆角 panel 的实现 4. 使用额外标签清除浮动 5. 空 DIV 或 TD 中加 6. 在 UL 标签加一层 DIV ， class 加在 DIV 上 7. 使用透明 png 解决鼠标事件穿透问题 8. 使用兼容性高的方法如 removeChild
- 12. 良好的基础架构 User infomation Base info Name: Gender: Set Password Password: Confirm: Submit Cancel
- 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>
- 14. 良好的规范性 1. 尽量在前期解决 IE6 潜在的 bug ，如背景图片不缓存， expression 闪动问题 2. 不推荐多重继承 [ 解耦 ] 3. 使用分隔符下划线表示父子级关系 [ 高聚 ] 4. 模块化设计 [ 结构化 ] 5. 前期使用一个 CSS 文件 [ 及早发现命名冲突 ] 6. 前期 CSS 中不使用 #ID[ 预留给后期 JS 及避免 ID 冲突 ] 7. font/background 尽量不使用缩写的方式 [ 便于后期合并样式 ] 8. 非 .net 项目尽量不使用 iframe[ 破坏页面整体性 ]
- 15. 两种 CSS 流派 .page {} .page .head {} .page .body {} page .foot {} .page {} .page_head {} .page_body {} page_foot {} VS
- 16. CSS 组织结构化 // 公共样式 html{} body{} form{} img{} // 布局样式 .page {} .page_head{} .page_body{} .page_foot{} // 特殊页面样式 .product_item_hover{}
- 17. JS 规范 1. 变量是用之前必须使用 var 声明 2. 使用命名空间及 use strict.[ 上线之前需注释掉 ] (function(){ "use strict"; // your code here }()); 3. 函数返回自身对象时注意不要形成意外的闭包
- 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>
- 19. JS 工具库 jMin 轻量级 JS 工具库 jMin 主要功能 : 封装了前端常用功能 , 如 trim, 日期格式化 ,cookie 操作 , 事件绑定 , 动态加载 , 异步请求等 面向对象 : 有一定经验的前端开发人员 https://my-javascript-library-jmin.googlecode.com/svn/trunk/