ECMAScript前端学习小结

形容以头里

花个一健全多看了生时的前端技术,感觉受益匪浅,前端还是非常产生搞头的,跟后端越来越像了。

一言九鼎学习内容: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

要安排页面入口文件、入口文件输出配置、加载器配置、插件配置等。

ECMAScript 1

运行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概念,如下示例。

ECMAScript 2

Import, export, extends语法

ECMAScript 3

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组件的生命周期方法

ECMAScript 4

Ant Design

实际上就算是同等系列基于react实现的前端组件,包括按钮、图标、表单、输入框、评分等零件。

类的还有React-Bootstrap,后者的风骨是Twitter 的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是一个事变的聚合。

流程图如下:

ECMAScript 7

  1. 用户的动作在组件上点一个Action
  2. Reflux会调用对应的Store上的callback(自动触发)
  3. 这个callback在履完毕之后,会显式的触发(trigger)一个数
  4. 相应的机件(可能是多只)的state会被更新
  5. 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