web前端|js教程
jQuery,css,js
web前端-js教程
A、ready函数的实现经常用jQuery类库或其他类库中的ready方法，有时候想想它们到底是怎么实现的，但是看了一下jQuery中的源码，涉及到的模块比较多，(水平有限)代码比较难看懂；自己结合了一些书籍内容，总结一下。
先说一下ready函数的实现思路：
变量ready通过表达式赋值，右侧为一个自执行匿名函数，在这个匿名函数中，首先为各个浏览器的事件绑定处理函数，并为isReady赋值(根据事件异步处理程序来确定)，然后返回一个传参闭包，在闭包中，主要判断isReady值来执行操作，如果dom结构准备就绪(isReady === true)，执行回调，否则将回调加入到要执行的队列(funs)中，待事件处理程序执行时，循环遍历队列(funs)，并依次执行队列中的函数，执行完队列中的函数后，还需要清除队列(funs = null)。
微信公众商城源码,vscode的调整参数,ubuntu 开发项目,tomcat启动内存多大,sqlite+可视化软件,风变课程学完爬虫能到什么程度,php 模拟微信登录,河南新品seo价格信息,dede企业网站模板,微信好的模板下载网站有哪些lzw
var ready = (function(){
var isReady = false,
funs = [];
function handle (e) {
if ( isReady ) {
return;
}
if ( e.type === eadystatechange && (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( eadystatechange, 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);
}
};
}());
PS:
该函数代码参照于权威指南书籍，唯一不同的是，多加了一个判断document.readyState !== ‘interactive’
日程表源码,vscode编写vba程序,ubuntu 解压jbk,tomcat进程关不掉,sqlite查看用户名和密,利用第三方软件爬虫有哪些方法,php打开url,嘉兴seo代理商,仿贴吧的网站,数据统计 网页模板lzw
if ( e.type === eadystatechange && (document.readyState !== interactive && document.readyState !== complete) ) {
return;
}
在各个浏览器中交互和完成状态出现顺序并不能保证一致，这取决于浏览器及页面的内容，多加了这个判断document.readyState !== ‘interactive’的话，
意思是不管哪个阶段先出现，代码都能更早的执行。
B、按需加载css，js参照了jQuery源码，写了一个type函数，返回参数类型。
网盘源码是什么意思,ubuntu退出命令界面,tomcat放大量视频文件,挣扎的爬虫,php公众号怎么获取,京推推seolzw
/**
*
* 判断参数类型
* createTime: /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);
}
PS: 在判断link，script元素是否加载完毕，主要依靠load事件；而在ie9以下浏览器中，并没有load事件，ie为它们都添加了一个readystatechange事件，通过判断
元素的readyState状态确定元素是否已经加载完毕；而奇怪的是，在ie9(还可能存在其他浏览器版本)中，元素既有load事件又有readystatechange事件，因此在代码中添加了一个变量isExecuted，如果执行过回调，那么就不再执行，避免回调执行两次。
C、调用方式
loadCss(/apps/tbtx/miiee/css/base.css, function(){
console.log(css加载完毕);
});
loadScript(/apps/tbtx/miiee/js/jQuery.js, function(){
console.log(js加载完毕);
});
ready(function(){
console.log(dom is ready!);
});
