Ryan Shang

生死看淡，不服就干

0%

发表于 分类于

一、目的

结合团队现阶段技术栈，找到目前最适合团队快速上手小程序的技术栈。

二、框架

1. 现有框架对比

1 小程序 wepy mpvue megalo Taro
语法规范 小程序规范 类Vue规范 Vue规范 Vue规范 React规范
模板系统 字符串模板 字符串模板 字符串模板 字符串模板 JSX
类型系统 不支持 业务代码 业务代码 业务代码 业务代码 + JSX模板
组件规范 小程序组件 小程序组件 html标签 + 小程序组件 html标签 + 小程序组件 小程序组件
样式规范 wxss sass, less, stylus sass, less, postcss sass, less, postcss
组件化 小程序组件化 自定义组件化 Vue组件化规范 Vue组件化规范 React组件化规范
多端复用 无 复用为H5 复用为H5，将通过Weex支持移动端 复用为H5 复用为H5，将通过RN支持移动端
自动构建 无 内建构件系统 Webpack构建 内建构建系统 + Webpack构建 内建构建系统 + Webpack构建
上手成本 全新学习 熟悉Vue + wepy 熟悉Vue 熟悉Vue 熟悉React
数据流管理 无 Redux Vuex Vuex Redux
阅读全文 »

发表于 分类于

这里整理了一些自己封装的方法。

1. 类名

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/**
 * 通过类名查找元素
 * @param strClass 一个或多个类名
 * @param context 上下文 范围(可选) 默认是document
 */
function getByClass(strClass, context) {
  context = context || document;
  if (document.getElementsByClassName) {
    return nodeListToArray(context.getElementsByClassName(strClass));
  }
  var aryClass = strClass.match(/\S+/);
  var eles = nodeListToArray(context.getElementsByTagName('*'));
  for (var i = 0; i < aryClass; i++) {
    var reg = new RegExp('(^| +)' + aryClass[i] + '( +|$)');
    for (var j = 0; j < eles.length; j++) {
      if (!reg.test(eles[i].className)) {
        eles.splice(j, 1);
        j--;
      }
    }
  }
  return eles;
}

/**
 *
 * @param ele 当前元素
 * @param strClass  单个类名
 * @return true|false
 */
function hasClass(ele, strClass) {
  var reg = new RegExp("(^| +)" + strClass + "( +|$)");
  return reg.test(ele.className)
}

/**
 * 添加类名
 * @param ele  当前的元素
 * @param strClass 一个类名或多个类名
 */
function addClass(ele, strClass) {
  var aryClass = strClass.replace(/(^\s+|\s+$)/g, "").split(/\s+/g);
  for (var i = 0; i < aryClass.length; i++) {
    var curClass = aryClass[i];
    if (!hasClass(ele, curClass)) { // 若没有这个类名,才添加
      ele.className += " " + curClass;
    }
  }
}

/**
 * 删除类名
 * @param ele  当前元素
 * @param strClass 一个类名或多个类名
 */
function removeClass(ele, strClass) {
  //拆分strClass,把每个类名拿到
  var aryClass = strClass.replace(/^ +| +$/g, "").split(/ +/g);
  for (var i = 0; i < aryClass.length; i++) {
    var curClass = aryClass[i]; // 每个类名
    // 判断是否有这个类名,若有这个类名,则把这个类名删了
    var reg = new RegExp("(^| +)" + curClass + "( +|$)", "g");
    if (hasClass(ele, curClass)) {
      ele.className = ele.className.replace(reg, " ");
    }
  }
}

2. CSS

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/**
 * 获取任意css样式
 * @param ele 当前元素
 * @param attr css属性
 */
function getCss(ele, attr) {
  var res = null;
  if (typeof getComputedStyle == "function") {
    res = window.getComputedStyle(ele, null)[attr];
  } else {
    if (attr == "opacity") {
      res = ele.currentStyle.filter;//"alpha(opacity = 50)"
      var reg = /^alpha\(opacity\s*=\s*(\d+(?:\.\d+)?)\)$/;
      // reg.exec(res)[1] RegExp.$1
      res = reg.test(res) ? RegExp.$1 / 100 : 1;
    } else {
      res = ele.currentStyle[attr];
    }
  }
  // 对单位的处理
  // 若获取值是->左边是数值,右边是单位,则把单位去掉并转化成数类型
  var reg = /^[+-]?(?:\d+(?:\.\d+)?)(?:px|rem|pt|em)?$/i;
  return reg.test(res) ? parseFloat(res) : res;
}

/**
 *
 * @param ele 当前元素
 * @param attr css属性
 * @param value css属性值
 */
function setCss(ele, attr, value) {
  // 1.对浮动处理
  if (attr == "float") {
    ele.style.cssFloat = value;
    ele.style.styleFloat = value;
    return;
  }
  // 2.对透明度处理
  if (attr == "opacity") {
    ele.style.opacity = value;
    ele.style.filter = "alpha(opacity =" + value * 100 + ")";
    return;
  }
  // 3.设置单位-对没有设置单位的添加单位
  var reg = /^(?:width|height|((?:margin|padding)?(?:top|bottom|left|right)?))$/i;
  if (reg.test(attr) && !isNaN(value)) value = value + 'px';
  ele.style[attr] = value;
}

/**
 * 批量设置css样式
 * @param ele 当前元素
 * @param opt 对象类型 -每一项是css属性和css属性值
 */
function setGroup(ele, opt) {
  //先检测opt的数据类型
  if (Object.prototype.toString.call(opt) !== "[object Object]") return;
  for (var attr in opt) {
    setCss(ele, attr, opt[attr]);
  }
}

/**
 *通过参数确定是调用哪个方法(getCss,setCss,setGroup)
 */
function css() {
  var fn = getCss;
  if (arguments.length === 3) fn = setCss;
  if (arguments.length === 2 && typeof arguments[1] === 'object') fn = setCssGroup;
  return fn.apply(null, arguments);
}
阅读全文 »

发表于 分类于

经常会遇到需要把数组展开的面试题，比如把数组['j',['a','r'],'v',['a,'n'],[5,[2,0]]]展开变成["j", "a", "r", "v", "a", "n", 5, 2, 0]。常见方式肯定是递归，今天发现了一种利用ES6新特性的方式，记录下来张张见识。

先写下比较常见的递归方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let flat1 = (arr) => {
  let res = []
  let flat = (target) => {
    if (target instanceof Array) {
      target.forEach(item => {
        flat(item);
      })
    } else {
      res.push(target);
    }
  }
  flat(arr);
  return res
};

接着是利用ES6遍历器的方式：

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
31
32
33
let flat2 = (arr) => {
  Array.prototype[Symbol.iterator] = function () {
    let arr = [].concat(this);
    let getFirst = (array) => {
      let first = array.shift();
      if (first instanceof Array) {
        if (first.length > 1) {
          arr = first.slice(1).concat(array);
        }
        first = first[0];
      }
      return first;
    };
    return {
      next: function () {
        let item = getFirst(arr);
        if (item !== undefined) {
          return {
            value: item,
            done: false
          };
        } else {
          return {
            done: true
          };
        }
      }
    };
  };
  let res = [];
  for (let i of arr) { res.push(i); }
  return res;
};
阅读全文 »

发表于 分类于

数组排序的几种方法。

冒泡排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function bubbleSort(ary) {
  var flag = false;
  var temp = null;
  for (var i = 0; i < ary.length - 1; i++) {
    for (var j = 0; j < ary.length - 1 - i; j++) {
      if (ary[j] > ary[j + 1]) {
        temp = ary[j];
        ary[j] = ary[j + 1];
        ary[j + 1] = temp;
        flag = true;
      }
    }
    // 一轮过后没有变化，则已经是结果
    if (flag) {
      flag = false;
    } else {
      break;
    }
  }
  return ary;
}

插入排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function insertSort(ary) {
  var newAry = [];
  newAry.push(ary[0]);
  for (var i = 1; i < ary.length; i++) {
    var cur = ary[i];
    for (var j = newAry.length - 1; j >= 0;) {
      if (cur < newAry[j]) {
        j--;
        if (j === -1) {
          newAry.unshift(cur);
        }
      } else {
        newAry.splice(j + 1, 0, cur);
        j = -1;
      }
    }
  }
  return newAry;
}
阅读全文 »

发表于 分类于

面向对象编程有三大特征：封装、继承、多态。

严格意义上来说，JavaScript是没有继承和多态的，所以需要我们自己来实现，今天来讲讲ES5的继承实现方法。

我个人认为，最好的继承方案，应该是父类私有的属性和方法拿到子类上用，父类公有的属性和方法直接通过__proto__查找到。

要实现父类的私有属性和方法拿到子类上来用，最简单的方式就是用call方法。

1
2
3
4
5
6
7
8
9
10
11
function Father() {
  this.x = 10;
  this.y = 20;
}
Father.prototype.fn=function () {
  console.log(this.x);
};
function Son() {
  //this->实例
  Father.call(this); //父类上的私有属性拷贝一份放到子类的实例上
}
阅读全文 »