背景

最近这段时间都不是很忙，于是就抽空研究了一下dva，以前接触过react，做过一个问卷的小项目，代码在这里，在对react有一点了解的情况下，决定开始直接进攻dva，先去看了一些相关文档和介绍，对此有一个简略的笔记，现在我准备开始做一个小项目，目标就是实现基础的CRUD吧。

安装和初始化项目

安装

1
2

$ (sudo) npm install dva-cli -g
$ dva -v // 查看dva版本

创建应用

新目录中进行初始化

1
2

$ dva new project
$ cd project

已有目录中进行初始化

1
2
3

$ mkdir project
$ cd project
$ dva init

配置antd

1
2

$ npm install antd --save
$ npm install babel-plugin-import --save-dev

babel-plugin-import 用户按需引入antd的js和css文件。
同时使用antd，dva时，通常需要配置额外的babel plugin，修改.roadhogrc，在extraBabelPlugins里加上：

1

["import", {"libraryName": "antd", "style": "css"}]

自动生成手脚架代码

1
2
3
4

$ dva g route router_name // 生成路由
$ dva g model model_name  // 生成Model
$ dva g component component_name //生成Component
$ dva g component component_name --no-css //生成Component但是不生成css文件

写在前面

最近可能陆续会补一些以前学习时做的笔记吧，算是一个回顾，也是总结一下准备新的开始。
毕竟！再不学习！！就要废了！！！

git操作

我比较常用的一个工作流程大概是这样：

初始化一个git仓库

1
2

// creates a new Git repository
git init

本地仓库修改提交

添加至暂存区

1
2

// adds files from the working directory to the staging area
git add

1
2

git add . // 添加所有改变文件，任何未改变文件都不会被包含
git add index.html // 添加 index.html

查看状态

1
2

// inspects the contents of the working directory and staging area
git status

查看改动

1
2

// shows the difference between the working directory and the staging area 
git diff

提交

1
2

// permanently stores file changes from the staging area in the repository
git commit

云端仓库

A remote is a Git repository that lives outside your Git project folder. Remotes can live on the web, on a shared network or even in a separate folder on your local computer.

马上就要下班辣，刚才看fancybox相关的东西看到了一个武汉程序猿的博客，翻了一下博客记录，看到他给女儿注册的域名，然后妻子在记录女儿的生活点滴，好温馨呀~~~~
于是一时兴起就开始更博了！之前还想着给博客加访客记录，评论balabala的新功能，结果搭起来以后就懒得管了…
最近都不是很忙，接了一个新任务，还没开始着手弄，感觉不是简单的差事呀。
最近开始研究做饭了，每天晚上回家都自己做饭吃，好像做饭也不是很难嘛，感觉自己很快就能成为会做饭的人了哈哈哈。
清明节和闺蜜一起去了南京，好久不见分外想念呀，真希望每年都能抽一个时间跟好盆友一起出去转转呀，还希望你一切都好喽，等有男盆友了四个人一起玩一起愉快的打麻将哈哈哈。
五一打算和男盆友去北海，几经波折终于订好了住和行，希望能少点幺蛾子吧。
昨天晚上莫名其妙的就冲男盆友发脾气了…默默在心里念一百遍都是我不好吧…
最近因为接连出去玩，还有房租和毫无节制的买买买，资金都比较紧张，所以就节省一点喽，但是也改变不了每年要出去走一走的计划哈。
马上回家辣！希望今天能把鱼块煎好！盐不要放太多！

基本概念

数据流向

user/browser –dispatch–> action —-> reducer —-> state —-> component
user/browser –dispatch–> action —-> effect —-> state —-> component

Models

1.state
数据状态。
2.action
dispatch函数调用一个action，从而改变对应的数据，action必须带有type属性指明具体的行为。
3.dispatch
触发action的函数。
在dva中，connect Model的组件通过props可以访问到dispatch，可以调用Model中的Reducer或者Effects。

1
2
3
4

dispatch({
  type: 'add', // 如果在model外调用，需要添加namespace
  payload: {} //需要传递的信息
})

4.reducer
一个纯函数，同样的输入必须获得同样的输出。
5.effect
副作用，异步操作。
6.subscription
订阅一个数据源，然后根据条件dispatch需要的action。
7.router
路由。
8.router components
路由组件。

API

setMonth()

月份0-11，日期如果不标准会自动调，将3.31 设置日期到 4月，但4月只有30天，没有31号，所以溢出了，js会自动将月份设到调到5月31号。
建议先将日期设置为比较小的日期，比如1号。

setDate()

类似的，setDate时如果日期不标准js也会自动调整，如将4月30日设置为31日，但4月只有30天，所以会溢出一天，js会自动将日期设置往后调整对应的天数。

原理

一系列的大小相等的图片平铺，利用CSS布局只显示一张图片，其余隐藏。通过计算偏移量利用定时器实现自动播放，或通过手动点击事件切换图片。
code
demo

DOM操作

页面加载完获取元素，然后通过dom元素的事件绑定，实现左右点击和button点击切换图片。
注意在切换到最边缘的图片时，进行判断，跳转至相应图片位置。

定时器，自动轮播

setTimeout&setInterval

事件运用

JS动画

函数递归

无限滚动

参考文章：
手把手原生js轮播图

基本用法

1.setTimeout指定延迟后调用函数
2.setInterval以指定周期调用函数
setTimeout和setInterval，将指定的代码移出本次执行，等到下一轮事件轮询时，再检查是否到了指定的时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮事件轮询时重新判断。

JavaScript是运行在单线程的环境中，定时器仅仅是计划代码在未来的某个时间执行，而具体执行时机是不能保证的。

setTimeout

1

setTimeout(function() {...}, timer);

为了确保两次执行之间有固定的间隔，可以不用setInterval，而是每次执行结束后，使用setTimeout指定下一次执行的具体时间。

1
2

setTimeout(someTask, 100);
veryLongTask();

setTimeout指定100ms以后运行someTask，但是，如果后面的veryLongTask函数运行时间很长，过了100ms还没结束，那someTask就得等到veryLongTask运行结束才执行。

css3 rgba()

rgba()就可以实现了，r代表红色red，g代表绿色green，b代表蓝色blue，a代表透明度alpha。
但是IE9以下好像就不支持rgba（）函数了。

IE9以下

采用了IE渐变滤镜

1

filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#AARRGGBB,endColorStr=#AARRGGBB)

startColorStr设置或检索色彩渐变的开始颜色和透明度，格式为#AARRGGBB,AA、RR、GG、BB
为十六进制正整数，取值范围为00-FF，AA指定透明度，00是完全透明，FF是完全不透明。超出取值范围的值将被恢复为默认值。
2位透明度的换算方法： x=alpha*255，讲计算的结果x转换成十六进制即可。
js换算16进制方法：x.toString(16)
举个栗子：0.25的透明度

1
2

var a = 0.25*255 = 63.75 ~= 64
a.toString(16) = 40

endColorStr设置或检索色彩渐变的结束颜色和透明度。

rgba()+filter 兼容

好久不更博了呢

看了一下上次更新博客的时间是3月9日，距离现在已经快小半个月了呢，中间试图写过一篇博客，关于安装Linux系统的，后来因为迟迟没有安装成功，博客就没有下文了…
公司的电脑上装了win10，自己想装一个Linux玩玩，然后遇到了一个现在我都没解决的问题，uefi模式下的安装问题，后来就不了了之了…现在也没心思去弄。
没更博的这段时间，做了一些什么工作呢？想了想，大概就是视频播放？做了一半，遇到了超级多的问题，很多都没有找到解决方法，可能是我解决问题的思路不对？最后这个烂摊子被leader接过去了…后来就零零散散的做了一些小任务，改了一些小bug吧，比如avalon表单正则验证，最后我用修改源码的方案解决了我的问题，也不知道这样算不算偷懒呢。噢！对，中间还有一个定时器的问题，被大佬指导了，后来还找同事问了问，主要就是setTimeout和setInterval的差别吧。
唉，今天心情好差…昨天写了一个静态页面，感觉比刚开始工作的时候熟悉了一丢丢，或者是因为这个页面比较简单吧，实在不想说是很大的进步。
中午吃饭的时候同事问：你月光吗，有存钱的打算吗…我说攒钱出去玩呀，她说没有存钱买房的打算吗，我…好像并没有这样的打算，更倾向于今天想买什么，买的起就马上买了，想去哪里玩，就开始攒钱等着出去玩，并没有想过要留多少积蓄…妈妈老说要细水长流，也叮嘱我有工资了也要多少给自己留点积蓄，可是好像从小就没培养出这种消费习惯…
唔，明天就周末啦，下周就清明了，一直在计划清明去哪里玩，五一去哪里玩，可是总是隐隐觉得会不成行，或者玩的不太开心…哎，工作以后能出去玩的时间就那么几个假期，各地还都是人山人海…之前想五一去一个地方，然后等到国庆的时候再攒一笔钱去东南亚国家玩玩或者去大西北转转，现在想想也不知何时才会成行…
有很多很多的期待，却只有一点一点地行动。

IE7总是可以给人惊喜

html结构如下：

1
2
3
4

<div class="link-wrap">
  <a id="forget-pwd" href="./plugins/shunde/forget_password.html">忘记密码</a>
  <a id="register" href="./plugins/shunde/register.html">申请注册</a>
</div>

css样式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.link-wrap {
  width: 240px;
  font-size: 14px;
  position: absolute;
  bottom: 25px;
}

.link-wrap a {
  text-decoration: underline;
  color: #4E8CB1;
}

#register {
  float: right;
}

chrome及其它浏览器中的显示：

IE7中的显示：

在一行足以放下所有元素的情况下，float:right的元素在IE7中出现了换行的问题。

how to fix？