前端web学习记录

对象属性无序，数组属性有序。

正则表达式中 \s 可以过滤所有空格

lodash语法get

判断js和css是否加载完成

发现在OSC上面用MD写代码比较爽 忍不住试啦一下
判断CSS是否加载完成

在head标签内插入 引入css的link标签
如果是ie浏览器直接使用

onload

事件 其它浏览器用

setTimeout

循环轮询判断下面属性
如果是

webkit

内核判断 link节点上的

sheet

属性
其它浏览器判断节点上的

sheet.cssRules

属性

以下是完整代码

function loadCss(src,fn){
var node=document.createElement('link');
node.rel='stylesheet';
node.href=src;
document.head.insertBefore(node,document.head.firstChild);
if(node.attachEvent){
node.attachEvent('onload', function(){fn(null,node)});
}else{
setTimeout(function() {
poll(node, fn);
}, 0); // for cache
}
function poll(node,callback){
var isLoaded = false;
if(/webkit/i.test(navigator.userAgent)) {//webkit
if (node['sheet']) {
isLoaded = true;
}
}else if(node['sheet']){// for Firefox
try{
if (node['sheet'].cssRules) {
isLoaded = true;
}
}catch(ex){
// NS_ERROR_DOM_SECURITY_ERR
if (ex.code === 1000) {
isLoaded = true;
}
}
}
if(isLoaded){
setTimeout(function(){
callback(null,node);
},1);
}else{
setTimeout(function(){
poll(node,callback);
},10);
}
}
node.onLoad=function(){
fn(null,node);
}
}

判断javascript是否加载完成

如果支持

onload

事件使用

onload

事件 否则使用

onreadystatechange

事件

onreadystatechange

事件回调很不稳定 有时候出现一次 有时候两次

function loadScript(src,fn){
var node = document.createElement("script");
node.setAttribute('async','async');
var timeID
var supportLoad = "onload" in node
var onEvent = supportLoad ? "onload" : "onreadystatechange"
node[onEvent] = function onLoad() {
if (!supportLoad && !timeID && /complete|loaded/.test(node.readyState)) {
timeID = setTimeout(onLoad)
return
}
if (supportLoad || timeID) {
clearTimeout(timeID)
fn(null,node);
}
}
document.head.insertBefore(node, document.head.firstChild);
node.src=src;
node.onerror=function(e){
fn(e);
}
}