你的位置:首页 > Java教程

[Java教程]前端学习小结


花个一周多看了下最新的前端技术,感觉受益匪浅,前端还是大有搞头的,跟后端越来越像了。

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

Webpack

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

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

npm install webpack –g

webpack配置:

通过配置文件配置:webpack.config.js

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

Import, export, extends语法

Ant Design

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

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

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

安装

npm install antd

风格样式示例

  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.w2bc.com/Article/50764

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