Ryan Shang

生死看淡，不服就干

0%

发表于 分类于

本文转载自知乎@大笑，原文链接：https://zhuanlan.zhihu.com/p/55887740

先来几个专业词汇，这样显得高大上一点（不存在的=。=）

BDD: Behavior-Driven Development (行为驱动开发)
TDD: Test-Driven Development (测试驱动开发)
ATDD: Acceptance Test Driven Development(验收测试驱动开发)

好，说完了，然后我们废话不多说，直接进入正题。我会从多个测试框架入手，结合各种断言库，用代码方式说明。

阅读全文 »

发表于 分类于

这段时间，某个需求中，有个功能，需要点击一个button复制某段显示出来的text，于是需要自己动手简单封装一个copy方法。

首先，完成复制，必须调用document的一个api：

1
document.execCommand('copy');

execCommand的api链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

这个是必须的，接下来，来介绍下大体思路：

阅读全文 »

发表于 分类于

1. 问题描述

1-1-1

初始需求要求一个刮刮卡的效果，代码完成后，发现计算没有问题，但是结果和触摸点偏移，如上图（仅供参考，不代表实际情况）

2. 原因

1-2-1

阅读全文 »

发表于 分类于

一、目的

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

二、框架

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);
}
阅读全文 »