// 新建实例
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 );
     }
}

阅读全文

7月 18 2014

Javascript17

moment.js 学习笔记

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

阅读全文

7月 17 2014

Node24

正则表达式

先来几个栗子：

    // \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}        //=> 匹配前面不是小写字母的七位数字

阅读全文

7月 17 2014

Node24

Velocity 学习笔记

单行注释

    ## 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

阅读全文

7月 17 2014

Node24

NPM update -g 错误的解决

使用 $ 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

7月 13 2014

lodash.js 学习笔记

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

简单示例：

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

阅读全文

7月 13 2014

MEANJS 学习笔记

server.js 为程序入口文件
config/config.js 为配置入口文件
config/env/all.js 配置将在所有环境(development、production、test)中生效

config.db
config.port
config.app.title
config.app.description
config.app.keywords
// 项目css文件路径，glob 模式匹配
config.assets.css
config.assets.js
// 项目的 Jasmine 测试文件路径
config.assets.tests
// 依赖的第三方 css 文件路径
config.assets.lib.css
config.assets.lib.js
指定环境启动应用

// 开发环境，将使用 config/env/development.js 配置
$ NODE_ENV=development grunt
// 生产环境，将使用 config/env/production.js 配置
$ NODE_ENV=production grunt
// 测试环境，将使用 config/env/test.js 配置
$ NODE_ENV=test grunt
应用启动后会自动加载的文件

// 在这些目录下创建的 model、route、strategy 等，在需要的地方可直接引用，无须手动引入
app/models
app/routes
config/strategies
public/modules

阅读全文

7月 13 2014

Karma 和 Jasmine 学习笔记

Jasmine

Jasmine 是一个用于编写 js 测试的框架。

下载

$ git clone https://github.com/pivotal/jasmine.git
$ mkdir jasmine && cd jasmine
$ mv jasmine/dist/jasmine-standalone-2.0.0.zip jasmine/jasmine
$ cd jasmine/jasmine
// 解压
$ unzip jasmine-standalone-2.0.0.zip

// 除了使用 git 也可以使用 bower 来安装 $ bower install jasmine

创建测试文件

// test.html
<!-- 引入jasmine依赖文件 -->
<link rel="stylesheet" type="text/css" href="jasmine/lib/jasmine-2.0.0/jasmine.css">
<script type="text/javascript" src="jasmine/lib/jasmine-2.0.0/jasmine.js"></script>
 <script type="text/javascript" src="jasmine/lib/jasmine-2.0.0/jasmine-html.js"></script>
<script type="text/javascript" src="jasmine/lib/jasmine-2.0.0/boot.js"></script>

<!-- 编写需要测试的代码 -->
<script>
  function sayHello (name) {
    return 'Hello ' + name;
  }
</script>

<!-- 编写测试脚本 -->
<script>
  describe('A suite of basic functions', function () {
    it('sayHello', function () {
      var name = 'Xiaolai';
      var exp = 'Hello Xiaolai';
      expect(exp).toBe(sayHello(name));
    })
  })
</script>

浏览器打开 test.html 即可看到测试效果

更多的 jasmine 语法，查看官方文档

阅读全文

Laispace - 来思碑

天酬勤笨先飞，乐观进取。

meta viewport 标签

2014-07-好文阅读

XMLHttpRequest 对象新特性

旧版本

moment.js 学习笔记

正则表达式

Velocity 学习笔记

NPM update -g 错误的解决

lodash.js 学习笔记

MEANJS 学习笔记

Karma 和 Jasmine 学习笔记

Jasmine