一、ready函数的实现
经常用jquery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jquery中的,涉及到的模块比较多,(水平有限)代码比较难看懂;自己结合了一些书籍内容,总结一下。
先说一下ready函数的实现思路:
变量ready通过表达式赋值,右侧为一个自执行匿名函数,在这个匿名函数中,首先为各个的事件绑定处理函数,并为isready赋值(根据事件异步处理程序来确定),然后返回一个传参闭包,在闭包中,主要判断isready值来执行操作,如果dom结构准备就绪(isready === true),执行回调,否则将回调加入到要执行的队列(funs)中,待事件处理程序执行时,循环遍历队列(funs),并依次执行队列中的函数,执行完队列中的函数后,还需要清除队列(funs = null)。
. 代码如下:
var ready = (function(){
var isready = false,
funs = [];
function handle (e) {
if ( isready ) {
return;
}
if ( e.type === 'readystatechange' && (document.readystate !== 'interactive' && document.readystate !== 'complete') ) {
return;
}
for ( var i = 0; i < funs.length; i++ ) {
funs[i].call(document);
}
isready = true;
funs = null;
}
if ( document.addeventlistener ) {
document.addeventlistener( 'domcontentloaded', handle, false );
document.addeventlistener( 'readystatechange', handle, false );
document.addeventlistener( 'load', handle, false );
}
else if ( document.attachevent ) {
document.attachevent( 'onreadystatechange', handle );
document.attachevent( 'onload', handle );
}
return function ready (callback) {
if ( isready ) {
callback.call(document);
}
else {
funs.push(callback);
}
};
}());
. 代码如下:
if ( e.type === 'readystatechange' && (document.readystate !== 'interactive' && document.readystate !== 'complete') ) {
return;
}
. 代码如下:
/**
*
* 判断参数类型
* createtime: 2013/9/18
*
*/
function type (obj) {
var classtypes, objecttypes;
if ( obj == null ) {
return string(obj);
}
classtypes = {};
objecttypes = ('boolean number string function array date regexp object error').split(' ');
for ( var i = 0, len = objecttypes.length; i < len; i++ ) {
classtypes[ '[object ' + objecttypes[i] + ']' ] = objecttypes[i].tolowercase();
}
if ( typeof obj === 'object' || typeof obj === 'function' ) {
var key = object.prototype.tostring.call(obj);
return classtypes[key];
}
return typeof obj;
}
. 代码如下:
// css按需加载
function loadcss (cssurl, callback) {
var elem, bl,
isexecuted = false; // 防止在ie9中,callback执行两次
if ( cssurl == null ) {
return string(cssurl);
}
elem = document.createelement('link'),
elem.rel = 'stylesheet';
if ( type(callback) === 'function' ) {
bl = true;
}
// for ie
function handle() {
if ( elem.readystate === 'loaded' || elem.readystate === 'complete' ) {
if (bl && !isexecuted) {
callback();
isexecuted = true;
}
elem.onreadystatechange = null;
}
}
elem.onreadystatechange = handle;
// for 非ie
if (bl && !isexecuted) {
elem.onload = callback;
isexecuted = true;
}
elem.href = cssurl;
document.getelementsbytagname('head')[0].appendchild(elem);
}
// js按需加载
function loadscript(scripturl, callback) {
var elem, bl,
isexecuted = false; // 防止在ie9中,callback执行两次
if (scripturl == null) {
return string(fn);
}
elem = document.createelement('script');
if ( type(callback) === 'function' ) {
bl = true;
}
// for ie
function handle(){
var status = elem.readystate;
if (status === 'loaded' || status === 'complete') {
if (bl && !isexecuted) {
callback();
isexecuted = true;
}
elem.onreadystatechange = null;
}
}
elem.onreadystatechange = handle;
// for 非ie
if (bl && !isexecuted) {
elem.onload = callback;
isexecuted = true;
}
elem.src = scripturl;
document.getelementsbytagname('head')[0].appendchild(elem);
}
. 代码如下:
loadcss('https://www.jb51.net/apps/tbtx/miiee/css/base.css', function(){
console.log('css加载完毕');
});
loadscript('https://www.jb51.net/apps/tbtx/miiee/js/jquery.js', function(){
console.log('js加载完毕');
});
ready(function(){
console.log('dom is ready!');
});
如对本文有疑问, 点击进行留言回复!!
asp.net中ajax和一般处理程序(handler.ashx)的交互
egg.js创建项目,目录介绍,简单使用,sequelize mysql使用
网友评论