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

发表于 更新于 分类于 Disqus： 本文字数： 5.5k 阅读时长 ≈ 9 分钟

持续更新…

免密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中。receiveUrl和remotePath即远端开发机位置。实现上也采用HTTP POST的方式。

参考：

tmux

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

参考：

HtmlWebpackPlugin

把html和js或css文件对应组织起来，可以指定filename，template，chunks等。

参考：

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