用原生js模仿jquery

阅读声明：本文档仅供学习，由于个人能力有限，文档中有错漏的地方还请指出，大家共同学习。

目前在学习怎么样写jquery，模仿阶段，有兴趣的同学可以和我一起学习，共同交流，在学习的路上希望有你做伴。

在写这个jquery入口模式的时候，首先要知道有几种模式，然后再去些：
我知道的有两种：
一:
$(function () {
需要在Document文档加载完成后执行的代码
})
二:
$(document).ready(function () {
需要在Document文档加载完成后执行的代码
})

目录结构:
index.html
base.js 主要是用来写基础文件
fn.js (主要用来写function()),用来补充base中需要使用的到的方法
index.js 用来写我们正式的代码
用base.js 和fn.js 来实现jquery的功能。

思考步骤：
先new 出$
function Base(){
} （个人习惯一般喜欢把方法放在后面）

在里面将默认的fn指定出来，ready，让其两个使用同一个方法，用if区别出两种不同的方式。
在里面js的时候需要考虑到垃圾回收。下面贴代码：

base.js文件

/* 用原生的js仿jquery来写入口*/
/* 使用$符号*/
var $ = function (args) {
return new Base (args);
}

/* 基础库 */
function Base (args) {
//创建一个数组，来保存获取节点和节点数组

//alert(typeof args); function
if (typeof args == ‘function’) {
this.ready(args);
}
};

/* 添加入口文件ready模式 */
Base.prototype.ready = function (fn) {

addDomLoaded(fn);
}

fn.js文件

(function () {
window.sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? sys.chrome = s[1] :
(s = ua.match(/opera\/.*version\/([\d.]+)/)) ? sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? sys.safari = s[1] : 0;

if (/webkit/.test(ua)) sys.webkit = ua.match(/webkit\/([\d.]+)/)[1];

})();

/*DOM load */
function addDomLoaded(fn) {

var isReady = false;
var timer = null;

if ((sys.opera && sys.opera < 9) || (sys.firefox && sys.firefox < 3) || (sys.webkit && sys.webkit < 525)) {
//无论采用哪种，基本上用不着了
/*timer = setInterval(function () {
if (/loaded|complete/.test(document.readyState)) { //loaded是部分加载，有可能只是DOM加载完毕，complete是完全加载，类似于onload
doReady();
}
}, 1);*/
timer = setInterval(function () {
if (document && document.getElementById && document.getElementsByTagName && document.body) {
doReady();
}
}, 1);
}else if (document.addEventListener) { //W3C
//当前浏览器进到这里来了

addEvent( document, ‘DOMContentLoaded’, function() {

fn();
removeEvent(document,’DOMContentLoaded’,arguments.callee); //事件回收
});
}else if(sys.ie && sys.ie < 9) {
var timer = null;
timer = setInterval(function () {
try {
document.documentElement.doScroll(‘left’); //兼容IE9以下的浏览器
} catch (e) {};
},1);
}

function doReady () {
if (timer) clearInterval(timer);
if (isReady) return;
isReady = true;
fn();
}
}

//跨浏览器添加事件绑定
function addEvent (obj, type, fn) {
//alert(typeof obj.addEventListener); //function
if(typeof obj.addEventListener != ‘undefined’) {
obj.addEventListener(type, fn, false);
} else {
//创建一个存放事件的哈希表(散列表)
if(!obj.events) obj.events = {};
//第一次执行时执行
if(!obj.events[type]) {
//创建一个存放事件处理函数的数组
obj.events[type] = [];
//把第一次的事件处理函数先存储到第一个位置上
if(obj[‘on’+ type]) obj.events[type][0] = fn;
} else {
//同一个注册函数进行屏蔽，不添加到计数器中
if (addEvent.equal(obj.events[type], fn)) return false;
}
//从第二次开始我们用事件计数器来存储
obj.events[type][addEvent.ID++] = fn;
//执行事件处理函数
obj[‘on’ + type] = addEvent.exec;
}

}

//跨浏览器删除事件
function removeEvent(obj, type, fn) {
if (typeof obj.removeEventListener != ‘undefined’) {
obj.removeEventListener(type, fn, false);
} else {
if (obj.events) {
for (var i in obj.events[type]) {
if (obj.events[type[i]] == fn) {
delete obj.events[tyle][i];
}
}
}
}
}

index.js
$(function () {
alert(1111);
});

在使用index.html的时候注意引用js文件的顺序
<script src=”./js/fn.js”></script>
<script src=”./js/base.js”></script>
<script src=”./js/blog.js”></script>

好了，现在就可以看到我们使用jquery中$(function() {alert(1111)})和$(document).ready(function(){alert(1111)})的方式了。

文件来自于（http://dayney.com/?p=42）