shell 基础 自定义变量 变量名遵循原则 变量是任何字母、数字和下划线组成的字符串，且不能以数字开头 区分字母大小写，例如 Var1 和 var1 是不同的 变量、等号、值中间不能出现任何空格 ​ 变量引用 var1=10 等号前后不能有空格 echo $var1 #!/bin/bash var1=abc echo $var1 位置变量 当一个命令或者脚本执行的是哦户，后面可以跟多个参数，我们使用位置参数变量来表示这些参数 位置参数变量 含义 $n n为数字，$0 代表脚本本身，$1~$9代表1-9个参数，10以上的参数需要大括号包含，如${10} $@ 命令行所有参数，但是每个参数区别对待 $* 命令行所有参数，所有参数视为一个整体 $# 参数的个数 环境变量 简介 linux是一个多租户的操作系统，针对不同的用户都会有一个转悠的运行环境 不同用户的专有环境就是一组默认环境变量的组合 ​ 环境变量的分类 对所有用户生效的环境变量 /ect/profile 对特定用户的生效的环境变量 ~/.bashrc 或者 ~/.bash_profile 练市有效的环境变量 脚本或者命令行使用export ​...

Vue 基本使用 指令、插值 插值、表达式 指令、动态属性 v-html 会有xss风险，会覆盖子组件 ​ computed 和 watch computed 有缓存，data不变则不会重新计算 watch 如何深度监听 watch 监听引用类型，拿不到oldVal watch : { handler (oldVal, val) { console.log('watch info', oldVal, val) }, deep: true } class style 使用动态属性 使用驼峰式写法 ​ 条件渲染 v-if v-else 的用法，可以使用变量，也可以使用 === 表达式 v-if 和 v-show 的区别 v-if 和 v-show 的使用场景 ​ 循环列表的渲染 如何遍历对象——也可以使用 v-for key 的重要性，key不能乱写，如random 或者 index v-for 和 v-if 是不能一起使用的 ​...

HTML和CSS 原型、作用域、异步 DOM事件和Ajax 性能优化 手写各种代码 HTTP协议 ​ HTML 和 CSS 如何理解HTML语义化 让人更容易读懂（增加代码的可读性） 让搜索引擎更容易读懂（SEO） ​ 块状元素 & 内联元素 display:block/table; 有div h1 h2 table ul ol p 等 display:inline/inline-block 有 span img input button等 ​ 盒模型宽度的计算 offsetWidth = （内容宽度 + 内边距 + 边框），无外边距 box-sizing: border-box margin 纵向重叠 相邻元素的margin-top和margin-bottom会发生重叠 空内容的p标签也会发生重叠 margin 负值的问题 margin-top 和 margin-left 负值，元素向上、向左移动 margin-right 负值，右侧元素左移，自身不受影响 margin-bottom 负值，下方元素上移，自身不受影响 ​ BFC 理解与应用 block format context， 块级格式化上下文 一个独立渲染的区域，内部元素的渲染不会影响边界以外的元素 ​...

安装步骤 git clone --depth 1 --single-branch https://github.com/caorushizi/oss-client.git # 进入目录 cd oss-client # 安装依赖 npx cross-env npm_config_electron_mirror="https://mirrors.huaweicloud.com/electron/" npm_config_electron_custom_dir="9.3.1" npm install # 运行 npm start # 打包 npx cross-env npm_config_electron_mirror="https://mirrors.huaweicloud.com/electron/" npm_config_electron_custom_dir="9.3.1" npm run make 软件展示 下载链接 v0.0.3 oss-client-mac-v0.0.6 oss-client-windows-v0.0.6 技术栈 electron electron-forge typescript react

软件下载【暂时仅支持 windows】 【2022.01.08 v1.1.1】 media-downloader-windows-v1.1.1.exe 【2021.04.27 v1.0.3】 media-downloader-windows-v1.0.3.exe 源码地址 https://github.com/caorushizi/m3u8-downloader 更新日志 1.1 更新记录 添加批量编辑 添加收藏列表 全新界面 使用说明 首先选择文件下载路径，配置完成之后再选择执行程序，提供两种选项 mediago: 源码地址github，使用go开发，支持windows和mac N_m3u8DL-CLI: 源码地址github，使用C#开发暂时仅支持windows 其他选项 第一种方式：可以使用浏览器抓包，获取抓包后的m3u8地址，填上视频的名称。 第二种方式：可以使用打开浏览器，再页面地址栏中输入想要观看的视频，届时首页中会出现m3u8链接地址，点击可以带出请求地址、请求标头和视频名称。（推荐） 点击开始下载即可。

1. React 介绍 React 是一个用于构建用户界面的 JavaScript 库，它只负责应用的视图层，帮助开发人员构建快速且交互式的 web 应用程序。 React 使用组件的方式构建用户界面。 2. JSX 语法 在 React 中使用 JSX 语法描述用户界面，它是一种 JavaScript 语法扩展。 在 React 代码执行之前，Babel 会将 JSX 语法转换为标准的 JavaScript API。 JSX 语法就是一种语法糖，让开发人员使用更加舒服的代码构建用户界面。 2.1 在 JSX 中使用表达式 const user = { firstName: 'Harper', lastName: 'Perez' } function formatName(user) { return user.firstName + ' ' + user.lastName; } const element = <h1>Hello, {formatName(user)}!</h1>; JSX 本身其实也是一种表达式，将它赋值给变量，当作参数传入，作为返回值都可以。 function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!...

Virtual DOM 及 Diff 算法 1. JSX 到底是什么 使用 React 就一定会写 JSX，JSX 到底是什么呢？它是一种 JavaScript 语法的扩展，React 使用它来描述用户界面长成什么样子。虽然它看起来非常像 HTML，但它确实是 JavaScript 。在 React 代码执行之前，Babel 会对将 JSX 编译为 React API. <div className="container"> <h3>Hello React</h3> <p>React is great </p> </div> React.createElement( "div", { className: "container" }, React.createElement("h3", null, "Hello React"), React.createElement("p", null, "React is great") ); 从两种语法对比来看，JSX 语法的出现是为了让 React 开发人员编写用户界面代码更加轻松。 Babel REPL 2. DOM 操作问题 在现代 web 应用程序中使用 JavaScript 操作 DOM 是必不可少的，但遗憾的是它比其他大多数 JavaScript 操作要慢的多。 大多数 JavaScript 框架对于 DOM 的更新远远超过其必须进行的更新，从而使得这种缓慢操作变得更糟。...

React 基础回顾 笔记 Virtual DOM & Diff 算法 笔记 github

说说 application/json 和 application/x-www-form-urlencoded 二者之间的区别。 application/x-www-form-urlencoded方式是Jquery的Ajax请求默认方式，这种方式的好处就是浏览器都支持，在请求发送过程中会对数据进行序列化处理，以键值对形式，例如: key1=value1&key2=value2的方式发送到服务器。如果用Jquery，它内部已经进行了处理，如果自己写原生的Ajax请求，就需要自己对数据进行序列化。 application/json，随着json规范的越来越流行，并且浏览器支持程度原来越好，许多开发人员将application/json作为请求content-type，告诉服务器请求的主体内容是json格式的字符串，服务器端会对json字符串进行解析，这种方式的好处就是前端人员不需要关心数据结构的复杂度，只要是标准的json格式就能提交成功，application/json数据格式越来越得到开发人员的青睐。 说一说在前端这块，角色管理你是如何设计的。 创建路由列表和菜单列表（左侧/顶部），两者格式相似，菜单就是多些图标啥的字段 将路由列表分为两部分：登录后才能看的（权限列表）和未登录也能看的（游客列表） 为权限列表里的每个路由添加角色数组字段，里面的角色才能访问此路由 在路由配置文件中添加跳转到新页面前的导航钩子，在里面根据用户登录后返回的角色信息，与权限列表进行比对，计算得出其所能访问的路由列表，保存到 vuex 中 通过 router.addRoutes() 方法，将两个列表拼接起来（Vue 框架） 同样对比计算得出可见的菜单列表，赋值并保存到 vuex 中 显示页面 @vue/cli 跟 vue-cli 相比，@vue/cli 的优势在哪？ 首先说一些vue-cli这些工具的初衷吧: 这些工具就是为了让开发者能够开箱即用快速地进行应用开发而开发的，它们秉承的是“约定大于配置”思想，简单说就是"能不配置的就不配置，你就按照我的方式来，也不要去争论这个好不好，快速进行业务开发才是正经事". 它们不建议你去配置，但也不会拦着你去配置。 另外Webpack对初学者并不是十分友好，‘又长又臭’的配置，普通开发者很难写入定义良好，性能优化的配置。不然就不会各种cli工具冒出来了，比如parcel，create-react-app。这些工具都宣称零配置，目的就是让开发者能够愉快的进行代码开发。 详细讲一讲生产环境下前端项目的自动化部署的流程。 你在开发过程中，遇到过哪些问题，又是怎样解决的？请讲出两点。 需求不明确、自己对需求存在误区和不理解 对需求有不同见解的地方或者需要改进， 另外就是对设计有类似的问题。 针对新技术，你是如何过渡到项目中？

从 2020 年初到现在已经开坑了快一年了。其实我最初想做一个完全模仿百度网盘的客户端程序，那时候还是 2019 年年初的时候，最初就是想做一个客户端，用来上传静态的网站到七牛云方便一些，以下是软件的截图。 当时也只是想做一做玩一玩，基本功能做完之后也就没有什么进度了。知道今年年初的时候才有个想法把这个客户端完善一下。下面是新坑的页面截图： 开坑 oss-client：基础环境搭建 使用 electron-forge electron-forge是用于创建，发布和安装现代Electron应用程序的完整工具，electron forge 官网。二话不说直接上手搞。 使用官方推荐的脚手架工具和内置的模板 npx create-electron-app oss-client --template=typescript-webpack 初始化的过程还是很愉快的，至少我在初始化的时候没有遇到什么大坑，如果 npm 默认的源比较慢的话，推荐这个华为云镜像。还有一个需要注意的是 Windows 上安装 node-gyp 出现问题的话可以看一下这篇文章，一般来说 Windows 电脑上只要安装了 visual studio 和 python2.7 的话 electron 环境是没有什么问题的。 这个框架是官方默认的 webpack + typescript 配置。如果电脑上安装了 yarn 的话 electronforge 会默认使用 yarn 来初始化项目的。下面我们默认使用 yarn 来创建开发环境。下面是初始化完成后的目录结构。 │ .eslintrc.json - eslint 配置文件 │ .gitignore - git 忽略的配置文件 │ package.json - npm 项目的配置文件 │ tsconfig.json - typescript 配置文件 │ webpack.main.config.js - electron 中主线程的 webpack 配置 │ webpack....

Vue 3.0 性能提升主要是通过哪几方面体现的？ 响应式系统升级：vue3使用了 proxy 重写了响应式系统，因为 proxy 可以对整个对象进行监听，所以不需要对整个对象深度遍历 编译优化：vue3中标记和提升所有的静态节点，diff过程中只需要对比动态节点 源码体积优化：vue3中移除了不经常使用的API，tree-sharking减小打包体积 Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？ Options Api: 包含一个描述组件选项（data,methods,props）的对象；开发复杂组件，同一个功能代码被拆分到不同选项中； Composition Api： 一组基于函数的API；可以灵活的组织组件的逻辑；更好的类型推导，容易集合TypeScript； Proxy 相对于 Object.defineProperty 有哪些优点？ 可以监听动态属性的添加；可以监听到数组的索引和数组length属性；可以监听删除属性；多层属性嵌套，在访问属性过程中处理下一级属性 Vue 3.0 在编译方面有哪些优化？ vue2中采用标记静态根节点，优化diff过程，来减少操作dom；vue3中标记和提升所有静态根节点,diff过程只需要对比动态节点；Fragments；静态提升；Patch flag；缓存事件处理函数 Vue.js 3.0 响应式系统的实现原理？ reactive 接受一个参数，typeof判断这个参数是否是对象，不是对象直接返回这个参数，不能用reactive做响应式处理 是对象，创建响应拦截器handler,里面实现get/set/deleteProperty get：通过track收集依赖,通过Reflect.get获取当前key的值，注意这里如果key的值是个对象，要为该对象创建响应拦截器递归调用reactive set：先比较新旧value是否相等，相等直接返回,不想等，通过Reflect.set设置新的value,并通过trigger触发更新，最后记得返回boolean值，否则会报warn deleteProperty:当前对象有这个key值，删除这个key，并通过trigger触发更新，最后记得返回boolean值，否则会报warn effect 接受一个函数作为参数，记得把函数赋值给全局对象activeEffect，作用是访问响应式对象属性时区收集依赖 track 接受两个参数target和key 如果没有 activeEffect，则说明没有创建 effect 依赖 如果有 activeEffect，则去判断 WeakMap 集合中是否有 target 属性 WeakMap 集合中没有 target 属性，则 set(target, (depsMap = new Map())) WeakMap 集合中有 target 属性，则判断 target 属性的 map 值的 depsMap 中是否有 key 属性 depsMap 中没有 key 属性，则 set(key, (dep = new Set())) depsMap 中有 key 属性，则添加这个 activeEffect trigger 判断 WeakMap 中是否有 target 属性 WeakMap 中没有 target 属性，则没有 target 相应的依赖 WeakMap 中有 target 属性，则判断 target 属性的 map 值中是否有 key 属性，有的话循环触发收集的 effect()

使用NuxtJS实现 RealWorld 全部功能 https://demo.realworld.io/#/ 要求：发布码云上，可以直接展示网页 仓库地址： https://gitee.com/caorushizi/realworld 预览：http://ziying.site/realworld/

作业要求 使用 Gridsome 实现下面博客内容。 实现左侧前四个侧边栏的效果和内容。 项目地址 https://github-laziji.github.io/#/user/new/main 仓库地址： https://gitee.com/caorushizi/vblog 预览：http://ziying.site/vblog

一、简答题 1、请简述 Vue 首次渲染的过程。 Vue 初始化：初始化 vue 的实例成员、静态成员； new Vue()：初始化结束之后，调用 vue 构造函数。构造函数中调用了 this._init() ，这个方法相当于vue的入口，最终调用 vm.$mount() ； 调用入口文件的 vm.$mount()：这个方法主要是将模板编译成 render 函数。先判断是否传递了 render 选项，如果没有传递 render ，就把模板编译成 render 函数。这个过程是通过 compileToFunctions() 生成 render() 渲染函数 （new Function）。最后将 options.render = render； 调用runtime版本中的vm.$mount()：在这个方法中会重新获取 el 调用 lifecycle.js 中的 mountComponent(this, el)：方法中先判断是否有render选项，如果没有但是传入了模板，并且当前是开发环境的话会发送警告；触发 beforeMount ；然后定义 updateComponent ，这个方法中会调用 vm._render() 渲染虚拟dom ，调用 vm._update() 将虚拟dom转换成真实dom；然后创建 Watcher 实例，创建过程中传入了 updateComponent 会在 Watcher 内部调用 ，再调用 get() 方法；然后触发 mounted ，最终返回 vm ；...

一、简答题 当我们点击按钮的时候动态给 data 增加的成员是否是响应式数据，如果不是的话，如何把新增成员设置成响应式数据，它的内部原理是什么。 let vm = new Vue({ el: '#el', data: { o: 'object', dog: {} }, method: { clickHandler () { // 该 name 属性是否是响应式的 this.dog.name = 'Trump' } } }) 不是响应式的，对于已经创建的实例，Vue不允许动态添加根级别的响应式属性 使用Vue.set(vm.dog, ‘name’, ‘dog_name’)或this.$set(this.dog, ‘name’, ‘dog_name’) this.$set在new Vue()时候就被注入到Vue的原型上，set方法内部仍是调用了defineReactive()方法进行响应式处理 请简述 Diff 算法的执行过程 diff的过程就是调用名为patch(el, vnode)/patch(oldVnode, vnode)的函数，比较新旧节点，一边比较一边给真实DOM打补丁 patch里会调用sameVnode(oldVnode, vonde)，根据返回结果： true: 则执行patchVnode false: 则用vnode替换oldVnode patchVnode(oldNode, vnode, insertedVnodeQueue) 找到对应的真实DOM，成为el 判断vnode和oldVnode是否指向同一个对象，如果是，直接return 如果它们都有文本节点并且不相等，那么将el的文本节点设置为vnode的文本文本节点 如果oldVnode有子节点而vnode没有，则删除el的子节点 如果oldVnode没有子节点而vnode有，则将vnode的子节点真实化之后加到el 如果两者都有子节点，则执行updateChildren(parentElm, oldCh, newCh)函数比较子节点(key很重要) 二、编程题 模拟 VueRouter 的 hash 模式的实现，实现思路和 History 模式类似，把 URL 中的 # 后面的内容作为路由的地址，可以通过 hashchange 事件监听路由地址的变化。 let _Vue = null export default class VueRouter { static install (Vue) { // 1....