Swan
Swan
# BOM对象 ## window对象 - BOM的核心是window，它表示浏览器的一个实例。window 对象既是通过 js 访问浏览器窗口的一个接口，又是 es 规定的Global 对象。 - 全局变量不能通过 delete 操作符删除，但是 window 对象上的属性是可以的。 - 直接访问为未声明的变量会报错，但是可以通过 window对象上的属性来查询某个未声明的变量是否存在。 ``` javascript var newValue = oldValue //会抛出错误，因为后者未声明 var newValue...
# 函数表达式 ## 递归 - 经典递归阶乘函数，但是是强耦合，一旦赋给其他函数并对原函数销毁，就会失效 ``` javascript //递归经典函数,但是是强耦合 function factorial(num) { if (num
# 面向对象的程序设计 # 理解对象 ## 属性类型 - 有两种：数据属性和访问器属性。 ### 数据属性： 1. `[[Configurable]]`:表示能否通过 `delete` 删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性改为访问器属性。 2. `[[Enumerable]]`：表示能否通过 `for-in` 循环枚举属性。 3. `[[Writable]]`：表示能否修改属性的值。 4. `[[Value]]`：表示属性数据值。默认为 `undefined`。 - 需要注意的是，前三个属性，直接在对象上定义属性时，默认都是 `true`，但是如果用 `Object.defineProperty()`方法，不写明默认为`false`. - `Object.defineProperty()`接受三个参数，对象名，属性，一个 json...
# 引用类型 - 在 `ECMAScript` 中，引用类型是一种数据结构，用于将数据和功能组织在一起。它也常被称作类。有时候也被成为**对象定义**，因为他们描述的是一类对象所具有的属性和方法。 - 如前所述，对象是某个特定引用类型的实例。 ## object 类型 - 一般来说，访问对象属性有点表示法和方括号两种方法。 ``` javascript alert(person['name']) //'James' alert(person.name) //'James' ``` 这两种方式访问对象属性没有任何区别，但方括号可以通过**变量**访问属性；如果属性明中国年包含空格等可能导致语法错误的字符，或者属性名使用的是**关键字或保留字**，也可以使用方括号正确表达。 ## Array类型 - 数组的 length 属性并不是只读的。 ``` javascript var...
# 变量和作用域 ## 基本类型和引用类型 - 基本类型按值访问，引用类型按引用访问。高程注解中说明当**复制**保存着对象的某个变量时，操作的是对象的引用；当为对象**添加属性**时，操作的是实际的对象。 - 基本类型的值在内存中占据固定大小的空间，所以被保存在栈内存中。引用类型的值是对象，保存在堆内存中。 - 引用类型的变量实际包含的是一个指针，指向堆内存中这个对象。 - 给基本类型添加属性时无效，尽管这样做不会导致错误。 ``` javascript var name = 'james' name.age = 27 alert(name.age) //undefined ``` - 所有函数的参数都是按值传递。基本类型按值传递很好理解，引用类型稍微有些复杂，但对象也是按值传递的，这点毫无疑问。 ``` javascript function setName(obj)...
# script 标签中的 defer和 async ## defer - 可选属性。表示脚本可以延迟到文档被完全解析和显示后执行。只对外部脚本有效。 ## async - 可选属性。表示应该立即下载脚本，但不应该妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本有效。 ### 例如 ``` javascript ``` ## 不存在 defer 和 async 属性时 - 通常情况下，无论如何包含代码，只要不存在 defer 和 async 属性，浏览器都会按``元素在页面出现的先后顺序对他们进行依次解析，当浏览器遇到的是外部...
              ...
## 介绍 Unocss是一个具有高性能且极具灵活性的即时原子化 CSS 引擎。可以通过预设等配置达到和 Tailwind/Windi 等原子化框架相同的行为。此外，uno具有性能更好，更灵活等优势，参考[原子化CSS框架对比](https://ku.baidu-int.com/knowledge/HFVrC7hq1Q/6A-UXrf3Ha/kfizOqHrNQ/G5fru9gKgYS9mF) 在使用unocss来写原子化css之前，除了阅读unocss文档，同时建议阅读tailwindcss或windicss的文档，因为这两个框架文档更完善，从中能学习到原子化css的更多知识。 📖[【unocss】Github Readme](https://github.com/unocss/unocss) 📖[【unocss】重新构想原子化 CSS](https://antfu.me/posts/reimagine-atomic-css-zh) 📖[【tailwindcss】官方文档](https://tailwindcss.com/) 📖[【windicss】官方文档](https://windicss.org/) ## 目标 基础目标： * 将项目中适合原子化的样式切换为原子化类名，不适合原子化的保留原来的class+style写法。初步实践对项目常用css改写原子化输出了规范。[css属性原子化规范](https://ku.baidu-int.com/knowledge/HFVrC7hq1Q/6A-UXrf3Ha/kfizOqHrNQ/_nbjpHHD1tgA0O) 进阶目标： * 对项目中常用的样式组合做抽象，通过unocss提供的shortcuts及rules等功能自定义规则，简化原子化类名的书写，这些规则需要结合实际项目进行积累。 ## 开发前准备 ### 插件 vscode编译器提供了unocss的提示插件，安装后鼠标悬停在类名上会展示编译后的css代码。  但是，目前unocss插件还不支持预设类名的自动补全，按照[这个issue](https://github.com/unocss/unocss/issues/650)讨论的方法，可以在项目中添加tailwind.config.js配置文件，再安装tailwindcss的插件，可以蹭一下tailwindcss的自动补全提示（因为unocss提供的预设是Tailwind /...
单位说明unocss中预设的宽、高、间距等默认单位是rem。1对应0.25rem，以此类推。项目中可以设置html的font-size为0.53333333vw，这样在750宽度的屏幕上，w-1就对应1px，w-750就对应750px。(750屏宽时，1vw=7.5px，又因为预设的w-1=0.25rem，故设置根元素font-size为4/7.5=0.5333333vw) class | w-1 | w-2 | w-3 | w-4 | ... | w-10 | ... | w-400 | ... -- | -- | -- | -- | -- |...
## autoFMP指标 autoFMP希望通过无侵入的方式给出一个首屏渲染性能的时间点，横向衡量当前页面的性能。 它并不是第一次有意义渲染，应该是首屏渲染基本结束的时间点。 ## 原理 监听document.body的MutationObserver,出现dom变动后遍历dom树，每深一层权重增加，记录当前score，也就是越复杂的dom节点变动，分数越高，通过深度优先提高遍历性能，最后找到变动最剧烈的时间点，触发autoFMP ## 验证 demo1   vue应用，App组件同步渲染，第2/3/4层组件为嵌套异步组件，其中组件2正好在首屏中。 异步组件，会一层一层迭代插入DOM树。 这里的autoFMP应该和组件2渲染后触发，符合设想 ## 任务系统首页 测试  任务系统整体耗时比较长，尤其是页面onload后，异步请求任务列表，请求回来才能渲染真正的任务列表组件。 但因为任务列表及组件仍然在首屏中，且DOM变动量大，这里的autoFMP会等待首屏渲染基本结束后触发。 当无弹窗时，autoFMP可以正确反映任务系统的首屏性能； 当用户存在弹窗、升级等行为，需要开发者自定义点位进行统计相关组件展现时间；