JS AOP

有时候我们需要在某个 function 执行之前或之后执行某些自定义的操作,但又不想去修改封装好的代码,这时候就可以使用 AOP 这一设计模式。

首先我们需要扩展 Function:

使用时是这样的:

view demo

JS 中的 bind 与 call

JS 中调用方法或函数时,有时候需要变更 this 的指向,通常我们会使用 call/apply,而 bind 也可以改变 this 的指向,那么他们有什么区别呢?

简单地说,call/apply 是改变 this 指向时立即调用,而 bind 只是绑定了新的指向,返回的依然是一个 function。举例说明:

#1,#2,#3 将会返回一样的值。

使用 corsproxy 反向代理解决 ajax 请求跨域问题

本地开发一个 RESTFul 网站,开发时 RESTFul 服务器和网页服务器不在一个域下面,部署后将放在同一个域下,这样,本地开发时,跨域问题就会造成请求失败。尝试各种方案都不甚理想,直到找到了 corsproxy 这个神器。

corsproxy 是一个基于 node.js 的反向代理服务,启动后会自动对 ajax 请求进行转发,由于其域是在 localhost 下面的,所以与本地服务器不存在跨域问题。

首先安装服务:

根据提示,将 ajax 请求加上 http://localhost:1337/ 前缀,比如,你要访问 http://my.domain.com/path/to/resource 这个接口,于是将其改为 http://localhost:1337/my.domain.com/path/to/resource。

齐活。

Have fun!

Javascript 瓶盖换啤酒问题

题目是这样的,啤酒2块钱一瓶,2个空瓶子或者4个瓶盖可以换一瓶新的,如果手上有10元钱,可以喝多少瓶啤酒。写了个 JS 脚本来计算,代码如下(demo):

BTW:题目的答案是最终可以喝 15 瓶(计算过程如下图),你答对了吗?

基于 ES6 Promise 的 AJAX 简单封装

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

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

Javascript Currying

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

参考文章:尾调用优化Thunk 函数的含义和用法

PS:柯里化的对偶是反柯里化(Uncurrying),且听下回分解吧。

querySelectorAll 和 getElementsByTagName 的区别

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

点击查看 DEMO

El Capitan 中使用 SecureCRT 访问跳板机

最近做个项目需要访问跳板机(堡垒机)中的 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 部分);

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

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

随机数求和

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

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

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

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

  1. 改为 AJAX 进行表单交互;
  2. 改进服务端,使用一个中转页面进行 redirect

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

  1. 为页面添加一个隐藏的 iframe(假设 css 中 .hide 的样式已经设置为了 display:none )
  2. 将 form 的 target 绑定到 iframe 上
  3. 编写 JS 绑定相关事件
  4. 这个逻辑的精髓在于,使用了一个 iframe 充当中间跳转页面的角色,在不需要修改后端代码的情况下既可以避开页面刷新重复提交了。当然,如果页面提交后,会有某些提示信息,也可以在 iframe 的 load 事件中进行监测,获取相应字符串以后再判断接下来做什么。获取 iframe 中的内容方法如下(以 body 为例):