JS补充

Posted 2020-08-22 ABO

 JS 由三部分组成：ECMAScript：也叫解释器，充当翻译角色，这是 JS 的核心部分。

 DOM：文档对象模型（Document Object Model）。DOM 赋予了 JS 操作 html 的能力，即 document 操作。

 BOM：浏览器对象模型（Browser Object Model）。BOM 赋予了 JS 操作浏览器的能力，即 window 操作。

   变量的作用域：全局变量和局部变量。全局变量简单说就是在函数外声明的变量，任何地方都可以使用，而局部变量就是在函数内部声明的变量，只能在声明他的函数内部使用。JS 变量的生命期从他们被声明的时候开始，全局变量会在页面被关闭之后删除，局部变量则在函数被运行以后删除。

 这里穿插下 :CSS 基础篇、绝对有你想要

 

JS BOM   window 对象的 Cookie

 (1)、创建和读取cookie  document.cookie 将以字符串的方式返回所有的 cookie，格式： cookie1=value; cookie2=value; cookie3=value;

 (2)、修改cookie 修改 cookie 类似于创建 cookie，新的 cookie 将被添加到 document.cookie 中显示。

 (3)、删除cookie 只需要设置expires 参数为以前的时间即可，也就是设置为 -1

 

 AJAX 

 基本格式实例： 

function ajax(url, fnSucc, fnFaild){
    var oAjax = new XMLHttpRequest();
    oAjax.open(\'GET\', url, true);
    oAjax.send();
    oAjax.onreadystatechange = function(){
        if(oAjax.readyState == 4){
            if(oAjax.status == 200){
                fnSucc(oAjax.responseText);
            }
            else{
                if(fnFaild){
                    fnFaild(oAjax.status);
                }
            }
        }
    };

 

     DOMReady ：脚本在 HTML DOM 加载渲染布局显示完成后才能运行，且要放在 body 部分内容的后面，而 DOMReady 则定义使脚本无论放在哪里都能执行。window.onload 事件是在浏览器绘制完 DOM 节点，再加载完页面上的所有资源后，然后执行脚本。也就是说在文档解析渲染，资源加载完成之前，不让脚本执行。使用 window.onload 对于很多实际的操作（比如DOM操作，事件绑定等）就显得太迟了，比如图片过多，window.onload 却迟迟不能触发，影响用户体验。

jQuery 实现 DOMReady：

<script>
//jQuery 实现
$(document).ready(function (){
    document.getElementById(\'main\').style.color = \'red\';
});
</script>

 JS 实现 DOMReady：用 JS 实现 DOMReady 其实也很简单，可以添加一个监听事件，即 addEventListener，该方法的语法为：document.addEventListener("事件名称", 函数, false);，false 表示在冒泡阶段捕获。再传入DOMContentLoaded 事件，这个事件是从 onload 事件延伸而来的，当一个页面完成加载时，初始化脚本的方法是使用 onload 事件，该方法的缺点是仅在所有资源都完全加载后才被触发，如果页面的图片很多的话，从用户访问到 onload 触发可能需要较长的时间，所以开发人员随后创建了一种自定义事件，DOMReady，他在 DOM 构建之后、资源加载之前就可以被触发，他的表现形式就是 DOMContentLoaded 。jQuery 源码中也是使用该方法完成的。

<script>
function domReady(fn){
    document.addEventListener(\'DOMContentLoaded\', fn, false);
}

domReady(function (){
    document.getElementById(\'main\').style.color = \'red\';
});
</script>