发表于

npm scripts 使用指南–阮一峰

scripts 是package.json中的属性
原理：自动创建shell脚本运行，运行环境path是node_module目录
通配符：[所有文件],**[所有文件夹]，需要转义.eg `’test’:’mocha test/\.js’`.
传参：使用– eg "lint:checkstyle": "npm run lint -- --reporter checkstyle > checkstyle.xml"
执行多个任务：并发[npm run script1.js & npm run script2.js],顺序执行[npm run script1.js && npm run script2.js]
默认值
1
2
"start": "node server.js"，
"install": "node-gyp rebuild"
内部变量 npm_package_${package.json中的属性},egnpm_package_name
1
2
3
4
5
6
7
"repository": {
   "type": "git",
   "url": "xxx"
 },
 scripts: {
   "view": "echo $npm_package_repository_type"
 }

常用的

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
// 删除目录
"clean": "rimraf dist/*",
// 本地搭建一个 HTTP 服务
"serve": "http-server -p 9090 dist/",
// 打开浏览器
"open:dev": "opener http://localhost:9090",
// 实时刷新
 "livereload": "live-reload --port 9091 dist/",
// 构建 HTML 文件
"build:html": "jade index.jade > dist/index.html",
// 只要 CSS 文件有变动，就重新执行构建
"watch:css": "watch 'npm run build:css' assets/styles/",
// 只要 HTML 文件有变动，就重新执行构建
"watch:html": "watch 'npm run build:html' assets/html",
// 部署到 Amazon S3
"deploy:prod": "s3-cli sync ./dist/ s3://example-com/prod-site/",
// 构建 favicon
"build:favicon": "node scripts/favicon.js",

发表于

IndexedDB 库 渐进式 Web App

PWA 相关资料

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
let dbVersion = 1;
let dbName = 'test';
let idb = window.indexedDB.open(dbName, dbVersion);
idb.onerror = (evt) => {
    console.log('failed created indexDB');
}
idb.onupgradeneeded = function(evt) {
    let db = evt.target.result;
    let keypath = 'test-unique';
    let store = db.createObjectStore('customers', {
        keypath
    })
    store.createIndex("name", "name", {
        unique: false
    });
    store.createIndex("email", "email", {
        unique: true
    });
    let transaction = db.transaction(["customers"], "readwrite");
}
//删除idb
let delRequest = window.indexedDB.deleteDatabase(dbName);
delRequest.onerror = function(evt) {
    console.log('Error delelting database')
}
delRequest.onsuccess = function(evt) {
    console.log(`Delelted database successfully ${delRequest.result}`);
    console.log(delRequest.result);
}
console.log(delRequest.readyState) //pending

支持插件

idb-keyval :提供 Promise， key-value 支持
dexie: 提供Promises，复杂查询、辅助索引

参考资料

MDN IDBIndex
使用 IndexedDB

发表于

开发法则

测试

  • 应该为那些可能存在不确定性的需求或者对外提供的服务来编写全面的测试案例,对非常确定的细节不做测试
    -

发表于

原文

做了好多的表单在使用的过程中总会感觉有点小缺憾，这篇文章点出了平常一下我们需要注意的细节。
用户体验感觉更棒了

建议性规则

  • 表单应该只有一列
  • 标签顶部对齐（常见的是左边对齐）
  • 给标签和输入框分组（中间label和input之间不设置margin或者padding属性，两者作为一体化）
  • 避免字母全部大写、首写字母大写，更好阅读
  • 如果可选项少于6个，则显示全部（使用标签这种展现形式）5-25:下拉框内采用上下文搜索 >25:【输入选择器】autoComplete
  • 避免把占位符当做标签
  • 为方便浏览，将复选框（和单选框）上下放置（纵向排列）
  • 让按钮功能更具体（注册提交表单按钮更好叫注册而非提交）
  • 表单校验错误明确指出哪个出错
  • 在用户填写完字段后再验证（除非在输入过程对用户有帮助）
  • 尽可能显示基本的帮助文字
  • 区分主要和次要的操作（注册和关闭按钮应该需要区分）
  • 用字段长度作为说明（手机注册码，字段长度6，输入框的长度应为6位左右）
  • 不要用星号 *，标出选填字段（如果大部分是必填，则标出选填字段，工程建议统一）
  • 将相关信息分组
  • 要有趣，省略选填字段（可以使用省略等字段）

发表于

1.Request和Response

  • GET:用于获取资源（一项或多项）
  • PUT：更新资源（客户端提供完整资源数据）
  • POST：创建资源
  • PATCH：更新资源 （客户端提供需要修改的资源数据）
  • DELETE：删除资源

Response

  • GET/PUT/PATCH 请求成功 code =200
  • POST 创建成功，返回创建数据 code=201
  • DELETE 删除成功，不返回数据 code=204
  • code=400:校验数据有问题
  • code = 401:认证信息头有问题
  • code = 403：用户无权限

返回json数据：header中需要添加 Content-Type=application/json

2.Serialization 和 Deserialization

3.validation

  1. Authentication 和 Permission

Authentication指用户认证，Permission指权限机制，这两点是使RESTful API 强大、灵活和安全的基本保障。

发表于

HTTP1.x 实践中遇到的问题

  • 对头阻塞，只能一个优先处理的Http请求

  • 浏览器的并发请求，多个 TCP 连接，TCP 的流控机制导致发送窗口乘性递减，导致拥塞用，从而影响了资源的加载

  • 大量请求，重复数据

    阅读全文 »