使用 Stream

当我们读取一个文件内容时，可能会这么写：

var http = require('http');
var fs = require('fs');
var server = http.createServer(function (req, res) {
    fs.readFile(__dirname + '/data.txt', function (err, data) {
        res.end(data);
    });
});
server.listen(8000);

当这个文件 data.txt 非常大时，不仅会占满内存，而且对于网络不好的用户而言体验将非常差。

好在 req 和 res 都是 Stream 对象，我们可以使用 Stream 的方式来写代码：

var http = require('http');
var fs = require('fs');
var server = http.createServer(function (req, res) {
    var stream = fs.createReadStream(__dirname + '/data.txt');
    stream.pipe(res);
});
server.listen(8000);

我们使用 fs.createReadStream 创建了一个 Stream 对象，.pipe() 方法会监听对应的 data 和 end 事件。

使用 Stream 的好处在于，我们将 data.txt 分段（chunk）传输到客户端，减轻了网络带宽的压力。

阅读全文

bytewiser 是 nodeschool.io 出品的nodejs入门练习项目

bytewiser-exercise-1

Write a node program that prints a buffer object containing the string “bytewiser” using console.log.

1
2
3

var str = 'bytewiser';
var buffer = new Buffer(str);
console.log(buffer);

bytewiser-exercise-2

Given an unknown number of bytes passed via process.argv, create a buffer from them and output a hexadecimal encoded representation of the buffer.

1
2
3
4
5
6
7

var array = process.argv.slice(2);
var buffer = new Buffer(array);
console.log(buffer.toString('hex'));
// 官方答案
// var bytes = process.argv.slice(2).map(function(arg) { return parseInt(arg) })
// console.log(new Buffer(bytes).toString('hex'))

阅读全文

1. 1. 安装 Sass
2. 2. 快速入门 sass 语法
   1. 2.1. Variables | 变量
   2. 2.2. Nesting | 嵌套
   3. 2.3. Partials | 模板
   4. 2.4. Mixins | 混入
   5. 2.5. Inheritance | 继承
   6. 2.6. Operators | 运算符
3. 3. 编译 .scss 为 .css
4. 4. 监听文件变化
   1. 4.0.1. 参考链接

安装 Sass

1
2
3
4
5
6

$ gem install sass
// 或
$ sudo gem install sass 
// 查看 sass 版本
$ sass -v

快速入门 sass 语法

Variables | 变量

1
2
3
4
5
6
7
8

// test.scss
$lai-font: Roboto, sans-serif;
$lai-color: #eee;
body {
  color: $lai-color;
  font-family: $lai-font;
}

Nesting | 嵌套

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

nav {
  ul {
    margin: 0 auto;
    padding: 0;
    list-style: 0;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 5px 10px;
    text-decoration: none;
  }
}

Partials | 模板

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

// _reset.scss
html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}
// 使用 partial
// base.scss
@import 'reset'
body {
  backgrount: #333;
}

Mixins | 混入

1
2
3
4
5
6
7
8
9
10

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
// 使用 mixin
.box {
  @include border-radius(10px);
}

Inheritance | 继承

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

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  @extend .message;
  border-color: green;
}
.error {
  @extend .message;
  border-color: red;
}
.warning {
  @extend .message;
  border-color: yellow;
}

Operators | 运算符

.container {
width: 100%;
}
article[role=”main”] {
float: left;
width: 600px / 960px 100%;
}
article[role=”sub”] {
float: right;
width: 300px / 960px 100%;
}

编译 .scss 为 .css

nested：嵌套缩进的css代码，它是默认值。
　 　
expanded：没有缩进的、扩展的css代码。
　 　
compact：简洁格式的css代码。
　　
compressed：压缩后的css代码。

1
2
3
4
5
6
7

// 编译风格默认为 --style nested
$ sass test.scss test.css
// 编译风格设置为 --style compressed
$ sass --style compassed test.scss test.css
// 查看编译后的 test.css    
$ cat test.css

监听文件变化

一旦某个文件/目录发生变化，Sass 就自动编译出新的版本

1
2
3
4

// 监听文件
$ sass --watch test.scss:test.css
// 监听目录，一旦 src/scss 下有文件发生变化，就编译到 dist/css 目录
$ sass --watch src/scss:dist/css

参考链接

• Sass 官网
• Sass 文档

先来几个栗子：

    // \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

在操作系统中，每一个程序都是一个进程类的实例对象。

进程信息

在 NodeJS 中，使用 process 代表 NodeJS 应用程序。

进程属性

    // 执行程序的绝对路径
    process.execPath

    // NodeJS版本号
    process.version

    // NodeJS 及其依赖的版本号
    process.versions

    // 运行平台
    process.platform

    // 一个标准输入流对象
    process.stdin
    // 恢复读取标准输入流数据
    process.stdin.resume()

    // 一个标准输出流对象
    process.stdout

    // 一个标准错误流对象
    process.stderr

    // 参数列表
    process.argv

    // 环境变量
    process.env

    // 配置信息
    process.config

    // 进程 id
    process.pid

    // 命令行窗口的标题
    process.title

    // 处理器架构
    process.arch

阅读全文

在Shell中运行Node程序

方法1 - 指定node程序和需要运行的脚本：

    $ node app.js

方法2 - 使用 #! 将文件声明为可执行文件：

    // app.js #!表示调用解释器，执行 /usr/local/bin/node 的指令

    // 静态设置node程序路径 通过 $ which node 查询到
    #!/usr/local/bin/node        
    console.log('Hello Lai')

    // 动态设置node程序路径，使用 env 指令查找 PATH 环境变量存储的 node 路径
    #!/usr/bin/env node
    console.log('Hello Lai')

同时记得要将文件权限改为可执行：

    $ chmod 755 app.js
    // 或
    $ chmod +x app.js

接着直接运行脚本就可以了：

    $ ./app.js

阅读全文

捣鼓阿里云上的VPS，入门Linux，记录一下部署 NodeJs+MongoDB 的过程

1. Ubuntu下安装NodeJS

   在 Ubuntu 12.04 ~ 13.04 中，默认安装的的 Node 版本是 0.6.x的

    $ sudo apt-get install nodejs
    $ sudo apt-get install npm
    $ node -v
   

   而在 Ubuntu 13.10 ~ 14.04 中则是 0.10.x 版本

   我的版本是旧版，所以需要使用这种方式来安装：

    $ sudo apt-get install software-properties-common
    $ sudo apt-get install python-software-properties
    // 安装以上两个包后才会有下面这个 add-apt-repository 命令：
    $ sudo add-apt-repository ppa:chris-lea/node.js
    $ sudo apt-get update
    $ sudo apt-get install python-software-properties python g++ make nodejs
   

1. Linux下安装MongoDB

阅读全文

1. 1. CSS 类
2. 2. 工具类

这里整理一些我自己用过且觉得好用的工具、类库的玩意~

欢迎推荐更多好玩的给我：）

CSS 类

• fontAwesome 海量可伸缩的字体图标

示例：

    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 显示不同尺寸的照相机(camera)图标 -->
    <i class="fa fa-camera-retro fa-lg"></i> fa-lg
    <i class="fa fa-camera-retro fa-2x"></i> fa-2x
    <i class="fa fa-camera-retro fa-3x"></i> fa-3x
    <i class="fa fa-camera-retro fa-4x"></i> fa-4x
    <i class="fa fa-camera-retro fa-5x"></i> fa-5x

链接：

1. http://fontawesome.io/
2. Github

工具类

• component 快速安装第三方类库

示例：

1. 安装 component

    $ npm install -g component

2. 创建配置文件 component.json

    {
      "name": "getting-started-with-component",
      "dependencies": {
        "necolas/normalize.css": "^3.0.0"  // 依赖normalize.css类库
      },
      "scripts": ["index.js"],    // 引入自定义的js
      "styles": ["index.css"]    // 引入自定义的css
    }

2. 创建 index.html

    // index.html 注意这里只有 build/build.css 和 build/build.js 文件
    <!DOCTYPE html>
    <html>
      <head>
        <title>Getting Started with Component</title>
        <link rel="stylesheet" href="build/build.css">
      </head>
      <body>
        <h1>Getting Started with Component</h1>
        <p class="blink">Woo!</p>
        <script src="build/build.js"></script>
      </body>
    </html>    

3. 创建 index.css
    * {
          box-sizing: border-box;
    }

4. 创建 index.js

    console.log('Hello component！')

5. 使用 build 命令进行构建

    $ component build

6. 打开 index.html 看看吧：）

链接：

1. http://component.io/
2. Guide