Html
关注
分享
扫一扫
SeriousLose
✎﹏小飞飞 认真你就输了，一直认真你就赢了
展开
-
input Type
Input Type button 没有默认行为的按钮，上面显示 value 属性的值，默认为空。 <inputtype="button" name="button" /> radio 单选按钮，允许在多个拥有相同 name 值的选项中选中其中一个。 <input type="r...原创 2021-12-01 21:15:23 · 612 阅读 · 0 评论 -
图片加载慢
const cache = {}; // 模拟缓存 // 坏的 // 不要在函数中嵌入缓存逻辑 const func = (key) => { if (key in cache === false) { const value = key + key; // 逻辑处理,抽离出来 cache[key] = value; } return cache[key]; }; func('aa'); func('aa’); //...原创 2021-10-19 17:33:02 · 323 阅读 · 0 评论 -
Click（点击）
点击事件 点击事情方式 监听点击事件 事件响应方式 <button id="btn" onclick="threeFn()">点我</button> // 第一种 通过点击事件 btn.onclick = function () { alert('这是第一种点击方式'); };...原创 2021-09-07 06:48:53 · 1719 阅读 · 0 评论 -
Vue (响应式原理-模拟-3-Compiler)
Compiler 功能 负责编译模板，解析指令/插值表达式 负责页面的首次渲染 当数据变化后重新渲染视图 // 负责解析指令/插值表达式class Compiler { constructor(vm) { this.vm = vm this.el = vm.$el ...原创 2021-09-05 11:34:54 · 189 阅读 · 0 评论 -
Vue (响应式原理-模拟-2-Observer)
Observer 功能 负责把 data 选项中的属性转换成响应式数据 data 中的某个属性也是对象，把该属性转换成响应式数据 数据变化发送通知 添加 Dep 和 Watcher 的依赖关系 数据变化发送通知 ...原创 2021-09-02 11:50:53 · 141 阅读 · 0 评论 -
Vue (响应式原理-模拟-1-vue)
Vue 功能 负责接收初始化的参数(选项) 负责把 data 中的属性注入到 Vue 实例，转换成 getter/setter 负责调用 observer 监听 data 中所有属性的变化 负责调用 compiler 解析指令/插值表达式 ...原创 2021-09-01 23:55:21 · 133 阅读 · 0 评论 -
Snabbdom（虚拟dom-5-patch函数）
patch(oldVnode,newVnode) 俗称打补丁，把新节点中变化的内容渲染到真实DOM,最后返回新节点作为下一次处理的旧节点 对比新旧VNode是否相同节点（节点的key和sel相同） 如果不是相同节点，删除之前的内容，重新渲染 如果是相同节点，再判断新的VNode是否有text，如果有并且和oldVnode的test不同，直接更新文本内容； ...原创 2021-08-15 08:36:18 · 242 阅读 · 0 评论 -
Snabbdom（虚拟dom-4-init函数）
import { DOMAPI, htmlDomApi } from "./htmldomapi";import * as is from "./is";import { Module } from "./modules/module";import { vnode, VNode } from "./vnode";// 导入依赖的模块// 定义类型type NonUndefined<T> = T extends undefined ? never : T;funct..原创 2021-08-15 08:34:25 · 217 阅读 · 0 评论 -
Snabbdom（虚拟dom-h函数）
h函数 vue中使用h()函数 new Vue({router,store,render:h=>h(App)}).$mount(“#app”) h()函数最早见于hyperscript,使用JavaScript创建超文本 Snabbdom中的h()函数不是用来创建超文本，而是创建VNode 函数的...原创 2021-08-15 07:02:09 · 299 阅读 · 0 评论 -
Snabbdom（虚拟dom-源码）
Snabbdom源码解析 如何学习？ 宏观了解 带目标看源码 看源码过程要不求甚解 要多进行调试 多参考相关资料 Snabbdom的核心 使用h()函数创建JavaScript对...原创 2021-08-15 07:00:39 · 206 阅读 · 0 评论 -
Snabbdom（虚拟dom）
创建项目 创建项目目录 snabbdom md snabbdom 初始化package.json npm init 或 yarn init 安装打包工具 npm install parcel-bundler --save-dev 或 yarn add...原创 2021-08-14 16:36:28 · 386 阅读 · 0 评论 -
Virtual DOM（虚拟dom-2）
为什么要使用虚拟DOM 手动操作DOM比较麻烦，还需要考虑浏览器兼容性问题，有了jQuery等库简化DOM操作，随着项目的复杂DOM操作复杂提升。 为了简化DOM的复杂操作出现了各种MVVM框架，MVVM框架解决了视图和状态的同步问题； 为了简化视图操作，使用了模板引擎，但是模板引擎没解决跟踪状态变化的问题，于是Virtual DOM出现了。 ...原创 2021-08-12 23:50:25 · 147 阅读 · 0 评论 -
Virtual DOM（虚拟dom-1）
什么是虚拟DOM？ 虚拟DOM是由普通的JS对象来描述DOM对象，因为不是真实的DOM对象，所以叫虚拟DOM。 DOM 修改流程 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="v...原创 2021-08-12 09:01:30 · 181 阅读 · 0 评论 -
Dom-to-image
实现原理 使用svg的一个特性，允许在<foreignobject>标签中包含任意的html内容。 主要是 [XMLSerializer |dom转为svg] dom 转换为XHTML XMLSerializer 对象使你能够把一个 XML 文档或 Node 对象转化或“序列化”为未解析的 XML 标记的一个字符串 ...原创 2021-07-26 15:39:01 · 1512 阅读 · 0 评论 -
HTML Img（Type）
JPEG JPEG 是由 Joint Photographic Experts Group 所开发出的一种图片。 它最大的特点是 有损压缩。这种高效的压缩算法使它成为了一种非常轻巧的图片格式。 另一方面，即使被称为“有损”压缩，JPG 的压缩方式仍然是一种高质量的压缩方式： 当我们把图片体积压缩至原有体积的 50% 以下时，JPG 仍然可以保持住 60% 的品质。 此外，JPG 格式以 24 位存储单个图，可以呈现多...原创 2021-07-06 16:10:04 · 742 阅读 · 0 评论 -
HTML Img Compression（压缩）
图片压缩又分为有损压缩和无损压缩。 有损压缩 有损压缩指在压缩文件大小的过程中，损失了一部分图片的信息，也即降低了图片的质量（即图片被压糊了），并且这种损失是不可逆的。 常见的有损压缩手段是按照一定的算法将临近的像素点进行合并。 压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。 因此有损压缩可以在同等图片质量的...原创 2021-07-06 16:03:59 · 861 阅读 · 0 评论 -
两列布局,左右拖拽
第一种利用的css的方式实现， 利用浏览器非 overflow:auto 元素 设置 resize 可以拉伸的特性实现无JavaScript的分栏宽度控制。 webkit浏览器下滚动条可以自定义，其中resize区域大小就是scrollbar的大小， 于是，我们可以将整个拉伸区域变成和容器一样高 红色的就是扩大后的区域<!DOCTYPE html><html lang="en"> <head> <meta charset="U.原创 2021-03-24 22:42:26 · 1070 阅读 · 0 评论