写在前面
花个一周多看了下最新的前端技术,感觉受益匪浅,前端还是大有搞头的,跟后端越来越像了。
主要学习内容: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
installantd
风格样式示例
官网有很详细的关于每个组件的介绍,还附带源码:
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