搬砖工程狮 1169430612
关注数: 145 粉丝数: 67 发帖数: 666 关注贴吧数: 186
《深入浅出vuejs》10 解析器的作用是将vue语法下的HTML转成AST，而优化器的作用是从AST中找出静态子树并且打上标记。（静态子树指的AST中永远都不会发生变化的节点），这样做的好处是为了减少不必要的计算： 每次对比VNODE重新渲染时，不需要为静态子树创建新的节点，只有首次需要创建，后面只是clone即可 在虚拟DOM中打补丁的过程可以跳过：如果两个节点都是静态树，就不需要再对比了，直接跳过 优化器内部分为2个步骤： 在AST中找出所有静态节点并打上标记 在AST中找出所有静态根节点并打上标记 要从根节点开始，先判断根节点是不是静态根节点， 再用相同的方式处理子节点，接着用同样的方式去处理子节点的子节点，直到所有节点都被处理 之后程序结束，这个过程叫作递归： 如果节点类型是1，说明是元素节点，那么循环该节点的子节点 如果type 等于2，说明节点是带变量的文本节点，那它不可能是静态 节点，所以返回 false 如果type是3，说明是不带变量的纯文本节点，那么一定是静态节点，返回true 标记完静态节点之后需要标记静态根节点，其标记方式也是使用递归的方式从上向下寻找， 在寻找的过程中遇到的第 一个静态节点就为静态根节点，同时不再向下继续查找。但有两种情况比较特殊:一种是如果 一个静态根节点的子节点只有 一个文本节点，那么不会 将它标记成静态根节点，即便它也属于静态根节点;另一种是如果找到的静态根节点是一个没有 子节点的静态节点，那么也不会将它标记为静态根节点。因为这两种情况下，优化成本大于收益。
筋头巴脑到底是哪个部位的肉？
想加入美妆兴趣小组 贴吧哪里可以找到喜欢美妆兴趣小组啊
《深入浅出vuejs》9.3.8-9.5 纯文本内容：s c r i p t 、 s t y l e 和 t e x t a r e a 这 三种 元 素 叫 作 纯 文 本 内 容 元 素 。 解析它们的时候，会把这 三种标签内包含的所有内容都 当作文本处理。也就是这些内容在解析的时候不用特殊处理，当成字符串即可。由于纯文本 内容元素都被视作文本处理，所以我们的处理逻辑就变得很简单，只需要把这些 文本截取出来并 触发钩子函数chars，然后再将结束标签截取出来并触发钩子函数end。 DOM的层级关系，并没有单独的数据结构来维护，而是通过栈来维护，就是每解析到开始标签，就向栈中推进去一个;每解析到标签结束，就弹出一个。 因此 ， 想取到父元素并不难 ， 只需要拿到栈中的最后一项即可 。 文本解析器是对HTML 解析器解析出来的文本进行二次加工。文 本 其 实 分 两 种 类 型 ， 一 种 是 纯 文 本 ， 另 一 种 是 带 变 量 的 文本 。如 果 是 纯文 本， 不 需要进 行 任 何 处 理 ; 但 如 果 是带 变量 的 文本， 那么需要使用文本解析器进 一步解析 。因为带变量的文本在使用虚拟DOM进行渲染时，需要将 变量替换成变量中的值，一 个解决思路是使用正则表达式匹配出文本中的 变量，先把变量左边的文本添加到数组中， 然后把变量改成_s(x)这样的形式也添加到数组中。如果变量后面还有变量，则重复以上动作， 直到所有变量都添加到数组中。如果最后一个变量的后面有文本，就将它添加到数组中。
《深入浅出vuejs》9.3.3-9.3.7 分辨模板是否已经截取到注释的原理与开始标签和结束标签相同，先判断剩余 HTML 模板 的第一个字符是不是<，如果是，再 用正则表达式来进 一步匹配 const comment = /^<! - - / 条件注释不需要触发钩子函数，我们只需要把它截取掉就行了 const conditionalComment = /^<!\[/DOCTYPE 与条件注释相同，都是不需要触发钩子函数的，只需要将匹配到的这一段字符截取 掉 即 可 。 const doctype = /^<!DOCTYPE [^>]+>/i 若想分辨在本轮循环中 HTML 模板是否已经截取到文本，其实很简单，我们甚至不需要使 用正则表达式。在 前 面 的 其 他 标 签 类 型 中 ， 我 们 都 会 判 断 剩 余 H T M L 模板 的 第 一 个 字 符 是 否 是 < ， 如 果 是 ， 再进一步确认到底是哪种类型。这是因为以<开头的标签 类型太多了，如开始标签、结束标签和 注 释 等 。 然 而 文 本 只 有 一 种 ， 如 果 H T M L 模 板 的 第 一 个 字符 不 是 < ， 那 么 它 一 定 是 文 本 了 。
《深入浅出vuejs》9.3.2-9.3.3 如果模板以<开头，那么它有可能是以开始标签开头的模板，同时它也有可能是以结束标签 开 头 的 模 板 ， 还 有 可 能 是 注 释 等 其 他 标 签 ， 因 为这 些类 型 的 片 段 都 以 < 开 头 。 那 么， 要 进 一 步 确 定模板是不是以开始标签开头，还需要借助正则表达式来分辨模板的开始位置是否符合开始标签 的特征。 const ncname = '[a-zA-Z_][\\w||-|\-]*' const qnameCapture = ((?: ${ncname}|(:)?$(ncname}) ' const startTagOpen = new RegExp(*^<${qnameCapture)*) 当HTML解析器解析到标签开始时，会触发钩子函数st ant ，同时 会 给 出 三 个 参 数 ， 分 别 是 标 签 名 ( t a g N a m e )、 属 性 ( a t t r s ) 以 及 自 闭 合 标 识 ( unary )。因此，在分辨出模板以开始标签开始之后，需要将标签名、属性以及自闭合标识解析出来。在分辨出模板以开始标签开始之后，就可以得到标签名，而属性和自闭合标识则需要进一步 解析。通 常 ， 标 签 属 性 是 可 选 的 ， 一 个 标 签 的 属 性 有 可 能 存 在 ， 也有 可 能 不 存 在 ， 所 以 需 要 判 断 标 签是否存在属性，如果存在，对它进行截取。 const startTagClose = /^\s*(\/?)>/ const attribute = /^15*([^|s''<>V=]+)(?:15*(=)\s*(?:"([^"]*)"+|*([^']*)'+|<[^\s"^=<>"]+)))?/ let html = ' class="box" id="el"></div›' 结 束 标 签 的 截 取 要 比 开 始 标 签 简 单 得 多 ， 因 为 它 不 需 要 解析 什 么 ， 只 需 要 分 辨 出 当 前 是 否 已 经截取到结束标签，如果是，那么触发钩子函数就 可以了。如果HTML模板的第一个字符不是<，那么一定不是结束标签。只有HTMIL模板的第一个字 9 符是<时，我们才需要进一步确认它到底是不是结束标签。
我有专属皮肤哦 黑神话专属皮肤太帅了，忍不住来炫耀一下
《深入浅出vuejs》第八章 模板编译的主要目标就是生成渲染函数。在底层实现上，Vue.js 会将模板编译成虚拟DOM渲染函数。当应用内部的状态发生变化时， Vue.js 可以结合响应式系统，聪明地找出最小数量的组件进行重新渲染以及最少量地进行DOM 操作。 将模板编译成渲染函数可以分两个步骤，先将模板解析成AST(Abstract SyntaxTree，抽象 语法树)，然后再使用AST生成渲染函数。所以，在大体逻辑上，模板编译分三部分内容: 将模板解析为 AST 遍历 AST标记静态节点 使用AST生成渲染函数 这三部分内容在模板编译中分别抽象出 三个模块来实现各自的功能，分别是: 解析器：在解析器内部，分成了很多小解析器，其中包括过滤器解析器、文本解析器和HTMIL 解析 器 。 然 后 通 过 一 条 主 线 将 这 些 解 析 器 组 装 在 一 起 优化器 ：优化器的目标是遍历 AST，检测出所有静态子树(永远都不会发生变化的D OM 节点)并给 其打标记 代码生成器：将 AST转换成渲染函数中的内容，这个内 容可以称为“ 代码字符串”
《深入浅出vuejs》7.5 更新子节点大概可以分为4种操作:更新节点、新增节点、删除节点、移动节点位 置。因此，更新子节点更多的是在讨论什么情况 下需要更新节点，什么情况下新增节点等对 比 两 个 子 节 点 列 表 ( c h i l d r e n )， 首 先 需 要 做 的 事 情 是 循 环 。循 环 n e w C h i l d n e n ( 新 子 节 点 列 表 )， 每 循 环 到 一 个 新 子 节 点 ， 就 去 o l d c h i l d r e n ( 旧 子 节 点 列 表 ) 中 找 到 和 当 前 节 点 相 同 的那个旧子节点。 如果在ol dchi l dr en 中找不到，说明当前子节点是由于状态变化而新增的节 点，我们要进行创建节点并插入视图的操作;如果找到了，就做更新操作;如果找到的旧子节点 的位置和新子节点不同，则需要移动节点等。 如果在oldChildren 中没有找到与本次循环所指向的新子节点相同的节点，那么说明本次 循环所指向的新子节点是 一个新增节点。对于新增节点，我们需要执行创建节点的操作，并将新 创建的节点插入到oldChil dren 中所有未处理节点(未处理就是没有进行任何更新操作的节点) 的前面。当节点成功插入D OM 后，这一轮的循环就结束了。 移动节点通常发生在newChildren 中的某个节点和oldChi ldren 中的某个节点是同一个节 点，但是位置不同，所以在真实的DOM 中需要 将这个节点的位置以新虚拟节点的位置 基准进 行移动。通过Node.insertBefore()方法，我们可以成功地将一个已有节点移动到一个指定的位置 当newChildren 中的所有节点都被循环了一遍后，也就是循环结束后，如 果oldchi l dr en 中还有剩余的没有被处理的节点，那么这些节点就是被废弃、需要删除的节点。 通过优化策略算法，提升新旧节点对比的性能
《深入浅出vuejs》7.4 静态节点 在更新节点时，首先需要判断新旧两个虚拟节点是否是静态节点，如果是，就不需要进行更 新操作，可以直接跳过更新节点的过程。如果新生成的虚拟节点(vnode)有t ext 属性， 那么不论之前旧节点 的子节点是什么，直接 调用setTextContent 方法(在浏览器环境 下是node.textContent 方法)来将视图中DOM节 点的内容改为虚拟节点(vnode)的text 属性所保存的文字。如果旧虚拟节点也有children 属性，那么我们要对新旧两个虚拟节点的children进行一 个更详细的对比并更新。更新children 可能会移动某个子节点的位置，也有可能会删除或新增 某个子节点，如果旧虚拟节点没有chi l dr en 属性，那么说明旧虚拟节点要么是 一个空标签，要么是有文 本的文本节点。如果是文本节点，那么先把文本清空让它变成空标签，然后将新虚拟节点(vnode ) 中 的 c h i l d r e n 挨 个 创 建 成 真 实 的 D O M 元 素 节 点 并 将 其 插 人到 视 图 中 的 D O M 节 点 下 面 。
《深入浅出vuejs》7 虚拟DOM最核心的部分是patch，它可以将vnode渲染成真实的DOMpatch 也可以叫作pat ching 算法，通过它渲染真实D OM时，并不是暴力覆盖原有D OM，而 是比对新旧日两个vnode之间有哪些不同，然后根据对比结果找出需要更新的节点进行更新。这 一 点从名字就可以看出，patch 本身就有补丁、修补等意思，其实际作用是在现有DOM上进行修改 来实现更新视图的目的。对 现 有 D O M 进 行 修 改 需 要 做 三件 事 : 创建新增的节点; 删除已经废弃的节点; 修改需要更新的节点。 事实上，只有三种类型的节点会被创建并插入到DOM 中:元素节点、注释节点和文本节点要判断vnode是否是元素节点，只需要判断它是否具有tag属性即可。接着，我们就可以调用当前环境下的createElement 方法 (在浏览器环境下就是document .createElement)来创建真实的元素节点。将元素渲染到视图的过程非常简单。只需要调用当前环境下的ap pen dch i l d 方法(在浏览 器 环 境 下 就 是 调 用 parentNode.appendChild )， 就 可以 将 一个 元 素 插 入 到 指 定 的 父 节 点 中。创建子节点的过程是一个递归过程。v ode中 的chi ldren 属性保存了当前节点的所有子虚 拟节点(childvirtualnode)，所以只需要将vnode中的children属性循环一遍，将每个子虚拟节 7 点都执行一遍创建元素的逻辑，就可以 实现我们想要 的功能。在 第 6 章 中 介 绍 V N o d e 时 ， 我 们 介 绍 过 注 释 节 点 有 一 个唯 一 的 标 识 属 性 i s C o m m e n t 。 在 所 有 类型的vnode中，只有注释节点的isComment 属性是true，所以通过is Comment 属性就可以判 断 一个vnode是否是注释节点。当发现一个vnode的tag属性不存在时，我们可以用isComent 属性来判断它是注释节点 还是文本节点。如果是文本节点，则调用当前环境下的createTextNode 方法(浏览器环境下调 用document .createTextNode )来创建真实的文本节点并将其插入到指定的父节点中;如果是 注 释 节 点 ， 则 调 用 当 前 环 境 下 的 c r e a t e c o m m e n t 方 法 (浏 览 器 环 境 下 调 用 d o c u m e n t . createComent 方法)来创建真实的注释节点并将其插入到指定的父节点中静态节点指的是那些一旦渲染到界面上之后，无论日后 状态如何变化，都不会发生任何变化 的节点。当新旧两个虚拟节点(vnode和oldVnode)不是 静态节点，并且有不同的属性时，要以新虚 拟节点(vnode)为准来更新视图。根据新节点(vnode)是否有text 属性，更新节点可以分为 两种不同的情况。
樟子松原来长这样 还可以开花
这个豆奶好喝么 有么有人了解
带话题的贴子 我来试试带话题的贴子在小程序能不能进#贴吧预言帝海外遭“通缉”#
《深入浅出vuejs》6 在Vue.js中存在一个VNode 类，使用它可以实例化不同类型的vnode实例，而不同类型的 vnode实例各自表示不同类型的DOM元素。DOM元素有元素节点、文本节点和注释节点等，vnode 实例也会对应着有元素节点、 文本节点和注释节点等。vnode只是一个名字，本质上其实是JavaScript 中一个普通的对象， 是 从 v N o d e 类 实例 化 的 对 象 。 我 们 用 这 个 J a v a S c r i p t 对 象 来 描 述 一 个 真 实 D OM 元 素 的 话 ， 那 么 该DOM元素上的所有属性在VNode这个对象上都存在对应的属性。每次渲染视图时都是先创建vnode，然后使用它创建真实DOM插入到页面中，所以可 以将上一次渲染视图时所创建的vnode缓存起来，之后每当需要重新渲染视图时，将新创建的 v n o d e 和 上 一 次 缓 存 的 v n o d e 进 行 对 比 ， 查 看 它 们 之 间 有 哪 些 不 一 样 的 地 方 ， 找 出 这 些 不 一样 的 地方并基于此去修改真实的DOM。v n o d e 有 很 多 种 不 同 的 类 型 ， 接 下 来 我 们介 绍 不 同 类 型 之 间 有 什 么 区 别 。 v n o d e 的 类 型 有 以 下几种: 1. 注 释 节点 2. 文本节点 3. 元素节点：通常会存在以下4种有效属性。 tag:顾名思义，tag就是一个节点的名称，例如p 、u1、1i和div等。 data:该属性包含了一些节点上的数据，比如attrs、class 和style等。 c h i l d r e n : 当前 节 点 的 子 节 点 列 表 。 context :它是当前组件的Vue.js实例。 4. 组件节点 c o m p o n e n t O p t i o n s : 顾 名 思 义 ， 就 是 组 件 节 点 的 选项 参 数 ， 其 中 包 含 p r o p s D a t a 、 t a g 和chil dren 等信息。 comp onent Inst ance:组件的实例，也是Vue.j s的实例。事实上，在Vue.js中，每个组件 都是一个Vue.js 实例。 5. 函数式组件 6. 克隆节点：将现有节点的属性复制到新节点中，让新创建的节点和被克隆节点的属性保持 一 致，从而实现克隆效果。它的作用是优化静态节点和插槽节 点(slotnode)
《深入浅出vuejs》5.1-5.4 当 状 态 变 得 越 来越 多 ， D O M 操 作 越 来 越 频 繁 时 ， 我 们 就 会 发 现 如 果 像 之 前 那 样 使 用 j Q u e r y 来开发页面，那么代码中会有相当多的代码是在操作DOM，程序中的状态也很难管理，代码中 的逻辑也很混乱。我们的关注，点应该聚焦在状态维护上，而D OM 操作其实是可以省略掉的。本质上，我们将状态作 输入，并生成DOM输出到页面上显示出来，这个过程叫作渲染 在这种情况下，最简单粗暴的解决方式是，既不需要关心状态发生了什么变化，也不需要关 心在哪里更新DOM，我们只需要把所有DOM 全删了，然后使用状态重新生成一份DOM，并将 其输出到页面上显示出来就好了。但是访问DOM是非常昂贵的。按照上面说的方式做，会造成相当多的性能浪费。状态变化 通常只有有限的几个节点需要重新渲染，所以我们不仅需要找出哪里需要更新，还需要尽可能少 地访问 DOM。虚拟D OM的解决方式是通过状态生成一个虚拟节点树，然后使用虚拟节点树进行渲染。 在渲染之前， 会使用新生成的 虚拟节点树和上一 次生成的虚拟节点树进行对比， 只渲 染不同 的 部分。为了避免不必要的D OM操作，虚拟DOM在虚拟节点映射到视图的过程中，将虚拟节点与 上 一次 渲 染 视 图 所 使 用 的 旧 虚 拟 节 点 (o l d V n o d e ) 做 对 比 ， 找 出 真 正 需 要 更 新 的 节 点 来 进 行 D O M 操作，从而避免操作其他无任何改动的DOM。 可以看出，虚拟DOM在Vue.js中所 做的事情其实并没有想象中那么复杂，它主要做了两 件事。 * 提 供 与 真 实 D O M 节 点 所 对 应 的 虚拟 节 点 v n o d e 。 * 将虚拟节点vnode 和旧虚拟节点oldVn ode进行比对，然后更新视图。 两 个 虚 拟 节 点 进 行 比 对 是 虚 拟 D O M 中 最 核 心 的 算 法 ( 即 p a t c h )， 它 可 以 判 断 出 哪 些 节 点 发 生 了 变 化 ， 从 而 只 对 发 生 了 变 化 的 节 点进 行 更新 操 作 。
《深入浅出vuejs》4.2-4.4 vm.$set 前文提到，由于是通过defineProperty来收集依赖的，所以在Object中添加和删除属性时无法检测到。而vm.$set就是解决这个问题的。vm.$set 的具体实现其实是在observer 中抛出的set 方法 如果target 是数组并且key 是一个有效的索引值，就先设置length 属性。这样如果我们传递的索引值大于当前数组的length，就需要让target 的length等于 索引值。接下来，通过splice 方法把val 设置到target 中的指定位置(参数中提供的索引值的位 置)。当我们使用splice方法把val设置到target 中的时候，数组拦截器会侦测到target发 生了变化，并且会自动帮助我们把这个新增 的va1转换成响应式的。 vm.$delete 其 实 v m. $ d e l e t e 内 部 的 实 现 原 理 和 上面 例 子中 写 的 代 码 非 常 类 似 ， 就 是 删 除 属 性 后 向 依 赖 发消息
《深入浅出vuejs》4.1 watch的用法： deep：为了发现对象 内部值的变化， 可以在选项参数中指定dep: true immediate：在选项参数中指定immediate: true，将立即以表达式的当前值触发回调 通 过 w a t c h e r 完全可以实现vm.$watch的功能，但vm.$watch中的参数deep和immediat e是watcher 中所 没 有 的 当exponFn 是函数时，会发生很神奇的事情。它不只可以动态返回数据，其中读取的所有数 据也都会被watcher 观察。当exporFn是字符串类型的keypath时，Watcher 会读取这个keypath 所指向的数据并观察这个数据的变化。而当expOrFn 是函数时，Watcher 会同时观察expOrFn 函 数 中 读 取 的 所 有 V u e . j s 实 例 上 的 响 应 式 数 据 。 也 就是 说 ， 如 果 函 数 从 V u e . j s 实 例 上 读 取 了 两 个 数据，那么watcher 会同时观察这两个数据的变化，当其中任意一个发生变化时 ，watcher 都会 得到通知。 要想实现deep 的功能，其实就是除 了要触发当前这个被监听数据的收集依赖的逻辑之外，还要 把当前监听的这个值在内的所有子值都触发一遍 收集依赖逻辑。这就可以实现当前这个依赖的所 有子数据发生变化时，通知当前wat cher 了
《深入浅出vuejs》3.8-3.13 Ar r a y 在 g e t t e r 中收集依赖，在拦截器中触发依赖。这个依赖保存的 位置就很关键，它必须在getter 和拦截器中都可以访问到。 我们在Observer 中新增了一段代码，它可以在value 上新增一个不可校 举 的 属 性 _ 0 b _ ， 这 个 属 性 的值 就 是 当 前 o b s e r v e r 的 实 例。这样我们就可以通过数组数据的__ob_ 属性拿到observer 实例，然后就可以拿到 _b_ 上的 d e p _b_ 的作用不仅仅是为了在拦截器中访问observer 实例这么简单，还可以用来标 记 当 前 v a l u e 是 否 已 经 被 O b s e r v e r 转 换 成 了 响应 式 数 据 。 如何侦测数据中元素的变化：新增observeArray方法，其作用是循环Array中的每一项，执行observe函数来侦测变化，其实就是将数组中的每个元素都执行一遍newobserver， 这很明显是 一个递归的过程。 如何侦测新增元素的变化：想要获取新增元素，我们需要在拦截器中对数组方法的类型进行判断。如果操作数组的方法 是push、unshift 和splice(可以新增数组元素的方法)，则把参数中新增的元素拿过来，用 Observer 来侦测。 从this._ _ob_ 上拿到observer 实例后，如果有新增元素，则使用 o b . o b s e r v e Ar r a y 来侦测这些 新 增元素的 变化。 前面介绍过，对Arr ay的变化侦测是通过拦截原型的方式实现的。正是因为这种实现方式， 其实有些数组操作Vue.js 是拦截不到的 总结：Array 追踪变化的方式和object 不一样。因为它是通过方法来改变内容的 ，所以我们通过 创建拦截器去覆盖数组原型的方式来追踪 变化
《深入浅出vuejs》3.1-3.7 O b j e c t 的 变 化 是 靠 s e t t e r 来 追 踪 的 ， 只 要 一 个 数 据 发 生 了 变 化 ， 一定 会 触 发 s e t t e r 。 我们可以用 一个拦截器覆盖Arr ay.prototype。之后，每当使用Array原型 上的方法操作数组时，其实执行的都是拦截器中提供的方法，比如push 方法。然后，在拦截器中使用原生Anr ay 的原型方法去操作数组。 有 了拦截器 之后，想要让它 生效，就需要 使用它去 覆盖Ar r a y . p r ot o t y p e 。但是我们 又不能 直接覆盖，因为这样会污染全局的Array，这并不是我们希望看到的结果。我们希望拦截操作只 针对那些被侦测了变化的数据生效，也就是说希望拦截器只覆盖那些响应式数组的原型。 value._proto_ = arrayMethods 它的作用是将拦截器(加工后具备拦截功能的arrayMethods) 赋值给value._proto_ ，通过 _proto_可以很巧妙地实现覆盖value原型的功能 虽然绝大多数浏览器都支持这种非标准的属性(在ES6之前并不是标准)来访问原型，但并 不是所有浏览器都支持!因此，我们需要处理不能使用_ prot_ 的情况。 数 组 在 哪 里 收 集 依 赖 呢 ? 其 实数 组 也 是 在 g e t t e r 中 收集 依 赖 的 。其实不管value是什么，要想在一个object 中得到某个属性的数据，肯定要通 过key 来读取value。因此，在读取list 的时候，肯定会先触发这个名字叫作list 的属性的getter
《CSS世界》10 script标签是不支持嵌套的，因此如果希望再script标签中再放置其他不渲染的模板内容，可以试试使用textarea元素。比如使用WebGL的时候，会将shader的代码放到script标签中，GL读取之后执行 有一些元素是天然display:none的，比如hidden类型的input输入框 display:none显隐控制并不会影响CSS3 Animation动画的实现，但是会影响CSS3 transition过渡效果执行，因此transistion往往和visibility属性走得比较近 display:none是不占据空间的，visibility:hidden会占据空间
《CSS世界》8.7- 9.1 :first-letter和:first-line有一些相似之处，使用时的限制也类似： 1. 首先元素的display计算值必须是block、inline-block、list-item、table-cell或者table-caption 2. 常见的标点符号是辅助字符，不属于first-letter'生效的范围 3. 字符前面不能出现图片或者inline-block/inline-table之类的元素存在 4. 能支持生效的CSS属性也有一些限制 CSS世界的color很单调，表现在： 1. 少的可怜的颜色关键字 2. 不支持transparent 3. 不支持currentColor 4. 不支持rgba和hsla 5. 支持却鸡肋的系统颜色
《CSS世界》8.6.5-8.6.8 white-space声明了如何处理元素内的空白字符，包括Space、Enter、Tab按键产生的空白 white-space的功能分3个维度，分别是：是否合并空白字符、是否合并换行符、以及是否自动换行 由于刚开始是为英文设计的，所以text-align:justify对中文可能存在不好使的情况，如IE浏览器上。要想实现两端对齐的效果，需要满足两点：一是有分隔点，如空格；二是要超过一行，此时非最后一行内容会两端对齐 underline属性可能因为字体不同，对文字有影响，比如离文字特别近，最好的方法是使用border-bottom进行处理
《CSS世界》8.5.2-8.6.4 字体图标的原理是字体 + 字符 字体通过font-family进行设置，通过src属性制定字体源；在使用的时候通过设置content映射到对应的字符上，这样就实现了字体图标，将表情展示出来 因为原始字符和最终的图形表现相差很大，所以当我们的字体加载缓慢的时候，就可以看到明显的变化过程，原始字符x-height和图形x-height往往是不一样的，会影响垂直对齐等问题 text-indent用来设置缩进，但实际情况下已经使用较少，更多的是用来隐藏字体，实现SEO效果 letter-spacing用来设置间距 word-spacing用来设置单词间距 break-all允许任何非CJK文本间的单词断行 break-word是一行单词中实在没有其他靠谱的换行点的时候就换行
《CSS世界》8.2-8.3 font-family的值分为两类： 1. 字体名：字体类型的名字 2. 字体族：如衬线字体和无衬线字体 所谓衬线字体，就是笔画开始、结束的地方有额外的装饰而且笔画的粗细会有所不同的字体。无衬线字体就是没有这些额外的装饰且粗细相同 等宽字体主要是对于英文而言的，中文字体基本都是等宽字体 IOS字体中的SC，是指Simplified Chinese font-weight为数字值时从100到900，必须是100的整数倍，有时候发现设置某个数值不生效，主要原因是没有对应的字体
《CSS世界》7.7-8.1 z-index的使用建议不过2，主要原因是可以通过合理的布局来避免z-index，因为当z-index不设限制的时候，不同的开发者会设定越来越高的z-index值，从而导致层级混乱，尤其是当一个z-index调整时会影响另一个，这一点在我们的代码中也有体现，出现过类似的case vertical-align的百分比是相对于line-height计算的，这两者有联系 ex是字符的高度 1em等于当前元素所在的font-size的计算值 rem是相对于根元素的，我们的适配用的就是rem font-size的关键字，有一定的对应规则，但可能在不同浏览器上有不同表现
今天天气不错，爬个山 凤凰岭真难爬啊
《CSS世界》7.2-7.6 CSS世界层叠顺序类型标注： background/border < z-index负值 < block块状水平盒子 < float浮动盒子 < inline水平盒子 < z-index 0 < z-index正值 当元素发生层叠的时候，其覆盖关系遵循两条准则： 1. 谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个 2. 后来居上：当元素的层叠水平一致，层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素 能创建层叠上下文的方法有3种： 1. 根元素 2. z-index的值为数值创建的层叠上下文 3. 其他CSS3属性 在CSS3里面，能够创建层叠上下文的场景变多了很多，比如opacity不为0、transform属性等等 z-index负值渲染的过程就是一个寻找第一个层叠上下文元素的过程，然后层叠顺序止步于这个层叠上下文元素
《CSS世界》6.9-7.1 relative、absolute和fixed都可以限制absolute的位置，但这里面只有relative是可以让元素保持在正常的文档流中。relative的定位有两大特性，一是相对自身，二是无侵入 相对自身是指relative里面的top、left等属性是相对于元素本身在文档流中的位置来进行定位的 无侵入是指当relative进行定位偏移的时候，一般情况下不会影响周围元素的布局。 relative最小化原则：使用relative时尽量让relative的元素最小，这样可以避免对后续布局的影响，比如absolute定位、z-index都会受到relative的影响，如果DOM调整时需要影响很多元素 fixed定位禁止背景滚动，可以通过模拟固定来解决，也可以通过overflow:hidden来处理
《CSS世界》6.7-6.8 CSS中的clip属性必须和其他属性一起使用才有效，要求position必须是absolute或者fixed、clip属性的四个值，与CSS中其他属性的顺序一致：top->right->bottom->left clip是最佳可访问性隐藏，通过添加clip都为0可以隐藏DOM，并且可访问 设置了对立定位属性的绝对定位元素的表现神似普通的div元素，无论是padding还是margin，其占据的空间一直不变，变化的就是content box的尺寸 当具有流体特性的时候，margin的属性也会根据auto自适应
《css》6.5.2-6.6 absolute是非常独立的CSS属性值，其样式和行为表现不依赖其他任何CSS属性就可以完成 把没有设置left /top/right/bottom属性值的绝对定位称为无依赖绝对定位，很多场景下无依赖绝对定位要比使用left/top之类属性定位和强大很多，因为其“相对定位特性”，相对性和不占据空间这两个特性在开发时非常有用 右上角小图标，可以通过position absolute加上margin的形式定位，可以方便的确认距离，相对于100%这种形式更加灵活 其他场景类似，主要使用相对性来调整距离，实现灵活布局，使用不占空间的特性来解决占位问题，不影响文档流的布局 绝对定位元素不总是被父级元素的overflow属性剪裁，尤其当overflow在绝对定位元素及其包含块之间的时候。
《CSS世界》6.5-6.5.1 position: absolute和float: left是兄弟关系，都兼具包裹性、块状化和破坏性的特性 包含块是width采用百分比时的相对元素，包含块的优先级： 1. 根元素，称为初始包含块 2. position是relative和static，则包含块是最近的块元素 3.position是fixed的包含块是初始包含块 4. absolute的包含块则是position不为static的祖先元素 内联元素的包含块可以受::first-line伪元素影响，但不受::first-letter伪元素影响
发个图文贴 据说图片有点问题
《CSS世界》6.4.5 实现锚点跳转的方法有两种：一种是a标签以及name属性，还有一种就是使用标签的id属性。有两种情况可以触发锚点行为： 1. URL地址中的锚链与锚点元素对应并有交互行为 2. 可focus的锚点元素处于focus状态 focus锚点定位指的是类似链接或者按钮、输入框等可以被focus的元素在被focus时发生的页面重定位现象。需要注意，在H5端使用这个特性的时候，可能会调起键盘 设置了overflow:hidden的元素也是可以滚动的。虽然看起来没有，但滚动真实发生了，只是滚动条不存在。
测试bug 图片旋转问题
最近的生活 我来测一个bug
《CSS世界》6.3~6.4.4 BFC：块级格式化上下文，如果一个元素具有BFC，内部子元素再怎么翻江倒海、翻云覆雨，都不会影响外部的元素。所以BFC不可能发生margin重叠，也可以清除浮动。触发BFC的条件包括： 1. html根元素 2. float的值不为none 3. overflow的值为auto、scroll或hidden 4. display的值为table-cell、table-caption和inline-block中的任何一个 5. position的值不为relative和static 这些方法中，在创建BFC享受特性的同时，也会有一些副作用，比如float会触发浮动，position：absolute会脱离文档流，相对而言只有overflow:hidden的影响最小 如果overflow-x和overflow-y属性中的一个值设置为visible，而另一个设置为scroll、auto或者hidden，则visible的样式表现如同auto 在PC端，无论什么浏览器，默认滚动条均来自html，而不是body，所以如果要去除滚动条，应该设置html而不是body属性
《CSS世界》6.1.2-6.2 为什么float会导致高度塌陷？ float设计之初是为了文字环绕的，而文字环绕这种上世纪风格的效果现在已然不流行了，于是float很少发挥原本作用，反而被大肆用作满屏布局，显然布局的时候是不需要父元素塌陷的，于是高度塌陷反而成为了float属性的一个不得不重视的坑。 float的另一个特性就是“行框盒子区域限制”：行框盒子如果和浮动元素的垂直高度有重叠，则行框盒子在正常定位状态下只会跟随浮动元素，而不会发生重叠。 clear属性：元素盒子的边，不能和前面的浮动元素相邻。所以，只是设置了clear属性的元素自身如何如何，而不是让float元素如何如何。 clear属性是让自身不能和前面的元素相邻，注意这里前面的3个字，也就是clear属性对后面的浮动元素是不闻不问的。clear属性只有块级元素才有效的
《CSS世界》5.3.5-6.1.1 vertical-align：text-top：盒子的顶部和父级内容区域的顶部对齐 vertical-align：text-bottom：盒子的底部和父级内容区域的底部对齐 关键在于“父级内容区域”的概念如何理解，指的是在父级元素当前font-size和font-family下应有的内容区域大小。 vertical-align：super：提高盒子的基线到父级合适的上标基线位置 vertical-align：sub：降低盒子的基线到父级合适的下标基线位置 如何区分上下：可以根据p和b来记忆，圆圈在上表示上标基线，圆圈在下表示下标基线 vertical-align开始设计了很多属性，设计之初是为了文字布局使用的，所以也比较复杂，但现在很多属性值实际使用场景较少，是因为现在受到了很多限制，布局不仅仅是文字场景 float属性在设计之初是为了解决文字环绕问题，但作者不推荐使用，因为用起来bug较多。flot的元素有4个特性： 1. 包裹性：由包裹和自适应性两部分组成，包裹是指对子元素的宽度进行包裹，自适应性是指根据子元素内容进行自适应，不会超出父元素宽度 2. 块状化并格式化上下文：float的元素会成为block或者table，此时vertical-align失效 3. 破坏文档流 4. 没有任何margin合并
《CSS世界》5.3.2-5.3.4 vertical-align起作用是有前提条件的，只能作用在display计算值为inline，inline-block，inline-tabl或者table-cell的元素上。因此，块级元素是不支持的 vertical-align的百分比是相对于line-height计算的。 间隙产生的三大元凶：幽灵空白节点、line-height和vertical-align，解决方案也是从这里入手： 1. 图片块状化，干掉幽灵空白节点 2. 容器line-height足够小，只要半行间距小到字母x的下缘位置或者再往上就没有撑开的间隙了 3. 容器的font-size足够小 4. 图片设置其他vertical-align属性 vertical-align的属性默认值baseline在文本之类的内联元素就是字符x的下边缘，对于替换元素则是替换元素的下边缘。但对于inline-block元素，如果里面没有内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则其基线就是元素里面最后一行内联元素的基线
《CSS世界》5.2.2-5.3.1 “要想让单行文字垂直居中，只要设置line-height大小和height高度一样就可以了”该说法有两个误区： 1. 要让单行文字居中，只需要line-height一个属性就可以了 2. 行高控制文字居中，不仅适用于单行，多行也是可以的，但只能是近似居中 近似居中的原因，是因为文字字形的垂直中线位置普遍要比真正的行框盒子的垂直中线位置低 要实现多行文字居中，需要将文字用一个元素包裹，设置为inline-block，然后通过内层和外层的line-height实现垂直居中 line-height有3类值： 1. 数值 2. 百分比值 3. 长度值 区别在于使用数值作为line-height时，所有子元素都是继承这个值 无论line-height如何设置，最终父级元素的高度都是由数值大的那个line-height决定的 vertical-align的值分位四类 1. 线类 2. 文本类 3. 上标下标类 4. 述职百分比类
《CSS世界》4.4.6~5.2.1 border属性实现等高布局：通过border-left的宽度，预留左侧内容，子元素通过负margin定位，能简单的实现等高 字母x所决定的位置： * 基线：字母x的下边缘，就是baseline * ex：小写字母x的高度 * vertical-align：middle所指的位置，就是基线往上1/2 x-height高度，可以近似理解为字母x交叉点的位置 ex的用处：内联元素默认是基于baseline对齐的，baseline就是x的底部，而1ex就是一个ex的高度。当图标高度就是1ex，同时背景图片居中，就是图标 对于非替换元素的纯内联元素，其可视高度完全由line-height决定，padding、border属性对可视高度是没有任何影响的。line-height = font-size + 行距 内联元素的高度由固定高度和不固定高度组成，不固定高度就是行距 * embox：由font-size决定 * 内容区：文字实际展示的高度，对于宋体，embox等于内容区，而对于其他字体，可能存在内容区超出embox的情况，比如英文字符q或者g的小尾巴是在embox之外 当字体为总体时，embox = 内容区 embox就是font-size，内容区就是实际看到的文字，由于字体问题，实际看到的文字可能超出embox，视觉上也就是行高不是两边均分的现象 替换元素高度不受line-height影响。当可替换元素和行内元素在一行时，line-height的作用是决定这个行盒的最小高度。
《CSS世界》4.4-4.4.5 border-width属性：不支持百分比，主要原因是业务场景中不需要，一般无论是在多大的屏幕上，border的宽度都是相对固定的，不会有border等比缩放的场景。 border-width的默认值是medium，约等于3px，并不是1px border-style属性：border-style的默认值是none，并不是solid，所以我们如果想让边框展示出来，必须有明确的border-style属性设置才可以。 * solid：最常用 * dashed：虚线颜色区的宽高比和透明区的宽度比在不同浏览器下是有差异的 * dotted：虽然规范上是个圆点，但在不同浏览器中是不同的，在IE上是圆点，在firefox是小方点 * double：两条线的边框，这也就是为什么border-width是3px的原因，只有3px的时候才能满足两条线边框。分配原则是：两条线的宽度永远相等，中间间隔等于宽度+1或者-1 border-color属性：border-color的默认值是color的默认值，这一点有个应用，比如上传图片的+号，都用border-color设置颜色，当hover的时候就只需要修改一个color即可，不需要修改其他的地方 border-color的transparent属性有非常强大的功能，可以用该值来画不同形状的三角形，需要理解各个border的实现机制 同样，border-color:transparent也可以用来扩大热区的场景。前面提到padding也可以增加热区，但如果我们使用雪碧图的场景，修改padding可能影响background-position的定位，所以这时候可以用border-color来实现效果
《CSS世界》第六读 margin的百分比，无论是水平方向还是垂直方向都是相对于宽度计算的 margin合并：块级元素的上外边距和下外边距有时会合并为单个外边距，这样的现象称为margin合并。此处有2个要点：一是块级元素，二是只发生在垂直方向。阻止margin合并的方法： 阻止margin-top合并，可以进行如下操作： 1. 父元素设置块级格式化上下文 2. 父元素设置border-top 3. 父元素设置padding-top 4. 父元素和第一个子元素之间添加内联元素进行分隔 阻止margin-bottom合并： 1. 父元素设置为块状格式上下文 2. 父元素设置为border-bottom 3. 父元素设置padding-bottom 4. 父元素和最后一个子元素之间添加内联元素进行分隔 5. 父元素设置height、min-height或max-height margin合并的规则：正正取大值，正负值相加，负负最负值 margin auto常用来做居中
《CSS世界》第五读 给行内元素设置padding看起来似乎没有生效，并没有影响页面的布局，但其实并不是没有生效，只是没有影响布局而已。这种不影响其他元素布局而是出现层叠效果的现象，分位两类：一类是纯视觉层叠，不影响外部尺寸，另一类会影响外部尺寸（注意只是影响外部元素尺寸，并不是影响布局）。内联元素的padding会改变父元素的高度，超出时会有滚动条效果。 padding的妙用： 1. padding不会影响布局，但是却可以实实在在的影响元素的热区，如果我们想扩大超链接的热区，可以通过padding来调大热区，这时候既不影响布局，又可以加大响应区域 2. 进入到页面锚点的时候，如果顶部有导航栏占位，那么实际的锚点会被导航栏遮挡，这时候可以在需要锚点的位置增加一个行内元素，并且设置其padding-top，这样在锚点的时候就会直接卡到padding-top的区域，将顶部导航栏空出来，这个非常重要，我们的业务代码中经常有这种场景，现在用js处理的比较多 3. padding的百分比都是相对于宽度的，这一点很重要，比如需要实现一个16:9的图片，或者正方向，就可以利用这一点做好布局 margin属性同样可以改变元素的可视尺寸，只要元素的尺寸表现符合“充分利用可用空间”这一原则，无论是垂直方向还是水平方向，都可以通过margin来改变尺寸，特别是当margin设置为负值时，会扩大元素尺寸
《CSS世界》第四读 content可以用于： 1. 伪元素（辅助元素生成）一般有两个作用：清除浮动和 实现两端对齐效果 2. 字符内容生成 3. 图片内容生成 可以通过content计数器实现计数效果： * counter-reset：给计数器起个名字，并且表示从何处开始计数 * counter-increment：值为counter-reset指定的1个或多个关键字，后面可以跟随数字，表示每次计数的变化值 * counter()/counters()是方法而不是属性，这里的作用是显示计数，counter还支持级联，也就是说一个content属性可以有多个conter()方法 * counters方法，可以说是嵌套计数的代名词 这一章节介绍的主要是content的各种用法，平时用的最多的主要是伪元素，这里进行了扩充
《CSS世界》第三读 首先介绍什么是可替换元素：通过修改某个属性值，呈现的内容就可以被替换的元素就称为可替换元素，比如img、object、video、iframe、textarea、input 可替换元素的特点： * 内容的外观不受页面上的CSS的影响 * 有自己的尺寸 * 在很多CSS属性上有自己的一套表现规则 * 替换元素的默认display值都是inline或者inline-block，这就代表着input等输入框可以和span在同一行出现 替换元素的尺寸从内往外分为3类： * 固有尺寸指的是替换元素内容原本的尺寸 * HTML尺寸略抽象，只能通过HTML原生属性改变 * CSS尺寸特指可以通过CSS的width、height等设置的尺寸，对应content-box CSS世界中的替换元素的固有尺寸有一个很重要的特性，那就是我们是无法改变这个替换元素内容的固有尺寸的。比如图片资源的固有尺寸是无法改变的，我们设置图片宽高时，其实是content替换内容默认的适配方式是fill，尺寸变化的本质并不是改变固有尺寸，而是采用了填充作为适配HTML尺寸和CSS尺寸的方式，而在CSS3之前，这个fill是无法改变的，直到CSS3出现了object-fit 替换元素和非替换元素的距离，就是content属性，content属性生成的内容都是替换元素
双十一预算3000组装一个台式机（不需要显示器） 双十一了，想给自己买个玩具奖励一下，预算3000左右，想搞个台式机主机，显示已经有了所以单主机就行 本来想直接买组装好的，后来听说这里水很深，所以想尝试自己组装一个 求助吧内大神有什么建议吗，能玩黑神话和英雄联盟就行，真心求教，谢谢！
《CSS世界》第二读 对于块状元素，width设置成auto，则元素就会如水流般充满整个容器，而一旦设定了width具体数值，则元素的流动性就会被阻断。这世界上任何事物，一旦限制死了，就丧失了灵活性，而“无宽度准则”就会让布局更灵活，容错性更强。 都知道盒模型有content-box和border-box，其实一共有4个 1. content-box：默认值 2. padding-box：firefox 3. border-box：全部支持 4. margin-box：从未支持过，没有必要 box-sizing的发明初衷，是为了替换元素，因为替换元素的特性之一就是尺寸由内部元素决定，无论其display属性值是inline还是block，其宽度不受display属性的影响。 关于height：100%：如果父元素height:auto，只要子元素还在文档流中（不是绝对定位的），其百分比值就完全被忽略了。绝对定位的元素，其高度会默认撑满，但同时会脱离文档流 需要注意，绝对定位元素的百分比是相对于父元素的padding box而言的，也就是说会把padding计算在内，而非绝对定位元素则是相对于content box计算的。 min-width/height和max-height/width的作用：超越!important，超越最大 超越!important：是指max-width会超过!important定义的宽度 超越最大：min-width会超过max-width 所以，综上就是min-width > max-wdith > !important 任意高度元素的展开动画：使用height:auto属性无动画效果，但是使用max-height有效果，但动画过程是相对于max-height而言的，所以max-height也不宜过大，否则会导致动画卡顿、丢失 幽灵空白节点：任何一个行框盒子前面都有一个空白节点，这个空白节点永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，又确确实实存在，我们认为在span元素前面有一个宽度为0的空白字符，会影响父级元素的高度，这一点在后面的布局中非常重要
《CSS世界》第一读 CSS中文层叠样式表，重点在于层叠，层叠的意思是指，其样式可以不断的被层叠、覆盖，直到最后一层的样式生效 CSS本身就是为了展示图文内容而生的，在发展的过程中不断演化升级，所以在这里要从头开始，构造一个CSS世界。 流式布局并不等同于自适应布局，其实要比自适应布局狭窄的多。 在css之前是table布局，table并不适用流的概念，因此一些css属性的表现，如单元格的vertical-align和普通元素也不一样 长度单位分位相对长度单位和绝对长度单位： * 相对长度单位：一是相对于字体长度单位，如em和ex，二是相对于视区的长度单位，如vh、vw * 绝对长度单位：包括px、pt、cm等 选择器的种类包括：id选择器、类选择器、标签栓择期、属性选择器、伪元素选择器、伪类选择器 关系选择器包括：后代选择器、相邻后代选择器、兄弟选择器、相邻兄弟选择器 块级元素：一个水平流上只能单独显示一个元素，多个块级元素换行显示 块级元素包括div、li和table，需要注意块级元素并不等于display:block的元素 将块级元素和内联元素考虑成容器盒子 + 内容盒子，那么： *display: block其实就是block-block，容器盒子和内容盒子都是block * display:inline-block，容器盒子是inline，内容盒子是block * display: inline-inline，容器盒子是inline，内容盒子是inline * display：inline-table，容器盒子是inline，内容盒子是table width和height是实际的尺寸，影响的是内容盒子 外部尺寸：元素宽度由外部元素决定 内部尺寸：元素宽度由内部元素决定 无宽度的布局：注意不要轻易定宽，定宽会让元素失去自适应的特性，要利用好元素的自适应性，实现更加灵活布局
《uni-app多端跨平台开发》第11.6~11.14 在购物车这一节中，通过vuex进行了全局的状态管理，由于我们开始采用的是vue3，pinia存在一些问题，导致没有生效，当前已切换vue2，后续可以考虑增加vuex 使用了vue和vuex之后，代码组织形式上与传统vue非常类似，不同之处在于： 1. HTML中都是view标签为主，与传统div不同 2. 在js部分，能用uni的方法，就不用原生的方法写 在最终发布上线环节，使用的是HBuilder X，我们当前使用的是VSCode，后续也可以关注下HBuild X是否有便利
《uni-app多端跨平台开发》第11.3~11.5 使用vuex进行了全局的状态管理，我们现在还没有引入，后期需要考虑 整体开发代码上，由于使用了vue2和vuex，其实跟vue的差别不大，需要特别注意的是，这里用到了大量内置的生命周期和API，比如onLoad生命周期、onReachBottom等方法 并且提供了获取位置等API封装，使用上更方便，功能更强大，但需要注意有些特性H5可能并不支持
《uni-app多端跨平台开发》第11.1~11.2 image标签自带lazyload功能，设置相关属性即可开启 uniapp已内置vuex，无需安装即可使用 网络请求直接使用uni.requestAPI函数，用promise进行一层封装 刘海屏的设置可以通过getSystemInfo获取，并且放在store中供全局调用 onReachBottom可以监听到是否滚动到底部，滚动到底部并且还有下一页时可以调用vuex里面方法获取下一页的数据
《uni-app多端跨平台开发》第10.13~10.21章 uni.makePhoneCall可以拨打电话 uni.scanCode可以扫码 uni.createAnimation可以实现动画，按照书上所说，其性能高于CSS动画，API能力强大，并且通过js方式提供了回调，使用起来比较方便，但实际性能效果如何，需要在业务中验证下 onPullDownRefresh可以定义下拉刷新时的回调函数，不需要自己写下拉刷新事件的监听，uni.stopPullDownRefresh可以终止下拉刷新动画 uni.login可以实现登录，支持各个平台，但H5不支持 uni.getUserInfo可以获取用户信息 uni.requestPayment调起微信支付 uni.createSelectQuery可以创建一个对象，其select、selectAll方法可以选择具体的DOM
发贴前缀1我做的菜怎么样 周末做的，大家打个分吧！
《uni-app多端跨平台开发》第10.8~10.12章 动态设置tabBar： uni.setTabBarItem可以设置tabBar的某一项内容 uni.setTabBarStyle可以动态设置tabBar的整体样式 uni.hideTabBar可以隐藏tabBar uni.showTabBar可以显示tabBar uni.setTabBarBadge可以为tabBar某一项的右上角添加文本 uni.removeTabBarBadge可以移除tabBar某一项右上角的文本 uni.showTabBarRedDot可以显示某一项右上角的红点 uni.hideTabBarRedDot可以隐藏某一项右上角的红点 uni.getRecorderManager可以获取全局唯一的录音管理器 uni.createVideoContext创建并返回video上下文videoContext对象 uni.createVideoContext API的sendDanmu方法可以轻松实现弹幕功能，可见uniapp的组件封装是非常全面的 uni.getNetworkType可以获取网络类型，uni.onNetworkStatusChange事件可以监听网络状态的变化 uni.setClipboardData可以设置剪切板的内容，uni.getClipboardData可以获取系统剪切板的内容
《uni-app多端跨平台开发》第10.5~10.7章 uni.getSystemInfo和uni.getSystemInfoSync可以获取系统相关信息，包括屏幕高度，这里需要注意的是在有APi使用的情况下，尽量使用API提供的能力，而不是原生的H5方法获取，这样可以最好的保障兼容性 获取手机型号也可以在uni.getSystemInfoSync中获取，不需要使用UA uni.showLoading和uni.showToast都可以提供简单的loading、toast弹窗，可以直接使用 uni.showModal显示模态弹窗，相当于alert和confirm uni.showActionSheet显示操作菜单，经常用于选择性别以及选择相册还是拍照等功能 uni.setNavigationBarTitle可以动态设置标题 uni.setNavigationBarColor可以动态设置颜色 uni.showNavigationBarLoading和uni.hideNavigationBarLoading可以控制加载进度条
《uni-app多端跨平台开发》第10.1~10.4章 uniapp的JS API由标准ECMAScript的js API和uni扩展API两部分组成，扩展API命名与小程序相同。 在开发时不要把浏览器里的JS等价于标准JS，浏览器基于标准JS扩充了window、document等JS API，Node.js基于标准JS扩展了fs等模块，小程序也基于标准JS扩展了wx.xx/swan.xx的API。 可以使用uni.request发送请求，使用方式类似jQuery的ajax。与小程序一致，如果实在真机环境下，必须要请求https，且在后台配置域名白名单，设置为post请求方式时，必须配置header参数。 文件上传需要使用uni.chooseImage和uni.uploadFile方法，在微信小程序中不支持批量上传，所以需要循环调用uni.uploadFile来实现上传。 设置本地存储时，有同步和异步两种方式，对应的API分别是： setStorage getStorage setStorageSync getStorageSync removeStorage removeStorageSync uni.getLocation可以获取位置，配合map组件可以定位我的位置显示到地图上，相关权限需要注册申请
《uni-app多端跨平台开发》第9.11~9.17章 textarea用于多行文本输入，需要注意以下问题： 1. 在textarea中实际输入时，换行符是/r/n，而如果在rich-text组件展示时要用/br，所以需要一轮转换 2. textarea组件不能改顶起键盘之后的确认按钮文案 3. 顶起键盘交互时与input相比有一些diff，实际使用时需要慎重 webview组件有一些限制： 1. 一定要有原生导航栏 2. 一定是全屏的：所以frs的某个tab用H5来实现是不可行的 3. 能打开的网页需要配置白名单 4. 最终在H5中转换成iframe image标签直接支持lazyload，使用起来比较方便，需要注意当页面结构比较复杂的时候，使用image可能导致样式生效变慢，出现闪一下的情况，此时设置will-change: transform可以优化此问题。will-change会告诉浏览器该元素会有哪些变化，这样浏览器可以在元素属性真正发生变化之前做好对应的优化准备工作 switch在不同小程序平台颜色是不一样的，如果修改需要用color属性，如果需要改变大小需要用scale方法调节 uniapp提供audio组件，相比之下更推荐用uni.createInnerAudioContext方法，UI样式可以全部自定义。这一点在评分贴的语音组件中有体会，直接用audio组件导致一些事件无法触发，比如语音的倒计时只能通过setTimeout来模拟，后面可以试下uni.createInnerAudioContext方法，从兼容性考虑格式用mp3 video组件支持mp4、webm和ogg。在H5中如果需要使用三方video，可以通过条件编译来区分。从组件来看，video组件的功能非常强大，但实际使用效果需要实战
《架构即未来》16-18章读书笔记 风险是客观存在的，某种程度上风险是一个累积的过程，那些成功企业要么是风险管理很有效，要么是迄今为止非常幸运。 测量风险的方法，一是直觉法，这种方法的缺点是很少可以复制。二是交通灯法，通过将行动分解成最小的组件，并用绿色、黄色或者红色来表明其风险等级。三是故障模式及影响分析法，方法与交通灯方法类似，系统被分解成最小的组成部分进行风险评估，选择使用1/3/9作为打分的范围。 风险评估完成后必须进行管理，这一步可以分解为管理急性风险和管理整体风险。急性风险针对单一行动，而整体风险针对一段时间的变更所带来的风险。 17章讨论性能测试和压力测试，性能测试分位7个步骤： 1. 确定应用的标准 2. 简历适当的测试环境 3. 选择合适的测试服务 4. 执行测试 5. 分析数据 6. 向工程师报告 7. 必要的重复 压力测试分位8个步骤： 1. 确定测试的目标 2. 选择要测试的关键服务 3. 确定需要产生多少负载 4. 建立适当的测试环境 5. 确定必需的检视点 6. 产生实际的测试负载 7. 执行测试 8. 分析数据 性能测试和压力测试对可扩展性的影响可通过预留空间、变更控制以及风险管理实现 18张介绍障碍条件与回滚，主要是为了确保一旦事故发生可以快速恢复。主要分位3个部分： 1. 障碍条件：在开发的过程中早期发现并消除对未来的可扩展性有影响的风险 2. 回滚能力允许立刻消除任何与可扩展性相关的威胁 3. 服务降级和禁用功能允许当问题发生时，可以暂时关闭影响可扩展性的功能
1 下一页