美文网首页
js高级部分

js高级部分

作者: 涅槃no重生 | 来源:发表于2019-05-15 22:23 被阅读0次

    js高级部分

    BOM部分

    DOM事件

    Promise和async/awiat

    防抖与节流

    BOM

    浏览器的内核

    IE: trident内核

    Firefox:gecko内核

    Safari:webkit内核

    Opera:Blink内核

    Chrome:webkit

    DOM事件

    DOM1也是存在,只是没有涉及到事件,DOM3比DOM2多了键盘和鼠标一些事件

    DOM的事件模型: 捕获----> 冒泡

    DOM的事件流(三个阶段):捕获阶段---->目标阶段 -----> 冒泡阶段

    DOM事件捕获的具体流程:

    window---document---html---body---.... ---目标元素

    DOM事件的Event对象的常见应用:

    event.preventDefault() : 阻止默认事件

    event.stopPropagation(): 阻止冒泡

    event.stopImmediatePropagation(): 除了该事件的冒泡行为被阻止之外(event.stopPropagation方法的作用),该元素绑定的后序相同类型事件的监听函数的执行也将被阻止.

    event.target: 返回触发事件的元素

    event.currentTarget: 返回绑定事件的元素

    DOM的自定义事件:

    ```js var eve = new Event('eventName') dom.addEventListener('eventName',function(){ }) //注册事件 dom.dispatchEvent(eve); // 触发事件,

    这个事件不能添加参数,想要添加参数,得自定义 CustomEvent事件 // 添加一个适当的事件监听器 obj.addEventListener("cat", function(e) { process(e.detail) }) // 创建并分发事件 var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}}) obj.dispatchEvent(event)

    ## Promise 和async/awiat

    1. Promise的作用,promise如何进行多个数据的请求

    2. **`Promise.all([p1, p2, p3]).then()`**

    3. **`Promise.race([p1, p2, p3])`** 方法返回一个 promise,一旦迭代器中的某个promise解决或拒绝,返回的 promise就会解决或拒绝

      ```js

      var p3 = new Promise(function(resolve, reject) {

          setTimeout(resolve, 100, "three");

      });

      var p4 = new Promise(function(resolve, reject) {

          setTimeout(reject, 500, "four");

      });

      Promise.race([p3, p4]).then(function(value) {

        console.log(value); // "three"

        // p3 更快,所以它完成了             

      }, function(reason) {

        // 未被调用

      });

    4.async/awiat的错误处理

    async function f() {

      //  throw new Error('try again');

      await Promise.reject('出错了');

      await Promise.resolve('hello world'); // 不会执行

    }

    async function b() {

        try {

          await f();

        } catch(err) {

        console.log(err);

          b();

        }

    }

    b();

    防抖与节流

    防抖(debounce):

    ​ 就是在一定的时间内事件只发生一次,比如你点击button按钮,1秒内任你单身30年手速点击无数次,他也还是只触发一次。

    <body>

    <button id="debounce">防抖</button>

    <script>

    window.onload = function () {

      let obtn = document.getElementById('debounce'); //获取按钮

      obtn.addEventListener('click',debounce,false); //监听绑定事件

    }

    //执行函数

    let timer

    function debounce() {

        clearTimeout(timer);

        timer = setTimeout(function(){

            console.log('防抖,防抖,防抖');

      },300)

    }

    </script>

    </body>

    使用场景:当你在页面中使用onkeyUp监听用户在input框中的输入,如果用户按住一个6不放,那监听事件岂不是一直被触发,这样就浪费了一部分性能了,那么我们在一定事件内监听,也就是说我过了一秒再来看看你输入了多少个6

    节流(throttle):

    节流就是在一定时间间隔内触发一次事件

    面试题目:

    JavaScript代码中的‘use strict’是什么意思

    说说你对amd和commonjs的理解

    Commonjs是前端模块化的一种规范,同步加载模块,主要使用于服务器端模块化开发,目前使用该规范的有nodejs

    AMD:是由commonjs衍生出来的用在浏览器端的异步模块加载规范,实现该规范的技术有require.js

    CMD:同步模块加载规范,实现该规范的技术有sea.js

    相关文章

      网友评论

          本文标题:js高级部分

          本文链接:https://www.haomeiwen.com/subject/jlrvaqtx.html