SlideShare a Scribd company logo
1 of 49
Download to read offline
.                               .
  compiler                               loader
                                                                                          .   tools




                                                          更好的 * 文件组织
                                                                           kejun / hikejun.com




                                                                                      .
                                                          .   dependence
                                                                                          package




  http://www.flickr.com/photos/sixteen-miles/3695679411/

Sunday, March 25, 2012

先解释一下为什么是文件组织而不是代码组织。代码组织往往是指应用架构方面的内容,诸如
CommonJS、MVC之类的话题,但这些是今天不会涉及的。今天谈论的文件组织指的就是静态文件的管
理和组织。
多年前就讨论它,怎么又提它?



                                  (一个历久弥新的话题......)




Sunday, March 25, 2012

这是一个老话题。文件组织为什么对前端                  发来说很重要。前端         发主要用到HTML/CSS/Javascript,
想想近几年这三                  语言的发展,和在实际应用中的   杂度和代码量的提高。组织它们,实际上是管理
杂度,提高产品的                  发效率。同时系统的解决网站性能问题。
目的和目标




Sunday, March 25, 2012

[前     点是实际遇到的问题,其中第1点尤为严重]讨论代码组织会直接联系到第1点。但仅仅解决某一问题都不是很好的方式。
举个例子,用CommonJS原本是很好的代码模块化组方式,它更适合用于单页的web应用,   发时组织的是细粒度的代码模
块,上线后编译成单个文件。但它如果用于传统的大规模网站      发就有问题,不合并造成大量小文件请求,合并又会造成公共
文件非常大。要平衡这些问题得出一个最终方案,是今天要讨论主要内容。我会先从第2点出发,牵出所有的问题。
目的和目标




                         1. 公共文件的冗余
                                − 模块化
                                − 分离业务逻辑代码




Sunday, March 25, 2012

[前     点是实际遇到的问题,其中第1点尤为严重]讨论代码组织会直接联系到第1点。但仅仅解决某一问题都不是很好的方式。
举个例子,用CommonJS原本是很好的代码模块化组方式,它更适合用于单页的web应用,         发时组织的是细粒度的代码模
块,上线后编译成单个文件。但它如果用于传统的大规模网站             发就有问题,不合并造成大量小文件请求,合并又会造成公共
文件非常大。要平衡这些问题得出一个最终方案,是今天要讨论主要内容。我会先从第2点出发,牵出所有的问题。
目的和目标




                         1. 公共文件的冗余
                                − 模块化
                                − 分离业务逻辑代码


                         2. 提高网站性能
                                − 尽快展现内容
                                − 尽快响应用户交互




Sunday, March 25, 2012

[前     点是实际遇到的问题,其中第1点尤为严重]讨论代码组织会直接联系到第1点。但仅仅解决某一问题都不是很好的方式。
举个例子,用CommonJS原本是很好的代码模块化组方式,它更适合用于单页的web应用,         发时组织的是细粒度的代码模
块,上线后编译成单个文件。但它如果用于传统的大规模网站             发就有问题,不合并造成大量小文件请求,合并又会造成公共
文件非常大。要平衡这些问题得出一个最终方案,是今天要讨论主要内容。我会先从第2点出发,牵出所有的问题。
目的和目标




                         1. 公共文件的冗余
                                − 模块化
                                − 分离业务逻辑代码


                         2. 提高网站性能
                                − 尽快展现内容
                                − 尽快响应用户交互


                         3. ‘‘双高’’的目标∶ 高可维护性和高性能




Sunday, March 25, 2012

[前     点是实际遇到的问题,其中第1点尤为严重]讨论代码组织会直接联系到第1点。但仅仅解决某一问题都不是很好的方式。
举个例子,用CommonJS原本是很好的代码模块化组方式,它更适合用于单页的web应用,         发时组织的是细粒度的代码模
块,上线后编译成单个文件。但它如果用于传统的大规模网站             发就有问题,不合并造成大量小文件请求,合并又会造成公共
文件非常大。要平衡这些问题得出一个最终方案,是今天要讨论主要内容。我会先从第2点出发,牵出所有的问题。
目的和目标




                         1. 公共文件的冗余
                                − 模块化
                                − 分离业务逻辑代码


                         2. 提高网站性能
                                − 尽快展现内容
                                − 尽快响应用户交互


                         3. ‘‘双高’’的目标∶ 高可维护性和高性能


                         4. 另外一个目标∶ 提高     发效率




Sunday, March 25, 2012

[前     点是实际遇到的问题,其中第1点尤为严重]讨论代码组织会直接联系到第1点。但仅仅解决某一问题都不是很好的方式。
举个例子,用CommonJS原本是很好的代码模块化组方式,它更适合用于单页的web应用,         发时组织的是细粒度的代码模
块,上线后编译成单个文件。但它如果用于传统的大规模网站             发就有问题,不合并造成大量小文件请求,合并又会造成公共
文件非常大。要平衡这些问题得出一个最终方案,是今天要讨论主要内容。我会先从第2点出发,牵出所有的问题。
引子




                         如何让页面上一个button最快让用户看到并且可以操作?
                         有一个通用button(比如:推荐button)在任何页面都有可能用到。问题包含:
                         1. 如何最快显示出来。(假设它已经在页面靠前的位置)
                         2. button有点击行为,如何尽快初始化(初始化依赖jquery)
                         3. 作为通用组件,要考虑各种可能情况的影响(强调是各种可能情况!)
                         给出一个最好的方案?

                         =================================(分割线)====================

                         问题点不仅仅是优化技巧,而是页面上js, css等限制因素如何管理。




                                       http://www.zhihu.com/question/20045953




Sunday, March 25, 2012

表面上看这是解决一个特例的性能问题,但实际上我是想讨论如何更快的响应用户行为这一广泛的问题。用户打
页面时等待虽然是正常的。但是用户如果有明                           的意图,他会迫不急待点那个按钮。现在的网页承载太多的东西,
动辄十几、几十个JS,如何组织它们,如何尽快的响应用户的交互行为是个需要思考的问题。它比单纯的追求一些
需要快速响应用户行为




Sunday, March 25, 2012

在实际产品中,这                 需要快速响应的情况是很普遍的。比如首页上的登录入囗、导航上的菜单、搜索
框、用户频繁使用的button等等
Sunday, March 25, 2012

但实际情况好比是客运大厅,人少时买票、进站都井井有条,但到人多时进站的行为就会受到各                     干
扰。如果工作人员仅仅靠拿着喇叭喊这                  简单的组织手段,基本上没什么用。页面也是如此,混杂了各
    逻辑和功能,               系到用户体验的重要交互就会被干扰。所以,需要建立某   “页面秩序”。
一些影响页面    染的结论



                 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。因此前端的文件组织首先就是要理清这些
<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

在上述结论的基础上,具体分析一下。
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影响不大还能接受。
被忽视的“蓝线”




                                                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                             ~1s




Sunday, March 25, 2012

通过测试一些主流网站,DOM-ready的时间都比较长,我想他们是不敢轻易把JS放在DOM-ready后执行的。这样意味着JS只
能操作它前面的DOM。但必竟会有前面的模块和后面交互的可能,当然可以把所有JS都放在页面最后。但这样提高了代码维护
的成本。修改一个模块,同时要在另外一个地方修改它的JS,时间长了非常容易造成冗余。后面会提到如何平衡这个问题。
理想的文件组织



                 1. 追求最轻的HEAD
                 − HEAD里不放任何JS,同时仅有内联CSS(没有不可能),是最轻的
                 − HEAD里放执行时间尽可能短的内联JS,同时JS放在CSS前面,接近最轻

                 2. 所有页面初始化阶段必须的JS都放在文档最后
                 3. 非页面初始化阶段的JS采取按需加载




Sunday, March 25, 2012

以前讨论文件组织完全是从性能优化角度出发的。怎么控制公共文件的冗余,怎么控制文件粒度和请求
数,怎么管理依赖                 系,页面模块和它专属的CSS以及JS的维护问题......这些还都没有涉及到,所以现在
看来不            理想。
理想的文件组织



                 1. 追求最轻的HEAD
                 − HEAD里不放任何JS,同时仅有内联CSS(没有不可能),是最轻的
                 − HEAD里放执行时间尽可能短的内联JS,同时JS放在CSS前面,接近最轻

                 2. 所有页面初始化阶段必须的JS都放在文档最后
                 3. 非页面初始化阶段必须的JS采取按需加载




                 4. 对大规模网站的文件组织来说,追求性能不是最重要
                 5. 前后端共同形成一套静态文件组织管理体系
                 6. 文件组织要做到“自然”,不额外增加环节,避免把事情“ 杂化”
                 7. web应用区 对待




Sunday, March 25, 2012

性能提升只是文件组织达到效果之一,不是唯一追求的目标。要实现一个理想的文件组织,不能仅靠前
端手段。文件组织方式应该符合                  发习惯,尽量自动化(不额外增加环节),如果把问题   杂化就得不
偿失了。另外,大规模网站和web应用的文件管理之道是不同的。
Sunday, March 25, 2012

显然实现理想的文件组织,规范和培训是靠不住的。好比管理前面那个客运大厅,靠人拿喇叭喊是远远
不      的。需要一些“硬”措施。
静态文件管理系统的构成



                 前端−Do (3.0)
                 粗粒度文件加载和依赖管理


                 后端−静态文件管理系统
                 a. 细粒度模块的引用和预处理
                 b. 对模板中内联JS/CSS处理


                 Web应用采用CommonJS标准的模块化组织,上线打包合并为单一文件
                 a. 大规模网站页面数量多、功能分散
                 b. Web应用通常是单页面、功能集中




Sunday, March 25, 2012
静态文件管理系统的构成



                 前端−Do (3.0)
                 粗粒度文件加载和依赖管理


                 后端−静态文件管理系统
                 a. 细粒度模块的引用和预处理
                 b. 对模板中内联JS/CSS处理


                 Web应用采用CommonJS标准的模块化组织,上线打包合并为单一文件
                 a. 大规模网站页面数量多、功能分散
                 b. Web应用通常是单页面、功能集中




Sunday, March 25, 2012
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进一步提升性能。
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进一步提升性能。
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进一步提升性能。
前端静态文件管理器 − 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, 2012

Do3的用法。
<head>
         <script>
         </script>
        </head>
        <body>


      <script src=”do.js”..
        </body>



Sunday, March 25, 2012
超轻的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
超轻的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
前端静态文件管理器 − 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
前端文件组织的问题




                         − 模块化和请求数的冲突
                         − CSS的模块化问题
                         − 公共文件冗余问题
                         − 不适合进行预编译
                         − Do的方式会稍稍干扰并行下载




Sunday, March 25, 2012

前端手段解决不了的问题。
后端静态文件管理系统


    <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。
后端静态文件管理系统


    <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。
Sunday, March 25, 2012

真实的使用场景。
Sunday, March 25, 2012

真实的使用场景。
Sunday, March 25, 2012

真实的使用场景。
后期维护很方便 :)




Sunday, March 25, 2012

真实的使用场景。
前端看到的文件背后是......



                          细粒度模块的组合和预处理




Sunday, March 25, 2012

处理堆栈
前端看到的文件背后是......



                               细粒度模块的组合和预处理




                         压缩

                         组合


                         JS




Sunday, March 25, 2012

处理堆栈
前端看到的文件背后是......



                               细粒度模块的组合和预处理




                                    压缩

                         压缩        SASS编译

                         组合         组合


                         JS          CSS




Sunday, March 25, 2012

处理堆栈
前端看到的文件背后是......



                               细粒度模块的组合和预处理




                                    压缩

                         压缩        SASS编译        抽离

                         组合         组合           组合


                         JS          CSS         HTML




Sunday, March 25, 2012

处理堆栈
前端看到的文件背后是......



                               细粒度模块的组合和预处理




                                    压缩

                         压缩        SASS编译        抽离

                         组合         组合           组合


                         JS          CSS         HTML




Sunday, March 25, 2012

处理堆栈
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库。
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库。
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
彻底解决公共文件的冗余


                    − 业务相      的CSS / JS都被分散到模块中
                    − 通用JS组件按需加载
                    − 通用CSS: reset、布局、基本排版样式、通用UI对象......(不应该很大)
                    − 通用JS: 页面加载中依赖的utils...... (不应该很大)
                    − “内用外管” (内联代码当做外部文件维护,同时享受外部文件的各              预处理)




Sunday, March 25, 2012

每个模块像一个小页面,业务相                       的CSS/JS都集中在模块内部管理。通用文件只保留最通用最核心的部
分。内用外管最大的优点是可以任意组合这些文件模块。
彻底解决公共文件的冗余


                    − 业务相             的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都集中在模块内部管理。通用文件只保留最通用最核心的部
分。内用外管最大的优点是可以任意组合这些文件模块。
人仍然是   键因素,
                         再好的工具也要靠人来驾驭
                                            (牛b人的首要指标)
                         前端工程师的代码设计能力相当重要




Sunday, March 25, 2012

接手一个项目,怎么利用上面说到的各          工具组织文件,人仍然是最   键的因素。代码设计能力不仅体
现在应用架构上,同样还体现在文件组织上。
chrome14+ 20.3%
                         IE6   21.3%               firefox8+    4.2%
                                                    safari4+   4.1%
                                       2012- Q1



Sunday, March 25, 2012

未来前端代码的组织和管理面临的挑战越来越大。
接下来:

                         响应性    发
                         会让这个话题继续下去......




Sunday, March 25, 2012
Everything Should Be Made as Simple as Possible, But Not Simpler.




                                                         - Albert Einstein




Sunday, March 25, 2012

最后我想分享一个工具                    发的心得,从原始需求出发,把工具做的尽可能简单,扩展性强,删除所有不
必要的环节。另外要尽快用起来,不必等到一个强大完美的工具做好了再用它。
问题? 讨论? 建议?


                                   谢谢



                                twitter: @kejunz
                           douban.com/people/listenpro
                             zhihu.com/people/kejun




Sunday, March 25, 2012

More Related Content

What's hot

浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染Ailsa126
 
JavaScript Code Quality
JavaScript Code QualityJavaScript Code Quality
JavaScript Code QualityJoseph Chiang
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)Joseph Chiang
 
Debugging - 前端工程開發實務訓練
 Debugging - 前端工程開發實務訓練 Debugging - 前端工程開發實務訓練
Debugging - 前端工程開發實務訓練Joseph Chiang
 
前端工程開發實務訓練
前端工程開發實務訓練前端工程開發實務訓練
前端工程開發實務訓練Joseph Chiang
 
Javascript 入門 - 前端工程開發實務訓練
Javascript 入門 - 前端工程開發實務訓練Javascript 入門 - 前端工程開發實務訓練
Javascript 入門 - 前端工程開發實務訓練Joseph Chiang
 
Performance 入門 - 前端工程開發實務訓練
Performance 入門 - 前端工程開發實務訓練Performance 入門 - 前端工程開發實務訓練
Performance 入門 - 前端工程開發實務訓練Joseph Chiang
 
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染Sheng-Han Su
 
程式人雜誌 2015年五月
程式人雜誌 2015年五月程式人雜誌 2015年五月
程式人雜誌 2015年五月鍾誠 陳鍾誠
 
J Query基础教程
J Query基础教程J Query基础教程
J Query基础教程yiditushe
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践jay li
 
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会Joseph Chiang
 
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練Joseph Chiang
 
Responsive Web UI Design
Responsive Web UI DesignResponsive Web UI Design
Responsive Web UI Designjay li
 
深入剖析浏览器
深入剖析浏览器深入剖析浏览器
深入剖析浏览器jay li
 
HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練Joseph Chiang
 
Html5和css3入门
Html5和css3入门Html5和css3入门
Html5和css3入门Xiujun Ma
 

What's hot (20)

浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染
 
JavaScript Code Quality
JavaScript Code QualityJavaScript Code Quality
JavaScript Code Quality
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)
 
Debugging - 前端工程開發實務訓練
 Debugging - 前端工程開發實務訓練 Debugging - 前端工程開發實務訓練
Debugging - 前端工程開發實務訓練
 
前端工程開發實務訓練
前端工程開發實務訓練前端工程開發實務訓練
前端工程開發實務訓練
 
Vue.js
Vue.jsVue.js
Vue.js
 
Javascript 入門 - 前端工程開發實務訓練
Javascript 入門 - 前端工程開發實務訓練Javascript 入門 - 前端工程開發實務訓練
Javascript 入門 - 前端工程開發實務訓練
 
Performance 入門 - 前端工程開發實務訓練
Performance 入門 - 前端工程開發實務訓練Performance 入門 - 前端工程開發實務訓練
Performance 入門 - 前端工程開發實務訓練
 
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
 
程式人雜誌 2015年五月
程式人雜誌 2015年五月程式人雜誌 2015年五月
程式人雜誌 2015年五月
 
J Query基础教程
J Query基础教程J Query基础教程
J Query基础教程
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
 
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
 
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
 
Responsive Web UI Design
Responsive Web UI DesignResponsive Web UI Design
Responsive Web UI Design
 
深入剖析浏览器
深入剖析浏览器深入剖析浏览器
深入剖析浏览器
 
How tovuejs
How tovuejsHow tovuejs
How tovuejs
 
HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練
 
Vue ithome
Vue ithome Vue ithome
Vue ithome
 
Html5和css3入门
Html5和css3入门Html5和css3入门
Html5和css3入门
 

Similar to 更好的文件组织

前端性能优化和自动化
前端性能优化和自动化前端性能优化和自动化
前端性能优化和自动化kaven yan
 
面向开发的前端性能优化
面向开发的前端性能优化面向开发的前端性能优化
面向开发的前端性能优化li qiang
 
淘宝网前端开发面试题
淘宝网前端开发面试题 淘宝网前端开发面试题
淘宝网前端开发面试题 Lumend
 
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程yiditushe
 
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程appollo0312
 
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Jollen Chen
 
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨移动Web开发框架jqm探讨
移动Web开发框架jqm探讨newker
 
Kissy design
Kissy designKissy design
Kissy designyiming he
 
學習JavaScript_Dom
學習JavaScript_Dom學習JavaScript_Dom
學習JavaScript_Dom俊彬 李
 
Responsive Web Design [rebuild as design]
Responsive Web Design [rebuild as design]Responsive Web Design [rebuild as design]
Responsive Web Design [rebuild as design]Benny Chak
 
从零开始做首页
从零开始做首页从零开始做首页
从零开始做首页fangdeng
 
July.2011.w3ctech
July.2011.w3ctechJuly.2011.w3ctech
July.2011.w3ctechKai Cui
 
如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)
如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)
如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)Cyril Wang
 
旺铺前端设计和实现
旺铺前端设计和实现旺铺前端设计和实现
旺铺前端设计和实现hua qiu
 
Intro-to-SeaJS
Intro-to-SeaJSIntro-to-SeaJS
Intro-to-SeaJSlifesinger
 
D2-ETao-show
D2-ETao-showD2-ETao-show
D2-ETao-showleneli
 
高粒度模块化的前端开发
高粒度模块化的前端开发高粒度模块化的前端开发
高粒度模块化的前端开发iddcn
 
如何架构和开发高性能,高伸缩性Web 应用系统
如何架构和开发高性能,高伸缩性Web 应用系统如何架构和开发高性能,高伸缩性Web 应用系统
如何架构和开发高性能,高伸缩性Web 应用系统melity78
 
不一樣的Web server... coServ
不一樣的Web server... coServ不一樣的Web server... coServ
不一樣的Web server... coServBen Lue
 

Similar to 更好的文件组织 (20)

前端性能优化和自动化
前端性能优化和自动化前端性能优化和自动化
前端性能优化和自动化
 
面向开发的前端性能优化
面向开发的前端性能优化面向开发的前端性能优化
面向开发的前端性能优化
 
淘宝网前端开发面试题
淘宝网前端开发面试题 淘宝网前端开发面试题
淘宝网前端开发面试题
 
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
 
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
 
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
 
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
 
Kissy design
Kissy designKissy design
Kissy design
 
學習JavaScript_Dom
學習JavaScript_Dom學習JavaScript_Dom
學習JavaScript_Dom
 
Responsive Web Design [rebuild as design]
Responsive Web Design [rebuild as design]Responsive Web Design [rebuild as design]
Responsive Web Design [rebuild as design]
 
从零开始做首页
从零开始做首页从零开始做首页
从零开始做首页
 
July.2011.w3ctech
July.2011.w3ctechJuly.2011.w3ctech
July.2011.w3ctech
 
如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)
如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)
如何利用 www.webpagetest.org 進行網頁效能分析與改進建議 (真實案例)
 
旺铺前端设计和实现
旺铺前端设计和实现旺铺前端设计和实现
旺铺前端设计和实现
 
Intro-to-SeaJS
Intro-to-SeaJSIntro-to-SeaJS
Intro-to-SeaJS
 
D2-ETao-show
D2-ETao-showD2-ETao-show
D2-ETao-show
 
高粒度模块化的前端开发
高粒度模块化的前端开发高粒度模块化的前端开发
高粒度模块化的前端开发
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
如何架构和开发高性能,高伸缩性Web 应用系统
如何架构和开发高性能,高伸缩性Web 应用系统如何架构和开发高性能,高伸缩性Web 应用系统
如何架构和开发高性能,高伸缩性Web 应用系统
 
不一樣的Web server... coServ
不一樣的Web server... coServ不一樣的Web server... coServ
不一樣的Web server... coServ
 

More from Kejun Zhang

永不止步的“重构”
永不止步的“重构”永不止步的“重构”
永不止步的“重构”Kejun Zhang
 
前端基础架构的实践和思考
前端基础架构的实践和思考前端基础架构的实践和思考
前端基础架构的实践和思考Kejun Zhang
 
前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?Kejun Zhang
 
响应性设计和开发
响应性设计和开发响应性设计和开发
响应性设计和开发Kejun Zhang
 
从YUI2到YUI3看前端的演变
从YUI2到YUI3看前端的演变从YUI2到YUI3看前端的演变
从YUI2到YUI3看前端的演变Kejun Zhang
 

More from Kejun Zhang (7)

永不止步的“重构”
永不止步的“重构”永不止步的“重构”
永不止步的“重构”
 
前端基础架构的实践和思考
前端基础架构的实践和思考前端基础架构的实践和思考
前端基础架构的实践和思考
 
前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?
 
响应性设计和开发
响应性设计和开发响应性设计和开发
响应性设计和开发
 
F2e @ douban
F2e @ doubanF2e @ douban
F2e @ douban
 
LSM实践
LSM实践LSM实践
LSM实践
 
从YUI2到YUI3看前端的演变
从YUI2到YUI3看前端的演变从YUI2到YUI3看前端的演变
从YUI2到YUI3看前端的演变
 

Recently uploaded

20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf
20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf
20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdfJamie (Taka) Wang
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】黑客 接单【TG/微信qoqoqdqd】
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxNCU MCL
 
20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf
20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf
20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdfJamie (Taka) Wang
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptxNCU MCL
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptxNCU MCL
 
20200607_insight_sync.pdf20200607_insight_sync.pdf
20200607_insight_sync.pdf20200607_insight_sync.pdf20200607_insight_sync.pdf20200607_insight_sync.pdf
20200607_insight_sync.pdf20200607_insight_sync.pdfJamie (Taka) Wang
 
20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf
20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf
20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdfJamie (Taka) Wang
 
20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...
20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...
20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...Jamie (Taka) Wang
 
20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdf
20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdf20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdf
20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdfJamie (Taka) Wang
 
20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf
20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf
20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdfJamie (Taka) Wang
 
20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...
20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...
20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...Jamie (Taka) Wang
 
20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf
20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf
20200606_insight_Ignition.pdf20200606_insight_Ignition.pdfJamie (Taka) Wang
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxNCU MCL
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptxNCU MCL
 
20220113_product_day copy.pdf20220113_product_day copy.pdf
20220113_product_day copy.pdf20220113_product_day copy.pdf20220113_product_day copy.pdf20220113_product_day copy.pdf
20220113_product_day copy.pdf20220113_product_day copy.pdfJamie (Taka) Wang
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptxNCU MCL
 

Recently uploaded (17)

20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf
20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf
20210105_量產技轉.pdf20210105_量產技轉.pdf20210105_量產技轉.pdf
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
 
20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf
20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf
20200602_insight_business_plan_3.pdf20200602_insight_business_plan_3.pdf
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
 
20200607_insight_sync.pdf20200607_insight_sync.pdf
20200607_insight_sync.pdf20200607_insight_sync.pdf20200607_insight_sync.pdf20200607_insight_sync.pdf
20200607_insight_sync.pdf20200607_insight_sync.pdf
 
20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf
20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf
20200427_02_hardware_v3.pdf20200427_02_hardware_v3.pdf
 
20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...
20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...
20200429_01_software_v8.pdf20200429_01_software_v8.pdf20200429_01_software_v8...
 
20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdf
20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdf20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdf
20200808自營電商平台策略討論20200808自營電商平台策略討論_v1.pdf
 
20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf
20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf
20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf20200429_03_ec_v8.pdf
 
20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...
20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...
20200727_Insight workstation A1 plus 測試報告.pdf20200727_Insight workstation A1 ...
 
20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf
20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf
20200606_insight_Ignition.pdf20200606_insight_Ignition.pdf
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
 
20220113_product_day copy.pdf20220113_product_day copy.pdf
20220113_product_day copy.pdf20220113_product_day copy.pdf20220113_product_day copy.pdf20220113_product_day copy.pdf
20220113_product_day copy.pdf20220113_product_day copy.pdf
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
 

更好的文件组织

  • 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/20045953 Sunday, 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 ~1s Sunday, 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, 2012 Do3的用法。
  • 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. 前端看到的文件背后是...... 细粒度模块的组合和预处理 压缩 组合 JS Sunday, March 25, 2012 处理堆栈
  • 37. 前端看到的文件背后是...... 细粒度模块的组合和预处理 压缩 压缩 SASS编译 组合 组合 JS CSS Sunday, March 25, 2012 处理堆栈
  • 38. 前端看到的文件背后是...... 细粒度模块的组合和预处理 压缩 压缩 SASS编译 抽离 组合 组合 组合 JS CSS HTML Sunday, March 25, 2012 处理堆栈
  • 39. 前端看到的文件背后是...... 细粒度模块的组合和预处理 压缩 压缩 SASS编译 抽离 组合 组合 组合 JS CSS HTML Sunday, 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- Q1 Sunday, March 25, 2012 未来前端代码的组织和管理面临的挑战越来越大。
  • 47. 接下来: 响应性 发 会让这个话题继续下去...... Sunday, March 25, 2012
  • 48. Everything Should Be Made as Simple as Possible, But Not Simpler. - Albert Einstein Sunday, March 25, 2012 最后我想分享一个工具 发的心得,从原始需求出发,把工具做的尽可能简单,扩展性强,删除所有不 必要的环节。另外要尽快用起来,不必等到一个强大完美的工具做好了再用它。
  • 49. 问题? 讨论? 建议? 谢谢 twitter: @kejunz douban.com/people/listenpro zhihu.com/people/kejun Sunday, March 25, 2012