前者学习小结

写于前方

花个一两全多扣了下时的前端技术,感觉受益匪浅,前端还是不行发生搞头的,跟后端越来越像了。

首要学习内容: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

着重配置页面入口文件、入口文件输出配置、加载器配置、插件配置等。

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

Bootstrap 2

Import, export, extends语法

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

Bootstrap 4

Ant Design

其实就是是千篇一律多重基于react实现之前端组件,包括按钮、图标、表单、输入框、评分等零件。

接近的还有React-Bootstrap,后者的风骨是Twitter 的Bootstrap风格。

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

安装

npm install antd

作风样式示例

Bootstrap 5

官网发出那个详细的关于每个组件的牵线,还附带源码:

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

动用示例

实际见demo源码,其实与平常的react组件的以同一;

flux和reflux

背景

React在统筹的新只关心于View本身上,其余部分如数据的获取事件处理当,全然不在设想中。

flux思想

flux是相同种考虑,用来化解react未缓解之数码获得与事件处理。

View: 视图层

Action(动作):视图层发出之音讯(比如mouseClick)

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

Store(数据层):用来存放应用之状态,一旦出反,就提醒Views要更新页面

Flux 的绝可怜特色,就是数码的”单为流动”。如下图:

Bootstrap 6

flux的实现Reflux

flux思想的相同种植实现,其余的实现还出redux,比reflux复杂些,暂时无夺询问,现在网上广大种是使redux的,这个连续我们可以逐步引进。

此处,我们任重而道远关注reflux

简言之,Reflux里发少单零件:Store和Action。Store负责和数量有关的情节:从服务器上获取数据,并更新和那绑定的React组件(view
controller);Action是一个波的集纳。

流程图如下:

Bootstrap 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

相关文章