阅读声明:本文档仅供学习,由于个人能力有限,文档中有错漏的地方还请指出,大家共同学习。
目前在学习怎么样写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)