前端工程化、组件化实践JDM分享
该文由孵化创新一部曾瑞文在研究院技术分享会的分享内容总结而成，主要讲解了团队创新的前端工程化、组件化的思想及实践应用。
为什么要搞前端框架？
Java有maven，我们没有！
Java有spring，我们没有，哭！
Java有import,我们又没有，再哭！
目前前端工程化、组件化迫切需求
前端开发需要什么
工程化
Ø依赖管理
Ø包管理
Ø开发环境
Ø多终端调试工具
ØMock Server
Ø打包压缩
基础功能
Ø组件化、嵌套、组件通信
ØSPA渲染方案
Ø前端路由
Ø数据流向控制
Ø前端数据集合操作工具库
JDM实现
包管理工具
每个包都有一个package.json配置依赖，
npm把整个工程的包依赖管理起来
使用Node.js包管理工具npm
Node.js包管理工具npm，如果将来使用Node.js作为服务端语言，
前后端统一使用npm将使项目更加统一
如果将来使用Node.js作为服务端语言，前后端统一使用npm将使项目更加统一。
一行$ npminstall构建你的工程
构建后包依赖明确切条理清晰
ES5对比ES6ES5实现
varReact= require('react');varHelloWorldComponent=React.createClass({displayName:'HelloWorldComponent',render:function() {return(
Hello world
);
}
});
module.exports=HelloWorldComponent;ES6实现
importReact from'react';classHelloWorldComponentextendsReact.Component{constructor() {super();this.state= {};
}render() {return(
Hello World
);
}
}export defaultHelloWorldComponent;ES6资源依赖
除了JS按依赖加载，CSS甚至Image都是按依赖加载到页面中
babel自动将ES6代码转换到ES5运行在浏览器中
打包压缩
Øwebpack模块来源广泛，支持包括npm/bower等等的各种主流模块安装／依赖解决方案
Ø支持CommonJS的AMD、CMD
Ø除了JS、CSS，Image都可以用require()方法引入
Ø对于Image可以根据大小转换成Base64编码，强悍
Ø打包压缩混淆都有相应的插件支持，React-hot-loader插件
ØBabel插件ES6编码ES5运行
Øwebpack更注重代码的依赖，打包，RequireJS注重浏览器加载依赖
webpack图片base64
{test:/\.png/,
loader:'url-loader?limit=10000&mimetype=image/png'}
对于Image可以根据大小转换成Base64
多终端调试工具
ØBrowsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面
Ø可同时在PC，平板，手机设备上进行调试
Ø交互同步：类似chrome的inspect在一个浏览器中滚动页面同时滚动所有设备
Øurl历史管理
Browsersync演示
Mock Server(前后端联调利器)
Ø模拟服务器
Ø使用Node.js的Express中间件编写
Ø作为web服务器在前端开发的一个虚拟环境
Ø服务端给一个假数据，我们在mockserver中粘贴，该JSON数据，即可提供一个http的接口。
Ø返回数据每个字段可以选择模拟处理方式，比如字段是一个时间戳生成的唯一ID，又如字段需要字符串处理，给出处理规则就，可以返回加工后的数据
组件化
《六神合体》每个机器人分开与组合后完美运行
Ø组件是天然模块
Ø高内聚
Ø可复用
Ø可互换
Ø可组合
组件目录结构
组件化一嵌套
实际需求分析、抽象、规划组件嵌套的数据流向
组件化—嵌套抽象
页面组件抽象后的组件嵌套关系
组件化—嵌套—数据流向设计
组件嵌套数据流向设计
组件化--嵌套--数据流向控制流
组件数据单向流动：父子通信靠props，尊重HTML的同时保证数据流向明确
回调函数一样要通过props流入子组件
同级组件通信通过父节点做转接。数据流向依然统一，且低耦合
JSX
结构逻辑混合
React将模板内嵌到逻辑内部，实现了一个JS代码和HTML混合的JSX。
JS操作结构
通过JS方便、直观的操控组件结构，比如我想给组件增加几个节点：
varCustomComponent= React.createClass({render:function() {var$nodes= ['h','e','l','l','o'].map(function(str) {return({str});
});return({$nodes}
);
