Lincolnge's world

translation

2020-06-20T00:00:00+00:00

ES6 的函数式 js —– 递归模式

原文地址：https://medium.com/dailyjs/functional-js-with-es6-recursive-patterns-b7d0813ef9e3

作者：Casey Morris

这是处理什么问题？函数式编程正在兴起，这是一个令人非常兴奋的话题。它使我可以编写简洁的声明性代码，易于测试和推理。什么是函数式编程？我将把答案回答给对此主题有更多了解的人，Eric Elliot 说：

函数式编程(通常缩写为FP)是通过组合纯函数、避免共享状态、可变数据和副作用来构建软件的过程。函数式编程是声明式的，而不是命令式的，应用的状态通过纯函数传递。与面向对象编程相反，在面向对象编程中，应用的状态通常与对象中的方法共享和同步。

ES6带来了许多特性，让我们可以轻松编写纯函数，而 rest/spread 是最强大的功能之一。使用 rest 参数，我们可以使用递归进行无循环的循环。在本文中，我们将重写许多支持函数模式的常用 JavaScript 方法/函数。

前言

以下函数用于演示和学习。下面的许多函数都是尾部递归的，应该进一步优化。优化尾部递归不是本文的主题。ES6带来了尾部调用优化，但必须与“严格模式”一起使用。

Head

返回数组中的第一项。当您需要将第一项与数组的其余项分隔开时，非常有用。为此，我们使用了解构赋值。

const head = ([x]) => x

示例：

const array = [1,2,3,4,5]
head(array) // 1

Tail

返回数组中除第一项以外的所有项。

const tail = ([, ...xs]) => xs

上面的示例与如下所示本质上是一样的

const tail = ([x, ...xs]) => xs

因为我们不需要在结果中使用 x，所以我们可以删除它，但是保留逗号以获取数组中的其他项。

示例：

const array = [1,2,3,4,5]
tail(array) // [2,3,4,5]

Def

返回参数是否已定义。

const def = x => typeof x !== 'undefined'

示例：

const defined = 'this is defined'
def(defined) // true
def(doesntExist) // false

Undef

返回参数是否未定义。

const undef = x => !def(x)

示例：

const defined = 'this is defined'
undef(defined) // false
undef(doesntExist) // true

Copy

不使用 array .slice() 返回数组的拷贝。利用 spread。

const copy = array => [...array]

示例：

let array = [1,2,3,4,5]
let copied = copy(array)
copied.push(6)

array // [1,2,3,4,5]
copied // [1,2,3,4,5,6]

Length

返回数组的长度。这是使用递归循环遍历数组的一种非常简单的形式，尽管在本例中数组的值无关紧要(数组中的每一项都从 1 开始递增)。我们使用 len 参数来避免尾部递归。

const length = ([x, ...xs], len = 0) => def(x) ? length(xs, len + 1) : len

如果我们不关心尾部递归，我们可以把它写成

const length = ([x, ...xs]) => def(x) ? 1 + length(xs) : 0

这将为数组中的每个项添加一个堆栈帧，而避免尾部递归的版本将替换单个堆栈帧。如果传入的数组足够大，它将抛错 “Maximum call stack size exceeded”。

示例：

const array = [1,2,3,4,5]
length(array) // 5

Reverse

返回一个反向数组。

const reverse = ([x, ...xs]) => def(x) ? [...reverse(xs), x] : []

示例：

const array = [1,2,3,4,5]
reverse(array) // [5,4,3,2,1]

Array.reverse() 可以使用，但是它有一个副作用，它会把原来的数组改掉。以下所示：

const array = [1,2,3,4,5]

const newArray = array.reverse() // [5,4,3,2,1]
array // [5,4,3,2,1]

// using the reverse method we just created
const array2 = [1,2,3,4,5]

const newArray2 = reverse(array2) // [5,4,3,2,1]
array2 // [1,2,3,4,5]

First

返回一个新数组，其中包含给定数组的前 n 项。

const first = ([x, ...xs], n = 1) => def(x) && n ? [x, ...first(xs, n - 1)] : []

示例：

const array = [1,2,3,4,5]
first(array, 3) // [1,2,3]

Last

返回一个新数组，其中包含给定数组的最后 n 项。

const last = (xs, n = 1) => reverse(first(reverse(xs), n))

示例：

const array = [1,2,3,4,5]
last(array, 3) // [3,4,5]

slice

返回在给定索引处插入值的新数组。

const slice = ([x, ...xs], i, y, curr = 0) => def(x)
  ? curr === i
    ? [y, x, ...slice(xs, i, y, curr + 1)]
    : [x, ...slice(xs, i, y, curr + 1)]
  : []

示例：

const array = [1,2,4,5]
slice(array, 2, 3) // [1,2,3,4,5]

isArray

返回是否是数组。允许我们以更函数化的方式编写 Array.isArray()。

const isArray = x => Array.isArray(x)

示例：

const array = [1,2,3,4,5]
isArray(array) // true

Flatten

将多维数组变成一维数组。

const flatten = ([x, ...xs]) => def(x)
    ? isArray(x) ? [...flatten(x), ...flatten(xs)] : [x, ...flatten(xs)]
    : []

示例：

const array1 = [1,2,3]
const array2 = [4,[5,[6]]]
flatten([array1, array2]) // [1,2,3,4,5,6]

Swap

交换两项的值返回一个新数组。

const swap = (a, i, j) => (
  map(a, (x,y) => {
    if(y === i) return a[j]
    if(y === j) return a[i]
    return x
  })
)

示例：

const array = [1,2,3,4,5]
swap(array, 0, 4) // [5,2,3,4,1]

Map

MDN: 数组中元素执行传入函数生成一个新的数组。

const map = ([x, ...xs], fn) => {
  if (undef(x)) return []
  return [fn(x), ...map(xs, fn)]
}

可以简化为

const map = ([x, ...xs], fn) => def(x) ? [fn(x), ...map(xs, fn)] : []

示例：

const double = x => x * 2
map([1,2,3], double) // [2,4,6]

Filter

MDN: 数组中元素执行传入函数通过验证执行生成一个新的数组。

const filter = ([x, ...xs], fn) => {
  if (undef(x)) return []
  if (fn(x)) {
    return [x, ...filter(xs, fn)]
  } else {
    return [...filter(xs, fn)]
  }
}

可以简化为

const filter = ([x, ...xs], fn) => def(x)
    ? fn(x)
        ? [x, ...filter(xs, fn)] : [...filter(xs, fn)]
    : []

示例：

const even = x => x % 2 === 0
const odd = x = !even(x)
const array = [1,2,3,4,5]

filter(array, even) // [2,4]
filter(array, odd) // [1,3,5]

Reject

与筛选器相反，返回一个不通过筛选器函数的数组。

const reject = ([x, ...xs], fn) => {
  if (undef(x)) return []
  if (!fn(x)) {
    return [x, ...reject(xs, fn)]
  } else {
    return [...reject(xs, fn)]
  }
}

示例：

const even = x => x % 2 === 0
const array = [1,2,3,4,5]

reject(array, even) // [1,3,5]

Partition

将一个数组分成两个数组。一个是其项通过筛选函数的，另一个是其项失败的。

const partition = (xs, fn) => [filter(xs, fn), reject(xs, fn)]

示例：

const even = x => x % 2 === 0
const array = [0,1,2,3,4,5]

partition(array, even) // [[0,2,4], [1,3,5]]

Reduce

MDN: 对累加器和数组中的每个元素(从左到右)应用的一个函数，将其结果汇总为单个返回值。

const reduce = ([x, ...xs], fn, memo, i) => {
  if (undef(x)) return memo
  return reduce(xs, fn, fn(memo, x, i), i + 1)
}

Which can be simplified as:

const reduce = ([x, ...xs], fn, memo, i = 0) => def(x)
    ? reduce(xs, fn, fn(memo, x, i), i + 1) : memo

示例：

const sum = (memo, x) => memo + x
reduce([1,2,3], sum, 0) // 6

const flatten = (memo, x) => memo.concat(x)
reduce([4,5,6], flatten, [1,2,3]) // [1,2,3,4,5,6]

ReduceRight

与reduce相似，但是从右到左应用函数。

const reduceRight = (xs, fn, memo) => reduce(reverse(xs), fn, memo)

示例：

const flatten = (memo, x) => memo.concat(x)

reduceRight([[0,1], [2,3], [4,5]], flatten, []) // [4, 5, 2, 3, 0, 1]

Partial

通过填充任意数量的参数部分应用函数。

const partial = (fn, ...args) => (...newArgs) => fn(...args, ...newArgs)

示例：

const add = (x,y) => x + y
const add5to = partial(add, 5)

add5to(10) // 15

SpreadArg

将接受数组的函数转换为接受多个参数的函数。这在部分应用时非常有用。

const spreadArg = (fn) => (...args) => fn(args)

示例：

const add = ([x, ...xs]) => def(x) ? parseInt(x + add(xs)) : []
add([1,2,3,4,5]) // 15

const spreadAdd = spreadArg(add)
spreadAdd(1,2,3,4,5) // 15

如果你只想定义一个函数，你可以把它写成

const add = spreadArg(([x, ...xs]) => def(x) ? parseInt(x + add(...xs)) : [])
add(1,2,3,4,5) // 15

在上面的示例中，需要记住传递给递归函数的展开数组是使用展开的参数实现的。

ReverseArgs

反转函数参数的顺序。

const reverseArgs = (fn) => (...args) => fn(...reverse(args))

示例：

const divide = (x,y) => x / y
divide(100,10) // 10

const reverseDivide = reverseArgs(divide)
reverseDivide(100,10) // 0.1

对于部分应用参数来说，反向参数可能很有用。有时您希望使用部分列表末尾的参数，而不是列表开头的参数。翻转参数将允许我们做到这一点。

const percentToDec = partial(reverseDivide, 100)

percentToDec(25) // 0.25

Pluck

提取数组中的属性值。与 map 函数结合使用时非常有用。

const pluck = (key, object) => object[key]

示例：

const product = {price: 15}
pluck('price', product) // 15

const getPrices = partial(pluck, 'price')
const products = [
  {price: 10},
  {price: 5},
  {price: 1}
]
map(products, getPrices) // [10,5,1]

Flow

每个函数使用之前的函数的返回值。

const flow = (...args) => init => reduce(args, (memo, fn) => fn(memo), init)

示例：


const getPrice = partial(pluck, 'price')
const discount = x => x * 0.9
const tax = x => x + (x * 0.075)
const getFinalPrice = flow(getPrice, discount, tax)

// looks like: tax(discount(getPrice(x)))
// -> get price
// -> apply discount
// -> apply taxes to discounted price

const products = [
  {price: 10},
  {price: 5},
  {price: 1}
]

map(products, getFinalPrice) // [9.675, 4.8375, 0.9675]

Compose

与 flow 相同，但是参数使用时的顺序相反。Compose 与函数的编写方式更自然更匹配。使用与 flow 函数定义相同的数据：

const compose = (...args) => flow(...reverse(args))

示例：

const getFinalPrice = compose(tax, discount, getPrice)

// looks like: tax(discount(getPrice(x)))

map(products, getFinalPrice) // [9.675, 4.8375, 0.9675]

Min

返回数组中最小的数字。如果提供的数组为空，则返回 Infinity。

const min = ([x, ...xs], result = Infinity) => def(x)
    ? x < result
        ? min(xs, x)
        : result
    : result

示例：

const array = [0,1,2,3,4,5]

min(array) // 0

Max

返回数组中最大的数字。如果数组是空的，返回 Infinity。

const max = ([x, ...xs], result = -Infinity) => def(x)
    ? x > result
        ? max(xs, x)
        : max(xs, result)
    : result

示例：

const array = [0,1,2,3,4,5]

max(array) // 5

Factorial

返回一个数的阶乘。使用一个累加器来允许替换堆栈帧以允许返回更大的阶乘。

const factorial = (x, acum = 1) => x ? factorial(x - 1, x * acum) : acum

示例：

factorial(5) // 120

Fibonacci

返回给定位置的斐波那契数。

const fib = x => x > 2 ? fib(x - 1) + fib(x - 2) : 1

示例：

fib(15) // 610

Quicksort

对数组从小到大排序。通过重新排序数组来实现的，使其包含两个子数组，一个值较小，另一个值较大。使用递归应用于每个子数组，直到没有数组剩下，然后使用 flatten 函数返回排序后的数组。

const quicksort = (xs) => length(xs)
  ? flatten([
    quicksort(filter(tail(xs), x => x <= head(xs))),
    head(xs),
    quicksort(filter(tail(xs), x => x > head(xs)))
  ])
  : []

这也可以通过 partition 函数来实现，但需要赋值给一个新的变量。

const quicksort = (array) => {
  if (!length(array)) return []
  const [less, more] = partition(tail(array), x => x < head(array))
  return flatten([quicksort(less), head(array), quicksort(more)])
}

示例：

const array = [8,2,6,4,1]

quicksort(array) // [1,2,4,6,8]

所有函数都是 Reduce

上面的许多功能都可以转换为 reduce 函数，这在大多数情况下也会提高性能。这也彰显了reduce 函数的灵活性。

const reduce = ([x, ...xs], f, memo, i = 0) => def(x)
    ? reduce(xs, f, f(memo, x, i), i + 1) : memo

const reverse = xs => reduce(xs, (memo, x) => [x, ...memo], [])

const length = xs => reduce(xs, (memo, x) => memo + 1, 0)

const map = (xs, fn) => reduce(xs, (memo, x) => [...memo, fn(x)], [])

const filter = (xs, fn) => reduce(xs, (memo, x) => fn(x)
    ? [...memo, x] : [...memo], [])

const reject = (xs, fn) => reduce(xs, (memo, x) => fn(x)
    ? [...memo] : [...memo, x], [])

const first = (xs, n) => reduce(xs, (memo, x, i) => i < n
    ? [...memo, x] : [...memo], [])

const last = (xs, n) => reduce(xs, (memo, x, i) => i >= (length(xs) - n)
    ? [...memo, x] : [...memo], [])

const merge = spreadArg(xs => reduce(xs, (memo, x) => [...memo, ...x], []))

const flatten = xs => reduce(xs, (memo, x) => x
    ? isArray(x) ? [...memo, ...flatten(x)] : [...memo, x] : [], [])

const add = spreadArg(([x, ...xs]) => reduce(xs, (memo, y) => memo + y, x))

const divide = spreadArg(([x, ...xs]) => reduce(xs, (memo, y) => memo / y, x))

const multiply = spreadArg(([x, ...xs]) => reduce(xs, (memo, y) => memo * y, x))

示例：

reverse([1,2,3]) // [3,2,1]
length([1,2,3]) // 3
map([1,2,3], double) // [2,3,4]
filter([1,2,3,4], even) // [2,4]
reject([1,2,3,4], even) // [1,3]
first([1,2,3,4], 3) // [1,2,3]
last([1,2,3,4], 2) // [3,4]
merge([1,2,3],[4,5,6]) // [1,2,3,4,5,6]
flatten([1,[2,3,[4,[5,[[6]]]]]]) // [1,2,3,4,5,6]
add(1,2,3,4,5) // 15
multiply(2,5,10) // 100
divide(100,2,5) // 10

圆满完成

我希望这篇文章能帮助我们深入了解 JavaScript 和 ES6 提供的一些设计模式。很多问题可以用迭代或者循环来解决，当然也可以使用递归函数。我希望本文还能够向您展示 reduce 函数的灵活性。

ARTS

2019-12-23T00:00:00+00:00

A (Algotithm) 至少做一个leetcode的算法题
R (Review) 阅读并点评一篇英文的技术文章
T (Tip) 学习一个技术技巧
S (Share) 分享一篇有观点和思考的技术文章

每周一次，坚持一年

Algorithm

Description Jewels and Stones

Solution

// 	1 ms	34.9 MB
// 暴力破解，理论上是最慢的，但是这里最快
class Solution {
    public int numJewelsInStones(String J, String S) {
        int stones = 0;
        for (char s: S.toCharArray()) {
            for (char j: J.toCharArray()) {
                if (s == j) {
                    stones++;
                    break;
                }
            }
        }

        return stones;
    }
}

Review

Tip

ARTS

2019-12-16T00:00:00+00:00

A (Algotithm) 至少做一个leetcode的算法题
R (Review) 阅读并点评一篇英文的技术文章
T (Tip) 学习一个技术技巧
S (Share) 分享一篇有观点和思考的技术文章

每周一次，坚持一年

Algorithm

Description Best Time to Buy and Sell Stock II

Solution

class Solution {
    public int maxProfit(int[] prices) {
        int sum = 0;
        for (int i = 1; i < prices.length; i++) {
            if (prices[i] > prices[i - 1]) {
                sum += prices[i] - prices[i - 1];
            }
        }
        return sum;
    }
}

Review

Tip

ARTS

2019-12-08T00:00:00+00:00

A (Algotithm) 至少做一个leetcode的算法题
R (Review) 阅读并点评一篇英文的技术文章
T (Tip) 学习一个技术技巧
S (Share) 分享一篇有观点和思考的技术文章

每周一次，坚持一年

Algorithm

Description Two City Scheduling

Solution

/**
 * @param {number[][]} costs
 * @return {number}
 */
var twoCitySchedCost = function(costs) {
    var newArray = [{
        arr: costs[0],
        diffValue: costs[0][0] - costs[0][1]
    }];
    for (var i = 1; i < costs.length; i++) {
        var item = costs[i];
        var diffValue = item[0] - item[1];
        for (var j = 0; j < newArray.length; j++) {
            if (newArray[j].diffValue > diffValue) {
                newArray.splice(j, 0, {
                    arr: item,
                    diffValue: diffValue
                });
                break;
            }
            if (j === newArray.length - 1) {
                newArray.push({
                    arr: item,
                    diffValue: diffValue
                });
                break;
            }
        }
    }
    var result = 0;
    for (i = 0; i < newArray.length; i++) {
        if (i < (newArray.length - 1) / 2) {
            result += newArray[i].arr[0];
        } else {
            result += newArray[i].arr[1];
        }
    }
    return result;
};

// var costs = [[10,20],[30,200],[400,50],[30,20]];
// var costs1 = [[10,20],[30,200],[400,50],[30,30]];
// var costs1 = [[10,20],[30,200],[400,50],[30,30], [30, 20]];
// console.log('twoCitySchedCost', twoCitySchedCost(costs))
// console.log('twoCitySchedCost 1', twoCitySchedCost(costs1))

Review

Tip

N/A (Not applicable) 不适用，不可用，不知道，不适用的，不限。

别让自己“墙”了自己

文中讲了几个小故事，大体其实就是某人很有天赋，但是因为自身狭隘的想法，固步自封。写前端的认为自己只能写前端，写客户端的认为自己只能写客户端；还有写某种特定语言鄙视别的语言的，诸如此类的情况。还有待在小城市没有去大公司历练过的。

不要限制自己。做有价值的事情，扩大自己的视野，开放自己的内心，站在更高的维度上，精于计算自己的得失，勇于跳出传统的束缚。

ARTS

2019-11-30T00:00:00+00:00

A (Algotithm) 至少做一个leetcode的算法题
R (Review) 阅读并点评一篇英文的技术文章
T (Tip) 学习一个技术技巧
S (Share) 分享一篇有观点和思考的技术文章

每周一次，坚持一年

Algorithm

Description Letter Combinations of a Phone Number

Solution

/**
 * @param {string} digits
 * @return {string[]}
 */
var letterCombinations = function(digits) {
    digits = String(digits);
    if (digits.length === 1) {
        return digitMaps[digits].split('');
    }
    if (digits === '') {
        return [];
    }
    var firstDigit = digits[0];
    var lastDigits = digits.slice(1);
    var firstStr = digitMaps[firstDigit];
    var result = [];
    firstStr.split('').forEach(firstItem => {
        letterCombinations(lastDigits).forEach(lastItem => {
            result.push(firstItem + lastItem);
        });
    });
    return result;
};

const digitMaps = {
    2: 'abc',
    3: 'def',
    4: 'ghi',
    5: 'jkl',
    6: 'mno',
    7: 'pqrs',
    8: 'tuv',
    9: 'wxyz',
};


// letterCombinations(233);

Review

Tip

ARTS

2019-11-24T00:00:00+00:00

A (Algotithm) 至少做一个leetcode的算法题
R (Review) 阅读并点评一篇英文的技术文章
T (Tip) 学习一个技术技巧
S (Share) 分享一篇有观点和思考的技术文章

每周一次，坚持一年

Algorithm

Description Jewels and Stones

Solution

/**
 * @param {string} J
 * @param {string} S
 * @return {number}
 */
/**
 * @param {string} J
 * @param {string} S
 * @return {number}
 */
// method 1
// var numJewelsInStones = function(J, S) {
//     var count = 0;
//     for (var i of S) {
//         for (var j of J) {
//             if (j === i) {
//                 count++;
//             }
//         }
//     }
//     return count;
// };

// method 2
var numJewelsInStones = function(J, S) {
    return S.split('').filter(x => J.indexOf(x) !== -1).length
};

// numJewelsInStones('aA', 'aAAbbbb')

Review

Tip

“当谈论面向对象的时候，我们到底在谈论什么”，收获什么是面向对象，面向对象狭义上是指包含四个特性，封装、抽象、继承、多态的代码语言；广义上是指面向支持类，有对象语法机制就能认为是面向对象语言。

ARTS

2019-11-11T00:00:00+00:00

A (Algotithm) 至少做一个leetcode的算法题
R (Review) 阅读并点评一篇英文的技术文章
T (Tip) 学习一个技术技巧
S (Share) 分享一篇有观点和思考的技术文章

每周一次，坚持一年

Algorithm

Description 1108. Defanging an IP Address

Solution

/**
 * @param {string} address
 * @return {string}
 */
// method 1
// var defangIPaddr = function(address) {
//     return address.replace(/\./g, "[.]");
// };

// method 2
var defangIPaddr = function(address) {
    var res = '';
    for (var i = 0; i < address.length; i++) {
        if (address[i] === '.') {
            res += '[.]'
        } else {
            res += address[i];
        }
    }
    return res;
};

Review

Tip

今天学习了，收获

ARTS

2019-01-07T00:00:00+00:00

A (Algotithm) 至少做一个leetcode的算法题
R (Review) 阅读并点评一篇英文的技术文章
T (Tip) 学习一个技术技巧
S (Share) 分享一篇有观点和思考的技术文章

每周一次，坚持一年

Algorithm

Description Valid Parentheses

Solution

/**
 * https://leetcode.com/problems/valid-parentheses/
 * @param {string} s
 * @return {boolean}
 */
var isValid = function(s) {
    var stack = [];

    var arrs = s.split('');
    var firstItem = arrs.shift();
    if (s.length % 2 !== 0) {
        return false;
    }
    while (arrs.length) {
        var secondItem = arrs.shift();
        if (parenthesesObject[firstItem] === secondItem) {
            firstItem = stack.pop();
            continue;
        }
        stack.push(firstItem);
        firstItem = secondItem;
    }
    if (stack.length) {
        return false;
    }
    return true;
};

var parenthesesObject = {
    '{': '}',
    '(': ')',
    '[': ']',
};

var s = '()';
console.log(isValid(s));

var s = "[";
console.log(isValid(s));

Review

How to write a good README for your GitHub project? https://bulldogjob.com/news/449-how-to-write-a-good-readme-for-your-github-project

如何写一篇好的 Readme。Readme 是我们在开始一个新项目的第一个文件。 Readme 指在是其他人更容易理解我们的代码。使用英语可以让更多受众了解这个项目。 Readme 用 markdown 格式，使用 markdown 语法。一篇好的 readme 包含：标题、介绍、技术细节、如何启动几部分，也可包含目录、插图、示例等。好的示例如下：

Tip

Js 原生的 onchange 就是 input 失去焦点的时候触发的。 oninput 会在 input 输入框值改变的时候实时触发。

最近也在思考如何开发一个 js 库。并不单单只是考虑 js 的逻辑怎么书写，也包含了代码之外的考虑。

代码之外的考虑包含：

脚手架
构建
- $ npm run build
单元测试
- $ npm run test
发布
- $ npm publish
目录结构
- lib/
- src/
- package.json
- .gitignore
- .npmrc
- README.md
- CHANGELOG.md // 更新日志
- example // 示例代码。

ARTS

2019-01-01T00:00:00+00:00

A (Algotithm) 至少做一个leetcode的算法题
R (Review) 阅读并点评一篇英文的技术文章
T (Tip) 学习一个技术技巧
S (Share) 分享一篇有观点和思考的技术文章

每周一次，坚持一年

Algorithm

Description Roman to Integer

Solution

/**
 * https://leetcode.com/problems/roman-to-integer/
 * @param {string} s
 * @return {number}
 */
var romanToInt = function(s) {
    var arr = s;
    var result = 0;
    // arr = [ 'I1', 'I2', 'I3' ];
    // console.log('arr', arr);

    // arr.reduce(function(x, y) {
    //     // console.log('x, y', x, y)
    //     if (romanValue[x] >= romanValue[y]) {
    //         result += (romanValue[x]);
    //     } else {
    //         result -= (romanValue[x]);
    //     }
    //     return y;
    // });

    // for 循环比 reduce 应该要快一些。
    for(var arrIndex = 1; arrIndex < arr.length; arrIndex++) {
        // console.log('arr[arrIndex - 1]', arr[arrIndex - 1], arr[arrIndex]);
        var last = romanValue[arr[arrIndex - 1]];
        // console.log('...last', last, romanValue[arr[arrIndex]]);
        if (last >= romanValue[arr[arrIndex]]) {
            result += last;
        } else {
            result -= last;
        }
    }

    result += romanValue[arr[arr.length - 1]];
    return result;
};

var romanValue = {
    'I': 1,
    'V': 5,
    'X': 10,
    'L': 50,
    'C': 100,
    'D': 500,
    'M': 1000,
};

// console.log('romanToInt(\'IV\')', romanToInt('IV'), 4);


console.log('romanToInt(\'I\')', romanToInt('I'), 1);
console.log('romanToInt(\'II\')', romanToInt('II'), 2);
console.log('romanToInt(\'III\')', romanToInt('III'), 3);
console.log('romanToInt(\'IV\')', romanToInt('IV'), 4);
console.log('romanToInt(\'V\')', romanToInt('V'), 5);
console.log('romanToInt(\'VI\')', romanToInt('VI'), 6);
console.log('romanToInt(\'VII\')', romanToInt('VII'), 7);
console.log('romanToInt(\'VIII\')', romanToInt('VIII'), 8);
console.log('romanToInt(\'IX\')', romanToInt('IX'), 9);
console.log('romanToInt(\'XIX\')', romanToInt('XIX'), 19);
console.log('romanToInt(\'XL\')', romanToInt('XL'), 40);
console.log('romanToInt(\'CXLIV\')', romanToInt('CXLIV'), 144);
console.log('romanToInt(\'CD\')', romanToInt('CD'), 400);

console.log('romanToInt(\'LVIII\')', romanToInt('LVIII'), 58);
console.log('romanToInt(\'MCMXCIV\')', romanToInt('MCMXCIV'), 1994);

console.log('romanToInt(\'XC\')', romanToInt('XC'), 90);
console.log('romanToInt(\'XCI\')', romanToInt('XCI'), 91);
console.log('romanToInt(\'XCIX\')', romanToInt('XCIX'), 99);
console.log('romanToInt(\'CM\')', romanToInt('CM'), 900);
console.log('romanToInt(\'CMXCIX\')', romanToInt('CMXCIX'), 999);
console.log('romanToInt(\'MCMXCIX\')', romanToInt('MCMXCIX'), 1999);
console.log('romanToInt(\'MM\')', romanToInt('MM'), 2000);

Review

Things I Don’t Know as of 2018 https://overreacted.io/things-i-dont-know-as-of-2018/?from=timeline&isappinstalled=0

该篇文章是作者阐述自己至 2018 年还未了解的相关技术。

作者表示很多你崇拜的大神也会有你会但是大神不会的技术。

作者承认自己也会有知识缺陷但是也有宝贵的需要多年才能达到的知识。

Tip

99%的程序都没有考虑的网络异常 https://mp.weixin.qq.com/s/S2Eu9coPeikkfIbc3KeusA 这篇文章我理解的就是处理一些平时常见但前端不怎么处理掉错误。用 try catch 解决。

返回接口数据报错。
服务不稳定导致的接口报错。
网络不稳定导致的接口报错。

…

ARTS

2018-12-23T00:00:00+00:00

A (Algotithm) 至少做一个leetcode的算法题
R (Review) 阅读并点评一篇英文的技术文章
T (Tip) 学习一个技术技巧
S (Share) 分享一篇有观点和思考的技术文章

每周一次，坚持一年

Algorithm

Description Integer to Roman

Solution

/**
 * https://leetcode.com/problems/integer-to-roman/
 * @param {number} num
 * @return {string}
 */
var intToRoman = function(num) {
    if (num >= 4000) {
        new Error('无法处理');
        return null;
    }

    var result = '';
    var count = 0;
    var currentIndex = currentRomanValue.length - 1;
    var currentSymbol = null;
    var lastSymbol = null;
    // var nextSymbol = '';
    var minuend;

    while(num) {
        currentSymbol = currentRomanValue[currentIndex];
        if (currentIndex + 1 < currentRomanValue.length) {
            lastSymbol = currentRomanValue[currentIndex + 1];
        } else {
            // 处理 lastSymbol 为 1000 的时候
            lastSymbol = currentSymbol;
        }

        if (currentIndex >= 2) {
            minuend = currentRomanValue[currentIndex - 1];
            if (!minuend.isMinuend) {
                minuend = currentRomanValue[currentIndex - 2];
            }
        }
        if (currentSymbol.value === minuend.value) {
            // 当前的不能为被减数
            lastSymbol = null;
        }
        count = Math.floor(num / currentSymbol.value);
        num = num % currentSymbol.value;

        // console.log(
        //     'count', count, 'num', num,
        //     'lastSymbol', lastSymbol && lastSymbol.value,
        //     'currentSymbol', currentSymbol.symbol,
        //     'minuend', minuend.value,
        // );

        if (count >= 1) {
            result += repeat(count, currentSymbol.symbol);
        }
        if (lastSymbol && (currentSymbol.value - minuend.value <= num)) {
            result += minuend.symbol + currentSymbol.symbol;
            num = num - (currentSymbol.value - minuend.value);
        }

        if (num < 0) {
            break;
        }
        currentIndex--;
    }
    return result;
};

var repeat = function( num, str ) {
    return new Array(num + 1).join(str);
};

var currentRomanValue = [
    { symbol: 'I', value: 1, isMinuend: true },
    { symbol: 'V', value: 5, isMinuend: false },
    { symbol: 'X', value: 10, isMinuend: true },
    { symbol: 'L', value: 50, isMinuend: false },
    { symbol: 'C', value: 100, isMinuend: true },
    { symbol: 'D', value: 500, isMinuend: false },
    { symbol: 'M', value: 1000, isMinuend: true },
];

// 方法二
var intToRoman = function(num) {
    var M = ['', 'M', 'MM', 'MMM'];
    var C = ['', 'C', 'CC', 'CCC', 'CD', 'D', 'DC', 'DCC', 'DCCC', 'CM'];
    var X = ['', 'X', 'XX', 'XXX', 'XL', 'L', 'LX', 'LXX', 'LXXX', 'XC'];
    var I = ['', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX'];
    return M[Math.floor(num/1000)] + C[Math.floor((num%1000)/100)] + X[Math.floor((num%100)/10)] + I[num%10];
};

// 方法三
var intToRoman = function(num) {
	if (num >= 1000) {
		return "M" + intToRoman(num - 1000)
	}

	if (num >= 900) {
		return "CM" + intToRoman(num - 900)
	}

	if (num >= 500) {
		return "D" + intToRoman(num - 500)
	}

	if (num >= 400) {
		return "CD" + intToRoman(num - 400)
	}

	if (num >= 100) {
		return "C" + intToRoman(num - 100)
	}

	if (num >= 90) {
		return "XC" + intToRoman(num - 90)
	}

	if (num >= 50) {
		return "L" + intToRoman(num - 50)
	}

	if (num >= 40) {
		return "XL" + intToRoman(num - 40)
	}

	if (num >= 10) {
		return "X" + intToRoman(num - 10)
	}

	if (num >= 9) {
		return "IX" + intToRoman(num - 9)
	}

	if (num >= 5) {
		return "V" + intToRoman(num - 5)
	}

	if (num >= 4) {
		return "IV" + intToRoman(num - 4)
	}

	if (num >= 1) {
		return "I" + intToRoman(num - 1)
	}
	return '';
};

// Symbol       Value
// I             1
// V             5
// X             10
// L             50
// C             100
// D             500
// M             1000

console.log('intToRoman(1)', intToRoman(1), 'I');
console.log('intToRoman(2)', intToRoman(2), 'II');
console.log('intToRoman(3)', intToRoman(3), 'III');
console.log('intToRoman(4)', intToRoman(4), 'IV');
console.log('intToRoman(5)', intToRoman(5), 'V');
console.log('intToRoman(6)', intToRoman(6), 'VI');
console.log('intToRoman(7)', intToRoman(7), 'VII');
console.log('intToRoman(8)', intToRoman(8), 'VIII');
console.log('intToRoman(9)', intToRoman(9), 'IX');
console.log('intToRoman(19)', intToRoman(19), 'XIX');
console.log('intToRoman(40)', intToRoman(40), 'XL');
console.log('intToRoman(144)', intToRoman(144), 'CXLIV');
console.log('intToRoman(400)', intToRoman(400), 'CD');

console.log('intToRoman(58)', intToRoman(58), 'LVIII');
console.log('intToRoman(1994)', intToRoman(1994), 'MCMXCIV');

console.log('intToRoman(90)', intToRoman(90), 'XC');
console.log('intToRoman(91)', intToRoman(91), 'XCI');
console.log('intToRoman(99)', intToRoman(99), 'XCIX');
console.log('intToRoman(900)', intToRoman(900), 'CM');
console.log('intToRoman(999)', intToRoman(999), 'CMXCIX');
console.log('intToRoman(1999)', intToRoman(1999), 'MCMXCIX');
console.log('intToRoman(2000)', intToRoman(2000), 'MM');

Review

Create and Test Decorators in JavaScript https://netbasal.com/create-and-test-decorators-in-javascript-85e8d5cf879c

该文章指导我们如何使用 Decorator 去修饰类、方法和属性。并且如何去测试 Decorator。测试 Decorator 与测试普通函数几无二致。

Tip

tabindex：元素使用Tab键进行focus时候的顺序值

div 要加这个属性，才能用 js 去 focus 该 div。 https://www.zhangxinxu.com/wordpress/2017/05/html-tabindex/

未完待续。。。

ARTS

2018-12-17T00:00:00+00:00

A (Algotithm) 至少做一个leetcode的算法题
R (Review) 阅读并点评一篇英文的技术文章
T (Tip) 学习一个技术技巧
S (Share) 分享一篇有观点和思考的技术文章

每周一次，坚持一年

Algorithm

Description Longest Common Prefix

Solution

/**
 * @param {string[]} strs
 * @return {string}
 */
var longestCommonPrefix = function(strs) {
    var prefix = strs[0];

    var strIndex = 0;
    var res;
    while(strIndex < strs.length) {
        res = strs[strIndex].match('^' + prefix);
        if (!res) {
            prefix = prefix.slice(0, -1);
        } else {
            strIndex++;
        }
    }
    return (res && res[0]) || '';
};

var arr = ["flower","flow","flight"];
console.log(arr, longestCommonPrefix(arr), 'fl');
arr = ["dog","racecar","car"];
console.log(arr, longestCommonPrefix(arr), '');
arr = ["flower","flow","flight"];
console.log(arr, longestCommonPrefix(arr), 'fl');
arr = ["flower"];
console.log(arr, longestCommonPrefix(arr), 'flower');

Review

Data Classes https://kotlinlang.org/docs/reference/data-classes.html#data-classes

定义 data class

data class User(val name: String, val age: Int)

意味着

public class User {

    private final String name;
    private final Int age;

    public User(String name, Int age) {
        this.name = name;
        this.age = age;
    }

    public String getName() {
        return name;
    }

    public Int getAge() {
        return age;
    }

    @Override
    public boolean equals(Object other) {
        ...
    }

    @Override
    public int hashCode() {
        ...
    }

    @Override
    public String toString() {
        ...
    }

}

Tip

UGC / PGC

UGC（User-generated Content，用户生产内容） PGC（Professionally-generated Content，专业生产内容）

未完待续。。。

hackathon 有感而发

2018-12-10T00:00:00+00:00

短短 2 天 hackathon 就结束了。没有得奖，聊以为重在参与。

感觉强压或疲劳的状态下就容易影响判断。遇到一个小 bug，'float32' is not JSON serializable，结果我这边花了好多时间都解决不了。。。而中国东西其实很简单的只要把 numpy float32 的那个数字改为 float 或者改为 string 就好啦。

心得体会：

不能高估自己
可能很简单的问题，临场就是想不出来
要有充足的睡眠

未完待续。。。

ARTS

2018-12-10T00:00:00+00:00

A (Algotithm) 至少做一个leetcode的算法题
R (Review) 阅读并点评一篇英文的技术文章
T (Tip) 学习一个技术技巧
S (Share) 分享一篇有观点和思考的技术文章

每周一次，坚持一年

Algorithm

Description Container With Most Water

Solution

/**
 * https://leetcode.com/problems/container-with-most-water/
 * @param {number[]} height
 * @return {number}
 */
var maxArea = function(height) {
    if (height <= 1) return 0;
    var res = 0;
    var currentHeight;
    var index1 = 0;
    var index2 = height.length - 1;
    var distance = index2 - index1;
    while(true) {
        if (index1 >= height.length) {
            break;
        }
        if (index2 <= index1) {
            break;
        }

        distance = index2 - index1;

        if (height[index1] < height[index2]) {
            currentHeight = height[index1];
            index1++;
        } else {
            currentHeight = height[index2]
            index2--;
        }
        var tmpRes = currentHeight * distance;
        if (res < tmpRes) {
            res = tmpRes;
        }
    }
    // algorithm 2
    // for (var index1 = 0; index1 < height.length; index1++) {
    //     for (var index2 = height.length; index2 > index1; index2--) {
    //         if (height[index1] < height[index2]) {
    //             currentHeight = height[index1];
    //         } else {
    //             currentHeight = height[index2]
    //         }
    //         distance = index2 - index1;
    //         var tmpRes = currentHeight * distance;
    //         if (res < tmpRes) {
    //             res = tmpRes;
    //         }
    //     }
    // }
    return res;
};

var arr;
arr = [1,8,6,2,5,4,8,3,7];
console.log('maxArea', maxArea(arr), 49);
arr = []
console.log('maxArea', maxArea(arr));
arr = [1];
console.log('maxArea', maxArea(arr), 0);

arr = [1,8,6,2,5,4,8,3,7, 8];
console.log('maxArea', maxArea(arr), 64);
arr = [2,3,4,5,18,17,6]
console.log('maxArea', maxArea(arr), 17);

Review

5.4. Numeric Types — int, float, long, complex https://docs.python.org/2/library/stdtypes.html#typesnumeric

数字类型

这则文档介绍了 Python 中的数字类型：整数、浮点数、长整型和复数。

Python 标准的 float 就是 C 的 double 类型。基本的加减乘除都是有的，取整，取绝对值变更数字类型也不在话下。

Tip

Python3 解析 Json 直接就是 json.dumps，但是如果遇到数字是 float32 的情况的时候，Python 不会自己去动态转类型，会报错 'float32' is not JSON serializable。这个时候可以解决的方式有，str(float32Number) 或者 float(float32Number) 等。

Hackathon 有感而发

https://lincolnge.github.io/programming/2018/12/10/hackathon.html

tensorflow

2018-12-03T00:00:00+00:00

Install TensorFlow

配置指南：

# Python3
$ brew install python
# 在 profile 中添加 Python3 环境变量
$ cat ~/.bash_profile
export PATH="/usr/local/opt/python/libexec/bin:$PATH”

$ pip install six bumpy

$ pip install tensorflow

注意事项：

pip install tensorflow 出错

$ pip install https://storage.googleapis.com/tensorflow/mac/cpu/tensorflow-1.8.0-py3-none-any.whl
# 装 1.8 的版本使用 TensorFlow 最新代码编译出错，这时应该装最新版的 TensorFlow。
$ pip install https://storage.googleapis.com/tensorflow/mac/cpu/tensorflow-1.12.0-py3-none-any.whl

https://github.com/tensorflow/tensorflow/issues/20444

ARTS

2018-12-02T00:00:00+00:00

ARTS

A (Algotithm) 至少做一个leetcode的算法题
R (Review) 阅读并点评一篇英文的技术文章
T (Tip) 学习一个技术技巧
S (Share) 分享一篇有观点和思考的技术文章

每周一次，坚持一年

Algorithm

Description Regular Expression Matching

Solution

/**
 * @param {string} s
 * @param {string} p
 * @return {boolean}
 */
var isMatch = function(s, p) {
    var matchRes =  s.match(p);
    return (matchRes && matchRes[0]) === s;
};

最近几周一直想着 TensorFlow 和大数据只能说草草写了算法。我理解这个题目是希望实现一个正则匹配，而不是简单实用内置的正则。

Review

Image Recognition https://www.tensorflow.org/tutorials/images/image_recognition

图像识别

TensorFlow 的图像识别指在使用 Inception-v3 的理论去识别人类不费吹灰之力的图像识别。

Tip

JS 的 Decorator 可以继续套 Decorator，此时新的 Decorator 修饰的是它里面的 Decorator 函数。

TensorFlow 环境搭建

https://lincolnge.github.io/programming/2018/12/03/tensorflow.html

ARTS

2018-11-26T00:00:00+00:00

ARTS

A (Algotithm) 至少做一个leetcode的算法题
R (Review) 阅读并点评一篇英文的技术文章
T (Tip) 学习一个技术技巧
S (Share) 分享一篇有观点和思考的技术文章

每周一次，坚持一年

Algorithm

Description ZigZag Conversion

Solution

/**
 * https://leetcode.com/problems/zigzag-conversion/
 * @param {string} s
 * @param {number} numRows
 * @return {string}
 */
var convert = function(s, numRows) {
    if (numRows == 1) return s;

    // let rows = new Array(numRows);
    var rows = [];
    for (var i = 0; i < numRows; i++) {
        rows[i] = [];
    }

    var curRow = 0;
    var goingDown = false;
    for (var i = 0; i < s.length; i++) {
        // if (!rows[curRow]) rows[curRow] = [];
        rows[curRow].push(s[i]);
        if (curRow === 0 || curRow === numRows - 1) goingDown = !goingDown;
        curRow += goingDown ? 1 : -1;
    }

    var result = '';
    for (var i = 0; i < rows.length; i++) {
        for (var j = 0; j < rows[i].length; j++) {
            result += rows[i][j];
        }
        // result += rows[i].join(''); // 原生的 for 循环更快。
        // result = result.concat(rows[i]); // concat 更慢。。。
    }
    return result;
};


console.log(convert('PAYPALISHIRING', 3), 'PAHNAPLSIIGYIR', convert('PAYPALISHIRING', 3) === 'PAHNAPLSIIGYIR');
console.log(convert('PAYPALISHIRING', 4), 'PINALSIGYAHRPI', convert('PAYPALISHIRING', 4) === 'PINALSIGYAHRPI');
console.log(convert('Apalindromeisaword,phrase,number,orothersequenceofunitsthatcanbereadthesamewayineitherdirection,withgeneralallowancesforadjustmentstopunctuationandworddividers.', 2)
    ===
    "Aaidoeswr,haenme,rtesqecouishtabrateaeaietedrcinwtgnrlloacsoajsmnsoucutoadodiiesplnrmiaodprs,ubroohreunefnttacneedhsmwynihrieto,iheeaalwnefrdutettpntainnwrdvdr."
)

// convert('PAYPALISHIRING', 3);

Review

Exploring EcmaScript Decorators https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841

探索 JS 装饰器

装饰器就是接收一个函数并返回具有附加功能的函数。装饰器为调用高阶函数提供了一种非常简单的语法。

Tip

bee’s knees

出類拔萃的人或事物

https://www.businessweekly.com.tw/article.aspx?id=18435&type=Blog

未完待续…

关于安全的日常操作

2018-11-19T00:00:00+00:00

安全对于我们平时工作中是一件很重要的事情。

因此在日常中我们应该尽可能做好并且规避一些不安全的操作。

密码使用密码管理器

比如说使用 1Password、keychain 这些密码工作。iOS 的 keychain 在 iOS 12 的时候也可以在 App 上直接调取 keychain 中的账号密码，非常方便。keychain 本身就可以生成随机密码。

ssh 使用不同的秘钥

比如公司的 Git 仓库与 GitHub 分别使用不同的 ssh 秘钥

╰─$ ls ~/.ssh
config       id_rsa.github      id_rsa.example

其中 config 为秘钥的配置项，ssh 到不同的服务器时可自动切换为不同的秘钥。

╰─$ cat config
Host *
    ControlPersist yes
    ControlMaster auto
    ControlPath ~/.ssh/master-%r@%h:%p

Host *.example.com
    IdentityFile ~/.ssh/id_rsa.example
    User xxxx@example.com

Host *github.com
    IdentityFile ~/.ssh/id_rsa.github
    User xxxx@qq.com

引用：

Set up iCloud Keychain https://support.apple.com/en-us/HT204085

ARTS

2018-11-18T00:00:00+00:00

ARTS

A (Algotithm) 至少做一个leetcode的算法题
R (Review) 阅读并点评一篇英文的技术文章
T (Tip) 学习一个技术技巧
S (Share) 分享一篇有观点和思考的技术文章

每周一次，坚持一年

Algorithm

Description Palindrome Number

Solution

/**
 * https://leetcode.com/problems/palindrome-number/
 * @param {number} x
 * @return {boolean}
 */
var isPalindrome = function(x) {
    if (x < 0) {
        return false;
    }
    var array = String(x).split('');
    var length = array.length;
    var left = null;
    var right = null;
    for (left = 0, right = length - 1; left < right; left += 1, right -= 1) {
        if (array[left] !== array[right]) {
            return false;
        }
    }
    return true;
};




// var isPalindrome = function(x) {
//     if (x % 10 === 0 && x !== 0) return false;
//     if (x < 0) {
//         return false;
//     }
//     var newNumber = Number(String(x).split('').reverse().join(''));
//     if (x === newNumber) {
//         return true;
//     }
//     return false;
// };

console.log(isPalindrome(121), true);
console.log(isPalindrome(123), false);
console.log(isPalindrome(-121), false);
console.log(isPalindrome(10), false);
console.log(isPalindrome(0), true);

Review

How to Build Amazing Development Teams https://medium.com/s/story/building-amazing-development-teams-ebeca87eb124

如何组建一支优秀的团队

一支优秀的技术团队足以胜任企业中在技术中面临的挑战与困难。建立一支优秀的团队是相互的，管理者需要给 team 里面每个成员以成长空间，团队成员也能尽己所能而成长。雇佣愿意学习的开发。训练、动机、责任心、人是一个优秀团队凝聚的核心。同理，如果我们想要进一个优秀的团队，也应该让自己在这几个方面有所建树。

Tip

vue 的 store 如果太大将会影响页面的性能。这个时候可以这么去处理。

减少 store 的大小。
JSON数据规范化（normalize）。

https://juejin.im/post/5b960fcae51d450e9d645c5f

关于安全的一些日常操作

https://lincolnge.github.io/science/2018/11/19/security.html

ARTS

2018-11-11T00:00:00+00:00

ARTS

A (Algotithm) 至少做一个leetcode的算法题
R (Review) 阅读并点评一篇英文的技术文章
T (Tip) 学习一个技术技巧
S (Share) 分享一篇有观点和思考的技术文章

每周一次，坚持一年

Algorithm

Description https://leetcode.com/problems/string-to-integer-atoi/

Implement atoi which converts a string to an integer.

The function first discards as many whitespace characters as necessary until the first non-whitespace character is found. Then, starting from this character, takes an optional initial plus or minus sign followed by as many numerical digits as possible, and interprets them as a numerical value.

The string can contain additional characters after those that form the integral number, which are ignored and have no effect on the behavior of this function.

If the first sequence of non-whitespace characters in str is not a valid integral number, or if no such sequence exists because either str is empty or it contains only whitespace characters, no conversion is performed.

If no valid conversion could be performed, a zero value is returned.

Note:

Only the space character ' ' is considered as whitespace character.
Assume we are dealing with an environment which could only store integers within the 32-bit signed integer range: [−2^31,  2^31 − 1]. If the numerical value is out of the range of representable values, INT_MAX (2^31 − 1) or INT_MIN (−2^31) is returned.
Example 1:

Input: "42"
Output: 42
Example 2:

Input: "   -42"
Output: -42
Explanation: The first non-whitespace character is '-', which is the minus sign.
             Then take as many numerical digits as possible, which gets 42.
Example 3:

Input: "4193 with words"
Output: 4193
Explanation: Conversion stops at digit '3' as the next character is not a numerical digit.
Example 4:

Input: "words and 987"
Output: 0
Explanation: The first non-whitespace character is 'w', which is not a numerical
             digit or a +/- sign. Therefore no valid conversion could be performed.
Example 5:

Input: "-91283472332"
Output: -2147483648
Explanation: The number "-91283472332" is out of the range of a 32-bit signed integer.
             Thefore INT_MIN (−2^31) is returned.

Solution

/**
 * @param {string} str
 * @return {number}
 * https://leetcode.com/problems/string-to-integer-atoi/
 */
var myAtoi = function(str) {
    var result = parseInt(str, 10);
    if (isNaN(result)) {
        return 0;
    }
    if (result >= Math.pow(2, 31)) {
        return Math.pow(2, 31) - 1;
    } else if (result < -Math.pow(2, 31)) {
        return -Math.pow(2, 31);
    }
    return result;
};

console.log(myAtoi('42'), 42);
console.log(myAtoi('+-42'), 0);
console.log(myAtoi('     -42'), -42);
console.log(myAtoi('4193 with words'), 4193);
console.log(myAtoi('words and 987'), 0);
console.log(myAtoi('-91283472332'), -2147483648);

/**
 * https://segmentfault.com/a/1190000010571914
 * JavaScript 实现 parseInt()
 */

Review

Comparing Flow with TypeScript https://medium.com/the-web-tub/comparing-flow-with-typescript-6a8ff7fd4cbb

这篇文章指在比较 Flow 与 Typescript 的异同。

Flow 和 Typescript 皆是使 JavaScript 可以以静态类型的方式去书写，即可使用静态类型语音的优势。但是 Flow 比 Typescript 更简单，开箱即用、对库/框架/编译器更好的兼容性、它有能力保持 JS 的纯粹。只在项目开头添加 // @flow 即可。

Tip

JS: Array.reverse() vs. for and while loops https://jsperf.com/js-array-reverse-vs-while-loop/66

我们可以从这篇文章获知 JS 的数组颠倒使用 for 循环的 swap half、XOR swap half 效率最高。

css 的 white-space

换行符	空格和 Tab	文本超出容器宽度	-
nomal	忽略	折叠	换行
nowrap	忽略	折叠	不换行
pre	换行	保持原样	不换行
pre-wrap	换行	保持原样	换行
pre-line	换行	折叠	换行

ARTS

2018-11-04T00:00:00+00:00

ARTS

A (Algotithm) 至少做一个leetcode的算法题
R (Review) 阅读并点评一篇英文的技术文章
T (Tip) 学习一个技术技巧
S (Share) 分享一篇有观点和思考的技术文章

每周一次，坚持一年

Algorithm

Description

Given a 32-bit signed integer, reverse digits of an integer.

Example 1:

Input: 123
Output: 321
Example 2:

Input: -123
Output: -321
Example 3:

Input: 120
Output: 21
Note:
Assume we are dealing with an environment which could only store integers within the 32-bit signed integer range: [−2^31,  2^31 − 1]. For the purpose of this problem, assume that your function returns 0 when the reversed integer overflows.

Solution

/**
 * https://leetcode.com/problems/reverse-integer/
 * @param {number} x
 * @return {number}
 */
var reverse = function(x) {
    var result = Math.abs(x);
    symbol = 1;
    var infinityNum = Math.pow(2, 31);
    console.log('infinityNum', infinityNum);
    if (x < 0) {
        symbol = -1;
    }
    var resultValue = Number(String(result).split('').reverse().join('')) * symbol;
    if (resultValue > infinityNum - 1 || resultValue < -infinityNum) {
        resultValue = 0;
    }
    return resultValue;
};


// console.assert(reverse(123), 321);
// console.assert(reverse(-123), -321);
// console.assert(reverse(120), 21);

// console.log(reverse(123), 321);
// console.log(reverse(-123), -321);
// console.log(reverse(120), 21);
// console.log(1534236469, reverse(1534236469));

Review

How to set up a TypeScript project https://medium.freecodecamp.org/how-to-set-up-a-typescript-project-67b427114884

这篇文章指导我们如何搭建一个 React TS 的项目。指导我们选择 ES 的某个版本的原因，诸如浏览器版本、浏览器内核、JS 大小等。之后的安装步骤可直接查看文章。

Tip

TypeScript ESLint Parser https://github.com/eslint/typescript-eslint-parser

typescript-eslint-parser 是一个 Eslint 的解析器，利用 TypeScript ESTree 允许ESLint使用Iint TypeScript源代码。

Eslint vs Tslint

优缺点对比

Eslint 可以继承项目原本的配置项。
Tslint 需要重新配置。
Tslint 对 vue 并不友好。
Eslint 可能无法校验 Tslint 的部分逻辑。

typescript-eslint-parser 是通过编译 TS 到一个 Eslint 可识别的代码，然后再运行 Eslint 规则。所以一些 TS 特有的规则（type/interface 等）全部无法校验，这种代码校验对于 TS 项目来说是不完整的。typescript-eslint-parser 对一部分 ESLint 规则支持性不好

npmrc

2018-08-14T00:00:00+00:00

测试 nrm、npmrc 的优先级

实验

1. 没有设置 nrm。

默认设置 registry 为 https://registry.npmjs.org/

下载的所有包都是通过以上域名获取。

2. nrm use yarn。

设置 registry 为 https://registry.yarnpkg.com/。

看源码可知实际做的事情是

npm.commands.config(['set', 'registry', registry.registry], function (err, data) {
    if (err) return exit(err);
    console.log('                        ');
    var newR = npm.config.get('registry');
    printMsg([
        '', '   Registry has been set to: ' + newR, ''
    ]);
})

即

npm set registry 'https://registry.yarnpkg.com/'

效果为

cat ~/.npmrc
registry=https://registry.yarnpkg.com/

安装结果是从 registry.yarnpkg.com 里面下包。

3. 本地使用 npmrc。

当前项目操作

touch .npmrc

在 npmrc 里面填写，vim .npmrc

registry=https://registry.npm.taobao.org/

安装结果是从 registry.npm.taobao.org 里面下包。

4. 使用本地 npmrc + nrm。

有本地 npmrc 的时候，执行 nrm ls 输出的目录是 npmrc 上设置的目录。

5. 使用本地 npmrc + package-lock.json

这个分两种情况。

直接执行 npm i 将从 package-lock 中获取文件的下载地址。
如果执行的是 npm i <package> 将从 npmrc 中获取下载地址，并更新 package-lock。

6. npm i chai –registry https://registry.yarnpkg.com/

效果与只使用 .npmrc 一致。

总结

.npmrc 的配置文件与 package-lock.json 的配置文件优先级是比较高的。其次才是 nrm 的配置项。

nrm 其实是设置了 global 的 npmrc。项目下的 npmrc 肯定优先级更高一些。

日常-极客时间

2018-06-12T00:00:00+00:00

日常-Git 操作

2018-06-10T00:00:00+00:00

最近想写一些自己的项目，然后在公司锁包 yarn.lock，发现其 resolved 是内网的 npm，考虑到我还不太想把内网的域名发到 GitHub 上，那我就来批量修改一下吧。

首先直接动手用 git filter-branch --tree-filter "sed -i '' 's/first/second/g' filename"，然后报错 sed: filename: No such file or directory。这时候想到 commit 从头往后找，前面几个 commit 肯定没有这个文件。因为这个文件是最近几个 commit 才有的。然后想需要配合 find 来做这个操作。

find ./foldName -name 'xxx' 发现 find 也同样面临这个问题，find: ./foldName: No such file or directory。这样的话只能是找到所有文件然后过滤掉，过滤用 grep，即 find . -name 'yarn.lock' | grep -v 'node_modules'。

整理可得：

$ git filter-branch -f --tree-filter "find . -name 'yarn.lock' | grep -v 'node_modules\|otherFolder' | xargs sed -i '' 's/first/second/g' filename""

桶排序

2018-05-22T00:00:00+00:00

记一次学习桶排序 Algorithm in Javascript Bucket Sort

疑惑：

最大值怎么设置？
使用场景是啥？

通过各种渠道的搜索，发现是使用的人设置了一下最大值。

在这之间了解到一个叫稳定的概念。

稳定（stable、non-stable）：稳定就是两个相等的数。。顺序不会变。

桶排序为啥会是稳定的呢？毕竟没有比较，没有比较就没有不稳定的情况。我理解的不稳定就是因为比较大小，会造成顺序切换，另外就是随机取一个值的时候，无法知道他比较后的位置（比如快排）。

对于不稳定的排序算法，只要举出一个实例，即可说明它的不稳定性；而对于稳定的排序算法，必须对算法进行分析从而得到稳定的特性。需要注意的是，排序算法是否为稳定的是由具体算法决定的，不稳定的算法在某种条件下可以变为稳定的算法，而稳定的算法在某种条件下也可以变为不稳定的算法。

百度百科排序算法稳定性

毕竟稳定不稳定是可以相互切换的。

继续解答桶排的问题。

和算法的同事交流，桂波说：桶排可以设个初始化的桶数，遇到大的放不下的就再增加到那么多个。

桶排的简单理解：就比如说按年龄排序，1~10 岁放一起，11~20 放一起，21~30 放一起；放完第一波后，对 1~10 里面的再继续分为 1 放一起，2 放一起~

所以桶排是很占空间的。

解答：

最大值如果一开始已知就设置，若未知可先设置某个值，之后加桶
知道最大值的情况下，不限制空间。均匀分布的数字数组。

简单的代码实现

function bucketSort (arr) {
  // 假设我们排序的范围为0-10 那么我们准备11个桶来放这些数字
  let buckets = new Array(11).fill(0)
  let newArr = []

  // 装桶
  arr.forEach(val => {
    console.log('val', val)
    buckets[val]++
  })
  console.log('arr', arr)
  console.log('buckets', buckets)

  buckets.forEach((val, index) => {
    console.log('in val, index', val, index);
    for (let i = 1; i <= val; i++) {
      newArr.push(index)
    }
  })

  return newArr
}

console.log(bucketSort([5, 3, 5, 2, 8]))

TODO: 使用场景可能需要补充或调整

to be continue…

References:

git 问题

2018-05-09T00:00:00+00:00

git 操作。。。

merge 出错了怎么办之类的。。。

rebase 出错了解决。。。之类的。。。

push 多了 commit 怎么操作，怎么回退，怎么保存原有 commit，怎么 push，怎么备份（如果没有备份怎么办）。

letv

2017-10-02T00:00:00+00:00

乐视 TV 用起来真是糟心，没有直播的东西，只能通过别的 APP 去看直播。

网上现在搜乐视的技术文章，清一色没有用的内容。

操作及注意事项：

PP 助手、360 助手、豌豆荚这些主流的在手机里面的 APP 可能都没法用，点不了，进入不了安装。
通过多乐市场去安装应用，这个应用还支持手机输入去查找应用。
在搜索框里面找到电视家3.0
目测 iOS 也有类似影院。

touchmove and scroll

2017-09-27T00:00:00+00:00

Rem 自适应页面的布局配置

2017-09-24T00:00:00+00:00

使用 Rem 适配屏幕

rem 是（font size of the root element），是根据网页的跟元素（html）来设置字体大小的。如下：

1
2
3
html {
  font-size: 50px;
}

如果 html 的 fontSize 是固定的，则在不同尺寸的屏幕上可能要么不够放，要么布局上不符合我们的期待。因此我们希望 html 的 fontSize 跟随手机屏幕（即 window.innerWidth）的尺寸变化。

设置 viewport

1
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">

设置 Rem

1
2
3
4
5
6
7
8
9
10
11
12
var designCSSWidth = 375;
var baseFontSize = 50;

var w = window;
var d = document;
var html = d.documentElement;
function setRem() {
  var width = w.innerWidth;
  var size = baseFontSize * width / designCSSWidth;
  html.style.fontSize = size + 'px';
}
setRem();

然后我们发现在部分机型在 WebView 内需要 load 之后才能获取正确 innerWidth，而一开始它只能获得有问题的 innerWidth，这会影响我们的布局。这个 WebView 下有问题，但是其浏览器是没有问题的。

1
2
var on = 'addEventListener';
w[on]('load', setRem, false);

只是如上设置发现，有问题的设备将会闪一下，毕竟 rem 突然变化了一下，简单的做法就是先 display none，好了再 display block。

但是设置 display none，会发现没有问题的设备白屏时间过长。这个不能忍。经测试只有安卓的设备会有问题，iOS 上没有看到问题，因此这些操作可以只在安卓生效。安卓一开始可以拿到一个错误的 innerWidth 然后 inneWidth 很大，通常大于 500，因此可以这么设定。

1
2
if (w.innerWidth > 500 && isAnd) {
}

这样设定后只有有问题的安卓机才会有过长的白屏时间。但我们不能只满足这一点，看是否也能让有问题的安卓机的白屏时间缩短。

首先我们想到用 setTimeout，然后简单测试了一下

1
2
3
4
var time = 100;
setTimeout(function() {

}, time);

经测试，这个 time 的时间可能是几十毫秒，也可能是一百多毫秒，总之这个时间不一定，所以完全可以多次 setTimeout 去解决渲染的问题。每秒 60 帧 1000 / 60。

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
var limit = 10;
var raf = function (cb) {
  setTimeout(function () {
    cb && cb();
  }, 1000 / 60);
}
var isAnd = w.navigator.userAgent.match(/Android/) || true;

function setRemFallback() {
  // 经测试不能保证第一次就拿到正确 innerWidth，所以设置一个延时（即次数限制）。
  limit--;
  if (limit && w.innerWidth > 500) {
    raf && raf(setRemFallback)
  } else {
    setRem();
    d.documentElement.style.display = 'block';
  }
}

if (w.innerWidth > 500 && isAnd) {
  d.documentElement.style.display = 'none';
  /**
   * 部分机型在 WebView 内需要 load 之后才能获取正确 innerWidth。判断标准为其大于 500 的时候。
   * 先隐藏 HTML，拿到正确的 innerWidth 再显示。有问题的机器包括魅族 M1
   */
  if (!raf) {
    w[on]('load', setRemFallback, false);
  } else {
    raf(setRemFallback);
  }
}

到这，其实也已经够用了，但是我们还可以精益求精。我们知道的，setTimeout 的刷新时间并不准确，并且性能也不好。有一个替代品 requestAnimationFrame。

window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器调用指定的函数在下一次重绘之前更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。

简单说 requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。

在这我们仅需要把 raf 这个方法换一下。另外 requestAnimationFrame 可能有兼容性问题，可考虑 webkitRequestAnimationFrame。

1
var raf = w.requestAnimationFrame || w.webkitRequestAnimationFrame;

最终结果为：

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
var designCSSWidth = 375;
var baseFontSize = 50;

var w = window;
var d = document;
var on = 'addEventListener';
var html = d.documentElement;
function setRem() {
  var width = w.innerWidth;
  var size = baseFontSize * width / designCSSWidth;
  html.style.fontSize = size + 'px';
  console.log('done rem', width);
}

var isAnd = w.navigator.userAgent.match(/Android/) || true;
var raf = w.requestAnimationFrame || w.webkitRequestAnimationFrame;
var limit = 10;
function setRemFallback() {
  // 经测试不能保证第一次就拿到正确 innerWidth，所以设置一个延时（即次数限制）。
  limit--;
  if (limit && w.innerWidth > 500) {
    raf && raf(setRemFallback)
  } else {
    setRem();
    d.documentElement.style.display = 'block';
  }
}
if (w.innerWidth > 500 && isAnd) {
  d.documentElement.style.display = 'none';
  /**
   * 部分机型在 WebView 内需要 load 之后才能获取正确 innerWidth。判断标准为其大于 500 的时候。
   * 先隐藏 HTML，拿到正确的 innerWidth 再显示。有问题的机器包括魅族 M1
   */
  if (!raf) {
    w[on]('load', setRemFallback, false);
  } else {
    raf(setRemFallback);
  }
}

setRem();
w[on]('resize', setRem, false);

References:

移动端网页 rem响应式布局最佳实践代码. https://github.com/jieyou/rem_layout
CSS3动画那么强，requestAnimationFrame还有毛线用？. http://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/

Webpack

2017-05-17T00:00:00+00:00

Webpack 介绍

Webpack 是什么？
Webpack 能够解决什么问题？
Webpack 的缺点问题？
迁移成本，如何配置 webpack config。
Webpack 原理、设计理念（待续。。。）
Webpack 优化（待续。。。）
Webpack 插件开发（待续。。。）

介绍 Webpack 之前可以先了解一下前端工程化。

前端工程化

第一阶段：库/框架选型
第二阶段：简单构建优化
第三阶段：JS/CSS模块化开发
第四阶段：组件化开发与资源管理

前端工程化包含

开发规范
模块化开发
组件化开发
组件仓库
性能优化
项目部署
开发流程
开发工具
…
目录结构的制定
编码规范
前后端接口规范
文档规范
组件管理
Git 分支管理
Commit 描述规范
定期 CodeReview
视觉图标规范
…

旧的任务运行工具处理方式：HTML、CSS 和 JavaScript 都是分离的。必须分别对每一项进行管理，并且还要确保所有东西正确地部署到生产环境。

|| || V

即

Web 开发中常用到的静态资源主要有 JavaScript、CSS、图片、Jade 等文件，Webpack 中将静态资源文件称之为模块。Webpack 是一个模块打包工具，其可以兼容多种 js 书写规范，且可以处理模块间的依赖关系，具有更强大的 js 模块化的功能。

Webpack 是什么：

Webpack 一个针对 JavaScript 代码的模块打包工具。—> 个针对所有前端代码的管理工具。

Webpack 为了解决文件依赖管理。

Webpack 特性：

Webpack 具有 requireJs 和 browserify 的功能，但仍有很多自己的新特性：

对 CommonJS 、 AMD 、ES6的语法做了兼容
对 js、css、图片等资源文件都支持打包
串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对 CoffeeScript、ES6 的支持
有独立的配置文件 webpack.config.js
可以将代码切割成不同的 chunk，实现按需加载，降低了初始化时间
支持 SourceUrls 和 SourceMaps，易于调试
具有强大的 Plugin 接口，大多是内部插件，使用起来比较灵活
webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快

Webpack 的两个最核心的设计哲学分别是：

一切皆模块正如js文件可以是一个“模块（module）”一样，其他的（如 css、image 或 html）文件也可视作模块。因此，你可以 require(‘myJSfile.js’) 亦可以 require(‘myCSSfile.css’)。这意味着我们可以将事物（业务）分割成更小的易于管理的片段，从而达到重复利用等的目的。

按需加载传统的模块打包工具（module bundlers）最终将所有的模块编译生成一个庞大的 bundle.js 文件。但是在真实的app里边，“bundle.js”文件可能有 10M 到 15M 之大可能会导致应用一直处于加载中状态。因此 Webpack 使用许多特性来分割代码然后生成多个“bundle”文件，而且异步加载部分代码以实现按需加载。

Webpack 能解决的问题：

模块化引用静态文件，统一管理静态文件（JS、CSS、IMAGES）
编译 ES6 代码、TypeScript 代码
异步加载、按需加载，提取公共代码（CommonsChunkPlugin）
压缩文件 + hash
自动编译 + 浏览器同步刷新（Webpack dev server、Hot Module Replacement、react-hot-loader）
支持使用全局变量 $、React，即不需要每个文件 import jquery
开发模式和生产模式
配置 publicPath，可修改代码中的文件指向 CDN 路径
…

缺点

配置过多，过于复杂。
它使用 bundle 的解决思路在 http/2 的时代可能欠佳。
插件的开发较复杂，通常开发插件的时候得熟读源码。
官网的文档还不是很全。
…

对比其他打包器

Feature	webpack/webpack	jrburke/requirejs	substack/node-browserify	jspm/jspm-cli	rollup/rollup	brunch/brunch
Additional chunks are loaded on demand	yes	yes	no	System.import	no	no
AMD `define`	yes	yes	deamdify	yes	rollup-plugin-amd	yes
AMD `require`	yes	yes	no	yes	no	yes
AMD `require` loads on demand	yes	with manual configuration	no	yes	no	no
CommonJS `exports`	yes	only wrapping in `define`	yes	yes	commonjs-plugin	yes
CommonJS `require`	yes	only wrapping in `define`	yes	yes	commonjs-plugin	yes
CommonJS `require.resolve`	yes	no	no	no	no
Concat in require `require("./fi" + "le")`	yes	no♦	no	no	no
Debugging support	SourceUrl, SourceMaps	not required	SourceMaps	SourceUrl, SourceMaps	SourceUrl, SourceMaps	SourceMaps
Dependencies	19MB / 127 packages	11MB / 118 packages	1.2MB / 1 package	26MB / 131 packages	?MB / 3 packages
ES2015 `import`/`export`	yes (webpack 2)	no	no	yes	yes	yes, via es6 module transpiler
Expressions in require (guided) `require("./templates/" + template)`	yes (all files matching included)	no♦	no	no	no	no
Expressions in require (free) `require(moduleName)`	with manual configuration	no♦	no	no	no
Generate a single bundle	yes	yes♦	yes	yes	yes	yes
Indirect require `var r = require; r("./file")`	yes	no♦	no	no	no
Load each file separate	no	yes	no	yes	no	no
Mangle path names	yes	no	partial	yes	not required (path names are not included in the bundle)	no
Minimizing	uglify	uglify, closure compiler	uglifyify	yes	uglify-plugin	UglifyJS-brunch
Multi pages build with common bundle	with manual configuration	yes	with manual configuration	with bundle arithmetic	no	no
Multiple bundles	yes	with manual configuration	with manual configuration	yes	no	yes
Node.js built-in libs `require("path")`	yes	no	yes	yes	node-resolve-plugin
Other Node.js stuff	process, __dir/filename, global	-	process, __dir/filename, global	process, __dir/filename, global for cjs	global (commonjs-plugin)
Plugins	yes	yes	yes	yes	yes	yes
Preprocessing	loaders, transforms	loaders	transforms	plugin translate	plugin transforms	compilers, optimizers
Replacement for browser	`web_modules`, `.web.js`, package.json field, alias config option	alias option	package.json field, alias option	package.json, alias option	no
Requirable files	file system	web	file system	through plugins	file system or through plugins	file system
Runtime overhead	243B + 20B per module + 4B per dependency	14.7kB + 0B per module + (3B + X) per dependency	415B + 25B per module + (6B + 2X) per dependency	5.5kB for self-executing bundles, 38kB for full loader and polyfill, 0 plain modules, 293B CJS, 139B ES2015 System.register before gzip	none for ES2015 modules (other formats may have)
Watch mode	yes	not required	watchify	not needed in dev	rollup-watch	yes

Webpack 配置

最简单的配置

webpack.config.js

1
2
3
4
5
6
7
8
9
var path = require('path');

module.exports = {
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

详细配置可查看阮一峰老师的 github：https://github.com/ruanyf/webpack-demos

References

Webpack 2 入门教程 https://llp0574.github.io/2016/11/29/getting-started-with-webpack2/
Webpack 2 快速入门 https://github.com/dwqs/blog/issues/46
webpack 入门及实践 https://www.w3ctech.com//topic/1557
前端工程——基础篇 https://github.com/fouber/blog/issues/10
React 技术栈系列教程 http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html

LinkList JavaScript

2017-04-29T00:00:00+00:00

LinkList JavaScript

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
/**
 * 用 JavaScript 定义的一个链表结构。
 * Definition for singly-linked list.
 * function ListNode(val) {
 *     this.val = val;
 *     this.next = null;
 * }
 */
/**
 * @param {ListNode} l1
 * @param {ListNode} l2
 * @return {ListNode}
 */


function ListNode(val) {
  this.val = val;
  this.next = null;
}

/**
 * 链表数据
 * [2, 4, 3]
 * [5, 6, 4]
 */
var l1 = new ListNode(2);
l1.next = new ListNode(4);
l1.next.next = new ListNode(3);

var l2 = new ListNode(5);
l2.next = new ListNode(6);
l2.next.next = new ListNode(4);

TDZ

2017-01-23T00:00:00+00:00

Temporal Dead Zone, TDZ

介绍一个样例

var x = 1;
function foo(x = x) {
	console.log(x);
}
foo();
// Uncaught ReferenceError: x is not defined

以上可以转成为如下代码，便于理解：

var x = 1;
function foo() {
	let x = x;
	console.log(x);
}
foo();

我个人理解为，let 变量没有前置，导致执行到某一行，该行没有定义。

References

https://github.com/Asurvovor/translation/issues/1

git 实践

2017-01-10T00:00:00+00:00

背景

某同学在指定分支上做了修改，但是执行 fetch 的时候并没有认真看 fetch 后的提示（reject）。复盘的时候发现是该同学脑中认为自己本地没有该分支，git fetch 是不会有任何 reject 的可能性，因此并没有认真看 fetch 后的提示。（目前暂无办法解决不看 git 操作后的 message 的问题）该同学是为了解决 PR 与 master 的冲突，但是不记得自己曾改过指定的分支，git fetch 完直接到指定的分支操作 git rebase master。

问题

有一个 dirty commit 并且已经合到了 master。
合到 master 的分支为了解决冲突使用了 git rebase。

图片由子龙提供，感谢子龙。

目标

尽可能让所有相同的 commit 只出现一次。
尽可能使用少的命令。

操作流程

复盘：重新回顾整个流程，看哪个步骤发生了问题，该如何解决。

git 操作

操作 1

$ git merge master # 在正确的分支下使用 git merge master。解决此时放生的所有冲突。（如果在这个时候直接使用 git rebase master，将需要面临很多次 commit 产生的冲突，产生冲突后直接用 git rebase --skip 可能会错过自己期望的代码）
$ git reset --soft HEAD~ # 保留最后修改的冲突代码。
$ git stash
$ git rebase master # 遇到冲突后直接 git rebase --skip（由于该分支下有多个 commit，因此需要执行多次 git rebase --skip）。
$ git stash pop
$ git add .
$ git ci -m 'Add: 添加修改'

操作 2

突然想到一个更简单的方式去处理。

$ git co master
$ git co -b <branch>
$ git cherry-pick <multiple commit> # 直接 cherry-pick 缺的 commit，可多个 commit。

最后解决问题。

Array Like

2016-12-12T00:00:00+00:00

Array Like

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<body>

  <div id='testArrayLike'>
    abc
  </div>
  <br />
  <br />

  <div id='mylog' style='color: red'>

  </div>

<script>
var arg = 'log';
arg = 'assert'; // TODO:
var baseLogFunction = console[arg];
console[arg] = function(){
  baseLogFunction.apply(console, arguments);

  var args = Array.prototype.slice.call(arguments);
  for(var i = 0; i < args.length; i++){
    var node = createLogNode(args[i]);
    document.querySelector("#mylog").appendChild(node);
  }
}

function createLogNode(message){
  var node = document.createElement("div");
  var textNode = document.createTextNode(message);
  node.appendChild(textNode);
  return node;
}

window.onerror = function(message, url, linenumber) {
  console[arg]("JavaScript error: " + message + " on line " +
  linenumber + " for " + url);
}

/*
// Determine if o is an array-like object.
// Strings and functions have numeric length properties, but are
// excluded by the typeof test. In client-side JavaScript, DOM text
// nodes have a numeric length property, and may need to be excluded
// with an additional o.nodeType != 3 test.
function isArrayLike(o) {
  if (o && // o is not null, undefined, etc.
    typeof o === 'object' && // o is an object
    isFinite(o.length) && // o.length is a finite number
    o.length >= 0 && // o.length is non-negative
    o.length===Math.floor(o.length) && // o.length is an integer
    o.length < 4294967296) // o.length < 2^32
    return true; // Then o is array-like
  else
    return false; // Otherwise it is not
}
*/


function isArrayLike(o) {
  return o
    && typeof o === 'object'
    && isFinite(o.length)
    && o.length >= 0
    && o.length === Math.floor(o.length)
    && o.length < 4294967296; // 4294967296 means 2^32;
}

function testArguments () {
  console.log(arguments, Array.isArray(arguments), arguments.length, Array.isArray(arguments[3]));
  console.log('arguments', isArrayLike(arguments));
}

testArguments(2, 3, 4, [1, 2, 3]);

var a1 = {a: 1, b: 2, length: 4294967296};
var a2 = {a: 1, b: 2, length: Math.pow(2, 32)};
var a3 = {a: 1, b: 2, length: 1.1};
var a4 = {a: 1, b: 2, length: '3'};
var a5 = '123';
var a6 = {a: 1, b: 2, length: Infinity};
var a7 = {a: 1, b: 2, length: 30};

var isShowError = false;
isShowError = true; // TODO:
console.assert(isArrayLike(document.querySelector('#testArrayLike')) === isShowError, 'element testArrayLike', document.querySelector('#testArrayLike'));
console.assert(isArrayLike(document.querySelectorAll('#testArrayLike')), 'element all testArrayLike', document.querySelectorAll('#testArrayLike'));
console.assert(isArrayLike(a1) === isShowError, '4294967296 a1', a1);
console.assert(isArrayLike(a2) === isShowError, 'Math.pow(2, 32) a2', a2);
console.assert(isArrayLike(a3) === isShowError, 'a3', a3);
console.assert(isArrayLike(a4) === isShowError, 'a4', a4);
console.assert(isArrayLike(a5) === isShowError, 'a5 String', a5);
console.assert(isArrayLike(a6) === isShowError, 'a6', a6);
console.assert(isArrayLike(a7), 'a7', a7);

</script>
</body>
</html>

ES6（二）

2016-08-09T00:00:00+00:00

箭头函数还有一个功能，就是可以很方便地改写λ演算。

// λ演算的写法
fix = λf.(λx.f(λv.x(x)(v)))(λx.f(λv.x(x)(v)))

// ES6的写法
var fix = f => (x => f(v => x(x)(v)))
               (x => f(v => x(x)(v)));

函数绑定

foo::bar;
// 等同于
bar.bind(foo);

foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);

const hasOwnProperty = Object.prototype.hasOwnProperty;
function hasOwn(obj, key) {
  return obj::hasOwnProperty(key);
}

尾调用

“尾调用优化”（Tail call optimization），即只保留内层函数的调用帧

尾递归

递归非常耗费内存，因为需要同时保存成千上百个调用帧，很容易发生“栈溢出”错误（stack overflow）。但对于尾递归来说，由于只存在一个调用帧，所以永远不会发生“栈溢出”错误。

function Fibonacci (n) {
  if ( n <= 1 ) {return 1};

  return Fibonacci(n - 1) + Fibonacci(n - 2);
}

Fibonacci(10); // 89
// Fibonacci(100)
// Fibonacci(500)
// 堆栈溢出了

改成

function Fibonacci2 (n , ac1 = 1 , ac2 = 1) {
  if( n <= 1 ) {return ac2};

  return Fibonacci2 (n - 1, ac2, ac1 + ac2);
}

Fibonacci2(100) // 573147844013817200000
Fibonacci2(1000) // 7.0330367711422765e+208
Fibonacci2(10000) // Infinity

即可。

重构（一）

2016-07-06T00:00:00+00:00

第一步写测试

好的测试是重构的根本。

代码块越小，代码的功能就愈容易管理。

这本书写于 1999 年。

好的代码应该清楚表达出自己的功能。

函数应该放在它所使用的数据的所属对象内。

减少临时变量，它没啥意义，至于性能代价，你应该在一个地方统一去处理。为此还可以多写一些循环，就是循环里面的临时变量也抽出来。

抽离代码，把相关性的放一起。

重构的节奏：测试、小修改、测试、小修改……

重构：对软件内部结构的一种调整，目的是在不改变软件可观察行为的前提下，提高其可理解性，降低其修改成本。

重构改进软件设计、重构使软件更容易理解、重构帮助找到 bug、重构提高编程速度。

我不是个伟大的程序员，我只是个有着优秀习惯的好程序员。

重构应该是随时随地进行。

你之所以重构，是因为你想做别的什么事，而重构可以帮助你把这些事做好。

事不过三，三则重构。

结对编程重构，代码复审重构，一对一。

容易阅读、所有逻辑都只在唯一地点指定、新的改动不会危机现有行为、尽可能简单表达条件语句。

重写代码比重构简单的时候可以考虑就重写了。现有代码各种 bug，那就更可以重写了。

重构可以提高生产力的。

事先设计足够合理的方案，然后慢慢重构。

坏味道：duplicated code 1. 同一个类的两个函数含有相同的表达式。2. 两个互为兄弟的子类内含相同表达式。

说明写进一个独立函数种，以用途命名。关键在于函数做什么，如何做。

讲总是一起变化的东西放在一块儿。

当你觉得需要撰写注释时，请先尝试重构，试着让所有注释都变得多余。注释可以用来记述将来的打算，标记你并无十足的把握，还可以记录为什么做某事。

测试是可以提高开发效率的。

一套测试就是一个强大的 bug 侦测器，能够大大缩减查找 bug 所需要的时间。

用单元测试来暴露 bug。

测试你最担心出错的部分，这样你就能从测试工作中得到最大的利益。

编写未臻完善的测试并实际运行，好过对完美测试的无尽等待。

边界条件的测试，对 read 而言是第一个字符、最后一个字符和倒数第二个字符。

花合理时间抓出大多数 bug 好过穷尽一生抓出所有 bug。

重构列表：重构词汇表，简短概要，动机，做法，范例。

Review

2016-07-05T00:00:00+00:00

岁月如梭。

第二季度读的书并不多，很多书也并没有读完。

《鱼羊野史（1-4）册》只读了一半。《How Google works》只读了 89%。

《小王子》	46分	36687字
《西游日记》	3时12分	101847字
《悟空传》	4时44分	132049字
《霍比特人》	4时36分	180808字

###　继续 Review。

软素质有所提升，敢去交流，敢去玩欢乐谷的恐怖的云霄飞车。
继续缺钱。
一直在健身。Keep 的记录：累计训练 21 天，完成训练 27 次，累计消耗 4227 千卡，连续训练最大时间为 12 天。
参加了公司舞蹈兴趣小组，去上课了，但是仍缺乏课后训练。
看了书，还需要看更多。
对旅游不太感兴趣，对旅游的理解是旅游就是为了放松，如果我只家就挺放松的，可以在家；如果需要出行去海边才能放松，那就去海边，去晒太阳。

任重道远。

to be continue…

why post data choose json not form

2016-06-09T00:00:00+00:00

JSON 传输是带类型的，你说的传统的POST是Content-Type:application/x-www-form-urlencoded，就表示虽然也按键/值传递了，但确实字符串，本来数据该有的类型被忽略了。 JSON 类型的数据可以比较好的支持嵌套的数据格式，这种数据格式在后端可以和文档数据库（比如 mongodb）的存储结构直接对应；在前端可以和 js 的数据对象直接对应。 https://segmentfault.com/q/1010000003015987

浏览器中的 key=value&key=value 是拼接在 url 上然后传递给 server 的，别说用的是POST 请求，其实和 GET 没啥区别。虽然都能解决问题，但有优劣之分。 1.用 KV 连接 URL，使得 URL 比较丑陋。 2.用 KV 连接 URL，如果有敏感信息，存在安全问题。 3.用 KV 连接 URL，长度有限制。如果用 JSON，可以使用 request body 发送数据，就回避了第一点第三点，第二点相对来说要好点。 JSON 格式的数据现在比较通用，各种语言支持性都比较好。

四种常见的 POST 提交数据方式 https://imququ.com/post/four-ways-to-post-data-in-http.html

Git 回到未来

2016-05-25T00:00:00+00:00

git rebase

修改 commit 的顺序、内容，修改历史。

$ git rebase -i HEAD~5

pick 3d60303 Update content ponctuation$
pick 17aa86b Add copywriter style and update about.$
pick 27729ba Update style guide$
pick 3f90bbf Update css and about$
pick 86a43d2 add draft$
$
# Rebase b2811ee..86a43d2 onto b2811ee (5 command(s))$
#$
# Commands:$
# p, pick = use commit$
# r, reword = use commit, but edit the commit message$
# e, edit = use commit, but stop for amending$
# s, squash = use commit, but meld into previous commit$
# f, fixup = like "squash", but discard this commit's log message$
# x, exec = run command (the rest of the line) using shell$
# d, drop = remove commit$
#$
# These lines can be re-ordered; they are executed from top to bottom.$
#$
# If you remove a line here THAT COMMIT WILL BE LOST.$
#$
22  # However, if you remove everything, the rebase will be aborted.$
#$
# Note that empty commits are commented out$

$ git rebase -i <commit> 这个命令就是列出到指定 commit 的所有 commit，然后我们可以对这些 commit 进行操作，比如说删掉某几个 commit、合并某几个、调换某几个 commit 的顺序。

原本我们的 git flow 是：

$ git log --oneline --graph --decorate --all

* ed4c919 add draft
*   f105e3d Merge pull request #11 from lincolnge/release
|\
| * 3f90bbf Update css and about
|/
* 27729ba Update style guide
* 17aa86b Add copywriter style and update about.
* 3d60303 Update content ponctuation

执行 $ git rebase -i HEAD~5，没有进行任何操作，就退出，执行 $ git log --oneline --graph --decorate --all 可以看到，现在我们的 git flow 是：

* f423ed9 (HEAD -> test) add draft
| * 79bdd26 (origin/master, origin/HEAD, master) add post git back to the future
| * ed4c919 add draft
| *   f105e3d Merge pull request #11 from lincolnge/release
| |\
| |/
|/|
* | 3f90bbf Update css and about
|/
* 27729ba Update style guide
* 17aa86b Add copywriter style and update about.
* 3d60303 Update content ponctuation

我们可以认为 git rebase 操作把我们的 commit 给捋平了。就是当前 branch 的分支变成这样了。（$ git log --oneline --graph --decorate，去掉远程的 git flow，可以看得更清晰一些。）

* f423ed9 (HEAD -> test) add draft
* 3f90bbf Update css and about
* 27729ba Update style guide
* 17aa86b Add copywriter style and update about.
* 3d60303 Update content ponctuation

原本那个 merge 操作产生的 commit 被删掉了。

这里可以插一段，解决冲突。当我们发完 PR 的时候，产生冲突了，这个时候要在本地解决这个冲突，我们可以使用 git rebase 或 git merge 去解决冲突，区别就是 git merge 会多产生一个 commit，然后使用 git rebase 会更改你这个 PR 里所有 commit 的 hash 值。然后当你发现你解决冲突的时所做的操作有问题时，git merge 更容易进行回溯的操作，直接 git reset 即可。

# Commands:$
# p, pick = use commit$
# r, reword = use commit, but edit the commit message$
# e, edit = use commit, but stop for amending$
# s, squash = use commit, but meld into previous commit$
# f, fixup = like "squash", but discard this commit's log message$
# x, exec = run command (the rest of the line) using shell$
# d, drop = remove commit$

看看我们的 rebase -i 里面的有的操作。默认都是 pick。

pick 3d60303 Update content ponctuation$
pick 17aa86b Add copywriter style and update about.$
pick 27729ba Update style guide$
pick 3f90bbf Update css and about$
pick 86a43d2 add draft$

比如把第二个 pick 改成 r，

pick 3d60303 Update content ponctuation$
r 17aa86b Add copywriter style and update about.$
pick 27729ba Update style guide$
pick 3f90bbf Update css and about$
pick 86a43d2 add draft$

保存并退出，发现我们到了 Add copywriter style and update about. 这个状态的时间点。我们可以对这个 commit 的 comment 进行操作，更改这个 commit comment。

 NORMAL ▶▶ .git/rebase-merge/git-rebase-todo[+]                                                                                      ◀ gitrebase ◀ utf-8[unix] ◀   8% ¶   2:  2  ◀
".git/rebase-merge/git-rebase-todo" 24L, 842C [w]
Rebasing (2/5)
Add copywriter style and update about, change cimmit comment.$
$
# Please enter the commit message for your changes. Lines starting$
# with '#' will be ignored, and an empty message aborts the commit.$
#$
# Author:    lincolnge <326684793@qq.com>$
# Date:      Sat May 21 22:06:21 2016 +0800$
#$
# interactive rebase in progress; onto b2811ee$
# Last commands done (2 commands done):$
#    pick 3d60303 Update content ponctuation$
#    r e18bd53 Add copywriter style and update about, change cimmit comment.$
# Next commands to do (3 remaining commands):$
#    pick e256546 Update style guide$
#    pick 69c9c89 Update css and about$
# You are currently editing a commit while rebasing branch 'test' on 'b2811ee'.$
#$
# Changes to be committed:$
#»——————new file:   _posts/2016-05-21-copywriting-style-guid.md$
#»——————modified:   about.md$
#$

对 commit comment 修改并保存，保存完后，发现我们又重新回到了现在。重新执行 $ git log --oneline --graph --decorate，我们会看到我们的 commit comment 变了：

* 5c952ba (HEAD -> test) add draft
* 0a8c12c Update css and about
* 2dc468e Update style guide
* 8f265f0 Add copywriter style and update about, change cimmit comment.
* 3d60303 Update content ponctuation

这就是我们对过去进行了矫正，然后影响了我们的未来。

# r, reword = use commit, but edit the commit message$
# e, edit = use commit, but stop for amending$
# s, squash = use commit, but meld into previous commit$
# f, fixup = like "squash", but discard this commit's log message$
# x, exec = run command (the rest of the line) using shell$
# d, drop = remove commit$

看一下我们剩下的还有什么命令，edit、squash、fixup、exec、drop。顾名思义，edit 就是回到我们过去的那个时间点，然后对当时的 commit 进行修改，你可以直接在那个 commit 时间下添加新的 commit 或者你做你想做的任何一件事，结束后就执行 git rebase --continue 回到未来。

在 edit 状态下，我们同样可以执行 git rebase --edit-todo 看未来的 commit 或者对未来的 commit 执行类似 edit、squash、fixup、exec、drop 操作。

squash 就是把指定的 commit 与它之前的 commit 合并，比如说你写了很多 fix bug、fix bug 的 commit，可以用这个 squash 统一变成一个 commit。
fixup 与 squash 类似，但是它放弃了自己的部分权利，就是修改 commit comment 的信息。直接就合到它之前的 commit 了。
drop 放弃这个 commit
exec 也是一个很有趣的命令，它能让你到某个过去，然后执行指定的命令。

如下：

pick 3d60303 Update content ponctuation$
exec npm run test
pick 17aa86b Add copywriter style and update about.$
exec npm run test
pick 27729ba Update style guide$
exec npm run test
pick 3f90bbf Update css and about$
exec npm run test
pick 86a43d2 add draft$

友情提示，我们在解决冲突的时候有个命令叫 $ git rebase --skip，可以认为是去掉冲突的代码，也就是和遵从 git rebase ，branch0 的那个分支。

git cherry-pick

这个命令相对于 git rebase 来说，简单得多了，它就是把某个 commit 提取出来，放置到当前 branch 的 HEAD 上。

$ git cherry-pick 27729ba 17aa86b 3d60303 b2811ee f891ff0 7d3e6ae 7256dc9 30cb9d5 d9c90e4

[test 1de481e] Update style guide
Author: lincolnge <326684793@qq.com>
Date: Sat May 21 22:07:37 2016 +0800
1 file changed, 4 insertions(+)
[test a5b1c9b] Add copywriter style and update about.
Author: lincolnge <326684793@qq.com>
Date: Sat May 21 22:06:21 2016 +0800
2 files changed, 23 insertions(+), 2 deletions(-)
create mode 100644 _posts/2016-05-21-copywriting-style-guid.md
error: could not apply 3d60303... Update content ponctuation
hint: after resolving the conflicts, mark the corrected paths
hint: with 'git add <paths>' or 'git rm <paths>'
hint: and commit the result with 'git commit'

遇到冲突（conflict），

hint: after resolving the conflicts, mark the corrected paths
hint: with 'git add <paths>' or 'git rm <paths>'
hint: and commit the result with 'git commit'

这三句就是冲突的意思了。解决一下冲突，然后执行 $ git cherry-pick --continue，不像 git rebase，git cherry-pick 没有 –skip 方法。和 rebase 一样可以执行 git cherry-pick --abort 终止命令。

拓展与 git rebase & git merge 的联合使用。

我们可以测试一下当我们 cherry-pick 某个分支的某个 commit 之后，重新去合对应的分支，是否会产生冲突。

$ git co -b test2

$ git log --oneline --graph --decorate
* ed4c919 (HEAD -> test, master) add draft
*   f105e3d Merge pull request #11 from lincolnge/release
|\
| * 3f90bbf Update css and about
|/
* 27729ba Update style guide
* 17aa86b Add copywriter style and update about.
* 3d60303 Update content ponctuation

看到我们的树状结构是这样的。

$ git reset --hard HEAD~3
HEAD is now at 17aa86b Add copywriter style and update about.

$ git log --oneline --graph --decorate
* 17aa86b (HEAD -> test) Add copywriter style and update about.
* 3d60303 Update content ponctuation
* b2811ee Update post content
* f891ff0 Update post title
* 7d3e6ae Update post title

$ git cherry-pick ed4c919
[test eeadbc2] add draft
 Author: wanggengzhou <326684793@qq.com>
 Date: Sat Oct 3 15:01:24 2015 0800
 3 files changed, 978 insertions()
 create mode 100644 _posts/2015-06-09-web.md
 create mode 100644 _posts/reading/2015-06-24-the-art-of-speak.md
 create mode 100644 _posts/reading/2015-08-23-tan-xiu-yang.md

$ git log --oneline --graph --decorate
* eeadbc2 (HEAD -> test) add draft
| * ed4c919 (master) add draft
| *   f105e3d Merge pull request #11 from lincolnge/release
| |\
| | * 3f90bbf Update css and about
| |/
| * 27729ba Update style guide
|/
* 17aa86b Add copywriter style and update about.
* 3d60303 Update content ponctuation

看到我们这个时候的状态，我们可以选择 git merge 或 git rebase master 分支。

$ git co -b test2

checkout 一个新的分支，test 用来执行 git rebase，test2 用来执行 git merge。

$ git merge master

*   395d3bd (HEAD -> test2) Merge branch 'master' into test2
|\
| * ed4c919 (master) add draft
| *   f105e3d Merge pull request #11 from lincolnge/release
| |\
| | * 3f90bbf Update css and about
| |/
| * 27729ba Update style guide
* | eeadbc2 (test) add draft
|/
* 17aa86b Add copywriter style and update about.

$ git rebase master

* ed4c919 (HEAD -> test, master) add draft
*   f105e3d Merge pull request #11 from lincolnge/release
|\
| * 3f90bbf Update css and about
|/
* 27729ba Update style guide
* 17aa86b Add copywriter style and update about.
* 3d60303 Update content ponctuation
* b2811ee Update post content

我们可以发现执行完 rebase 得到的结果，与 master 的结果是一样的。结论：rebase 是个神奇的命令。使用 cherry-pick 不会产生的冲突。

git filter-branch

git filter-branch 这个命令非常强大，可以批量改写历史，当前 branch 中所有的 commit 的历史或者所有分支，可以选择适用的范围。

批量删除指定的 filename 文件：

$ git filter-branch --tree-filter 'rm -f filename' -- --all

例如：

$ git filter-branch --tree-filter 'rm -f test' -- --all

Cannot rewrite branches: You have unstaged changes.

当然不能有修改，可以先执行 $ git stash 命令。

$ git filter-branch --tree-filter 'rm -f test' -- --all

Cannot create a new backup.
A previous backup already exists in refs/original/
Force overwriting the backup with -f

出现这一句说明之前曾经执行过 git filter-branch，然后在 refs/original/ 有一个备份，这个时候只要删掉那个备份即可，删除备份命令为 git update-ref -d refs/original/refs/heads/master，或执行 $ git filter-branch -f --tree-filter -f 'rm -f test' -- --all。

为了避免因操作错误造 repo 损坏，git 会在 filter-branch 操作实际改写历史时，自动将原 refs 备份到 refs/original/ 下。

$ git filter-branch -f --tree-filter 'rm -f test' -- --all

Rewrite 283f0899973f574fd879f565b69da2705dc3ede7 (406/412) (24 seconds passed, remaining 0 predicted)
WARNING: Ref 'refs/heads/master' is unchanged
WARNING: Ref 'refs/heads/release' is unchanged
Ref 'refs/heads/test' was rewritten
Ref 'refs/heads/test2' was rewritten
Ref 'refs/heads/test3' was rewritten
Ref 'refs/heads/test4' was rewritten
Ref 'refs/heads/test5' was rewritten
Ref 'refs/heads/test6' was rewritten
WARNING: Ref 'refs/remotes/origin/master' is unchanged
WARNING: Ref 'refs/remotes/origin/master' is unchanged
WARNING: Ref 'refs/remotes/origin/release' is unchanged
WARNING: Ref 'refs/stash' is unchanged

看看改了什么 $ git status：

$ git st

On branch master
Your branch is ahead of 'origin/master' by 2 commits.
  (use "git push" to publish your local commits)
nothing to commit, working directory clean

看看 .git/refs/original/ 里有啥：

$ l .git/refs/original/refs/heads/

total 24K
drwxr-xr-x 8 wanggengzhou staff 272 May 30 00:12 ./
drwxr-xr-x 3 wanggengzhou staff 102 May 30 00:09 ../
-rw-r--r-- 1 wanggengzhou staff  41 May 30 00:11 test
-rw-r--r-- 1 wanggengzhou staff  41 May 30 00:11 test2
-rw-r--r-- 1 wanggengzhou staff  41 May 30 00:11 test3
-rw-r--r-- 1 wanggengzhou staff  41 May 30 00:11 test4
-rw-r--r-- 1 wanggengzhou staff  41 May 30 00:12 test5
-rw-r--r-- 1 wanggengzhou staff  41 May 30 00:12 test6

$ cat .git/refs/original/refs/heads/test
a1029f5cce896f6d65dfbc5edfcf3487459aad3b

refs/original/ 里保存的就是 hash 值。其他命令介绍。

更改历史提交中某一提交者的姓名及邮件地址。

$ git filter-branch --commit-filter '
      if [ "$GIT_AUTHOR_NAME" = "WangGengZhou" ]; then
          GIT_AUTHOR_NAME="lincolnge"
          GIT_AUTHOR_EMAIL="326684793@qq.com"
      fi
      git commit-tree "$@";
      ' HEAD

Reference:

Git Documentation. https://git-scm.com/docs/git-rebase
Git Documentation. https://git-scm.com/docs/git-cherry-pick
Git Documentation. https://git-scm.com/docs/git-filter-branch
GotGit. http://www.worldhello.net/gotgit/06-migrate/050-git-to-git.html
loveky的一亩三分地. http://loveky2012.blogspot.com/2012/08/git-command-git-filter-branch.html

书写规范

2016-05-21T00:00:00+00:00

http://open.leancloud.cn/copywriting-style-guide.html

中文、英文、数字混合时空格的使用

英文与非标点的中文之间需要有一个空格，如「使用 LeanCloud 开发移动应用」而不是「使用LeanCloud开发移动应用」。1 数字与非标点的中文之间需要有一个空格，如「我们发布了 5 个产品」而不是「我们发布了5个产品」。尽可能使用中文数词，特别是当前后都是中文时。上面的例子写为「我们发布了五个产品」会更好。数字与单位之间需要有一个空格，如「5 GB」而不是「5GB」。注意特殊名词的大小写：Android、iOS、iPhone、Google、Apple，无论是否在句首都应该以同样的方式写。在官方文案中尽量使用中文，避免中英文混合的情况。例如「app」一般应写为「应用」或「移动应用」。品牌、产品名、人名、地名等特殊名词，如果来自英文，请使用英文以避免在不同译法间选择。

每日三省吾身，早上吃什么，中午吃什么，晚上吃什么

2016-05-18T00:00:00+00:00

写了那么多语言了，面向对象和结构化编程都理解了吗？各种语言的面向对象的继承有什么不一样呢？

像 JavaScript 有 4 种继承方式，各有千秋，那可有什么适用环境吗？

写代码没有用面向对象的特性，是因为没有对象吗？

有本书就挺有用的了，叫《重构》，看了吗，这是讲什么的呢？

语言间有什么优缺点，这个语言适合解决什么样的问题？

其实博客，如果数据量达到几千万，甚至上亿，那这个项目就是大项目了。怎么做优化呢，怎么才能承担这样的负载呢？

什么 Spark，React Native，都是解决什么问题呢？

vue 和 AngularJS 是异曲同工的，分别解决什么问题呢？

Weex 还是 HTML5，并不是 Native，那么在性能上，是否可以和真的 Native 比较呢？

React Native 主要是为了解决什么问题呢？（多端用同一套代码）Weex 主要是解决什么问题呢？

你学习某个技术可以让你增加你对技术深度上的理解吗？

学那么多东西，可是本质的东西都没有学，都没有深入，会不会让大家觉得自己浅尝辄止，遇到困难就退缩呢？

运维需要自动化部署，Shell 命令都熟悉了吗？

遇到服务器崩溃，怎么解决呢？

未完待续…

学一个技术，没有学到精通的话，其实是没有什么意义的，要达到半吊子太容易了，我看本书，花几天，我就能学会一种语言啦。精通：熟练掌握源码，掌握知识体系和生态环境。对相关技术发展有前瞻性认识，能够颠覆或者引领发展潮流。

严老师说：最近的理解是，简单的去写 Node、PHP、Java 并没有真的好处。另外前端方面，好的系统，如果用Backbone 写的，并不需要改成 React。前一段时间，本来想写一本集大成的文章，后来内容越来越多，再后来，写不下去了，思维越来越混乱，但是先把东西发表了出来。很多地方有错别字，还有语病，组织上也不好，要等我再想清楚以后，重新整理一篇。前端这一块儿，因为”不教真的“。市面上那些老师，自己都没有学到真谛，他们讲的话自然也不能算真东西。追本溯源我觉得要从优秀的后端那边学。优秀的后端其实比较多，找好的架构师跟着学。

Unicode

2016-05-07T00:00:00+00:00

Unicode

Unicode 是国际组织制定的可以容纳世界上所有文字和符号的字符编码方案

Unicode

ASCII 码

ASCII（American Standard Code for Information Interchange，美国标准信息交换代码）。

二进制（bit）有 0、1 两种状态。八个是一个字节（byte），有 256 种状态。

常用对照表

UTF

UTF，是 Unicode Transformation Format 的缩写，意为 Unicode 转换格式。

UTF-8（变长的编码方式）

UTF-8（8-bit Unicode Transformation Format）是一种针对 Unicode 的可变长度字符编码。

UTF-8的编码规则很简单，只有二条：

1）对于单字节的符号，字节的第一位设为 0，后面 7 位为这个符号的 unicode 码。因此对于英语字母，UTF-8 编码和 ASCII 码是相同的。
2）对于 n 字节的符号（n>1），第一个字节的前 n 位都设为 1，第 n+1 位设为 0，后面字节的前两位一律设为 10。剩下的没有提及的二进制位，全部为这个符号的 unicode 码。

UTF-8 编码规则：

Unicode 符号范围 | UTF-8 编码方式
(十六进制) | （二进制）
--------------------+---------------------------------------------
0000 0000-0000 007F | 0xxxxxxx | 7
0000 0080-0000 07FF | 110xxxxx 10xxxxxx | 11
0000 0800-0000 FFFF | 1110xxxx 10xxxxxx 10xxxxxx | 16 0x10000
0001 0000-0010 FFFF | 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx | 21 0x200000

JavaScript 下的操作：

'严'.charCodeAt(0).toString(16) // "4e25" 100111000100101
encodeURI('严') // "%E4%B8%A5" 111001001011100010100101

01234567 01234567 01234567	01234567 01234567
11100100 10111000 10100101	1001110 00100101

即，unicode 不够 16 位的，前面补 0。因为这个「严」在 FFFF 这个范围内，选第三个，1110xxxx 10xxxxxx 10xxxxxx 可以用来接受 16 位的值。

| 1110 0100 | 10 1110 00 | 10 100101 |

Others

UTF-16（字符用两个字节或四个字节表示）和UTF-32（字符用四个字节表示）。

ES6

说明：

ES6 提供了 codePointAt、String.fromCodePoint 方法。
可以用 for…of 正确打印。

ES6 Unicode 详细介绍：

JavaScript 允许采用 \uxxxx 形式表示一个字符，其中“xxxx”表示字符的码点。

"\uD842\uDFB7"
// "𠮷"

"\u20BB7"
// " 7"

但是，这种表示法只限于 \u0000——\uFFFF 之间的字符，超出的要用双字节。

ES6 可以

"\u{20BB7}"
// "𠮷"

"\u{41}\u{42}\u{43}"
// "ABC"

let hello = 123;
hell\u{6F} // 123

'\u{1F680}' === '\uD83D\uDE80'
// true

JavaScript 共有 6 种方法可以表示一个字符

'\z' === 'z'  // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

汉字“𠮷”的码点是0x20BB7，UTF-16编码为0xD842 0xDFB7（十进制为55362 57271） ES6提供了codePointAt方法，能够正确处理4个字节储存的字符，返回一个字符的码点。

var s = '𠮷a';

s.codePointAt(0) // 134071
s.codePointAt(1) // 57271

s.charCodeAt(2) // 97

JavaScript将“𠮷a”视为三个字符，codePointAt方法在第一个字符上，正确地识别了“𠮷”，返回了它的十进制码点134071（即十六进制的20BB7）。在第二个字符（即“𠮷”的后两个字节）和第三个字符“a”上，codePointAt方法的结果与charCodeAt方法相同。codePointAt参数不正确，这时可以用for...of循环。

var s = '𠮷a';
for (let ch of s) {
  console.log('unicode', ch.codePointAt(0).toString(16));
  console.log('string', ch);
}
// unicode 20bb7
// string 𠮷
// unicode 61
// string a

ES5提供String.fromCharCode不能识别 32 位的 UTF-16 字符。溢出，最高位被舍弃了。

String.fromCharCode(0x20BB7)
// "ஷ"

ES6提供了String.fromCodePoint方法，可以识别 0xFFFF 的字符。正好与codePointAt方法相反。

String.fromCodePoint(0x20BB7)
// "𠮷"
String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'
// true

References

阮一峰《ECMAScript 6 入门》http://es6.ruanyifeng.com/#docs/string
阮一峰《字符编码笔记：ASCII，Unicode和UTF-8》http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html
阮一峰《Unicode与JavaScript详解》 http://www.ruanyifeng.com/blog/2014/12/unicode.html

npm 管理

2016-05-05T00:00:00+00:00

npm

$ npm install <packageName> --force # 强制安装
$ npm update <packageName> # 更新
$ npm install -g # 全局安装
$ npm help <command> # 可查看某条命令的详细帮助
$ npm ls <packageName> # 查看特定package的信息
$ npm info <packageName> # 输出的信息非常详尽，包括作者、版本、依赖等。
$ npm search <packageName> # 搜索

使用 npm shrinkwrap 来管理项目依赖

作用：可以让 node_modules 里面文件的依赖关系就按锁那样去依赖，哪个包里面版本是什么，就装对应的版本。执行命令将产生 npm-shrinkwrap.json 文件，与 Ruby 的 Gemfile 类似。

目的：npm 2 与 npm 3 安装同一个包结果不太一样，npm 3 会尽量平铺（官方说法是为了解决 windows 包目录太深的问题，然后我就好奇为啥用 windows 开发 node 相关的应用了），而 npm 2 包的依赖是按照层级关系去处理的。

当然我们可以用 npm dedupe 从

a
+-- b <-- depends on c@1.0.x
|   `-- c@1.0.3
`-- d <-- depends on c@~1.0.9
    `-- c@1.0.10

变成

a
+-- b
+-- d
`-- c@1.0.10

shrinkwrap 命令：

$ npm shrinkwrap # 可以锁住安装的包，安装的依赖目录。

.npmrc

为了管理 npm config。

…

npm run scripts

为了方便统一用 npm 运行。

…

nvm

使用 nvm use 如果当前目录下有 .nvmrc 文件，将改变当前的 shell 使用的 node 版本。

.nvmrc 内容如：

4.2.6

在 .zshrc 或 .bashrc 文件里面可以写一段 shell 命令，跳转到某个目录下的时候，可以顺便切换当前目录下的 node 版本。.rvmrc 是可以自动做到切换目录就更改了 rails 的版本，但 .nvmrc 做不到，所以以下为 hack 的内容：

# nvm: 管理 node 版本
export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh
# Calling nvm use automatically in a directory with a .nvmrc file
autoload -U add-zsh-hook
load-nvmrc() {
  if [[ -f .nvmrc && -r .nvmrc ]]; then
    nvm use
  fi
}
add-zsh-hook chpwd load-nvmrc # When using cd
load-nvmrc # when using command-d which is opening a new window

References

美团点评技术团队《使用 npm shrinkwrap 来管理项目依赖》http://tech.meituan.com/npm-shrinkwrap.html
InfoQ《如何使用NPM来管理你的Node.js依赖》http://www.infoq.com/cn/articles/msh-using-npm-manage-node.js-dependence

《师傅》观后感

2016-05-02T00:00:00+00:00

https://movie.douban.com/review/7877003/

2016.05.02

这是一个腐败的江湖，江湖烂了，人也烂了，像一潭死水。

迂腐的规矩是这个江湖赖以生存的屏障，也是这个江湖没落的原因之一，当然主要原因仍然是时代，时代不在拳法，则拳法也渐消亡，优秀的人才都投身于其他行业去了呢。

老师不教真的，一生只真传两人，算得了什么老师。学生也没有什么素质，说谢师宴就谢师宴。谢师宴就是打赢了师傅，师傅请客。『谢师礼是被禁止的，因为拳师是社会名人，输不起。』

影片中小徐佳（师娘）是有情有义的，『他犯的事，我担着』这是『天津女人的好，你接不住』呢。当然这前提是因为师傅也是有情有义的，虽说他一开始是想利用徒弟，『毁了一个天才，成就一个门派』。门派最终也都是假的啊，毕竟没有真传的东西了，一个面子工程有什么意义呢。徒弟死了，徒弟本来应该是有伤无残，就是为了赌一口气，可是他是『一个门派的全部未来』啊，徒弟在年轻时已经超出师傅啦，假以十年肯定青出于蓝。而师傅的情义就是为徒弟报仇。如果师傅可以带着师娘徒弟逃走，『老规矩，逃了就等于死了』。

『毁了一个天才，成就一个门派』徒弟的毁也仅仅只是有伤无残，逐出天津，天津的前途尽毁，可是有一身本事，这样的买卖，虽有不甘，但师傅对徒弟也是有知遇之恩，栽培之意，师傅有恶评，但不伤大体，无所谓，还能算不超过底线。只是徒弟死了，这又是另一回事了。

『面包免费，但要先点菜。这么简单的道理我居然才明白。』别人帮你那么多，别人肯定要获得什么，对人家来说，他的声望更值钱，其他的都可以不在意，传承啊后人之事啊都不重要，所以为了声望可更过分，下狠手。

『她童年时受穷，当然会很自私。但男人的钱不就是用来给女人骗的吗？』这算是经典之言了。这是爱也是气概。

徒弟是真死了，他的死讯是从脚夫老大口中说的，他的大才，很难死的。大才，意志坚韧，三年本事，一年可学成。开头是徒弟打第八家武馆，打赢了喝咖啡。脚夫老大说埋了，就是真的埋了，没有必要撒这样的谎。

『能取你扣子，就能断你喉咙』

『好在是个小人，毁了，不可惜』小人是小人物，也就是贫民。毁了指背井离乡。

不管是武行还是脚行，都是平民百姓，市井小人，比不得政界军界。

有人说陈识是叶问的师傅，有人说陈识是叶问的师兄，有人说陈识是叶问。

随便教的徒弟就能踢人家八家武馆，说明师傅了得。『这是一个“出师父不出徒弟”的时代，各派都有名师，都后继无人。』

想到现在国内的很多开发者大会，大家都是把很多好像核心技术的东西藏着掖着，而国外的开发者大会交流技术就是真的交流，没有什么留一手。我朋友参加完新加坡 blackhat 后回来跟我讲的。

看完小说《师傅》，觉得电影比小说精彩。小说链接：https://www.douban.com/note/492185228/

好看的电影是不是因为看不太懂，打了星，点了赞发现意犹未尽，遥想那江湖，不曾有念想，『你更漂亮，我不敢动一点心』。

原则

2016-04-24T00:00:00+00:00

只讨论，不争论

争论：为了说服别人。
讨论：为了知道自己的不足。

Warning：至于别人最后是不是坚持己见，不愿意做改变，那是别人的事。

ES6（一）

2016-04-24T00:00:00+00:00

阅读阮一峰老师的《ECMAScript 6入门》

let 和 const

temporal dead zone 为了防止运行时错误，防止在变量声明前就使用了这个变量，从而导致意料之外。
let 块级作用域可以减少很多潜在的危害，比如说 for 循环里定义的 i，还有 switch 里定义的变量，出了这一块作用域就不应该被用到。

1
2
3
4
5
6
7
{
	let insane = 'Hello World0'; console.log('0', insane);
	{
		let insane = 'Hello World1'; console.log('1', insane);
	}
	console.log('2', insane);
}

ES6 的函数作用域也是块级作用域。

const 命令只是保证变量名指向的地址不变，并不保证该地址的数据不变。有坑，如果

1
2
3
4
5
6
7
const foo = {};
foo.prop = 123;

const a = [];
a.push("Hello"); // 可执行
a.length = 0;    // 可执行
a = ["Dave"];    // 报错

可以用 const foo = Object.freeze({});

对象属性彻底冻结

1
2
3
4
5
6
7
8
let constantize = (obj) => {
	Object.freeze(obj);
	Object.keys(obj).forEach( (key, value) => {
		if ( typeof obj[key] === 'object' ) {
			constantize( obj[key] );
		}
	});
};

不能使用圆括号

变量生命语句种，不能带有圆括号
函数参数中，模式不能带有圆括号
赋值语句中，不能将整个模式，或嵌套模式中的一层，防止圆括号之中

变量的解构赋值总结

数组的解构赋值
对象
字符串
数值和布尔值
函数参数
圆括号
用途

Unicode

"\u0061"
// "a"

PS: 编码问题是一个比较大的坑，占坑不说 http://es6.ruanyifeng.com/#docs/string

正则

第一个参数是正则对象，第二个参数是指定修饰符。

new RegExp(/abc/ig, 'i').flags

四个字节的 UTF-16 需要使用 u 修饰符。

点（.）字符在正则表达式中，表示的是除了换行符（\n）外的任意单个字符。但是对于码点大于 0xFFFF 的 Unicode 字符，点字符不能识别，必须加上 u 修饰符。

var s = '𠮷';
/^.$/.test(s) // false
/^.$/u.test(s) // true

大括号可以表示 Unicode 字符

/\u{61}/.test('a') // false
/\u{61}/u.test('a') // true

\s 匹配所有空格字符，\S 预定义模式，匹配所有不是空格的字符，加了 u 修饰符才能正确匹配码点大于 0xFFFF 的 Unicode 字符。

function codePointLength(text) {
	var result = text.match(/[\s\S]/gu);
	return result ? result.length : 0;
}

var s = '𠮷𠮷';

s.length // 4
codePointLength(s) // 2

i 修饰符：大小写不敏感的匹配。

y 修饰符：我理解的是变成 /^xx/ 的正则表达式。

// 没有找到匹配
'x##'.split(/#/y)
// [ 'x##' ]

// 找到两个匹配
'##x'.split(/#/y)
// [ '', '', 'x' ]

'##x'.split(/^#/)
// ["", "#x"]

'##x'.split(/^#/g)
// ["", "#x"]

flags属性

// ES5的source属性
// 返回正则表达式的正文
/abc/ig.source
// "abc"

// ES6的flags属性
// 返回正则表达式的修饰符
/abc/ig.flags
// 'gi'

字符串转义

function escapeRegExp(str) {
  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
}

let str = '/path/to/resource.html?search=query';
escapeRegExp(str)

JavaScript 只支持先行断言与先行否定断言，不支持后行断言（lookbehind）和后行否定断言。『先行断言（lookahead）』指的是，x 只有在 y 前面才匹配，必须写成 /x(?=y)/。『先行否定断言（negative lookahead）』/x(?!y)/。

/\d+(?=%)/.exec('100% of US presidents have been male')  // ["100"]
/\d+(?!%)/.exec('that’s all 44 of them')                 // ["44"]

『experiment JavaScript features』开关 enable（地址栏：about:flags）『后行断言』，x 只有在 y 后面才匹配，必须写成 /(?<=y)x/。

/(?<=\$)\d+/.exec('Benjamin Franklin is on the $100 bill')  // ["100"]
/(?<!\$)\d+/.exec('it’s is worth about €90')                // ["90"]

数值的扩展

严格模式下，八进制不再允许使用前缀 0 表示，可以用 0o。二进制，八进制前缀分别为 0b（或0B）和0o（或0O）。可用 Number 方法转为十进制。

// Number.isFinite
(function (global) {
  var global_isFinite = global.isFinite;

  Object.defineProperty(Number, 'isFinite', {
    value: function isFinite(value) {
      return typeof value === 'number' && global_isFinite(value);
    },
    configurable: true,
    enumerable: false,
    writable: true
  });
})(this);

// Number.isNaN()
(function (global) {
  var global_isNaN = global.isNaN;

  Object.defineProperty(Number, 'isNaN', {
    value: function isNaN(value) {
      return typeof value === 'number' && global_isNaN(value);
    },
    configurable: true,
    enumerable: false,
    writable: true
  });
})(this);

在JavaScript内部，整数和浮点数是同样的储存方法，所以 3 和 3.0 被视为同一个值。

// Number.isInteger()
(function (global) {
  var floor = Math.floor,
    isFinite = global.isFinite;

  Object.defineProperty(Number, 'isInteger', {
    value: function isInteger(value) {
      return typeof value === 'number' && isFinite(value) &&
        value > -9007199254740992 && value < 9007199254740992 &&
        floor(value) === value;
    },
    configurable: true,
    enumerable: false,
    writable: true
  });
})(this);

Number.EPSILON 一个接受误差的范围。

0.1 + 0.2 - 0.3 < Number.EPSILON
// true

误差检查函数

function withinErrorMargin (left, right) {
  return Math.abs(left - right) < Number.EPSILON;
}
withinErrorMargin(0.1 + 0.2, 0.3)
// true
withinErrorMargin(0.2 + 0.2, 0.3)
// false

JavaScript 能够准确表示的整数范围在 -2^53 到 2^53 之间，（不含端点值）。

Math.pow(2, 53) // 9007199254740992

9007199254740992  // 9007199254740992
9007199254740993  // 9007199254740992

Math.pow(2, 53) === Math.pow(2, 53) + 1

// but
9007199254740994 // 9007199254740994
Math.pow(2, 53) + 2 // 9007199254740994

ES6引入了Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER这两个常量，用来表示这个范围的上下限。Number.isSafeInteger() 则是用来判断一个整数是否落在这个范围之内。

Number.isSafeInteger = function (n) {
  return (typeof n === 'number' &&
    Math.round(n) === n &&
    Number.MIN_SAFE_INTEGER <= n &&
    n <= Number.MAX_SAFE_INTEGER);
}

Notice:

Number.isSafeInteger(9007199254740993)
// false
Number.isSafeInteger(990)
// true
Number.isSafeInteger(9007199254740993 - 990)
// true
9007199254740993 - 990
// 返回结果 9007199254740002
// 正确答案应该是 9007199254740003

Math 扩展

Math.trunc 去除一个数的小数部分，返回整数部分。
Math.sign() 判断一个数到底是正数、负数还是零。
Math.cbrt 计算一个数的立方根。
Math.clz32() 返回32 位无符号整数形式有多少个前导 0。
Math.imul 返回两个数以32位带符号整数形式相乘的结果。（存疑）
Math.fround 返回一个数的单精度浮点数形式。
Math.hypot 返回所有参数的平方和的平方根。

对数

Math.expm1 返回 e^x - 1 即 Math.exp(x) - 1。
Math.log1p 返回 1 + x 的自然对数即 Math.log(1 + x)。
Math.log10 返回以 10 为底的 x 的对数。
Math.log2 返回以 2 为底的 x 的对数。

三角函数

Math.sinh(x) 返回x的双曲正弦（hyperbolic sine）
Math.cosh(x) 返回x的双曲余弦（hyperbolic cosine）
Math.tanh(x) 返回x的双曲正切（hyperbolic tangent）
Math.asinh(x) 返回x的反双曲正弦（inverse hyperbolic sine）
Math.acosh(x) 返回x的反双曲余弦（inverse hyperbolic cosine）
Math.atanh(x) 返回x的反双曲正切（inverse hyperbolic tangent）

指数运算

2 ** 2 // 4
2 ** 3 // 8

let a = 2;
a **= 2 // a = a * a
let b = 3;
b **= 3; // b = b * b * b

数组的扩展

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。用 Array.of() 来替代 Array() 还有 new Array()。数组实例 copyWithin，将指定位置的成员复制到其他位置。

find 用于找出第一个符合条件的数组成员。findIndex 返回的是位置。用法相同。

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

识别数组的NaN

[NaN].indexOf(NaN)
// -1

[NaN].findIndex(y => Object.is(NaN, y))
// 0

数组有 entries，keys，values 方法。与 for…of 配合使用。

数组 includes 方法，有语义化。

Map 结构的 has 方法，可以用来查找键名。

Set 结构的 has 方法，用来查找值。

Array(3) 返回一个具有3个空位的数组，空位没有任何值，不是 undefined。

ES5 forEach(), filter(), every() 和some()都会跳过空位。 map()会跳过空位，但会保留这个值 join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。

0 in [undefined, undefined, undefined] // true
0 in [, , ,] // false

// forEach方法
[,'a'].forEach((x,i) => log(i)); // 1

// filter方法
['a',,'b'].filter(x => true) // ['a','b']

// every方法
[,'a'].every(x => x==='a') // true

// some方法
[,'a'].some(x => x !== 'a') // false

// map方法
[,'a'].map(x => 1) // [,1]

// join方法
[,'a',undefined,null].join('#') // "#a##"

// toString方法
[,'a',undefined,null].toString() // ",a,,"

ES6则是明确将空位转为 undefined。

由于空位的处理规则非常不统一，所以建议避免出现空位。

函数的扩展

参数设置默认值，ES6 的方式更为友好，简洁。

双重默认值，因为不能省略第二个参数。

function fetch(url, { method = 'GET' } = {}) {
  console.log(method);
}

fetch('http://example.com')

// 写法一
function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

// 写法二
function m2({x, y} = {x: 0, y: 0}) {
  return [x, y];
}

函数的 length 属性将返回没有指定默认值的参数个数。 rest 参数也不会记入 length 属性

(function(...args) {}).length // 0

设置了默认值的参数与其之后的参数不记入 length。

如果函数 A 的参数默认值是函数 B，由于函数的作用域是其声明时所在的作用域，那么函数 B 的作用域不是函数 A，而是全局作用域。

使用 rest 参数（…变量名），就不需要使用 arguments。

// arguments
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}

// rest
const sortNumbers = (...numbers) => numbers.sort();

rest 参数只能作为最后一个参数。

// ES5
Math.max.apply(null, [14, 3, 77]);
// ES6
Math.max(...[14, 3, 77]);

Math.max(14, 3, 77);

// ES5
new (Date.bind.apply(Date, [null, 2015, 1, 1]));
//ES6
new Date(...[2015, 1, 1]);

用来合并数组更简单。

结构函数

const [first, ...rest] = [1, 2, 3, 4, 5];

返回多个值的时候可以用解构函数。

可以将字符串转为真正的数组。

Map & Generator

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
let arr = [...map.keys()];

var go = function*() {
  yield 1;
  yield 2;
  yield 3;
};
[...go()];

注意：没有 iterator 接口的对象，不能使用扩展运算符（…values）

(new Function).name // "anonymous"

// ES5，ES6 不一样。
var func1 = function() {};
// ES5
func1.name // ''
// ES6
func1.name // 'func1'

// ES5，ES6 一样。
const bar = function baz() {}
// ES5
bar.name // 'baz'
// ES6
bar.name // 'baz'

function foo () {}
foo.bind({}).name; // 'bound foo'

(function(){}).bind({}).name; // 'bound'

箭头函数，注意事项

函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。
不可以当作构造函数，也就是说，不可以使用 new 命令。
不可以使用 arguments 对象，可以用 rest 参数替代。
不可以使用 yield 命令，箭头函数不能用作 Generator 函数。

sample:

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

普通函数，执行时 this 应该指向全局对象 window，这时应该输出 21。但是，箭头函数导致 this 总是指向函数定义生效时所在的对象（本例是{id: 42}），所以输出的是 42。

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0

利用参数默认值，可以指定某一个参数不得省略，如果省略就抛出错误。

function throwIfMissing() {
  throw new Error('Missing parameter');
}

function foo(mustBeProvided = throwIfMissing()) {
  return mustBeProvided;
}

foo()
// Error: Missing parameter

foo(123)
// 123

参数的默认值不是在定义时执行，而是在运行时执行（即如果参数已经赋值，默认值中的函数就不会运行）。可以讲参数默认值设为 undefined，表明参数可省略。

console.log(...[1, 2, 3])
// 1 2 3

扩展运算符取代 apply 方法：

// ES5 写法
Math.max.apply(null, [14, 3, 77]);

// ES6 写法
Math.max(...[14, 3, 77]);

// 等同于
Math.max(14, 3, 77);

push 写法：

// ES5
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);

// ES6
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

Date 相关的：

// ES5
new (Date.bind.apply(Date, [null, 2015, 1, 1]));

// ES6
new Date(...[2015, 1, 1]);

Others

[1, 2].concat(more);
[1, 2, ...more];

注意：扩展运算符用于数组赋值，只能放在参数的最后一位。

// 字符串转数组
[...'hello'];

// 能识别 32 位 Unicode 字符
'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3

function name

var func1 = function() {}
// ES5
func1.name // ''
// ES6
func1.name // 'func1'

const bar = function baz() {};
// ES5
bar.name // "baz"
// ES6
bar.name // "baz"

(new Function).name // "anonymous"

function foo() {};
foo.bind({}).name // "bound foo"
(function(){}).bind({}).name // "bound "

continue ….

五个为什么

2016-04-17T00:00:00+00:00

如下示例解释的就是五问法的基本过程：

我的汽车无法启动。（问题）

为什么？：电池电量耗尽。（第一个为什么）
为什么？：交流发电机不能正常工作。（第二个为什么）
为什么？：交流发电机皮带断裂。（第三个为什么）
为什么？：交流发电机皮带远远超出了其使用寿命，从未更换过。（第四个为什么）
为什么？：我一直没有按照厂家推荐的保养计划对汽车进行过保养和维护。（第五个为什么，根本原因）

解决问题的人要有“打破砂锅问到底”的精神。

https://en.wikipedia.org/wiki/5_Whys

读一本书需要花多少时间

2016-04-10T00:00:00+00:00

阅读

First:

书名	时间	字数
《微信帝国：张小龙的内争与外伐》	33分	11756字
《九败一胜》	6时24分	156806字
《打造 Facebook》	4时30分	111411字
《MacTalk 跨越边界》	7时3分	179144字
《时间简史（普及版）》	4时39分	38960字
《鱼羊野史（第 1 卷）》	8时38分	229964字
《xxx》	14分	8384字
《魔兽世界诞生记》	44分	21366字

Second:

书名	时间	字数
《小王子》	46分	36687字
《西游日记》	3时12分	101847字
《悟空传》	4时44分	132049字
《霍比特人》	4时36分	180808字
《xxx》	2时43分	119749字

Third:

书名	时间	字数
《鱼羊野史（1-4册）》	25时31分	908314字

Three Virtues

2016-04-02T00:00:00+00:00

Three Virtues

According to Larry Wall, the original author of the Perl programming language, there are three great virtues of a programmer; Laziness, Impatience and Hubris

Laziness: The quality that makes you go to great effort to reduce overall energy expenditure. It makes you write labor-saving programs that other people will find useful and document what you wrote so you don’t have to answer so many questions about it.
Impatience: The anger you feel when the computer is being lazy. This makes you write programs that don’t just react to your needs, but actually anticipate them. Or at least pretend to.
Hubris: The quality that makes you write (and maintain) programs that other people won’t want to say bad things about.

http://threevirtues.com/

MacTalk 跨越边界

2016-03-28T00:00:00+00:00

最近在看 MacTalk 的《跨越边境》，这是一本对我来说很值得拜读的书，给我启发很大，在这摘录了一些有意思的片段。

webpack

2016-03-22T00:00:00+00:00

webpack 主要是为了解决打包的问题。

FE DK Debugging

2016-03-22T00:00:00+00:00

Get Request:

Curl:

$ curl -i http://localhost:8080/api/test2.json\?name\=233
HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Content-Type: application/json;charset=UTF-8
Transfer-Encoding: chunked
Date: Tue, 17 May 2016 16:56:00 GMT

{"value":"233"}

Pic:

Java Spring Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
 * @RestController
 * 获取 json 数据
 * @param name
 * @return model
 */
@RequestMapping("/api/test2.json")
public @ResponseBody ModelMap greeting(@RequestParam(value="name", defaultValue="World") String name) {
    ModelMap model = new ModelMap();
    System.out.println("hello");
    System.out.println("value " + name);
    model.addAttribute("value", name);
    return model;
}

Post Request:

Send Form:

Curl:

$ curl -d "id=2&content=Maoyan" http://localhost:8080/api/test.form

id=2&content=Maoyan

Pic:

Java Spring Code:

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
/**
 * 定义 Greeting
 */
public class Greeting {
    private long id;
    private String content;

    public long getId() {
        return id;
    }

    public void setId(long id) {
        this.id = id;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}

/**
 * @Controller
 * 发送 form 数据
 * @param greeting
 * @return String
 */
@RequestMapping(value="/api/test.form", method=RequestMethod.POST)
public @ResponseBody String printForm(Greeting greeting) {
    System.out.println("Hello, greeting form");
    System.out.println(greeting.getContent());
    System.out.println(greeting.getId());
    String result = "id=" + greeting.getId() + "&content=" + greeting.getContent();
    System.out.println(result);
    return result;
}

Send JSON:

Curl:

$ curl -H "Content-Type: application/json" -X POST -d '{"id":13313,"content":"dfasdf"}' http://localhost:8080/api/test.json

{"id":13313,"content":"dfasdf"}

Pic:

Java Spring Code:

1
2
3
4
5
6
7
8
@ResponseBody
@RequestMapping(value="/api/test.json")
public ModelMap printJson(@RequestBody ModelMap model) {
    System.out.println("Hello, model");
    System.out.println(model);
    System.out.println(model.get("id")); // if not id, it will be null
    return model;
}

Warninig：

有个槽点，我在 Java 老是想用单引号，然后报错了。。。
ResponseBody 和 RequestBody 是不一样的，同样的坑踩多了就愚蠢了。

References:

阮一峰. curl网站开发指南 http://www.ruanyifeng.com/blog/2011/09/curl.html
StackOverflow. http://stackoverflow.com/questions/7172784/how-to-post-json-data-with-curl-from-terminal-commandline-to-test-spring-rest

Serendipity

2016-03-20T00:00:00+00:00

憧憬

这是一个很有趣的世界。

JavaScript 秘密花园

许可

JavaScript 秘密花园在 MIT license 许可协议下发布，并存放在 GitHub 开源社区。如果你发现错误或者打字错误，请新建一个任务单或者发一个抓取请求。你也可以在 Stack Overflow 的 JavaScript 聊天室找到我们。

http://bonsaiden.github.io/JavaScript-Garden/zh/

Others

有哪些短小却令人惊叹的javascript代码？

奇技淫巧：

1
2
3
4
5
6
7
8
9
10
11
// 赋值
return { 1: '是', 0: '否' }[value] // value = 0 || 1
+new Date() // new Date().getTime()
var b = value || 0 // 有 value 的时候，b 为 value

// True && False
Number(false) || +false // 0
Number(true) || +true // 1
~~!true // 0
!!~0 // true index 场景下可用
!!~-1 // false

hash 无法通过 url 直接传递给后端

可以用 JS 获取：

$ var type = window.location.hash.substr(1);

或者用 encodeURIComponent() 方法转义:

encodeURIComponent('#')
"%23"

References:

http://www.ruanyifeng.com/blog/2011/03/url_hash.html

mac package manager

2016-03-20T00:00:00+00:00

Mysql manage

npm manage

###

Style Guide

2015-09-16T00:00:00+00:00

Style guides for Google-originated open-source projects

https://github.com/google/styleguide

用更合理的方式写 JavaScript

https://github.com/lincolnge/javascript

翻译自 Airbnb JavaScript Style Guide。

摘自：https://github.com/yuche/javascript/blob/master/README.md 有删改

用更合理的方式写 JavaScript ES5

https://github.com/lincolnge/javascript/tree/translation/chinese/simplified/es5

摘自：https://github.com/sivan/javascript-style-guide/tree/master/es5 有删改

用更合理的方式写 React/JSX Style

https://github.com/lincolnge/javascript/tree/translation/chinese/simplified/react

翻译自 Airbnb JavaScript Style Guide。

将繁体字的改为简体字：

https://github.com/jigsawye/javascript/blob/master/react/README.md

谈修养

2015-08-23T00:00:00+00:00

朱光潜《谈修养》阅读笔记

我编程，我快乐

2015-08-16T00:00:00+00:00

[美] Chad Fowler 《我编程，我快乐》阅读笔记

IT 职场不能只注重技能的提升，还要关注自己的职业发展。

如果我有更多的钱，或许我会更快乐；如果我的成就被认可，或许我会更快乐；如果我升职或者有名望了，或许我会更快乐。但是如果你把目光放远一些，你就会发现自己为了追求更高的薪水，或许就会失去了快乐。

职业发展：

选择市场
投资
执行
市场

选择市场

找一个团队，让自己成为“最差”，通过与这个项目中其他程序员合作，提高自身能力。可以通过业余时间做兼职，练习新技术，提供自身技能

找一个开源项目，浏览其待处理列表与官方讨论区，编写一个功能或者修正一个 BUG，代码要模仿这个项目的代码风格，甚至让原作也区分不出来。提交补丁，如果你做得好，项目会接受它，如果项目设计团队不同意你的观点，就将他们的反馈加入到你的设计中再次提交，或者记录他们做出的改变。最终成为这个项目团队可信赖的一员。你就学到了很多。

热爱这份职业，对其感兴趣，将其视为动力。

成为通才，什么都懂一点；成为专才，已经处理过工作中可能遇到的 80% 的问题，并且拥有足够的知识来应付另外 20% 的问题。

热爱它，不然就离开它。

在产品上投资

主动问，主动学习。（不要要求别人来教你）。比如说考虑一个问题，你不完全懂的问题：它是如何工作的？为什么会发生这种情况？

了解公司是怎么赚钱的，这个可以创造性帮助公司赚取利润。（可以尝试阅读《The Ten-Day MBA》）

良师益友，寻找榜样。然后自己成为良师益友，给别人讲解难题，让自己真正理解知识。

执行

尽全力第一时间完成工作，规定自己每天都有成绩，确保目标和工作与公司的目标一致。专注当下的工作，安分守己，坚持下去。

竞赛无聊的工作任务，看谁做到最好。

自己创造了多少价值？对得起工资吗？

居安思危，自己没有那么重要。

做项目就像马拉松，提高工作效率，规划工作时间，减少工作时间。

面对错误

发现问题第一时间提出
接受批评
提供解决方法
寻找帮助

清楚知道自己能否做到，勇敢说“不”。能完成当然也要勇于完成。

记录自己的恐慌，克服它。制定计划，今天要做什么。

推销。。。不仅仅是迎合

宣传自己，与人沟通，表现自己。雨厉害的人交往。

保持技术领先

保持警惕，学习学习学习。每周找出时间研究尖端技术。不要满足于自己的工作，不要把自己的身份定位于程序员。做好计划，做好职业发展的打算，尝试其他身份，看有什么不同。

关注做事的过程，而不只是结果，关注任务本身。给自己定一个蓝图，推动自己不断发展。

注意观察市场变化，留意那些技术达人。

自我反省。设立目标，每天进步。

保持好奇心。

CSS 权威指南

2015-08-09T00:00:00+00:00

[美] Eric A. Meyer 《CSS 3权威指》阅读笔记

这本书是 CSS 专家 Eric A. Meyer 所著。该书涵盖了 CSS 的各个部分，包括属性、标记、特征和实现。

这本书在 2001 年是第一版，第一版的定位是对 CSS1的完整描述，同时给出 CSS2的概述。在 2007 年的时候出了第三版，展示了当时 CSS 最新的规范（CSS2 和 CSS2.1）。在 2011 年 9 月，CSS 3 正式开始被推荐使用。本书的定位是 CSS 2.1 + HTML 4.0 。

精妙地设计文本风格
用户界面、表格布局、列表以及自动生成的内容
浮动和定位细节
Font family 和 Fallback 机制
盒模型（box model）工作机制。

该书也介绍了其他浏览器支持的新 CSS3 的选择器。

HTML 5与CSS 3权威指南上册

2015-07-30T00:00:00+00:00

陆凌牛《HTML 5与CSS 3权威指》阅读笔记

第1版2年内印刷近10次，累计销量超过50000册，第2版首先从技术的角度结合最新的HTML 5和CSS 3标准对内容进行了更新和补充，其次从结构组织和写作方式的角度对原有的内容进行了进一步优化，使之更具价值且更便于读者阅读。

陆凌牛，资深Web开发工程师、软件开发工程师和系统设计师。从事Web开发多年，对各种Web开发技术（包括前端和后端）都有非常深入的研究，经验极其丰富。

第1章　Web时代的变迁

1.1　迎接新的Web时代

1.1.1　HTML 5时代即将来临

1.1.2　HTML 5的目标

1.2　HTML 5会深受欢迎的理由

1.2.1　世界知名浏览器厂商对HTML 5的支持

1.2.2　第一个理由：时代的要求

1.2.3　第二个理由：Internet Explorer 8

1.3　可以放心使用HTML 5的三个理由

1.4　HTML 5要解决的三个问题

第2章　HTML 5与HTML 4的区别

2.1　语法的改变

2.1.1　HTML 5的语法变化

2.1.2　HTML 5中的标记方法

2.1.3　HTML 5确保了与之前HTML版本的兼容性

2.1.4　标记示例

2.2　新增的元素和废除的元素

2.2.1　新增的结构元素

2.2.2　新增的其他元素

2.2.3　新增的input元素的类型

2.2.4　废除的元素

2.3　新增的属性和废除的属性

2.3.1　新增的属性

2.3.2　废除的属性

2.4　全局属性

2.4.1　contentEditable属性

2.4.2　designMode属性

2.4.3　hidden属性

2.4.4　spellcheck属性

2.4.5　tabindex属性

第3章　HTML 5的结构

3.1　新增的主体结构元素

3.1.1　article元素

3.1.2　section元素

3.1.3　nav元素

3.1.4　aside元素

3.1.5　time元素与微格式

3.1.6　pubdate属性

3.2　新增的非主体结构元素

3.2.1　header元素

3.2.2　hgroup元素

3.2.3　footer元素

3.2.4　address元素

3.3　HTML 5结构

3.3.1　大纲

3.3.2　大纲的编排规则

3.3.3　对新的结构元素使用样式

第4章　表单及其他新增和改良元素

4.1　新增元素与属性

4.1.1　新增属性

4.1.2　大幅度地增加与改良input元素的种类

4.1.3　对新的表单元素使用样式

4.1.4　output元素的追加

4.2　表单验证

4.2.1　自动验证

4.2.2　取消验证

4.2.3　显式验证

4.3　增强的页面元素

4.3.1　新增的figure元素与figcaption元素

4.3.2　新增的details元素与summary元素

4.3.3　新增的mark元素

4.3.4　新增的progress元素

4.3.5　新增的meter元素

4.3.6　改良的ol列表

4.3.7　改良的dl列表

4.3.8　加以严格限制的cite元素

4.3.9　重新定义的small元素

4.3.10　安全性增强的iframe元素

4.3.11　增强的script元素

第5章　HTML编辑API

5.1　Range对象与Selection对象

5.1.1　基本概念

5.1.2　Range对象的属性与方法

5.1.3　Selection对象的属性与方法

5.2　命令

5.2.1　基本概念

5.2.2　execCommand方法

5.2.3　queryCommandSupported方法

5.2.4　queryCommandState方法

5.2.5　queryCommandIndeterm方法

5.2.6　queryCommandEnabled方法

5.2.7　queryCommandValue方法

5.2.8　可以在各种浏览器中运行的所有命令

第6章　绘制图形

6.1　canvas元素的基础知识

6.1.1　在页面中放置canvas元素

6.1.2　绘制矩形

6.2　使用路径

6.2.1　绘制圆形

6.2.2　如果没有关闭路径会怎么样

6.2.3　moveTo与lineTo

6.2.4　使用bezierCurveTo绘制贝济埃曲线

6.3　绘制渐变图形

6.3.1　绘制线性渐变

6.3.2　绘制径向渐变

6.4　绘制变形图形

6.4.1　坐标变换

6.4.2　坐标变换与路径的结合使用

6.4.3　矩阵变换

6.5　图形组合

6.6　给图形绘制阴影

6.7　使用图像

6.7.1　绘制图像

6.7.2　图像平铺

6.7.3　图像裁剪

6.7.4　像素处理

6.8　绘制文字

6.9　补充知识

6.9.1　保存与恢复状态

6.9.2　保存文件

6.9.3　简单动画的制作

第7章　History API

7.1　History API的基本概念

7.2　History API使用示例

7.2.1　使用History API

7.2.2　结合使用Canvas API与History API

第8章　本地存储

8.1　Web Storage

8.1.1　Web Storage概述

8.1.2　简单Web留言本

8.1.3　作为简易数据库来利用

8.1.4　利用storage事件实时监视Web Storage中的数据

8.2　本地数据库

8.2.1　本地数据库的基本概念

8.2.2　用executeSql来执行查询

8.2.3　使用数据库实现Web留言本

8.2.4　transaction方法中的处理

8.3　indexedDB数据库

8.3.1　indexedDB数据库的基本概念

8.3.2　连接数据库

8.3.3　数据库的版本更新

8.3.4　创建对象仓库

8.3.5　创建索引

8.3.6　索引的multiEntry属性值

8.3.7　使用事务

8.3.8　保存数据

8.3.9　获取数据

8.3.10　根据主键值检索数据

8.3.11　根据索引属性值检索数据

8.3.12　复合索引

8.3.13　统计对象仓库中的数据数量

8.3.14　使用indexedDB API制作Web留言本

第9章　离线应用程序

9.1　离线Web应用程序详解

9.1.1　新增的本地缓存

9.1.2　本地缓存与浏览器网页缓存的区别

9.2　manifest文件

9.3　浏览器与服务器的交互过程

9.4　applicationCache对象

9.4.1　swapCache方法

9.4.2　applicationCache对象的事件

第10章　文件API

10.1　FileList对象与file对象

10.2　ArrayBuffer对象与ArrayBufferView对象

10.2.1　基本概念

10.2.2　ArrayBuffer对象

10.2.3　ArrayBufferView对象

10.2.4　DataView对象

10.3　Blob对象与BlobBuilder对象

10.3.1　Blob对象

10.3.2　BlobBuilder对象

10.3.3　Blob对象的slice方法

10.4　FileReader对象

10.4.1　FileReader对象的方法

10.4.2　FileReader对象的事件

10.4.3　FileReader对象的使用示例

10.5　FileSystem API

10.5.1　FileSystem API概述

10.5.2　FileSystem API的适用场合

10.5.3　请求访问文件系统

10.5.4　申请磁盘配额

10.5.5　创建文件

10.5.6　写入文件

10.5.7　在文件中追加数据

10.5.8　读取文件

10.5.9　复制磁盘中的文件

10.5.10　删除文件

10.5.11　创建目录

10.5.12　读取目录中的内容

10.5.13　删除目录

10.5.14　复制文件或目录

10.5.15　移动文件或目录与重命名文件或目录

10.5.16　filesystem:URL前缀

10.5.17　综合案例

10.6　Base64编码支持

10.6.1　Base64编码概述

10.6.2　在HTML 5中支持Base64编码

第11章　通信API

11.1　跨文档消息传输

11.1.1　跨文档消息传输的基本知识

11.1.2　跨文档消息传输示例

11.1.3　通道通信

11.2　WebSockets通信

11.2.1　WebSockets通信的基本知识

11.2.2　使用WebSockets API

11.2.3　WebSockets API使用示例

11.2.4　发送对象

11.2.5　发送与接收原始二进制数据

11.2.6　实现WebSockets API的开发框架

11.2.7　WebSocket 协议

11.2.8　WebSockets API的适用场景

11.3　Server-Sent Events API

11.3.1　Server-Sent Events API的基本概念

11.3.2　Server-Sent Events API的实现方法

11.3.3　事件ID的使用示例

第12章　扩展的XMLHttpRequest API

12.1　从服务器端获取二进制数据

12.1.1　ArrayBuffer响应

12.1.2　Blob响应

12.2　发送数据

12.2.1　发送字符串

12.2.2　发送表单数据

12.2.3　上传文件

12.2.4　发送Blob对象

12.2.5　发送ArrayBuffer对象

12.3　跨域数据请求

第13章　使用Web Workers处理线程

13.1　基础知识

13.2　与线程进行数据的交互

13.3　线程嵌套

13.3.1　单层嵌套

13.3.2　在多个子线程中进行数据的交互

13.4　线程中可用的变量、函数与类

13.5　适用场合

13.6　SharedWorker

13.6.1　基础知识

13.6.2　实现前台页面与后台线程之间的通信

13.6.3　定义页面与共享的后台线程开始通信时的处理

13.6.4　SharedWorker的使用示例

第14章　获取地理位置信息

14.1　Geolocation API的基本知识

14.1.1　取得当前地理位置

14.1.2　持续监视当前地理位置的信息

14.1.3　停止获取当前用户的地理位置信息

14.2　position对象

14.3　在页面上使用google地图

第15章　多媒体相关API

15.1　多媒体播放

15.1.1　video元素与audio元素的基础知识

15.1.2　属性

15.1.3　方法

15.1.4　事件

15.2　Web Audio API

15.2.1　AudioContext对象

15.2.2　加载声音

15.2.3　播放声音

15.2.4　将声音加载处理封装在类中

15.2.5　控制节奏

15.2.6　控制音量

15.2.7　两个声音的交叉混合

15.2.8　多个音频文件之间的平滑过渡

15.2.9　对音频使用滤波处理

第16章　与页面显示相关的API

16.1　Page Visibility API

16.1.1　Page Visibility API概述

16.1.2　Page Visibility API的使用场合

16.1.3　实现Page Visibility API

16.2　Fullscreen API

16.2.1　Fullscreen API概述

16.2.2　实现Fullscreen API

16.2.3　Fullscreen API代码使用示例

第17章　拖放API与通知API

17.1　拖放API

17.1.1　实现拖放的步骤

17.1.2　DataTransfer对象的属性与方法

17.1.3　设定拖放时的视觉效果

17.1.4　自定义拖放图标

17.2　通知API

17.2.1　通知API的基础知识

17.2.2　通知API的代码使用示例

Java夜未眠

2015-07-22T00:00:00+00:00

蔡学镛《Java夜未眠》阅读笔记

本书是一本散文集。

蔡老师的学习方式是先广后深，学习 A 技术时，发现需要 B 技术的基础，就搁置 A 然后认真学习 B。当然有一次他先深后广，居然读起了道德经。

励志

把工作、学习和娱乐结合在一起，把程序设计当成兴趣。

进入程序设计的领域：

培养兴趣
慎选程序语言
使用适当的开发工具
多度好书，少上课
加强英文阅读能力
求人之前，先求自己
多写程序练习
深入研究

职业敏感度，让自己不自觉增加专业功力，做梦想到某个问题的解决方法，把语言当成生活中的一部分。

女性，如果你愿意，也是可以写好代码的。

牢骚

在台湾写程序收入略低，还不如卖鸡排。

程序员的生活算是一种梦想，当然这也是有收入的，如果收入无法支撑这个梦想，那也只能转行了。

Software rush 好像看起来很光明，而实际上很辛苦，当然各行各业都有辛苦的地方。

“不要相信任何人”。作者因为买了一套很糟糕的软件，发此感慨。

生涯

从程序员到作家或者到讲师，或者到项目 leader，不要让自己的技能过分单一。

Know-What -》 Know-How -》 Know-Why -》 Care-Why

“学历无用论”，“认证无用论”，不管什么无用论，你水平不够，就不要乱说话。

图书篇

程序设计学习

学习之道

软件工程

design pattern

系统

编译、反编译、反反编译

出错，也只是发生了 shit happen，没事，never mind。

杂感

人人都是产品经理

2015-07-15T00:00:00+00:00

苏杰《人人都是产品经理》阅读笔记第一反映是为啥这书不是叫《人人都是工程师》

苏杰，浙江大学硕士，2006年毕业加入阿里巴巴集团，一直担任产品经理至今。主要负责产品的战略规划、业务架构、数据分析、用户体验等工作。

阿里的产品的产品一直被诟病，当然这本书是很有意思的。

第1章写给-1到3岁的产品经理

1.1 为什么要做产品经理
1.2 我们到底是不是产品经理
1.3 我真的想做，怎么入行
1.4 一个产品经理的-1到3岁

第2章一个需求的奋斗史

2.1 从用户中来到用户中去
2.1.1 用户是需求之源
2.1.2 你真的了解用户吗
2.2 需求采集的大生产运动
2.2.1 定性地说：用户访谈
2.2.2 定量地说：调查问卷
2.2.3 定性地做：可用性测试
2.2.4 定量地做：数据分析
2.2.5 需求采集人人有责
2.3 听用户的但不要照着做
2.3.1 明确我们存在的价值
2.3.2 给需求做一次DNA检测
2.4 活下来的永远是少数
2.4.1 永远忘不掉的那场战争
2.4.2 别灰心，少做就是多做
2.5 心急吃不了热豆腐

第3章项目的坎坷一生

3.1 从产品到项目
3.2 一切从Kick Off开始
3.3 关键的青春期，又见需求
3.3.1 真的要写很多文档
3.3.2 需求活在项目中
3.4 成长，一步一个脚印
3.5 山寨级项目管理
3.5.1 文档只是手段
3.5.2 流程也是手段
3.5.3 敏捷更是手段
3.6 物竞天择适者生存
3.6.1 亲历过的特色项目
3.6.2 一路坎坷，你我同行

第4章我的产品，我的团队

4.1 大产品，大设计，大团队
4.1.1 产品之大
4.1.2 设计之大
4.1.3 团队之大
4.2 游走于商业与技术之间
4.2.1 心思缜密的规划师
4.2.2 激情四射的设计师
4.2.3 “阴险狡诈”的运营师
4.3 商业团队，冲锋陷阵
4.3.1 好产品还需市场化
4.3.2 我们还能做什么
4.4 技术团队，坚强后盾
4.5 容易被遗忘的角落
4.6 大家好才是真的好
4.6.1 所谓团队文化
4.6.2 虚无的无授权领导

第5章别让灵魂跟不上脚步

5.1 触及产品的灵魂
5.2 可行性分析三步曲
5.2.1 我们在哪儿
5.2.2 我们去哪儿
5.2.3 我们怎么去
5.3 做吧，准备出发
5.3.1 敢问路在何方
5.3.2 低头走路，抬头看天
5.4 KPI，KPI，KPI
5.5 本书的源头活水

第6章产品经理的自我修养

6.1 爱生活，才会爱产品
6.2 有理想，就不会变咸鱼
6.3 会思考，活到老学到老
6.4 能沟通，在什么山头唱什么歌
6.5 产品经理主义

一个人真正成熟的标志之一，就是心中可以容纳互相矛盾的观点而无碍行事。

对产品经理来说，核心技能

沟通能力
无授权领导能力
学习能力（学习能力各行各业都很重要）
商业敏感度
热爱产品
注重细节，追求完美
日常产品管理能力

代码整洁之道

2015-07-07T00:00:00+00:00

[美]Robert C. Martin 《代码整洁之道》阅读笔记

你是个程序员，你想成为更好的程序员。

整洁代码

整洁代码就像绘画一样。整洁的代码如同优美的散文。干净利落的抽象。

简单代码的规则

能通过所有测试
没有重复代码
体现系统中的全部设计理念
包括尽量少的实体，比如类、方法、函数等。

消除重复和提高表达力。

有意义的命名

做有意义的区分，废话都是冗余，使用读得出来的名称，使用可搜索的名称，避免使用编码，避免思维映射，类名，方法名，别扮可爱，每个概念对应一个词，别用双关语，使用解决方案领域名称，使用源自所涉问题领域的名称，添加有意义的语境，不要添加没用的语境。

目的：提高代码可读性。

函数

短小、只做一件事、每个函数一个抽象层级、switch 语句、使用描述性的名称、函数参数、无副作用、分隔指令与询问、使用异常替代返回错误码、别重复自己、结构化编程。

注释

不能美化糟糕的代码
用代码来阐述
阐述
坏注释：喃喃自语、多余、误导性、循规式、日志式、废话、可怕、能用函数或变量就不该用注释、位置标记、括号后面的、归属与署名、注释掉的代码、HTML 注释、非本地信息、信息过多、不明显的联系、函数头、非公共代码中的 Javadoc、范例

格式

保持良好的代码格式，选用一套简单规则并贯彻之。

垂直格式
团队规则
格式规则

对象和数据结构

数据抽象
数据、对象的反对称性
德墨忒尔率
数据传送对象

错误处理

使用异常而非返回码
先写 Try-Catch-Finally 语句
使用不可控异常
给出异常发生的环境说明
依调用者需要定义异常类
定义常规流程
别返回 null 值
别传递 null 值

边界

使用第三方代码
浏览和学习边界
学习性测试的好处不只是免费
使用尚不存在的代码
整洁的边界

单元测试

测试驱动，单元测试。

TDD
保持整洁
整洁的测试
每个测试一个断言
F.I.R.S.T

类

类的组织
短小
为了修改而组织

系统

将系统与构造使用分开
扩容
代理
框架
测试驱动系统架构
优化决策
明智使用添加了可论证价值的标准
系统需要领域特定语言

迭进

通过迭进设计达到整洁的目的
运行所有测试
重构
不可重复
表达力
尽可能少的类和方法

并发编程

挑战、防御原则、执行模型、警惕同步方法之间的依赖、保持同步区域微小、很难编写正确的关闭代码、测试线程代码。

逐步改进

JUnit 内幕

框架

重构 SerialDate

首先，让它能工作
让它做对

味道与启发

注释、环境、函数、名称、测试。

全栈工程师

2015-06-29T00:00:00+00:00

余果《谈谈全栈工程师》阅读笔记

介绍

全栈工程师（full-stack engineer）是一个全球热议的话题。“栈”是指 software stack 或者 solution stack。

要开发一个 Web 页面，工程师需要使用操作系统、服务器、数据库以及几种编程语言，这些技术组合在一起叫做 Web Stack。擅长 Web Stack 的工程师就可以称为 web stack Engineer。以此类推，擅长所有 Stack 的工程师就是全栈工程师。

全栈工程师是一个阴谋，老板都想雇佣一个人做三份工，拿两份工资。Web 2.0 之前，工程师就符合全栈，一个人包揽整个网站的构建。随着技术发展，Web 开发流程也有了一条流水线。用研、交互、视觉、重构、前端、后台、运维和测试。当然还有项目经理。项目经理和技术 leader 很需要是全栈的人担当，不只是小公司，大公司也如此。

当然全栈很适合自由职业和创业，对个人而言，全栈的发展空间是很巨大的，当然首先要成为 top 10 呢。

酷炫之路

我们都是普通人，所以要成为全栈大神就要慢慢积累，先精后广，一专多长。

找工作的时候，看招聘信息，很简单，很容易，但是仅仅满足招聘要求是不够的，什么都做一点，那就是无亮点。

多关注商业项目，多关注用户体验，在某个领域挖深学习。前端招聘，大家都喜欢前端基础过硬，有脱颖而出的亮点和经历，后台也写得不错，移动端原生也 OK，再要是个妹子，恩，你懂的。

大前端

前端是棵大树，HTML+CSS+JS 是主干。
Web 语义化：无障碍网页应用（WAI-ARIA）
命名规范
《Designing with Web Standards》

最难？

缓存

数据库缓存
内存缓存，硬盘缓存
静态化
浏览器本地缓存

请求

哪些？
花费时间？
请求类型
状态码
流量
gzip

依赖管理

资源打包，优雅地使用他人代码。

npm
bower
其他

移动端是大势所趋

Web app，技术简单，无缝移植，–> Hybrid app。
iOS native app，OC，Swift
Android native app，JAVA
Windows phone。。。
微信公众号。

多看书

《禅意花园》《网页重构》《超越CSS》《CSS Mastery》等还有《写给大家看的设计书》

语言的应用场景

什么情况用什么语言都是需要考究的，语言各有优缺点，适合的就是最好的。

一专多长

专精：看这门语言最开始的设计思想是什么，理解语言的设计背景，运行环境，做了哪些优化，以及做了哪些妥协。比如 Ruby，它 care 的是程序员写代码的效率而不是程序运行的效率。

多长：熟悉很多不同类型的语言，理解语言的长处，使用对应的设计模式。

设计模式

MVC 架构
DRY
惯例优于设置

学一点设计

版本管理

CVS–>SVN–>Git

用 Git 就好了，使用 Github Flow。

开源

收获

朋友
声望
代码完善
自省
完善履历

VPS

自己搭建服务器也可以从中了解到整个网站的搭建。（不折腾会死星人）

了解网站全貌
部署自己的环境
学习 Linux
理解 HTTP
关注服务器安全
翻墙。。。

作品集（portfolio）

向其他人展示自己的才能

老板
潜在客户
潜在雇主
潜在朋友
任何人
自己

If you do it right, open sourcing code is great advertising for you and your company. 作品发布在 Github/dribbble，可以用 Github pages 显示。

突出 portfolio 的重点。

沟通

沟通是能力的一部分，针对目标听众，有方法，表达自己的想法

脚本语言

。。。

高效

消除重复的工作，考虑贡献，授权，优先级，精力管理。

最厉害的编程语言

…

高性能网站建设指南

2015-06-25T00:00:00+00:00

Steve Souders 《高性能网站建设指南》读书笔记

这本书是 08年印刷的，因此有些理论可能已经不适应现在的 Web 前端开发了。当然书中主要的理论还是适用的。

本书适合 Web 架构师、信息架构师、Web 开发人员及产品经理阅读和参考。我也相信产品汪可以在这里学到很多有趣并且实用的技能的。

首先这是 O’Reilly Media, Inc 系列的书，该系列的书非常值得阅读。

后端：分析用户请求、执行数据查询并对结果进行组织，形成浏览器可以呈现的内容；前端：负责将后端生成的内容通过网络发给客户端浏览器。

我们固有的印象是后端更复杂，以“后端开发”为荣，当有性能问题的时候也优先考虑后端上面的优化。而其实前端对网站性能的影响也是同样重大，我们需要正视前端的问题，并着手解决。

减少 HTTP 请求

最简单方式就是减少组件数量。

图片地图（Image Maps），联合所有到一个单独图片。
CSS Sprites 同图片地图一样，把所有图片合并在一起。
内联图片，就是把图片变成代码嵌入到 HTML 里面。
合并脚本和样式表。

使用内容发布网络

就是用 CDN 分摊流量。

优点：缩短响应时间，备份、扩展存储能力和进行缓存。有助于缓和 Web 流量峰值压力。

缺点：响应时间可能受到其他网站影响。无法直接控制组件服务器所带的特殊麻烦。

添加 Expires 头

简而言之是使用缓存减少 HTTP 请求数量。

压缩组件

压缩后传输的数据少了。

将样式表放在顶部

因为 DOM 绘制的时候，需要对应 CSS

将脚本放在底部

因为脚本是会阻碍页逐步显示的，阻塞页面的加载。

使用外部的 JavaScript 和 CSS

减少 DNS 请求

精简 JavaScript

避免重定向

移除重复脚本

使用 Ajax 可缓存

说话的艺术

2015-06-24T00:00:00+00:00

林语堂《说话的艺术》读书笔记

林语堂，大师，你懂的，介绍可以翻百度百科。

时间

时间很宝贵，时间即生命。“圣人不贵尺之璧而重寸之阴，时难得而易失也。”

诗人渥资华斯有句：尘世耗用我们的时间太多了，夙兴夜寐，赚钱挥霍，把我们的精力都浪费掉了。

历史之源

2015-06-16T00:00:00+00:00

[英国]约翰·H. 阿诺德《历史之源》读书笔记

历史永远不会真正地结束，历史是一个过程。

作者重申了他的观点：“历史是一个过程、一种论辩，是由关于过去的真实故事所构成的。

为何研究历史：

乐趣
将历史作为某种思考的工具
以不同的方式思考自我，推断我们人类作为个体是如何“产生”的，也是为了认识到以不同方式行事的可能性

１　关于谋杀和历史的问题

纯洁派：一个好上帝，他创造了灵魂；一个坏上帝，他创造了一切有形之物。

历史是一个过程、一种论辩，是由关于过去的真实故事所构成的。

２　从海豚之尾到政治之塔

海伦没有被诱拐，一直滞留在埃及，荷马实际上知道这一点，却选择接受一个与之不同的虚构故事。

３　“事实是怎样的”：真相、档案和对旧事物的热爱

伏尔泰：让细节见鬼去吧！后人会把它们全都抛开。它们是侵蚀宏伟著作的一种寄生虫。

４　声音与沉默

资料自己会说话。资料不会“自己说话”，它也从来没有这样做过。它们代表别人说话，那些已经死去、永远消逝的人。

５　千里之行

人们出于与当下相关的原因，在与当下相关的环境中行事。但他们的所做所为激起了波浪，超出其自身并向外扩展，又与无数其他人所激起的波浪相互作用。在这些相互碰撞的波浪所构成的模式中，历史就在某处发生了。

６　杀猫；或，过去是异邦吗？

历史是为了什么。

７　说出真相

“但这也是真的：故事能够拯救我们。”

牛顿新传

2015-06-10T00:00:00+00:00

[英] 罗布·艾利夫《牛顿新传》读书笔记

Rob Iliffe 萨塞克斯大学学术史和科学史教授。《科学史》杂志编辑。曾发表过多篇有关早期现代诗和科学是的学术文章。他还是一个有关牛顿的国际项目的编辑总监，该项目致力于整理出牛顿所有著作的完整电子版本。

牛顿 – 百科全书式的“全才”。

一位英格兰物理学家、数学家、天文学家、自然哲学家和炼金术士。

他不仅发表了《自然哲学的数学原理》和《光学》等著作，总结了他的科学贡献，也留下了五十多万字的炼金术手稿和一百多万字的神学手稿这些非科学的东西。

1 一位爱国者

享年 84 岁。

丰特奈尔承认，牛顿所有的重大发明几乎都是他二十岁出头的那几年做出的。（我等为之汗颜）

凯恩斯对牛顿的评价：最后一位术士，最后一位巴比伦人和苏美尔人，最后一位伟大的智者：他的眼光与将近一万年前就开始构建我们文化遗产的那些人的眼光相同，他用这样的眼光来观察着这个可见的、理性的世界。

2 哲学式玩耍

牛顿自小就喜欢折腾，手工很好。他“天天跟工匠们待在一起”，“非常准确地掌握了风车的制作机理，然后自己制作了一个真正的、完美的风车模型”。（牛顿和小风车的故事一定是某位坑爹货杜撰的）他艺术方面很出色，素描作诗也不错。

少年牛顿能够娴熟地使用机械工具，加之具有素描与设计的专长，这对他后来拥有出色的实验技能帮助极大。

非常罕见的是，牛顿具有成为一位伟大自然哲学家的所有素质，诸如“深邃的洞察力”，“坚定不移、百折不挠的解决问题的精神”，“延伸其推论［与］演绎链的巨大思维力量”，“无与伦比的代数技能以及其他使用符号的方法”。（=。= 评价都这么高真的好吗？）

牛顿和人打架，虽然不够人家健壮，但他斗志昂扬，打到对手求饶。

他年纪轻轻就回家放牛，母亲让他辍学。可是他从小热爱学习，为此还故意把放的牛弄丢？学习之勤奋以致校长免除其膳食费用。自小聪慧，奖学金随便拿，根本不可能会考试不及格。

3 神奇岁月

1665年初，牛顿基本上弄清了切线法与求积法是互逆的运算，也就是说，那时的牛顿已经掌握了微积分的基本定理。

牛顿会干的事情：用一根粗线压迫自己的眼球并使之变形。

4 挑剔的大众

舌战群儒。

5 真正的炼金术哲学家

牛顿先生的炼金理念，岂是我等能明白的？他站在巨人肩上，这是一封吐槽回信。

6 少数蒙选者之一

牛顿相信上帝选择了自己来发现基督教衰落的真相，并且坚信这项工作是他将从事的最最重要的工作。

7 神圣之书

返乡照顾母亲，顺便提出了第二运动定律，又顺便提出了第三运动定律。

《原理》最伟大之处是提出了万有引力，以实验作为数学定律的基础。

8 都市之中

。

9 万有之主

牛顿被认命为造币厂督办，有钱。他做这份工作做得相当好。然后出版了他的光学，继续与莱布尼兹作斗争。

10 马人与其他动物

1727年春，牛顿与世长辞。

Web

2015-06-09T00:00:00+00:00

摘自：https://github.com/markyun/My-blog/blob/master/Front-end-Developer-Questions/Questions-and-Answers/README.md 有删改。

#前端开发面试题（题目列表+答案完整版）

前言

本文总结了一些优质的前端面试题（多数源于网络），初学者阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，形成自己的知识链。万不可投机取巧，只求面试过关是错误的！

面试有几点需注意：(来源程劭非老师 github:@wintercn)

面试题目：根据你的等级和职位变化，入门级到专家级：广度↑、深度↑。
题目类型：技术视野、项目细节、理论知识，算法，开放性题，工作案例。
细节追问：可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种关联知识是长时期的学习，绝对不是临时记得住的。
回答问题再棒，面试官（可能是你面试职位的直接领导），会考虑我要不要这个人做我的同事？所以态度很重要。（感觉更像是相亲）
资深的工程师能把 absolute 和 relative 弄混，这样的人不要也罢，因为团队需要的是：你这个人具有可以依靠的才能（靠谱）。

前端开发面试知识点大纲：

HTML&CSS：
    对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端

JavaScript：
    数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。

其他：
   HTTP、WEB安全、正则、优化、重构、响应式、团队协作、可维护、SEO、UED、架构、职业生涯

作为一名前端工程师，无论工作年头长短都应该必须掌握的知识点：

此条由王子墨发表在前端随笔

1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

2、DOM操作 —— 如何添加、移除、移动、复制、创建和查找节点等。

3、事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。

4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。

5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。

6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型

7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们

8、浮动元素 —— 怎么使用它们、它们有什么问题以及怎么解决这些问题。

9、HTML与XHTML —— 二者有什么区别，你觉得应该使用哪一个并说出理由。

10、JSON —— 作用、用途、设计结构。

备注：

根据自己需要选择性阅读，面试题是对理论知识的总结，让自己学会应该如何表达。

资料答案不够正确和全面，欢迎补充答案、题目；最好是现在网上没有的。

格式不断修改更新中。

HTML

Doctype 作用? 严格模式与混杂模式如何区分？它们有何意义?

<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。

行内元素有哪些？块级元素有哪些？空(void)元素有那些？

CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的 display 值，
- 比如 div 默认 display 属性值为 “block”，成为“块级”元素；
- span 默认 display 属性值为 “inline”，是“行内”元素。
元素
- 行内元素有：a b span img input select strong（强调的语气）
- 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
- 知名的空元素：br hr img input link meta
- 鲜为人知的是：area base col command embed keygen param source track wbr

link 和@import 的区别是？

link属于XHTML标签，而@import是CSS提供的;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
link方式的样式的权重高于@import的权重.

浏览器的内核分别是什么?

IE浏览器的内核 Trident、Mozilla 的 Gecko、Chrome 的 Blink（WebKit 的分支）、Opera 内核原为 Presto，现为 Blink；

常见兼容性问题？

png24 位的图片在 IE6 浏览器上出现背景，解决方案是做成 PNG8.
浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的 * { margin: 0; padding: 0; } 来统一。
IE6 双边距 bug：块属性标签 float 后，又有横行的 margin 情况下，在 IE6 显示 margin 比设置的大。
浮动 IE 产生的双倍距离 #box { float: left; width: 10px; margin: 0 0 0 100px; }
- 这种情况之下 IE 会产生 20px 的距离，解决方案是在 float 的标签样式控制中加入 —— _display:inline; 将其转化为行内属性。(_这个符号只有 IE6 会识别)
渐进识别的方式，从总体中逐渐排除局部。
- 首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
- 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
CSS：
```
  .bb {
      background-color:#f1ee18; /*所有识别*/
      .background-color:#00deff\9; /*IE6、7、8识别*/
      +background-color:#a200ff; /*IE6、7识别*/
      _background-color:#1e0bd1; /*IE6识别*/
  }
```
IE 下,可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox 下，只能使用 getAttribute() 获取自定义属性。
- 解决方法：统一通过 getAttribute() 获取自定义属性。
IE下，even对象有 x，y 属性，但是没有 pageX，pageY 属性；Firefox下，event对象有pageX，pageY属性，但是没有x，y属性。
- 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示，
- 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不在具有 hover 和 active 了
- 解决方法是改变CSS属性的排列顺序：L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和

HTML5？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
绘画 Canvas
- 用于媒介回放的 video 和 audio 元素
- 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
- sessionStorage 的数据在浏览器关闭后自动删除
- 语意化更好的内容元素，比如 article、footer、header、nav、section
- 表单控件，calendar、date、time、email、url、search
- 新的技术webworker, websockt, Geolocation
移除的元素
- 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
- 对可用性产生负面影响的元素：frame，frameset，noframes；

支持 HTML5 新标签：

IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，

浏览器支持新标签后，还需要添加标签默认的样式：

当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架

  <!--[if lt IE 9]>
      <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
  <![endif]-->

如何区分： DOCTYPE声明\新增的结构元素\功能元素

语义化的理解？
- 用正确的标签做正确的事情！
- html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
- 在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
- 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
- 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
HTML5的离线储存？
- localStorage 长期存储数据，浏览器关闭后数据不丢失；
- sessionStorage 数据在浏览器关闭后自动删除。

(写)描述一段语义的 html 代码吧。

（HTML5 中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等）就是基于语义化设计原则）

<div id="header">
    <h1>标题< /h1>
    <h2>专注Web前端技术< /h2>
</div>

iframe 有那些缺点？

iframe 会阻塞主页面的 Onload 事件；
iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript 动态给 iframe 添加 src 属性值，这样可以可以绕开以上两个问题。

HTML5 的 form 如何关闭自动完成功能？

给不想要提示的 form 或下某个input 设置为 autocomplete=off。

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie 在浏览器和服务器间来回传递。 sessionStorage 和 localStorage 不会
sessionStorage 和 localStorage 的存储空间更大；
sessionStorage 和 localStorage 有更多丰富易用的接口；
sessionStorage 和 localStorage 各自独立的存储空间；

如何实现浏览器内多个标签页之间的通信? (阿里)

调用 localstorge、cookies 等本地存储方式

PS：浏览器在发送 post，get 请求的时候会带有 cookie，所以 cookie 不宜过大。

webSocket 如何兼容低浏览器？(阿里)

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、基于 multipart 编码发送 XHR 、基于长轮询的 XHR

CSS

介绍一下CSS的盒子模型？

（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的 content 部分包含了 border 和 pading；
（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)。
- W3C 标准盒模型，width 不包括 padding 与其之外的。
- IE 盒模型包含至 border。

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

* 1. id选择器（ # myid） 2. 类选择器（.myclassname） 3. 标签选择器（div, h1, p） 4. 相邻选择器（h1 + p） 5. 子选择器（ul < li） 6. 后代选择器（li a） 7. 通配符选择器（ * ） 8. 属性选择器（a[rel = “external”]） 9. 伪类选择器（a: hover, li: nth - child）

可继承的样式： font-size font-family color, UL LI DL DD DT;
不可继承的样式：border padding margin width height ;
优先级就近原则，同权重情况下样式定义最近者为准;

载入样式以最后载入的定位为准;

优先级为: !important > 内联 > id > class > tag

CSS3 新增伪类举例：

  p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
  p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
  p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
  p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
  p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
  :enabled  :disabled 控制表单控件的禁用状态。
  :checked        单选框或复选框被选中。

如何居中div？如何居中一个浮动元素？

给div设置一个宽度，然后添加 margin:0 auto; 属性

div{ width: 200px; margin: 0 auto; }

居中一个浮动元素

 确定容器的宽高 宽500 高 300 的层
 设置层的外边距

 .div {
     width: 500px;
     height: 300px; //高度可以不设
     margin: -150px 0 0 -250px;
     position: relative;相对定位
     background-color: pink; //方便看效果
     left: 50%;
     top: 50%;
 }

列出 display 的值，说明他们的作用。position 的值， relative 和 absolute 定位原点是？

1.
    block 象块类型元素一样显示。
    none 缺省值。象行内元素类型一样显示。
    inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
    list-item 象块类型元素一样显示，并添加样式列表标记。

2.
    * absolute
    生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

    * fixed （老IE不支持）
    生成绝对定位的元素，相对于浏览器窗口进行定位。

    * relative
    生成相对定位的元素，相对于其正常位置进行定位。

    * static  默认值。没有定位，元素出现在正常的流中
    *（忽略 top, bottom, left, right z-index 声明）。

    * inherit 规定从父元素继承 position 属性的值。

CSS3有哪些新特性？

CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg); //旋转,缩放,定位,倾斜
增加了更多的CSS选择器  多背景 rgba

一个满屏品字布局如何设计?

经常遇到的CSS的兼容性有哪些？原因，解决方法是什么？

为什么要初始化CSS样式。

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）

淘宝的样式初始化：

  body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
  body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
  h1, h2, h3, h4, h5, h6{ font-size:100%; }
  address, cite, dfn, em, var { font-style:normal; }
  code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
  small{ font-size:12px; }
  ul, ol { list-style:none; }
  a { text-decoration:none; }
  a:hover { text-decoration:underline; }
  sup { vertical-align:text-top; }
  sub{ vertical-align:text-bottom; }
  legend { color:#000; }
  fieldset, img { border:0; }
  button, input, select, textarea { font-size:100%; }
  table { border-collapse:collapse; border-spacing:0; }

absolute 的 containing block 计算方式跟正常流有什么不同？

position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

对BFC规范的理解？

（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关 系和相互作用。）

解释下浮动和它的工作原理？清除浮动的技巧

用过媒体查询，针对移动端的布局吗？

使用 CSS 预处理器吗？喜欢那个？

SASS

如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

多数显示器默认频率是60Hz，即 1 秒刷新 60 次，所以理论上最小间隔为 1/60＊1000ms ＝ 16.7ms

`display:inline-block` 什么时候会显示间隙？(携程)

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

CSS animation 与 CSS transition 有何区别

animation 功能与 transition 都能通过改变 css 的属性值来实现动画效果，他们的不同之处是：transition 只能指定属性的开始值和结束值来达到渐变，不能像 animation 那样定义关键帧来实现比较复杂的动画效果。

transition 从 :hover 延伸出来
animation 从 flash 延伸出来

transition 关注的是 CSS property 的变化，property 值和时间的关系是一个三次贝塞尔曲线。
animation 作用于元素本身而不是样式属性，可以使用关键帧的概念，应该说可以实现更自由的动画效果。

JavaScript

JavaScript原型，原型链 ? 有什么特点？

eval是做什么的？

它的功能是把对应的字符串解析成JS代码并运行；
应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。

null，undefined 的区别？

写一个通用的事件侦听器函数。

// event(事件)工具集，来源：github.com/markyun
markyun.Event = {
	// 页面加载完成后
	readyEvent : function(fn) {
		if (fn==null) {
			fn=document;
		}
		var oldonload = window.onload;
		if (typeof window.onload != 'function') {
			window.onload = fn;
		} else {
			window.onload = function() {
				oldonload();
				fn();
			};
		}
	},
	// 视能力分别使用dom0||dom2||IE方式 来绑定事件
	// 参数： 操作的元素,事件名称 ,事件处理程序
	addEvent : function(element, type, handler) {
		if (element.addEventListener) {
			//事件类型、需要执行的函数、是否捕捉
			element.addEventListener(type, handler, false);
		} else if (element.attachEvent) {
			element.attachEvent('on' + type, function() {
				handler.call(element);
			});
		} else {
			element['on' + type] = handler;
		}
	},
	// 移除事件
	removeEvent : function(element, type, handler) {
		if (element.removeEventListener) {
			element.removeEventListener(type, handler, false);
		} else if (element.datachEvent) {
			element.detachEvent('on' + type, handler);
		} else {
			element['on' + type] = null;
		}
	},
	// 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
	stopPropagation : function(ev) {
		if (ev.stopPropagation) {
			ev.stopPropagation();
		} else {
			ev.cancelBubble = true;
		}
	},
	// 取消事件的默认行为
	preventDefault : function(event) {
		if (event.preventDefault) {
			event.preventDefault();
		} else {
			event.returnValue = false;
		}
	},
	// 获取事件目标
	getTarget : function(event) {
		return event.target || event.srcElement;
	},
	// 获取event对象的引用，取到事件的所有信息，确保随时能使用event；
	getEvent : function(e) {
		var ev = e || window.event;
		if (!ev) {
			var c = this.getEvent.caller;
			while (c) {
				ev = c.arguments[0];
				if (ev && Event == ev.constructor) {
					break;
				}
				c = c.caller;
			}
		}
		return ev;
	}
};

Node.js 的适用场景？

高并发、聊天、实时消息推送

介绍js的基本数据类型。

number,string,boolean,object,undefined

Javascript如何实现继承？

通过原型和构造器

[“1”, “2”, “3”].map(parseInt) 答案是多少？

[1, NaN, NaN] 因为 parseInt 需要两个参数 (val, radix)，其中 radix 表示解析时用的基数。map 传了 3 个 (element, index, array)，对应的 radix 不合法导致解析失败。

如何创建一个对象? （画出此对象的内存图）

function Person(name, age) {
	this.name = name;
	this.age = age;
	this.sing = function() { alert(this.name) }
}

谈谈This对象的理解。

this 是 js 的一个关键字，随着函数使用场合不同，this的值会发生变化。

但是有一个总原则，那就是 this 指的是调用函数的那个对象。

this 一般情况下：是全局对象 Global。 作为方法调用，那么 this 就是指这个对象

事件是？IE 与火狐的事件机制有什么区别？如何阻止冒泡？

我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。
事件处理机制：IE是事件冒泡、火狐是 事件捕获；
ev.stopPropagation();

什么是闭包（closure），为什么要用它？

执行 say667() 后，say667() 闭包内部变量会存在，而闭包内部函数的内部变量不会存在。使得 Javascript 的垃圾回收机制 GC 不会收回 say667() 所占用的资源，因为 say667() 的内部函数的执行需要依赖 say667() 中的变量。这是对闭包作用的非常直白的描述.

function say667() {
	// Local variable that ends up within closure
	var num = 666;
	var sayAlert = function() { alert(num); }
	num++;
	return sayAlert;
}

var sayAlert = say667();
sayAlert()//执行结果应该弹出的667

“use strict”;是什么意思 ? 使用它的好处和坏处分别是什么？

如何判断一个对象是否属于某个类？

   使用instanceof （待完善）

    if(a instanceof Person){
        alert('yes');
    }

new操作符具体干了什么呢?

      1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
      2、属性和方法被加入到 this 引用的对象中。
      3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

 var obj  = {};
 obj.__proto__ = Base.prototype;
 Base.call(obj);

Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
```
 hasOwnProperty
```

JSON 的了解？

 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
 它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小
 {"age":"12", "name":"back"}

js延迟加载的方式有哪些？

 defer和async、动态创建DOM方式（用得最多）、按需异步载入js

ajax 是什么?
同步和异步的区别?

如何解决跨域问题?

 jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面

模块化怎么做？

立即执行函数,不暴露私有成员

     var module1 = (function(){
         var _count = 0;
         var m1 = function(){
         　　//...
         };
         var m2 = function(){
         　　//...
         };
         return {
         　　m1 : m1,
         　　m2 : m2
         };
     　　})();

AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？

异步加载的方式有哪些？

   (1) defer，只支持IE

   (2) async：

   (3) 创建script，插入到DOM中，加载完毕后callBack

documen.write和 innerHTML的区别

document.write只能重绘整个页面

innerHTML可以重绘页面的一部分

.call() 和 .apply() 的区别？

   例子中用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);

   注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。

     function add(a,b)
     {
         alert(a+b);
     }

     function sub(a,b)
     {
         alert(a-b);
     }

     add.call(sub,3,1);

Jquery与jQuery UI 有啥区别？

 *jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。

 *jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。
  提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等

JQuery的源码看过吗？能不能简单说一下它的实现原理？
jquery 中如何将数组转化为json字符串，然后再转化回来？

jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：

	$.fn.stringifyArray = function(array) {
		return JSON.stringify(array)
	}

	$.fn.parseArray = function(array) {
		return JSON.parse(array)
	}

	然后调用：
	$("").stringifyArray(array)

针对 jQuery 的优化方法？

 *基于Class的选择性的性能相对于Id选择器开销很大，因为需遍历所有DOM元素。

 *频繁操作的DOM，先缓存起来再操作。用Jquery的链式调用更好。
  比如：var str=$("a").attr("href");

 *for (var i = size; i < arr.length; i++) {}
  for 循环每一次循环都查找了数组 (arr) 的.length 属性，在开始循环的时候设置一个变量来存储这个数字，可以让循环跑得更快：
  for (var i = size, length = arr.length; i < length; i++) {}

JavaScript中的作用域与变量声明提升？
如何编写高性能的Javascript？

那些操作会造成内存泄漏？

 内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
 垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

 setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
 闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

JQuery一个对象可以同时绑定多个事件，这是如何实现的？

如何判断当前脚本运行在浏览器还是node环境中？（阿里）

  通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中

BOM 和 DOM 的区别

  浏览器支持浏览器对象模型（BOM），允许对浏览器窗体的访问和操作。使用BOM，开发者可以移动窗体，改变状态栏中的文字，以及实现其他与页面内容不直接相关的操作。

  BOM
  1. BOM是Browser Object Model的缩写， 即浏览器对象模型。
  2. BOM没有相关标准。
  3. BOM的最根本对象是window。

  DOM

  1. DOM是Document Object Model的缩写， 即文档对象模型。
  2. DOM是W3C的标准。
  3. DOM最根本对象是document（ 实际上是window.document）。

  BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：

      弹出新的浏览器窗口
      移动、关闭浏览器窗口以及调整窗口大小
      提供 Web 浏览器详细信息的定位对象
      提供用户屏幕分辨率详细信息的屏幕对象
      对 cookie 的支持
      IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象

  window对象对应着浏览器窗口本身，这个对象的属性和方法通常被称为BOM

其他问题

你遇到过比较难的技术问题是？你是如何解决的？
常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
页面重构怎么操作？
列举IE 与其他浏览器不一样的特性？
99%的网站都需要被重构是那本书上写的？
什么叫优雅降级和渐进增强？
WEB应用从服务器主动推送Data到客户端有那些方式？

对Node的优点和缺点提出了自己的看法？

  *（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，
    因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
    此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，
    因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。

  *（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，
    而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

你有哪些性能优化的方法？

   （看雅虎14条性能优化原则）。

    （1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

    （2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

    （3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

    （4） 当需要设置的样式很多时设置className而不是直接操作style。

    （5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

    （6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

    （7） 图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。

    （8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

http状态码有那些？分别代表是什么意思？

  100-199 用于指定客户端应相应的某些动作。
  200-299 用于表示请求成功。
  300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
  400-499 用于指出客户端的错误。400  1、语义有误，当前请求无法被服务器理解。401 当前请求需要用户验证 403  服务器已经理解请求，但是拒绝执行它。
  500-599 用于支持服务器错误。 503 – 服务不可用

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

      查找浏览器缓存
      DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求
      进行HTTP协议会话
      客户端发送报头(请求报头)
      服务器回馈报头(响应报头)
      html文档开始下载
      文档树建立，根据标记请求所需指定MIME类型的文件
      文件显示
      [
      浏览器这边做的工作大致分为以下几步：

      加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。

      解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）
      }

除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？
你常用的开发工具是什么，为什么？

对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

       前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。
      1、实现界面交互
      2、提升用户体验
      3、有了Node.js，前端可以实现服务端的一些事情

  前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好，

   参与项目，快速高质量完成实现效果图，精确到1px；

   与团队成员，UI设计，产品经理的沟通；

   做好的页面结构，页面重构和用户体验；

   处理hack，兼容、写出优美的代码格式；

   针对服务器的优化、拥抱最新前端技术。

加班的看法？

  加班就像借钱，原则应当是------救急不救穷

平时如何管理你的项目？

          先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；

          编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；

          标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；

          页面进行标注（例如 页面 模块 开始和结束）；

          CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；

          JS 分文件夹存放 命名以该JS功能为准的英文翻译。

          图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理

如何设计突发大规模并发架构？
说说最近最流行的一些东西吧？常去哪些网站？
```
      Node.js、Mongodb、npm、MVVM、MEAN、three.js
```

移动端（Android IOS）怎么做好用户体验?

      清晰的视觉纵线、信息的分组、极致的减法、
      利用选择代替输入、标签及文字的排布方式、
      依靠明文确认密码、合理的键盘利用、

你在现在的团队处于什么样的角色，起到了什么明显的作用？
你认为怎样才是全端工程师（Full Stack developer）？
介绍一个你最得意的作品吧？
你的优点是什么？缺点是什么？
如何管理前端团队?
最近在学什么？能谈谈你未来3，5年给自己的规划吗？

想问公司的问题？

      问公司问题：
      目前关注哪些最新的Web前端技术（未来的发展方向）？
      前端团队如何工作的（实现一个产品的流程）？
      公司的薪资结构是什么样子的？

优质网站推荐

极客标签： http://www.gbtags.com/
码农周刊： http://weekly.manong.io/issues/
前端周刊： http://www.feweekly.com/issues
极客头条： http://geek.csdn.net/
Startup News：http://news.dbanotes.net/
Hacker News： https://news.ycombinator.com/news
InfoQ： http://www.infoq.com/
w3cplus： http://www.w3cplus.com/
Stack Overflow： http://stackoverflow.com/
Atp： http://atp-posts.b0.upaiyun.com/posts/

THE WILLPOWER INSTINCT

2015-06-03T00:00:00+00:00

[美] 凯利·麦格尼格尔《自控力》读书笔记

自控力是对一个人来说非常重要的能力。自控力，一个人对自己自身冲动，感情，欲望的自我控制能力。自控力是一个人成熟度的体现，没有自控力就难以有良好的习惯。

《自控力》这本书是斯坦福大学一门叫做“意志力科学”课程的基础，作者凯利•麦格尼格尔是一位著名的健康心理学家，也是医学健康促进项目的健康教育家，她的工作就是帮助人们管理压力，并在生活中做积极的改变。

意志力入门

你必须知道自己为啥失败，我要做，我不要，我想要。自控只是一时的行为，而力不从心与失控却是常态。提高自控力的最有效途径在于，弄清自己如何失控，为何失控。自知之明。

我要做，我不要，我想要

牢记自己真正想要什么。意志力是一种抑制冲动的能力。能够更好地控制自己的注意力，情绪和行为的人，能更幸福。脑袋里有两个自我，一个任意妄为、及时享乐，另一个克服冲动、深谋远虑。要专注，杜绝因为心理想其他而冲动选择。尽早发现冲动的苗头，意识到自己在做什么，阻止自己。

训练大脑增强自控力，比如说冥想。冥想让更多的血液流进前额皮质。冥想的时候不要太分心，不要忘了最初的目标。（5分钟冥想，把注意力集中在呼吸上）

意志力的本能

人生来就能抵制奶酪蛋糕的诱惑。即使你全身上下都在说我想要，你也要说出“我不想”。因为你不可能真的消灭一个欲望，因为欲望在你的内心和身体里，没有办法自动消失。三思而后行。

任何给你的身心带来压力的东西都会影响自控力的生理基础，甚至摧毁你的意志力。

减压方法：锻炼、良好睡眠、健康饮食、和朋友共度良好时光等。

压力和自控的生理学基础是互相排斥的。

累到无力抵抗

自控力是有极限的，每次使用都会消耗，并且自控是很消耗能量的。疲惫不是一种身体反应，而是一种感觉，一种情绪。

我们不能控制所有事，提高意志力的唯一方法就是提升我们的极限，像肌肉一样。

容忍罪恶

当罪恶看起来像美德。对补偿的渴望常常使我们堕落，因为我们很容易认为，纵容自己就是对美德最好的奖励。这是向诱惑屈服。

减肥锻炼可以多吃吗？当然不可以。

道德许可是一种身份危害。通过付钱把责任推给别人，逃避。

大脑的弥天大谎

奖励的承诺

那又如何

情绪低落使人屈服于诱惑

出售未来

及时享乐

传染

社会与群体

别读这章

我不要的局限性。

参与感

2015-05-27T00:00:00+00:00

黎万强《参与感》阅读笔记

《参与感：小米口碑营销内部手册》这本书是黎万强在小米四年的工作笔记，也是十年前雷总布置给他的作业。小米品牌快速崛起的背后是因为社会化媒体下的口碑传播，而小米口碑的核心关键词是“参与感”。

小米是用什么方法让口碑在社会化媒体上快速引爆？

参与感，参与感，参与感。重要的事情说三遍。

黎万强，小米科技联合创始人。 小米网负责人，负责小米的市场营销、电商和服务。原金山词霸总经理，曾任金山软件设计中心设计总监，建立了国内最早的软件用户体验设计团队。互联网新营销旗手，参与感、手机控、F码、米粉节等互联网热词的创造者。曾被《财富》评为“中国40岁以下的商界精英”，获得《第一财经周刊》评选的“2013中国商业创新50人”，获得光华龙腾奖2013年第九届“中国设计十大杰出青年”。

–摘自百度百科。

互联网思维就是口碑为王
团队第一
忠诚度大于知名度
做自媒体
人比制度重要
一图胜千言

参与感

参与感就是讲做一个产品，让人参与进来，与产品一起成长，产品服务于人。

雷军在创建小米之前已经有人有钱有声望，创建小米，纯粹就是因为梦想。所以热爱是最好的老师。小米发布的时候没有做任何营销活动，因为 MIUI 通过一年的时间积累了 50W 用户。

参与感的三三法则：战略：

做爆品
做粉丝
做自媒体

三个战术为：

开放参与节点
设计互动方式
扩散口碑事件

ps：黎万强曾一年两次要离职，雷军就约他喝酒，两瓶白酒喝趴下了，他回家内疚就不提离职了。

雷军曾说过的三个创业成功的关键：

选个大市场
组件最优秀的团队
拿到花不完的钱

小米因为专注于口碑，每周快速迭代，全员客服。专注，极致，口碑，快。

发动机：产品
加速器：社会化媒体
关系链：用户关系

产品

和用户做朋友。从功能式->品牌式->体验式->参与式。用户模式大于一切工程师吗。

用户体验是：好用好看。为谁而设计

极致就是把自己逼疯。

最重要的是团队，其次才是产品，马云成功的关键也是他的18个联合创始人。一个靠谱的工程师顶10个，可能是100个。

品牌

产品思维，潜入大脑。用户对品牌的真实感很在意，请讲真话。把产品的美誉做到用户的心里去。因为米粉，所以小米。

小米：为发烧而生，谷歌：整合全球信息，使人人皆可访问并从中受益，阿里巴巴：让天下没有难做的生意。纯粹，just do it。

好产品是1，包装、海报、营销、推广都是后面的0。

新媒体

让自己的公司成为自媒体。先做服务，再做营销。内容品质最重要讲人话。小米的媒体运营是让员工成为粉丝，尝试让粉丝成为员工。

微博，QQ 空间都是值得用来推广的地方，微信公众号更关键。

小米的工程师有硬性泡小米论坛的义务。

服务

人比制度重要，让客服对企业有归属感，热爱这份工作。小米的商业模式是做好服务收消费，所以必须把服务做好。小米之家做得像家一样的感觉。小米有极速配送，1小时快修敢赔。发货要够快，资讯响应要够快，售后维修要够快，核心：快。

提高工作效率，人是环境的孩子。

设计

直接，切中要害。设计要有期待感。

简单直接，可感知的情怀。

一看二问三 PK。好设计是由内向外都会包装自己。

设计三板斧：

坚持战略
死磕到底
解放团队

有玩者之心。

啊黎笔记

第一现场的参与感，科技要有慰藉人心的力量，像艺术家创作般热爱

史玉柱自述读书笔记

2015-05-20T00:00:00+00:00

优米网《史玉柱自述》阅读笔记

史玉柱自述

1. 营销：

脑白金10年广告你要卖给谁？像脑白金，它要卖给老人家的子女。通过送礼，通过脍炙人口的语言，积累，反复记忆，定位：推销产品。

脑白金十差广告之首，因为很烦。脑白金用卡通人物只是因为很多奇怪的限制。播一年的广告，有计划，比如说两天播一次或者针对购买旺季播放

2. 做最有效的广告

使用什么广告媒体，降低广告成本，铺天盖地的广告，猪圈上都有，各种放小广告。广告的概念：送礼，改善睡眠。摸索出营销策略，改广告。跟消费者谈心。

3. 企业管理

同一个时间只做好一件事，好游戏也是改出来的。

网游：

让玩家有荣誉感
有钱人为好友花钱
男人为女人花钱

研究消费者的心理，靠口碑宣传，大家都在玩。去检验书里面的理论，去了解，然后去做。靠心血浇灌成功。

4. 如何做好产品

决策失误的代价，该做什么不该做什么。巨人大厦的失败

5. 对网游的体会

最重要的是游戏性，玩家需求—— 荣耀。目标，互动，惊喜。不搞促销降价。

6. 经验与教训

中国的民族性，导致创业初期股权一定不能分散。不要做超出自己能力的事，没有把握的事不要做。高负债对公司来说有很大的危险，企业法人会因此发生金融欺诈。你的老师是消费者。收入与自我价值的实现。营销的基础是好产品。

7. 逆境成长

失败总结的经验是真实的。

8. 在中国成长

做自己喜欢的事，只认功劳。失败有各种可能。

9. 创新与市场竞争

创新是以企业为基础，从实际出发。市场与竞争从消费者的需求出发。市场的竞争是人才的竞争。把一个产品的好处发挥出来，专注于此。做自己了解的事。

10. 人生

人生无常，有得有失。

Just For Fun 读书笔记

2015-05-12T00:00:00+00:00

Linus Torvalds / David Diamond 《Just for Fun》阅读笔记

Just For Fun by Linux, 这本书我已经不太记得什么时候开始看的了，印象中看了好久，这几天终于看完了。

这本书是 Linus Torvalds的自传。Linux 是 Linux 内核的最早作者，随后发起了这个开源项目，担任Linux内核的首要架构师与项目协调者，是当今世界最著名的电脑程序员、黑客之一。他还发起了Git这个开源项目，并为主要的开发者。不管是 Linux 还是 Git，对工程师来说都是伟大的作品，能造成一个已经举世无双，他造出了这两个。

生活的意义他写的这本书很有意思，比如

“我们可以在第一章里对人们解释生命的意义何在。这样可以吸引住他们。一旦他们被吸引住，并且付钱买了书，剩下的章节里我们就可以胡扯了。”

还有

“人类的追求分成三个阶段。第一是生存，第二是社会秩序，第三是娱乐。最明显的例子是性，它开始只是一种延续生命的手段，后来变成了一种社会行为，比如你要结婚才能得到性。再后来，它成了一种娱乐。”

这也是 LInux 认为的生活的意义。“归根结底，我们就是为了开心”。

孩提时代 Linux 对自己的评价很客观，他书的第一句话就是，“我是一个长相丑陋的孩子”。然后他从小就接触计算机。这让我觉得，但凡在计算机领域有极高造诣的，儿童时代就接触这方面的东西了。当然有时候也让我感觉到，一个人成人所处的领域其孩提时代所接触的多少有些关系。总所周知，接下来的剧情肯定是沉迷，然后在知识的海洋，然后长达后又因缘巧合在这方面领域驰骋。

Linux 诞生 Linux 阐述他接触的电脑，电脑这玩意啊，是个人一开始接触都会喜欢的。电脑刚出来那会，很贵，普通人买不起，所以 Linux 就在学校的机房玩。之后他买了台电脑，开始学习编程，学习编写操作系统。他上大学时把精力放在了学习上，然后还去参军。当他分期付款买了 386 后，就更投入编程工作了。从 BIOS 开始了解，还有懂 CPU 的运行机制。Linux 操作系统也就这样开始了。

他对编程也是相当狂热，那时候他也是个书呆子。沉迷于解决计算机问题。一开始也因为终端的复杂想要放弃。然后大部分时间就是在编程。节奏是：编程—睡觉—编程—睡觉—编程—吃饭—编程—睡觉—编程—洗澡。这样的生活和我现在差不多。Linux 就这么造出来了，接着他干的一件事是开放源代码。因为开发了源代码，很多人一起参与了 Linux 系统的建设工作。Linux 的用户也越来越多。

生活 “在那个时候，只要一想到姑娘，Linux系统就变得不再重要了。在某种程度上，今天也还是这样。”

哈哈，最后当然也许我是错的。

jQuery datepicker

2014-11-08T00:00:00+00:00

jQuery UI datepicker 的一些实际应用. 演示效果请移步: http://plnkr.co/edit/q5mLhKQ3S1KJP8KXg6dn

第二个日期自动弹出.

两个日历的时候(从xx日期到xx日期), 选择第一个日期后第二个日期将会弹出.

html:

<input type="text" class="datepicker in">
<input type="text" class="datepicker out">

Javascript:

$( ".datepicker" ).datepicker({
	onSelect: function(dateText, inst) {
		if ($(this).hasClass("in")) {
			setTimeout(function() { $('.out').focus(); }, 0);
		}
	}
});

第二个日期的最小值

当选择了第一个日期后, 第二个的日期应该大于第一个的日期, 设置第二个日期的最小值

html:

<input type="text" class="datepicker in">
<input type="text" class="datepicker out">

Javascript:

$( ".datepicker" ).datepicker({
	onSelect: function(dateText, inst) {
		$( ".out" ).datepicker("option", "minDate", new Date($(".in").val()) );
	}
});

在移动设备上

在移动设备上为了不弹出键盘

html:

<input type="text" class="datepicker">

Javascript:

$( ".datepicker" ).datepicker().attr('readonly', 'readonly');

其他的建议参考官方文档

http://api.jqueryui.com/datepicker/

Sass

2014-08-25T00:00:00+00:00

Sass 介绍

Syntactically Awesome Stylesheets (Sass)

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

快捷安装

如果写好了 Gemfile, 直接在该目录下 bundle install 即可.

Gemfile 文件参考:

gem "compass", "~> 1.0.1"
gem "sass", "~> 3.4.5"
gem "susy", "~> 2.1.3"

SASS 与 SCSS 区别:

SASS:

#sidebar
	width: 30%
	background-color: #faa

*.sass 文件

SCSS:

#sidebar {
	width: 30%;
	background-color: #faa;
}

*.scss 文件

Sass 安装

$ [sudo] gem install compass
$ [sudo] gem install sass
$ [sudo] gem install susy

如果直接用 gem install 安装会安装最新版, 最新版不知道什么原因没有办法使用.

基本命令

创建工程:

$ compass create --bare --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "images"

$ compass create pp -r susy -u susy

监控:

$ compass watch

为什么使用 Sass

缩短开发时间。
“不要重复自己” (DRY) 的准则。
使代码更加清晰易读。

References:

Sass: Syntactically Awesome Style Sheets. http://sass-lang.com/
Sass vs. SCSS: which syntax is better?. http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better

Ubuntu ssh

2014-03-19T00:00:00+00:00

Ubuntu 环境下 SSH 的安装及使用

SSH是指Secure Shell,是一种安全的传输协议，Ubuntu客户端可以通过SSH访问远程服务器。SSH的简介和工作机制可参看上篇文章 SSH简介及工作机制。

安装服务端

Ubuntu 安装 SSH Server:

$ sudo apt-get install openssh-server

确认是否开启服务

$ ps -e | grep ssh

如果看到 sshd 那说明 ssh-server 已经启动了

如果没有则可以这样启动:

$ sudo /etc/init.d/ssh start

References:

JerryHe. Ubuntu环境下SSH的安装及使用

[转载]Web Developer

2014-01-31T00:00:00+00:00

From: 王子墨 如何成为一名优秀的web前端工程师（前端攻城师）

如何成为一名优秀的web前端工程师（前端攻城师）？

程序设计之道无远弗届，御晨风而返。———— 杰佛瑞 · 詹姆士

我所遇到的前端程序员分两种：
第一种一直在问：如何学习前端？
第二种总说：前端很简单，就那么一点东西。

我从没有听到有人问：如何做一名优秀、甚至卓越的WEB前端工程师。

何为：前端工程师？

前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。
Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript！
它要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。
随着近两三年来RIA（Rich Internet Applications的缩写，中文含义为：丰富的因特网应用程序）的流行和普及带来的诸如：Flash/Flex，Silverlight、XML和服务器端语言（PHP、ASP.NET，JSP、Python）等语言，前端开发工程师也需要掌握。

前端开发的入门门槛其实很低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。
HTML 甚至不是一门语言，他仅仅是简单的标记语言！
CSS 只是无类型的样式修饰语言。当然可以勉强算作弱类型语言。
Javascript 的基础部分相对来说不难，入手还算快。

也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。

Web前端技术有一些江湖气，知识点过于琐碎，技术价值观的博弈也难分伯仲，即全局的系统的知识结构并未成体系，这些因素也客观上影响了“正统“前端技术的沉淀！而且各种“奇技淫巧”被滥用，前端技术知识的传承也过于泛泛，新人难看清时局把握主次。因此，前端技术领域，为自己觅得一个靠谱的师兄，重要性要盖过项目、团队、公司、甚至薪水。

另一方面，正如前面所说，前端开发是个非常新的职业，对一些规范和最佳实践的研究都处于探索阶段。
总有新的灵感和技术不时闪现出来，例如CSS sprite、负边距布局、栅格布局等；
各种JavaScript框架层出不穷，为整个前端开发领域注入了巨大的活力；
浏览器大战也越来越白热化，跨浏览器兼容方案依然是五花八门。
为了满足“高可维护性”的需要，需要更深入、更系统地去掌握前端知识，这样才可能创建一个好的前端架构，保证代码的质量。

随着手持设备的迅猛发展，带动了 HTML5行业标准的快速发展。web领域的技术，大概有10年都没有大的更新了！
现在市场很需要优秀的、高级的前端工程师。
一方面是因为这是一个比较新的细分行业，而且前端程序员大都自学一部分，知识结构不系统；另一方面，大学里面没有这种课程，最最重要的是：北大青鸟这类培训机构也没有专门的前端工程师的培训课程！！

吴亮在《JavaScript 王者归来》第一张的序里面说：大多数程序员认为 Javascript 过于简陋，只适合一些网页上面花哨的表现，所以不愿花费精力去学习，或者以为不学习就能掌握。
实际上，一门语言是否脚本语言，往往是她的设计目标决定，简单与复杂并不是区分脚本语言和非脚本语言的标准。
事实上，在脚本语言里面，Javascript 属于相当复杂的一门语言，他的复杂度即使放在非脚本语言中来衡量，也是一门相当复杂的语言！
Javascript 的复杂度不逊色于 Perl 和 Python！

如何学习前端知识？

我们生活在一个充满规则的宇宙里面。社会秩序按照规则运行，计算机语言几乎全部是规则的集合。计算机前辈们定义规则，规则约束我们，我们用规则控制数据。大部分时候，对数据的合理控制，来自于你对规则的掌握。

学习 HTML，CSS 应该先跟着书仔细、扎实的学一遍。然后就需要做大量的练习，做各种常规的、奇怪的、大量的布局练习来捆固、理解自己的知识。
而学习 Javascript 首先要知道这门语言可以做什么，不能做什么，擅长做什么，不擅长做什么！
如果你只想当一个普通的前端程序员，你只需要记住大部分 Javascript 函数，做一些练习就可以了。
如果你想当深入了解Javascript，你需要了解 Javascript 的原理，机制。需要知道他们的本源，需要深刻了解 Javascript 基于对象的本质。
还需要深刻了解浏览器宿主下的 Javascript 的行为、特性。

因为历史原因，Javascript一直不被重视，有点像被收养的一般！所以他有很多缺点，各个宿主环境下的行为不统一、内存溢出问题、执行效率低下等问题。
作为一个优秀的前端工程师还需要深入了解、以及学会处理 Javascript 的这些缺陷。

那么一名优秀的、甚至卓越的前端开发工程师的具备什么条件？

首先，优秀的Web前端开发工程师要在知识体系上既要有广度和深度！做到这两点，其实很难。所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。技术非黑即白，只有对和错，而技巧则见仁见智。
在以前，会一点Photoshop和Dreamweaver的操作，就可以制作网页。
现在，只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。
Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好。
Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。

其次，优秀的Web前端开发工程师应该具备快速学习能力。Web发展的很快，甚至可以说这些技术几乎每天都在变化！如果没有快速学习能力，就跟不上Web发展的步伐。前端工程师必须不断提升自己，不断学习新技术、新模式；仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而前端工程师的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。
说到这里，我想起了一个大师说过的一句话：对于新手来说，新技术就是新技术。
对于一个高手来说，新技术不过是就技术的延伸。
再者，优秀的前端工程师需要具备良好的沟通能力，因为前端工程师至少都要满足四类客户的需求。

1、产品经理。这些是负责策划应用程序的一群人。他们会想出很多新鲜的、奇怪的、甚至是不可是实现的应用。一般来说，产品经理都追求丰富的功能。

2、UI设计师。这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。一般来说，UI设计师于流畅靓丽、但并不容易实现的用户界面，而且他们经常不满前端工程师造成 1px 的误差。

3、项目经理。这些人负责实际地运行和维护应用程序。项目管理的主要关注点，无外乎正常运行时间、应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化，以及不在升级更新时引入新问题。

4、最终用户。指的是应用程序的主要消费者。尽管前端工程师不会经常与最终用户打交道，但他们的反馈意见至关重要。最终用户要求最多的就是对个人有用的功能，以及竞争性产品所具备的功能。

Yahoo 公司，YUI 的开发工程师 Nicholas C. Zakas 认为：
前端工程师是计算机科学职业领域中最复杂的一个工种。绝大多数传统的编程思想已经不适用了，为了在多种平台中使用，多种技术都借鉴了大量软科学的知识和理念。成为优秀前端工程师所要具备的专业技术，涉及到广阔而复杂的领域，这些领域又会因为你最终必须服务的各方的介入而变得更加复杂。专业技术可能会引领你进入成为前端工程师的大门，但只有运用该技术创造的应用程序以及你跟他人并肩协同的能力，才会真正让你变得优秀。

————————————

关于书籍：
HTML、CSS 类别书籍，都是大同小异，在当当网、卓越网搜索一下很多推荐。如果感觉学的差不多了，可以关注一下《CSS禅意花园》，这个很有影响力。
Javascript 的书籍推荐看老外写的，国内很多 Javascript 书籍的作者对 Javascript 语言了解的都不是很透彻。

这里推荐几本 Javascript 书籍：

初级读物：
《JavaScript高级程序设计》：一本非常完整的经典入门书籍，被誉为JavaScript圣经之一，详解的非常详细，最新版第三版已经发布了，建议购买。

《JavaScript王者归来》百度的一个Web开发项目经理写的，作为初学者准备的入门级教程也不错。
中级读物：
《JavaScript权威指南》：另外一本JavaScript圣经，讲解的也非常详细，属于中级读物，建议购买。
《JavaScript.The.Good.Parts》：Yahoo大牛，JavaScript精神领袖Douglas Crockford的大作，虽然才100多页，但是字字珠玑啊！强烈建议阅读。
《高性能JavaScript》：《JavaScript高级程序设计》作者Nicholas C. Zakas的又一大作。
《Eloquent JavaScript》：这本书才200多页，非常短小，通过几个非常经典的例子（艾米丽姨妈的猫、悲惨的隐士、模拟生态圈、推箱子游戏等等）来介绍JavaScript方方面面的知识和应用方法。
高级读物：
《JavaScript Patterns 》：书中介绍到了各种经典的模式，如构造函数、单例、工厂等等，值得学习。
《Pro.JavaScript.Design.Patterns》：Apress出版社讲解JavaScript设计模式的书，非常不错。
《Developing JavaScript Web Applications》：构建富应用的好书，针对MVC模式有较为深入的讲解，同时也对一些流程的库进行了讲解。
《Developing Large Web Applications》：不仅有JavaScript方面的介绍，还有CSS、HTML方面的介绍，但是介绍的内容却都非常不错，真正考虑到了一个大型的Web程序下，如何进行JavaScript架构设计，值得一读。

要做优秀的前端工程师，还需要继续努力：《高性能网站建设指南》、《Yahoo工程师的网站性能优化的建议》、“YSLOW”性能优化建议、《网站重构》、《Web开发敏捷之道》、“ jQuery 库”、“前端框架”、“HTML5”、“CSS3”。。。这些都要深入研究！

万事开头难！如果你能到这个境界，剩下的路自己就可以走下去了。
人们常说：不想当裁缝的司机，不是个好厨师。
如果单纯只是学习前端编程语言、而不懂后端编程语言（PHP、ASP.NET，JSP、Python），也不能算作是优秀的前端工程师。
在成为一个优秀的前端工程师的道路上，充满了汗水和辛劳。

—— 王子墨写于Hong Kong,Kowloon

2012年10月28日 20:18

本文用到的参考资料：

1、What makes a good front end engineer?

2、Best Practices for Speeding Up Your Web Site

此条目是由王子墨发表在前端随笔分类目录的。将固定链接加入收藏夹。

Go Lang

2014-01-07T00:00:00+00:00

Mac Install Go lang

下载安装 go1.2.darwin-amd64-osx10.8.pkg 在 https://code.google.com/p/go/downloads/list

Mac `$GOPATH not set Go` 语言环境变量的问题

$ mkdir $HOME/go
$ export GOPATH=$HOME/go

添加这个工作空间子目录（$GOPATH/bin）到系统的$PATH环境里

$ export PATH=$PATH:$GOPATH/bin

使用Google的性能分析工具分析Go程序的记录

http://my.oschina.net/qinhui99/blog/63903

References:

苏格兰威士忌找不到了. http://nowhisky.diandian.com/post/2013-09-03/40052089756

Mac Configure SAE mezzanine

2013-10-13T00:00:00+00:00

SAE

SAE作为国内的公有云计算，新浪开发的，安全可靠。我们可以将网站挂在上面运行。

Mezzanine

Mezzanine是一个强大的，扩展性良好的管理平台，是一种CMS（内容管理系统）。它是建立在Django的框架之上的。

配置SAE本地环境

一开始要安装ython(2.7)，接着如下操作安装virtualenv并且运行virtualenv：

$ [sudo] pip install virtualenv
$ ~/: virtualenv sae # install sae
$ ~/: source ~/sae/bin/activate # launch sae

source这一句是启动SAE本地环境，启动后 Terminal(终端) 最左会有(sae) 这样的标志，在virtualenv环境下，pip安装会安装到/sae/lib/python2.7/site-packages文件夹下。

一般来说需要安装下列的Python package (using pip install package) 安装如下的package

sae-python-dev,
django(django==1.5) or webpy,
mysqldb(mysql-python),
pylibmc,
PIL, …

安装如：

$ pip install sae-python-dev

pip mysql的安装：

$ pip install mysql-python

Saecloud install mezzanine

$ mkdir mezzanine
$ cd mezzanine

运行

$ saecloud install mezzanine

由于saecloud安装的问题，此时你的文件夹site-packages里面有很多无用的文件。

filebrowser_safe/ mezzanine/ requests/ requirements/ grappelli_safe/ oauthlib/ requests_oauthlib/

只保留这几个文件。接着运行：

$ mezzanine-project 1
$ cd 1
$ python manage.py createdb --noinput
$ python manage.py runserver

svn checkout 你的project：

$ svn co https://svn.sinaapp.com/project_name/

或者新建config.yaml文件，输入：

---
name: mezzanine
version: 1
libraries:
  - name: django
    version: '1.5'

新建index.wsgi文件，输入：

import os
import sys

root = os.path.dirname(__file__)

sys.path.insert(0, os.path.join(root, 'site-packages'))

import sae
import wsgi
import django.core.handlers.wsgi

os.environ['DJANGO_SETTINGS_MODULE'] = 'settings'
os.environ['LANG'] = 'zh_CN.utf8'
os.environ['LC_ALL'] ='zh_CN.UTF-8'
os.environ['LC_LANG'] ='zh_CN.UTF-8'

application = sae.create_wsgi_app(wsgi.application)

执行python manage.py collectstatic收集静态文件

修改setting.py中的<pre>ROOT_URLCONF = “%s.urls” % PROJECT_DIRNAME</pre>修改为ROOT_URLCONF = "urls"，这一句大概在208行。

运行脚本：

$ dev_server.py --mysql=root:root@localhost:3306 --host=127.0.0.1 --storage-path=/tmp

至此本地环境配置完毕。打包上传到SAE。

References:

Virtualenv. Installation. http://www.virtualenv.org/en/latest/
Marchliu. URL
SAE Python Developer’s Guide 1.0(beta) documentation URL

Mac install bs4 & requests

2013-10-08T00:00:00+00:00

As I want to run a crawler which in https://github.com/lvyaojia/crawler

but the error is from bs4 import BeautifulSoup ImportError: No module named bs4

install BeautifulSoup

So I install bs4 downloaded beautifulsoup https://pypi.python.org/pypi/beautifulsoup4 uncompressed it

$ cd beautifulsoup4-*
$ sudo python setup.py install

and then if you can run ‘from bs4 import BeautifulSoup’, it means it is ok.

after install bs4, I found the error become import requests ImportError: No module named requests

install request

So I install request download request https://pypi.python.org/pypi/requests uncompressed it

$ cd requests-*
$ sudo python setup.py install

and then if you can run ‘import requests’, it means it is ok.

References:

Jay Kim (Mar 26, 2012). from:URL

Mac install OpenCV

2013-10-07T00:00:00+00:00

Install opencv

Download XCode from App Store

Download XCode command tools

Open XCode -> Preferences -> Downloads -> Components -> Command Line Tools

Install ScipySuperpack (https://github.com/fonnesbeck/ScipySuperpack)

$ git clone https://github.com/fonnesbeck/ScipySuperpack.git
$ sh install_superpack.sh

Download OpenCV

Extract OpenCV-2.4.2.tar.bz2

Open Terminal at the extracted directory

At OpenCV-2.4.2 directory:

$ mkdir release
$ cd release
$ cmake -D CMAKE_BUILD_TYPE=RELEASE -D CMAKE_INSTALL_PREFIX=/usr/local -D BUILD_NEW_PYTHON_SUPPORT=ON -D BUILD_EXAMPLES=ON ..

Compile with:

$ make -j8

Install:

$ sudo make install

Configuring python with opencv

Update your bash_profile:

$ echo "export PYTHONPATH=/usr/local/lib/python2.7/site-packages/:$PYTHONPATH" >> ~/.bash_profile

Close and open the Terminal

Open python console and try to import cv2 to test if everything works

$ python import cv2

Configuring Eclipse with opencv

Open eclipse Click on File-> New Project-> Java Project Give an appropriate Project Name Now right click on Project and choose Properties.

Select Java Build Path and then select Libraries.

Click on Add Library.

Choose User Library. Click on User Libraries, then Select New and give a name to your library.

Now Select your library and click on Add External JARs, go to your build folder and then open bin folder, there you will find opencv-246.jar, Select this file. (this folder is /opencv/release/bin or /opencv/build/bin) Now Select Native Library Location and click on Edit.

Insert the path of your cv.so file, mine is in /build/lib. (this path maybe /opencv/release/lib or /opencv/build/lib) Click on Finish, Now your project is configured with openCV library.

ant

Environment

First, create a bin/ folder and copy the OpenCV jar into it. Second, create a lib/ folder and copy the OpenCV lib into it.

$ mkdir bin
$ cp <opencv_dir>/bin/opencv_<version>.jar bin/
$ mkdir lib
$ cp -rf <opencv_dir>/lib/ lib/

Running

$ ant -DocvJarDir=bin -DocvLibDir=lib

References:

Impetus.(Monday, 5 August 2013). URL
Guilherme Defreitas. (1 de Outubro de 2012). http://www.guidefreitas.com/installing-opencv-2-4-2-on-mac-osx-mountain-lion-with-python-support

Windows install jekyll

2013-09-21T00:00:00+00:00

Jekyll

jekyll 是一个简单的免费的Blog生成工具，它只是一个生成静态网页的工具，可以使用第三方服务，类似disqus作为它的评论。最关键的是它可以免费部署在Github上，并且绑定自己的域名。

windows 8 系统似乎还有问题，未解决

下载

下载：ruby on windows 下载：Devkit

安装

安装RubyInstaller到c盘设置环境变量，path中配置形如C:\Ruby193\bin目录，然后在命令行终端下输入gem update --system来升级gem Devkit解压到C:\DevKit

$ cd C:\DevKit
$ ruby dk.rb init
$ ruby dk.rb install

上面这段code的目的是让Devkit目录下的config.yml中有形如 - C:/Ruby193 e.g.

最后

$ gem install jekyll

启动服务器

$ jekyll server

服务器地址为：http://127.0.0.1:4000 完毕

问题答疑：

这个问题是源于没有安装成功Devkit

References:

purediy。[原]通过GitHub Pages建立个人站点（详细步骤）。2013年3月7日。
Running Jekyll on Windows

Mac PROBLEMS

2013-09-15T00:00:00+00:00

Mac command line

mdfind

mdfind can find something in Mac

cal

cal launch a calendar

start/stop apache:

$ sudo apachectl start
$ sudo apachectl stop

remove dir:

rm -rf dir

brew install

Install homebrew

Mac install homebrew，we can use git as from: http://blog.jjgod.org/2009/12/21/homebrew-package-management/

$ sudo chown -R `wanggengzhou` /usr/local
$ cd /usr/local
$ git init
$ git remote add origin git://github.com/mxcl/homebrew.git
$ git pull origin master

Testing: brew search

install ruby:

$ brew install ruby

Configure the path: PATH=$(brew –prefix ruby)/bin:$PATH

$ vim ~/.bash_profile

input:

export PATH=$(brew --prefix ruby)/bin:$PATH

install jekyll：

$ gem update --system
$ gem install jekyll

Mac vim

vimrc configure

$ sudo vim /usr/share/vim/vimrc

input:

set ai                  " auto indenting
set history=100         " keep 100 lines of history
set ruler               " show the cursor position
syntax on               " syntax highlighting
set hlsearch            " highlight the last searched term
filetype plugin on      " use the file type plugins

" When editing a file, always jump to the last cursor position
autocmd BufReadPost *
\ if ! exists("g:leave_my_cursor_position_alone") |
\ if line("'\"") > 0 && line ("'\"") < = line("$") |
\ exe "normal g'\"" |
\ endif |
\ endif

File System

The path of QQ information:

~/Library/Containers/com.tencent.qq/Data/Library/Application Support/QQ

Questions：

can’t open file for writing

Maybe the file owner becomes root

Permission denied

cannot open .git/FETCH_HEAD: Permission denied

$ sudo chown -R .git/

Mac ssh need not to be root accout

Lauchpad icon information is in

~/Library/Application\ Support/Dock/*.db

ubuntu phpmyadmin

2013-08-31T00:00:00+00:00

安装phpmyadmin在/usr/share/phpmyadmin目录下：sudo apt-get install phpmyadmin

重启apache：

$ sudo /etc/init.d/apache2 restart

dpkg -L phpmyadmin 看看安装在什么地方

http://localhost/phpmyadmin/

[转载]JS为什么 ++[[]][+[]]+[+[]] = 10 ？

2013-08-27T00:00:00+00:00

转自：珠海GDG微信

为什么 `++[[]][+[]]+[+[]] = 10` ？

全文引用自:

http://www.aqee.net/can-you-explain-why-10/

首先，问这个问题的人是个天才，他怎么会遇到这样的一个问题。其次，回答这个问题的人更是一个天才，我难以想象他会回答这个问题，更难以想象的是，他的回答是如此的详细和丰富和完整，真正称得上诲人不倦。

是的所有令人激荡不已的问题以及回答,现在多数出自: “栈溢出”

http://stackoverflow.com/questions/7202157/can-you-explain-why-10

既然遇到了这个问题，我们不妨也跟着提高一下。

这是一个Javascript语言题目，一个完全有效的等式，不信自己可以试一下，下面看看高人的题解：

++[[]][+[]]+[+[]]

如果把这段表达式拆分开来，它相等于：

++[[]][+[]]
+
[+[]]

在JavaScript里，+[] === 0是完全正确的。 + 会把一些字符转化成数字，在这里，这个式子会变成+""或0。

因此，我们可以简化一下(++ 比 + 有更高的优先级)：

++[[]][0]
+
[0]

因为[[]][0]的意思是：获取[[]]的第一个元素，这就得出了下面的结果：

[[]][0]返回内部数组 ([])。

根据语言规范，我们说[[]][0] === []是不正确的，

但让我们把这个内部数组称作 A，以避免错误的写法。 ++[[]][0] == A + 1，因为++的意思是“加一”。 ++[[]][0] === +(A + 1)；

换句话说，你得到的永远是个数值

(+1并不一定得到的是个数值，但++一定是)。

同样，我们可以把这一堆代码简化的更清晰。让我们把 A 换回成[]:

+([] + 1)
+
[0]

在JavaScript里，这也是正确的：

[] + 1 === "1"，因为[] == ""

(这相当于一个空的数组的内部元素连接)，于是：

+([] + 1) === +("" + 1)，并且 +("" + 1) === +("1")，并且 +("1") === 1

让我们再次简化一下：

1
+
[0]

同样，在Javascript里，这是正确的：

[0] == "0"，因为这是相当于一个有一个元素的数组的内部元素的连接。各元素会使用，分隔。当只有一个元素时，你可以推论出这个过程的结果就是它自身的第一个元素。所以，最终我们得到

(数字 + 字符串 = 字符串)：

1
+
"0"
=== "10"

(^0^)/耶！

结论

JS 是个变态语言!

[转载]git使用ssh密钥

2013-08-06T00:00:00+00:00

转载自：git使用ssh密钥

git使用https协议，每次pull, push都要输入密码，相当的烦。

使用git协议，然后使用ssh密钥。这样可以省去每次都输密码。

大概需要三个步骤：

一、本地生成密钥对；
二、设置github上的公钥；
三、修改git的remote url为git协议

一、生成密钥对。

大多数 Git 服务器都会选择使用 SSH 公钥来进行授权。系统中的每个用户都必须提供一个公钥用于授权，没有的话就要生成一个。生成公钥的过程在所有操作系统上都差不多。首先先确认一下是否已经有一个公钥了。SSH 公钥默认储存在账户的主目录下的 ~/.ssh目录。进去看看：

$ cd ~/.ssh 
$ ls
authorized_keys2  id_dsa       known_hosts config            id_dsa.pub

关键是看有没有用 something 和 something.pub 来命名的一对文件，这个 something 通常就是 id_dsa 或 id_rsa。有 .pub 后缀的文件就是公钥，另一个文件则是密钥。假如没有这些文件，或者干脆连 .ssh 目录都没有，可以用 ssh-keygen 来创建。该程序在 Linux/Mac 系统上由 SSH 包提供，而在 Windows 上则包含在 MSysGit 包里：

$ ssh-keygen -t rsa -C "<em>your_email@youremail.com</em>"
# Creates a new ssh key using the provided email # Generating public/private rsa key pair. 
# Enter file in which to save the key (/home/<em>you</em>/.ssh/id_rsa):

直接Enter就行。然后，会提示你输入密码，如下(建议输一个，安全一点，当然不输也行)：

Enter passphrase (empty for no passphrase): <em>[Type a passphrase]</em> 
# Enter same passphrase again: <em>[Type passphrase again]</em>

完了之后，大概是这样。

Your identification has been saved in /home/<em>you</em>/.ssh/id_rsa. 
# Your public key has been saved in /home/<em>you</em>/.ssh/id_rsa.pub. 
# The key fingerprint is: # 01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db <em>your_email@youremail.com</em>

这样。你本地生成密钥对的工作就做好了。

二、添加公钥到你的github帐户

1、查看你生成的公钥：大概如下：

$ cat ~/.ssh/id_rsa.pub  
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABABAQDx22Bj5dKvRhwFili/DIKqlcYPIVIGv04h0p0JG+0CZQrGk2iBV/0X+bGJXJFl3cgydfgzxV77qRfbQ8B8nXfTuvYbAttzbCj0U97Aj9/XX4ZxXDLLkbtLrZeOVM0NRAJkPb1/EznQ/rsm8gAyUZRLv+L8lqMaTSkAZiL1LggFASDDa2Rq9MbRaYUTzaL2Fmx0Hg8HKlPQiXhZ8U8wISLySPYzWpCvWBAcOCT5EbgrnqbD1W1Ec4XVutalh98LdDoBYzZO4T6D59ce1jiasIL1U/0Y6Nc3ZEDATfGLWKLnpRKZnxx42LG2cMhij4XZIFsL5lLh2bT+emVjkmRb64DJdr 326684793@qqcom

2、登陆你的github帐户。然后 Account Settings -> 左栏点击 SSH Keys -> 点击 Add SSH key

3、然后你复制上面的公钥内容，粘贴进“Key”文本域内。 title域，你随便填一个都行。
4、完了，点击 Add key。

这样，就OK了。然后，验证下这个key是不是正常工作。

$ ssh -T git@github.com
# Attempts to ssh to github

如果，看到：

Hi username! You’ve successfully authenticated, but GitHub does not # provide shell access.

就表示你的设置已经成功了。

三、修改你本地的ssh remote url. 不用https协议，改用git 协议

可以用git remote -v 查看你当前的remote url

$ git remote -v
origin https://github.com/someaccount/someproject.git (fetch)
origin https://github.com/someaccount/someproject.git (push

可以看到是使用https协议进行访问的。

你可以使用浏览器登陆你的github，在上面可以看到你的ssh协议相应的url。类似如下：

git@github.com:someaccount/someproject.git

这时，你可以使用 git remote set-url 来调整你的url。

$ git remote set-url origin git@github.com:someaccount/someproject.git

完了之后，你便可以再用 git remote -v 查看一下。

当git remote -v 之后变成类似这种git@github.com的形式，就说明用的是SSH协议进行访问。OK。

至此，OK。

你可以用git fetch, git pull , git push，现在进行远程操作，应该就不需要输入密码那么烦了。

wubi 安装 Ubuntu

2013-07-06T00:00:00+00:00

Ubuntu

Ubuntu（乌班图）是一个以桌面应用为主的Linux操作系统，基于Debian GNU/Linux，支持x86、amd64（即x64）和ppc架构，由全球化的专业开发团队（Canonical Ltd）打造的开源GNU/Linux操作系统。为桌面虚拟化提供支持平台。百度百科

Ubuntu下载地址： http://www.ubuntu.org.cn/download/desktop

可以考虑12.04版本，当然也可以考虑新版13.04

用挂载下载的iso文件，我用的是DAEMON挂载

Daemon下载地址： http://www.daemon-tools.cc/chn/products/dtLite#features

打开挂载的文件夹将wubi这个文件拷到任何位置，运行wubi，配置一些基本的设置，接着它就开始安装了，安装完后，提示重启，重启后在启动项上指定ubuntu，ubuntu将自动安装，安装完后将自动重启。

PS：

记得要挂载那个iso文件，不然wubi会重新下载ubuntu到某临时文件夹，这将耗费大量时间
可以考虑断网，因为有网络，ubuntu将需要下载安装一些必要的文件。不过断网的话，安装可能会出错，感觉这算是一个概率问题。
另外13.04的版本的wubi貌似对应的是64位系统，这意味着，你的镜像挂载要挂载64位系统版本的ubuntu，不然它会联网下载64位Ubuntu。

倘若ubuntu开机进不了桌面，可以通过重装桌面修复它。

ubuntu12.04已经自带了ibus输入法框架和一些中文输入法。想要谷歌输入法可以移步到 ubuntu 下的 google 拼音输入法

bin/bash --login/

2013-06-20T00:00:00+00:00

If you run “rvm use XXX” then output “‘/bin/bash –login’ as the command”

You can do as follow:

Open a terminal,
Choice the drop-down menu 'Edit'
Click the menu 'Profile Preferences'

4. Choice 'Title and Command'

5. Click the command 'Run command as a login shell'

Then you can't run '/bin/bash --login' next time.

Reference:

Integrating RVM with gnome-terminal https://rvm.io/integration/gnome-terminal

Ubuntu 配置安卓

2013-06-12T00:00:00+00:00

有问题看问题解答.

首先下载 Android SDK

Android SDK官方下载地址：http://developer.android.com/sdk/index.html

下载Linux 32-bit版本 .

解压然后到目录下的tools里面

输入$ ./android启动Android SDK Manager

勾中Tools和Android 4.2(API 17)，还可以安装以前的Android 4.1.2或者2.3版本，一般我们选择最新版本就好了，因为选择的版本越多下载时间就越长。SDK可以向下兼容, 意思就是4.2版本可以运行2.3 不过2.3 不一定可以运行4.2 选中后，点击右下角的Install 5 packages…

这时就开始在线下载文件了，时间会比较长，中途如果弹出错误窗口也不用管，等待下载完成。

跟windows环境安装安卓模拟器不一样，linux环境下需要用命令来建立模拟器。

首先在终端中输入

$ ./mksdcard 512M mysd01

上面的512M是指虚拟机的SD卡大小，mysd01是指卡的名称，大小和名称可以更改为别的。

$ ./android create avd -n myphone01 -t 2

创建虚拟手机设备，这里的myphone01是指虚拟机名称，也可以更改。

出现上面这种提示就表示模拟器建立好了

Auto-selecting single ABI armeabi-v7a
Created AVD 'myphone01' based on Google APIs (Google Inc.), ARM (armeabi-v7a) processor,
with the following hardware config:
hw.lcd.density=240
vm.heapSize=48
hw.ramSize=512

最后运行模拟器

$ sudo ./emulator @myphone01 -sdcard mysd01 -scale 0.8

不过上面这一块其实不用处理的, 因为你只要直接插上手机, eclipse运行的程序直接在手机上面跑.

问题解答: 一开始敲入这个命令: $ ./android

bash: ./android: 权限不够

chmod a+x 可以增加权限

输入: $ chmod a+x ./android 然后输入 $ ./android 即可.

Failed to get the adb version: Cannot run program "/media/m_backup/Setup_Files/Programing/android-sdk-linux/platform-tools/adb": java.io.IOException: error=13, 权限不够 from '/media/m_backup/Setup_Files/Programing/android-sdk-linux/platform-tools/adb' - exists=true

在sdk文件夹里面输入~/android-sdk$ sudo chmod -R a+wrx * 注意: 因为坑爹的XX墙, 所以改HOSTS进 https://developer.android.com/sdk/index.html

References:

ubuntu下编译Android出现的问题 URL
ubuntu系统安装安卓模拟器(Android SDK)的方法 http://www.anzhuobuluo.com/android/rom/142/
Ubuntu配置Eclipse + Android环境问题 (安卓adb权限问题) http://bbs.csdn.net/topics/390062677

Java Problem

2013-06-06T00:00:00+00:00

error 1: failed to load the jni shared library jre bin client jvm.dll

你安装的JDK版本就不对，对应你64位电脑的版本名称是 jdk-7-windows-x64.exe

C#代码生成label和button

2013-05-25T00:00:00+00:00

//自动生成label
for (int x = 0; x < 5;x++ )
{
    Graphics
     dc = CreateGraphics();
    Show();
    Pen bluePen = new Pen(Color.Blue, 3);
    dc.DrawRectangle(bluePen, x*80, 0, 50, 50);
}

int _Height = 0;

for (int i = 0; i < 10; i++)
{
    Label sy = new Label();
    sy.AutoSize = true;
    sy.Location = new Point(0, _Height);
    _Height += sy.Height;
    sy.Text = i.ToString();
    Controls.Add(sy);
}

//生成button
Button[] buttons = new Button[50];
// for (int i = 0; i < 5; i++) // 只产生5个button
for (int i = 0; i < classroom_name_init.Length; i++)
{
    int t_y = i / 10;
    int t_x = i % 10;
    if (classroom_name_init[i] != null)
    {
        buttons[i] = new Button();
        buttons[i].Name = "button" + i;
        // buttons[i].Text = buttons[i].Name;
        buttons[i].Text = zone_name_init + classroom_name_init[i];
        buttons[i].Size = new Size(60, 25);
        buttons[i].Location = new Point(110 + 70 * t_x, 210 + 50 * t_y);

        //panel1.Controls.Add(buttons[i]);
        buttons[i].BringToFront();//置于顶层
        buttons[i].Click += new EventHandler(Buttons_Click);
    }
    else
    {

    }
}
this.Controls.AddRange(buttons);

//生成的button有按键效果
void Buttons_Click(object sender, EventArgs e)
{
    date_str = comboBox3.Text + " " + comboBox4.Text + "-" + comboBox5.Text;
    this.Text = (sender as Button).Text;
    Classroom classroom = new Classroom(zone_name_init, classroom_name_init, this.Text, date_str);
    this.Hide();
    classroom.ShowDialog();
}

关于 android 报 exception 的问题

2013-05-21T00:00:00+00:00

android 程序只要你写错了就报异常，莫名其妙退出

所以可以考虑用 try-catch 的形式抓取异常，然后很多时候你感觉哪里出异常了，不过实际上是另外一个地方出现异常在安卓里面 onPause 在你调用别的 layout 的时候有可能就会出现异常

References:

六种异常处理的陋习

安卓图表无法运行

2013-05-17T00:00:00+00:00

解决achartengine demo无法运行的问题1、右击工程--build path--configure build path 2、选中android 2.1和achartengine-1.0.0.jar 如果achartengine在下边的话，最好调到紧挨着android 2.1。

偶然发现 git 一个问题！

2013-05-15T00:00:00+00:00

首先 excel 好像不能上传到github（我暂时不知道怎么上传）

然后谈另外一个主要问题

我自己写的project 上传到git上出现不完整

比如说你有很多个project 比如叫 CAS 或update excel 什么的，然后 git它会默认把你一些东西清除掉

就是本来

我偷懒上传到同一个 git 仓库

我画红线的是 git把我删除了的文件夹

我在git上面没有看到这三个文件夹

意思就是说一个git的仓库只默认一个project

其他的project 它不会给你上传的

如果我重新做一个新的仓库该有的东西他都有（特殊情况未考虑）

就是我重新建一个仓库单独上传那个update excel project 刚刚我画的那三个文件夹就会有

我就只能认为是一个仓库只能放一个project

如果一个仓库放了两个以上它会默认去掉其他的project的bin 或一些 import project的文件夹

那个 gitignore 应该不是干这个事的人

不过听说没有上传的那几个形如bin的文件是eclipse生成的文件，并不是很重要的组成部分，其他部分仍然可以编译，问题跟进中。。。

C运算

2013-05-08T00:00:00+00:00

c = ((((i&0×8)==0)^((j&0×8))==0))*255的意义

就先分别判断（(i&0x8)==0)和((j&0x8))==0))是否为真，真为1假为0.接着再将两者的值进行或运算，或运算出来的值再和255相乘，最后的结果赋值给c

python |=

2013-05-04T00:00:00+00:00

今天遇到一个新的运算符合 |= 一竖加等号

问行之大哥，大哥说他也是第一次见，然后他自己试验+我自己试验得出如下结论：

1、
t = -3
x = 0
x |= t
print x
如果x取0，则 运算结果为t的值

2、
t = 1
x = -3
x |= t
print x
如果x取负数，t为非负数，则结果为x

3、
t = 1
x = -3
x |= t
print x
如果x取负数，t负数，则结果为-1

4、
t = -1
x = 1
x |= t
print x
如果x取正数，t为负数，则结果为-1

5、
t = 3
x = 1
x |= t
print x
如果x去正数，t比x大，则结果为t

6、
t = 3
x = 4
x |= t
print x
如果x为正数，t为正数且t比x小，则结果为x+t

谷歌地图

2013-04-01T00:00:00+00:00

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyALTGPdgSxKf3oaKknvE11B01p5qFp4T9Y&sensor=true">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>

References:

Goodgle Map, URL

[转载]error C2381:

2013-04-01T00:00:00+00:00

原文地址：URL

error C2381: “exit” : 重定义；__declspec(noreturn) 不同编译OpenGL Red Book的例子时出现错误，

stdlib.h(406):   error   C2381:   “exit”:   重定义；__declspec(noreturn)不同
glut.h(146):   参见“exit”的声明

解决方法：

#include <GL/glut.h>
#include <stdlib.h>

改成：

#include <stdlib.h>
#include <GL/glut.h>

通过。

OpenGL和C++有不太融合的地方，在include时要让标准C++类库的头文件位于GLUT图形库头文件之前。

静音

2013-03-31T00:00:00+00:00

去掉安卓相机声音

Root 安卓

(目的：得到修改权限)

百度百科: 安卓root权限

简而言之: 就是类似苹果的越狱 ps: 找工具 root, 本文暂时不提供 root 方法.

安装 RE 文件管理器(Root Explorer)

百度应用: RE文件管理器

删除相机声音文件

在 /system/media/audio/ui/ 找到 camera_click.ogg 然后改名或者删除都可以（需要得到修改权限）

三星地图地位

2013-03-31T00:00:00+00:00

ROOT后，

先要安装谷歌框架！

参照国行Galaxy S3 I9308 root成功

这个root并且装谷歌框架，话说这个教程貌似有点问题！

但是安装了google地图后，发生问题，无法定位，要这么干！

1、安装和补充必要的文件：将 NetworkLocation.apk安装一次再拷贝到system/app下，将com.google.android.maps.jar拷贝到/system/framework下，
将 com.google.android.maps.xml拷贝到etc/permission下

2、修改gps.conf文件，
NTP_SERVER=2.cn.pool.ntp.org NTP_SERVER=2.asia.pool.ntp.org NTP_SERVER=0.asia.pool.ntp.org

NTP_SERVER=north-america.pool.ntp.org

XTRA_SERVER_1=http://xtra1.gpsonextra.net/xtra.bin

XTRA_SERVER_2=http://xtra2.gpsonextra.net/xtra.bin

XTRA_SERVER_3=http://xtra3.gpsonextra.net/xtra.bin

#SUPL_HOST=supl.google.com SUPL_HOST=supl.cn.com SUPL_PORT=7276

重启！

修改这些东西都是用RE（root explorer）

共享文档：

http://sdrv.ms/117P304

1、SQLite.apk下载

2、用R.E.管理器进入

/data/data/com.android.providers.settings/databases

3、点击settings.db，使用SQLite进行编辑

4、点击进入“secure”数据表；

5、这里是关键了，注意两个键值：

assisted_gps_enabled (value修改成：1)

location_providers_allowed (value修改成：gps,network)

<br/>

注意：修改时候输入法用半角模式

6、修改完成后，退出重启手机即可。

References:

http://bbs.gfan.com/android-4953062-1-1.html

http://bbs.gfan.com/android-4831959-1-1.html

http://bbs.gfan.com/android-3357808-1-1.html

http://bbs.gfan.com/android-4477813-1-1.html

http://bbs.dospy.com/viewthread.php?tid=15367379&bbsid=655

http://bbs.dospy.com/thread-13116772-1-503-1.html

http://bbs.gfan.com/android-4540861-1-1.html

Chrome安全浏览 – 特定域名自动加HTTPS

2013-03-31T00:00:00+00:00

http://www.ihacksoft.com/chrome-auto-https.html

1、在地址栏中输入“chrome://net-internals/#hsts”；

2、在“Input a domain name to add it to the HSTS set:”下面添加域名，“Include subdomains:”为是否包含二级域名；

3、最后点击add，就搞定了。

ACM 论文使用LATEX实现 Reference

2013-03-31T00:00:00+00:00

reference实现：

tex文件：

//---------------------------------------------------

documentclass[prodmode,acmtecs]{acmsmall} % Aptara syntax

begin{document}

cite{sakarovitch2009elements}

cite{sipserintroduction}

cite{allan2005adding}

cite{van1994python}

% Bibliography

bibliographystyle{ACM-Reference-Format-Journals}

bibliography{acmsmall-sample-bibfile}

end{document}

//--------------------------------------------------

bib文件：

//--------------------------------------------------

@book{sakarovitch2009elements,

title={Elements of automata theory},

author={Sakarovitch, Jacques},

year={2009},

publisher={Cambridge University Press}

}

@techreport{sipserintroduction,

title={Introduction to the Theory of Computation. PWS, Boston. 1997},

author={Sipser, Michael},

institution={ISBN 0-534-94728-X}

}

@article{allan2005adding,

title={Adding trace matching with free variables to AspectJ},

author={Allan, Chris and Avgustinov, Pavel and Christensen, Aske Simon and Hendren, Laurie and Kuzins, Sascha and Lhot{'a}k, Ond{v{r}}ej and De Moor, Oege and Sereni, Damien and Sittampalam, Ganesh and Tibble, Julian},

journal={ACM SIGPLAN Notices},

volume={40},

number={10},

pages={345--364},

year={2005},

publisher={ACM}

}

@misc{van1994python,

title={Python programming language},

author={Van Rossum, Guido and others},

year={1994}

}

//--------------------------------------------------

编译为点击一次LaTex(快捷键Shift+Ctrl+L)，点击一次BibTex(快捷键Shift+Ctrl+B),最后点击PDFTeXify(快捷键Shift+Ctrl+P)

reference的一些小技巧：打开谷歌学术文献http://scholar.google.com/schhp?hl=zh-CN搜索文献，然后找到自己引用的文献，点击引用，可以找到导入BibTeX，它就帮你把bib文件里面的内容写好了！

Latex插图心得：

//--------------------------------------------------

Figure ref{tab:NFAtoDFAMinDFA} show how to convert a NFA to a DFA:

begin{figure}[htbp]

begin{center}

includegraphics[width=0.6textwidth]{NFAtoDFAMinDFA}

caption{NFAtoDFAMinDFA}

label{tab:NFAtoDFAMinDFA}

end{center}

end{figure}

//--------------------------------------------------

其中[htbp]就是浮动格式

“h 当前位置。将图形放置在正文文本中给出该图形环境的地方。如果本页所剩的页面不够，这一参数将不起作用。

t 顶部。将图形放置在页面的顶部。

b 底部。将图形放置在页面的底部。

p 浮动页。将图形放置在一只允许有浮动对象的页面上。”

item的一些效果

//--------------------------------------------------

renewcommand{labelitemi}{$bullet$}

renewcommand{labelitemii}{$cdot$}

renewcommand{labelitemiii}{$diamond$}

renewcommand{labelitemiv}{$ast$}

begin{itemize}

item very clear, readable syntax

item strong introspection capabilities

end{itemize}

//--------------------------------------------------

reference

安卓SD卡输入输出

2013-03-23T00:00:00+00:00

1、首先AndroidManifest.xml里面要写权限，如下：

<!-- 在SDCard中创建与删除文件权限 -->
<uses -permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"></uses>
<!-- 往SDCard写入数据权限 -->
<uses -permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses>

或

<uses -sdk android:minSdkVersion="3"></uses>

// 写文件
try {
    File myFile = new File("/sdcard/mysdfile.txt");
    myFile.createNewFile(); // 创建文件
    FileOutputStream fOut = new FileOutputStream(myFile);
    OutputStreamWriter myOutWriter = new OutputStreamWriter(fOut);
    myOutWriter.append(i); // 填内容
    myOutWriter.close();
    fOut.close();
    Toast.makeText(SongsActivity.this, "写入文件成功", Toast.LENGTH_LONG)
        .show();
} catch (Exception e) {
    Toast.makeText(SongsActivity.this, "写入文件失败" + e, Toast.LENGTH_SHORT)
        .show();
}
// 读文件
File file = new File("/sdcard/mysdfile.txt");
try {
    FileInputStream inputStream = new FileInputStream(file);
    byte[] b = new byte[inputStream.available()];
    inputStream.read(b);
    String cc = new String(b);
    Toast.makeText(SongsActivity.this, "读取文件成功", Toast.LENGTH_LONG)
        .show();
    getListView().setDividerHeight(Integer.parseInt(cc));
} catch (Exception e) {
    Toast.makeText(SongsActivity.this, "读取失败" + e, Toast.LENGTH_SHORT)
        .show();
}

JAVA

2013-03-17T00:00:00+00:00

java Commander | java Burner | java Formatter

第一次知道JAVA可以这么写，其实应该还有很多有趣的写法

计算机图形之全息投影

2013-03-17T00:00:00+00:00

URL

室友做的（伪）全息投影原理很简单，效果很棒！

结论：简单的东西也是可以有很棒的演示！

全息投影技术（front-projected holographic display）也称虚拟成像技术是利用干涉和衍射原理记录并再现物体真实的三维图像的记录和再现的技术。

from baidu： http://baike.baidu.com/view/2726906.htm?fromId=4294875

全息投影制作教程：

iPhone4S全息3D投影制作教程(超低成本)-全息初音未来

百度贴吧：

http://tieba.baidu.com/f?kz=1586423721

Python 用字典写 NFA to DFA

2013-03-17T00:00:00+00:00

https://github.com/lincolnge/NFA-to-DFA/blob/master/dictDFA.py

NFA to DFA python

比如说这个字典：

这是我的输入，输入一个NFA

dictNFA = {
    'q1': { 'e': ['q2', 'q11'], '0': [''], '1': [''], 'acep': False, 'start': True },
    'q2': { 'e': ['q3', 'q5'], '0': [''], '1': [''], 'acep': False, 'start': False },
    'q3': { 'e': [''], '0': [''], '1': ['q4'], 'acep': False, 'start': False },
    'q4': { 'e': ['q5', 'q3'], '0': [''], '1': [''], 'acep': False, 'start': False },
    'q5': { 'e': [''], '0': ['q6'], '1': [''], 'acep': False, 'start': False },
    'q6': { 'e': ['q7', 'q9'], '0': [''], '1': [''], 'acep': False, 'start': False },
    'q7': { 'e': [''], '0': [''], '1': ['q8'], 'acep': False, 'start': False },
    'q8': { 'e': ['q9', 'q7'], '0': [''], '1': [''], 'acep': False, 'start': False },
    'q9': { 'e': [''], '0': ['q10'], '1': [''], 'acep': False, 'start': False },
    'q10': { 'e': ['q11', 'q2'], '0': [''], '1': [''], 'acep': False, 'start': False },
    'q11': { 'e': ['q12', 'q14'], '0': [''], '1': [''], 'acep': False, 'start': False },
    'q12': { 'e': [''], '0': [''], '1': ['q13'], 'acep': False, 'start': False },
    'q13': { 'e': ['q14', 'q12'], '0': [''], '1': [''], 'acep': False, 'start': False },
    'q14': { 'e': [''], '0': [''], '1': [''], 'acep': True, 'start': False },
}

dictDFA.keys()输出的是列表：

['q14', 'q11', 'q10', 'q13', 'q12', 'q1', 'q3', 'q2', 'q5', 'q4', 'q7', 'q6', 'q9', 'q8']

顺序是固定的这个形式

def loopB(xNFA, xe, tmpInI):

当xe=ε时这个是用循环将q1->q2(消耗ε：the empty string)q1->q11

然后q2->q3...

当xe=0时这个循环q5->q6(消耗0）

当xe=1时这个循环q7->q8(消耗1）

如果要找q1, 不能用dictDFA.keys()[0]

从这个列表得知dictDFA.keys()[0]变成了'q14'

q1的关键是它的'start'是true

那么只能用循环一个一个找

def seachStartOrAccept(startOrAccept): #这个是用来查账它开始start或者结束accept（accept就是两个圈）
    for x in xrange(0, len(dictNFA.keys())):
        if dictNFA.values()[x][startOrAccept]:
            return dictNFA.keys()[x]
dictNFA.values()[x][startOrAccept]其实是dictNFA.values()[x]['start']

tmpII = list(set(tmpII))用这个函数是为了除掉列表里面的重复项，列表重复是允许的，字典里面重复是不允许的。

dictDFA.update({ str(tmpIII): { '0': tmpIIIa, '1': tmpIIIb, 'start': False, 'acep': False } })

字典用update（）添加新项目，如果重复，那么新添加的项会替换旧的项

程序开始：

先得出第一个项tmp0

然后tmp0消耗0得到tmp1

tmp0消耗1得到tmp2

tmp1消耗0得到tmp3

tmp1消耗1得到tmp4

。。。以此类推。。。

可以得到形如：

0 1 2

1 3 4

2 5 6

3 7 8

...

树状图如下：

用一个循环让它循环下去，什么时候停止呢？

就是当我被选出来的数，比如说4和之前的1相同，那么4就停止了

if str(tmpIIIa) not in dictDFA.keys():
    loopNFAtoDFA(tmpIIIa)

最后得到这个结构的字典：

dictDFAend = {
    str(qA): { '0': 0, '1': 1, 'start': False, 'acep': False },
    str(qB): { '0': 0, '1': 1, 'start': False, 'acep': False },
    str(qC): { '0': 0, '1': 1, 'start': False, 'acep': False },
    str(qD): { '0': 0, '1': 1, 'start': False, 'acep': False },
    str(qE): { '0': 0, '1': 1, 'start': False, 'acep': False },
}

NFA to DFA 原理如此图

接下来最小化这个DFA：

首先将non-accept组成一组，accept组成一组

non-accept消耗0归不同类的各自分开，若为同一类，则在一起。

non-accept一类的消耗1归不同类的各自分开，若为同一类，则在一起。

最后连接每一个类。

NFA转化为DFA，并且Minimum DFA过程如下：

Python raw_input input

2013-03-13T00:00:00+00:00

程序如下：

# -*- coding: cp936 -*-
#简单输入

name = raw_input("你猜：")
print "hello. " + name + "!"

name2 = input("你再猜(请输入数字,或者带有引号的字符串)：")
print name2

Result:

>>> name = raw_input("你猜：")
你猜：d
>>> print "hello. " + name + "!"
hello. d!
>>> name2 = input("你再猜(请输入数字,或者带有引号的字符串)：")
你再猜(请输入数字,或者带有引号的字符串)：d
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "<string>", line 1, in <module>
NameError: name 'd' is not defined
>>> name2 = input("你再猜(请输入数字,或者带有引号的字符串)：")
你再猜(请输入数字,或者带有引号的字符串)：3
>>> print name2
3

说明：

# -*- coding: cp936 -*- 指定代码保存时候使用的字符集，建议使用UTF-8，cp936 是 Windows 系统使用的字符集。

excel作为数据库！

2013-03-13T00:00:00+00:00

C++操作excel：使用C++读写Excel

C#操作excel：URL

Android

2013-03-12T00:00:00+00:00

安卓itro

http://android.yaohuiji.com/about

Android layout

fill_parent布局指将视图（在Windows中称为控件）扩展以填充所在容器的全部空间。 wrap_content布局指根据视图内部内容自动扩展以适应其大小

界面的设计和CSS设计方式很像

Android imageView

imageView.setScaleType(ImageView.ScaleType.FIT_XY);

ImageView.ScaleType八种类型即

CENTER，CENTER_CROP，CENTER_INSIDE，FIT_CENTER，FIT_START，FIT_END，FIT_XY，MATRIX

References:

Android. API之ImageView.ScaleType代码演示
Android. ImageView.ScaleType设置图解

Web 开发前端要求

2013-03-07T00:00:00+00:00

要求
- 高超的原生JavaScript开发水平和丰富经验。最好参与过框架研发或深入研读开源js框架代码。
- 精通HTML5、CSS，AJAX及前端性能优化，能高效开发兼容各种现代浏览器的前端代码。
- 熟练使用jQuery，了解其它几种js框架的设计与使用。研读过jQuery等框架代码最佳。
- 苛求代码质量和产品品质，乐于不断改进并抽象完善代码结构。
- 突出的快速理解能力与高效表达能力，优秀的团队协作及沟通能力。
- 极强的好奇心和优异的习能力。积极分享知识技能与工作成果。
- 理解基本的用户体验原则，崇尚简约优雅的设计。

若符合以下条件将令我们非常高兴：
- 具备PHP/Python/Ruby/Java等任意一门后端语言经验，有前后端协同开发经验。
- 有jQuery插件开发经验，对移动平台js开发有研究。
- 熟悉iOS、Andriod等移动设备的特性，了解各种浏览器特性。
- 深度使用Google、Stack Overflow等技术工具。
- 优秀的英语阅读与书写能力。
- 熟练使用Mac OS X系统、*nix命令行环境。

请提供以下服务的个人页面或独立blog：GitHub、Stack Overflow、Quora、Twitter、V2EX

软文一则

2013-03-07T00:00:00+00:00

摘自《互联网——降级论》片段 from http://news.cnblogs.com/n/148842/

除此以外，我还发现一个现象，中国消费者在与奸商们的长期斗争中，已经培养出了一种非常苦B的品质：只要不被坑，他就谢天谢地。如果商家严格做到了承诺的每一件事情，客户就会感动的泪如泉涌。如果商家不仅做到了所有承诺的事情，还很贴心的提供了一些额外的服务（比如我们给每位客户赠送非常好吃的樱桃和进口巧克力作为甜点），那么客户就会激动的哭天喊地、奔走相告，推荐给他认识的每一个人。

其实这片肮脏的国土，就是上天赐予 IT 青年们的最好机会。

BASIC 语言与机器人

2013-03-02T00:00:00+00:00

实验一：I/O控制
' {$STAMP BS2}
' {$PBASIC 2.5}
DO
LOW   0      :I/O口输出低电平
LOW    1      :I/O口输出低电平
PAUSE  1000   :延时1000ms
HIGH   0      :I/O口输出高电平
HIGH   1      :I/O口输出高电平
LOOP
END
实验二：电机控制
' {$STAMP BS2}
' {$PBASIC 2.5}
DO              :无条件无限循环
PULSOUT 12,650   :表示在12I/O口输出650*2us的脉冲
PULSOUT 13,850   :表示在12I/O口输出850*2us的脉冲
PAUSE  20   :表示延时20ms
LOOP
注意：PULSOUT 12,650改为750则电机停转，电机转速控制应在650到850之间越靠近750，转速越低。

' {$STAMP BS2}
' {$PBASIC 2.5}
count1 VAR word     ：count1为16位变量0-65535
count2 VAR byte      ：count2为8位变量0-255
count3 VAR nib       ：count3为4位变量0-15
count4 VAR bit       ：count4为1位变量0-1
FOR count1 =1 TO 100
  PULSOUT 12,735
  PULSOUT 13,755
  PAUSE  20
Next

' {$STAMP BS2}
' {$PBASIC 2.5}
count1 VAR Word
count2 VAR Byte
count3 VAR Nib
count4 VAR Bit
DO
  GOSUB Backward         ：调用子程序Backward
  GOSUB liftward           ：调用子程序liftward
  GOSUB Forward          ：调用子程序Forward
LOOP
Rightward:                 ：通过标号定义子程序
  FOR count1 =1 TO 100
    PULSOUT 12,850
    PULSOUT 13,750
    PAUSE  20
  NEXT
RETURN                    ：子程序返回
Liftward:
  FOR count1 =1 TO 100
    PULSOUT 12,750
    PULSOUT 13,850
    PAUSE  20
  NEXT
RETURN
Backward:
  FOR count1 =1 TO 100
    PULSOUT 12,850
    PULSOUT 13,650
    PAUSE  20
  NEXT
RETURN

Forward:
  FOR count1 =1 TO 100
    PULSOUT 12,650
    PULSOUT 13,850
    PAUSE  20
  NEXT
RETURN
实验三：触须机器人
' {$STAMP BS2}
' {$PBASIC 2.5}
count1 VAR Byte
count2 VAR Word
main:
FOR count2=0 TO 100
    FREQOUT 0,2,800   :I/O口0输出800Hz方波信号
NEXT
DO
IF(IN8=0 OR IN9=0)THEN   ：I/O口8/9输入检测
FOR count2=0 TO 100
    FREQOUT 0,2,800
NEXT
    GOSUB Backward
    GOSUB Liftward
ELSE
    GOSUB Forward
ENDIF
LOOP
Backward:
  FOR count1 =1 TO 100
    PULSOUT 12,850
    PULSOUT 13,650
    PAUSE  20
  NEXT
RETURN

Liftward:
  FOR count1 =1 TO 100
    PULSOUT 12,750
    PULSOUT 13,850
    PAUSE  20
  NEXT
RETURN
Forward:
  FOR count1 =1 TO 10
    PULSOUT 12,650
    PULSOUT 13,850
    PAUSE  20
  NEXT
RETURN

References:

!important 的作用

2013-03-02T00:00:00+00:00

!important是 CSS1 就定义的语法，作用是提高指定样式规则的应用优先权语法格式{sRule!important }，直接写在定义的最后面，如：

p{color:green !important;}

注意：IE一直都不支持这个语法，而其他的浏览器都支持。因此我们就可以利用这一点来分别给FF和IE浏览器样式定义。