糖醋排骨

interjc weblog

0%

发表于 更新于 分类于 ， Disqus：

Pikaday 是一个干净小巧不依赖其他库（如 jQuery 等）的日期选择库（只能选日期不能选时间），如果只需要一个简单的日期选择功能，又不想要加载 jQuery 甚至 Bootstrap 这样的大部头可以考虑选择。 最近在使用 Vuejs 做项目，就把这个日期选择库包装了一下，是他可以作为一个组件在项目中使用，组件源代码如下： 使用这个组件以前需要做一点微小的工作，首先安装 pikaday：

1
npm i --save pikaday

然后将所需的 css 文件引入（scss 或 css）； 接着在项目中使用组件：

1
2
3
4
5
6
7
8
9
10
11
import VuePicker from '/path/to/vuePicker.vue';
export default {
  data(){
    return {
      date: ''
    }
  },
  components: {
    VuePicker
  }
}

have fun!

发表于 更新于 分类于 Disqus：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Function.prototype.before = function(fn){
  var self = this;
  return function(){
    typeof fn === 'function' && fn.apply(this, arguments);
    return self.apply(this, arguments);
  };
};
Function.prototype.after = function(fn){
  var self = this;
  return function(){
    var ret = self.apply(this, arguments);
    typeof fn === 'function' && fn.apply(this, arguments);
    return ret;
  }
};

使用时是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
window.addEventListener('DOMContentLoaded', function(){
  var appendBefore = function(){
    appendText('before');
  },
  appendAfter = function(){
    appendText('after');
  },
  newAbc = abc
    .before(appendBefore)
    .after(appendAfter)
    .after(appendAfter)
    .before(appendBefore);
  newAbc(); // before before raw after after
});
var appendText = function(text){
  var obj = document.querySelector('body'),
      str = document.createTextNode(' '+ text +' ');
  obj.appendChild(str);
},
abc = function(){
  appendText('raw');
};

view demo

发表于 更新于 分类于 Disqus：

JS 中调用方法或函数时，有时候需要变更 this 的指向，通常我们会使用 call/apply，而 bind 也可以改变 this 的指向，那么他们有什么区别呢？ 简单地说，call/apply 是改变 this 指向时立即调用，而 bind 只是绑定了新的指向，返回的依然是一个 function。举例说明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var foo = {
  a: 1,
  b: 2,
  add: function(before, after){
    return before + this.a + this.b + after;
  }
},
bar = {
  a: 3, 
  b: 4
};
// call
foo.add.call(bar, 'before', 'after'); // #1
// bind
foo.add.bind(bar, 'before', 'after')(); // #2
foo.add.bind(bar)('before', 'after'); // #3

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

发表于 更新于 分类于 Disqus：

本地开发一个 RESTFul 网站，开发时 RESTFul 服务器和网页服务器不在一个域下面，部署后将放在同一个域下，这样，本地开发时，跨域问题就会造成请求失败。尝试各种方案都不甚理想，直到找到了 corsproxy 这个神器。 corsproxy 是一个基于 node.js 的反向代理服务，启动后会自动对 ajax 请求进行转发，由于其域是在 localhost 下面的，所以与本地服务器不存在跨域问题。 首先安装服务：

# 安装服务
npm install -g corsproxy
# 启动服务
corsproxy

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