糖醋排骨

interjc weblog

0%

发表于 更新于 分类于 Disqus：

基于 Promise 的 ajax 请求，可以实现链式调用，使代码结构更清晰，代码如下：

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
'use strict';
// 函数封装
var handleAjax = function handleAjax() {
  var options = arguments.length <= 0 || arguments\[0\] === undefined ? {} : arguments\[0\],
  opt = {
    url: options.url || '',
    data: options.data || 't=' + new Date().getTime(),
    type: options.type || 'get',
    dataType: options.dataType || 'json',
    cache: options.cache || false,
    async: options.async || true,
    context: options.context || document.body,
    beforeSend: options.beforeSend || undefined
  };
  return new Promise(function (resolve, reject) {
    var req = new XMLHttpRequest();
    if (typeof opt.beforeSend === 'function') {
      opt.beforeSend();
    }
    req.open(opt.type, opt.url, opt.async);
    req.onload = function () {
      if (req.status === 200) {
        var data = req.responseText;
        if (opt.dataType === 'json') {
          data = JSON.parse(data);
        }
        resolve(data);
      } else {
        reject(new Error(req.statusText || 'You can\\'t do this.'));
      }
    };
    req.onerror = function () {
      reject(new Error(req.statusText || 'Server is down.'));
    };
    req.send();
  });
};
// 调用函数
var options = {
  url: 'http://httpbin.org/get'
};
handleAjax(options).then(function (data) {
  console.log(data);
})\['catch'\](function (error) {
  console.log(error);
});

预览效果 | 源码 | 参考资料

发表于 更新于 分类于 Disqus：

当我们把一个多参数的函数，分解为若干个但参数的函数时，我们就在进行函数柯里化（Currying）。一个小例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var add = function(){
  var args = arguments,
      ret = 0;
  [].forEach.call(args, function(item){
    var num = +item || 0;
    ret += num;
  });
  console.log('result: '+ ret);
  return ret;
};
Function.prototype.currying = function(){
  var args = [].slice.call(arguments),
      self = this;
  return function(){
    var combinedArgs = args.concat([].slice.call(arguments));
    return self.apply(null, combinedArgs);
  };
};
var add123 = add.currying(1, 2, 3),
add456 = add123.currying(4, 5, 6);
// 运行
add456(7, 8, 9);
add456(1);
add456(2, 3);

参考文章：尾调用优化，Thunk 函数的含义和用法 PS：柯里化的对偶是反柯里化（Uncurrying），且听下回分解吧。

发表于 更新于 分类于 Disqus：

当我们通过 tag 来选取页面元素（比如 p 元素）的时候，有两种方法，document.querySelectorAll(‘p’) 和 document.getElementsByTagName(‘p’)。他们在使用时有稍许不同，querySelectorAll 返回的是一个 Static Node List，而 getElementsBy 系列的返回的是一个 Live Node List（via）。大致可以理解为，getElementsByTagName 返回的是一个可变的对象，当 DOM 刷新的时候，这个对象里面的值也会发生改变，而 querySelectorAll 返回的是一个静态的对象，其值不随 DOM 刷新而改变，所以当页面动态刷新时，两个值是不同的。见代码：

original

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
document.addEventListener('DOMContentLoaded', function(){
  var div = document.querySelector('div'),
      result = document.querySelector('section'),
      get = document.getElementsByTagName('p'),
      query = document.querySelectorAll('p');
  alert(get.length+ ', ' +query.length); // 1, 1
  addElement(div);
  addElement(div);
  alert(get.length+ ', ' +query.length); // 3, 1
});
var addElement = function(elem){
  var add = document.createElement('p');
  add.innerHTML = 'new line';
  elem.appendChild(add);
};

点击查看 DEMO

发表于 更新于 分类于 Disqus：

最近做个项目需要访问跳板机（堡垒机）中的 Oracle 数据库。需要 ssh 到某一个 IP，转发到本地 127.0.0.xxx IP 中的某一个端口。 Windows 下使用 SecureCRT 进行这个操作时溜溜的，到了 Mac（10.11.2） 下面就嗝屁了，具体表现为：

1. SecureCRT 中每次连接服务器都会提示输入密码，超级麻烦； 2. 全部设置好了以后依然无法连接到跳板机。

搜索之，翻了一大圈（使用中文关键词「mac securecrt 跳板机」），出来的结果都不甚理想。后来实在不甘心，在家大便的时候使用英文关键词搜索「mac securecrt port forwarding」，终于在官网找到了答案，现整理如下：

1. 打开 SecureCRT，按 ⌘ + , 进入偏好设置， General 中去除勾选「Use Keychain」，解决连接时保存密码不成功的问题； 2. 打开终端，输入下面的命令，绑定本地 IP（根据具体需求修改 xxx 部分）；

sudo ifconfig lo0 alias 127.0.0.xxx

3. 选中当前连接，按 ⌘ + enter，进入 Property 设置，选中 Port Forwarding，添加相应的转发规则（方法）； 4. 双击连接，成功。

PS：SecureCRT 与第三方输入法配合使用时，会出现 Console 中无法使用快捷键（比如 ⌃ + C 中断）的现象，切换为原生英文输入法就好了。

发表于 更新于 分类于 Disqus：

题设：生成 N 个随机正整数，使他们的和等于某个数。JS 实现了一下，记录之：

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
58
59
60
// 绑定表单，点击后给出计算结果
document.addEventListener('DOMContentLoaded', function(e){
  var elForm = document.getElementById('form'),
  elResult = document.getElementById('result');
  elForm.addEventListener('submit', function(e){
    e.preventDefault();
    var self = this,
    total = self\['Total'\].value,
    num = self\['Number'\].value,
    min = self\['Min'\].value,
    app = new Random(num, total, min),
    result = app.run();
    elResult.innerHTML = 'Result:   
' \+ result.join(', ');
  }, false);
}, false);

// 计算类
var Random = function(num, total, min){
  this.total = parseInt(total) || 100;
  this.num = parseInt(num) || 1;
  this.min = parseInt(min) || 0;
  this.result = \[\];
};
Random.prototype = {
  // 生成一个随机数
  random : function(t) {
    var max = t,
    min = this.min;
    return Math.floor(Math.random() * (max-min)) + min;
  },
  // 递归计算
  calc : function(t){
    var self = this,
    num = self.num,
    min = this.min;
    if(num * min > self.total){
      return this.result = \['The total number is not enough.'\];
    }
    if(num === 0){
      return false;
    }
    if(num === 1){
      self.result.push(self.total);
    }
    if(num > 1){
      var t =  self.total - (num-1)*min;
      r = self.random(t),
      self.result.push(r);
      self.total -= r;
    }
    self.num--;
    self.calc();
  },
  // 开始计算
  run : function(){
    this.calc();
    return this.result;
  }
};

点击查看 DEMO（备用地址） | 源码调试