web开发基础-js,浏览器相关_js怎么定义浏览器-CSDN博客

本文链接：https://blog.csdn.net/qq_43185341/article/details/128881467

浏览器的组成

渲染引擎：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面,也就是用来解释HTML和CSS,俗称内核。（由于JS引擎越来越独立，内核就只倾向于指渲染引擎）
JS引擎：也叫JS解释器，是解析执行js，获取网页的动态效果，用来读取网页中的JS代码，并对其进行处理后运行例：chrome:V8引擎

浏览器名称	内核	JS引擎
Chrome	Blink（Blink是Webkit的分支）	V8
Firefox	Gecko	SpiderMonkey
Safari	Webkit	JavaScriptCore
Edge	Blink
IE	Trident（俗称IE内核）
Opera	Blink

什么是脚本语言

在这里插入图片描述

不需要编译，运行过程中由js解释器(js引擎)逐行来解释并执行

JS组成

JavaScript共由三部分组成：分别是ECMAScript、DOM和BOM。

1.ECMAScript：js的核心语法

2.DOM：文档对象模型

什么是DOM?
- 文档对象模型（Document Object Model,简称DOM）是WSC组织推荐的可扩展标记语言（HTML或者XML）的标准接口
- W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式
- DOM在我们实际开发中主要用来操作元素
什么是DOM树？
DOM树由文档，元素和节点组成。
- 文档：一个页面就是一个文档，DOM中使用document表示
- 元素：页面的所有标签都是元素，DOM中使用element表示
- 节点：网页中的所有内容都是节点（标签、属性、文本、注释），DOM中使用node表示

注意：DOM把以上所有元素都看做一个对象

3.BOM：浏览器对象模型

BOM（Browser Object Model）即浏览器对象模型，可以对浏览器窗口进行访问和操作，其核心对象是window
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性
与DOM不同，BOM只是JS的一个部分，没有任何相关标准
BOM的构成？

注意： window对象是浏览器的顶级对象，它具有双重角色，它是JS访问浏览器窗口的一个接口，在调用的时候可以省略window,如alert()、prompt()等。window下的有一个特殊属性window.name, 所以我们给变量命名时尽量是不要使用name

DOM和BOM的区别和联系？

DOM
- 文档对象模型
- DOM是把文档当做一个对象来看待
- DOM的顶级对象是document
- DOM主要学习的是操作页面元素
- DOM是W3C标准规范
BOM
- 浏览器对象模型
- 把浏览器当做一个对象来看待
- BOM的顶级对象时window
- BOM学习的是浏览器窗口交互的一些对象
- BOM是浏览器厂商在各自浏览器上定义，兼容性较差

JS的用途

浏览器平台化（浏览器功能更加丰富）
服务端开发-Node.js
数据库操作（NoSQL）
跨平台桌面程序 - Electron
表单动态校验（密码强度检测）也是js最初产生的目的
跨移动平台（Cordova、PhoneGap、React Native）
控制硬件-物联网（Ruff）
游戏开发（cocos2d-js）
网页特效
等等

JS的三种引入方式

行内式：JS代码定义在标签内部

<input type="button" value="点击我" onclick="alert('hello')">

内部式：JS代码定义在文档内部

  <script>
    // js代码
  </script>

外部式：JS代码定义在外部JS文件中

  <script src="index.js"></script>

注意事项：

尽量将script标签放在html页面最底部（因为浏览器在渲染页面时，由上往下逐行解析，DOM还未渲染完成，先执行性JS代码会引起问题）
引入外部的script标签内不要写代码
尽量使用外部文件（虽然没有硬性规定）
写在外部的文件可以在不同非页面同时引用，正好利用到浏览器的缓存机制

JS中的注释

单行注释 (快捷键：ctrl+/)

    // 单行注释

多行注释（快捷键：shfit+ctrl+/）

    /* 多行注释
    多行注释 */

常用输出语句

模态框

模态框：模态意味着脚本暂时停止运行，页面的交互也会被暂停直到用户关闭对话框为止

alert() 提示框
- 只有一个OK按钮的模态框
confirm() 确认框
- 有ok按钮和cancel按钮的模态框，点击ok返回true,点击cancel返回false
prompt() 输入框
- 用户可以输入信息的模态框
- 获取到的数据默认为string类型
- 如果用户没有输入内容，直接点击确定返回值为空串，点击取消返回null
- 在有默认值的情况下，用户不输入内容直接点击确定，则会返回默认值

        // (3)用户可以输入信息的模态框
        // (3.1)获取到的数据默认为string类型
        // (3.2)如果用户没有输入内容，直接点击确定返回值为空串，点击取消返回null
        // (3.3)在有默认值的情况下，用户不输入内容直接点击确定，则会返回默认值
        // let userAge = prompt('请输入您出生年份', 2000);
        // console.log(typeof userAge); // string
        // console.log(userAge + 1); //20001
        // console.log(parseInt(userAge) + 1); // 2001
        // console.log(userAge == ''); // true 不输入内容直接点击确定
        // console.log(userAge == null); // true 不输入内容直接点击返回
        console.log(userAge); // 2000

script标签

type属性
- 表示代码块脚本语言的内容类型
- 如果这个值为module，则代码会被当成ES6模块，只有这时候，代码中才能出现import和export关键字
src属性
- 指向外部JS文件的URL
async属性
- 不会阻塞文档的加载，为异步加载，不能保证按照顺序来执行脚本
defer属性
- 立即下载脚本，推迟到文档渲染完毕后执行，原则上按照脚本的引入顺序来执行

注意：async属性和defer属性，只适用于外部文件

noscript标签

早期浏览器不支持JS，为了能使浏览器平稳运行，可以使用此标签用于在不支持JS的浏览器显示替代内容
浏览器支持JS,不会渲染此标签的内容，反之则渲染
如今的浏览器已经100%支持JS,如果浏览器被禁用JS,这个标签还是有用的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      document.write("你的浏览器支持JS！");
    </script>
    <noscript><h1>你的浏览器不支持JS</h1></noscript>
  </body>
</html>

web开发模式

1. Web开发模式的分类？

目前主流的Web开发模式有两种，分别是：基于服务端渲染的传统Web开发模式和基于前后端分离的新型Web开发模式

服务端渲染的传统Web开发模式

服务端渲染的概念：服务器发送给客户端的HTML页面，是在服务器通过字符串的拼接，动态生成的。因此，客户端不需要使用Ajax这样的技术额外请求页面的数据。代码示例如下：

优点	缺点
前端耗时少。因为服务器端负责动态生成HTML内容，浏览器只需要直接渲染页面即可。尤其是移动端，更省电。	占用服务器端资源。即服务器端完成HTML页面内容的拼接，如果请求较多，会对服务器造成一定的访问压力。
有利于SEO。因为服务器端响应的是完整的HTML页面内容，所以爬虫更容易爬取获得信息，更有利于SEO.	不利于前后端分离，开发效率低。使用服务器端渲染，则无法进行分工合作，尤其对于前端复杂度高的项目，不利于项目高效开发。

前后端分离的新型Web开发模式

前后端分离的概念：前后端分离的开发模式，依赖于Ajax技术的广泛应用。简而言之，前后端分离的Web开发模式，就是后端只负责提供API接口，前端使用Ajax调用接口的开发模式。

优点	缺点
开发体验好。前端专注于UI页面的开发，后端专注于Api的开发，且前端有更多的选择性。	不利于SEO。因为完整的HTML页面需要在客户端动态拼接完成，所以爬虫对无法爬取页面的有效信息。（解决方案：利用Vue、React等前端框架的SSR(server side render))技术能够很好的解决SEO问题！）
用户体验好。Ajax技术的广泛应用，极大的提高了用户的体验，可以轻松实现页面的局部刷新。
减轻了服务器端的渲染压力。因为页面最终是在每个用户的浏览器中生成的。

2. 如何选择Web开发模式？

不谈业务场景而盲目选择使用何种开发模式都是耍流氓。
- 比如企业级网站，主要功能是展示而没有复杂的交互，并且需要良好的SEO,则这时我们就需要使用服务器端渲染：
- 而类似后台管理项目，交互性比较强，不需要考虑SEO,那么就可以使用前后端分离的开发模式。
另外，具体使用何种开发模式并不是绝对的，为了同时兼顾了首页的渲染速度和前后端分离的开发效率，一些网站采用了首屏服务器端渲染+其他页面前后端分离的开发模式。

接口和接口文档

什么是接口？
使用ajax请求数据时，被请求的URL地址，就叫做数据接口（简称接口）。同时，每个接口必须有请求方式。
如：
- http://www.liulongbin.top:3006/api/getbooks 获取图书列表的接口（GET请求）
- http://www.liulongbin.top:3006/api/addbook 添加图书列表的接口（POST请求）
接口请求的过程