工作中的遇到的一些小知识

持续更新…

免密ssh步骤

一句命令代替繁琐的ssh远程登录开发机。

Step 1:免密

  1. ssh-keygen生成公钥。ssh-keygen
  2. 拷贝公钥。ssh-copy-id -i ~/.ssh/id_rsa.pub <your-remote-host>
  3. 免密登录。ssh <your-remote-host>

Step 2:简化命令

使用alias,比如:alias timetowork="ssh <your-remote-host>"

Step 3:get back to work

输入timetowork

参考:

fis-receiver

简写为fisrcv。使用fis进行项目构建时,若需要release到远端开发机,可以通过配置fis-conf.js里的deploy项目实现,fis会通过HTTP的方式上传压缩过的代码到远端指定位置,这需要远端有receiver接收上传的文件。

fis-receiver是在远端接收上传文件的服务端脚本,node、python、PHP等都可以。fisrcv实际上是使用node服务在远端接收deploy文件的服务端脚本而已。

参考:

webpack-release

等同于webpack版的fis release,不过原先写在fis-conf.js中的部署设置,现在写在webpack.config.js中。receiveUrlremotePath即远端开发机位置。实现上也采用HTTP POST的方式。

参考:

tmux

tmux是终端复用工具,允许在单个终端下相互隔离地运行多个后台程序。甚至在关闭终端时可以让程序在后台运行。使用tmux attachtmux detach进入和离开各个session。attach后还可以接-t指定连接的session。

参考:

HtmlWebpackPlugin

把html和js或css文件对应组织起来,可以指定filenametemplatechunks等。

参考:

encodeURI和encodeURIComponent

前者用于对整段URI转码,后者用于对URI中被分割符隔开的部分进行边编码。因此,

  • encodeURI会忽略允许出现在URI的符号,包括特殊符号。对空格、中文等进行转码
  • encodeURIComponent也会转码特殊符号,如/,$,@,.等

origami

origami是sublime中的一个拆分窗口的插件,用快捷键可以像在vim中一样方便地创建和转移到各个窗口编码。通过command + K开启快捷键。

  • +up/down/left/right 转移到其他窗口
  • +command+up/down/left/right 在该方向上打开新的工作窗口
  • +shift+command+up/down/left/right 销毁该方向上的新窗口

nrm与n

npm registry管理工具nrm,能够查看和切换当前使用的registry,在切换和查看registry时非常有用。常用命令:

  • nrm ls
  • nrm use
  • nrm help
  • nrm home
  • nrm add/delete 增加和删除registry
  • nrm test 测速

n是类似nvm的node.js版本管理工具。

Promise then的链式调用

then()方法返回一个Promise 。它最多需要有两个参数:Promise的成功和失败情况的回调函数。

then方法会返回一个Promise,它的行为与then中指定的回调函数返回值有关:

  • 如果then中的回调函数返回一个值,那么then返回的Promise将会成为接受状态(即使原Promise始Rejected状态),并且将返回的值作为接受状态的回调函数的参数值。
  • 如果then中的回调函数抛出一个错误,那么then返回的Promise将会成为拒绝状态,并且将抛出的错误作为拒绝状态的回调函数的参数值。
  • 如果then中的回调函数返回一个已经是接受状态的Promise,那么then返回的Promise也会成为接受状态,并且将那个Promise的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值。
  • 如果then中的回调函数返回一个已经是拒绝状态的Promise,那么then返回的Promise也会成为拒绝状态,并且将那个Promise的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。
  • 如果then中的回调函数返回一个未定状态(pending)的Promise,那么then返回Promise的状态也是未定的,并且它的终态与那个Promise的终态相同;同时,它变为终态时调用的回调函数参数与那个Promise变为终态时的回调函数的参数是相同的。

下面是几个官网上的例子:

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
Promise.resolve("foo")
// 1. 接收 "foo" 并与 "bar" 拼接,并将其结果做为下一个resolve返回。
.then(function(string) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
string += 'bar';
resolve(string);
}, 1);
});
})
// 2. 接收 "foobar", 放入一个异步函数中处理该字符串
// 并将其打印到控制台中, 但是不将处理后的字符串返回到下一个。
.then(function(string) {
setTimeout(function() {
string += 'baz';
console.log(string);
}, 1)
return string;
})
// 3. 打印本节中代码将如何运行的帮助消息,
// 字符串实际上是由上一个回调函数之前的那块异步代码处理的。
.then(function(string) {
console.log("Last Then: oops... didn't bother to instantiate and return " +
"a promise in the prior then so the sequence may be a bit " +
"surprising");
// 注意 `string` 这时不会存在 'baz'。
// 因为这是发生在我们通过setTimeout模拟的异步函数中。
console.log(string);
});

1
2
3
4
5
6
7
8
9
10
11
Promise.resolve()
.then( () => {
// 使 .then() 返回一个 rejected promise
throw 'Oh no!';
})
.catch( reason => {
console.error( 'onRejected function called: ', reason );
})
.then( () => {
console.log( "I am always called even if the prior then's promise rejects" );
});

SOLID原则

程序设计领域,尤其是面向对象编程的优秀实践里,有着一些实现原则,如SOLID(单一功能、开闭原则、里氏替换、接口隔离、依赖翻转)。这些设计模式原则可以有助于编写可维护、可拓展、清晰可读的代码。

  • S,Single Responsibility Principle,每个类都应有单一的功能,且被类封装起来。
  • O,Open-Closed Principle,对象(类、接口、函数等)对于拓展是开放的,对于修改是封闭的。即易拓展、保证可靠。
  • L,Liskov Substitution Principle,子类可以在不改变正确性的情况下替换父类
  • I,Interface-segregation Principle,多个特定功能的接口好于单个宽泛功能的接口
  • D,Dependency Inversion Principle,方法应该依赖于一个抽象(接口)而不是一个实例(类)

axios-mock-adpter

使用axios获取数据时,通过axios-mock-adaptermock数据。MockAdapter可以绑定在axios上,拦截通过绑定的axios发送的请求。使用方式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var axios = require('axios');
var MockAdapter = require('axios-mock-adapter');
// This sets the mock adapter on the default instance
var mock = new MockAdapter(axios);
// Mock any GET request to /users
// arguments for reply are (status, data, headers)
mock.onGet('/users').reply(200, {
users: [
{ id: 1, name: 'John Smith' }
]
});
axios.get('/users')
.then(function(response) {
console.log(response.data);
});

另外,可以用mock.restore()撤销所有mocking行为,或通过mock.reset()除去所有mocking的handler。通过mock.on<方法名>还可以链式调用其他方法:

  • onAny() 绑定任何方法
  • networkError() 返回网络错误
  • timeout() 返回请求超时
  • passThrough() 跳过mocking直接请求

在reply中可以使用函数进行更复杂的操作:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var normalAxios = axios.create();
var mockAxios = axios.create();
var mock = MockAdapter(mockAxios);
mock
.onGet('/orders')
.reply(() => Promise.all([
normalAxios
.get('/api/v1/orders')
.then(resp => resp.data),
normalAxios
.get('/api/v2/orders')
.then(resp => resp.data),
{ id: '-1', content: 'extra row 1' },
{ id: '-2', content: 'extra row 2' }
]).then(
sources => [200, sources.reduce((agg, source) => agg.concat(source))]
)
);

移动端Charles调试经验

  1. 设置http代理为8888端口
  2. 设置SSL代理,填写对应的域名,设置端口为443,安装根证书
  3. 手机打开无线设置,设置代理IP和端口8888
  4. 打开chls.pro/ssl,安装根证书并信任
  5. 使用Map remote访问开发机位置
  6. 使用Map local可以劫持WebView中请求的JS等资源到本地,通过alert的方式打印调试信息,进行临时的线上Webview环境debug