喂喂喂，那个切图的，把页面写好就发给研发工程师套模板吧。你好，切图仔。

非常不错，哈哈，也来一个占位招人，在线旅游行业-淘在路上放一个校招的宣传 <a href="http://tao.117go.com/hiring" rel="nofol

前端工程——基础篇,about fouber/blog

Comments (601)

atian25 commented on July 28, 2024 69

赞，想近距离聆听云龙的教导吗？前排占位招人。阿里UC移动事业群, 广州

from blog.

denvey commented on July 28, 2024 47

非常不错，哈哈，也来一个占位招人，在线旅游行业-淘在路上放一个校招的宣传 http://tao.117go.com/hiring （手机打开），社招或内推直接发邮件dengwei#117go.com （#替换为@），期待您的到来！

from blog.

xufei commented on July 28, 2024 28

很多人觉得模块化开发的工程意义是复用，我不太认可这种看法，在我看来，模块化开发的最大价值应该是分治，是分治，分治！（重说三）。

这句极其赞同

from blog.

wych1987 commented on July 28, 2024 8

瓶神写的真好。。瓶神我要给你生一堆猴子

from blog.

hupili commented on July 28, 2024 6

透徹！留名！跪請前端高手加盟。 http://initiumlab.com/

from blog.

DeyuanTan commented on July 28, 2024 6

大赞！

from blog.

zhoufanqq commented on July 28, 2024 5

不知道是不是我理解错了？为什么这里面也会有各种无意思的赞，mark，如果真是这么佩服，可以给直接联系博主商量捐款事宜！

from blog.

barretlee commented on July 28, 2024 5

资源表跟阿里的 KISSY 有些相似。不过目前又慢慢转向线下打包。

from blog.

young7657 commented on July 28, 2024 5

赞，非常好啊

from blog.

liujb commented on July 28, 2024 4

赞楼主，写的很棒

from blog.

liyunsong commented on July 28, 2024 4

一口气看完了。看的好爽。

from blog.

q545244819 commented on July 28, 2024 4

受益匪浅！太棒了！

from blog.

TengfeiQi commented on July 28, 2024 4

大赞！雲龍V5

from blog.

lyuehh commented on July 28, 2024 3

from blog.

vagusX commented on July 28, 2024 3

拜读下

from blog.

f2ebill commented on July 28, 2024 2

看到民工评价民工

from blog.

fouber commented on July 28, 2024 2

@barretlee

应该没有对系统进行表的分治吧，或者没有模板引擎的控制权，实现后端模板中的资源管理

from blog.

lifesinger commented on July 28, 2024 2

顶，写得真好！

from blog.

mingelz commented on July 28, 2024 2

赞！值得反复读。

from blog.

iwillwen commented on July 28, 2024 2

雲龍贊一個

from blog.

ishenli commented on July 28, 2024 2

mark

from blog.

Asher-Tan commented on July 28, 2024 2

厉害
厉害
厉害

from blog.

Shaw96 commented on July 28, 2024 2

怒赞

from blog.

plusice commented on July 28, 2024 2

组件化的目录，components下面把ui组件，css和js模块都放在同一目录会不会有点乱呀

from blog.

oxUnd commented on July 28, 2024 2

@WG-C

我来翻译一下，大概就是说你把你页面上的 link, script 替换成一些后端的接口，比如

index.php

<html>
...
<?php
F::load('a.js');
F::load('b.css');
?>
...
</html>

以 PHP 为例

假设这个静态资源表叫 map.json

map.json

{
  "a.js": {
    "uri" : "/static/a.js",
    "type": "js"
  },
  "b.css": {
    "uri": "/static/b.css",
    "type: "css"
  }
}

那么当页面执行模板 index.php 时，就会执行 F::load 函数加载对应的资源，假设 F::load 函数实现如下。

<?php

class F {
  static public $static = array(
    "js" => array(),
    "css" => array()
  );

  static public function load($id) {
    if (!is_string($id)) {
      return;
    }
    $_map = json_decode(file_get_contents(__DIR__ . '/map.json'), true);
    if (isset($_map[$id])) {
      $res = $_map[$id];
      array_push(self::$static[$res['type']], $res['uri']);
    } else {
      trigger_error('not found resource ' . $id, E_USER_NOTICE);
    }
    return;
  }
}

这样在页面跑完以后就会得到页面的所有静态资源。

当页面抛出给浏览器的时候，可以把收集到的 F::$static 里面的静态资源内嵌到页面中。内嵌的时候可以遵循 js 在 body 后，css 在 head 前的优化规则，或者其他任何地方。

为了简单期间，上面未考虑有依赖的情况。以上只是有后端模板的情况下，如果是纯前端有其他更好的方法。暂时就等 @fouber 慢慢道来吧。

from blog.

stoneChen commented on July 28, 2024 1

早前一篇就看了半个多小时，这次又是半个小时，大招威力不凡
学习学习

from blog.

itbeihe commented on July 28, 2024 1

工程方案其实也可以小而美！只不过它的小而美不是指代码量，而是指“规则”。找到问题的根源，用最少最简单明了的规则制定出最容易遵守最容易理解的开发规范或工具，以提升开发效率和工程质量，这同样是小而美的典范！

不愿意使用一套工具、框架、方法论，就是因为规则太多，跟团队人员习惯的规则差异过大。

from blog.

liaoxiaomei commented on July 28, 2024 1

厉害
厉害
厉害

from blog.

oxUnd commented on July 28, 2024 1

@plusice 不会乱啊，每个都是一个组件，组件有自己的使命。比如展现的组件，其入口就是那个模板，并不会在某个地方单独调用其内的 js 或者 css。那么你的乱指的是？

from blog.

commented on July 28, 2024 1

from blog.

fynn90 commented on July 28, 2024 1

good!

from blog.

cpsa3 commented on July 28, 2024 1

谢谢分享

from blog.

whitekyo commented on July 28, 2024 1

mark

from blog.

Joeycz commented on July 28, 2024 1

mark

from blog.

JasinYip commented on July 28, 2024 1

👍

from blog.

woaixiangbao commented on July 28, 2024

赞！

from blog.

leecade commented on July 28, 2024

火钳

from blog.

ithinco commented on July 28, 2024

💯

from blog.

syrxw commented on July 28, 2024

非常赞！

from blog.

Galen-Yip commented on July 28, 2024

云龙兄可以着手准备准备fis3

from blog.

hacke2 commented on July 28, 2024

太棒了

from blog.

zzzJH commented on July 28, 2024

好棒

from blog.

daifee commented on July 28, 2024

👍

from blog.

2betop commented on July 28, 2024

Orz

from blog.

webjyh commented on July 28, 2024

赞！

from blog.

a044161 commented on July 28, 2024

非常好!

from blog.

iskl commented on July 28, 2024

Zan!

from blog.

chenqing commented on July 28, 2024

留名

from blog.

7demo commented on July 28, 2024

from blog.

wkyseo commented on July 28, 2024

膜拜大神，初级前端细细品读

from blog.

M-smilexu commented on July 28, 2024

mark

from blog.

wonsikin commented on July 28, 2024

顶礼膜拜

from blog.

dylan-lu commented on July 28, 2024

mark

from blog.

billzbc commented on July 28, 2024

来学习了

from blog.

kinglerzou commented on July 28, 2024

mark

from blog.

gliudong commented on July 28, 2024

赞！

from blog.

wykCN commented on July 28, 2024

MARK

from blog.

caryxiao commented on July 28, 2024

MARK~

from blog.

worry127722 commented on July 28, 2024

受益匪浅

from blog.

luqin commented on July 28, 2024

👍

from blog.

zack-lin commented on July 28, 2024

分治，分治，分治！（重说三）。

from blog.

YealZoy commented on July 28, 2024

mark

from blog.

ruohuan commented on July 28, 2024

总结的很赞

from blog.

zhouyupeng commented on July 28, 2024

棒棒哒

from blog.

polandeme commented on July 28, 2024

赞分治的**，细思极恐

from blog.

crwinl commented on July 28, 2024

👍

from blog.

luqin commented on July 28, 2024

@zhoufanqq 因为都还停留在 jquery 时代

from blog.

awxxxxxx commented on July 28, 2024

超级赞！

from blog.

think2011 commented on July 28, 2024

@atian25 是UC吗？

from blog.

zerosoul commented on July 28, 2024

分而治之~~~！

from blog.

oxUnd commented on July 28, 2024

后续工具篇就应该 FIS 上场了吧。

from blog.

sharkrice commented on July 28, 2024

这是进入架构师的领域……

from blog.

okoala commented on July 28, 2024

赞！！分治对项目的维护和迭代有着至关重要的影响~~

from blog.

atian25 commented on July 28, 2024

@think2011 是的.

@plusice 是强迫症犯了了吧, 关于目录这个问题, 我也经常纠结, 目前 components目录下是:

- compoments
  - widgets
  - utils
  - pages

可以适当的分类, 但不要太多层级

from blog.

plusice commented on July 28, 2024

@xiangshouding 我是指或许可以在components下新建两个子目录放js和css模块而已啦，哈

from blog.

atian25 commented on July 28, 2024

不建议区分js模块和css模块, 按组件的方式去区分即可, 一个组件 = js + css + tpl , 可以缺失任何一个.

from blog.

klozelove commented on July 28, 2024

你好，我这边是coding.net 觉得写的挺好，正好我们的用户很多都是前端开发者，不知道可否申请在我们的公众号和blog转载？

from blog.

plusice commented on July 28, 2024

@atian25 嗯嗯，我是指ajax这些js模块，不是组件的js和css。就跟你说的目录一样。

from blog.

luchongkang commented on July 28, 2024

火钳刘明

from blog.

nazhenhuiyi commented on July 28, 2024

没这样做过，有一个疑问，像这种用来开发可能很方便。但是，生产环境如何部署这么多零碎的文件呢

from blog.

mattlin commented on July 28, 2024

前端太需要这样的文章的了，赞！

from blog.

jcpplus commented on July 28, 2024

方向

from blog.

sliwey-zz commented on July 28, 2024

赞！目前正在用fis3做尝试，慢慢吸收瓶神的干货，坐等后续文章。

from blog.

Horve commented on July 28, 2024

期待后面的系列文章

from blog.

LingYanSi commented on July 28, 2024

布道者

from blog.

genffy commented on July 28, 2024

文章中的画图的工具是什么，求分享。

from blog.

harole commented on July 28, 2024

深受启发，非常感谢分享

from blog.

atian25 commented on July 28, 2024

@genffy balsamiq mockups https://balsamiq.com/

@nazhenhuiyi 源码规范和部署规范是不一样的, 通过FIS这样的工具去连接和构建, 可以去看博主的其他几篇文章

from blog.

Coffcer commented on July 28, 2024

写的非常棒！
把整站的组件和模块都放在components目录里，会不会造成目录爆炸呢

from blog.

fouber commented on July 28, 2024

@klozelove 标明出处，欢迎转载

from blog.

2betop commented on July 28, 2024

@Coffcer 分治还有个手段就是 子系统拆分，博主有提及，后续的文章会介绍这块。

from blog.

fouber commented on July 28, 2024

@nazhenhuiyi 构建相关的问题我下一篇文章会介绍，其实我之前写过的文章也多多少少有说过

from blog.

klozelove commented on July 28, 2024

@fouber 好的，多谢。

from blog.

michealzh commented on July 28, 2024

感谢分享 ~~(≧▽≦)/~~

from blog.

ginny315 commented on July 28, 2024

受到很大启发，谢谢分享~

from blog.

wwsun commented on July 28, 2024

最近一直在做组件化，大神的话，让我对整个项目的技术选型和目前团队做的事有了一个更为深刻的认识。

from blog.

vixony commented on July 28, 2024

全面，有深度有高度，好文章。一个系列的。

from blog.

tuhaihe commented on July 28, 2024

赞，已分享到极客头条：http://geek.csdn.net/news/detail/38202

from blog.

simplees commented on July 28, 2024

目前才勉强达到第三阶段，任重而道远！

from blog.

chemdemo commented on July 28, 2024

文章很赞，作为前端工程化的非常有力的理论基础。

个人以为，前端最复杂的部分，莫过于资源的管理了，包括资源的获取、加载（常规加载和按需加载）、依赖分析、缓存控制（主要是资源编译输出），而这里所说的资源并不是单单指js，凡是webapp所（直接或间接）依赖的都叫资源，如图片、css、fonts或者中间产物如scss、less、模板等。

po主帖子里将browserify、webpack和grunt之类归类到一起，其实是不合理的，因为前者是打包工具后者是构建工具，功能不同，放到一起容易误导读者。browserify功能单一不做讨论，这里侧重说下webpack。

资源依赖管理，目前FIS（以及基于FIS的工具）、Webpack都做到了，而且原理都差不多，都是工具内部提供资源引用的方法，内部分析资源依赖以及内部处理资源的加载（包括按需加载）。

解决了资源依赖管理，剩下的比如自动化部署、发布什么的，相对容易，而且这些工作其他职位的同学或者运维系统（如git hook）都能做，而前端资源依赖管理只能由前端自己去解决。

我这里刚好有一篇关于使用webpack搭建前端工程工具的帖子，有兴趣的同学可以进来探讨下：基于webpack搭建前端工程解决方案探索

from blog.

前端工程——基础篇 about blog HOT 601 OPEN

Comments (601)

Related Issues (15)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent