政策转向，面向 B 端的业务不得不转向 C 端；而 C 端用户显然对性能和交互更为挑剔，于是老板决定上原生。为了赶工期，采用 Native + Web 的开发方式；经过调研，Native 和 Web 之间较为常用的通信方式为 JSBridge。为此，小组还开发了一个包来满足业务需要。WebView如果 iOS/Android 要访问 Web 页面，需要使用 WebView（一个嵌入在操作系统里的组件）；WKWebView基于 Safari，Android System WebView基于 Chrome，当然还有微软的Microsoft Edge WebView2。在我看来，WebView 像是一个继承自浏览器引擎的类，具有完整的浏览器功能；开发者可以在其基础上对其进行定制化来满足业务需要；比如说，可以对 UA 进行定制，这样 Web 就可以对当前的运行环境做判断：12345678910exportconstisWeChatWebView=()=>{/*** 如果 UA 不满足条件，可以拒绝服务* 比如“请在微信中访问”*/if(/(WeChat)/i.test(navigator.userAgent)){returntrue;}returnfalse;};以 WKWebView 为例，WKWebViewConfiguration用来配置 WKWebView，URLRequest用来 ...继续阅读 (7)

事例代码新建 tracing.ts：123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384import{ZoneContextManager}from'@opentelemetry/context-zone';import{OTLPTraceExporter}from'@opentelemetry/exporter-trace-otlp-http';import{registerInstrumentations}from'@opentelemetry/instrumentation';import{DocumentLoadInstrumentation}from'@opentelemetry/instrumentation-document-load';import{FetchInstrumentation}from'@opentelemetry/instrumentation-fetch';import{UserInteractionInstrumentation}from'@opentelemetry/instrume ...继续阅读 (9)

ngTemplateOutlet从字面来看，就像之于 router 一样，ngTemplateOutlet 就是TemplateRef的“出口”。除了渲染 TemplateRef 之外，它还支持指定一个对象 context 作为“模版内容”的渲染上下文。Vue 的 scopedSlots 和 React 的 renderProps 以及后来的 Composition API 和 Hooks 都在践行“逻辑与 UI”的分离；因为 UI 的自由度非常高，形态千变万化，而交互逻辑的自由度就小不少，UI 更多是内在逻辑的延伸。有了 ngTemplateOutlet，也可以在 Angular 中分离逻辑与 UI（虽然 Angular 在这方面的最佳实践是“服务”）。使用 ngTemplateOutlet 构造 DynamicTabListSlotComponent：123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384// 组件渲染了一个 ng-container，这就是 TemplateRef 的出口@Component({sel ...继续阅读 (12)

需求随着国家对个体户税收政策的收紧，公司需要采集客户的“话术视频”来作为规避业务风险的“凭据”。具体来说就是，需要用户在手机端录制一段“我已同意 xxx”的视频，并且录制完成之后，上传至服务器保存。经过搜集信息，大致有两种实现思路：基于 input[capture] 的实现和基于 WebRTC 的实现；input 这种不是本文重点，略过。基于 WebRTC 的实现的基本思路是：调用 MediaDevices 获取设备相机和麦克风权限；调用 getUserMedia 方法创建 MediaStream 数据流；调用 MediaRecorder 捕获媒体流并对数据流捕获和缓存；如果文件较大，可能需要 Blob 等 API 对媒体流进行分包上传；如果产品有需要，可能后端要调用 ffmpeg 等工具对视频编码进行转换。WebRTC前端调用设备采集视频流主要采用的是WebRTC 实时通讯技术，它是一项可以用于视频聊天、音频聊天或 P2P 文件分享的技术。整个 WebRTC 主要有以下几个 API 组成：MediaDevices，提供访问连接媒体输入的设备（相机、麦克风以及屏幕共享等），可以使你取得任何硬件资源的媒体数据：getUserMedia，为 RTC 连接获取设备的摄像头与麦克风权限并接入设备信号；会提示用户给予使用媒体输入的许可；getDisplayMedia，提示用户去选择和授权捕获 ...继续阅读 (10)

组件在 Angular 中，组件是用来定义视图的，一个应用至少有一个根组件（属于根模块的一部分）；组件由三部分组成：组件类（控制组件模板渲染）、组件模板、组件样式（默认仅对当前组件生效，不会污染全局）；可以使用 ng generate 命令或编辑器扩展快速新建组件（服务、管道…）：组件模板，语法和 HTML 几乎相同，多了一些 Angular 独有的指令和标签；组件样式，作用域仅限于当前组件（可以通过“样式封装策略 encapsulation”进行更改）；组件类，就是普通的 class；组件类中声明的属性和方法会自动注入组件模板中。组件的父子关系是通过“组件的视图对象”间接建立的；每个组件都有一个宿主视图和一些内建视图。123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129 ...继续阅读 (11)

前置知识CSS/CSS3 长度、时间、频率、角度单位大全CSS 值类型文档大全CSS 全局关键字属性值：inherit，继承属性值；initial，CSS 语法中规定的初始值，不是浏览器内置样式的初始值；unset，对于有继承性的属性，等同于 inherit；对于没有继承性的属性，等同于 initial，常常（all:unset）酱紫使用；revert，还原为浏览器内置样式。all 指代除了自定义属性（还有 unicode-bidi 和 direction）之外的所有 CSS 属性：initial，无实际价值；inherit，无实际价值；unset，让元素的样式表现和span 一样；revert，让元素恢复成浏览器内置样式。@supports 是用来检测当前浏览器是否支持某个 CSS 新特性的最规范、最正统的处理方法（当然，没 IE 什么事）：浏览器提供了相应的 JS 接口 CSS.supports(propertyName, value)；@supports 规则的花括号可以包含其他任意 @ 规则，甚至是包含 @supports 规则自身。12345678910111213141516171819202122232425262728293031323334/* 支持弹性布局 */@supports(display:flex){/* 可以嵌套其他规则 */@mediascreena ...继续阅读 (8)

优先级与选择器CSS 是有局部作用域的（ShadowDOM）。CSS 选择符有五种：后代关系（空格）；父子关系（>）；相邻兄弟关系（+）；随后兄弟关系（~）；列关系（||）。CSS 优先级有六种：0 级：通配选择器（*，不包括伪元素）、选择符（空格、>、+、~、||）和逻辑组合伪类；1 级：标签选择器；2 级：类选择器、属性选择器和伪类；3 级：ID 选择器；4 级：内联样式；5 级：!important（可以使 JS 无效）。CSS 选择器优先级与 DOM 位置无关。1234567891011121314151617181920212223242526/* 选择器的优先级并不考虑 DOM 的位置，所以背景是绿色 */divp{background:red;}htmlp{background:green;}/* 提升选择器优先级的方法：重复选择器自身 */.paragraph.paragraph{font-size:24px;}/* 提升选择器优先级的方法：使用属性选择器 */.paragraph[id]{color:red;}.paragraph{color:black;font-size:12px;}背景是 green，字体颜色是 red，字体大小是 24px。在 HTML 中，标签和属性都是不区分大小写的，而属性值是区分大小写的。于是，在 CSS 中，标签选择器不区分大小写， ...继续阅读 (13)

导入方式在 19/20 版本，默认导出可能不可用。12import*asReactfrom'react';import*asReactDOMfrom'react-dom';组件 props 类型12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061typeCommonType={};typeComponentProps={count:number;message:string;disabled:boolean;status:'success'|'waiting'|'error';objAttr:{};objAttrArr:{id:string;title:string;}[];dict1:{[key:string]:CommonType;};dict2:Record;// 同 dict1onSth:Function;onChange():void;onClick:()=>void;onSubmit(event:React.FormEvent):void;onContextMenu:(event:React.MouseEvent)=>void;optional?:unknown;};/*** 获取元素的 props ...继续阅读 (7)

Vue.use(Router)Vue.use 会调用 Router 的静态 install 方法：保存 Vue 构造函数，方便其他组件调用 Vue 的工具函数；在每个 Vue 实例中混入钩子：定义 _routerRoot、_router、_route（getter/setter）；调用 Router 实例的 init 方法；注册路由实例。在 Vue 原型上挂载 $router、$route；注册 router-view 和 router-link 组件。1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768exportlet_Vue;// 别的地方有用到 _Vue.extendexportfunctioninstall(Vue){// 防止重复 installif(install.installed)return;install.installed=true;// 保存 Vue_Vue=Vue;constisDef=v=>v!==undefined;constregisterInstance=(vm,callVal)=>{leti=vm.$options._parentVnode;if ...继续阅读 (9)

文档流文档流是指 CSS 中引导元素排列和定位的一条看不见的“水流”。CSS 的基石是 HTML，所以 HTML 默认的表现符合“流”，可以通过破坏“流”来实现特殊布局。文档流的流向是可以改变的，这种改变可以让 CSS 的展现更为丰富；因此，“文档流从左往右自上而下”这种说法是不严谨的。流体布局指的是利用元素“流”的特性实现的各类布局效果；因为“流”本身具有自适应特性，所以“流体布局”往往都是具有自适应性的。流动性是一种 margin/border/padding 和 content自动分配水平空间的机制；如果手动设置宽度，就完全就不像“水流”那样完全利用容器空间，即所谓的流动性丢失。块级元素块级元素和 display:block 不是一个概念。例如，li 默认的 display 值是 list-item，table 默认的 display 值是 table，但是它们均是“块级元素”，因为它们都符合块级元素的基本特征；也就是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。由于“块级元素”具有换行特性，因此理论上它都可以配合 clear 属性来清除浮动带来的影响（IE 中的伪元素不支持 display:list-item；这是不用 display:list-item 清除浮动的主因，兼容性不好）。内外盒子（臆想）每个元素都两个盒子，外在盒子和内在盒子。外在盒子负责元素是可以 ...继续阅读 (12)

我可以认真的说，看完这篇文章，你将掌握：componentDidCatch 原理；Suspense 原理；异步组件原理。不可能的事我的函数组件中里可以随便写，很多同学看到这句话的时候，脑海里应该浮现的四个字是：怎么可能？因为我们印象中的函数组件，是不能直接使用异步的，而且必须返回一段 JSX 代码。那么今天我将打破这个规定，在我们认为是组件的函数里做一些意想不到的事情。接下来跟着我的思路往下看吧。首先先来看一下 JSX，在 JSX 中代表 DOM 元素，而代表组件，Index 本质是函数组件或类组件。透过现象看本质，JSX 为 ReactElement 的表象，JSX 语法糖会被 Babel 编译成 ReactElement 对象，那么上述中：不是真正的 DOM 元素，是 type 属性为 div 的 element 对象；是 type 属性为类或者组件本身的 element 对象。言归正传，那么以函数组件为参考，Index 已经约定俗成为这个样子：123456789101112functionIndex() {/*** 不能直接的进行异步操作* return 一段 JSX 代码*/return(Beefribsporkchopcowcornedbeefpastramisalamishoulderfatbackporchettaalcatra.);}如果不严格按照这个格式写，通过形 ...继续阅读 (12)

首先，需要有一个滚动容器 div 来放置滚动列表 ul；按照通常的渲染方式，ul 里会有大量（成千上万）的列表元素 li；当对某一个 li 进行 DOM 操作时（比如，一些股票软件会通过高亮的方式实时渲染此支股票的涨跌），需要先遍历所有 li，找到要进行操作的元素，再进行 DOM 操作。此时，页面可能会因为 DOM 树过于庞大而占用大量内存，页面渲染可能卡顿。而虚拟滚动要做的，就是在保证用户正常交互体验的同时尽可能少的渲染 DOM，提升页面的响应速度。1234567891011121314151617181920212223242526272829303132333435363738*{margin:0;padding:0;}body{height:100vh;display:flex;justify-content:center;align-items:center;}.container{height:80vh;width:80vw;overflow-y:scroll;outline:1pxsolidorange;}.list{box-sizing:border-box;}.listli{width:100%;height:36px;outline:1pxsolidred;text-align:center;line-height:36px;}

...

. ...继续阅读 (15)

创建可引导的 macOS 安装器12# https://support.apple.com/zh-cn/HT201372sudo /Applications/Install\macOS\${版本名称，比如：Monterey}.app/Contents/Resources/createinstallmedia --volume /Volumes/${U盘名称，比如：MyVolume}bash 与 zsh 的相互切换1234# 切换到 bashchsh -s /bin/bash# 切换到 zshchsh -s /bin/zsh本地安装了哪些 brew 包1brew list本地安装了哪些 npm 包1npm list -g --depth=0不检查 Monterey 更新123456# 重置忽略的更新sudo softwareupdate --reset-ignored# 忽略软件的更新sudo softwareupdate --ignore"macOS Monterey"# 清除菜单小红点defaults write com.apple.systempreferences AttentionPrefBundleIDs0启用 M1 限定主题123defaults write -g NSColorSimulateHardwareAccent -bool YES# 3-Yellow、4-G ...继续阅读 (5)

响应式原理 2.xDep 用来存放订阅者（watcher）的对象；每个 Dep 实例都存在于对象每个属性对应的 getter/setter 所在的闭包里并且都有唯一的 id。12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152exportdefaultclassDep{statictarget;constructor(){this.id=uid++;this.subs=[];// 存放着 watchers（订阅者）}addSub(sub){this.subs.push(sub);// 将 watcher 添加到列表（一般由 watcher 调用）}removeSub(sub){remove(this.subs,sub);// 从列表移除 watcher}depend() {if(Dep.target){/*** 进行依赖收集时，Dep.target 会指向待被收集的 watcher* 调用 watcher 的 addDep 方法* watcher 会调用 dep.addSub 把它自己加到 subs 里* 同时，watcher 会把当前 dep 记录下来*/Dep.target.addDep(this);}}notify() {// 循环“订阅者 ...继续阅读 (58)

调用 ReactDOM.render 发生了什么？确定应用渲染方式；创建 fiberRoot 和 rootFiberNode，并将两者用指针指向彼此；向 rootFiberNode 绑定自身的更新队列；清空 container 里的内容；向 container 绑定原生事件；将 render 的第三个参数的 this 指向应用实例并调用；初始化完成后，创建 update，并将 fiber 对应的组件作为 payload；将 update 与 fiberNode 相关联，fiberNode 对应的 update 组成循环链表；调用 scheduleUpdateOnFiber 开始渲染工作。123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 ...继续阅读 (15)

基本信息姓名：李霄汉学历：统招本科手机：186-6819-8984专业：信息管理与信息系统邮箱：pavilion0321@gmail.com英文等级：CET-6现居地：浙江省杭州市博客：https://vikingama.github.io/职业技能熟练掌握 HTML、CSS、JS熟练使用 React、Vue熟练使用 Git了解 TS项目经验LStack 混合云管平台时间：2020 年 5 月 – 2021 年 7 月描述：面向开发者的云原生应用管理工具技术栈：Vue、VueRouter、Vuex、ElementUI、ECharts、Lerna负责官网、云市场、费用中心、运营管理模块，公司内部运营后台基于 Lerna 和 yarn 的 monorepo 的项目管理方式通过 lint-staged 对暂存区文件进行格式化和校验使用基于 slot 的 renderless 数据渲染方式通过预渲染插件对官网进行 SEO 优化使用 husky 规范 commit 信息使用 ECharts 展示用户数据基于路由的权限管理花瓣站长平台时间：2019 年 7 月 – 2019 年 8 月描述：供合作伙伴查询推广流量的工具技术栈：React、ReactRouter、Redux、AntDesign、StyledComponents、BizCharts使用 AntDesign 作为基础组件库使用 Bi ...继续阅读 (7)

多态同一操作作用于不同的对象上面，可以产生不同的解释和不同的执行结果；给不同的对象发送同一个消息的时候，这些对象会根据这个消息分别给出不同的反馈；多态背后的思想是将“做什么”和“谁去做以及怎样去做”分离开来。123456789101112131415// 不变的部分functionmakeSound(animal){animal.sound();}// 可变的部分，将行为分布在各个对象中，并让这些对象各自负责自己的行为constChicken=function(){};constDuck=function(){};Chicken.prototype.sound=function(){console.log('咯咯咯');};Duck.prototype.sound=function(){console.log('嘎嘎嘎');};makeSound(newChicken());// 咯咯咯makeSound(newDuck());// 嘎嘎嘎面向接口编程“在系统分析和架构中，分清层次和依赖关系；每个层次不是直接向其上层提供服务，而是通过定义一组接口，仅向上层暴露其接口功能；上层对于下层仅仅是接口依赖，而不依赖具体类”是设计模式中最重要的思想。1234567891011121314151617181920classDuck{makeSound(){console.log('嘎嘎嘎'); ...继续阅读 (12)

monorepo公司的主要业务是混合云管，所以除了官网这种 ToC 的项目之外，其余均是 ToB 的管理后台项目；根据具体业务分为了：容器服务、镜像管理、服务商监控、应用管理等等。这些子项目有统一的 UI 风格、相近的交互逻辑、耦合的业务逻辑；所以非常适合 monorepo 的项目管理方式。Lerna 是前端 monorepo 比较好的解决方案，搭配 yarn 可以非常好的管理项目外部与项目之间的依赖。每个项目都是一个独立的 package，每个 package 都有自己的 workspace，可以将自己的 APIs 通过 lib 暴露并 publish 到内部 npm 仓库，这样每个 package 既是独立的项目也是其他 package 的依赖。12345678910111213141516171819202122232425262728293031323334// lerna.json{"packages":["packages/@cli/*",// 脚手架依赖，放置 linters 规则和配置"packages/@common/*",// 公共依赖，放置工具函数和组件"packages/@project/*"// 业务代码，放置具体的业务实现],"version":"independent",// 独立模式，每个 package 有独立的版本号"useWorkspaces" ...继续阅读 (7)

SEO 就是让搜索引擎了解网站，在用户进行关键词搜索时，网站能出现在搜索结果中比较靠前的位置。搜索引擎如何工作找出存在的网页：跟踪已知网页上的链接、与网站托管服务合作、站长提交站点地图；编入索引：解析网页内容并构建搜索索引，网页的标题、关键词和描述可以改善编入效果；呈现：根据搜索内容和其他因素（位置、语言、设备等）从索引中找到最相关的信息返回给用户；排名：提高网页加载速度并保持一定的更新频率有利于网站排名。搜索引擎蜘蛛蜘蛛是搜索引擎抓用来页面信息和构建信息索引的工具，例如：Baiduspider和Googlebot；蜘蛛在访问页面的过程中，处理文字内容、关键内容标记和属性，例如网站标题、Alt 属性、图片、视频等；此外，蜘蛛还会查找页面上的链接，并将这些链接添加到它要抓取的网页的列表中；这张列表记录着新建立的网站、对现有网站进行的更改以及无效链接，并据此更新索引。百度曾发布过一个公告，提到 Baiduspider 会访问页面的 CSS、JS 和图片资源，但是 JS 会不会执行、JS 的执行结果会不会被编入索引则没有明说；Google 在文档中指出：Googlebot 支持对 SPA 和动态内容的抓取，在抓取过程中会使用 Chrome 加载网页并运行 JS。显然，搜索引擎更喜欢“有内容的”HTML。SPA 如何产生“有内容的”HTML预渲染在客户端访问之前提前渲染好 HTML（一般是 ...继续阅读 (26)

数组数组存储一系列同一种数据类型的值；虽然在 JS 里，数组中可以保存不同类型的值，但大多数语言都没这个能力：JS 中的数组继承自对象，内部是 key-value 的存储形式；key 为 0、1、2、3… 的字符串；数组有两种模式：快速（fast）和缓慢（slow）;快速的后备存储结构是 FixedArray（V8 实现的一个类似于数组的类，它表示一段固定长度的连续的内存）；缓慢的后备存储结构是一个以数字为键的哈希表（根据键 key 而直接访问在内存存储位置的数据结构）；ArrayBuffer 是可以按照需要分配连续内存的数组。栈栈是一种遵从后进先出（LIFO）原则的有序集合；新添加的元素都保存在栈顶，另一端就叫栈底。基于数组的栈：方法的复杂度为 O(n)，操作基于数组的栈需要迭代整个数组。1234567891011121314151617181920212223242526272829classStackBasedOnArray{constructor(){this.temp=[];}push(item){// 添加到栈顶this.temp.push(item);}pop(){// 移除栈顶元素并返回该元素returnthis.temp.pop();}peek(){// 返回栈顶元素returnthis.temp[this.temp.length-1];}size( ...继续阅读 (9)

Node 简介Node 的结构与 Chrome 十分相似，它们都是基于事件驱动的异步架构，浏览器通过事件驱动来服务界面上的交互，Node 通过事件驱动来服务 I/O；作为后端 JS 的运行平台，Node 没有改写语言本身的任何特性，它将前端中广泛运用的思想迁移到了服务器端。Node 特点：异步输入输出、回调函数、单线程、基于 libuv 实现跨平台。模块化Node 中模块分为两类：核心模块和文件模块；核心模块在 Node 启动时被直接加载进内存中，文件模块则是在运行时动态加载。Node 对引入过的模块都会进行缓存，同浏览器缓存文件一样，不同的是 Node 缓存的是编译和执行之后的对象。Node 在对 JS 模块编译的过程中对文件内容进行了头尾包装，这样每个模块文件之间都进行了作用域隔离。包装之后的代码会通过原生模块的 runInThisContext 方法执行，返回一个 function 对象。123456(function(exports,require,module,__filename,__dirname){varmath=require('math');exports.area=function(radius){returnMath.PI*radius*radius;};});Node 对 C/C++模块调用 process.dlopen 进行加载和执行，dlopen 方法 ...继续阅读 (10)

回来一查，原来是作用域插槽的高阶（算是吧）用法；插槽就插槽呗，你给我装什么大尾巴狼。普通插槽与作用域插槽123456789101112NavigationLink 组件默认链接使用 NavigationLink用户信息作用域插槽就是给普通插槽添加了传递参数的能力；作用域插槽会被编译为一个返回 VNode 的函数，通过函数调用，可以将子组件的变量传递到父组件；很像 React 的 RenderProps 模式：12345678910111213141516171819202122232425262728293031323334353637383940414243444546ContactList 组件render-props{{ pseudoSlot({ contact }) }}scoped-slotsexportdefault{name:'ContactList',props:['pseudo-slot'],data(){return{contacts:[]};},created(){fetch('/contacts.json').then(res=>res.json()).then(data=>{this.contacts=data;}).catch(console.error);}};使用 ContactListcontact.name.first">{{ item.name ...继续阅读 (7)

编译上下文tsconfig.json 用来给文件分组，告诉 TS 哪些文件是有效的，哪些是无效的；还包含有正在被使用的编译选项的信息。12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061{// 编译相关选项"compilerOptions":{/* 基础选项 */"target":"es5",// 目标版本：'es3(default)', 'es5', 'es2015', 'es2016', 'es2017', or 'esnext'"module":"commonjs",// 指定使用模块：'commonjs', 'amd', 'system', 'umd', 'es2015' or 'esnext'"lib":[],// 指定要包含在编译中的库文件"allowJs":true,// 允许编译 js 文件"checkJs":true,// 报告 js 文件中的错误"jsx":"preserve",// 指定 jsx 代码的生成：'preserve', 'react-native', or 'react'"declaration":true,// 生成相应的 '.d.ts' 文件"sourceMap":true ...继续阅读 (5)

与 Hooks 的区别更符合 JS 习惯；对调用顺序不敏感；在每次渲染的过程中不会重复调用，对垃圾回收机制的压力更小；避免了内联处理程序导致子组件重复渲染的问题（在 React 中需要使用 useCallback）；不需要像 useEffect 和 useMemo 那样需要正确的设置依赖，Vue 会自动的追踪。值传递与引用传递新的 API 非常依赖引用传递，这样 Vue 才能及时捕获数据变化；这也是为什么 toRef 会将普通类型数据包装成对象的原因；reactive 包装的对象在解构时为了保持响应性需要用 toRefs 包装也是这个原因。setup作为 Composition API 在 Vue 组件中的入口；它会在组件实例被创建，props 完成初始化之后调用；和模板一起使用时，返回的对象会自动合并到渲染上下文中。1234567891011121314151617{{ count }} {{ object.foo }}import{ref,reactive}from'vue';exportdefault{setup(){// ref 在 setup 中返回并在模板中使用时会自动解构，不需要通过 count.value 访问constcount=ref(0);constobject=reactive({foo:'bar'});return{count,object};}};set ...继续阅读 (6)

改变Vue 新版本根据社区的意见主要做了以下几点：性能上的提升；Vue 本身的 TreeShaking 支持；Composition API；Fragment、Teleport、Suspense；CustomRender API；TS Support；IE11 Support。性能新版本重写了 VisualDOM，具体怎么工作可以看这里。当 Vue 将模板编译为 render 函数时，会将模板中绑定数据的部分做上标记（Patch Flag）；当数据变化时，Vue 将只关注会变化的部分。Vue 还引入了 HoistStatic，将模板中静态的部分抽离到 render 函数外部，提高性能。在服务器渲染时，静态内容会被编译成字符串：编译时，自动进行 useMemo 和 useCallback 优化：TreeShakingVue 本身支持了 TreeShaking，除了响应式系统和 diff 系统外，其他没用到的功能都可以在打包时剥离掉。如果对兼容性没要求，甚至可以去掉对 Vue/2 的支持。Composition APIVue 3.0 将同时支持 Options API 和Composition API，逻辑复用不再需要 mixin 了；代码逻辑会更加清晰，灵活性也会更高。FragmentVue 3.0 不再要求模板中必须要有根节点了，模板现在可以直接是一段文字或者多个节点，Vue 会将 ...继续阅读 (5)

数据格式弹幕一般用在直播或者视频播放的场景中，是评论的一种变形；按照我的理解，它的数据格式应该是：12345{[时间戳/视频对应的秒数]:[对应时间点的弹幕列表],31415926:[{name:"张三",content:"哈哈哈哈哈"},{},{}...],...}发布弹幕当用户发布弹幕时，获取当前视频的时间点，将弹幕插入到弹幕列表中：123456789101112131415161718192021addBarrage=()=>{letbarrage=inputEle.value;if(barrage&&barrage.trim;().length>0){letnow=this.getCurrentTime();letcontent=barrage.trim();if(this.barrages[now]){this.barrages[now].push({name:'麻辣个鸡',// 当前用户的用户名content});}else{this.barrages[now]=[{name:'麻辣个鸡',content}];}inputEle.value='';}};弹幕展示实时获取视频的播放状态，当视频播放时，获取视频播放位置；当播放时间等于弹幕时间时，展示对应弹幕：123456789101112131415161718192021222324252627// 这个函数要放到计时器 ...继续阅读 (8)

观察者模式观察者模式就好个体奶农（Subject）和个人（Observers）的关系；奶农负责统计有多少人订了产品（Subscribe），个人都会有一个相同拿牛奶的方法（Event）；奶农有新奶了就负责调用这个方法（Fire Event）。观察者模式是一对多的关系，多个观察者对应一个对象；当被观察对象更新时会通知所有观察者。1234567891011121314151617181920212223242526272829303132333435363738394041424344// 观察者classObserver{constructor(name){this.name=name;this.fn=null;}update(){console.log(`我是${this.name}，听说被观察者更新了...`);typeofthis.fn==='function'&&this.fn;();}}// 被观察对象classSubject{list=[];// 保存所有观察者addObserver(observer){// 添加新增的观察者this.list.push(observer);}notifyObservers(){// 通知观察者，我更新了this.list.forEach(item=>{item.update();});}}letsubject=newSubject();l ...继续阅读 (8)

HTTP 与 TCP/IPHTTP（Hypertext Transfer Protocol）是以 TCP/IP（Transmission Control Protocol/Internet Protocol）协议族为基础的，属于 TCP/IP 内部的一个子集；TCP/IP 协议族按层次分别分：应用层，预存了各类通用的应用服务（比如：FTP、DNS），HTTP 也处于该层；传输层，提供处于网络连接中的两台计算机之间的数据传输；网络层，负责数据包的产生以及 IP 数据包在逻辑网络上的路由转发；数据链路层，处理连接网络的硬件部分。利用 TCP/IP 进行网络通信时，会通过分层顺序与对方进行通信；发送端从应用层往下走，接收端则从链路层往上走；发送端在层与层之间传输数据时，每经过一层时必定会被打上一个该层所属的首部信息；反之，接收端在层与层传输数据时，每经过一层时会把对应的首部消去。IP、TCP 与 DNSIP 网际协议位于网络层，用于把各种数据包传送给对方；要保证数据传送到对方那里，需要满足两个重要的条件：IP 地址和 MAC（Media Access Control Address）地址。IP 间的通信依赖 MAC 地址，通信双方通常是经过多台计算机和网络设备中转才能连接到对方；而在进行中转时，会利用下一站中转设备的 MAC 地址来搜索下一个中转目标；这时，会采用 ARP（Address ...继续阅读 (9)

for 循环打印 0-9123456789101112131415161718192021222324252627282930313233343536for(vari=0;i<10;i++){(function(i){setTimeout(()=>{console.log(i);},1000);})(i);}for(vari=0;i<10;i++){setTimeout(i=>{console.log(i);},1000,i);}for(vari=0;i<10;i++){setTimeout(console.log(i),1000);}for(vari=0;i<10;i++){setTimeout(console.log.bind(null,i),1000);}for(vari=0;i<10;i++){try{throwi;}catch(i){setTimeout(()=>{console.log(i);},1000);}}for(leti=0;i<10;i++){setTimeout(()=>{console.log(i);},1000);}Proxy 实现数据绑定12345678910111213141516171819202122232425262728293031323334constinputEle=document.querySelector('#model');con ...继续阅读 (13)

生命周期异步组件Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义；只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。123456789101112constAsyncComponent=()=>({// 需要加载的组件 (应该是一个 Promise 对象)component:import('./MyComponent.vue'),// 异步组件加载时使用的组件loading:LoadingComponent,// 加载失败时使用的组件error:ErrorComponent,// 展示加载时组件的延时时间。默认值是 200 (毫秒)delay:200,// 如果提供了超时时间且组件加载也超时了，则使用加载失败时使用的组件。默认值是：`Infinity`timeout:3000});插件系统插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制：添加全局方法或者属性；添加全局资源：指令/过滤器/过渡等；通过全局混入来添加一些组件选项；添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现；提供自己的 API，同时提供上面提到的一个或多个功能。举个例子：12345678910111213141516171819202122232425262728293031323334Example.i ...继续阅读 (8)