文章目录[隐藏]
立即执行函数原理
将函数定义变成一个表达式
//推荐方法 (function(){})(); //其他方法 !function(){}();
动态加载 CSS 和 JS 的另外一种方法
除了动态创建 script dom 后 append 到 document,还可以直接这样:
/** * 加载JS * @param path */ function loadJS(path) { document.write(`<script type="text/javascript" src="${path}"></script>`); } /** * 加载CSS * @param path */ function loadCSS(path) { document.write(``); }
不过这样需要注意:
String.replace() 只替换一次?
//使用方法一 out_date.replace('被替换的','用于替换的'); //使用方法二:正则 out_date.replace(/正则/,'用于替换的'); //以上都只能替换一次 //要想全部替换,必须使用正则模式,且使用修正符 g 开启全局匹配 out_date.replace(/正则/g,'用于替换的');
https 页面 加载 http js 问题
在 https 里面 加载 http 的 JS ,由于浏览器安全策略会被拦截。
有的浏览器不会拦截,但是 chrome 会。
JS 在网页中的加载、执行时机
总结:如果引入 js 不会改变 dom 结构(没有 document.write()),就可以用 defer 属性。
注意:延迟脚本并不一定会按照顺序执行,也不一定会在 DOMContentLoaded 事件触发前执行。
动态加载 CSS
function loadCss(url) { const head = document.getElementsByTagName('head')[0]; const link = document.createElement('link'); link.type = 'text/css'; link.rel = 'stylesheet'; link.href = url; head.appendChild(link); }
动态加载 JS
原理:创建 script 标签
function loadJS(url, callback) { var script = document.createElement("script"), fn = callback || function () {}; script.type = "text/javascript"; if (script.readyState) { script.onreadystatechange = function () { if (script.readyState == "loaded" || script.readyState == "complete") { script.onreadystatechange = null; fn() } } } else { script.onload = function () { fn() } } script.src = url; document.getElementsByTagName("head")[0].appendChild(script) }
Promise
- reject 会抛出异常(异常了自然终止了 then 任务链)
- then(f1,f2) 如果定义了 f2 ,若 reject 就执行 f2 ,而不会被 catch 到
序列化/反序列化
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符 var obj = JSON.parse(data); //由JSON字符串转换为JSON对象
注意:只能序列化对象的属性,方法不行!!
$(function(){}) 和 onload的区别
$(function(){}) jQuery文档就绪 是所有dom节点加载完成之后,才去执行的。
onload是所有dom、包括图片加载完成之后才去执行的。