糖醋排骨

Javascript Currying

发表于 2016-02-01 更新于 2024-04-26 分类于 Development Disqus：

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

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），且听下回分解吧。

querySelectorAll 和 getElementsByTagName 的区别

发表于 2016-01-05 更新于 2024-04-26 分类于 Development Disqus：

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

original

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

El Capitan 中使用 SecureCRT 访问跳板机

发表于 2015-12-28 更新于 2024-04-26 分类于 Development 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 中断）的现象，切换为原生英文输入法就好了。

随机数求和

发表于 2015-12-22 更新于 2024-04-26 分类于 Development Disqus：

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

// 绑定表单，点击后给出计算结果
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（备用地址） | 源码调试

使用 iframe 避免表单刷新时的重复提交

发表于 2015-12-15 更新于 2024-04-26 分类于 Development Disqus：

使用同步方式提交表单时最郁闷的事情就是刷新时表单重复提交了，一次重复提交以后，后续做各种操作（reset 表单、删除表单都不奏效）都很难避免，搜了一下网上的答案，无外乎以下两种：

改为 AJAX 进行表单交互；
改进服务端，使用一个中转页面进行 redirect

然而很多时候我们并不能去修改服务端（比如没有权限，或者后端功能已经趋于稳定、修改成本高），那么这样就不能避免重复提交了吗？于是我根据页面中转的思路使用 iframe 做了一次尝试，果然页面就不会重复提交了，方法如下：

为页面添加一个隐藏的 iframe（假设 css 中 .hide 的样式已经设置为了 display:none ）
将 form 的 target 绑定到 iframe 上

// 表单内容
编写 JS 绑定相关事件

document.addEventListener(‘DOMContentLoaded’, function(){
var form = document.querySelector(‘#form’),
iframe = document.querySelector(‘#iframe’),
href = window.location.href;
iframe.setAttribute(‘src’, href); // 设置 iframe 加载当前地址栏的页面（因为有一些表单提交时会验证 url）
// 绑定表单提交事件
form.addEventListener(‘submit’, function(event) {
```
// 当表单提交时，为 iframe 绑定 load 事件，
// 当 iframe 中页面加载完毕（提交成功时，跳转当前页面为当前 url，替代刷新效果）
iframe.addEventListener('load', function(event) {
  window.location = window.location.href;
}, false);
```
}, false);
}, false);

这个逻辑的精髓在于，使用了一个 iframe 充当中间跳转页面的角色，在不需要修改后端代码的情况下既可以避开页面刷新重复提交了。当然，如果页面提交后，会有某些提示信息，也可以在 iframe 的 load 事件中进行监测，获取相应字符串以后再判断接下来做什么。获取 iframe 中的内容方法如下（以 body 为例）：

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document,
ibody = iframeDocument.body;
console.log(ibody.textContent); // 打印 iframe 中 body 里所有的文本内容