• 欢迎来到我的博客
  • [email protected]

JS 踩坑记录 + 小本本

学习笔记 tianlan 1年前 (2020-06-06) 737次浏览 0个评论 扫描二维码
文章目录[隐藏]

不要使用单行注释

最好都使用多行注释,如果使用单行注释,那么JS代码被压缩后会出现问题。

立即执行函数原理

将函数定义变成一个表达式

//推荐方法
(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(``);
}

不过这样需要注意:

JS 踩坑记录 + 小本本

String.replace() 只替换一次?

//使用方法一
out_date.replace('被替换的','用于替换的');
//使用方法二:正则
out_date.replace(/正则/,'用于替换的');

//以上都只能替换一次
//要想全部替换,必须使用正则模式,且使用修正符 g 开启全局匹配
out_date.replace(/正则/g,'用于替换的');

https 页面 加载 http js 问题

在 https 里面 加载 http 的 JS ,由于浏览器安全策略会被拦截。

有的浏览器不会拦截,但是 chrome 会。

JS 踩坑记录 + 小本本

JS 在网页中的加载、执行时机

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、包括图片加载完成之后才去执行的。


天蓝, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:JS 踩坑记录 + 小本本
喜欢 (1)
[[email protected]]
分享 (0)

您必须 登录 才能发表评论!