1 模板字符串通用匹配
<script type="text/html" id="tmp">
<div class="name">
<p class="gae">
{{name}}
</p>
<img src="{{src}}" alt="">
</div>
</script>
<script>
var tmp = document.getElementById('tmp'),
opt = {
name:888,
src:'sdasdadadadasd'
};
// setTmpToHtmlStr(tmp.innerHTML,new RegExp(/{{(.*?)}}/,'gim'),opt);
/**
* @param tpl 模板字符串
* @param regExp 正则
* @param opt 要匹配的对象
*
*/
function setTmpToHtmlStr(tpl,regExp,opt){
return tpl.replace(regExp,function(node,key){
console.log(opt[key]);
return opt[key];
});
}
2异步加载JS文件
// 这是异步加载JS文件;deferIE独有;async W3C标准
/**
* @param url 文件路径
* @param url 要执行的方法
* */
asyncDownLoadJS('js/unique.js','ab')
function asyncDownLoadJS(url,fn){
var script = document.createElement('script'),
head = document.getElementsByTagName('head')[0];
script.type = 'text/javascript';
// IE 独有
if(script.readyState){
script.onreadytatechange = function (){
var state = script.state;
if(state == 'complate' || state == 'loaded'){
utils[fn]();
}
}
}else{
script.onload = function(){
console.log(11111)
utils[fn]();
}
}
//放在后面防止事件不触发;有缓存时,可能不触发
script.src = url;
head.appendChild(script);
}
// 利用onload事件; 等onload事件触发后再去 下载JS文件
(function () {
function asyncDownLoadJS1() {
var script = document.createElement('script'),
head = document.getElementsByTagName('head')[0];
script.type = 'text/javascript';
//已经开始下载
script.src = 'js/unique.js';
console.log(script);
head.appendChild(script);
}
if (window.attachEvent) {
window.attachEvent('onload', asyncDownLoadJS1);
} else {
window.addEventListener('load', asyncDownLoadJS1, false);
}
})();
3 getElementsByClassName()方法重写
// getElementsByClassName
Document.prototype.myGetElementsByClassName = Element.prototype.myGetElementsByClassName = function(className){
var allDom = this.getElementsByTagName('*'),
len = allDom.length,
item,
result = [];
//方法简单判断
// for (var index = 0; index < len; index++) {
// item = allDom[index];
// var classs = item.className;
// console.log(classs)
// if(classs.indexOf(className) != -1){
// result.push(item)
// }
// }
//除去特殊情况 ,空格 空白字符等
for (var index = 0; index < len; index++) {
item = allDom[index];
var classs = trimSpace(item.className).trim(),
classArr = classs.split(' '),
classArrLen = classArr.length;
for(var j = 0; j < classArrLen; j++){
if(className ===classArr[j]){
result.push(item);
break;
}
}
}
// 去掉空格 制表符 等空白字符; class= " name name "
function trimSpace(str){
return str.replace(/\s+/g,' ');
}
return result;
}