前者学习小结

写在前方

花个一周多看了下风行的前端技术,感觉收益匪浅,前端依然大有搞头的,跟后端越来越像了。

重点学习内容:npm、webpack、es 陆、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命令完结包的安装,1般品种中,我们都会使用那种方法。

Webpack

模块加载器兼打包工具,能把各类能源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都当做模块来使用和拍卖。

设置(一般作为全局安装):

npm install webpack –g

webpack配置:

因而布置文件配置:webpack.config.js

根本配备页面入口文件、入口文件输出配置、加载器配置、插件配置等。

ECMAScript 1

运行webpack

输入webpack
–display-error-details命令即可,当中–display-error-details用于打字与印刷详细的错误音讯,方便调节和测试。

此外参数,有趣味的能够参见官网等资料。

ES 6(ECMAScript 6), 又称ECMAScript 2015

ES陆是3个标准规范,JavaScript是ES六的二个落到实处。

咱俩当前的前端框架会尽量使用ES陆语法,因为那是可行性,可读性强,也切合后端开发思考,并且ES六正式已经出去了,离普及只是时间难题。

浏览器扶助情状

脚下浏览器对ES6语法的支撑较差,不过能够运用部分转码器,如Babel转码器,能将ES陆语法转为ES伍语法,从而在各大浏览器上符合规律运营。

除此以外,webpack自带babel-loader加载器,也足以加载ES6语法的js文件。

语法举例

实际细节的语法很多,就不说了,简单举多少个例证:

Class语法

ECMAScript,以前大家JS是通过function来构造类的,跟java等语言差别较大,
ES陆引进了class概念,如下示例。

ECMAScript 2

Import, export, extends语法

ECMAScript 3

React

用以创设用户界面包车型地铁Javascript库 ,其实就是3个js库。

机制

简言之说下,
react首要涉嫌虚拟dom和React.Component组件,种种React组件都有二个state状态,state变化后会重新调用组件的
render 方法渲染整个组件的
UI,这里不是一向操作dom,而是通过diff算法对虚拟dom进行3回总括,获得要求改进的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添加的重视。

选取示例

3个有气象的零件示例,关怀下react组件的生命周期方法

ECMAScript 4

Ant Design

实则正是一多重基于react达成的前端组件,包涵按钮、图标、表单、输入框、评分等零件。

类似的还有React-Bootstrap,后者的作风是Facebook 的Bootstrap风格。

ant design有点模仿React-Bootstrap的感觉到。

安装

npm install antd

作风样式示例

ECMAScript 5

官网有很详细的关于各种组件的牵线,还附带源码:

http://ant.design/docs/react/introduce

运用示例

现实见demo源码,其实跟日常的react组件的选拔同样;

flux和reflux

背景

React在设计之初只关切在View自身上,其他部分如数据的获取事件处理等,全然不在思虑之内。

flux思想

flux是一种思想,用来消除react未缓解的数额得到和事件处理。

View: 视图层

Action(动作):视图层发出的信息(比如mouseClick)

Dispatcher(派发器):用来接收Actions、执行回调函数

Store(数据层):用来存放在应用的图景,一旦爆发改变,就提示Views要翻新页面

Flux 的最大特色,正是数额的”单向流动”。如下图:

ECMAScript 6

flux的实现Reflux

flux思想的一种达成,别的的兑现还有redux,比reflux复杂些,暂且没去领悟,未来网上海人民广播广播台湾大学品种是使redux的,这么些再三再四我们得以渐渐引进。

此间,大家第二关切reflux

简单易行,Reflux里有多个零件:Store和Action。Store负责和数据有关的剧情:从服务器上获取数据,并更新与其绑定的React组件(view
controller);Action是3个事件的联谊。

流程图如下:

ECMAScript 7

  1. 用户的动作在组件上接触贰个Action
  2. Reflux会调用对应的Store上的callback(自动触发)
  3. 那几个callback在实施达成以往,会显式的触发(trigger)2个数量
  4. 对应的零件(可能是八个)的state会被更新
  5. React组件检验到state的转变后,会自动重绘本人

 

德姆o例子,包涵源码

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