前端学习小结

buser

写在前面
　　花个一周多看了下最新的前端技术，感觉受益匪浅，前端还是大有搞头的，跟后端越来越像了。
　　主要学习内容：npm、webpack、es 6、react、ant design、flux、reflux；这里稍微小结下。

NPM（node package manager）
　　npm是node的包管理工具，类似于maven；将开发者从繁琐的包管理工作（版本、依赖等）中解放出来，更加专注于功能的开发。

安装方法
　　新版的nodejs已经集成了npm，所以去下个nodejs安装即可完成npm的安装。

主要命令：安装、卸载、更新、查看、搜索等

npm install; npm uninstall; npm update; npm ls; npm search;
　　我们重点关注下安装命令，分两种，本地安装和全局安装。
　　本地安装：npm install webpack package
　　会被下载到当前所在目录的node_modules文件夹下，只能在当前目录下使用。
　　全局安装：npm install –g webpack package
　　会被下载到到特定的系统目录下，安装的package能够在所有目录下使用。
　　另外，还可以通过package.json配置文件进行安装，类似于pom.xml；我们可以将项目依赖的包在package.json这个文件里声明，然后输入npm install命令完成包的安装，一般项目中，我们都会使用这种方式。

Webpack
　　模块加载器兼打包工具，能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

安装（一般作为全局安装）：
　　npm install webpack –g

webpack配置：
　　通过配置文件配置：webpack.config.js
　　主要配置页面入口文件、入口文件输出配置、加载器配置、插件配置等。

运行webpack
　　输入webpack --display-error-details命令即可，其中--display-error-details用于打印详细的错误信息，方便调试。
　　其它参数，有兴趣的可以参考官网等资料。

ES 6(ECMAScript 6), 又称ECMAScript 2015
　　ES6是一个标准规范，JavaScript是ES6的一个实现。
　　我们目前的前端框架会尽量使用ES6语法，因为这是趋势，可读性强，也符合后端开发思维，并且ES6规范已经出来了，离普及只是时间问题。

浏览器支持情况
　　目前浏览器对ES6语法的支持较差，但是可以使用一些转码器，如Babel转码器，能将ES6语法转为ES5语法，从而在各大浏览器上正常运行。
　　另外，webpack自带babel-loader加载器，也可以加载ES6语法的js文件。

语法举例
　　具体细节的语法很多，就不说了，简单举几个例子：
　　Class语法
　　以前我们JS是通过function来构造类的，跟java等语言差异较大, ES6引入了class概念，如下示例。

　　Import, export, extends语法

React
　　用于构建用户界面的Javascript库 ,其实就是一个js库。

机制
　　简单说下， react主要涉及虚拟dom和React.Component组件，每个React组件都有一个state状态，state变化后会重新调用组件的 render 方法渲染整个组件的 UI，这里不是直接操作dom，而是通过diff算法对虚拟dom进行一次计算，得到需要更新的dom，然后把需要更新的那部分dom写入到真正地dom里。另外组件是可以复用的；
　　个人认为，react开发主要指的是组件开发，页面上所有的内容都可以封装成组件，每个组件都有state状态，组件随着state的变化而变化。

安装react

npm install react react-dom --save
　　另外还要安装加载器：

babel-loader //进行转码
css-loader //对css文件进行打包
style-loader //将样式添加进 DOM 中
npm install babel-loader css-loader style-loader –save
　　安装转码规则：

npm install babel-preset-es2015 babel-preset-react --save
　　具体可见demo中package.json添加的依赖。

使用示例
　　一个有状态的组件示例，关注下react组件的生命周期方法

Ant Design
　　其实就是一系列基于react实现的前端组件，包括按钮、图标、表单、输入框、评分等组件。
　　类似的还有React-Bootstrap，后者的风格是Twitter 的Bootstrap风格。
　　ant design有点模仿React-Bootstrap的感觉。

安装

npm install antd
风格样式示例

　　官网有很详细的关于每个组件的介绍，还附带源码：
　　http://ant.design/docs/react/introduce

使用示例
　　具体见demo源码，其实跟平常的react组件的使用一样；

flux和reflux

背景
　　React在设计之初只关注在View本身上，其余部分如数据的获取，事件处理等，全然不在考虑之内。

flux思想
　　flux是一种思想，用来解决react未解决的数据获取和事件处理。
　　View： 视图层
　　Action（动作）：视图层发出的消息（比如mouseClick）
　　Dispatcher（派发器）：用来接收Actions、执行回调函数
　　Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒Views要更新页面
　　Flux 的最大特点，就是数据的"单向流动"。如下图：

flux的实现Reflux
　　flux思想的一种实现，其余的实现还有redux，比reflux复杂些，暂时没去了解，现在网上很多项目是使redux的,这个后续我们可以慢慢引进。
　　这里，我们主要关注reflux
　　简而言之，Reflux里有两个组件：Store和Action。Store负责和数据相关的内容：从服务器上获取数据，并更新与其绑定的React组件（view controller）;Action是一个事件的集合。
　　流程图如下：

• 用户的动作在组件上触发一个Action
  
• Reflux会调用对应的Store上的callback（自动触发）
  
• 这个callback在执行结束之后，会显式的触发（trigger）一个数据
  
• 对应的组件（可能是多个）的state会被更新
  
• React组件检测到state的变化后，会自动重绘自身
  

Demo例子，包含源码
　　spring + spring mvc + mybatis + react + reflux + webpack Web工程例子

参考内容：
　　http://es6.ruanyifeng.com/#docs/style
　　http://www.tuicool.com/articles/VB7nYn
　　http://reactjs.cn/react/index.html
　　http://ant.design/docs/react/introduce
　　http://www.open-open.com/news/view/e652c6
　　http://www.ruanyifeng.com/blog/2016/01/flux.html