斌の顶级理解

ES6

解构赋值+重命名

1
2
3
4

let obj = {a:{b:1}}
const {a} = obj; //传统解构赋值
const {a:{{b}} = obj;//连续解构赋值
const {a:{b:value}} = obj;//连续解构赋值+重命名

ES2017(ES8)

Object.values()

一、vue2.x中使用postcss

安装

1

npm i postcss-plugin-px2rem -D

vue.config.js配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

module.exports = {
	css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-plugin-px2rem")({
            rootValue: 32, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
            //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
            // propBlackList: [], //黑名单
            exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            // selectorBlackList: [], //要忽略并保留为px的选择器
            // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
            // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
            mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
            minPixelValue: 3, //设置要替换的最小像素值(3px会被转rem)。 默认 0
          }),
        ],
      },
    },
  },
  devServer: {

  },
  ...
}

一、使用vite快速创建脚手架

1.使用yarn运行安装命令

1
2

#yarn命令安装
yarn create @vitejs/app vue3_ts_vite_pinia

2.选择vue vue-ts 完成安装

在做Vue管理系统的时候，都会遇到的一个需求：每个用户的权限是不一样的，那么他可以访问的页面(路由)，可以操作的菜单选项是不一样的，如果由后端控制，我们前端需要去实现动态路由，动态渲染侧边菜单栏。

实现动态路由api

1
2

router.addRoute() //应用程序已经运行的时候添加路由
router.removeRoute() // 应用程序已经运行的时候删除路由

定义共用的页面路由(无论哪个用户都会有的)

如无论什么用户都可访问登录页login，错误页面404。

前言

这几年后端的微服务是比较火爆，我们公司目前只要是新项目，基本上都是基于微服务去架构的，那么微前端是什么呢？

微前端是借鉴了微服务的架构理念，核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用融合为一个完整的应用，或者将原本运行已久、没有关联的几个应用融合为一个应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活

为什么不用iframe

以前我们为了把几个独立运行的小型应用合并成一个应用都是通过iframe的方式去实现的，如果不考虑体验问题，iframe 几乎是最完美的微前端解决方案了。

1.严格模式

• 使用严格模式，可以在函数内部进行较为严格的全局和局部的错误条件检查
• 严格模式的编译指示，”use strict”
• 创建全局变量，未声明变量，非严格模式下为创建全局变量；严格模式下为抛出ReferenceError
• 对变量调用delete操作符，删除变量，非严格模式下为静默失败；严格模式下为抛出ReferenceError
• 操作对象情况下：a，只读属性赋值会抛出TypeError；b，对不可配置的属性使用delete操作符会抛出TypeError；c，为不可扩展的对象添加属性会抛出TypeError。
• 重名属性情况：a，非严格模式下没有错误，以第二个属性为准；b，严格模式下会抛出语法错误。
• 函数参数必须唯一，重名参数，在非严格模式下没有错误，只能访问第二个参数；严格模式下，会抛出错误。

Day.js

Day.js是一个轻量化的JavaScript库，文件大小仅有2KB左右，且浏览器的兼容性好，可以为浏览器解析、验证、操作时间和日期。

1

$ npm install dayjs

Flv.js

Flv.js是由 bilibili 网站开源的HTML5 视频中播放 FLV 格式视频的 JavaScript 库。flv.js 实现了在 HTML5 上播放 FLV 格式视频。由于flash性能安全和可靠性的问题是长期以来深受诟病，Flv.js可以利用html5的video标签将http-flv直播流实时播放的一个js版的播放器来代替flash。

事件委托

事件委托是指借用 事件冒泡 或者 事件捕获 机制，如果我们有许多以类似方式处理的元素，那么就不必为每个元素都分配一个事件处理程序 —— 而是将单个处理程序放在它们的共同祖先上。

举个通俗的例子：比如一个宿舍的同学同时快递到了，一种方法就是他们一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一 一分发给每个宿舍同学；
在这里，取快递就是一个事件，每个同学指的是需要响应事件的 DOM 元素，而出去统一领取快递的宿舍长就是代理的元素，所以真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。

一个事件触发后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段。
（1）捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”（capture phase），捕获阶段不会响应任何事件；
（2）目标阶段：在目标节点上触发，称为“目标阶段”
（3）冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层。

vue.draggable.next是一款Vue3支持拖放的插件，并且拖放完后会与数据自动同步

1
2

// github官方地址
https://github.com/SortableJS/vue.draggable.next

特点

• 基于 Sortable.js 封装
• 完全支持PC端和移动端
• 支持不同列表之间的拖放
• 没有 jQuery 依赖
• 列表变化和数据同步
• 兼容 Vue.js 3.0
• 支持取消动作
• 各种监听事件提供

前言

对于面试的大部分前端开发者来说，对浏览器的了解也算是一知半解，因为我们一开始前端觉得，我们开发中通常使用浏览器来显示和调试页面用的，不会涉入到太过的相关浏览器工作原理知识。

这你就大错特错了，虽然浏览器默默的为我们工作，但是有关浏览器的工作原理不但在你就业前端面试中属于重中之重，也是在前端优化中占有很大比重。作为一个前端开发如果不了解浏览器的工作原理，只能永远停留在前端“切图仔”水平。

学习浏览器工作原理是为了能够运用到实际项目中，比如前端的性能优化以及错误排查，都会涉及到浏览器相关的知识，所以掌握浏览器的工作原理是必不可缺的，相信你学完之后，能够对你的个人能力和见识会有很大的提升。

浏览器涉及到的知识点非常多而且非常重要，文章中可能其中有不足和错误的地方，也欢迎各位指出！