京东java前后端联调_前端工程化、组件化实践JDM分享

前端技术原创文

前端工程化、组件化实践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}

);