【翻译向】走进 Redux 之高级篇

Create at 2016 05 226 min read技术Redux学习笔记

异步的 Actions

前几篇的教程里面,我们搭建了一个 todo 应用。这是一个完全同步的,每次一个 action 被 dispatched, state 都会即时更新。 解析来,我们要搭建一个不同的,异步的应用。它使用 Reddit API 来展示一个选中栏目的头条。

Actions

当你调用一个异步的 API 时,有两个至关重要的时刻:你开始调用的时刻,和你收到答复的时刻。

这两个时刻通常都会需要对应用的 state 做出变化;为此,你需要 dispatch 普通的将会被 reducers 同步处理的 actions. 通常,对于任意 API 请求,你将需要 dispatch 至少三次不同的 actions:

  • 一个通知 reducers 请求开始的 action reducers 可能通过切换一个 state 中的 isFetching flag 来处理这个 action. 用来告诉 UI 是时候显示一个等待标识了。
  • 一个通知 reducer

Flex 布局

Create at 2016 05 058 min read技术flexbox学习笔记

第一次接触 flex 是在去年,当时是我第一次做手机项目,结果却因为兼容性问题给掉坑了。查了 can I use 发现它只支持到安卓 4.1, 然而我们的要求是要兼容到 4.0 才行的。 所以之后一直都没敢用,昨天听到有人说 flex 是可以支持到安卓 2.1 以上的。我不信,难道是我当时看错了?! 今天又去查了一下,发现确实是 4.1 啊。盯着屏幕想了半天,突然发现 Can I Use 上一个浏览器浏览器使用率,想着该不会直接把使用率低的浏览器给忽略掉了吧。打开设置一看,果真如此,于是把数据源改成中国,浏览器最小使用率 0.03% 果真 2.3 出来了。

Can I USE

既然如此,说明 flex 还是可以在生产环境中使用了。那么就好好在过一下它的用法吧。 Flex 就是弹性布局,任何一个元素都可以设置为 flex 布局,当一个元素被设置为 flex 布局后,它的子元素上 float, vertical-align 都会失效。

【翻译向】走进 Redux 之基础篇(二)

Create at 2016 05 0315 min read技术Redux学习笔记

紧接上一篇走进 Redux 之基础篇(一),接下来会跟着文档从下面三个点开始。

  • 数据流
  • 与 React 配合
  • 实例:TodoList

数据流

Redux 的架构围绕与如何搭建一个严格的单向数据流

这意味着所有的数据都有遵循一个同样的生命周期模式,可以让整个应用变得可预测也更加易于理解。在 Redux 应用中,所有的数据生命周期分为如下四个步骤:

1 你主动调用 store.dispatch(action)

Action 是一个用来描述发生了事情的对象。比如:

{type:'ADD_TODO',text:'todo\'s content'}
{type: 

【翻译向】走进 Redux 之基础篇(一)

Create at 2016 04 2711 min read技术Redux学习笔记

Redux 的三个原则

  • 整个应用的状态都以一个对象树的形式保存在一个单一的 store 中
  • 唯一去改变这个对象树的方法就是通过去触发 action,一个用来描述发生了什么事情的对象
  • 通过编写纯函数 reducers,去描述这个 action 如何改变了整个对象树

Action

Action 就是承载了要从你的应用传送给 store 的信息。它们只是 store 的信息数据来源。可以通过 store.dispatch() 来传递 action. action 可能长这个样子:

const ADD_TODO = 'ADD_TODO'
{
    type: ADD_TODO,
    text: 'Bulid my first Redux App'
}

Actions 就是普通的 JavaScript 对象,但是必须有

ECMAScript6学习简记(三)- 函数扩展

Create at 2015 09 099 min read技术学习笔记es6

1.函数参数默认值

以前我们经常会些下面的代码

function doS(e) {
  e = e | window.e
  //doSomeThing with e
}

通过这样的方法来给函数设置默认值,这样有一个缺点就是,如果传进来的参数对应的布尔值为false,比如空字符串或者 0,那就尴尬了。

所以如果我们还想上面的代码得到正确的结果,就需要对 e 在做一个判断,判断它是否被赋值了。

这样会很麻烦,所以 ES6 有了新的方法,如下

function doS(e = window.e) {
  //doSomeThing with e
}

这样不尽代码简短了很多,而且可读性大大提高,看代码的人可以一样看到那些参数是有默认值的。

同时,默认值的设置也非常人

ECMAScript6学习简记(二)- 数组扩展

Create at 2015 09 026 min read技术学习笔记es6

Array.from()

将类数组或可迭代对象转换为真正的数组。

可转换的类别

Dom 集合

let ps = document.querySelectAll("p") //通过Array.from 转换后可以使用forEach方法
Array.from(ps).forEach(function (p, index) {
  "use strict"
  console.log(p, index)
})

arguments 对象

function foo() {
  "use strict"
  var args = Array.from(arguments) //可以替代以前下面这种方式来转换
  var argvs = Array.prototype.slice.call(arguments)
  console.log(argvs, args)

let 和 const 命令

let 命令

let 声明的变量,只存在与所声明的代码块内。

{
  let a = 10
  var b = 11
}
console.log(a) //ReferenceError: a is not defined
console.log(b) //11

可以看到,在代码块外面,是不能访问到用 let 声明的变量,也就是说 let 声明的变量是基于块级作用域的。这样就可以避免一些变量声明的问题。

var arr = [1, 2, 3]
for (let i = 0; i < arr.length; i++) {}
console.log(i) //ReferenceError: a is not defined

可见上面的的代码 for 循环外面是不能访问到变量

css3选择器整理

Create at 2015 01 225 min read技术CSS3学习笔记

属性选择器

  • E[att^="val"]:选择att属性值以val开头的 E 元素。
  • E[att$="val"]:选择att属性值以val结尾的 E 元素。
  • E[att*="val"]:选择att属性值包含val的 E 元素。

结构性伪类选择器

:root: 根选择器,匹配元素所在文档的根元素。在HTML中,根元素始终为<html>:not : 否定选择器,选择某元素以外的所有元素。下面的代码,最终会为

前端开发学习笔记六

Create at 2015 01 135 min read技术学习笔记JavaScript

前言

终于搞定了一个电商整站临摹,共四张页面,实现了基本的交互功能,同时也应用了less这个新学的css预处理语言。之前也做过一个电商首页点这儿。但是因为只是单页面,处理起来比较简单。但是在制作这个整站的过程中,更加深刻的理解一些之前学过的内容:比如样式结构的分离,js设计时的分层思想等。点击这里查看网页效果,或者下面有效果图(图好丑):

效果图

结构

首先说结构,拿到设计图时,先要进行分析。比如这四张页面,是典型的上中下结构,其除了中间正文部分,头部和脚部都是完全一样的,而且除了

前端开发学习笔记五

Create at 2015 01 012 min read技术学习笔记JavaScriptCSS3

幽灵按钮最近很流行,就寻思着做了一个,它有如下一些效果。 5-1

其中按钮上的线条和图标的旋转完全用CSS3中的transtiontransform来实现,其中图标的旋转效果实现过程如下:

.link .img{
    display: block;
    width:180px;
    height:180px;
    margin-bottom: 20px;
    -webkit-transition:all 0.5s cubic-bezier(0, .18, 0, .97);    //为了兼容chrome和Safari
    transition:all 0.5s cubic-bezier(0, .18, 0, .97);        //定义动画属性,包括要变化的属性,时间,以及变化曲线(linear、ease、ease-out或者自定义等)
}