分类 javascript 下的文章

Redux个人理解（一）

时间: 2016-11-21
分类: react,javascript
阅读：次

#### 通过阅读阮一峰的react教程，初步接触了redux，记录一下初次学习的一些体会，并review一下学到的知识点。
##### 1.大概结构
> 在redux中，所有的state存储在一个名为store的单一对象中，想要改变state唯一可以触发的方法是使用action，而action会如何改变state需要编写reducer
##### 2.纯组件和容器组件
> 在redux中，react组件总体可以分为两个类型。纯组件和容器组件。
> 纯组件是指不包含状态的纯react组件（即没有this.state），并使用es6中新语法可以轻松的从其他js文件中导出和引入，更充分的体现了代码组件化构成，提高了代码复用性。
> 容器组件专门负责接受用户的action和反映state上的值。具体生成方式是使用redux的connect方法，通过制定映射来将纯组件变成容器组件。

import {connect} from "redux"
    import {Mycomponent} from "Mycomponent" // 从Mycomponent.js中引入纯组件
    function map1(state) {
	return {
		"text" : state.text;
	}
    }
    // 返回结果为一个对象，对象为组件UI参数在state上的映射
    function map2(action) {
	return {
		"OnClick" : (e) => action({
			"type" : "click",
			"payload" : e.target.value
		});
	}
    }
    // 返回结果为一个对象，对象为指定用户操作类型， 指定接收的动作类型

const App = connect(
	map1, 
	map2
    )(Mycomponent)
#### 3.reducer编写
    
      function reducer(state = {
      text: '你好，访问者',
      name: '访问者'
    }, action) {
      switch (action.type) {
      case 'change':
      return {
        name: action.payload,
        text: '你好，' + action.payload
      };
      default:
      return state;
     }
    }

> reducer接受state和action两个参数，并通过action来计算新的state然后返回新的state
#### 4.使用redux中的createStore方法生成store，此方法以reducer作为参数
#### 5.使用redux的provider组件设置在app应用的最外层，并将上一步生成的store传入app
    <Provider store={store}>
        <App/>
    </Provider>

ECS6新语法学习（一）

时间: 2016-11-14
分类: javascript
阅读：次

### ECS6中新引入块级作用域声明方法let 和 const
> 即使用该方法声明的变量只在当前的块级作用域（{}中）有效，使用此方式声明变量可以有效的防止全局变量冲突的情况。在此情况下也可以取代常用的匿名函数写法

//使用var 声明变量i
      var arr = [];
      for (var i = 0; i < 10; i++)
      {
	    arr[i] = function () {
		console.log(i);
               }
      };

arr[6](); // 输出10
    
     // 使用let 声明变量i
    var arr = [];
    for (let i = 0; i < 10; i++)
    {
	arr[i] = function() {
	        console.log(i);
	    }
    }

arr[6](); //输出6
> ECS6中的新写法，=>和>>>， => 为arrow function
### => 为arrow function,(x) => x + 6相当于
    function(x) {
	return x + 6
    }
    
> 箭头函数中没有arguments对象，箭头函数的this也始终指向定义时所在的对象而不是使用时的对象.
### 关于数组和对象的解构赋值,个人认为有点类似于python
    var [a, b] = [1, 2]
    console.log(a) // a = 1
    console.,log(b) // b = 2
    //数组解构
    
    function example () {
	return {
		"aaa" : 1,
		"bbb" : 2
	}
    }

var {aaa, bbb} = example();
    console.log(aaa) // 1
    console.log(bbb) // 2
    //对象解构

### 关于数组遍历,使用for..of.. 在原有的ECS5中有forEach但是forEach不支持break，使用for..of..可以完美支持break
    var a = [111,222,333]

for (let test of a)
    {
	console.log(test);
    }

### 测试时发现对象貌似没有Iterator接口，所以在遍历是可以采用如下方法。
    var map = new Map()
    map.set("aaa", 11);
    map.set("bbb", 22);

for(let [key, value] of map)
    {
	console.log(key + "is" + value);
    }

### 模板字符串`的使用。
> 在ECS6中支持将多行字符串写在`中，被称作模板字符串，可以完美保留空格，缩进，转行等。假如在模板字符串中需要引用变量，可以在${}中写入
    
    var name = "Asser";
    var txt = `User's name is ${name},
    and this is a test`;
### 数组新功能
####使用Array.of()建立新数组
> 在ECS5中

Array(); // []
    Array(3); //[, , ]
    Array(1,2,3)[1, 2, 3]

> 又上可见 输入的值不同，创建的数组都不同，Array()函数只有在参数是2个及以上的时候才能创建数组
> 使用Array.of()

Array.of(1) // [1]

#### 使用includes查找数组中是否存在某一元素，返回值为布尔值.此函数可以传第二个参数，选择开始查询的位置，默认为0，假如为负数则表示为从倒数的第x个位置开始查询。

[1, 2, 3].includes(1) // true
    [1, 2, 3].includes(1, 1) // false
    [1, 2, 3].includes(3, -1) // true

###未完待续

DOM文档碎片

时间: 2016-07-26
分类: javascript
阅读：次

js判断音频文件是否完全加载

时间: 2016-07-20
分类: javascript
阅读：次

react.js在ios手机上onClick失效

时间: 2016-05-09
分类: react
阅读：次