刷题01

最新推荐文章于 2024-04-07 15:15:33 发布

燃情雪

最新推荐文章于 2024-04-07 15:15:33 发布

阅读量306

点赞数

本文链接：https://blog.csdn.net/h1234561234561/article/details/102883711

版权

不足之处
一，http请求头部字段
1）、请求头部一般字段
Accept：浏览器可接受的内容类型
Accept-Chartset：浏览器可接受的字符集【UTF-8、UTF-16、Unicode等】
Accept-Encoding：浏览器可接受压缩编码类型
Accept-Language：浏览器可接受的语言类型
Connection：浏览器与服务器之间的连接类型
Cookie：当前页面设置的Cookie
Host：当前页面的域名（没有协议号的，为了转ip和端口）
Referer：当前页面的url路径

注意：各大浏览器的请求头部不一，上述为平常共有字段

2）、http响应头部字段
Access-Control-Allow-Origin：指定哪些站点可以参与跨站资源共享
Connection：浏览器与服务器之间的连接类型
Content-Length：响应体的字节长度
Content-Type：响应体的文档类型
Server：服务器名称
Refresh：重定向或者新资源创建，比如

<meta http-equiv="refresh" content="5; url=http://example.com/">

二、JQ中的width()、innerWidth()、outerWidth()以及雷同height()区别

width() === width
innerWidth() === width + padding
outerWidth() === width + padding + border
outerWidth(true) === width + padding + border + margin

三、下拉菜单中，用户更改表单元素Select中的值时，只触发onchange事件
注意：
1、针对的是select标签，在下拉改变时，并不触犯别的事件，除了onchange
2、onchange事件只针对<input type="text">, <select>, <textarea>三者标签

四、浏览器加载 CommonJS 模块的原理与实现
简单的说下：虽然npm模块也是由javascript开发的，但是在浏览器中无法直接加载运行，因为不支持 CommonJS 格式。然而加载CommonJS需要四个Node.js的环境变量，如下

module
exports
require
global

五、HTML文档的钩子函数
1、DOMContentLoaded：当初始html文档加载解析后触发，无需等待其样式文件，图片等依赖资源是否加载解析完毕

2、load：当一个资源及其依赖的资源结束加载时触发。从这里可以看到需要等待依赖资源的结束加载。

3、readystatechange：由描述loading状态的readyState属性值的改变触发readystatechange事件。readyState属性值，有三个。

loading：文档仍然在加载
interactive：文档结束加载并且被解析，但是想图片，样式，frame之类的子资源仍在加载
complete：文档和子资源已经结束加载，该状态表明将要触发load事件。

4、beforeunload：在文档即将卸载之前触发。比如：关闭浏览器
注意：alert，confirm，prompt在函数内无效

5、unload：在文档卸载时触发。

  <script>
    document.addEventListener("DOMContentLoaded", function (event) {
      console.log("初始DOM 加载并解析");
    });
    document.addEventListener("load", function (event) {
      console.log("window 所有资源加载完成");
    });

    document.onreadystatechange = function () {
      console.log(document.readyState)
      if (document.readyState === "complete") {
        console.log('初始DOM,加载解析完成')
      }
    }
    document.addEventListener("beforeunload", function (event) {
      console.log('即将关闭')
      event.returnValue = "\o/";
    });
    document.addEventListener('unload', function (event) {
      console.log('即将关闭1');
    });
  </script>

借鉴网址

六、函数提升与变量提升优先级
函数提升高于变量提升优先级，也就是说当存在变量名和函数名同名情况时，在js预处理中会将函数名所指代的函数体替换变量名；当变量名被赋值后，则会替代函数名所指代的函数体。比如：

  <script>
    console.log(a)
    // function a() {
    //   console.log('埋埋')
    // }
    
    // 1、函数提升比变量提升优先级更高
    // 2、当变量被给予赋值，会代替函数同名的函数
    var a = '埋埋'
    function a() {
      console.log('埋埋')
    }

    console.log(a)
    // 埋埋


    // 变相等于
    var a
    function a() {
      console.log('埋埋')
    }
    console.log(a)

    a = '埋埋'
    console.log(a)
  </script>

七、原生js获取元素，当获取数据格式为NodeList和Node的时，选择器的不同
获取数据格式为Node时：document.getElementxxxx(‘selector’)。
比如：document.getElement.ById('idSelector')

获取数据格式为NodeList时：document.getElementsxxx(‘selector’)。【没错，加了s】
比如：document.getElements.ByClassName('classSelector')

八、观察者模式和发布/订阅模式
1、观察者模式
一对多关系，一个观察者对应多个被观察对象。当某个被观察对象发生改变，会被观察者监听，从而通知依赖发生改变的被观察对象的其他被观察者对象。一般作用于数据依赖更新，没有中间件。图示：
在这里插入图片描述
实例（输入框2依赖输入框1；输入框3依赖输入框2）：

// style部分
<style>
  span {
    display: inline-block;
    width: 100px;
  }

  input {
    width: 60vw;
  }
</style>

// html部分
<body>
  <h1>观察者模式（同步）---原生数据绑定</h1>
  <div id='wrap' oninput="change(event)">
    <span>firstInput</span><input data-key="1" type="text" /><br>
    <span>secondInput</span><input data-key="2" type="text" /><br>
    <span>thirdInput</span><input data-key="3" type="text" /><br>
  </div>
</body>

// js部分
<script>
  const inputList = document.getElementsByTagName('input')

  function change(event) {
    switch (event.target.dataset.key) {
      case '1':
        inputList[1].value = event.target.value.concat('follow_first')
        inputList[2].value = inputList[1].value.concat('follow_second')
        break

      case '2':
        inputList[2].value = event.target.value.concat('follow_second')
        break
    }
  }
</script>

2、发布/订阅模式（异步）
在“发布者-订阅者”模式中，称为发布者的消息发送者不会将消息编程为直接发送给称为订阅者的特定接收者。这意味着发布者和订阅者不知道彼此的存在。从而需要中间件将他们相互连接，一般作用于不同功能模块或系统间的通信。视图如下：
在这里插入图片描述
九、cookie的过期时间
1、cookie是什么
cookie是浏览器上储存单纯文本格式的数据容器，大小只有4kb。内部数据是由Web页面或则服务器提供的一段文本信息，在cookie的有效期内，之后的任何将会将这些信息发送给服务器。内部数据一般为用户标志token。

2、cookie的过期时间
若没有设定cookie的有效期，则会一直保存，直到浏览器关闭；
若需要设置有效期，则可以在expires 属性后标明有效时期；

10、事件队列
我们知道js是单线程，只有执行完正在处理的事件才能处理下一个事件。但是对于异步操作，它是怎么处理的呢？

执行栈：在主线程上，所有将要执行的事件。最初始状态为所有同步事件
事件队列：在另外一线程上，所有在等待中状态的异步事件

借言
（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。

（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。

（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

（4）主线程不断重复上面的第三步。

11、哪些事件不支持冒泡
确定不了子元素触发事件也在此刻适用于父元素。
比如：onmouseouter、onmouseleave事件就不触发冒泡

燃情雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
刷题01

不足之处一，http请求头部字段1）、请求头部一般字段Accept：浏览器可接受的内容类型Accept-Chartset：浏览器可接受的字符集【UTF-8、UTF-16、Unicode等】Accept-Encoding：浏览器可接受压缩编码类型Accept-Language：浏览器可接受的语言类型Connection：浏览器与服务器之间的连接类型Cookie：当前页面设置的Cook...
复制链接

扫一扫