在浏览器中，使用 window.btoa() 将字符串或二进制值转化为 Base64 编码，使用 window.atob() 还原。

1
2

window.btoa('laispace'); //=> "bGFpc3BhY2U="
window.atob("bGFpc3BhY2U="); //=>"laispace"

注意，要将非 ASCII 编码字符转化为 Base64 编码的话，需要先进行转码，否则会报错

1
2
3

window.btoa(encodeURI('赖小赖')); //=> "JUU4JUI1JTk2JUU1JUIwJThGJUU4JUI1JTk2"
window.atob('JUU4JUI1JTk2JUU1JUIwJThGJUU4JUI1JTk2'); //=> "%E8%B5%96%E5%B0%8F%E8%B5%96"
decodeURI("%E8%B5%96%E5%B0%8F%E8%B5%96"); //=> "赖小赖"

使用一个filter属性就可以实现很赞的模糊效果。

filter: blur(3px);

这在制作一些弹出框的背景效果时非常有用，加以动画效果则更佳：）

阅读全文

viewport 可以控制页面的原始宽度，限制用户的缩放行为。

1

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

width: 控制 viewport 的宽度，可指定为数字如 800，或特殊值如 device-width，即设置为 100%。

height: 控制 viewport 的高度。

initial-scale: 页面第一次加载时的缩放比例。

maximum-scale: 最大缩放比例，取值从 0 到 10。

minimum-scale: 最小缩放比例，取值从 0 到 10。

user-scaleble: 是否允许用户缩放，取值为 yes/true 或 no/false。

阅读全文

要吸取别人的经验，要产出自己的总结。— 菲利克斯·小赖

工作比较忙，但时时要提醒自己，保持对行业资讯的敏感度，业余时间多学习一些对自己成长有益的技能，最好是通过文章产出的方式，和业界交流。

笨鸟先飞，越飞越高。

阅读全文

旧版本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 新建实例
var xhr = new XMLHttpRequest();
// 向服务器发出请求
xhr.open('GET','example.php');
xhr.send();
// 监控xhr对象的状态变化，制定回调函数
xhr.onreadystatechange  = function(){
     if(xhr.readyState ==4 && xhr.status ==200){ // 4表示数据接收完毕，200表示服务器返回一切正常
          alert( xhr.responseText ); 
     } else {
          alert( xhr.statusText );
     }
}

阅读全文

moment.js 是一个专注于处理时间的工具库。

阅读全文

先来几个栗子：

    // \b 表示匹配一个位置：单词开头或结尾
    \bhi\b        //=> hi

    // . 匹配除换行符以外的任意字符
    // * 匹配多次
    // .* 匹配任意数量的不包含换行的字符
    \bhi\b.*\bLucy\b    //=> hi i love you Lucy        

    // \d 匹配一位数字
    // {2} 匹配2次
    0\d{2}-\d{8}   //=> 086-13800138000

    // \s 匹配任意的空白符，包括空格、制表符、换行符、中文全角空格
    // \w 匹配字母或数字或下划线或汉字
    \ba\w*\b    //=> ahdh256hvc

    // + 匹配一次或多次，注意与 * 的区别（匹配多次）
    // \d+ 匹配1个或多个连续的数字
    \d+        //=> 4 或 465435
    \d*        //=> 465435

    // ^ 匹配字符串的开始
    // $ 匹配字符串的结束
    ^\d{5,12}$         //=> 匹配5-12位的数字

    // [] 匹配里边的值
    [aeiou]     //=> 匹配 a e i o u
    [0-9]        //=> 与 \d 同义

    // | 表示分支
    0\d{2}-\d{}8|0\d{3}-\d{7}    => 匹配 010-12345678 或 0102-1234567

    // () 表示分组
    (\d{1,3}\.){3}\d{1,3}    //=> 匹配一个IP，如 12.345.67.89
    // 以上会匹配不合法的IP，如 256.777.888.999

    // 大写字母 或 [^xxxx] 表示反义
    \S+            //=> 匹配不包含空白符的字符串
    <lai[^>]+>    //=> 匹配 <laispace>

    // (?=exp) 零宽度正预测先行断言，即自身出现的位置后面能匹配 exp
    \b\w+(?=ing\b) //=> 查找 I'm reading a book 时匹配 read

    // (?<=exp)零宽度正回顾后发断言，即自身出现的位置前面能匹配 exp
    (?<=\bre)\w+ //=> 查找 I'm reading a book 时匹配 ading

    // (?!exp)负向零宽断言，即此位置的后面不能匹配 exp
    \d{3}(?!\d)        //=> 匹配三个数字，但这三个数字后不能是数字，如 123abcd

    // (?<!exp)零宽度负回顾后发断言，即此位置的前面不能匹配 exp
    (?<![a-z])\d{7}        //=> 匹配前面不是小写字母的七位数字

阅读全文

单行注释

    ## This is a comment.

多行注释

    #*
        This is a mutil-line comment
        This is a mutil-line comment
        This is a mutil-line comment        
    *#        

变量

    <div>
        #set ( $name = 'xiaolai')
        Hello $name !
    </div>

属性

    $person.Name

方法

    $person.getName()
    $person.setName('xiaolai')

    ## 注意 $person.getName() 等同于 $person.Name

阅读全文

使用 $ sudo npm update -g 报错，清除 npm 缓存 或者在 nodejs.org 的官网下载最新版重装后，还是报错。

解决办法是，执行：

    // 使当前用户拥有 /usr/local/lib/node_modules 目录的权限
    $ sudo chown -R $USER /usr/local/lib/node_modules

然后再执行更新就不会报错了：

    $ npm update -g    

让普通用户拥有 npm 的全局权限，即可以不用在 install 或 update 时加上 sudo：

    // 使当前用户拥有 /usr/local 目录的权限
    $ sudo chown -R $USER /usr/local
    // 然后就可以直接全局安装/更新一些包了
    $ npm install -g xxx
    $ npm update -g

underscore.js 提供了一系列工具函数，而 lodash.js 可以认为是 underscore.js 的一个超集。

简单示例：

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

var _ = require('lodash');
// 去掉falsy值后的数组
_.compact([0, 1, false, 2, '', 3]);
// → [1, 2, 3]
// 找出数组中不同的值
_.difference([1, 2, 3, 4, 5], [5, 2, 10]);
// → [1, 3, 4]
// 根据条件找出数组元素的索引值，未找到则返回 -1
var characters = [
  { 'name': 'barney',  'age': 36, 'blocked': false },
  { 'name': 'fred',    'age': 40, 'blocked': true },
  { 'name': 'pebbles', 'age': 1,  'blocked': false }
];
_.findIndex(characters, function(chr) {
  return chr.age < 20;
});
// → 2
// using "_.where" callback shorthand
_.findIndex(characters, { 'age': 36 });
// → 0
// using "_.pluck" callback shorthand
_.findIndex(characters, 'blocked');
// → 1
// 找出数组中相同的值
_.intersection([1, 2, 3], [5, 2, 1, 4], [2, 1]);
// → [1, 2]
// 找出数组中最后的值
_.last([1, 2, 3]);
// → 3
_.last([1, 2, 3], 2);
// → [2, 3]
_.last([1, 2, 3], function(num) {
  return num > 1;
});
// → [2, 3]
// 找出某个值最后出现的索引
_.lastIndexOf([1, 2, 3, 1, 2, 3], 2);
// → 4
// 从 第三个元素开始
_.lastIndexOf([1, 2, 3, 1, 2, 3], 2, 3);
// → 1
// 移除数组中指定的值
var array = [1, 2, 3, 1, 2, 3];
_.pull(array, 2, 3);
console.log(array);
// → [1, 1]
// 返回一个范围数组
// _.range([start=0], end, [step=1])
_.range(4);
// → [0, 1, 2, 3]
_.range(1, 5);
// → [1, 2, 3, 4]
_.range(0, 20, 5);
// → [0, 5, 10, 15]
_.range(0, -4, -1);
// → [0, -1, -2, -3]
_.range(1, 4, 0);
// → [1, 1, 1]
_.range(0);
// → []
// 移除数组中匹配条件的值
var array = [1, 2, 3, 4, 5, 6];
var evens = _.remove(array, function(num) { return num % 2 == 0; });
console.log(array);
// → [1, 3, 5]
console.log(evens);
// → [2, 4, 6]
// 切割数组，默认切割 1
// _.rest(array, [callback=1], [thisArg])
_.rest([1, 2, 3]);
// → [2, 3]
_.rest([1, 2, 3], 2);
// → [3]
_.rest([1, 2, 3], function(num) {
  return num < 3;
});
// → [3]
// 更多实用函数见 http://lodash.com/docs

阅读全文