jQuery学习

链式调用

var _ = function (selector) {
  return new _.fn.init(selector)
}
_.fn = _.prototype = {
  constructor: _, // 强化构造器
  init: function (selector, context) {
    // console.log(this.constructor)
    context = context || document
    var dom = context.querySelectorAll(selector) // 将获取的元素作为当前对象的属性值保存
    var len = dom.length
    for (; i < len; i++) {
      this[i] = dom[i]
    }
    this.length = len // 校正 length 属性
    return this // 返回当前对象
  },
  size: function () {
    return this.length
  },
  // 增强数组，使 _('ID') 返回的结果看起来更像一个数组
  push: [].push,
  sort: [].sort,
  splice: [].splice
}
_.fn.init.prototype = _.fn // 强化构造器，使原型链 __proto__ 指向 _ 对象



// 对象拓展
_.extend = _.fn.extend = function () {
  var i = 1 // 拓展对象从第二个参数算起
  var len = arguments.length // 获取参数长度
  var target = arguments[0] // 第一个参数为源对象
  var j // 拓展对象中的属性
  // 如果只有一个参数
  if (i == len) {
    target = this // 源对象为当前对象
    i-- // i 从 0 计算
  }
  // 遍历参数中的拓展对象
  for (; i < len; i++) {
    for (j in arguments[i]) {
      target[j] = arguments[i][j]// 拓展对象中的属性
    }
  }
  return target // 返回源对象
}



// 测试用例
console.log(_('ID'))
console.log(_('ID').size());

_.extend(_.fn, { version: '1.0' })
console.log(_('ID').version)
_.fn.extend({ getVersion: function () { return this.version } })
console.log(_('ID').getVersion())