Your SlideShare is downloading. ×
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
更好的文件组织
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

更好的文件组织

15,044

Published on

Published in: Technology
4 Comments
54 Likes
Statistics
Notes
No Downloads
Views
Total Views
15,044
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
304
Comments
4
Likes
54
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. . . compiler loader . tools 更好的 * 文件组织 kejun / hikejun.com . . dependence package http://www.flickr.com/photos/sixteen-miles/3695679411/Sunday, March 25, 2012先解释一下为什么是文件组织而不是代码组织。代码组织往往是指应用架构方面的内容,诸如CommonJS、MVC之类的话题,但这些是今天不会涉及的。今天谈论的文件组织指的就是静态文件的管理和组织。
  • 2. 多年前就讨论它,怎么又提它? (一个历久弥新的话题......)Sunday, March 25, 2012这是一个老话题。文件组织为什么对前端 发来说很重要。前端 发主要用到HTML/CSS/Javascript,想想近几年这三 语言的发展,和在实际应用中的 杂度和代码量的提高。组织它们,实际上是管理杂度,提高产品的 发效率。同时系统的解决网站性能问题。
  • 3. 目的和目标Sunday, March 25, 2012[前 点是实际遇到的问题,其中第1点尤为严重]讨论代码组织会直接联系到第1点。但仅仅解决某一问题都不是很好的方式。举个例子,用CommonJS原本是很好的代码模块化组方式,它更适合用于单页的web应用, 发时组织的是细粒度的代码模块,上线后编译成单个文件。但它如果用于传统的大规模网站 发就有问题,不合并造成大量小文件请求,合并又会造成公共文件非常大。要平衡这些问题得出一个最终方案,是今天要讨论主要内容。我会先从第2点出发,牵出所有的问题。
  • 4. 目的和目标 1. 公共文件的冗余        − 模块化        − 分离业务逻辑代码Sunday, March 25, 2012[前 点是实际遇到的问题,其中第1点尤为严重]讨论代码组织会直接联系到第1点。但仅仅解决某一问题都不是很好的方式。举个例子,用CommonJS原本是很好的代码模块化组方式,它更适合用于单页的web应用, 发时组织的是细粒度的代码模块,上线后编译成单个文件。但它如果用于传统的大规模网站 发就有问题,不合并造成大量小文件请求,合并又会造成公共文件非常大。要平衡这些问题得出一个最终方案,是今天要讨论主要内容。我会先从第2点出发,牵出所有的问题。
  • 5. 目的和目标 1. 公共文件的冗余        − 模块化        − 分离业务逻辑代码 2. 提高网站性能        − 尽快展现内容        − 尽快响应用户交互Sunday, March 25, 2012[前 点是实际遇到的问题,其中第1点尤为严重]讨论代码组织会直接联系到第1点。但仅仅解决某一问题都不是很好的方式。举个例子,用CommonJS原本是很好的代码模块化组方式,它更适合用于单页的web应用, 发时组织的是细粒度的代码模块,上线后编译成单个文件。但它如果用于传统的大规模网站 发就有问题,不合并造成大量小文件请求,合并又会造成公共文件非常大。要平衡这些问题得出一个最终方案,是今天要讨论主要内容。我会先从第2点出发,牵出所有的问题。
  • 6. 目的和目标 1. 公共文件的冗余        − 模块化        − 分离业务逻辑代码 2. 提高网站性能        − 尽快展现内容        − 尽快响应用户交互 3. ‘‘双高’’的目标∶ 高可维护性和高性能Sunday, March 25, 2012[前 点是实际遇到的问题,其中第1点尤为严重]讨论代码组织会直接联系到第1点。但仅仅解决某一问题都不是很好的方式。举个例子,用CommonJS原本是很好的代码模块化组方式,它更适合用于单页的web应用, 发时组织的是细粒度的代码模块,上线后编译成单个文件。但它如果用于传统的大规模网站 发就有问题,不合并造成大量小文件请求,合并又会造成公共文件非常大。要平衡这些问题得出一个最终方案,是今天要讨论主要内容。我会先从第2点出发,牵出所有的问题。
  • 7. 目的和目标 1. 公共文件的冗余        − 模块化        − 分离业务逻辑代码 2. 提高网站性能        − 尽快展现内容        − 尽快响应用户交互 3. ‘‘双高’’的目标∶ 高可维护性和高性能 4. 另外一个目标∶ 提高 发效率Sunday, March 25, 2012[前 点是实际遇到的问题,其中第1点尤为严重]讨论代码组织会直接联系到第1点。但仅仅解决某一问题都不是很好的方式。举个例子,用CommonJS原本是很好的代码模块化组方式,它更适合用于单页的web应用, 发时组织的是细粒度的代码模块,上线后编译成单个文件。但它如果用于传统的大规模网站 发就有问题,不合并造成大量小文件请求,合并又会造成公共文件非常大。要平衡这些问题得出一个最终方案,是今天要讨论主要内容。我会先从第2点出发,牵出所有的问题。
  • 8. 引子 如何让页面上一个button最快让用户看到并且可以操作? 有一个通用button(比如:推荐button)在任何页面都有可能用到。问题包含: 1. 如何最快显示出来。(假设它已经在页面靠前的位置) 2. button有点击行为,如何尽快初始化(初始化依赖jquery) 3. 作为通用组件,要考虑各种可能情况的影响(强调是各种可能情况!) 给出一个最好的方案? =================================(分割线)==================== 问题点不仅仅是优化技巧,而是页面上js, css等限制因素如何管理。 http://www.zhihu.com/question/20045953Sunday, March 25, 2012表面上看这是解决一个特例的性能问题,但实际上我是想讨论如何更快的响应用户行为这一广泛的问题。用户打页面时等待虽然是正常的。但是用户如果有明 的意图,他会迫不急待点那个按钮。现在的网页承载太多的东西,动辄十几、几十个JS,如何组织它们,如何尽快的响应用户的交互行为是个需要思考的问题。它比单纯的追求一些
  • 9. 需要快速响应用户行为Sunday, March 25, 2012在实际产品中,这 需要快速响应的情况是很普遍的。比如首页上的登录入囗、导航上的菜单、搜索框、用户频繁使用的button等等
  • 10. Sunday, March 25, 2012但实际情况好比是客运大厅,人少时买票、进站都井井有条,但到人多时进站的行为就会受到各 干扰。如果工作人员仅仅靠拿着喇叭喊这 简单的组织手段,基本上没什么用。页面也是如此,混杂了各 逻辑和功能, 系到用户体验的重要交互就会被干扰。所以,需要建立某 “页面秩序”。
  • 11. 一些影响页面 染的结论 1. body里的资源文件要等到它前面的JS执行完才 始下载 2. body要等到head里的CSS和JS下载并执行完才 始 染 3. 资源文件每域名并行下载数高低端浏览器差 大 4. 遇到外联JS, 染会停止直到JS下载并执行完 5. 遇到内联JS, 染会停止直到执行完 6. 无论外或内联JS,要等到它前面最慢一个CSS下载完才执行 7. DOMContentReady要等最后一个JS执行完Sunday, March 25, 2012这是一些影响页面 染的结论。高端浏览器虽然都支持高并行下载数和预加载,但是这 并行会被JS打断(结论1)。任何一个JS, 怕下载时间只有0ms或执行时间只有0ms,也要等着它前面最慢的那个CSS(结论6)。这很像在高速上 车,前面有一辆慢 的车,非常影响通行效率。head 塞body的 染是影响最大的(结论2),想想花了大钱增强服务器把响应时间加快了几百ms,结果head过重,又很轻易的浪费了几百ms很不 算。从这些结论上看似乎都和JS有直接 系,但JS 始执行又必须等它前面的CSS。因此前端的文件组织首先就是要理清这些
  • 12. <head> 1. <link href=”base.css”> <link href=”movie.css”> <script> // 执行100ms </script> </head> <body> 400ms <div>看到我了</div> 300ms + 300ms 100ms <img src=”avatar.png”> </body> 2. <head> <script> // 执行100ms </script> <link href=”base.css”> <link href=”movie.css”> </head> ... 300ms 400ms <head> 3. <link href=”base.css”> <link href=”movie.css”> </head> ... <script> // 执行100ms </script> 300ms 400ms </body>Sunday, March 25, 2012在上述结论的基础上,具体分析一下。
  • 13. 4. <head> <link rel="stylesheet" href="css1.css"> <link rel="stylesheet" href="css2.css"> </head> <body> script破坏并行下载,越靠前影响越大 <script type="text/javascript"> </script> <img src="img1.jpg" alt="" /> <script type="text/javascript"> </script> <img src="img2.jpg" alt="" /> <script type="text/javascript"> </script> <img src="img3.jpg" alt="" /> <script type="text/javascript"> </script> <img src="img4.jpg" alt="" /> </body>Sunday, March 25, 2012资源文件要等它前面的JS执行完(虽然只有空格的空标签,意味着0执行时间),JS还是要等它前面的CSS下载完。这样并行下载被打破了,如果 插在页面中的内联JS执行时间很短的话,除了对页面load时间有影响外,对dom ready影响不大还能接受。
  • 14. 被忽视的“蓝线” DOMContentLoaded (empty cache) DOMContentLoaded (primed cache) user.qzone.qq.com/id ~7s ~3s renren.com/id ~10.8s ~8s weibo.com/id ~7s ~3.6s taobao.com ~9.5s ~5.6s news.163.com ~10s ~6.3s yongche.com ~8s ~5s douban.com ~3s ~1sSunday, March 25, 2012通过测试一些主流网站,DOM-ready的时间都比较长,我想他们是不敢轻易把JS放在DOM-ready后执行的。这样意味着JS只能操作它前面的DOM。但必竟会有前面的模块和后面交互的可能,当然可以把所有JS都放在页面最后。但这样提高了代码维护的成本。修改一个模块,同时要在另外一个地方修改它的JS,时间长了非常容易造成冗余。后面会提到如何平衡这个问题。
  • 15. 理想的文件组织 1. 追求最轻的HEAD − HEAD里不放任何JS,同时仅有内联CSS(没有不可能),是最轻的 − HEAD里放执行时间尽可能短的内联JS,同时JS放在CSS前面,接近最轻 2. 所有页面初始化阶段必须的JS都放在文档最后 3. 非页面初始化阶段的JS采取按需加载Sunday, March 25, 2012以前讨论文件组织完全是从性能优化角度出发的。怎么控制公共文件的冗余,怎么控制文件粒度和请求数,怎么管理依赖 系,页面模块和它专属的CSS以及JS的维护问题......这些还都没有涉及到,所以现在看来不 理想。
  • 16. 理想的文件组织 1. 追求最轻的HEAD − HEAD里不放任何JS,同时仅有内联CSS(没有不可能),是最轻的 − HEAD里放执行时间尽可能短的内联JS,同时JS放在CSS前面,接近最轻 2. 所有页面初始化阶段必须的JS都放在文档最后 3. 非页面初始化阶段必须的JS采取按需加载 4. 对大规模网站的文件组织来说,追求性能不是最重要 5. 前后端共同形成一套静态文件组织管理体系 6. 文件组织要做到“自然”,不额外增加环节,避免把事情“ 杂化” 7. web应用区 对待Sunday, March 25, 2012性能提升只是文件组织达到效果之一,不是唯一追求的目标。要实现一个理想的文件组织,不能仅靠前端手段。文件组织方式应该符合 发习惯,尽量自动化(不额外增加环节),如果把问题 杂化就得不偿失了。另外,大规模网站和web应用的文件管理之道是不同的。
  • 17. Sunday, March 25, 2012显然实现理想的文件组织,规范和培训是靠不住的。好比管理前面那个客运大厅,靠人拿喇叭喊是远远不 的。需要一些“硬”措施。
  • 18. 静态文件管理系统的构成 前端−Do (3.0) 粗粒度文件加载和依赖管理 后端−静态文件管理系统 a. 细粒度模块的引用和预处理 b. 对模板中内联JS/CSS处理 Web应用采用CommonJS标准的模块化组织,上线打包合并为单一文件 a. 大规模网站页面数量多、功能分散 b. Web应用通常是单页面、功能集中Sunday, March 25, 2012
  • 19. 静态文件管理系统的构成 前端−Do (3.0) 粗粒度文件加载和依赖管理 后端−静态文件管理系统 a. 细粒度模块的引用和预处理 b. 对模板中内联JS/CSS处理 Web应用采用CommonJS标准的模块化组织,上线打包合并为单一文件 a. 大规模网站页面数量多、功能分散 b. Web应用通常是单页面、功能集中Sunday, March 25, 2012
  • 20. Do的由来 原始写法 <head> <script src="jQuery.js"></script> <link rel="stylesheet" href="common.css"> </head> <body> <%include file=”mod.html” /> <script src="another.js"></script> <script> $(#bn).click(function(e){ ... }); </script> </body> <!-- 抽离为mod.html --> <div class="mod"> <a id="bn">link</a> </div>Sunday, March 25, 2012思考很多问题其实都应该先回到原点。想想如果模块用到的css和js分 放,维护起来是多么麻烦。Do1.0/2.0简单的说就是把外部JS非阻塞的加载进来,模块的HTML和它专属的JS可以放在一起,维护起来方便多了。Do3.0进一步提升性能。
  • 21. Do的由来 原始写法 Do1.0/2.0 <head> <head> <script src="jQuery.js"></script> <script src="do.js" data-corelib="jQuery.js"></script> <link rel="stylesheet" href="common.css"> <link rel="stylesheet" href="common.css"> </head> </head> <body> <body> <%include file=”mod.html” /> <%include file=”mod.html” /> <script src="another.js"></script> </body> <script> $(#bn).click(function(e){ ... }); </script> </body> <!-- 抽离为mod.html --> <div class="mod"> <a id="bn">link</a> <!-- 抽离为mod.html --> </div> <div class="mod"> <script> <a id="bn">link</a> Do(‘another.js’, function(){ </div> $(#bn).click(function(e){ ... }); }); </script>Sunday, March 25, 2012思考很多问题其实都应该先回到原点。想想如果模块用到的css和js分 放,维护起来是多么麻烦。Do1.0/2.0简单的说就是把外部JS非阻塞的加载进来,模块的HTML和它专属的JS可以放在一起,维护起来方便多了。Do3.0进一步提升性能。
  • 22. Do的由来 原始写法 Do1.0/2.0 Do3.0 <head> <head> <head> <script src="jQuery.js"></script> <script src="do.js" data-corelib="jQuery.js"></script> <script> <link rel="stylesheet" href="common.css"> <link rel="stylesheet" href="common.css"> ${istatic(‘/js/lib/head.js’)|n} </head> </head> </script> <link rel="stylesheet" href="common.css"> <body> <body> </head> <%include file=”mod.html” /> <%include file=”mod.html” /> <body> <script src="another.js"></script> </body> <%include file=”mod.html” /> <script> $(#bn).click(function(e){ ... }); <script src="do.js" data-corelib="jQuery.js"></script> </script> </body> </body> <!-- 抽离为mod.html --> <!-- 抽离为mod.html --> <div class="mod"> <div class="mod"> <a id="bn">link</a> <!-- 抽离为mod.html --> <a id="bn">link</a> </div> </div> <div class="mod"> <script> <script> <a id="bn">link</a> Do(‘another.js’, function(){ Do(‘another.js’, function(){ </div> $(#bn).click(function(e){ ... }); $(#bn).click(function(e){ ... }); }); }); </script> </script>Sunday, March 25, 2012思考很多问题其实都应该先回到原点。想想如果模块用到的css和js分 放,维护起来是多么麻烦。Do1.0/2.0简单的说就是把外部JS非阻塞的加载进来,模块的HTML和它专属的JS可以放在一起,维护起来方便多了。Do3.0进一步提升性能。
  • 23. 前端静态文件管理器 − Do 3.0 − 目标1:Body尽快 染 − 目标2:DOM-ready尽快触发 (尚在实验阶段) <head> <script>${istatic(/js/core/do/inline.js)|n}</script> <!-- 465bytes, ~5ms执行时间 --> <link rel="stylesheet" href="core.css"> <link rel="stylesheet" href="product.css"> </head> <body> (完全兼容Do1/2的写法) <script src="do.js" data-corelib="jQuery.js"></script> </body>Sunday, March 25, 2012Do3的用法。
  • 24. <head> <script> </script> </head> <body> <script src=”do.js”.. </body>Sunday, March 25, 2012
  • 25. 超轻的Do接囗定义: var Do = function() { Do.actions.push([].slice.call(arguments)); }; <head> Do.ready = function() { Do.actions.push([].slice.call(arguments)); <script> }; </script> Do.add = Do.define = function(name, opts) { </head> }; Do.mods[name] = opts; <body> Do.global = function() { }; Do.global.mods = Array.prototype.concat(Do.global.mods, [].slice.call(arguments)); Do.global.mods = []; // 定义全局模块 Do.mods = {}; // 定义模块 Do.actions = []; // 处理队列 <script src=”do.js”.. </body>Sunday, March 25, 2012
  • 26. 超轻的Do接囗定义: var Do = function() { Do.actions.push([].slice.call(arguments)); }; <head> Do.ready = function() { Do.actions.push([].slice.call(arguments)); <script> }; </script> Do.add = Do.define = function(name, opts) { </head> }; Do.mods[name] = opts; <body> Do.global = function() { }; Do.global.mods = Array.prototype.concat(Do.global.mods, [].slice.call(arguments)); Do.global.mods = []; // 定义全局模块 Do.mods = {}; // 定义模块 Do.actions = []; // 处理队列 <script src=”do.js”.. </body> Do执行队列/加载器Sunday, March 25, 2012
  • 27. 前端静态文件管理器 − Do 3.0 Do本身是一个纯粹的文件加载器 轻巧 <script src="../do.min.js"></script> (4.4k, gzip:1.8k) Do(js/tip.js, function(){ 活 $(#demo2 a).simpleTip(); }); Do({path: js/tip.js, requires:[tip-base.js]}, function(){ $(#demo2 a).simpleTip(); }); Do.define(lightBox-css, {path: {URL}, type: css}); Do.define(lightBox, {path: {URL}, type: js, requires: [lightBox-css]}); Do(lightBox, dialog, function(){ $(#demo3 a).lightBox(); }); Do(function(){ 模块间通迅 Do.getData(test-value, function(value){ 超时/错误处理 console.log(value); //1000 }); Do.setConfig(timeoutCallback, function(url){ }); // log timeout file. }); Do(slow-js, function(){ Do.setData(test-value, 1000); });Sunday, March 25, 2012
  • 28. 前端文件组织的问题 − 模块化和请求数的冲突 − CSS的模块化问题 − 公共文件冗余问题 − 不适合进行预编译 − Do的方式会稍稍干扰并行下载Sunday, March 25, 2012前端手段解决不了的问题。
  • 29. 后端静态文件管理系统 <head> <script> ${istatic(‘/js/lib/head.js’)|n} </script> <link rel="stylesheet" href="base.css"> </head> <body> <%inluce file=”mod.html” /> <script src="do.js" data-corelib="jQuery.js"></script> </body> <!-- 抽离为mod.html --> <div class="mod"> <a id="bn">link</a> </div> <script> Do(‘another.js’, function(){ $(#bn).click(function(e){ ... }); }); </script>Sunday, March 25, 2012解决模块专属CSS的问题。模板系统对前端 发来说是所有CSS/HTML/JS代码的载体。所以需要充分掘它的能力。生成页面后会自动分离模块专属的JS和CSS。
  • 30. 后端静态文件管理系统 <head> <head> <script> <script> ${istatic(‘/js/lib/head.js’)|n} ${istatic(‘/js/lib/head.js’)|n} </script> </script> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="base.css"> </head> </head> <body> <body> <%inluce file=”mod.html” /> <%inluce file=”mod.html” /> <script src="do.js" data-corelib="jQuery.js"></script> <script src="do.js" data-corelib="jQuery.js"></script> </body> </body> <!-- 抽离为mod.html --> <!-- 抽离为mod.html --> <%block filter=”collect_css”%> .mod a { ... } 专属CSS <div class="mod"> </%block> <a id="bn">link</a> </div> <div class="mod"> <script> <a id="bn">link</a> HTML Do(‘another.js’, function(){ </div> $(#bn).click(function(e){ ... }); }); <%block filter=”collect_js”> </script> Do(‘another.js’, function(){ 专属JS $(#bn).click(function(e){ ... }); }); </%block>Sunday, March 25, 2012解决模块专属CSS的问题。模板系统对前端 发来说是所有CSS/HTML/JS代码的载体。所以需要充分掘它的能力。生成页面后会自动分离模块专属的JS和CSS。
  • 31. Sunday, March 25, 2012真实的使用场景。
  • 32. Sunday, March 25, 2012真实的使用场景。
  • 33. Sunday, March 25, 2012真实的使用场景。
  • 34. 后期维护很方便 :)Sunday, March 25, 2012真实的使用场景。
  • 35. 前端看到的文件背后是...... 细粒度模块的组合和预处理Sunday, March 25, 2012处理堆栈
  • 36. 前端看到的文件背后是...... 细粒度模块的组合和预处理 压缩 组合 JSSunday, March 25, 2012处理堆栈
  • 37. 前端看到的文件背后是...... 细粒度模块的组合和预处理 压缩 压缩 SASS编译 组合 组合 JS CSSSunday, March 25, 2012处理堆栈
  • 38. 前端看到的文件背后是...... 细粒度模块的组合和预处理 压缩 压缩 SASS编译 抽离 组合 组合 组合 JS CSS HTMLSunday, March 25, 2012处理堆栈
  • 39. 前端看到的文件背后是...... 细粒度模块的组合和预处理 压缩 压缩 SASS编译 抽离 组合 组合 组合 JS CSS HTMLSunday, March 25, 2012处理堆栈
  • 40. CSS越来越 杂 /* button样式 */ .bn-flat { display: inline-block; *display: inline; zoom: 1; vertical-align: middle; overflow: hidden; color: #444; border-width: 1px; border-style: solid; border-color: #bbb #bbb #999; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#f8f8f8, endColorstr=#ddd, GradientType=0 ); background-image: -webkit-gradient(linear, left top, left bottom,from(#f8f8f8),to(#dddddd)); background-image: -webkit-linear-gradient(top, #f8f8f8, #dddddd); background-image: -moz-linear-gradient(top, #f8f8f8, #dddddd); background-image: -ms-linear-gradient(top, #f8f8f8, #dddddd); background-image: -o-linear-gradient(top, #f8f8f8, #dddddd); background-image: linear-gradient(center top, #f8f8f8 0%, #dddddd 100%); }Sunday, March 25, 2012让css更像编程语言。把 杂或可重用的规则封装起来。诸如css3, 通用UI对象,排版方面等等形成一套通用CSS库。
  • 41. CSS越来越 杂 /* button样式 */ @import "_mixin_lib.css"; .bn-flat { display: inline-block; // button样式 *display: inline; .bn-flat { zoom: 1; @include inline_block; vertical-align: middle; overflow:hidden; overflow: hidden; color:#444; color: #444; border-width:1px; border-width: 1px; border-style:solid; border-style: solid; border-color:#bbb #bbb #999; border-color: #bbb #bbb #999; @include rounded(all, 3px); -webkit-border-radius: 3px; @include gradient(#f8f8f8, #ddd); -moz-border-radius: 3px; } border-radius: 3px; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#f8f8f8, endColorstr=#ddd, GradientType=0 ); background-image: -webkit-gradient(linear, left top, left bottom,from(#f8f8f8),to(#dddddd)); background-image: -webkit-linear-gradient(top, #f8f8f8, #dddddd); background-image: -moz-linear-gradient(top, #f8f8f8, #dddddd); background-image: -ms-linear-gradient(top, #f8f8f8, #dddddd); background-image: -o-linear-gradient(top, #f8f8f8, #dddddd); background-image: linear-gradient(center top, #f8f8f8 0%, #dddddd 100%); }Sunday, March 25, 2012让css更像编程语言。把 杂或可重用的规则封装起来。诸如css3, 通用UI对象,排版方面等等形成一套通用CSS库。
  • 42. pySCSS https://github.com/Kronuz/pyScss • Compass: Compass 0.11 Support • Nested rules • Keyword arguments • Mixins: @mixin, @include • Functions: @function, @return • Inheritance: @extend • Conditions: @if, @else if, @else • Loops: @for, @each • Variables: $, @variables, @vars • Sprites: sprite-map(), sprite(), sprite-position(), sprite-url(), ... • Images: image-url(), image-width(), image-height(), ... • Embedded (inline) images: inline-image() • Colors handling: adjust-color(), scale-color(), opacify()/transparentize(), lighten()/darken(), mix(), ... • Math functions: sin(), cos(), tan(), round(), ceil(), floor(), pi(), ... • CSS Compression: @option compress:yes;Sunday, March 25, 2012
  • 43. 彻底解决公共文件的冗余 − 业务相 的CSS / JS都被分散到模块中 − 通用JS组件按需加载 − 通用CSS: reset、布局、基本排版样式、通用UI对象......(不应该很大) − 通用JS: 页面加载中依赖的utils...... (不应该很大) − “内用外管” (内联代码当做外部文件维护,同时享受外部文件的各 预处理)Sunday, March 25, 2012每个模块像一个小页面,业务相 的CSS/JS都集中在模块内部管理。通用文件只保留最通用最核心的部分。内用外管最大的优点是可以任意组合这些文件模块。
  • 44. 彻底解决公共文件的冗余 − 业务相 的CSS / JS都被分散到模块中 − 通用JS组件按需加载 − 通用CSS: reset、布局、基本排版样式、通用UI对象......(不应该很大) − 通用JS: 页面加载中依赖的utils...... (不应该很大) − “内用外管” (内联代码当做外部文件维护,同时享受外部文件的各 预处理) <%def name="bottom_script()"> <script> ${istatic(/js/sns/tribe/manage_sites_groups.js, manage_type=manage_type)|n} </script> </%def> 发环境 线上环境Sunday, March 25, 2012每个模块像一个小页面,业务相 的CSS/JS都集中在模块内部管理。通用文件只保留最通用最核心的部分。内用外管最大的优点是可以任意组合这些文件模块。
  • 45. 人仍然是 键因素, 再好的工具也要靠人来驾驭 (牛b人的首要指标) 前端工程师的代码设计能力相当重要Sunday, March 25, 2012接手一个项目,怎么利用上面说到的各 工具组织文件,人仍然是最 键的因素。代码设计能力不仅体现在应用架构上,同样还体现在文件组织上。
  • 46. chrome14+ 20.3% IE6 21.3% firefox8+ 4.2% safari4+ 4.1% 2012- Q1Sunday, March 25, 2012未来前端代码的组织和管理面临的挑战越来越大。
  • 47. 接下来: 响应性 发 会让这个话题继续下去......Sunday, March 25, 2012
  • 48. Everything Should Be Made as Simple as Possible, But Not Simpler. - Albert EinsteinSunday, March 25, 2012最后我想分享一个工具 发的心得,从原始需求出发,把工具做的尽可能简单,扩展性强,删除所有不必要的环节。另外要尽快用起来,不必等到一个强大完美的工具做好了再用它。
  • 49. 问题? 讨论? 建议? 谢谢 twitter: @kejunz douban.com/people/listenpro zhihu.com/people/kejunSunday, March 25, 2012

×