学习underscore组织功能函数

摘要：学习冴羽的博客研究 underscore 组织功能函数，形成自己的一个工具函数库

基本结构

一般情况下是把工具函数全部装载到一个对象上，再把这个对象挂载到全局对象上

1
2
3
4
5
6
7
8
9
10
11
12
(function(){
  var root = this; // 获取全局对象，浏览器是window，node是global
  var _ = {}; // 装载全部方法
  root._ = _; // 挂载到全局对象上导出
  // 在这里添加自己的方法，将方法加到对象上
  _.fn = function(string){
    return string;
  }
})

// 调用
_.fn('hello');

获取全局对象

严格模式

严格模式下，this 指向 undefined （this），因而要对其进行修改

1
var root = (typeof window == 'object' && window.window == window && window) || (typeof global == 'object' && global.global == global && global)

Web Worker

Web Worker 处在一个自包含的执行环境中，无法访问 Window 对象和 Document 对象，和主线程之间的通信业只能通过异步消息传递机制来实现。

在浏览器中，除了 window 属性，还可以通过 self 属性直接访问到 Winow 对象，Web Worker 中可以访问到 self，好吧 self window window.window self.self window.self self.window 都是指向 window。再次修改

1
var root = (typeof self == 'object' && self.self == self && self) || (typeof global == 'object' && global.global == global && global)

node vm

在 node 的 vm 模块 runInContext 方法中无法访问到全局变量，使用 window 和 global 会报错，但是使用 this 可以访问到全局对象：

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 vm = require("vm");

var window = {
  p: 1,
  console: console
};

var p = 5;

global.p = 11;

vm.createContext(window);

// 报错 global is not defined
// vm.runInContext('p = 3;console.log(global);', global);

// 报错 window is not defined
// vm.runInContext('p = 3;console.log(window);', window);

// this打印为window，并且window.p的值重新赋值为3
vm.runInContext('p = 3;console.log(this);', window);

console.log(window)
// { p: 3, console: console {...} }

再次修改：

1
var root = (typeof window == 'object' && window.window == window && window) || (typeof global == 'object' && global.global == global && global) || this;

微信小程序

在小程序中没有 window 和 global，又强制使用严格模式，导致 this 为 undefined，只能自己创建一个可以全局引用的空对象：

1
var root = (typeof window == 'object' && window.window == window && window) || (typeof global == 'object' && global.global == global && global) || this || {};

装载全部方法

函数对象

underscore 既支持函数式风格_.fn1('hello');使用，又支持类似面向对象风格_('hello').fn1()这样调用。这使得_像是一个函数，函数也是一种对象，把工具函数都挂载到一个函数上也没问题：

1
2
var _ = function() {}
root._ = _;

问题来了：如何实现_('hello')返回的一个对象仍能调用挂载到 _ 上的 fn1 呢？
underscore 的实现方法：

1
2
3
4
5
6
var _ = function(obj) {
    if (!(this instanceof _)) return new _(obj);
    this._wrapped = obj;
};
// 调用
_([1, 2, 3]);

过程：
1、执行this instanceof _，this 指向 window，其原型链上不包含 _.prototype， 返回 false。取反后执行new _(obj)
2、执行new _(obj)，this 指向生成的实例对象，实例对象的原型为 _.prototype，this instanceof _返回 true，取反后执行this._wrapped = obj
3、最后new默认返回实例对象{_wrapped: [1, 2, 3]}，并且其原型为 _.prototype
到现在返回的实例对象仍然无法调用 _ 函数身上的方法，因为 _ 函数的方法并没有挂载到 _.prototype 上，下一步将 _ 身上的方法复制到 _.prototype

_.functions

为了将 _ 上的方法复制到原型上，需要先获取 _ 上的所有方法：

1
2
3
4
5
6
7
_.functions = function(obj) {
  var names = [];
  for (var key in obj) {
    if (_.isFunction(obj[key])) names.push(key);
  }
  return names.sort();
}

isFunction 参考JavaScript检测类型

_.mixin

获取 _ 上的所有方法后，就可以将所有方法添加到 _ 额原型上：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var ArrayProto = Array.prototype;
var push = ArrayProto.push;

_.mixin = function(obj) {
  _.each(_.functions(obj), function(name) {
    var func = _[name] = obj[name];
    // 当 obj 是自定义对象时，obj 的方法被扩充到 _ 和 _.prototype 上
    _.prototype[name] = function() {
      var args = [this._wrapped];
      // _(args1).func(args2) == _.func(args1, args2)
      push.apply(args, arguments);
      return func.apply(_, args);
    };
  });
  return _;
};

_.mixin(_);

each 参考实现jQuery中的each
拓展自定义方法：

1
2
3
4
5
6
7
8
9
var obj = {
  addOne: function(num) {
    return num + 1;
  }
}
// 此时的obj即为自定义对象
_.mixin(obj);
// 调用
_(2).addOne(); // 3

导出

需要将 _ 在合适的环境中作为模块导出，但是 nodejs 模块的 API 曾经发生过改变：
旧版本：

1
2
3
4
5
6
7
8
// add.js
exports.addOne = function(num) {
  return num + 1
}

// index.js
var add = require('./add');
add.addOne(2);

新版本：

1
2
3
4
5
6
7
8
// add.js
module.exports = function(1){
  return num + 1
}

// index.js
var addOne = require('./add.js')
addOne(2)

因而要根据 exports 和 module 是否存在来选择不同的导出方式：

1
2
3
4
5
6
7
8
if (typeof exports != 'undefined') { // 处于 node 环境下
  if (typeof module != 'undefined' && module.exports) { // exports 是 module.exports 的一个引用，新版本下仍导出同一个引用
    exports = module.exports = _;
  }
  exports._ = _;
} else {
  root._ = _;
}

还有一个问题：在 HTML 页面中加入一个 id 为 exports 的元素，比如

1
<div id="exports"></div>

就会生成一个 window.exports 全局变量，可以直接在浏览器命令行中打印出该变量。此时typeof exports != 'undefined'返回值为 true 却处于浏览器环境中，因此还需要排除是 DOM 节点的情况：

1
2
3
4
5
6
7
8
if (typeof exports != 'undefined' && !exports.nodeType) {
  if (typeof module != 'undefined' && !module.nodeType && module.exports) {
    exports = module.exports = _;
  }
  exports._ = _;
} else {
  root._ = _;
}

源码

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
(function () {

  var root = (typeof self == 'object' && self.self == self && self) ||
    (typeof global == 'object' && global.global == global && global) ||
    this || {};

  var ArrayProto = Array.prototype;

  var push = ArrayProto.push;

  var _ = function (obj) {
    if (obj instanceof _) return obj;
    if (!(this instanceof _)) return new _(obj);
    this._wrapped = obj;
  };

  if (typeof exports != 'undefined' && !exports.nodeType) {
    if (typeof module != 'undefined' && !module.nodeType && module.exports) {
      exports = module.exports = _;
    }
    exports._ = _;
  } else {
    root._ = _;
  }

  _.VERSION = '0.1';

  var MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;

  var isArrayLike = function (collection) {
    var length = collection.length;
    return typeof length == 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
  };

  _.each = function (obj, callback) {
    var length, i = 0;
    if (isArrayLike(obj)) {
      length = obj.length;
      for (; i < length; i++) {
        if (callback.call(obj[i], obj[i], i) === false) {
          break;
        }
      }
    } else {
      for (i in obj) {
        if (callback.call(obj[i], obj[i], i) === false) {
          break;
        }
      }
    }

    return obj;
  }

  _.isFunction = function (obj) {
    return typeof obj == 'function' || false;
  };

  _.functions = function (obj) {
    var names = [];
    for (var key in obj) {
      if (_.isFunction(obj[key])) names.push(key);
    }
    return names.sort();
  };

  /**
   * 在 _.mixin(_) 前添加自己定义的方法
   */
  _.reverse = function (string) {
    return string.split('').reverse().join('');
  }

  _.mixin = function (obj) {
    _.each(_.functions(obj), function (name) {
      var func = _[name] = obj[name];
      _.prototype[name] = function () {
        var args = [this._wrapped];
        push.apply(args, arguments);
        return func.apply(_, args);
      };
    });
    return _;
  };

  _.mixin(_);

})()

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

持续学习