进入目录安装依赖:
npm i 或者 yarn install
开发:
npm run dev
npm install 太慢,试试yarn吧。建议用npm install yarn -g进行安装。
五、Generator函数的概念
Generator 函数是协程在 ES6 的实现,最大特点就是可以交出函数的执行权(即暂停执行)。
function* gen(x){
var y = yield x + 2;
return y;
}
上面代码就是一个 Generator 函数。它不同于普通函数,是可以暂停执行的,所以函数名之前要加星号,以示区别。
整个 Generator 函数就是一个封装的异步任务,或者说是异步任务的容器。异步操作需要暂停的地方,都用 yield 语句注明。Generator 函数的执行方法如下。
var g = gen(1);
g.next() // { value: 3, done: false }
g.next() // { value: undefined, done: true }
上面代码中,调用 Generator 函数,会返回一个内部指针(即遍历器 )g 。这是 Generator 函数不同于普通函数的另一个地方,即执行它不会返回结果,返回的是指针对象。调用指针 g 的 next 方法,会移动内部指针(即执行异步任务的第一段),指向第一个遇到的 yield 语句,上例是执行到 x + 2 为止。
换言之,next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法,会返回一个对象,表示当前阶段的信息( value 属性和 done 属性)。value 属性是 yield 语句后面表达式的值,表示当前阶段的值;done 属性是一个布尔值,表示 Generator 函数是否执行完毕,即是否还有下一个阶段。
http://www.ruanyifeng.com/blog/2015/04/generator.html
变量声明
const 和 let
不要用 var
,而是用 const
和 let
,分别表示常量和变量。不同于 var
的函数作用域,const
和 let
都是块级作用域。
const DELAY = 1000; let count = 0;
count = count + 1;
箭头函数
函数的快捷写法,不需要通过 function
关键字创建函数,并且还可以省略 return
关键字。
同时,箭头函数还会继承当前上下文的 this
关键字。
比如:
[1, 2, 3].map(x => x + 1); // [2, 3, 4]
等同于:
[1, 2, 3].map((function(x) {
return x + 1;
}).bind(this));
模块的 Import 和 Export
import
用于引入模块,export
用于导出模块。
比如:
// 引入全部
import dva from 'dva'; // 引入部分
import { connect } from 'dva';
import { Link, Route } from 'dva/router'; // 引入全部并作为 github 对象
import * as github from './services/github'; // 导出默认
export default App;
// 部分导出,需 import { App } from './file'; 引入
export class App extend Component {};
对象字面量改进
这是析构的反向操作,用于重新组织一个 Object 。
const name = 'duoduo';
const age = 8; const user = { name, age }; // { name: 'duoduo', age: 8 }
定义对象方法时,还可以省去 function
关键字。
app.model({
reducers: {
add() {} // 等同于 add: function() {}
},
effects: {
*addRemote() {} // 等同于 addRemote: function*() {}
},
});
Spread Operator
Spread Operator 即 3 个点 ...
,有几种不同的使用方法。
可用于组装数组。
const todos = ['Learn dva'];
[...todos, 'Learn antd']; // ['Learn dva', 'Learn antd']
也可用于获取数组的部分项。
const arr = ['a', 'b', 'c'];
const [first, ...rest] = arr;
rest; // ['b', 'c'] // With ignore
const [first, , ...rest] = arr;
rest; // ['c']
还可收集函数参数为数组。
function directions(first, ...rest) {
console.log(rest);
}
directions('a', 'b', 'c'); // ['b', 'c'];
代替 apply。
function foo(x, y, z) {}
const args = [1,2,3]; // 下面两句效果相同
foo.apply(null, args);
foo(...args);
区分 apply和call就一句话: foo.call(this,arg1,arg2,arg3)==foo.apply(thsi,arguments)==this.foo(arg1,arg2,arg3);
两者区别 call 和 apply都属于Function.prototype的一个方法,它是Javascript引擎内在实现的,
因为属于Function.prototype对象的实例,也就是每个方法都有call,apply属性,这两个方法很容易混淆,
因为他们的作用一样,只是使用方式不同(传递的参数不同)。
不同点分析 我们针对上面的foo.call(this,arg1,arg2,arg3)展开分析:<br/>
foo 是一个方法,this是方法执行时上下文相关对象,永远指向当前代码所处在的对象中。arg1,arg2,arg3是传给foo方法的参数。
function A(){
var message="a";
return{
getMessage:function(){return this.message}
}
}
function B(){
var message="b";
return{
setMessage:function(message){this.message=message}
}
}
var a=new A();
var b=new B();
b.setMessage.call(a,"a的消息");
alert(a.getMessage()); //这里将输出“a的消息”
这就是动态语言Javascript call的威力所在,简直是无中生有,对象的方法可以任意指派,而对象本身是没有这个方法的。注意,指派通俗地讲就是把方法借给另一个对象调用,原理上时方法执行时上下文的对象改变了。
所以,b.setMessage.call(a,"a 的消息");就等于用a做执行时上下文对象调用b对象的setMessage()方法,而这个过程与b一点关系都没有。作用等效于a.setMessage() 下面说一下apply的使用场景 function print(a,b,c,d){
console.log(a+b+c+d);
}
function example(a,b,c,d){
//用call方式借用print,参数显式打散传递
print.call(this,a,b,c,d);
//apply方式借用print,参数作为一个数组传递
print.apply(this,arguments);
//或者这样写
print.apply(this,[a,b,c,d]);
}
example('我','不','开','心');
从上面的例子我们发现,call和apply方法除了第一个参数相同,call方法的其他参数一次传递给借用的方法做参数,而apply就两个参数,第二个参数是借用方法的参数组成的数组。
总结一下,当参数明确时可用call,当参数不明确时用apply并结合arguments
https://github.com/Jafeney/myBlog/blob/master/JavaScript%E6%A0%B8%E5%BF%83%E2%80%94%E2%80%94call%E5%92%8Capply%E7%9A%84%E5%8C%BA%E5%88%AB.md
对于 Object 而言,用于组合成新的 Object 。(ES2017 stage-2 proposal)
const foo = {
a: 1,
b: 2,
};
const bar = {
b: 3,
c: 2,
};
const d = 4; const ret = { ...foo, ...bar, d }; // { a:1, b:3, c:2, d:4 }
此外,在 JSX 中 Spread Operator 还可用于扩展 props,详见 Spread Attributes。
定义全局 CSS
CSS Modules 默认是局部作用域的,想要声明一个全局规则,可用 :global 语法。
比如:
.title {
color: red;
}
:global(.title) {
color: green;
}
然后在引用的时候:
<App className={styles.title} /> // red
<App className="title" /> // green
classnames Package
在一些复杂的场景中,一个元素可能对应多个 className,而每个 className 又基于一些条件来决定是否出现。这时,classnames 这个库就非常有用。
import classnames from 'classnames';
const App = (props) => {
const cls = classnames({
btn: true,
btnLarge: props.type === 'submit',
btnSmall: props.type === 'edit',
});
return <div className={ cls } />;
}
这样,传入不同的 type 给 App 组件,就会返回不同的 className 组合:
<App type="submit" /> // btn btnLarge
<App type="edit" /> // btn btnSmall
https://github.com/dvajs/dva-knowledgemap
结构划分
很多同学在搭建项目的时候,往往忽略项目结构的划分,实际上合理的项目划分往往能够提供规范的项目搭建思路。 在 dva 架构的项目中,我们推荐的目录基本结构为:
.
├── /mock/ # 数据mock的接口文件
├── /src/ # 项目源码目录
│ ├── /components/ # 项目组件
│ ├── /routes/ # 路由组件(页面维度)
│ ├── /models/ # 数据模型
│ ├── /services/ # 数据接口
│ ├── /utils/ # 工具函数
│ ├── route.js # 路由配置
│ ├── index.js # 入口文件
│ ├── index.less
│ └── index.html
├── package.json # 项目信息
└── proxy.config.js # 数据mock配置
大家可以发现,dva 将项目中所有可能出现的功能性都映射到了对应的目录当中,并且对整个项目的功能从目录上也有了清晰的体现,所以我们建议你的项目也按照这个目录来组织文件,如果你是用的是 dva-cli 工具生成的 dva 的脚手架模板,那么会帮你按照这样目录生成好。
https://github.com/dvajs/dva-docs/blob/master/v1/zh-cn/tutorial/02-%E5%88%92%E5%88%86%E7%BB%93%E6%9E%84.md
Getting Started
This article will lead you to create dva app quickly, and learn all new concepts.
Final App.
This app is used to test click speed, by collecting click count within 1 second.
Some questions you may ask.
- How to create app?
- How to organize code after created app?
- How to build, deploy and publish after development?
And somethings about code organization.
- How to write Component?
- How to write CSS?
- How to write Model?
- How to connect Model and Component?
- How to update State after user interaction?
- How to handle async logic?
- How to config router?
And.
- If I want to use localStorage to save Highest Record, what to do?
- If we want to support keyboard click rate test, what to do?
We can takes these questions to read this article. But don't worry, all the code we need is about 70 lines.
Install dva-cli
dva-cli is the cli tool for dva, include init
, new
.
$ npm install -g dva-cli
After installed, you can check version with dva -v
, and view help info with dva -h
.
Create new App
After installed dva-cli, we can create a new app with it, called myapp
.
$ dva new myapp --demo
Notice: --demo
option is only used for creating demo level app. If you want to create normal project, don't add this option.
cd
myapp, and start it.
$ cd myapp
$ npm start
After a few seconds, you will get these outputs:
proxy: listened on 8989
livereload: listening on 35729
dva/docs/GettingStarted.md的更多相关文章
- 12 步 30 分钟,完成用户管理的 CURD 应用 (react+dva+antd)
Getting Started https://github.com/dvajs/dva/blob/master/docs/GettingStarted.md -------------------- ...
- ReactJS 学习路线
Node.js: 推荐采用nvm的方式安装,nvm(Node Version Manager)用于Node的版本管理,方便不同版本的Node之间的切换 安装npm,npm(Node Package M ...
- 认识ASP.NET 5项目结构和项目文件xproj
ASP.NET 5 在项目结构上做了很大的改变,我们以前熟悉的目录结构与项目文件内容都不太一样了,本篇文章带大家了解 ASP.NET 5 到底跟以前有哪些不一样的地方. 我们先用 Visual Stu ...
- Gulp: Getting Started
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md 1. Install gulp globally: $ npm i ...
- 使用Squirrel创建基于Electron开发的Windows 应用安装包
我们把自己开发的Electron应用发布之前,需要把app打包成简单的安装包,这样app更容易被获取,以此来发布我们的应用.我们可以参考Wix或其他的安装程序,但是对于Electron应用更好的打包程 ...
- RN 实战 &; React Native 实战
RN 实战 & React Native 实战 https://abc.xgqfrms.xyz/react-native-docs/ 0.59 https://github.com/xgqfr ...
- 在Caffe中使用 DIGITS(Deep Learning GPU Training System)自定义Python层
注意:包含Python层的网络只支持单个GPU训练!!!!! Caffe 使得我们有了使用Python自定义层的能力,而不是通常的C++/CUDA.这是一个非常有用的特性,但它的文档记录不足,难以正确 ...
- 使用Duilib开发Windows软件(1)——HelloWorld
我使用的是网易版本: https://github.com/netease-im/NIM_Duilib_Framework 时间是2019-11-28,作者最新的提交如下图: 运行官方示例程序 下载完 ...
- 阿里react整合库dva demo分析
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Helvetica Neue"; color: #404040 } p. ...
随机推荐
- 1.MongoDB报错 Failed to connect 127.0.0.1:27017 Mongo运行错误
1.Mongo运行错误:Failed to connect 127.0.0.1:27017 Mongo运行错误:Failed to connect 127.0.0.1:27017,reason:err ...
- redis缓存技术学习
1 什么是redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串). list(链表).set(集合)和zset ...
- 【SSH】 之 Struts2环境搭建及简单应用开发
在上一篇文章中,我们一起了解了一下struts2的工作机制原理,接下来让我们进行一下简单应用的开发 (一)配置环境 1.建立web项目 2.导入jar包 其中struts2中有很多jar包,我们不需要 ...
- Windows消息机制概述
消息是指什么? 消息系统对于一个win32程序来说十分重要,它是一个程序运行的动力源泉.一个消息,是系统定义的一个32位的值,他唯一的定义了一个事件,向 Windows发出一个通知,告诉应用程 ...
- 实例讲解webpack的基本使用第四篇
这一篇来讲解一下webpack的loader的使用,用webpack打包文件,css,img,icon等都需要下载安装对应的loader文件,并且写好配置项,才可以进行打包,废话不多说,直接开始实战. ...
- java.lang.ClassNotFoundException: org.apache.jsp.WEB_002dINF.classes.views.index_jsp 问题解决方法
本人使用的是taglib作为模板页,然后碰到的这个问题,如果有类似的可以参考. <%@tag description="Overall Page template" page ...
- 《深入理解Java虚拟机》-----第4章 虚拟机性能监控与故障处理工具
理论总是作为指导实践的工具,能把这些知识应用到实际工作中才是 我们的最终目的. 给一个系统定位问题的时候,知识.经验是关键基础,数据是依据,工具是运用知识处理数据的手段.这里说的数据包括:运行日志.异 ...
- 蓝桥第八届省赛 javaB组承压计算
X星球的高科技实验室中整齐地堆放着某批珍贵金属原料. 每块金属原料的外形.尺寸完全一致,但重量不同.金属材料被严格地堆放成金字塔形. 7 5 8 7 8 8 9 2 7 2 8 1 4 9 1 8 1 ...
- sqlserver改主键初始ID
- 随机森林和GBDT
1. 随机森林 Random Forest(随机森林)是Bagging的扩展变体,它在以决策树 为基学习器构建Bagging集成的基础上,进一步在决策树的训练过程中引入了随机特征选择,因此可以概括RF ...