你要知道的react组件设计模式,都在这里(上)

发表于 | 分类于 | 评论数：

随着react的发展，各种组件设计模式层出不穷。react官方文档也有不少相关文章，但是组织稍显凌乱，本文就组件的设计模式这一角度，从问题出发，为大家梳理了常见的设计模式。看完这篇文章后，你将能得心应手地处理绝大多数的react组件使用问题。

开始之前先解释一下什么是设计模式。所谓模式，是指在某些场景下，针对某类问题的某种通用的解决方案。本文所阐述的设计模式并不是编程通用的设计模式，如大家熟悉的单例模式、工厂模式等等。而是在设计react组件和相关代码时的一些解决方案与技巧，包括：1.容器与展示组件 2.高阶组件 3.render props 4.context模式 5.组合组件 6.关于组合与继承

为了更好的理解，你可以将相应源码下载下来查看：源码地址

由于内容较多，分两篇进行。上篇先介绍：1.容器与展示组件 2.高阶组件 3.render props。

阅读全文 »

js中遍历对象属性以及数组的方法总结

发表于 | 分类于 | 评论数：

遍历对象属性的方法：

共有五种，总结如下：

  1. for…in
    for…in循环遍历自身的和继承的可枚举属性（不含Symbol属性）
  2. Object.keys(obj)
    Object.keys(obj)返回一个数组，包括对象自身的（不含继承）所有可枚举属性（不含Symbol属性）

  3. Object.getOwnPropertyNames(obj)
    Object.getOwnPropertyNames(obj)返回一个数组，包括对象自身（不含继承）所有属性（包括不可枚举的属性，不含Symbol属性）

  4. Object.getOwnPropertySymbols(obj)
    Object.getOwnPropertySymbols(obj)返回一个数组，包括对象自身所有的Symbol属性

  5. Reflect.ownKeys(obj)
    Reflect.ownKeys(obj)返回一个数组，包含对象自身的所有属性，不管属性名是Symbol或字符串，也不管是否可枚举
阅读全文 »

restful接口规范

发表于 | 更新于 | 分类于 | 评论数：

API 设计规范

  • 所有的路径都是资源，例如：/users、/messages
  • 所有操作使用 http method 表示
    • post => 创建
    • get => 获取
    • put => 更新
    • delete => 删除

  • 路径中不存在 action，错误示例： /users/:userId/update

阅读全文 »

git工作流

发表于 | 更新于 | 分类于 | 评论数：

git工作流

先介绍一下业务背景，我们的项目由四五个同学同步进行开发，难免会出现代码冲突，由此设计了这一套分支管理方案。该方案基于git分支管理最佳实践。

如有分支管理优化意见，欢迎共同探讨。

阅读全文 »

技术栈&学习路线&常用库

发表于 | 更新于 | 分类于 | 评论数：

结合部门以及业界主流技术栈，积累的一些库/包。可参考这里stateofjs。

库名 备注
react Front-end Frameworks
react-router 前端路由，react-router4和之前的概念很不一样
redux Data Layer
redux-saga Data Layer
dva.js 阿里出的，封装了redux、redux-saga、react-router，项目结构简单不少，就是和大把工具umi结合起来不太易用，建议直接用webpack。
mobx 数据管理，面向对象的，相对于学习redux+saga来说简单了许多，推荐使用，中文文档相对少一些。
immutable 在学。
antd UI框架，内部系统用
koa node后端框架，async语法简明清晰，但第三方的库相对express还是少一些。
graphql 一种用于 API 的查询语言，方便接口迭代、更新。需要后端配合，比较难推动。如果前端自己实现接口层（node等）的话还比较合适，但带来的收益相对引入的成本好像并不高多少。部门中部分小项目在用。
taro react转多端，京东出的，更新以及支持都还可以，活动页/小项目可以直接用。
flutter 多端，最近很火，不知后续发展如何，纳入观察
react-native Mobile，部门技术栈，待学习
electron Desktop，部门技术栈，待学习
CSS Modules 给css加入了局部作用域和模块依赖
classnames 更灵活使用css类名
Lodash JavaScript 实用工具库，防抖、节流、去重等等方法直接用。
js-cookie 获取cookie
qs 路由参数
moment.js 轻量级的JavaScript时间库
core.js JavaScript的模块化标准库,兼容用
ismobilejs 判断是否是移动端，轻量可靠
fastclick 移动端点击事件
antd相关用了很多react相关的库 antd社区精选组件

工具箱

发表于 | 更新于 | 分类于 | 评论数：

记录下平常使用的工具，不定期更新。

编辑器

主力用VS Code，偶尔用sublime，用了如下插件

  • Debugger for Chrome，调试用
  • Beautify，美化代码格式
  • Docker，辅助管理docker文件
  • EditorConfig for VS Code，编辑器配置管理,设置保存自动美化格式。
  • ESLint，代码规范
  • Git History，辅助git管理，vscode自带的git管理太简陋了
  • Markdown All in One，辅助去写markdown
  • Markdown Preview Enhanced，预览markdown文件
  • Atom One Dark Theme，主题
阅读全文 »

JS实现排序算法

发表于 | 更新于 | 分类于 | 评论数：

常用的排序算法一般分为五类，分别是冒泡排序、选择排序、插入排序、归并排序以及快速排序。

冒泡排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var test=[4,43,30,431,98,0];
function bubbleSort(arr) {
	var length=arr.length;
  for (var i = 0; i < length; i++) {
		for(var j=0;j<length-1;j++){
    		if(arr[j]>arr[j+1]){
        	temp=arr[j];
          arr[j]=arr[j+1];
          arr[j+1]=temp;
        }
    }
  }
}
bubbleSort(test);
console.log(test); // [0, 4, 30, 43, 98, 431]

选择排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var test = [4, 43, 30, 431, 98, 0];
function selectionSort(arr) {
  var length = arr.length,
    indexMin;
  for (var i = 0; i < length - 1; i++) {
    indexMin = i;
    for (var j = i; j < length; j++) {
      if (arr[indexMin] > arr[j]) {
        indexMin = j;
      }
      temp = arr[i];
      arr[i] = arr[indexMin];
      arr[indexMin] = temp;
    }
  }
}
selectionSort(test);
console.log(test); // [0, 4, 30, 43, 98, 431]

插入排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var test = [4, 43, 30, 431, 98, 0];
function insertionSort(arr) {
  var length = arr.length,
    temp;
  for (var i = 1; i < length; i++) {
    var j = i;
    temp = arr[i];
    while (j > 0 && arr[j - 1] > temp) {
      arr[j] = arr[j - 1];
      j--
    }
    arr[j] = temp;
  }
}
insertionSort(test);
console.log(test); // [0, 4, 30, 43, 98, 431]

归并排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var test = [4, 43, 30, 431, 98, 0];

function merge(left, right) {
  var tmp = [];

  while (left.length && right.length) {
    if (left[0] < right[0])
      tmp.push(left.shift());
    else
      tmp.push(right.shift());
  }
  console.log(tmp.concat(left, right));
  return tmp.concat(left, right);
}

function mergeSort(a) {
  if (a.length === 1) return a;
  var mid = Math.floor(a.length / 2),
    left = a.slice(0, mid),
    right = a.slice(mid);
  return merge(mergeSort(left), mergeSort(right));
}
test = mergeSort(test);
console.log(test); // [0, 4, 30, 43, 98, 431]

快速排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var test = [4, 43, 30, 431, 98, 0];
function quickSort(arr){
    function swap(arr,right,left){
        var tmp = arr[right];
        arr[right]=arr[left];
        arr[left]=tmp;
    }
    function partition(arr,left,right){//分区操作，
        var pivotValue=arr[right]//最右面设为标准
        var storeIndex=left;
        for(var i=left;i<right;i++){
            if(arr[i]<=pivotValue){
                swap(arr,storeIndex,i);
                storeIndex++;
            }
        }
        swap(arr,right,storeIndex) ;
        return storeIndex//返回标杆元素的索引值
    }
    function sort(arr,left,right){
        if(left>right) return;
        var storeIndex=partition(arr,left,right);
        sort(arr,left,storeIndex-1);
        sort(arr,storeIndex+1,right);
    }
    sort(arr,0,arr.length-1);
    return arr;
}
quickSort(test);
console.log(test); // [0, 4, 30, 43, 98, 431]