beace 发布于 03月10, 2017

分享一些CSS画图技巧(1)——矩形

首先在这里声明,对于css画图来说,大部分的图案的宽度甚至高度都是固定的,就算采用百分比的方式来绘制,也会有最外面的边界限制。尽量在PC端或者响应式要求不太高的场景下进行,当然会有一些比较简单的图案绘制能够适应响应式的方式,可以采用canvas或svg来绘制。

阅读全文 »

beace 发布于 02月27, 2017

ESLint 的使用

ESLint可以作为代码审查的工具,来强制的制定一些代码规则或规范来管理、统一一个团队的代码风格。

你可以将它作为一个代码检查的工具,应用它的规则可以检测出代码中某些潜在的问题或者值得优化的代码,并且,你也可以将它作为一个代码规范的标准来养成你的书写习惯。

阅读全文 »

beace 发布于 02月22, 2017

JavaScript-Math.random()

Math.random()

伪随机

Math.random()返回的是一个左闭右开 [0,1)的伪随机浮点数。之所以称作伪随机,是因为整个过程看起来像是最随机的,如下图,我们也看到了随机数的分布。但是实际上并不是。不是的原因是——我们是借助一个固定的方法来获取数据。并且数据最终是可控的,因为我们固定了它的区间。

阅读全文 »

beace 发布于 02月21, 2017

ECMAScript 2015 Features-c13-tail-call

ECMAScript 2015 Features

Tail Calls(尾递归)

尾递归能够使堆栈不溢出,并且防止内存泄漏。

写法

下面一个例子,为求斐波那契第n

function fibonacci(n) {
  return n < 2 ? 1 : fibonacci(n - 1) + fibonacci(n - 2);
}
let nF = fibonacci(10);
console.log(nF); //89

阅读全文 »

beace 发布于 02月21, 2017

ECMAScript 2015 Features-c12-promises

ECMAScript 2015 Features

Promises

异步编程

写法

function timeout(duration = 0) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, duration);
    })
}

var p = timeout(1000).then(() => {
    return timeout(2000);
}).then(() => {
    throw new Error("hmm");
}).catch(err => {
    return Promise.all([timeout(100), timeout(200)]);
})

阅读全文 »

beace 发布于 02月21, 2017

ECMAScript 2015 Features-c11-number-string-array-object

ECMAScript 2015 Features

Number String Array Ojbect

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false

Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2

"abcde".includes("cd") // true
"abc".repeat(3) // "abcabcabc"

Array.from(document.querySelectorAll("*")) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1,2,3].findIndex(x => x == 2) // 1
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"

Object.assign(Point, { origin: new Point(0,0) })

阅读全文 »

beace 发布于 02月21, 2017

ECMAScript 2015 Features-c10-subclassed

ECMAScript 2015 Features

Subclassed

在ES6中,Array,Date,DOM元素都可以被继承子类化。

class MyArray extends Array {
  constructor(...args) {
    super(...args);
  }
}

var myarr = new MyArray();
myarr[0] = 1;
console.log(myarr, myarr.length); //MyArray [ 1 ] 1
}

阅读全文 »