星空网 > 软件开发 > 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

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

前端学习小结

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

语法举例

具体细节的语法很多,就不说了,简单举几个例子:

Class语法

以前我们JS是通过function来构造类的,跟java等语言差异较大, ES6引入了class概念,如下示例。

前端学习小结

Import, export, extends语法

前端学习小结

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

前端学习小结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

官网有很详细的关于每个组件的介绍,还附带源码:

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

使用示例

具体见demo源码,其实跟平常的react组件的使用一样;

flux和reflux

背景

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

flux思想

flux是一种思想,用来解决react未解决的数据获取和事件处理。

View: 视图层

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

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

Store(数据层):用来存放应用的状态,一旦发生变动,就提醒Views要更新页面

Flux 的最大特点,就是数据的"单向流动"。如下图:

前端学习小结

flux思想的一种实现,其余的实现还有redux,比reflux复杂些,暂时没去了解,现在网上很多项目是使redux的,这个后续我们可以慢慢引进。

这里,我们主要关注reflux

简而言之,Reflux里有两个组件:Store和Action。Store负责和数据相关的内容:从服务器上获取数据,并更新与其绑定的React组件(view controller);Action是一个事件的集合。

流程图如下:

前端学习小结

  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




原标题:前端学习小结

关键词:前端

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

亚马逊旺季要爆单,广告优化得怎么做?:https://www.ikjzd.com/articles/111645
全方位,亚马逊运营实用工具分享!:https://www.ikjzd.com/articles/111646
解锁运营新姿势:Shopify加亚马逊“混合双打”怎么玩?:https://www.ikjzd.com/articles/111647
干货:亚马逊FBA补货技巧:https://www.ikjzd.com/articles/111648
亚马逊公布“网一”开始时间,要创史上最盛大购物节!:https://www.ikjzd.com/articles/111649
独立站SaaS建站模式是什么?有什么优势?:https://www.ikjzd.com/articles/111650
桂林酒店销售多少钱 桂林旅游宾馆价格:https://www.vstour.cn/a/410227.html
十里银滩旅游攻略玩什么住哪里怎么去?:https://www.vstour.cn/a/410228.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流