Node笔记(二)

在 2016年9月8日上张贴由 BestLove

# stream
// 在node中，流也是一个对象，我们只需要响应流的事件就行了
// data事件：流的数据已经可以读取了(可能会有多次，每次传递chunk是流的一部分数据)
// end事件：流已经到末尾了
// error事件：出错了
'use strict';
var fs = require('fs');
var rs = fs.createReadStream('test.php', 'utf-8');
rs.on('data', function(chunk){
    // 异步返回的数据，必须在回调中操作
    // 不要用全局变量赋值，可能会是undefined
    streamWrite('test1.php', 'utf-8', chunk);
    console.log(chunk);
});
rs.on('end', function() {
    console.log('over');
});
rs.on('error', function(err) {
    console.log(err);
});
function streamWrite(dir, charset, data) {
    var ws1 = fs.createWriteStream(dir, charset);
    ws1.write(data);
    ws1.write('\necho 22');
    ws1.end();
}
// 写入二进制流
var ws2 = fs.createWriteStream('2.png');
ws2.write(new Buffer('use stream write bin'), 'utf-8');
ws2.end();

# pipe
// 所有可以读取数据的流都继承自stream.Readable，所有可以写入的流都继承自stream.Writable
// 就像两根水管可以串起来一样，一个Readable和一个Writable也可以串起来
// 所有的数据自动从Readable流进入Writalbe流，这种操作就叫pipe
// Node.js的Readable有一个pipe()，就是用来干这事的
// 下面几行代码实际上就是个复制操作
'use strict';
var fs = require('fs');
var rs = fs.createReadStream('sample.txt');
var ws = fs.createWriteStream('copied.txt');
rs.pipe(ws);
// 默认情况下，当Readable流的数据读取完毕后，end事件就会触发，将自动关闭Writable流
readable.pipe(writable, { end: false });        //传入参数，不让它自动关闭

# http
// http服务器demo，输出hello world
'use strict';
// 导入http模块
var http = require('http');
// 创建http server并传入回调函数
var server = http.createServer(function(request, response){
    console.log(request.method + ':' + request.url);
    response.writeHead(200, {'Content-Type':'text/html'});
    response.end('<h1>hello world</h1>');
});
server.listen(8888);
console.log('server is running in 127.0.0.1:8888');

// 文件服务器 v1.0
'use strict';
// 导入http模块
var http = require('http');
var url = require('url');
var fs = require('fs');
// 创建http server并传入回调函数
var server = http.createServer(function(request, response){
    var pathname = url.parse(request.url).pathname;
    try {
        var data = fs.readFileSync(pathname);
        response.writeHead(200, {'Content-Type':'image/x-png'});
        response.end(data);
    } catch(e) {
        console.log(e);
    }
    response.writeHead(404, {'Content-Type':'text/html'});
    response.end('not found');
});
server.listen(8888);
console.log('server is running in 127.0.0.1:8888');

// url.parse
console.log(url.parse('http://user:pass@host.com:8080/path/to/file?query=string#hash'));
Url {
    protocol: 'http:',
    slashes: true,
    auth: 'user:pass',
    host: 'host.com:8080',
    port: '8080',
    hostname: 'host.com',
    hash: '#hash',
    search: '?query=string',
    query: 'query=string',
    pathname: '/path/to/file',
    path: '/path/to/file?query=string',
    href: 'http://user:pass@host.com:8080/path/to/file?query=string#hash'
}

// 本地文件处理 可以用path模块(兼容不同操作系统的/)
'use strict';
var path = require('path');
// 解析当前目录 D:\wnmp\www\public\js
var workDir = path.resolve('.');
// D:\wnmp\www\public\js\pub\test\index.php
var filePath = path.join(workDir, 'pub', 'test', 'index.php');

// 文件服务器 v1.1
'use strict';
var fs = require('fs');
var path = require('path');
var http = require('http');
var url = require('url');
// 启动脚本时传入根目录
var rootPath = path.resolve(process.argv[2] || '.');
var server = http.createServer(function(request, response) {
    var filePath = path.join(rootPath, url.parse(request.url).pathname);
    fs.stat(filePath, function(err, stat) {
        if (!err && stat.isFile()) {
            response.writeHead(200);
            fs.createReadStream(filePath).pipe(response);
        } else {
            response.writeHead(404);
            response.end('not found');
        }
    });
});
server.listen(8888);

# crypto
// MD5等
'use strict';
const crypto = require('crypto');
// 可以传入md5 sha1 sha256 sha512...
const hash = crypto.createHash('md5');
hash.update('123456');
// 以16进制字符串表示签名(通常是hex和base64格式)
console.log(hash.digest('hex'));    //e10adc3949ba59abbe56e057f20f883e

// Hmac也是一种hash算法，可以利用MD5等，需要一个密钥
'use strict';
const crypto = require('crypto');
const hmac = crypto.createHmac('sha256', 'your sign key');
hmac.update('123456');
// 91e953f62f88a32a293a6ee8bd470a69ae77e4bb5549b1e43bd9bcf40f2e3ac3
console.log(hmac.digest('hex'));

// AES对称加密
'use strict';
const crypto = require('crypto');
function aesEncrypt(data, key) {
    const cipher = crypto.createCipher('aes192', key);
    var crypted = cipher.update(data, 'utf8', 'hex');
    crypted += cipher.final('hex');
    return crypted;
}
function aesDecrypt(data, key) {
    const decipher = crypto.createDecipher('aes192', key);
    var decrypted = decipher.update(encrypted, 'hex', 'utf8');
    decrypted += decipher.final('utf8');
    return decrypted;
}
var data = 'Hello, this is a secret message!';
var key = 'Password!';
var encrypted = aesEncrypt(data, key);
var decrypted = aesDecrypt(encrypted, key);
console.log('Plain text: ' + data);
console.log('Encrypted text: ' + encrypted);
console.log('Decrypted text: ' + decrypted);

/*
    Diffie-Hellman
    DH算法是一种密钥交换协议，它可以让双方在不泄漏密钥的情况下协商出一个密钥来
    DH算法基于数学原理，比如小明和小红想要协商一个密钥，可以这么做
    小明先选一个素数p=23(p必须是素数，否则可能被整除)和一个底数g=5(底数可以任选)和一个秘密整数a=6
    A = g^a % p = 8 (5的6次方模23=8) 然后告诉小红 p=23 g=5 A=8
    小红根据pgA，也选一个秘密整数b=15 算出：B = g^b % p = 19 然后把B告诉小明
    小明算出 s = B^a % p =2  小红算出 s = A^b % p = 2
    所以最终协商的密钥 s = 2
    第三方只能知道p=23，g=5，A=8，B=19，不知道双方的秘密整数a=6和b=15，所以无法计算出密钥2
*/
'use strict';
const crypto = require('crypto');
// 根据给定的位长度，创建小明的DiffieHellman对象
var ming = crypto.createDiffieHellman(512);
// 生成密钥和公钥(底数和秘密整数)
var ming_keys = ming.generateKeys();
// 返回质数
var prime = ming.getPrime();
// 返回生成器
var generator = ming.getGenerator();
// 根据小明的质数和生成器创建小红的DiffieHellman对象
var hong = crypto.createDiffieHellman(prime, generator);
// 生成密钥和公钥(底数和秘密整数)
var hong_keys = hong.generateKeys();
// 分别算出小明、小红的协商密钥s
var ming_secret = ming.computeSecret(hong_keys);
var hong_secret = hong.computeSecret(ming_keys);
// 生成的密钥是一个Buffer，转成16进制字符串后应该是相等的
console.log(ming_secret.toString('hex')  === hong_secret.toString('hex'));

// crypto模块也可以处理数字证书、RSA等

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

# stream

// 在node中，流也是一个对象，我们只需要响应流的事件就行了

// data事件：流的数据已经可以读取了(可能会有多次，每次传递chunk是流的一部分数据)

// end事件：流已经到末尾了

// error事件：出错了

'use strict';

var fs = require('fs');

var rs = fs.createReadStream('test.php', 'utf-8');

rs.on('data', function(chunk){

// 异步返回的数据，必须在回调中操作

// 不要用全局变量赋值，可能会是undefined

streamWrite('test1.php', 'utf-8', chunk);

console.log(chunk);

});

rs.on('end', function() {

console.log('over');

});

rs.on('error', function(err) {

console.log(err);

});

function streamWrite(dir, charset, data) {

var ws1 = fs.createWriteStream(dir, charset);

ws1.write(data);

ws1.write('\necho 22');

ws1.end();

}

// 写入二进制流

var ws2 = fs.createWriteStream('2.png');

ws2.write(new Buffer('use stream write bin'), 'utf-8');

ws2.end();

# pipe

// 所有可以读取数据的流都继承自stream.Readable，所有可以写入的流都继承自stream.Writable

// 就像两根水管可以串起来一样，一个Readable和一个Writable也可以串起来

// 所有的数据自动从Readable流进入Writalbe流，这种操作就叫pipe

// Node.js的Readable有一个pipe()，就是用来干这事的

// 下面几行代码实际上就是个复制操作

'use strict';

var fs = require('fs');

var rs = fs.createReadStream('sample.txt');

var ws = fs.createWriteStream('copied.txt');

rs.pipe(ws);

// 默认情况下，当Readable流的数据读取完毕后，end事件就会触发，将自动关闭Writable流

readable.pipe(writable, { end: false }); //传入参数，不让它自动关闭

# http

// http服务器demo，输出hello world

'use strict';

// 导入http模块

var http = require('http');

// 创建http server并传入回调函数

var server = http.createServer(function(request, response){

console.log(request.method + ':' + request.url);

response.writeHead(200, {'Content-Type':'text/html'});

response.end('<h1>hello world</h1>');

});

server.listen(8888);

console.log('server is running in 127.0.0.1:8888');

// 文件服务器 v1.0

'use strict';

// 导入http模块

var http = require('http');

var url = require('url');

var fs = require('fs');

// 创建http server并传入回调函数

var server = http.createServer(function(request, response){

var pathname = url.parse(request.url).pathname;

try {

var data = fs.readFileSync(pathname);

response.writeHead(200, {'Content-Type':'image/x-png'});

response.end(data);

} catch(e) {

console.log(e);

}

response.writeHead(404, {'Content-Type':'text/html'});

response.end('not found');

});

server.listen(8888);

console.log('server is running in 127.0.0.1:8888');

// url.parse

console.log(url.parse('http://user:pass@host.com:8080/path/to/file?query=string#hash'));

Url {

protocol: 'http:',

slashes: true,

auth: 'user:pass',

host: 'host.com:8080',

port: '8080',

hostname: 'host.com',

hash: '#hash',

search: '?query=string',

query: 'query=string',

pathname: '/path/to/file',

path: '/path/to/file?query=string',

href: 'http://user:pass@host.com:8080/path/to/file?query=string#hash'

}

// 本地文件处理可以用path模块(兼容不同操作系统的/)

'use strict';

var path = require('path');

// 解析当前目录 D:\wnmp\www\public\js

var workDir = path.resolve('.');

// D:\wnmp\www\public\js\pub\test\index.php

var filePath = path.join(workDir, 'pub', 'test', 'index.php');

// 文件服务器 v1.1

'use strict';

var fs = require('fs');

var path = require('path');

var http = require('http');

var url = require('url');

// 启动脚本时传入根目录

var rootPath = path.resolve(process.argv[2] || '.');

var server = http.createServer(function(request, response) {

var filePath = path.join(rootPath, url.parse(request.url).pathname);

fs.stat(filePath, function(err, stat) {

if (!err && stat.isFile()) {

response.writeHead(200);

fs.createReadStream(filePath).pipe(response);

} else {

response.writeHead(404);

response.end('not found');

}

});

server.listen(8888);

# crypto

// MD5等

'use strict';

const crypto = require('crypto');

// 可以传入md5 sha1 sha256 sha512...

const hash = crypto.createHash('md5');

hash.update('123456');

// 以16进制字符串表示签名(通常是hex和base64格式)

console.log(hash.digest('hex')); //e10adc3949ba59abbe56e057f20f883e

// Hmac也是一种hash算法，可以利用MD5等，需要一个密钥

'use strict';

const crypto = require('crypto');

const hmac = crypto.createHmac('sha256', 'your sign key');

hmac.update('123456');

// 91e953f62f88a32a293a6ee8bd470a69ae77e4bb5549b1e43bd9bcf40f2e3ac3

console.log(hmac.digest('hex'));

// AES对称加密

'use strict';

const crypto = require('crypto');

function aesEncrypt(data, key) {

const cipher = crypto.createCipher('aes192', key);

var crypted = cipher.update(data, 'utf8', 'hex');

crypted += cipher.final('hex');

return crypted;

}

function aesDecrypt(data, key) {

const decipher = crypto.createDecipher('aes192', key);

var decrypted = decipher.update(encrypted, 'hex', 'utf8');

decrypted += decipher.final('utf8');

return decrypted;

}

var data = 'Hello, this is a secret message!';

var key = 'Password!';

var encrypted = aesEncrypt(data, key);

var decrypted = aesDecrypt(encrypted, key);

console.log('Plain text: ' + data);

console.log('Encrypted text: ' + encrypted);

console.log('Decrypted text: ' + decrypted);

Diffie-Hellman

DH算法是一种密钥交换协议，它可以让双方在不泄漏密钥的情况下协商出一个密钥来

DH算法基于数学原理，比如小明和小红想要协商一个密钥，可以这么做

小明先选一个素数p=23(p必须是素数，否则可能被整除)和一个底数g=5(底数可以任选)和一个秘密整数a=6

A = g^a % p = 8 (5的6次方模23=8) 然后告诉小红 p=23 g=5 A=8

小红根据pgA，也选一个秘密整数b=15 算出：B = g^b % p = 19 然后把B告诉小明

小明算出 s = B^a % p =2 小红算出 s = A^b % p = 2

所以最终协商的密钥 s = 2

第三方只能知道p=23，g=5，A=8，B=19，不知道双方的秘密整数a=6和b=15，所以无法计算出密钥2

'use strict';

const crypto = require('crypto');

// 根据给定的位长度，创建小明的DiffieHellman对象

var ming = crypto.createDiffieHellman(512);

// 生成密钥和公钥(底数和秘密整数)

var ming_keys = ming.generateKeys();

// 返回质数

var prime = ming.getPrime();

// 返回生成器

var generator = ming.getGenerator();

// 根据小明的质数和生成器创建小红的DiffieHellman对象

var hong = crypto.createDiffieHellman(prime, generator);

// 生成密钥和公钥(底数和秘密整数)

var hong_keys = hong.generateKeys();

// 分别算出小明、小红的协商密钥s

var ming_secret = ming.computeSecret(hong_keys);

var hong_secret = hong.computeSecret(ming_keys);

// 生成的密钥是一个Buffer，转成16进制字符串后应该是相等的

console.log(ming_secret.toString('hex') === hong_secret.toString('hex'));

// crypto模块也可以处理数字证书、RSA等

Node笔记(一)

在 2016年9月7日上张贴由 BestLove

# 下载地址
// 官网地址
https://nodejs.org/en/
// 国内镜像
http://pan.baidu.com/s/1kU5OCOB#path=%252Fpub%252Fnodejs

# 安装
// 在Windows上安装时务必选择全部组件，包括勾选Add to Path
// npm是Node.js的包管理工具(package manager)
node -v         //v6.5.0
npm -v          //3.10.3
node            //进入Node.js交互环境，退出按两下Ctrl+C

# 测试
// test.js    node test.js
'use strict';
console.log('hello world');

# Visual Studio Code
// 官方网站
https://code.visualstudio.com
// 国内镜像
http://pan.baidu.com/s/1kU5OCOB#path=%252Fpub%252Fnodejs
// 安装(全部勾选)
// 设置
// 右下角把CRLF改成LF(兼容linux系统)
// 调试(左边第4个图案) 没有配置的情况下点右边过来第2个图案
// 然后设置json，下面2个附加直接删了，program的文件名改成要调试的文件名
// 点击开始箭头就能调试了，需要手动按结束(方块图案)中止

# sublime Node插件
// 下载地址
https://github.com/tanepiper/SublimeText-Nodejs
// 解压后改名为Nodejs
// sublime -> Perferences -> Browse Packages 打开插件文件夹
// 将Nodejs剪切进来
// 打开Nodejs.sublime-build文件修改配置
// "encoding": "cp1252" -> "encoding": "utf8"
// "cmd": ["taskkill /F /IM node.exe & node", "$file"] -> "cmd": ["node", "$file"]
// 打开Nodejs.sublime-settings文件修改配置
// node_command": false -> "node_command": "D:\\Program Files\\nodejs\\node.exe"
// "npm_command": false -> "npm_command": "D:\\Program Files\\nodejs\\npm.cmd"
// 然后就能用ctrl+B运行node代码了

# 模块
// node中一个文件就是一个模块，文件名就是它的模块名
// 不同模块的变量可以重名，用闭包来实现的(function(){xx.js})();
// hello.js
'use strict';
var s = 'Hello';
function greet(name) {
    console.log(s + ', ' + name + '!');
}
// 把函数greet作为模块的输出暴露出去，这样其他模块就可以使用greet函数了
// 输出的变量可以是任意对象、函数、数组等
module.exports = greet;

// main.js
'use strict';
// 引入hello模块 变量greet就是在hello.js中用module.exports = greet;输出的greet函数
// 记得写路径 如果直接写'hello' 依次在内置模块、全局模块和当前模块下查找hello.js
var greet = require('./hello');
var s = 'Michael';
greet(s);   // Hello, Michael!

// exports输出(因为node中module.exports默认是一个空对象)
module.exports = {                  //可以赋值，可以.语法
    hello: hello,
    greet: greet
};
exports.hello = hello;              //只能.语法
exports.greet = greet;

# 基本模块
// js中的全局变量是window node中也有个全局变量global
// node交互界面 可以看到console的方法
> global.console

// process(代表当前Node.js进程)
// test.js
// process.nextTick()将在下一轮事件循环中调用
process.nextTick(function () {
    console.log('nextTick callback!');
});
console.log('nextTick was set!');
// node test.js 根据输出发现，process.nextTick不是立刻执行而是等到下一次事件轮询
// nextTick was set!
// nextTick callback!

// Node.js进程本身的事件就由process对象来处理
// 程序即将退出时的回调函数
process.on('exit', function (code) {
    console.log('about to exit with code: ' + code);
});

# 判断js执行环境是浏览器还是Node
if (typeof(window) === 'undefined') {
    console.log('node.js');
} else {
    console.log('browser');
}

# fs Node.js内置的file system
// 正常读取时，err为null data为读取到的string
// 读取错误时，err是一个错误对象 data为undefined
// 这是node的标准回调函数，第一个参数：错误信息 第二个参数：结果
'use strict';
var fs = require('fs');
fs.readFile('./test.php', 'utf-8', function(err, data){
    if (err) {
        console.log(err);
    } else {
        console.log(data);
    }
});

// 不传入编码，读取的是二进制文件，回调函数将返回一个Buffer对象
'use strict';
var fs = require('fs');
fs.readFile('./1.png', function(err, data){
    if (err) {
        console.log(err);
    } else {
        console.log(data);
        console.log(data.length + ' bytes');
    }
});
// Buffer -> String
var text = data.toString();
// String -> Buffer
var buf = new Buffer('text', 'utf-8');

// 同步读文件
'use strict';
var fs = require('fs');
try {
    var data = fs.readFileSync('test.php', 'utf-8');
    console.log(data); 
} catch(e) {
    console.log(e);
}

// 写文件 回调函数只关心成功与否，所以只需要第一个参数
// 同样，也有同步写文件方法 writeFileSync
fs.writeFile('test.php', 'if string then utf-8, if Buffer then bin', function (err) {
    if (err) {
        console.log(err);
    } else {
        console.log('ok');
    }
});

// 获取文件信息 同样，也有同步方法 statSync
fs.stat('test.php', function (err, stat) {
    if (err) {
        console.log(err);
    } else {
        // 是否是文件:
        console.log('isFile: ' + stat.isFile());
        // 是否是目录:
        console.log('isDirectory: ' + stat.isDirectory());
        if (stat.isFile()) {
            // 文件大小:
            console.log('size: ' + stat.size);
            // 创建时间, Date对象:
            console.log('birth time: ' + stat.birthtime);
            // 修改时间, Date对象:
            console.log('modified time: ' + stat.mtime);
        }
    }
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

# 下载地址

// 官网地址

https://nodejs.org/en/

// 国内镜像

http://pan.baidu.com/s/1kU5OCOB#path=%252Fpub%252Fnodejs

# 安装

// 在Windows上安装时务必选择全部组件，包括勾选Add to Path

// npm是Node.js的包管理工具(package manager)

node -v //v6.5.0

npm -v //3.10.3

node //进入Node.js交互环境，退出按两下Ctrl+C

# 测试

// test.js node test.js

'use strict';

console.log('hello world');

# Visual Studio Code

// 官方网站

https://code.visualstudio.com

// 国内镜像

http://pan.baidu.com/s/1kU5OCOB#path=%252Fpub%252Fnodejs

// 安装(全部勾选)

// 设置

// 右下角把CRLF改成LF(兼容linux系统)

// 调试(左边第4个图案) 没有配置的情况下点右边过来第2个图案

// 然后设置json，下面2个附加直接删了，program的文件名改成要调试的文件名

// 点击开始箭头就能调试了，需要手动按结束(方块图案)中止

# sublime Node插件

// 下载地址

https://github.com/tanepiper/SublimeText-Nodejs

// 解压后改名为Nodejs

// sublime -> Perferences -> Browse Packages 打开插件文件夹

// 将Nodejs剪切进来

// 打开Nodejs.sublime-build文件修改配置

// "encoding": "cp1252" -> "encoding": "utf8"

// "cmd": ["taskkill /F /IM node.exe & node", "$file"] -> "cmd": ["node", "$file"]

// 打开Nodejs.sublime-settings文件修改配置

// node_command": false -> "node_command": "D:\\Program Files\\nodejs\\node.exe"

// "npm_command": false -> "npm_command": "D:\\Program Files\\nodejs\\npm.cmd"

// 然后就能用ctrl+B运行node代码了

# 模块

// node中一个文件就是一个模块，文件名就是它的模块名

// 不同模块的变量可以重名，用闭包来实现的(function(){xx.js})();

// hello.js

'use strict';

var s = 'Hello';

function greet(name) {

console.log(s + ', ' + name + '!');

}

// 把函数greet作为模块的输出暴露出去，这样其他模块就可以使用greet函数了

// 输出的变量可以是任意对象、函数、数组等

module.exports = greet;

// main.js

'use strict';

// 引入hello模块变量greet就是在hello.js中用module.exports = greet;输出的greet函数

// 记得写路径如果直接写'hello' 依次在内置模块、全局模块和当前模块下查找hello.js

var greet = require('./hello');

var s = 'Michael';

greet(s); // Hello, Michael!

// exports输出(因为node中module.exports默认是一个空对象)

module.exports = { //可以赋值，可以.语法

hello: hello,

greet: greet

};

exports.hello = hello; //只能.语法

exports.greet = greet;

# 基本模块

// js中的全局变量是window node中也有个全局变量global

// node交互界面可以看到console的方法

> global.console

// process(代表当前Node.js进程)

// test.js

// process.nextTick()将在下一轮事件循环中调用

process.nextTick(function () {

console.log('nextTick callback!');

});

console.log('nextTick was set!');

// node test.js 根据输出发现，process.nextTick不是立刻执行而是等到下一次事件轮询

// nextTick was set!

// nextTick callback!

// Node.js进程本身的事件就由process对象来处理

// 程序即将退出时的回调函数

process.on('exit', function (code) {

console.log('about to exit with code: ' + code);

});

# 判断js执行环境是浏览器还是Node

if (typeof(window) === 'undefined') {

console.log('node.js');

} else {

console.log('browser');

}

# fs Node.js内置的file system

// 正常读取时，err为null data为读取到的string

// 读取错误时，err是一个错误对象 data为undefined

// 这是node的标准回调函数，第一个参数：错误信息第二个参数：结果

'use strict';

var fs = require('fs');

fs.readFile('./test.php', 'utf-8', function(err, data){

if (err) {

console.log(err);

} else {

console.log(data);

}

});

// 不传入编码，读取的是二进制文件，回调函数将返回一个Buffer对象

'use strict';

var fs = require('fs');

fs.readFile('./1.png', function(err, data){

if (err) {

console.log(err);

} else {

console.log(data);

console.log(data.length + ' bytes');

}

});

// Buffer -> String

var text = data.toString();

// String -> Buffer

var buf = new Buffer('text', 'utf-8');

// 同步读文件

'use strict';

var fs = require('fs');

try {

var data = fs.readFileSync('test.php', 'utf-8');

console.log(data);

} catch(e) {

console.log(e);

}

// 写文件回调函数只关心成功与否，所以只需要第一个参数

// 同样，也有同步写文件方法 writeFileSync

fs.writeFile('test.php', 'if string then utf-8, if Buffer then bin', function (err) {

if (err) {

console.log(err);

} else {

console.log('ok');

}

});

// 获取文件信息同样，也有同步方法 statSync

fs.stat('test.php', function (err, stat) {

if (err) {

console.log(err);

} else {

// 是否是文件:

console.log('isFile: ' + stat.isFile());

// 是否是目录:

console.log('isDirectory: ' + stat.isDirectory());

if (stat.isFile()) {

// 文件大小:

console.log('size: ' + stat.size);

// 创建时间, Date对象:

console.log('birth time: ' + stat.birthtime);

// 修改时间, Date对象:

console.log('modified time: ' + stat.mtime);

}

});

underscore

在 2016年9月7日上张贴由 BestLove

# 文档地址
http://underscorejs.org/#collections

// 提供一系列函数式编程接口，与jQuery的$类型，把自身绑定到唯一的全局变量_上
// 集合类是指Array和Object，暂不支持Map和Set
_.map({a:1,b:2}, (v,k) => k+'='+v);                 // ['a=1', 'b=2']
_.map([1, 2], (x) => x*x);                          // [1, 4]
_.mapObject({a:1,b:2}, (v,k) => k+'='+v);           // {a:'a=1', b:'b=2'}
_.filter([1,2,3,99], function(x) {                  // [1, 2, 4]
    if (x > 10) {
        return false;
    }
    return true;
});

// _.every(集合内所有元素满足条件返回true)
// _.some(集合内任一元素满足条件返回true)
// _.max _.min 空集合会返回Infinity和-Infinity Object只能作用于value，不能作用于key

// _.groupBy分类
// {A:[100, 200], B:[10, 20], C:[1, 2], undefined:[-1]}
var groups = _.groupBy([1,2,10,20,100,200,-1], function(x) {
    if (x >= 100) {
        return 'A';
    } else if (x >= 10) {
        return 'B';
    } else if (x >= 1) {
        return 'C';
    }
});

// _.shuffle用洗牌算法随机打乱一个集合
// _.sample随机选择一个或多个元素

# underscore为Array提供了许多工具类方法
// _.first(arr); _.last(arr);
// _.flatten接收一个array，无论它多少维，整成一维
// [1, 2, 3, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3]
_.flatten([ 1, [2, 3], 2, 3, [4, [5, 6, [7, 8]]], [1, 2, 3] ]);

// _.zip把两个或多个数组按索引对齐合并
// [['Adam', 85], ['Lisa', 92], ['Bart', 59]]
var names = ['Adam', 'Lisa', 'Bart'];
var scores = [85, 92, 59];
var rs = _.zip(names, scores);
// _.unzip则是反过来(但是它返回的不是多个数组，外层有一个大数组包裹)
// [['Adam', 'Lisa', 'Bart'], [85, 92, 59]]
_.unzip(rs);

// _.object(只接收两个参数)
_.object(names, scores);    // {Adam: 85, Lisa: 92, Bart: 59}
// _.range
_.range(10);    // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

// _.bind
// 以下这种写法会报错
var log = console.log;
log('Hello, world!');
// 需要使用call，传入this
log.call(console, 'Hello world!');
// 使用_.bind可以直接绑定
var log = _.bind(console.log, console);
log('Hello, world!');

// _.partial(偏函数)
var pow2N = _.partial(Math.pow, 2);         //pow2N(3);2的三次方=8           pow2N(4);2的四次方=16
var powN3 = _.partial(Math.pow, _, 3);      //powN3(2);2的三次方(_是占位符)  powN3(4);4的三次方=64

// _.memoize(有些开销大的函数可以用它缓存结果)
// 该函数一般配合递归调用使用，可以把每次递归的结果缓存

// _.once(保证某个函数只执行一次)

// _.delay(和setTimeout()效果一样)
_.delay(alert, 2000, 'param');

# underscore为Object提供了许多工具类方法
_.keys(obj);            //返回对象所有的key，但不包括从原型链上继承下来的
_.allKeys(obj);         //返回对象所有的key，包括从原型链上继承下来的
_.values(obj);          //返回对象所有的值，但不包括从原型链上继承下来的
_.invert(obj);          //把对象的key、value互换

// _.extend 如果有相同的key，后面的object的value将覆盖前面的object的value
var a = {name: 'Bob', age: 20};
// 返回并且a的内容也变成 {name: 'Bob', age: 88, city: 'Beijing'}
_.extend(a, {age: 15}, {age: 88, city: 'Beijing'});
// _.extendOwn与_extend类似，但获取属性时忽略从原型链继承下来的属性

_.clone(obj);           //克隆对象，浅复制

# _.isEqual 比较对象和数组
// _.isEqual 对两个object进行深度比较，如果内容完全相同，则返回true
var o1 = { name: 'Bob', skills: { Java: 90, JavaScript: 99 }};
var o2 = { name: 'Bob', skills: { JavaScript: 99, Java: 90 }};
o1 === o2;                  // false
_.isEqual(o1, o2);          // true

# 链式调用
// 因为每一步返回的都是包装对象，所有最后一步需要调用value方法获取值
_.chain([1, 4, 9, 16, 25])
 .map(Math.sqrt)
 .filter(x => x % 2 === 1)
 .value();

100

101

102

103

# 文档地址

http://underscorejs.org/#collections

// 提供一系列函数式编程接口，与jQuery的$类型，把自身绑定到唯一的全局变量_上

// 集合类是指Array和Object，暂不支持Map和Set

_.map({a:1,b:2}, (v,k) => k+'='+v); // ['a=1', 'b=2']

_.map([1, 2], (x) => x*x); // [1, 4]

_.mapObject({a:1,b:2}, (v,k) => k+'='+v); // {a:'a=1', b:'b=2'}

_.filter([1,2,3,99], function(x) { // [1, 2, 4]

if (x > 10) {

return false;

}

return true;

});

// _.every(集合内所有元素满足条件返回true)

// _.some(集合内任一元素满足条件返回true)

// _.max _.min 空集合会返回Infinity和-Infinity Object只能作用于value，不能作用于key

// _.groupBy分类

// {A:[100, 200], B:[10, 20], C:[1, 2], undefined:[-1]}

var groups = _.groupBy([1,2,10,20,100,200,-1], function(x) {

if (x >= 100) {

return 'A';

} else if (x >= 10) {

return 'B';

} else if (x >= 1) {

return 'C';

}

});

// _.shuffle用洗牌算法随机打乱一个集合

// _.sample随机选择一个或多个元素

# underscore为Array提供了许多工具类方法

// _.first(arr); _.last(arr);

// _.flatten接收一个array，无论它多少维，整成一维

// [1, 2, 3, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3]

_.flatten([ 1, [2, 3], 2, 3, [4, [5, 6, [7, 8]]], [1, 2, 3] ]);

// _.zip把两个或多个数组按索引对齐合并

// [['Adam', 85], ['Lisa', 92], ['Bart', 59]]

var names = ['Adam', 'Lisa', 'Bart'];

var scores = [85, 92, 59];

var rs = _.zip(names, scores);

// _.unzip则是反过来(但是它返回的不是多个数组，外层有一个大数组包裹)

// [['Adam', 'Lisa', 'Bart'], [85, 92, 59]]

_.unzip(rs);

// _.object(只接收两个参数)

_.object(names, scores); // {Adam: 85, Lisa: 92, Bart: 59}

// _.range

_.range(10); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

// _.bind

// 以下这种写法会报错

var log = console.log;

log('Hello, world!');

// 需要使用call，传入this

log.call(console, 'Hello world!');

// 使用_.bind可以直接绑定

var log = _.bind(console.log, console);

log('Hello, world!');

// _.partial(偏函数)

var pow2N = _.partial(Math.pow, 2); //pow2N(3);2的三次方=8 pow2N(4);2的四次方=16

var powN3 = _.partial(Math.pow, _, 3); //powN3(2);2的三次方(_是占位符) powN3(4);4的三次方=64

// _.memoize(有些开销大的函数可以用它缓存结果)

// 该函数一般配合递归调用使用，可以把每次递归的结果缓存

// _.once(保证某个函数只执行一次)

// _.delay(和setTimeout()效果一样)

_.delay(alert, 2000, 'param');

# underscore为Object提供了许多工具类方法

_.keys(obj); //返回对象所有的key，但不包括从原型链上继承下来的

_.allKeys(obj); //返回对象所有的key，包括从原型链上继承下来的

_.values(obj); //返回对象所有的值，但不包括从原型链上继承下来的

_.invert(obj); //把对象的key、value互换

// _.extend 如果有相同的key，后面的object的value将覆盖前面的object的value

var a = {name: 'Bob', age: 20};

// 返回并且a的内容也变成 {name: 'Bob', age: 88, city: 'Beijing'}

_.extend(a, {age: 15}, {age: 88, city: 'Beijing'});

// _.extendOwn与_extend类似，但获取属性时忽略从原型链继承下来的属性

_.clone(obj); //克隆对象，浅复制

# _.isEqual 比较对象和数组

// _.isEqual 对两个object进行深度比较，如果内容完全相同，则返回true

var o1 = { name: 'Bob', skills: { Java: 90, JavaScript: 99 }};

var o2 = { name: 'Bob', skills: { JavaScript: 99, Java: 90 }};

o1 === o2; // false

_.isEqual(o1, o2); // true

# 链式调用

// 因为每一步返回的都是包装对象，所有最后一步需要调用value方法获取值

_.chain([1, 4, 9, 16, 25])

.map(Math.sqrt)

.filter(x => x % 2 === 1)

.value();

jQuery

在 2016年9月7日上张贴由 BestLove

// jquery下载地址
http://jquery.com/download/
// 输出jquery版本
alert('jQuery版本：' + $.fn.jquery);
// jquery把所有功能封装在jQuery中，$是jQuery的别名
window.jQuery;      // jQuery(selector, context)
window.$;           // jQuery(selector, context)
$ === jQuery;       // true
typeof($);          // 'function'
// 如果$被占用，使用noConflict排除冲突
jQuery.noConflict();
// 根据id查找
var div = $('#abc');
// 根据标签查找
var ps = $('p');
// 根据class查找
var divs = $('.red');
// 根据属性查找
var texts = $('[type="text"]');
// 属性值以xxx开头
var icons = $('[name^="icon"]');
// 属性值以xxx结尾
var names = $('[name$=with]');
// 组合查找，定位更精确
$('input[name="email"]');
$('tr.red');
// 多项选择器，选择更广泛
$('p,div');
$('p.red,p.green');
// 层级选择器(p1包含在div1中)
$("div.div1 p.p1");
// 子选择器(跟层级选择器类似，但是div1和p1必须是父子关系，不能是爷孙关系)
$("div.div1>p.p1");
// 过滤器(一般不单独使用，附加在选择器上)
$('div1 p:first-child');
$('div1 p:last-child');
$('div1 p:nth-child(2)');           //选出第N个元素，N从1开始
$('div1 p:nth-child(even)');        //选出序号为偶数的元素
$('div1 p:nth-child(odd)');         //选出序号为奇数的元素
$('div:visible');
$('div:hidden');
// 表单相关
$(':input');                //input textarea select button
$(':file');
$(':checkbox');
$(':radio');
$(':focus');                //被选中的input
$(':checked');
$(':enabled');
$(':disabled');
// 查找和过滤
var ul = $('ul.lang');
var dy = ul.find('.dy');
var swf = ul.find('#swift');
var hsk = ul.find('[name=haskell]');
// 查找父节点
var parent = div1.parent("div.red");
// 同级节点查找
div1.next();
div1.next('name="zhangsan"');
div1.prev(".green");
// 过滤
var div = $('div');
div.filter('#div1');
div.filter(function(){
    // this指向DOM对象(不是jQuery) 返回S开头的节点
    return this.innerHTML.indexOf("s") === 0;
});
// map()将jquery对象包含的若干DOM转换成其他对象
div.map(function(){
    //假设有3个div，内容分别为 php javascript swift
    return this.innerHTML;
}).get();   //用get获取包含的string ['php','javascript','swift']
div.first();
div.last();
div.slice(1,2);
// 获取设置text、html
div1.text();
div2.html();
div1.text('php');
div2.html('javascript');
div.text('language');           //可以操作多个
// css
div.css('color');       //获取
div.css('background-color', '#ffd351').css('color', 'red');     //设置(驼峰不驼峰都行)
div.css('color', '');   //清除
// 操作class改变样式，优先级没有css高
div.hasClass('highlight');
div.addClass('highlight');
div.removeClass('highlight');
// 显示/隐藏
div.show();
div.hide();
// 浏览器可视窗口大小,需要加上<!DOCTYPE html>，否则可能解析后跟document无差别
$(window).width();
$(window).height();
// 整个HTML文档大小(一个页面高度不够显示整个上下文时，document.height>window.height）
$(document).width();
$(document).height();
// div的宽度和高度
div1.width();
div1.height();
div1.width(400);        //设置css宽度400px，是否生效要看css是否生效
div1.height('200px');   //设置css高度200px，是否生效要看css是否生效
// 获取、设置、删除属性
div.attr('name');
div.attr('name', 'zhangsan');
div.removeAttr();
// prop跟attr类似，但是有些情况下不同
radio.attr('checked');  //checked
radio.prop('checked');  //true
radio.is(':checked');    //true,当然还可以用is判断(同理 :selected)
// 添加DOM append添加到最后、prepend添加到最前
// 字符串
ul.append('<li><span>Haskell</span></li>');
// DOM对象，如果要添加的DOM节点已经存在于HTML中，会先删除后添加
var li1 = document.createElement('li');
li1.innerHTML = '<span>Haskell</span>';
ul.append(li1);
// jQuery对象
ul.append($("#li2"));
// 匿名函数，返回字符串或DOM对象或jQuery对象 function(index, html)
// 对一组节点进行添加时，可以传入函数差别处理
// before添加到指定节点前、after添加到指定节点后
$("#div1").after("<p>aaa</p>");
// 删除节点
li.remove();        //所有li节点全部删除
// 事件 x.on('eventName', function(e){...});
// 鼠标事件 click dblclick mouseenter mouseleave mousemove(e){e.pageX e.pageY} hover(mouseenter+mouseleave)
// 键盘事件 keydown keyup keypress
// 其他事件 focus blur change submit ready
// $(document).on('ready', function (){}); 通常简写为 $(function(){...});

// 取消事件绑定 x.off('eventName', 'functionName'); 
// 第2个参数只能函数名不能是匿名函数(匿名函数A!==匿名函数A) 或者不写第2个参数取消绑定所有指定事件

// 事件的触发总是由用户操作引发的，比如:通过JS修改了某个text的内容不会触发change监听
// 可以使用代码进行触发 text.change();相当于text.trigger('change'); form.submit();
// 有些敏感函数只能由用户触发，不能使用代码触发 如：window.open();

// 动画
div1.hide(3000);        //3秒内逐渐消失
div1.show('slow');      //慢慢显示 fast快快显示
div1.toggle('fast');    //根据当前状态决定是show还是hide
div1.slideUp(3000);     //show和hide是从左上角逐渐开或缩 slideUp slideDown slideToggle是垂直方向开或缩
div1.fadeIn(1000);      //淡入淡出 fadeIn fadeOut
// animate
div1.animate(
    {
        opacity: 0.25,                  //一些css变化
        width: '256px',
        height: '256px'
    },
    3000,                               //逐渐变化的总时间3秒
    function() {
        console.log('animate over');    //结束后的回调
    }
);
// 串行、暂停(delay)动画
div1.slideDown(2000).delay(1000).animate({...}, 2000).delay(400).animate({...},1000,function(){});
// 缓慢删除，需要回调，因为动画执行需要时间，直接调用remove()就没有动画效果了
div1.hide(2000, function(){$(this).remove()});
// AJAX 3.0以后版本移出了success,error等方法
// .ajax   .post .get .getJSON
$.ajax('url', {
    async:true,                                                         //默认true
    method:'post',                                                      //默认get
    //post请求的格式，也可以指定text/plain、application/json
    contentType:'application/x-www-form-urlencoded; charset=UTF-8',
    data:'发送的数据',                                                  //可以是字符串、数组、对象
    headers:{'Cache-Control':'no-cache'},                               //只能是对象
    //接收的数据类型html、xml、json、text，默认根据Content-Type猜测
    dataType:'json',
    jsonp: 'callback'                                                   //使用jsonp跨域
}).done(function(data) {
    ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));
}).fail(function (xhr, status) {
    ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);
}).always(function() {
    ajaxLog('请求完成: 无论成功或失败都会调用');
});
// 扩展(编写jquery插件)
$.fn.highlight1 = function(options) {
    // this已绑定为当前jQuery对象
    // 要考虑到各种情况 1.options为undefined 2.options只有部分key
    var bgcolor = options && options.backgroundColor || '#fffceb';
    var color = options && options.color || '#d85030';
    this.css('backgroundColor', bgcolor).css('color', color);
    return this;
};
// 上面这种做法用户不能设置默认值，每次都得动态传入(或者用写死的默认值)
//  $.extend把默认值和用户传入的options合并到对象{}中并返回
$.fn.highlight = function (options) {
    // 合并默认值和用户设定值
    var opts = $.extend({}, $.fn.highlight.defaults, options);
    this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
    return this;
}
// 设定默认值
$.fn.highlight.defaults = {
    color: '#d85030',
    backgroundColor: '#fff8de'
}
// 也可以这样设置
$.fn.highlight.defaults.color = 'red';

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

// jquery下载地址

http://jquery.com/download/

// 输出jquery版本

alert('jQuery版本：' + $.fn.jquery);

// jquery把所有功能封装在jQuery中，$是jQuery的别名

window.jQuery; // jQuery(selector, context)

window.$; // jQuery(selector, context)

$ === jQuery; // true

typeof($); // 'function'

// 如果$被占用，使用noConflict排除冲突

jQuery.noConflict();

// 根据id查找

var div = $('#abc');

// 根据标签查找

var ps = $('p');

// 根据class查找

var divs = $('.red');

// 根据属性查找

var texts = $('[type="text"]');

// 属性值以xxx开头

var icons = $('[name^="icon"]');

// 属性值以xxx结尾

var names = $('[name$=with]');

// 组合查找，定位更精确

$('input[name="email"]');

$('tr.red');

// 多项选择器，选择更广泛

$('p,div');

$('p.red,p.green');

// 层级选择器(p1包含在div1中)

$("div.div1 p.p1");

// 子选择器(跟层级选择器类似，但是div1和p1必须是父子关系，不能是爷孙关系)

$("div.div1>p.p1");

// 过滤器(一般不单独使用，附加在选择器上)

$('div1 p:first-child');

$('div1 p:last-child');

$('div1 p:nth-child(2)'); //选出第N个元素，N从1开始

$('div1 p:nth-child(even)'); //选出序号为偶数的元素

$('div1 p:nth-child(odd)'); //选出序号为奇数的元素

$('div:visible');

$('div:hidden');

// 表单相关

$(':input'); //input textarea select button

$(':file');

$(':checkbox');

$(':radio');

$(':focus'); //被选中的input

$(':checked');

$(':enabled');

$(':disabled');

// 查找和过滤

var ul = $('ul.lang');

var dy = ul.find('.dy');

var swf = ul.find('#swift');

var hsk = ul.find('[name=haskell]');

// 查找父节点

var parent = div1.parent("div.red");

// 同级节点查找

div1.next();

div1.next('name="zhangsan"');

div1.prev(".green");

// 过滤

var div = $('div');

div.filter('#div1');

div.filter(function(){

// this指向DOM对象(不是jQuery) 返回S开头的节点

return this.innerHTML.indexOf("s") === 0;

});

// map()将jquery对象包含的若干DOM转换成其他对象

div.map(function(){

//假设有3个div，内容分别为 php javascript swift

return this.innerHTML;

}).get(); //用get获取包含的string ['php','javascript','swift']

div.first();

div.last();

div.slice(1,2);

// 获取设置text、html

div1.text();

div2.html();

div1.text('php');

div2.html('javascript');

div.text('language'); //可以操作多个

// css

div.css('color'); //获取

div.css('background-color', '#ffd351').css('color', 'red'); //设置(驼峰不驼峰都行)

div.css('color', ''); //清除

// 操作class改变样式，优先级没有css高

div.hasClass('highlight');

div.addClass('highlight');

div.removeClass('highlight');

// 显示/隐藏

div.show();

div.hide();

// 浏览器可视窗口大小,需要加上<!DOCTYPE html>，否则可能解析后跟document无差别

$(window).width();

$(window).height();

// 整个HTML文档大小(一个页面高度不够显示整个上下文时，document.height>window.height）

$(document).width();

$(document).height();

// div的宽度和高度

div1.width();

div1.height();

div1.width(400); //设置css宽度400px，是否生效要看css是否生效

div1.height('200px'); //设置css高度200px，是否生效要看css是否生效

// 获取、设置、删除属性

div.attr('name');

div.attr('name', 'zhangsan');

div.removeAttr();

// prop跟attr类似，但是有些情况下不同

radio.attr('checked'); //checked

radio.prop('checked'); //true

radio.is(':checked'); //true,当然还可以用is判断(同理 :selected)

// 添加DOM append添加到最后、prepend添加到最前

// 字符串

ul.append('<li><span>Haskell</span></li>');

// DOM对象，如果要添加的DOM节点已经存在于HTML中，会先删除后添加

var li1 = document.createElement('li');

li1.innerHTML = '<span>Haskell</span>';

ul.append(li1);

// jQuery对象

ul.append($("#li2"));

// 匿名函数，返回字符串或DOM对象或jQuery对象 function(index, html)

// 对一组节点进行添加时，可以传入函数差别处理

// before添加到指定节点前、after添加到指定节点后

$("#div1").after("<p>aaa</p>");

// 删除节点

li.remove(); //所有li节点全部删除

// 事件 x.on('eventName', function(e){...});

// 鼠标事件 click dblclick mouseenter mouseleave mousemove(e){e.pageX e.pageY} hover(mouseenter+mouseleave)

// 键盘事件 keydown keyup keypress

// 其他事件 focus blur change submit ready

// $(document).on('ready', function (){}); 通常简写为 $(function(){...});

// 取消事件绑定 x.off('eventName', 'functionName');

// 第2个参数只能函数名不能是匿名函数(匿名函数A!==匿名函数A) 或者不写第2个参数取消绑定所有指定事件

// 事件的触发总是由用户操作引发的，比如:通过JS修改了某个text的内容不会触发change监听

// 可以使用代码进行触发 text.change();相当于text.trigger('change'); form.submit();

// 有些敏感函数只能由用户触发，不能使用代码触发如：window.open();

// 动画

div1.hide(3000); //3秒内逐渐消失

div1.show('slow'); //慢慢显示 fast快快显示

div1.toggle('fast'); //根据当前状态决定是show还是hide

div1.slideUp(3000); //show和hide是从左上角逐渐开或缩 slideUp slideDown slideToggle是垂直方向开或缩

div1.fadeIn(1000); //淡入淡出 fadeIn fadeOut

// animate

div1.animate(

{

opacity: 0.25, //一些css变化

width: '256px',

height: '256px'

3000, //逐渐变化的总时间3秒

function() {

console.log('animate over'); //结束后的回调

}

);

// 串行、暂停(delay)动画

div1.slideDown(2000).delay(1000).animate({...}, 2000).delay(400).animate({...},1000,function(){});

// 缓慢删除，需要回调，因为动画执行需要时间，直接调用remove()就没有动画效果了

div1.hide(2000, function(){$(this).remove()});

// AJAX 3.0以后版本移出了success,error等方法

// .ajax .post .get .getJSON

$.ajax('url', {

async:true, //默认true

method:'post', //默认get

//post请求的格式，也可以指定text/plain、application/json

contentType:'application/x-www-form-urlencoded; charset=UTF-8',

data:'发送的数据', //可以是字符串、数组、对象

headers:{'Cache-Control':'no-cache'}, //只能是对象

//接收的数据类型html、xml、json、text，默认根据Content-Type猜测

dataType:'json',

jsonp: 'callback' //使用jsonp跨域

}).done(function(data) {

ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));

}).fail(function (xhr, status) {

ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);

}).always(function() {

ajaxLog('请求完成: 无论成功或失败都会调用');

});

// 扩展(编写jquery插件)

$.fn.highlight1 = function(options) {

// this已绑定为当前jQuery对象

// 要考虑到各种情况 1.options为undefined 2.options只有部分key

var bgcolor = options && options.backgroundColor || '#fffceb';

var color = options && options.color || '#d85030';

this.css('backgroundColor', bgcolor).css('color', color);

return this;

};

// 上面这种做法用户不能设置默认值，每次都得动态传入(或者用写死的默认值)

// $.extend把默认值和用户传入的options合并到对象{}中并返回

$.fn.highlight = function (options) {

// 合并默认值和用户设定值

var opts = $.extend({}, $.fn.highlight.defaults, options);

this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);

return this;

}

// 设定默认值

$.fn.highlight.defaults = {

color: '#d85030',

backgroundColor: '#fff8de'

}

// 也可以这样设置

$.fn.highlight.defaults.color = 'red';

Promise

在 2016年9月6日上张贴由 BestLove

// "承诺将来会执行"的对象在JavaScript中称为Promise对象
// new Promise(function (resolve, reject) {});
// then回调resolve catch回调reject
// Math.random() * 2 < 1 会走then的回调，反之走catch的回调
<div id="test-promise-log">
    <p>Log:</p>
</div>
'use strict';
var logging = document.getElementById('test-promise-log');
function log(s) {
    var p = document.createElement('p');
    p.innerHTML = s;
    logging.appendChild(p);
}
var p = new Promise(function (resolve, reject) {
    var ran = Math.random() * 2;
    log('the random num is ' + ran);
    setTimeout(function(){
        if (ran < 1) {
            resolve('quick');
        } else {
            reject('slow');
        }
    }, ran * 1000);
});
p.then(function(data) {
    log('good:' + data);
}).catch(function(data) {
    log('bad:' + data);
});

// 若干异步任务，任务1完成->任务2完成->任务3... 任何一个点失败->异常处理
// job1.then(job2).then(job3).catch(handleError);
// job1、job2、job3...都是promise对象
// 5 * 5 -> 25 + 25 -> 50 * 50 -> 2500 + 2500 = 5000
function multiply(input) {
    return new Promise(function(resolve, reject) {
        log('calculating ' + input + ' x ' + input + '...');
        setTimeout(resolve, 500, input * input);
    }); 
}
function add(input) {
    return new Promise(function(resolve, reject){
        log('calculating ' + input + ' + ' + input + '...');
        setTimeout(resolve, 500, input + input);
    });
}
var p = new Promise(function(resolve, reject){
    log('start to calculat');
    resolve(5);
});
p.then(multiply)
 .then(add)
 .then(multiply)
 .then(add)
 .then(function(result) {
    log('result=' + result);
 });

// 除了串行执行若干异步任务外，Promise还可以并行执行异步任务
var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
// 同时执行p1和p2，并在它们都完成后执行then
Promise.all([p1, p2]).then(function (results) {
    console.log(results); // 获得一个Array: ['P1', 'P2']
});
// 有些时候，多个异步任务是为了容错，可以使用race获取先返回的结果
Promise.race([p1, p2]).then(function (result) {
    console.log(result);  // 'P1'
});

// "承诺将来会执行"的对象在JavaScript中称为Promise对象

// new Promise(function (resolve, reject) {});

// then回调resolve catch回调reject

// Math.random() * 2 < 1 会走then的回调，反之走catch的回调

</div>

'use strict';

var logging = document.getElementById('test-promise-log');

function log(s) {

var p = document.createElement('p');

p.innerHTML = s;

logging.appendChild(p);

}

var p = new Promise(function (resolve, reject) {

var ran = Math.random() * 2;

log('the random num is ' + ran);

setTimeout(function(){

if (ran < 1) {

resolve('quick');

} else {

reject('slow');

}

}, ran * 1000);

});

p.then(function(data) {

log('good:' + data);

}).catch(function(data) {

log('bad:' + data);

});

// 若干异步任务，任务1完成->任务2完成->任务3... 任何一个点失败->异常处理

// job1.then(job2).then(job3).catch(handleError);

// job1、job2、job3...都是promise对象

// 5 * 5 -> 25 + 25 -> 50 * 50 -> 2500 + 2500 = 5000

function multiply(input) {

return new Promise(function(resolve, reject) {

log('calculating ' + input + ' x ' + input + '...');

setTimeout(resolve, 500, input * input);

});

}

function add(input) {

return new Promise(function(resolve, reject){

log('calculating ' + input + ' + ' + input + '...');

setTimeout(resolve, 500, input + input);

});

}

var p = new Promise(function(resolve, reject){

log('start to calculat');

resolve(5);

});

p.then(multiply)

.then(add)

.then(multiply)

.then(add)

.then(function(result) {

log('result=' + result);

});

// 除了串行执行若干异步任务外，Promise还可以并行执行异步任务

var p1 = new Promise(function (resolve, reject) {

setTimeout(resolve, 500, 'P1');

});

var p2 = new Promise(function (resolve, reject) {

setTimeout(resolve, 600, 'P2');

});

// 同时执行p1和p2，并在它们都完成后执行then

Promise.all([p1, p2]).then(function (results) {

console.log(results); // 获得一个Array: ['P1', 'P2']

});

// 有些时候，多个异步任务是为了容错，可以使用race获取先返回的结果

Promise.race([p1, p2]).then(function (result) {

console.log(result); // 'P1'

});

浏览器操作、AJAX、跨域

在 2016年9月4日上张贴由 BestLove

# window对象不但充当全局作用域，而且表示浏览器窗口
// 获取浏览器窗口的内部宽度和高度(IE<=8不支持)
// 内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高
// 对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高
window.innerWidth;
window.innerHeigth;

# navigator
// navigator对象表示浏览器的信息，最常用的属性包括
navigator.appName                  //浏览器名称
navigator.appVersion               //浏览器版本
navigator.language                 //浏览器设置的语言
navigator.platform                 //操作系统类型
navigator.userAgent                //浏览器设定的User-Agent字符串
// navigator的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的
// 所以不要使用下面这种判断方式
var width;
if (getIEVersion(navigator.userAgent) < 9) {
    width = document.body.clientWidth;
} else {
    width = window.innerWidth;
}
// 充分利用 || 和 undefined 来做浏览器兼容
var width = window.innerWidth || document.body.clientWidth;

# screen对象表示屏幕的信息，常用的属性有
screen.width                //屏幕宽度，以像素为单位
screen.height               //屏幕高度，以像素为单位
screen.colorDepth           //返回颜色位数，如8、16、24

# location
http://www.example.com:8080/path/index.html?a=1&b=2#TOP
location.protocol;              // 'http'
location.host;                  // 'www.example.com'
location.port;                  // '8080'
location.pathname;              // '/path/index.html'
location.search;                // '?a=1&b=2'
location.hash;                  // 'TOP'
location.assign('/discuss');    // 加载一个新页面
location.reload();              // 重新加载

# document对象表示当前页面
// 由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点
document.title = '努力学习JavaScript!';
var div1 = document.getElementById('div1');     //定位唯一的一个DOM节点
div1.tagName;                                   //div
div1.children;                                  //所有直属子节点 .length获取节点数组长度
div1.parentElement;                             //父节点
div1.firstElementChild;                         //第一个子节点
div1.lastElementChild;                          //最后一个子节点
div1.innerHTML;
div1.innerText;
p.style.fontSize = '20px';                      //设置css样式，驼峰
document.getElementsByTagName('div');           //返回一组DOM节点
document.getElementsByClassName('class1');      //返回一组DOM节点
// 如果服务器设置cookie时使用httpOnly，那么cookie将不能被js读取
// 为了安全起见，建议服务器设置httpOnly
document.cookie;

# appendChild
/*  
    只是移动，并不是添加
    操作前：
    <div id="div2">bbbb</div>
    <div id="div1">aaaa</div>
    操作后：
    <div id="div1">aaaa
        <div id="div2">bbbb</div>
    </div>
*/
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
div1.appendChild(div2);
// 添加
var div3 = document.createElement('div');
div3.id = 'div3';
div3.innerText = 'cccc';
div1.appendChild(div3);
// 添加样式
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
s.innerHTML = 'div { color: red }';
document.getElementsByTagName('head')[0].appendChild(s);
// 把newElement插入指定的referenceElement之前
parentElement.insertBefore(newElement, referenceElement);
// 在DOM树中删除子节点div2，其实还是保存在内存中，可以随时恢复removed
var removed = div1.removeChild(div2);

# 文件
// enctype="multipart/form-data" method="post"
// 或使用 HTML5 File API File和FileReader两个主要对象
<input type="file">

# AJAX(Asynchronous JavaScript and XML)
// 同源策略 域名要相同 协议要相同(http和https不同) 端口号要相同
var request;
if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
} else {    //兼容低版本IE
    request = new ActiveXObject('Microsoft.XMLHTTP');
}

# 跨域
// JSONP 
// 服务端代理转发(如:/proxy?url=http://www.sina.com.cn)
/*
   CORS 需要浏览器支持HTML5并且服务端同意 Access-Control-Allow-Origin:你的域名或*
   包括GET、HEAD和POST
   POST的Content-Type类型仅限application/x-www-form-urlencoded、multipart/form-data和text/plain
   并且不能出现任何自定义头（例如，X-Custom: 12345）
   对于PUT、DELETE以及其他类型如application/json的POST请求
   在发送AJAX请求之前，浏览器会先发送一个OPTIONS请求（称为preflighted请求）
   OPTIONS /path/to/resource HTTP/1.1
   Host: bar.com
   Origin: http://my.com
   Access-Control-Request-Method: POST
   服务器必须响应并明确指出允许的Method，符合要求才会发送，否则会抛出一个错误
   HTTP/1.1 200 OK
   Access-Control-Allow-Origin: http://my.com
   Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
   Access-Control-Max-Age: 86400
*/

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

# window对象不但充当全局作用域，而且表示浏览器窗口

// 获取浏览器窗口的内部宽度和高度(IE<=8不支持)

// 内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高

// 对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高

window.innerWidth;

window.innerHeigth;

# navigator

// navigator对象表示浏览器的信息，最常用的属性包括

navigator.appName //浏览器名称

navigator.appVersion //浏览器版本

navigator.language //浏览器设置的语言

navigator.platform //操作系统类型

navigator.userAgent //浏览器设定的User-Agent字符串

// navigator的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的

// 所以不要使用下面这种判断方式

var width;

if (getIEVersion(navigator.userAgent) < 9) {

width = document.body.clientWidth;

} else {

width = window.innerWidth;

}

// 充分利用 || 和 undefined 来做浏览器兼容

var width = window.innerWidth || document.body.clientWidth;

# screen对象表示屏幕的信息，常用的属性有

screen.width //屏幕宽度，以像素为单位

screen.height //屏幕高度，以像素为单位

screen.colorDepth //返回颜色位数，如8、16、24

# location

http://www.example.com:8080/path/index.html?a=1&b=2#TOP

location.protocol; // 'http'

location.host; // 'www.example.com'

location.port; // '8080'

location.pathname; // '/path/index.html'

location.search; // '?a=1&b=2'

location.hash; // 'TOP'

location.assign('/discuss'); // 加载一个新页面

location.reload(); // 重新加载

# document对象表示当前页面

// 由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点

document.title = '努力学习JavaScript!';

var div1 = document.getElementById('div1'); //定位唯一的一个DOM节点

div1.tagName; //div

div1.children; //所有直属子节点 .length获取节点数组长度

div1.parentElement; //父节点

div1.firstElementChild; //第一个子节点

div1.lastElementChild; //最后一个子节点

div1.innerHTML;

div1.innerText;

p.style.fontSize = '20px'; //设置css样式，驼峰

document.getElementsByTagName('div'); //返回一组DOM节点

document.getElementsByClassName('class1'); //返回一组DOM节点

// 如果服务器设置cookie时使用httpOnly，那么cookie将不能被js读取

// 为了安全起见，建议服务器设置httpOnly

document.cookie;

# appendChild

只是移动，并不是添加

操作前：

操作后：

<div id="div1">aaaa

</div>

var div1 = document.getElementById('div1');

var div2 = document.getElementById('div2');

div1.appendChild(div2);

// 添加

var div3 = document.createElement('div');

div3.id = 'div3';

div3.innerText = 'cccc';

div1.appendChild(div3);

// 添加样式

var s = document.createElement('style');

s.setAttribute('type', 'text/css');

s.innerHTML = 'div { color: red }';

document.getElementsByTagName('head')[0].appendChild(s);

// 把newElement插入指定的referenceElement之前

parentElement.insertBefore(newElement, referenceElement);

// 在DOM树中删除子节点div2，其实还是保存在内存中，可以随时恢复removed

var removed = div1.removeChild(div2);

# 文件

// enctype="multipart/form-data" method="post"

// 或使用 HTML5 File API File和FileReader两个主要对象

# AJAX(Asynchronous JavaScript and XML)

// 同源策略域名要相同协议要相同(http和https不同) 端口号要相同

var request;

if (window.XMLHttpRequest) {

request = new XMLHttpRequest();

} else { //兼容低版本IE

request = new ActiveXObject('Microsoft.XMLHTTP');

}

# 跨域

// JSONP

// 服务端代理转发(如:/proxy?url=http://www.sina.com.cn)

CORS 需要浏览器支持HTML5并且服务端同意 Access-Control-Allow-Origin:你的域名或*

包括GET、HEAD和POST

POST的Content-Type类型仅限application/x-www-form-urlencoded、multipart/form-data和text/plain

并且不能出现任何自定义头（例如，X-Custom: 12345）

对于PUT、DELETE以及其他类型如application/json的POST请求

在发送AJAX请求之前，浏览器会先发送一个OPTIONS请求（称为preflighted请求）

OPTIONS /path/to/resource HTTP/1.1

Host: bar.com

Origin: http://my.com

Access-Control-Request-Method: POST

服务器必须响应并明确指出允许的Method，符合要求才会发送，否则会抛出一个错误

HTTP/1.1 200 OK

Access-Control-Allow-Origin: http://my.com

Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS

Access-Control-Max-Age: 86400

唐晓锋–BLOG

This is just a personal note.

月份：2016年9月

Node笔记(二)

Node笔记(一)

underscore

jQuery

Promise

浏览器操作、AJAX、跨域