jqfree
虽然团队里用上了vue，但是某些情况下可能仍然需要操作DOM，或者是需要一些诸如变量类型判断、时间解析函数、url解析函数、浮点数四舍五入小数位和获取随机位数字符串的辅助函数。而本篇就是教你怎么构建这样一个山寨版的库，只要400行代码，你就能体验写一个库函数畅快的感觉！
jqfree core
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
var $ = function(selector, context) { return new $.fn.init(selector, context); }; $.fn = $.prototype; $.fn.init = function(selector, context) { if (selector.nodeType === 1) { this[0] = selector; this.length = 1; return this; } var parent = context || document; var nodeList = parent.querySelectorAll(selector); this.length = nodeList.length; for (var i=0; i<this.length; i+=1) { this[i] = nodeList[i]; } return this; }; $.fn.init.prototype = $.fn; |
我们需要一个包装着DOM Elements的伪数组，此伪数组对象使用原型链去挂载共享的DOM处理方法，原理如下图。
|
1 2 3 4 5 |
//选择器 $('body'); //返回$.fn.init {0: body, length: 1, selector: "body"} $('.class'); $('#id'); $('#id .class'); |
extend
jqfree中的extend函数参照了prototype.js的实现方式，$.extend和$.fn.extend功能相同，也都是通过浅拷贝的方式，把第二个参数上的对象扩展添加到第二个参数的对象上，如果没有指定第二个参数，则会把第一个参数添加到this上。需要给DOM元素添加方法的话，使用$.fn.extend如$.fn.append，而需要给全局$对象添加扩展的话，使用$.extend，如$.ajax。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$.extend = $.fn.extend = function (destination, source) { //if source is not exist，copy the destination to this。 if (typeof source === 'undefined') { source = destination; destination = this; } for (var property in source) { if (source.hasOwnProperty(property)) { destination[property] = source[property]; } } return destination; }; |
traverse
遍历jqfree对象中的DOM Elements。实际上是遍历了$.fn.init {0: body, length: 1, selector: "body"}这样的一个伪数组中的类似数组的那一部分。
|
1 2 3 4 5 6 7 8 9 10 |
$.fn.extend({ each: function (func) { var i=0, length = this.length; for (; i<length; i+=1) { func.call(this[i],n> func.call(this[i],体验写一个库函数畅快的感觉！
jqfree core
我们需要一个包装着DOM Elements的伪数组，此伪数组对象使用原型链去挂载共享的DOM处理方法，原理如下图。
extendjqfree中的extend函数参照了prototype.js的实现方式，$.extend和$.fn.extend功能相同，也都是通过浅拷贝的方式，把第二个参数上的对象扩展添加到第二个参数的对象上，如果没有指定第二个参数，则会把第一个参数添加到this上。需要给DOM元素添加方法的话，使用$.fn.extend如$.fn.append，而需要给全局$对象添加扩展的话，使用$.extend，如$.ajax。
traverse遍历jqfree对象中的DOM Elements。实际上是遍历了
|
