原型

原型如何实际应用

zepto 实现原型

// 空对象
var zepto = {}

// 构造函数
function Z(dom, selector) {
  var i,
    len = dom ? dom.length : 0
  for (i = 0; i < len; i++) this[i] = dom[i]
  this.length = len
  this.selector = selector || ''
}

zepto.Z = function(dom, selector) {
  return new Z(dom, selector)
}

zepto.init = function(selector) {
  var slice = Array.prototype.slice
  var dom = slice.call(document.querySelectorAll(selector))
  return zepto.Z(dom, selector)
}

// 即使用 zepto 时候的 $
var $ = function(selector) {
  return zepto.init(selector)
}

$.fn = {
  constructor: zepto.Z,
  css: function(key, value) {},
  html: function(val) {}
}

zepto.Z.prototype = Z.prototype = $.fn

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

jQuery 实现原型

var jQuery = function(selector) {
  return new jQuery.fn.init(selector)
}

// 定义构造函数
var init = (jQuery.fn.init = function(selector) {
  var slice = Array.prototype.slice
  var dom = slice.call(document.queryselectorAll(selector))

  var i,
    len = dom ? dom.length : 0
  for (i = 0; i < len; i++) this[i] = dom[i]
  this.length = len
  this.selector = selector || ''
})

// 初始化 jQuery, fn
jQuery.fn = jQuery.prototype = {
  constructor: jQuery,
  css: function(key, value) {},
  html: function(val) {}
}

// 定义原型
init.prototype = jQuery.fn

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

原型如何满足扩展

jQuery 扩展

$.fn.getNodeName = function() {
  return this[0].nodeName
}

1
2
3

好处

只有 $ 会暴露在 window 全局变量
将插件扩展统一到 $.fn.xxx 这一个接口，方便调用

# 原型

# 原型如何实际应用

# 好处

原型

原型如何实际应用

好处