找回密码
当前位置：Mikel > 开发笔记 > 架构设计 > 正文

[转载]致我们终将组件化的 Web - Web前端 - ITeye资讯

2015-11-30 分类：架构设计 阅读(583) 评论(0)

来源： [转载]致我们终将组件化的 Web – Web前端 – ITeye资讯

本文转自：AlloyTeam
这篇文章将从两年前的一次技术争论开始。争论的聚焦就是下图的两个目录分层结构。我说按模块划分好，他说你傻逼啊，当然是按资源划分。

”按模块划分“目录结构，把当前模块下的所有逻辑和资源都放一起了，这对于多人独自开发和维护个人模块不是很好吗？当然了，那争论的结果是我乖乖 地改回主流的”按资源划分“的目录结构。因为，没有做到JS模块化和资源模块化，仅仅物理位置上的模块划分是没有意义的，只会增加构建的成本而已。
虽然他说得好有道理我无言以对，但是我心不甘，等待他日前端组件化成熟了，再来一战！
而今天就是我重申正义的日子！只是当年那个跟你撕逼的人不在。

模块化的不足
模块一般指能够独立拆分且通用的代码单元。由于JavaScript语言本身没有内置的模块机制（ES6有了！！），我们一般会使用CMD或 ADM建立起模块机制。现在大部分稍微大型一点的项目，都会使用requirejs或者seajs来实现JS的模块化。多人分工合作开发，其各自定义依赖 和暴露接口，维护功能模块间独立性，对于项目的开发效率和项目后期扩展和维护，都是是有很大的帮助作用。
但，麻烦大家稍微略读一下下面的代码

Java代码
  1. require([
  2.     ‘Tmpl!../tmpl/list.html’,‘lib/qqapi’,‘module/position’,‘module/refresh’,‘module/page’,‘module/net’
  3. ], function(listTmpl, QQapi, Position, Refresh, Page, NET){
  4.     var foo = ”,
  5.         bar = [];
  6.     QQapi.report();
  7.     Position.getLocaiton(function(data){
  8.         //…
  9.     });
  10.     var init = function(){
  11.         bind();
  12.         NET.get(‘/cgi-bin/xxx/xxx’,function(data){
  13.             renderA(data.banner);
  14.             renderB(data.list);
  15.         });
  16.     };
  17.     var processData = function(){
  18.     };
  19.     var bind = function(){
  20.     };
  21.     var renderA = function(){
  22.     };
  23.     var renderB = function(data){
  24.         listTmpl.render(‘#listContent’,processData(data));
  25.     };
  26.     var refresh = function(){
  27.         Page.refresh();
  28.     };
  29.     // app start
  30.     init();
  31. });

上面是具体某个页面的主js，已经封装了像Position，NET，Refresh等功能模块，但页面的主逻辑依旧是”面向过程“的代码结构。 所谓面向过程，是指根据页面的渲染过程来编写代码结构。像：init -> getData -> processData -> bindevent -> report -> xxx 。 方法之间线性跳转，你大概也能感受这样代码弊端。随着页面逻辑越来越复杂，这条”过程线“也会越来越长，并且越来越绕。加之缺少规范约束，其他项目成员根 据各自需要，在”过程线“加插各自逻辑，最终这个页面的逻辑变得难以维护。

开发需要小心翼翼，生怕影响“过程线”后面正常逻辑。并且每一次加插或修改都是bug泛滥，无不令产品相关人员个个提心吊胆。

页面结构模块化
基于上面的面向过程的问题，行业内也有不少解决方案，而我们团队也总结出一套成熟的解决方案：Abstractjs，页面结构模块化。我们可以把 我们的页面想象为一个乐高机器人，需要不同零件组装，如下图，假设页面划分为tabContainer，listContainer和 imgsContainer三个模块。最终把这些模块add到最终的pageModel里面，最终使用rock方法让页面启动起来。

 

下面是伪代码的实现

Java代码
  1. require([
  2.     ‘Tmpl!../tmpl/list.html’,‘Tmpl!../tmpl/imgs.html’,‘lib/qqapi’,‘module/refresh’,‘module/page’
  3. ], function(listTmpl, imgsTmpl, QQapi, Refresh, Page ){
  5.     var tabContainer = new RenderModel({
  6.         renderContainer: ‘#tabWrap’,
  7.         data: {},
  8.         renderTmpl: “<li soda-repeat=’item in data.tabs’>{{item}}</li>”,
  9.         event: function(){
  10.             // tab’s event
  11.         }
  12.     });
  14.     var listContainer = new ScrollModel({
  15.         scrollEl: $.os.ios ? $(‘#Page’) : window,
  16.         renderContainer: ‘#listWrap’,
  17.         renderTmpl: listTmpl,
  18.         cgiName: ‘/cgi-bin/index-list?num=1’,
  19.         processData: function(data) {
  20.             //…
  21.         },
  22.         event: function(){
  23.             // listElement’s event
  24.         },
  25.         error: function(data) {
  26.             Page.show(‘数据返回异常[‘ + data.retcode + ‘]’);
  27.         }
  28.     });
  30.     var imgsContainer = new renderModel({
  31.         renderContainer: ‘#imgsWrap’,
  32.         renderTmpl: listTmpl,
  33.         cgiName: ‘/cgi-bin/getPics’,
  34.         processData: function(data) {
  35.             //…
  36.         },
  37.         event: function(){
  38.             // imgsElement’s event
  39.         },
  40.         complete: function(data) {
  41.            QQapi.report();
  42.         }
  43.     });
  45.     var page = new PageModel();
  46.     page.add([tabContainer,listContainer,imgsContainer]);
  47.     page.rock();
  49. });

我们把这些常用的请求CGI，处理数据，事件绑定，上报，容错处理等一系列逻辑方法，以页面块为单位封装成一个Model模块。
这样的一个抽象层Model，我们可以清晰地看到该页面块，请求的CGI是什么，绑定了什么事件，做了什么上报，出错怎么处理。新增的代码就应该 放置在相应的模块上相应的状态方法（preload，process，event，complete…），杜绝了以往的无规则乱增代码的行文。并且，根据 不同业务逻辑封装不同类型的Model，如列表滚动的ScrollModel，滑块功能的SliderModel等等，可以进行高度封装，集中优化。

现在基于Model的页面结构开发，已经带有一点”组件化“的味道。每个Model都带有各自的数据，模板，逻辑。已经算是一个完整的功能单元。但距离真正的WebComponent还是有一段距离，至少满足不了我的”理想目录结构“。

WebComponents 标准
我们回顾一下使用一个datapicker的JQuery的插件，所需要的步奏：
1.引入插件js
2. 引入插件所需的css（如果有）
3. copy 组件的所需的html片段
4. 添加代码触发组件启动
现阶段的“组件”基本上只能达到是某个功能单元上的集合。他的资源都是松散地分散在三种资源文件中，而且组件作用域暴露在全局作用域下，缺乏内聚性很容易就会跟其他组件产生冲突，如最简单的css命名冲突。对于这种“组件”，还不如上面的页面结构模块化。
于是W3C按耐不住了，制定一个WebComponents标准，为组件化的未来指引了明路。
下面以较为简洁的方式介绍这份标准，力求大家能够快速了解实现组件化的内容。（对这部分了解的同学，可以跳过这一小节）

1. <template>模板能力
模板这东西大家最熟悉不过了，前些年见的较多的模板性能大战 artTemplate，juicer，tmpl，underscoretemplate等等。而现在又有mustachejs无逻辑模板引擎等新入选 手。可是大家有没有想过，这么基础的能力，原生HTML5是不支持的（T_T）。
而今天WebComponent将要提供原生的模板能力

Html代码
  1. <template id=“datapcikerTmpl”>
  2. <div>我是原生的模板</div>
  3. </template>

template标签内定义了myTmpl的模板，需要使用的时候就要innerHTML= document.querySelector(‘#myTmpl’).content；可以看出这个原生的模板够原始，模板占位符等功能都没有，对于动 态数据渲染模板能力只能自力更新。

2. ShadowDom 封装组件独立的内部结构
ShadowDom可以理解为一份有独立作用域的html片段。这些html片段的CSS环境和主文档隔离的，各自保持内部的独立性。也正是ShadowDom的独立特性，使得组件化成为了可能。

Html代码
  1. var wrap = document.querySelector(‘#wrap’);
  2. var shadow = wrap.createShadowRoot();
  3. shadow.innerHTML = ‘<p>you can not see me </p>’

在具体dom节点上使用createShadowRoot方法即可生成其ShadowDom。就像在整份Html的屋子里面，新建了一个shadow的房间。房间外的人都不知道房间内有什么，保持shadowDom的独立性。

3. 自定义原生标签
初次接触Angularjs的directive指令功能，设定好组件的逻辑后，一个<Datepicker />就能引入整个组件。如此狂炫酷炸碉堡天的功能，实在令人拍手称快，跃地三尺。

Html代码
  1. var tmpl = document.querySelector(‘#datapickerTmpl’);
  2. var datapickerProto = Object.create(HTMLElement.prototype);
  4. // 设置把我们模板内容我们的shadowDom
  5. datapickerProto.createdCallback = function() {
  6.     var root = this.createShadowRoot();
  7.     root.appendChild(document.importNode(tmpl.content, true));
  8. };
  10. var datapicker = docuemnt.registerElement(‘datapicker’,{
  11.     prototype: datapickerProto
  12. });

Object.create方式继承HTMLElement.prototype，得到一个新的prototype。当解析器发现我们在文档中标 记它将检查是否一个名为createdCallback的方法。如果找到这个方法它将立即运行它，所以我们把克隆模板的内容来创建的ShadowDom。
最后，registerElement的方法传递我们的prototype来注册自定义标签。

上面的代码开始略显复杂了，把前面两个能力“模板”“shadowDom”结合，形成组件的内部逻辑。最后通过registerElement的方式注册组件。之后可以愉快地<datapicker></datapicker>的使用。

4. imports解决组件间的依赖

Html代码
  1. <link rel=“import” href=“datapciker.html”>

这个类php最常用的html导入功能，HTML原生也能支持了。
WebComponents标准内容大概到这里，是的，我这里没有什么Demo，也没有实践经验分享。由于webComponents新特性，基 本上除了高版本的Chrome支持外，其他浏览器的支持度甚少。虽然有polymer帮忙推动webcompoents的库存在，但是polymer自身 的要求版本也是非常高（IE10+）。所以今天的主角并不是他。
我们简单来回顾一下WebCompoents的四部分功能：
1 .<template>定义组件的HTML模板能力
2. Shadow Dom封装组件的内部结构，并且保持其独立性
3. Custom Element 对外提供组件的标签，实现自定义标签
4. import解决组件结合和依赖加载

组件化实践方案

官方的标准看完了，我们思考一下。一份真正成熟可靠的组件化方案，需要具备的能力。
“资源高内聚”—— 组件资源内部高内聚，组件资源由自身加载控制
“作用域独立”—— 内部结构密封，不与全局或其他组件产生影响
“自定义标签”—— 定义组件的使用方式
“可相互组合”—— 组件正在强大的地方，组件间组装整合
“接口规范化”—— 组件接口有统一规范，或者是生命周期的管理
个人认为，模板能力是基础能力，跟是否组件化没有强联系，所以没有提出一个大点。
既然是实践，现阶段WebComponent的支持度还不成熟，不能作为方案的手段。而另外一套以高性能虚拟Dom为切入点的组件框架 React，在facebook的造势下，社区得到了大力发展。另外一名主角Webpack，负责解决组件资源内聚，同时跟React极度切合形成互补。
所以【Webpack】+【React】将会是这套方案的核心技术。
不知道你现在是“又是react+webpack”感到失望，还是“太好了是react+webpack”不用再学一次新框架的高兴dd57e48b489e172cb8bd1a7eb08311c1。无论如何下面的内容不会让你失望的。
### 一，组件生命周期

React天生就是强制性组件化的，所以可以从根本性上解决面向过程代码所带来的麻烦。React组件自身有生命周期方法，能够满足“接口规范 化”能力点。并且跟“页面结构模块化”的所封装抽离的几个方法能一一对应。另外react的jsx自带模板功能，把html页面片直接写在render方 法内，组件内聚性更加紧密。

由于React编写的JSX是会先生成虚拟Dom的，需要时机才真正插入到Dom树。使用React必须要清楚组件的生命周期，其生命周期三个状态：
Mount： 插入Dom
Update： 更新Dom
Unmount： 拔出Dom
mount这单词翻译增加，嵌入等。我倒是建议“插入”更好理解。插入！拔出！插入！拔出！默念三次，懂了没？别少看黄段子的力量。

组件状态就是： 插入-> 更新 ->拔出。

然后每个组件状态会有两种处理函数，一前一后，will函数和did函数。
componentWillMount()  准备插入前
componentDidlMount()  插入后
componentWillUpdate() 准备更新前
componentDidUpdate()  更新后
componentWillUnmount() 准备拔出前
因为拔出后基本都是贤者形态（我说的是组件），所以没有DidUnmount这个方法。
另外React另外一个核心：数据模型props和state，对应着也有自个状态方法
getInitialState()     获取初始化state。
getDefaultProps() 获取默认props。对于那些没有父组件传递的props，通过该方法设置默认的props
componentWillReceiveProps()  已插入的组件收到新的props时调用
还有一个特殊状态的处理函数，用于优化处理
shouldComponentUpdate()：判断组件是否需要update调用

加上最重要的render方法，React自身带的方法刚刚好10个。对于初学者来说是比较难以消化。但其实getInitialState，componentDidMount，render三个状态方法都能完成大部分组件，不必望而却步。

回到组件化的主题。
一个页面结构模块化的组件，能独立封装整个组件的过程线

我们换算成React生命周期方法：

组件的状态方法流中，有两点需要特殊说明：
1，二次渲染：
由于React的虚拟Dom特性，组件的render函数不需自己触发，根据props和state的改变自个通过差异算法，得出最优的渲染。
请求CGI一般都是异步，所以必定带来二次渲染。只是空数据渲染的时候，有可能会被React优化掉。当数据回来，通过setState，触发二次render

2，componentWiillMount与componentDidMount的差别
和大多数React的教程文章不一样，ajax请求我建议在WillMount的方法内执行，而不是组件初始化成功之后的DidMount。这样能在“空数据渲染”阶段之前请求数据，尽早地减少二次渲染的时间。
willMount只会执行一次，非常适合做init的事情。
didMount也只会执行一次，并且这时候真实的Dom已经形成，非常适合事件绑定和complete类的逻辑

### 二，JSX很丑，但是组件内聚的关键！
WebComponents的标准之一，需要模板能力。本是以为是我们熟悉的模板能力，但React中的JSX这样的怪胎还是令人议论纷纷。 React还没有火起来的时候，大家就已经在微博上狠狠地吐槽了“JSX写的代码这TM的丑”。这其实只是Demo阶段JSX，等到实战的大型项目中的 JSX，包含多状态多数据多事件的时候，你会发现………….JSX写的代码还是很丑。

 

（即使用sublime-babel等插件高亮，逻辑和渲染耦合一起，阅读性还是略差）

为什么我们会觉得丑？因为我们早已经对“视图-样式-逻辑”分离的做法潜移默化。
基于维护性和可读性，甚至性能，我们都不建议直接在Dom上面绑定事件或者直接写style属性。我们会在JS写事件代理，在CSS上写上 classname，html上的就是清晰的Dom结构。我们很好地维护着MVC的设计模式，一切安好。直到JSX把他们都糅合在一起，所守护的技术栈受 到侵略，难免有所抵制。

但是从组件化的目的来看，这种高内聚的做法未尝不可。
下面的代码，之前的“逻辑视图分离”模式，我们需要去找相应的js文件，相应的event函数体内，找到td-info的class所绑定的事件。
对比起JSX的高度内聚，所有事件逻辑就是在本身jsx文件内，绑定的就是自身的showInfo方法。组件化的特性能立马体现出来。

Java代码
  1. <p className=“td-info” onClick={this.showInfo}>{obj.info}</p>

（注意：虽然写法上我们好像是HTML的内联事件处理器，但是在React底层并没有实际赋值类似onClick属性，内层还是使用类似事件代理的方式，高效地维护着事件处理器）
再来看一段style的jsx。其实jsx没有对样式有硬性规定，我们完全可遵循之前的定义class的逻辑。任何一段样式都应该用class来 定义。在jsx你也完全可以这样做。但是出于组件的独立性，我建议一些只有“一次性”的样式直接使用style赋值更好。减少冗余的class。

Java代码
  1. <div className=“list” style={{background: “#ddd”}}>
  2.    {list_html}
  3. </div>

或许JSX内部有负责繁琐的逻辑样式，可JSX的自定义标签能力，组件的黑盒性立马能体验出来，是不是瞬间美好了很多。

Java代码
  1. render: function(){
  2.     return (
  3.       <div>
  4.          <Menus bannerNums={this.state.list.length}></Menus>
  5.          <TableList data={this.state.list}></TableList>
  6.       </div>
  7.    );
  8. }

虽然JSX本质上是为了虚拟Dom而准备的，但这种逻辑和视图高度合一对于组件化未尝不是一件好事。

学习完React这个组件化框架后，看看组件化能力点的完成情况
“资源高内聚”—— （33%）  html与js内聚
“作用域独立”—— （50%）  js的作用域独立
“自定义标签”—— （100%）jsx
“可相互组合”—— （50%）  可组合，但缺乏有效的加载方式
“接口规范化”—— （100%）组件生命周期方法
### Webpack 资源组件化
对于组件化的资源独立性，一般的模块加载工具和构建流程视乎变得吃力。组件化的构建工程化，不再是之前我们常见的，css合二，js合三，而是体 验在组件间的依赖于加载关系。webpack正好符合需求点，一方面填补组件化能力点，另一方帮助我们完善组件化的整体构建环境。

首先要申明一点是，webpack是一个模块加载打包工具，用于管理你的模块资源依赖打包问题。这跟我们熟悉的requirejs模块加载工具，和grunt/gulp构建工具的概念，多多少少有些出入又有些雷同。

首先webpak对于CommonJS与AMD同时支持，满足我们模块/组件的加载方式。

Java代码
  1. require(“module”);
  2. require(“../file.js”);
  3. exports.doStuff = function() {};
  4. module.exports = someValue;

 

Java代码
  1. define(“mymodule”, [“dep1”, “dep2”], function(d1, d2) {
  2.     return someExportedValue;
  3. });

当然最强大的，最突出的，当然是模块打包功能。这正是这一功能，补充了组件化资源依赖，以及整体工程化的能力
根据webpack的设计理念，所有资源都是“模块”，webpack内部实现了一套资源加载机制，可以把想css，图片等资源等有依赖关系的“模块”加载。这跟我们使用requirejs这种仅仅处理js大大不同。而这套加载机制，通过一个个loader来实现。

Java代码
  1. // webpack.config.js
  2. module.exports = {
  3.     entry: {
  4.         entry: ‘./index.jsx’,
  5.     },
  6.     output: {
  7.         path: __dirname,
  8.         filename: ‘[name].min.js’
  9.     }，
  10.     module: {
  11.         loaders: [
  12.             {test: /\.css$/, loader: ‘style!css’ },
  13.             {test: /\.(jsx|js)?$/, loader: ‘jsx?harmony’, exclude: /node_modules/},
  14.             {test: /\.(png|jpg|jpeg)$/, loader: ‘url-loader?limit=10240’}
  15.         ]
  16.     }
  17. };

上面一份简单的webpack配置文件，留意loaders的配置，数组内一个object配置为一种模块资源的加载机制。test的正则为匹配文件规则，loader的为匹配到文件将由什么加载器处理，多个处理器之间用！分隔，处理顺序从右到左。

如style!css，css文件通过css-loader（处理css）,再到style-loader（inline到html）的加工处理流。
jsx文件通过jsx-loader编译，‘？’开启加载参数，harmony支持ES6的语法。
图片资源通过url-loader加载器，配置参数limit，控制少于10KB的图片将会base64化。

#### 资源文件如何被require？

Java代码
  1. // 加载组件自身css
  2. require(‘./slider.css’);
  3. // 加载组件依赖的模块
  4. var Clip = require(‘./clipitem.js’);
  5. // 加载图片资源
  6. var spinnerImg = require(‘./loading.png’);

在webpack的js文件中我们除了require我们正常的js文件，css和png等静态文件也可以被require进来。我们通过webpack命令，编译之后，看看输出结果如何：

Java代码
  1. webpackJsonp([0], {
  2. /* 0 */
  3. /***/ function(module, exports, __webpack_require__) {
  4.           // 加载组件自身css
  5.           __webpack_require__(1);
  6.           // 加载组件依赖的模块
  7.           var Clip = __webpack_require__(5);
  8.           // 加载图片资源
  9.           var spinnerImg = __webpack_require__(6);
  10. /***/ },
  11. /* 1 */
  12. /***/ function(module, exports, __webpack_require__) {
  14. /***/ },
  15. /* 2 */
  16. /***/ function(module, exports, __webpack_require__) {
  17.           exports = module.exports = __webpack_require__(3)();
  18.           exports.push([module.id, “.slider-wrap{\r\n position: relative;\r\n width: 100%;\r\n margin: 50px;\r\n background: #fff;\r\n}\r\n\r\n.slider-wrap li{\r\n text-align: center;\r\n line-height: 20px;\r\n}”, “”]);
  20. /***/ },
  21. /* 3 */
  22. /***/ function(module, exports) {
  24. /***/ },
  26. /* 4 */
  27. /***/ function(module, exports, __webpack_require__) {
  28. /***/ },
  30. /* 5 */
  31. /***/ function(module, exports) {
  32.           console.log(‘hello, here is clipitem.js’) ;
  33. /***/ },
  34. /* 6 */
  35. /***/ function(module, exports) {
  36.           module.exports = “data:image/png;base64,iVBORw0KGg……”
  37. /***/ }
  38. ]);

webpack编译之后，输出文件视乎乱糟糟的，但其实每一个资源都被封装在一个函数体内，并且以编号的形式标记（注释）。这些模块，由 webpack的__webpack_require__内部方法加载。入口文件为编号0的函数index.js，可以看到 __webpack_require__加载其他编号的模块。
css文件在编号1，由于使用css-loader和style-loader，编号1-4都是处理css。其中编号2我们可以看我们的css的string体。最终会以内联的方式插入到html中。
图片文件在编号6，可以看出exports出base64化的图片。

#### 组件一体输出

Java代码
  1. // 加载组件自身css
  2. require(‘./slider.css’);
  3. // 加载组件依赖的模块
  4. var React = require(‘react’);
  5. var Clip = require(‘../ui/clipitem.jsx’);
  6. // 加载图片资源
  7. var spinnerImg = require(‘./loading.png’);
  8. var Slider = React.createClass({
  9.     getInitialState: function() {
  10.         // …
  11.     },
  12.     componentDidMount: function(){
  13.         // …
  14.     },
  15.     render: function() {
  16.         return (
  17.             <div>
  18.                <Clip data={this.props.imgs} />
  19.                <img className=“loading” src={spinnerImg} />
  20.             </div>
  21.         );
  22.     }
  23. });
  24. module.exports = Slider;

如果说，react使到html和js合为一体。
那么加上webpack，两者结合一起的话。js，css，png(base64)，html 所有web资源都能合成一个JS文件。这正是这套方案的核心所在：组件独立一体化。如果要引用一个组件，仅仅require(‘./slider.js’) 即可完成。

加入webpack的模块加载器之后，我们组件的加载问题，内聚问题也都成功地解决掉
“资源高内聚”—— （100%） 所有资源可以一js输出
“可相互组合”—— （100%）  可组合可依赖加载

### CSS模块化实践
很高兴，你能阅读到这里。目前我们的组件完成度非常的高，资源内聚，易于组合，作用域独立互不污染。。。。等等eee，视乎CSS模块的完成度有欠缺。
那么目前组件完成度来看，CSS作用域其实是全局性的，并非组件内部独立。下一步，我们要做得就是如何让我们组件内部的CSS作用域独立。
这时可能有人立马跳出，大喊一句“德玛西亚！”，哦不，应该是“用sass啊傻逼！”。可是项目组件化之后，组件的内部封装已经很好了，其内部 dom结构和css趋向简单，独立，甚至是破碎的。LESS和SASS的一体式样式框架的设计，他的嵌套，变量，include，函数等丰富的功能对于整 体大型项目的样式管理非常有效。但对于一个功能单一组件内部样式，视乎就变的有点格格不入。“不能为了框架而框架，合适才是最好的”。视乎原生的css能 力已经满足组件的样式需求，唯独就是上面的css作用域问题。

这里我给出思考的方案： classname随便写，保持原生的方式。编译阶段，根据组件在项目路径的唯一性，由【组件classname+组件唯一路径】打成md5，生成全局唯 一性classname。正当我要写一个loader实现我的想法的时候，发现歪果仁已经早在先走一步了。。。。
这里具体方案参考我之前博客的译文：http://www.alloyteam.com/2015/10/8536/

之前我们讨论过JS的模块。现在通过Webpack被加载的CSS资源叫做“CSS模块”？我觉得还是有问题的。现在style-loader插 件的实现本质上只是创建link[rel=stylesheet]元素插入到document中。这种行为和通常引入JS模块非常不同。引入另一个JS模 块是调用它所提供的接口，但引入一个CSS却并不“调用”CSS。所以引入CSS本身对于JS程序来说并不存在“模块化”意义，纯粹只是表达了一种资源依 赖——即该组件所要完成的功能还需要某些asset。
因此，那位歪果仁还扩展了“CSS模块化”的概念，除了上面的我们需要局部作用域外，还有很多功能，这里不详述。具体参考原文 http://glenmaddern.com/articles/css-modules

非常赞的一点，就是cssmodules已经被css-loader收纳。所以我们不需要依赖额外的loader，基本的css-loader开启参数modules即可。

Java代码
  1. //webpack.config.js
  2. …
  3.     module: {
  4.         loaders: [
  5.             {test: /\.css$/, loader: ‘style!css?modules&localIdentName=[local]__[name]_[hash:base64:5]’ },
  6.         ]
  7.     }
  8. ….

modules参数代表开启css-modules功能，loaclIdentName为设置我们编译后的css名字，为了方便Debug，我们 把classname（local）和组件名字（name）输出。当然可以在最后输出的版本为了节省提交，仅仅使用hash值即可。另外在react中的 用法大概如下。

Java代码
  1. var styles = require(‘./banner.css’);
  2. var Banner = new React.createClass({
  3.     …
  4.     render: function(){
  5.         return (
  6.             <div>
  7.                 <div className={styles.classA}></div>
  8.             </div>
  9.         )
  10.     }
  11. });

最后这里关于出于对CSS一些思考，
关于css-modules的其它功能，我并不打算使用。在内部分享【我们竭尽所能地让CSS变得复杂】中提及：

引用
我们项目中大部分的CSS都不会像boostrap那样需要变量来设置，身为一线开发者的我们大概能够感受到：设计师们改版UI，绝对不是简单的换个色或改个间距，而是面目全非的全新UI，这绝对不是一个变量所能解决的”维护性“。
反而项目实战过程中，真正要解决的是：在版本迭代过程中那些淘汰掉的过期CSS，大量地堆积在项目当中。我们像极了家中的欧巴酱不舍得丢掉没用的东西，因为这可是我们使用sass或less编写出具有高度的可维护性的，肯定有复用的一天。
这些堆积的过期CSS（or sass）之间又有部分依赖，一部分过期没用了，一部分又被新的样式复用了，导致没人敢动那些历史样式。结果现网项目迭代还带着大量两年前没用的样式文件。

组件化之后，css的格局同样被革新了。可能postcss才是你现在手上最适合的工具，而不在是sass。

到这里，我们终于把组件化最后一个问题也解决了。
“作用域独立”—— （100%） 如同shadowDom作用域独立

到这里，我们可以开一瓶82年的雪碧，好好庆祝一下。不是吗？

### 组件化之路还在继续
webpack和react还有很多新非常重要的特性和功能，介于本文仅仅围绕着组件化的为核心，没有一一阐述。另外，配搭gulp/grunt 补充webpack构建能力，webpack的codeSplitting，react的组件通信问题，开发与生产环境配置等等，都是整套大型项目方案的 所必须的，限于篇幅问题。可以等等我更新下篇，或大家可以自行查阅。
但是，不得不再安利一下react-hotloader神器。热加载的开发模式绝对是下一代前端开发必备。严格说，如果没有了热加载，我会很果断 地放弃这套方案，即使这套方案再怎么优秀，我都讨厌react需要5~6s的编译时间。但是hotloader可以在我不刷新页面的情况下，动态修改代 码，而且不单单是样式，连逻辑也是即时生效。

如上在form表单内。使用热加载，表单不需要重新填写，修改submit的逻辑立刻生效。这样的开发效率真不是提高仅仅一个档次。必须安利一下。

或许你发现，使用组件化方案之后，整个技术栈都被更新了一番。学习成本也不少，并且可以预知到，基于组件化的前端还会很多不足的问题，例如性能优 化方案需要重新思考，甚至最基本的组件可复用性不一定高。后面很长一段时间，需要我们不断磨练与优化，探求最优的前端组件化之道。
至少我们可以想象，不再担心自己写的代码跟某个谁谁冲突，不再为找某段逻辑在多个文件和方法间穿梭，不再copy一片片逻辑然后改改。我们每次编写都是可重用，可组合，独立且内聚的组件。而每个页面将会由一个个嵌套组合的组件，相互独立却相互作用。

对于这样的前端未来，有所期待，不是很好吗
至此，感谢你的阅读。

赞(0) 打赏
分享到： 更多 (0)
标签：

相关推荐

热门标签

C# (813)ASP.NET MVC (619)Android (587)ASP.NET (447)数据库 (299)JavaScript (285)JQuery (221)PHP (210)SQLServer (197)程序开发 (156)架构设计 (155)源价值 (155)SQL (128)Java (111)EasyUi (85)教程 (76)网站 (67)Debug (63)互联网 (63)MySQL (60)Flash (56)搜索优化 (54)创意 (53)SEO (51)ASP.NET MVC3 (51)电子商务 (50)建站经验 (49)实例代码 (49)源码下载 (47)原创 (45)

分类

链接表

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏