Your SlideShare is downloading. ×
0
上海盛付通电子商务有限公司 [email_address] 前端架构方向漫谈 –  Shengpay.com
前端发展历史 <ul><li>1.  使用整张图片 + 热点( MAP )  </li></ul><ul><li>2.  将图片切割成块,使用 TABLE 布局  </li></ul><ul><li>3.  使用元素 inline style ...
前端遇到的问题 <ul><li>1. 团队间及团队内部协作问题 </li></ul><ul><li>2. 多系统复用问题 </li></ul><ul><li>3. 新老系统互相影响问题 </li></ul><ul><li>4. 前端性能问题 <...
前端遇到的问题 <ul><li>13. 背景图片无法显示问题 [ 某些情况 background 缩写导致 ] </li></ul><ul><li>14.CSS 在开发流程中流转一致性问题 </li></ul><ul><li>15.CSS 名称...
前端架构目的 <ul><li>建立一个提高用户体验的基础技术平台,提高公司利润 </li></ul><ul><li>解决前端开发中潜在的问题,规避项目风险 </li></ul><ul><li>快速实现设计到产品转化,降低产品开发成本 </li>...
前端架构方向 <ul><li>横向架构 </li></ul>前端小组 A 前端小组 B 前端小组…
前端架构方向 <ul><li>纵向架构 </li></ul>UED 设计 前端开发 后端开发
前端横向架构 如何让多个团队更快、更好、更有效地 协作 ?
前端横向架构 <ul><li>1. 良好的基础架构 </li></ul><ul><li>2. 良好的规范性 </li></ul>
良好的基础架构 <ul><li>硬件条件 </li></ul><ul><li>1. 拥有静态资源服务器及 CDN </li></ul><ul><li>2. 使用 JS/CSS 在线压缩 </li></ul><ul><li>3. 采用 Shell...
良好的基础架构 <ul><li>使用稳定,兼容性强的页面结构及实现方式,如 </li></ul><ul><li>1. 弹出遮罩层的实现 </li></ul><ul><li>2. 校验提示信息如何显示 </li></ul><ul><li>3. 圆...
良好的基础架构 <ul><li>User infomation  </li></ul><ul><li>Base info </li></ul><ul><ul><li>Name:  </li></ul></ul><ul><ul><li>Gende...
良好的基础架构 <ul><li><form action=&quot;&quot; method=&quot;post&quot;> </li></ul><ul><li><fieldset> </li></ul><ul><li><legend>...
良好的规范性 <ul><li>1.  尽量在前期解决 IE6 潜在的 bug ,如背景图片不缓存, expression 闪动问题 </li></ul><ul><li>2. 不推荐多重继承  [ 解耦 ] </li></ul><ul><li>3...
两种 CSS 流派 .page {} .page .head {} .page .body {} page .foot {} .page {} .page_head {} .page_body {} page_foot {} VS
CSS 组织结构化 <ul><li>// 公共样式 </li></ul><ul><li>html{} </li></ul><ul><li>body{} </li></ul><ul><li>form{} </li></ul><ul><li>img...
JS 规范 <ul><li>1.  变量是用之前必须使用 var 声明 </li></ul><ul><li>2. 使用命名空间及 use strict.[ 上线之前需注释掉 ] </li></ul><ul><li>(function(){ </...
JS 小测试 <ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>function foo(){ </li></ul><ul><li>foo.abc = fun...
JS 工具库 jMin <ul><li>轻量级 JS 工具库 jMin </li></ul><ul><li>主要功能 :  封装了前端常用功能 , 如 trim, 日期格式化 ,cookie 操作 , 事件绑定 , 动态加载 , 异步请求等 <...
感谢您的关注  www.Shengpay.com
Upcoming SlideShare
Loading in...5
×

前端架构漫谈

1,802

Published on

web标准化交流会第十八期上海站分享
王海洋:前端架构漫谈

Published in: Technology, Education
1 Comment
5 Likes
Statistics
Notes
  • cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,802
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
42
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "前端架构漫谈"

  1. 1. 上海盛付通电子商务有限公司 [email_address] 前端架构方向漫谈 – Shengpay.com
  2. 2. 前端发展历史 <ul><li>1. 使用整张图片 + 热点( MAP ) </li></ul><ul><li>2. 将图片切割成块,使用 TABLE 布局 </li></ul><ul><li>3. 使用元素 inline style 呈现页面 </li></ul><ul><li>4. 使用外部 CSS 以达到复用的目的 </li></ul><ul><li>5. 使用 MVC 的理念达到结构和样式分离 </li></ul><ul><li>6. 页面语义化 /SEO/ 移动设备 HTML5 </li></ul>
  3. 3. 前端遇到的问题 <ul><li>1. 团队间及团队内部协作问题 </li></ul><ul><li>2. 多系统复用问题 </li></ul><ul><li>3. 新老系统互相影响问题 </li></ul><ul><li>4. 前端性能问题 </li></ul><ul><li>5. 样式优先级混乱问题 </li></ul><ul><li>6.SEO 搜索引擎优化问题(应该 IMG 出现的地方出现的却是背景图片) </li></ul><ul><li>7. 多人协作时操作多份 CSS 冲突问题 </li></ul><ul><li>8. 使用,选择符导致强耦合问题 </li></ul><ul><li>9.CSS 重名冲突检测的问题 </li></ul><ul><li>10. 样式移植问题 </li></ul><ul><li>11.Z-index 混乱问题 </li></ul><ul><li>12.background/font 缩写易覆盖问题 </li></ul>
  4. 4. 前端遇到的问题 <ul><li>13. 背景图片无法显示问题 [ 某些情况 background 缩写导致 ] </li></ul><ul><li>14.CSS 在开发流程中流转一致性问题 </li></ul><ul><li>15.CSS 名称 HTML 结构之间的对应问题(即如何能只看 CSS 名称就能知道 HTML 结构)、 </li></ul><ul><li>16.ID 冲突问题 </li></ul><ul><li>17.position:relative 导致页面元素层级混乱问题 </li></ul><ul><li>18.position:absolute 使用 left/top 需依赖外层定位问题 </li></ul><ul><li>19. 图片和页面分离问题 </li></ul><ul><li>20.UL/TABLE 无法在后期特殊化处理问题 </li></ul><ul><li>21.CSSSprite 累加易出错问题如 position:1361px1471px; </li></ul><ul><li>22. png24 透明浏览器不兼容问题 </li></ul><ul><li>23.Iframe 导致的问题 </li></ul><ul><li>24. 为什么是 DIV+CSS 而不是 P+CSS </li></ul>
  5. 5. 前端架构目的 <ul><li>建立一个提高用户体验的基础技术平台,提高公司利润 </li></ul><ul><li>解决前端开发中潜在的问题,规避项目风险 </li></ul><ul><li>快速实现设计到产品转化,降低产品开发成本 </li></ul>
  6. 6. 前端架构方向 <ul><li>横向架构 </li></ul>前端小组 A 前端小组 B 前端小组…
  7. 7. 前端架构方向 <ul><li>纵向架构 </li></ul>UED 设计 前端开发 后端开发
  8. 8. 前端横向架构 如何让多个团队更快、更好、更有效地 协作 ?
  9. 9. 前端横向架构 <ul><li>1. 良好的基础架构 </li></ul><ul><li>2. 良好的规范性 </li></ul>
  10. 10. 良好的基础架构 <ul><li>硬件条件 </li></ul><ul><li>1. 拥有静态资源服务器及 CDN </li></ul><ul><li>2. 使用 JS/CSS 在线压缩 </li></ul><ul><li>3. 采用 Shell 脚本或 ANT 自动发布 </li></ul><ul><li>4. 使用了缓存技术 </li></ul>
  11. 11. 良好的基础架构 <ul><li>使用稳定,兼容性强的页面结构及实现方式,如 </li></ul><ul><li>1. 弹出遮罩层的实现 </li></ul><ul><li>2. 校验提示信息如何显示 </li></ul><ul><li>3. 圆角 panel 的实现 </li></ul><ul><li>4. 使用额外标签清除浮动 </li></ul><ul><li>5. 空 DIV 或 TD 中加 &nbsp; </li></ul><ul><li>6. 在 UL 标签加一层 DIV , class 加在 DIV 上 </li></ul><ul><li>7. 使用透明 png 解决鼠标事件穿透问题 </li></ul><ul><li>8. 使用兼容性高的方法如 removeChild </li></ul>
  12. 12. 良好的基础架构 <ul><li>User infomation </li></ul><ul><li>Base info </li></ul><ul><ul><li>Name: </li></ul></ul><ul><ul><li>Gender: </li></ul></ul><ul><li>Set Password </li></ul><ul><ul><li>Password: </li></ul></ul><ul><ul><li>Confirm: </li></ul></ul>Submit Cancel
  13. 13. 良好的基础架构 <ul><li><form action=&quot;&quot; method=&quot;post&quot;> </li></ul><ul><li><fieldset> </li></ul><ul><li><legend>User infomation</legend> </li></ul><ul><li><dl class=&quot;section&quot;> </li></ul><ul><li><dt class=&quot;section_title&quot;>Base info</dt> </li></ul><ul><li><dd class=&quot;section_content&quot;> </li></ul><ul><li><div class=&quot;field_item&quot;> </li></ul><ul><li><label class=&quot;field_item_title&quot; for=&quot;name&quot;>Name: </label> </li></ul><ul><li><input type=&quot;text&quot; id=&quot;name&quot; /> </li></ul><ul><li></div> </li></ul><ul><li><div class=&quot;field_item&quot;> </li></ul><ul><li><label class=&quot;field_item_title&quot; for=&quot;gender&quot;>Gender: </label> </li></ul><ul><li><input type=&quot;text&quot; id=&quot;gender&quot; /> </li></ul><ul><li></div> </li></ul><ul><li></dd> </li></ul><ul><li></dl> </li></ul><ul><li></fieldset> </li></ul><ul><li></form> </li></ul>
  14. 14. 良好的规范性 <ul><li>1. 尽量在前期解决 IE6 潜在的 bug ,如背景图片不缓存, expression 闪动问题 </li></ul><ul><li>2. 不推荐多重继承 [ 解耦 ] </li></ul><ul><li>3. 使用分隔符下划线表示父子级关系 [ 高聚 ] </li></ul><ul><li>4. 模块化设计 [ 结构化 ] </li></ul><ul><li>5. 前期使用一个 CSS 文件 [ 及早发现命名冲突 ] </li></ul><ul><li>6. 前期 CSS 中不使用 #ID[ 预留给后期 JS 及避免 ID 冲突 ] </li></ul><ul><li>7. font/background 尽量不使用缩写的方式 [ 便于后期合并样式 ] </li></ul><ul><li>8. 非 .net 项目尽量不使用 iframe[ 破坏页面整体性 ] </li></ul>
  15. 15. 两种 CSS 流派 .page {} .page .head {} .page .body {} page .foot {} .page {} .page_head {} .page_body {} page_foot {} VS
  16. 16. CSS 组织结构化 <ul><li>// 公共样式 </li></ul><ul><li>html{} </li></ul><ul><li>body{} </li></ul><ul><li>form{} </li></ul><ul><li>img{} </li></ul><ul><li>// 布局样式 </li></ul><ul><li>.page {} </li></ul><ul><li>.page_head{} </li></ul><ul><li>.page_body{} </li></ul><ul><li>.page_foot{} </li></ul><ul><li>// 特殊页面样式 </li></ul><ul><li>.product_item_hover{} </li></ul>
  17. 17. JS 规范 <ul><li>1. 变量是用之前必须使用 var 声明 </li></ul><ul><li>2. 使用命名空间及 use strict.[ 上线之前需注释掉 ] </li></ul><ul><li>(function(){ </li></ul><ul><li>&quot;use strict&quot;; </li></ul><ul><li>// your code here </li></ul><ul><li>}()); </li></ul><ul><li>3. 函数返回自身对象时注意不要形成意外的闭包 </li></ul>
  18. 18. JS 小测试 <ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>function foo(){ </li></ul><ul><li>foo.abc = function(){alert('def')}; </li></ul><ul><li>this.abc = function(){alert('xyz')}; </li></ul><ul><li>abc = function(){alert('@@@@@')}; </li></ul><ul><li>var abc = function(){alert('$$$$$$')}; </li></ul><ul><li>} </li></ul><ul><li>foo.prototype.abc = function(){alert('456');}; </li></ul><ul><li>foo.abc = function(){alert('123');}; </li></ul><ul><li>var f = new foo(); </li></ul><ul><li>f.abc(); </li></ul><ul><li>foo.abc(); </li></ul><ul><li>abc(); </li></ul><ul><li></script> </li></ul>
  19. 19. JS 工具库 jMin <ul><li>轻量级 JS 工具库 jMin </li></ul><ul><li>主要功能 : 封装了前端常用功能 , 如 trim, 日期格式化 ,cookie 操作 , 事件绑定 , 动态加载 , 异步请求等 </li></ul><ul><li>面向对象 : 有一定经验的前端开发人员 </li></ul><ul><li>https://my-javascript-library-jmin.googlecode.com/svn/trunk/ </li></ul>
  20. 20. 感谢您的关注 www.Shengpay.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×