流行npm包简介
By Alex
/ in JavaScript
bluebird
Bluebird是一个全功能的Promise库，它比起ES6的Promise，具有更高的性能、更全的特性。
whatwg-fetch
window.fetch 的垫片库。执行下面的命令添加为当前工程的依赖：
|
1 |
npm install whatwg-fetch --save |
注意fetch API与jQuery.ajax()的不同：
- fetch的Promise不会在遇到错误的响应状态码（例如404、500）时Reject
- 默认情况下不会收发任何Cookie
代码示例
|
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 |
import 'whatwg-fetch'; fetch('/users.html') .then(function (response) { return response.text() // 解析为文本 }) .then(function (body) { document.body.innerHTML = body }) fetch('/users.json') .then(function (response) { return response.json() // 作为JSON解析为对象 }) .then(function (json) { console.log('parsed json', json) }) .catch(function (ex) { console.log('parsing failed', ex) }) fetch('/users.json').then(function (response) { // 访问元数据 console.log(response.headers.get('Content-Type')) console.log(response.headers.get('Date')) console.log(response.status) console.log(response.statusText) }) // 提交表单 var form = document.querySelector('form') fetch('/users', { method: 'POST', body: new FormData(form) }) // 提交JSON fetch('/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'Hubot', login: 'hubot', }) }) // 上传文件 var input = document.querySelector('input[type="file"]') var data = new FormData() data.append('file', input.files[0]) data.append('user', 'hubot') fetch('/avatars', { method: 'POST', body: data }) |
发送Cookie
要为当前Domain自动发送Cookie，需要启用选项：
|
1 2 3 |
fetch('/users', { credentials: 'same-origin' }) |
对于CORS请求，要允许发送其它Domain的Cookie，需要启用选项：
|
1 2 3 |
fetch('https://example.com:1234/users', { credentials: 'include' }) |
lodash
lodash是JavaScript领域的Commons库。执行下面的命令添加为当前工程的依赖：
|
1 |
npm i --save lodash |
代码示例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import _ from 'lodash'; import createDebug from 'debug'; let debug = createDebug('lodash-study'); let a = [1, 2, 3, undefined, null]; // 返回去除了false值（null,0,'',undefined）的副本 _.compact(a); // [ 1, 2, 3 ] // 连接数组、值到一个数组中，返回新创建的数组 _.concat(a, 4, 5); // [ 1, 2, 3, undefined, null, 4, 5 ] _.concat(a, [4, 5]); // [ 1, 2, 3, undefined, null, 4, 5 ] // 返回两个数组都不包含的元素组成的新数组 _.difference(a, [2, 3]); // [ 1, undefined, null ] // 返回丢弃头部的N个元素的副本 _.drop(a, 4); // [ null ] // 返回丢弃尾部的N个元素的副本 _.drop(a, 4); // [ 1 ] |
除了针对数组的工具函数，lodash还提供了集合、日期、函数、数学、数字、对象、序列、字符串等相关的函数。
debug
这是一个很小的调试日志库，它几乎不对产品环境下应用的性能产生不利影响。执行下面的命令添加为当前工程的依赖：
|
1 |
npm install debug --save |
用法
该模块暴露一个函数，你仅需要把自己模块的名字传入，即可获得一个被装饰过的console.error函数。传入模块名字的目的是，可以有选择性的开启、关闭部分调试日志。示例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 传入当前模块名 var debug = require( 'debug' )( 'node-study' ); var http = require( 'http' ); debug( 'booting %s.', 'node-study app' ); http.createServer( function ( req, res ) { debug( '%s %s', req.method, req.url ); res.writeHead( 404 ); res.end(); } ).listen( 3000, function () { debug( 'listening' ) } ); // 使用特性 var debug = require( 'debug' )( 'node-study:feature1' ); |
格式化器
debug支持printf风格的字符串格式化。官方支持的格式化器包括：
| 格式化器 | 说明 |
| %O | 在多行中输出一个对象，并格式化 |
| %o | 在单行输出一个对象 |
| %s | 格式化字符串 |
| %d | 格式化数字 |
| %j | 格式化为JSON |
| %% | 输出 % 本身 |
自定义格式化器
|
1 2 3 4 5 6 7 |
const createDebug = require( 'debug' ) // 注册 %h格式化器 createDebug.formatters.h = ( v ) => { return v.toString( 'hex' ) } // 使用新的格式化器 debug( 'this is hex: %h', new Buffer( 'hello world' ) ) |
环境变量
debug模块的运行时行为依赖于几个环境变量：
| 环境变量 | 说明 | ||
| DEBUG |
打印哪些模块的调试日志，值为逗号分隔的模块名，包含在值中的模块的日志被打印。当你开发一个包含多个特性的库供其它人使用时，务必传入库的名字作为debug前缀，然后用 : 分隔一个特性名 示例：
|
||
| DEBUG_COLORS | 是否在调试输出中使用高亮 | ||
| DEBUG_DEPTH | 处理对象时，输出的深度 | ||
| DEBUG_SHOW_HIDDEN | 显示对象的隐藏属性 |
浏览器支持
在浏览器环境下使用debug时，调试配置是存放在localStorage中的：
|
1 2 |
// 启用worker模块的所有特性的调试日志 localStorage.debug = 'worker:*' |
Leave a Reply