BOM基础（JS执行机制、常见对象）

一、执行机制

1. JS是单线程语言，同一时间只能执行一件事

• JS语言使命：处理页面与用户交互，以及操作DOM而诞生
• 对某个DOM元素进行操作，不能同时进行，因该先进添加再删除

2. 同步任务

按照代码书写顺序进行执行；当中出现定时器的延时也是如此

1. 缺点 

•  所有任务需要排队，前一个任务结束才会执行下一个任务。
• 导致JS执行时间过长，会造成也买你的渲染不连贯，加载阻塞感觉

3. 异步任务

为了解决同步问题，利用多核CPU计算能力；允许JavaScript脚本创建多个线程 

 

4.同步异步的不同

1. 同步任务在主线任务上执行，形成任务栈 （按照顺序执行）

2. 异步任务相关回调函数添加在任务队列中（也称消息对列） 

• 异步任务通过回调函数实现
• 一般异步任务还存在以下三种
  • 普通事件：click、resize
  • 资源加载：load、error
  • 定时器：setInterval、setTimeout

 

 

 

5. 同步异步执行过程

1. 执行完执行栈：查看任务队列

2. 如果有要执行的任务（回调函数）

3. 把任务排列到同步任务的执行栈最后

 

 6. 多个异步任务执行

事件循环：同步任务的执行栈重复查看异步任务队列中是否存在需要执行的任务

7. 多个异步任务执行的处理案例

• onclick回调函数提交给异步进程处理；只有点击了才会把回调函数添加到异步任务队列里

 

• 定时器回调函数提交给异步进程处理；只有时间到了才会把回调函数写到异步任务队列里

​​​​​​​​​​​​​​

 

 二、常见对象

1. location

• 获取或者设置窗体的URL,用于解析URL,因为这个属性返回的是一个对象，所以这个属性也成为location对象
• 统一资源定位符URL是互联网标准资源的地址。互联网上的每个文件都有一个唯一的URL它包含的信息指出文件的位置以及浏览器应该怎么处理它

 

•  url语法格式

protocol : // host[:port] / path / [ ?query ]#fragment

• location对象的属性 

• location对象的方法 

---

 

 2. location对象属性使用（href）

 console.log(window.location.href); //直接输出当前网页的url

•  配合定时器制作定时跳转：href

     btn.addEventListener("click", function () {
        // 先定义好计时器
        var timer = 5;
        // 先调用封装函数：防止卡顿
        one();
        var two = setInterval(one, 1000);
        function one() {
          // 判断分支根据倒计时的值进行跳转
          if (timer == 0) {
            location.href = "http://www.baidu.com";
          } else {
            div.innerHTML = "您将在" + timer + "秒后跳转";
            // 计时器：操作表达式
            timer--;
          }
        }
      });

1. 页面分析：点击按钮出现倒计时显示：当页面倒计时时间结束之后直接跳转到指定页面 
2. 代码解析：

• 获取到元素
• 设置点击事件
  • 定义计时器
  • 提前调用以防卡顿效果出现
• 注册定时器（回调函数，延迟时间）
• 封装函数：当前时归零跳转，否则显示内容倒计时效果

3. location对象属性使用（search）

 console.log(location.search);

• 获取页面传送数据

   //注册页面
    

      登陆页面 用户名：
      
    

    //获取传送数据
    

1. 页面分析：表单页传送数据直接跳转到接收页 ，接收页显示填写的表单内容
2. 代码解析：

• 布置静态页面：form的action指向到接收页；给当前填写input取名字
• 获取代码页：直接获取location对象的search
• 给获取到的search属性利用字符串截取substr（1）截取掉？
• 把字符串利用内置split（‘=’）转换为数组
• 最后把数组的第一个下标给div加入内容

4.location对象方法使用

•  记录历史的跳转页面：assign()

location.assign("http://www.baidu.com");
//跳转到指定页面可以后退

• 不记录历史不可后退：replace()

location.replace("http://www.baidu.com");
//跳转到指定页面不可以后退

• 重新加载：相当于刷新

location.reload();
//刷新页面

5. navigator对象 

navigator.useAgent.match返回客户机发送服务的use-agen头部值

• 返回用户的计算机的系统
• 浏览器的版本号等

 作用：判断用户的设备打开移动或者pc

 

6. history对象的方法 

window对象提供了一个history对象，与历史记录进行交互，该对象包含用户（在浏览器窗口中访问过的URL）

 

 7. 案例-页面跳转记录历史的前进后退

绑定好链接跳转的地址：先执行链接打开，然后即可以实现前进后退

• 主页前进

    
    点击去往列表页
    前进
    
  

• 列表页后退

 
    后退
    后退