zhangjun620/font-end-tips

font-end the resaon of Tech change/ or some tips/in issue

Font-end-tips

介绍

Font-end / some tips / in issues
1.平时写代码会遇到一些细节上的坑，或者一些可以拿来深入研究的东西
2.一些前端上的知识点总结，以及博文
3.写在issues里。
4.学习时总是不知道这个知识点有什么用，可以结合业务遇到的场景来解释

文章目录

HTTP

从输入URL到按下回车后后浏览器加载都发生了什么？

js高级程序设计4笔记

js忍者秘籍2笔记

font-end-tips's Issues

JS基础知识 —— 值的比较

首先，js中的值与值之间的比较规则还是比较多的 ==下有一套规矩，===下也有，

1. 不同的数据类型会返回 false 而JS中数据类型 到底有几种JavaScript基础教程说是8种，而MDN上有9种，回去再看看js高程4写了几种
   Number、String、Boolean、null、undefined、Object、symbol、bigint、function(mdn)

==

(不相等 != 严格不相等 !==)
在==中

相同类型

String类型的大小比较 是用 “字典” 或 “词典” 顺序进行判定(非真正的字典顺序，而是 Unicode 编码顺序)，字符串是按字符逐个比较的。
从首位字符开始比较，大于或小于结束比较

不同类型

==中，不同数据类型比较时，会进行转换，首先会转换成 数字 在判定大小
(在==中。null 只与 undefined 互等，js的特殊规则一样)
当使用数学式或> < >= <=时。null与undefined会转化为数字，null为0，undefined为NaN
== 比较 和 普通的比较符> < >= <=的代码逻辑是相互独立的。==中undefined和null不会进行任何类型转换，所以说null与undefined它们互等外，不会等于其他的值

undefined
它不该被与其他值进行比较
与数字比是NaN，false，==里也还是false，因为undefined只与null相等

==是存在问题的

1. 它不能区分出0 和false，也不能区分空字符串和false(因为都转换成数字0了)

严格相等 === 在进行比较时不会做任何的类型转换 而==会执行类型转换

1. 不同数据类型直接返回false

参考 ：https://zh.javascript.info/comparison

NodeJS —— 基础知识

V8引擎，V8用C++写成。
它将JavaScript源代码编译成本地机器码而不是解释执行。
npm是Node.js附带的包管理器。
webpack则是打包工具。现在的开发模式 如果技术栈是用vue，那么 vue-cli 会自动构建脚手架，在上面开发就是了，底层的webpack会自动配置好

JS基础知识 —— 循环 for 、switch、for-in、for-of

循环是干嘛用的？
重复运行同一段代码

如果 循环体只有一条语句，可以省略大括号

1. do\while 循环体至少执行一次，在检查条件，为真时重复执行循环体

2. for (begin ; condition; step) 其中step其实是在每次循环体迭代后执行， (如果condition成立 -> 运行body循环体-> 然后运行step)

3. 内联变量声明 这里的知识点已经包含块级作用域了，也是面试常问的，以前使用var来创建begin，全局可以访问到，这个变量污染了全局作用域 ，用let创建块级作用域，for循环结束后销毁。如果是在循环体外创建的变量，那么是可以访问的

4. continue 和 break 是不能与三元运算符出现的，不能写在右边，会报错

CSS零碎知识点

CSS

1. 自适应和响应式的区别

   • 自适应是无论放大与缩小，都保持原来的排版
   • 响应式是根据网页大小来改变自身布局

2. 多个css可以先用link ，在那个link的里面用@import来导入各个css，因为浏览器会在最后加载导入的，先加载link

   • 不过这是很久以前因为网速慢而造成的原因，所以现在可以无视，现在可以用link包住import

从输入URL到按下回车后后浏览器加载都发生了什么？

网上搜了很多文章，大致的自己总结下。
为了方便理解，可以这么想：当你在浏览器输入 www.baidu.com 时发生了什么 ？
如果从网上搜，一般都会给你个简单的步骤

1.DNS 解析:将域名解析成 IP 地址
2.TCP 连接：TCP 三次握手
3.发送 HTTP 请求
4.服务器处理请求并返回 HTTP 报文
5.浏览器解析渲染页面
6.断开连接：TCP 四次挥手

什么是DNS？什么是域名？ 什么是IP地址？

DNS是域名系统 Domain Name System 互联网的一项服务。干什么的，用来将域名和IP地址相互映射的分布式数据库。
域名是由一串用点分隔的字符组成的互联网上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位。域名可以说是一个IP地址的代称。
IP地址是当设备连接网络，设备将被分配一个IP地址，用作标识。通过IP地址，设备间可以互相通讯，如果没有IP地址，我们将无法知道哪个设备是发送方，无法知道哪个是接收方
——来自WIKI

啥意思？
这里www.baidu.com就是域名，当你输入后按下回车，那么浏览器会自动去寻找对应的IP地址。而DNS就像打电话的Siri，可以直接用称呼baidu.com呼叫来代替电话号码（IP地址），DNS在我们直接调用网站名后也会转换为便于机器识别的IP地址。

1.DNS怎么将域名解析成IP地址？

DNS查询有两种方式：递归和迭代。DNS客户端设置使用的DNS服务器一般都是递归服务器，它负责全权处理客户端的DNS查询请求，直到返回最终结果。而DNS服务器之间一般采用迭代查询方式。
首先会从缓存中找
首先浏览器会有一定频率地去缓存DNS的记录。
如果浏览器缓存中找不到，会去操作系统中查找。
路由器中也会有DNS缓存。
ISP互联网服务供应商，ISP 有专门的 DNS 服务器应对 DNS 查询请求。
待补充

2.TCP三次握手
获得服务器IP地址后，接下来就是与服务器建立连接了。
但建立连接有三个过程，所以叫三次握手。为什么要有这个过程

为了对每次发送的数据量进行跟踪与协商，确保数据段的发送和接收同步，根据所接收到的数据量而确认数据发送、接收完毕后何时撤消联系，并建立虚连接
1.主机向服务器发送一个建立连接的请求 （你好）
2.服务器接到请求后发送同意连接的信号 （你好，很高兴认识你）
3.主机接到统一连接的信号，返回已经知道了发送同意连接的信号。 （我也很高兴认识你）
接下来就开始传递数据

3.发送HTTP请求
浏览器会根据 URL 内容生成 HTTP 请求，请求中包含请求文件的位置、请求文件的方式等等，（这里可以分支出请求是什么样的，还有请求的方式，例如GET / POST 一共8种）
服务器接到请求后，会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件；

4.服务器处理请求并返回 HTTP 报文
什么是服务器？什么是报文？

5.浏览器解析渲染页面
这里应该是做前端的重点关注步骤
一般为5个步骤

根据 HTML 解析出 DOM 树
根据 CSS 解析生成 CSS 规则树
结合 DOM 树和 CSS 规则树，生成渲染树
根据渲染树计算每一个节点的信息
根据计算好的信息绘制页面
首先，DOM树解析是深度优先遍历过程，探索中对所有的DOM节点知根知底，先构建当前节点所有子节点，再到下一节点（知识点：深度优先遍历和广度优先遍历）

在遇到<script>标签时

立即执行 <script src="a.js"> <script src="b.js">
顺序：保证先后顺序。解析：HTML 解析器遇到它们时，将阻塞（取停止解析），待脚本下载完成并执行后，继续解析标签之后的文档。
也可以在script标签上写上标识符来改变加载顺序

css规则
在解析css时候js会暂停到css解析好，
而且DOM树不会在css还没解析好时构建。
所以，css的大小可以一定程度决定网页加载速度

接下来是布局，浏览器采用流式布局

回流：当布局完成后，一些属性或者操作会导致某个元素的尺寸发生变化的话，那就要倒回去重新渲染
重绘：某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的重绘。

回流必将引起重绘，重绘不一定会引起回流。

6.断开连接：TCP 四次挥手
当数据传输完毕后，需要断开TCP连接，这时候就需要四次挥手了
由主机向服务器发起 第一次 （拜拜）
服务器接收到后返回确认接收消息 第二次（好的）
服务器向主机发送断开通知 第三次（那我也拜拜了）
主机接收到断开通知后断开，并返回一个断开信号 第四次 （ok）服务器收到后断开。

自此，baidu加载出来了，短短的时间这么多过程，每个细节还能再细分，果然计算机世界从0到1真的很有趣，不愧是人类最强发明。以后还要继续玩这些知识

待补充：从ip地址直接访问、端口号、网站备案。TCP。第四点，

文章参考
从键盘说起的深入级
从输入 URL 到页面加载完成的过程中都发生了什么
经典面试题：从 URL 输入到页面展现到底发生什么？

文章完成于2020/8/6

PC端用Vue-element-template搭建的后台管理系统

刚接触后台管理系统，看了一天代码摸清了点头绪，Vue与element的文档还是要多看啊。这两年必须赶上去，把前3年落下的补上

1. template 比起已经搭建好的 admin 少了许多功能，其中就有动态权限认证

JS 基础知识 —— 错误处理

try catch

1. 首先代码必须可执行，要是语法有错，trycatch是不会正常工作的
   （try..catch 只能处理有效代码中出现的错误。这类错误被称为“运行时的错误（runtime errors）”，有时被称为“异常（exceptions）”）

2. try catch是同步的，也就是说try放入settimeout等异步执行函数，不会捕获，因为执行该函数时，已经跳出trycatch了

3. catch(error) 此 error在不同浏览器种也有不同的属性，但是都有message属性，需要注意
   error.name error.message error.stack

4. finally 如果它存在，它在所有情况下都会被执行：
   try 之后，如果没有 error，
   catch 之后，如果没有 error。
   在function 的 return中 假如有 finally ，即使try或catch return， finally也会运行，也会return finally的return

5. window.onerror 全局发生未捕获的错误时运行

微信小程序开发入门与实践 笔记

程序员自学的思路，由点及面，有具体到抽象，在工作中遇到了问题 ，想办法解决问题，查阅资料学习这个问题的相关知识点，最后把这些知识点总结，归纳，形成自己的知识体系，这是一个通用的学习“套路”。 直面未知的勇气。

HTTP —— 基本知识

客户端 通过发送请求获取服务器资源的 Web 浏览器或者win 的exe 都是

服务端 服务器资源

400 表明了客户端是错误的原因所在
400 语法错误
401 需要带有通过http基本验证的信息
403 请求资源被服务器拒绝了
404 无法找到请求的资源，除此之外，也可以在服务器端拒绝请求且不想说明理由时使用。

500 表明了服务器本身发生了错误
500 执行请求时发生的错误
502 网关错误

vue-admin-element后台管理系统登录模块分析

登录的功能在大部分页面都是需要的，而我对登录这个模块的理解真的很不到位，写也写不出来，只能看看大佬写的登录模块学习学习，改为自己项目中用。

一个项目大致就是写一个后台管理系统，所以我就在github上搜了搜后台管理系统，没想到已经有人做过了，要是没这需求，估计很久之后我才能接触这个。
阅读之前 你至少要有vue-admin-element使用经验，最好连作者写的使用文档也过几遍，看不懂的地方可以网上搜索解析
熟悉了这个后台的使用后，需要添加一些功能，就比如说是登录，因为下载下来的是mock的数据而不是真实的与后端对接的数据，所以有些数据与方法需要自己去改，但是代码看不懂，只能去网上搜分析的文章，看了好几篇，几个页面来回翻看，才稍微弄明白点到底这个登录是个什么流程

首先有关登录的文件view/login/index、store/modules/user、api/user、until/requerst
login里的index就是登录的界面了，其中最重要的是
handleLogin() {}方法 这个函数中调用 引入的 validate方法(判断格式)

handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
console.log('valid',valid,this.loginForm)
this.loading = true
this.$store.dispatch('user/login', this.loginForm)
.then(() => {
this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
this.loading = false
})
.catch(() => {
this.loading = false
})
}

this.$store.dispatch('user/login', this.loginForm) 中 user/login就是store/modules/user文件 里login方法（因为作者把数据都存在了vuex里，所以这里是vuex命名空间的写法），this.loginform是账号和密码 可以控制台打印出来看下。
在login中（这里里面一层的login是api/user里的login方法）

login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
login({ username: username.trim(), password: password }).then(response => {
console.log('65411',response)
// 解构赋值 这里的属性得有，不然undefined
const { data } = response
commit('SET_TOKEN', data.token)
setToken(data.token)
resolve()
}).catch(error => {
console.log('456')
reject(error)
})
})
},

解构获得用户名和密码，放入token中 这样就能进入handlelogin中 this.$store.dispatch('user/login', this.loginForm) .then()
刚开始改的时候发现总是进入catch而不是then后来通过一步一步debugger加consolelog找出是login里解构没获取到，因为服务端和作者的返回属性名不一样。
进入后运行push路由到默认页或者是url上带的页面。
不过在此之前，作者写了个全局的路由拦截，为的是权限验证的问题，因为后台路由根据登录的用户权限不同而显示不同侧边栏。
在getInfo中，因为后端返回的roles不是数组，但是会有权限判断key，所以转成数组就行(看你需求)
路由页在最外层permission.js文件中

DOM —— 基础 扩展

环境 规格

JS最初是为了Web浏览器创建，现在也有很多别的平台(主机环境)可以运行JS，而这些平台也提供了不同功能。主机环境提供了自己的对象和语言核心以外的函数，如Web浏览器提供控制网页的方法，NodeJs提供服务器端功能。

浏览器中

BOM(浏览器对象模型) DOM(文档对象模型) 原生JS 存在于window这个根对象中。

BOM：表示由浏览器（主机环境）提供的用于处理文档（document）之外的所有内容的其他对象，如window.location或window.navigator
(是HTML语言规范的一部分 ，html不止有标签，特性，还涵盖了一堆对象、方法和浏览器特定的 DOM 扩展)
DOM：将所有页面内容表示为可以修改的对象。document是主要入口点 如document.getElementId或document.body.style.color
（DOM不仅仅用于浏览器，下载的html对其处理的服务器端script也可以）
window 首先是 JS 的全局对象，它还代表了浏览器窗口，并提供控制它的方法

小程序的一些知识点和坑

写的小程序项目，遇到了导航栏自定义的问题，在最外面的app.json的window中设置

"navigationStyle": "custom"

这样是全局都会变成自定义，我只想某些页面设置,那么只需要在页面自己的window中写就行了吧，但是试了一下不行，搜来搜去，最后发现是单页面中设置这个不需要写window，直接把这行代码写进去就行了。
同时我也去文档看了下确实有

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

完整配置项说明请参考小程序页面配置

例如：

{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}

只不过没有用大白话说罢了.
还有需要注意的是，用了自定义后，页面会塌陷上去，同时每个机型的导航栏高度不一样的，我这里是设置了vh而不是rpx，能保证每个机型的间距是一样的

《高效前端 WEB高效编程优化与实践》笔记

1.什么是伪元素

伪元素是一个元素的子元素，并且是inline的行内元素，before，after；
因为叫伪元素，所以js无法获取到这个元素。可以用伪元素制造视觉上的效果，但是不会增加js查DOM的负担，它对js是透明的。
Window.getComputedStyle()可以用第二个参数来获得伪元素。
它也不是一个标签。

JS知识点

分为 自我学习时记录 与 工作时学习补充 study or work

JS基础知识 —— 数据类型

JS 中 到底有几个数据类型
JavaScript基础教程中说 有 8 个数据类型 7种原始 一种引用
MDN说 有 9 种数据类型 6种原始类型 这里6种没有算null而是算了bigint
JS高程4说 6种原始数据类型，还有一种复杂的Object类型，没有算bigint，null算进了原始

JS基础教程把 typeof ...==Function 作为了特殊对待
MDN 说 function是非数据结构，也做了特殊对待

？？？

JS基础知识 —— 事件

DOM事件流 捕获-到达-冒泡 ，现代浏览器都支持，除了IE8及一下（只支持冒泡）
鼠标事件、键盘事件、表单事件、document事件、css事件
可以绑定 onclick 事件，也可以通过id.onlick来绑定事件

CSS世界

1. 关于盒子，按照display值得不同，为block的盒子实际上由外在的”块级盒子“和内在的“块级容器盒子”组成。inline-block则由外在的“内联盒子”和外在的“块级容器盒子组成”。inline的元素则内外均是“内敛盒子”。

既然有两个盒子，那么给它设的宽高是作用于哪个盒子上面呢？ 在内在盒子里。那么外在的盒子应该是为了区分内联外联而设置的，本身没有属性值的加成。