- 博客(104)
- 收藏
- 关注
RSS订阅原创 html复习
Jsonp是前端程序员为了解决跨域问题，提出的一种解决拌饭，只支持get请求，不支持post请求，jnonsp是实现定义一个用于获取跨域响应数据的回调函数，通过没有同源策略限制的script标签发起的一个请求，将回调函数的名称放到这个请求的query参数中，然后服务端返回这个回调函数的执行，并将需要响应的数据放到回调函数的参数里，前端的script标签请求到这个执行的回到函数中立马执行，于是就拿到了执行的响应数据。控制首页链接数量， 网站首页不能有太多的链接，也不能有太少的链接。外链选择，友站友情链接。
2024-08-12 16:01:18
873
1
原创 虚拟dom-Diff算法
diff是新旧内容之间的区别经计算，vue中的diff算法，就是通过一种简单而且高效的手段对比出新旧节点数组之间的区别以便以最小的dom操作来更新页面内容对比的是vnode数组同时存在新旧两组vnode数组真实的dom节点都是树的形式存在的，根节点都是, 为了保证虚拟节点能和真实dom节点一样，vnode也采用树形结构。
2024-08-10 20:08:39
1095
原创 webpack sourcemap
@FilePath: \undefinedc:\Users\zhangjiaxuan\Desktop\新建 文本文档.md* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE。
2024-08-08 17:26:17
648
原创 webpack plugin
syncWaterfallHook是一个同步的，瀑布类型的hook，瀑布类型的钩子就是如果前一个事件的函数结果部位undefined，则result会作为后一个事件函数的第一个参数，也就是上一个函数的执行结果会成为下一个函数的参数。tapable是一个类似于nodejs的eventEmitter的库， 主要是控制钩子函数的发布喝定于，当时，tapable提供您的hook机制比较全面，分为同步和异步两个大类， 根据事件执行的终止条件的不同。BailHook: 顺序执行hook，遇到第一个结果result!
2024-08-08 15:54:44
468
原创 响应式系统原理 vue3 api
让一个响应式数据变成只读的。[深只读]深层次的也不可读。readonly函数只能将一个对象转换为只读对象，但是不能将一个数组或者map等其他类型的数据结构转换为只读对象，如果需要将这些数据结构转换为制度对象，可以使用readonly函数和deepReadonly函数的组合、属性是只读的，所有数据不可以被修改。
2024-08-01 16:44:35
383
原创 响应式系统实现computed-vue3
定义了 _value私有变量用于缓存上一次计算的值，定义了 _dirty变量用于表示是否需要重新计算值，为true时表示需要重新计算，默认是true；在构造函数中，定义了effect，ReactiveEffect第二个参数称为 scheduler调度器，当依赖属性的值发生变化时会触发该方法的执行；这篇主要是配置computed，vue2实现是通过lazy和dirty这两个变量控制。上面这个不是很好理解，用下面的理解。
2024-08-01 09:59:28
284
原创 响应式原理实现(3)vue2和vue3
实现回调函数输出value之前会执行一次evaluate。defineComputed 是将computed函数定义为data的属性，就可以和正常属性一样使用computed。
2024-07-31 16:58:36
256
原创 浏览器渲染原理
关键渲染路劲是浏览器将html css JavaScript转换为在屏幕上呈现的像素内容所经历的一系列不走。关键资源的数量: 可能阻止网页首次渲染的资源关键路径长度: 获取所有关键资源所需要的往返次数和总时间关键字节: 实现网页首次渲染所需要的总字节数，等同于所有关键资源传送文件大小的总和渲染层合并,对于页面中 DOM 元素的绘制(Paint)是在多个层上进行的。在每个层上完成绘制过程之后,浏览器会将绘制的位图发送给 GPU 绘制到屏幕上,将所有层按照合理的顺序合并成一个图层,然后在屏幕上呈现。
2024-07-30 16:02:03
906
原创 响应式原理实现(2)vue2和vue3
提供shallow，决定是否需要深度响应上面已经重写了array方法，不可以直接覆盖全局的array方法，如果当前value是数组，在observer中拦截array方法。上面代码中，实现了数组的操作方法，但是并没有给数组中的元素添加响应式，所以我们需要给数组中的元素添加响应式。如果是多维数组，则需要对多维数组中的元素进行依赖同时也需要对插入的数据进行依赖收集，如果是数组，进行数组的依赖收集。如果是数组，需要将数组中的元素进行响应式处理，对于新添加的元素也进行响应式处理。
2024-07-27 21:15:05
401
原创 响应式实现vue2和vue3
重写get和set方法，在调用数据的时候，将依赖进行收集，将依赖的函数执行将第一步和第二步的东西封装为dep保存当前正在执行的函数每个属性有一个subs数组，watcher会保存当前正在执行的函数，当读取属性的时候触发get，将当前watcher保存到subs数组中。这里需要考虑两件事情，1.Dep中不要重复收集watcher, 2.重置,如果该属性对dep中的watcher没有影响，watcher中的updateComponent不会获得属性，需要将watcher将dep中删除重置全量式
2024-07-26 19:43:17
295
原创 客户端识别和cookie机制
会对真正的URL进行扩展，web服务器会动态生成一些超链，维护url中的状态信息，改动的用户状态信息的URL称为胖URL。用户首次访问这个Web站点时，会生成一个唯一的ID，用服务器可以识别的方式将这个ID添加到URL中去，然后服务器就会将客户端重新导向这个胖URL。会话cookie是一种临时cookie，记录了用户访问站点的设置和偏好，用户退出浏览器的时候，会话cookie就被删除了。from首部包含了用户的Email地址，每个用户都有不同的Email地址，可以用这个地址作为可行的元端来识别用户。
2024-07-24 11:27:48
465
原创 微前端--qiankun(3)
当微应用信息注册完之后，一旦浏览器url发生变化，便会自动触发qiankun的匹配逻辑，所有的activeRule规则规则上的微应用就会加载到指定的container上，同时依次调用微应用暴露出来的钩子。创建一个隔离的dom子树，其中的样式和脚本不会影响外部的dom，通过再元素上应用shadow dom,可以将样式限定再shadow dom内部，实现样式的沙箱化。,vue会自动将改样式应用于当前组件的元素，并在编译的过程中为css规则添加要给唯一的属性选择器。单实例场景下的子应用和主应用的样式隔离。
2024-07-24 09:34:07
947
原创 微前端--qiankun
qiankun分为accpication和parcel模式。基于路由工作，将应用分为两类，基座应用和子应用，基座应用维护路由注册表，根据路由的变化来切换子应用。子应用是一个独立的应用，需要提供生命周期方法供基座应用使用。和路由无关，子应用切换是手动控制的，具体是通过qiankun提供的loadMicroApp来实现的。
2024-07-23 18:17:43
781
原创 HTTP 缓存
web缓存是可以自动保存常见的文档副本的HTTP设备，当web请求抵达缓存时，如果本地有已经缓存的副本，就可以从本地存储设备而不是从原始服务器中提取这个文档。使用缓存有如下的优先。
2024-07-22 21:02:07
1236
原创 rollup打包工具
rollup是一个模块化的打包工具，会将javascript文件进行合并。比起webpack，webpack在打包的时候会进行代码注入(保障兼容性)，如果对于一些项目，特别是类库，没有其他的静态资源文件，就可以使用rollup。rollup支持es6模块，支持tree-shaking,不支持code-splitting,模块热更新tree shaking优化： tree shaking是一种优化技术，用于剔除未使用的代码，减少最终的文件大小ES6模块支持。
2024-07-14 15:47:08
776
原创 script标签type属性
@FilePath: \javascript深入学习\script标签中的type的使用.md* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE。
2024-07-13 09:52:40
394
原创 JavaScript设计模式 -- 代理模式
@FilePath: \设计模式\代理模式.md* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE。
2024-07-10 16:52:27
1063
原创 Mock.js学习
数据模板中的属性由3部分构成，属性名，生成规则，属性值属性名和生成规则之间用 | 分割。生成规则是可选的生成规则有7种生成规则的含义需要依赖属性值来完成属性值中可以有占位符属性值还原了最终的初始值和类型"string| 3": "知道了啊"})// 生成一个整数，属性为数字，在1-10位之间})// 生成一个小数，整数区间1-10， 小数部分2-4})// step递增 生成一个数组list，初始值为number，step不能为负值})// 生成一个布尔值})
2024-07-09 21:27:36
204
原创 html5中的iframe
iframe>浏览上下文是浏览器展示文档的环境，通常是一个tab标签页，一个窗体或者是浏览器页面的一部分。每个浏览上下文都有一个活动文档的源和一个记录所有展示文档的有序历史。浏览上下文的通讯被严格限制，只有两个同源的浏览器上下文，才能打开和使用通讯接口。
2024-07-05 14:41:46
560
原创 webpack源码解析---addEntry
webpack会从入口开始解析依赖。EntryOptionPlugin的作用是注册compiler.hooks.entryOption钩子，当钩子被触发的时候，调用EntryOptionPlugin.applyEntryOption方法注册DynamicEntryPlugin或者EntryPluginEntryPlugin的触发调用compiler.run() -> compiler.compile()方法触发compiler.hooks.make钩子，进而触发EntryPlugin钩子。
2024-07-01 19:06:15
818
3
原创 webpack源码解析---compilation实例化
compilation对象实例化compilation类型，实例化的调用是由前面的compiler.newCompilation()方法完成compilation对象是webpack构建编译具体过程的实施者。
2024-06-30 14:19:03
453
原创 webpack源码深入--- compiler.compile
webpackoptionsapply.prototype.process方法注册了EntryOptionsApply,EntryPlugin为每个entry注册了EntryPlugin，而EntryPlugin又订阅了compiler.hooks.make钩子。EntryOption订阅了compiler.hooks.entryOption钩子，当钩子触发调用EntryOptionPlugin.applyEntryPlugin根据不同的类型的入口应用不同的类型的入口插件。
2024-06-30 11:29:50
901
原创 webpack源码深入--- webpack的编译主流程
首先判断是否注册了compiler.hooks.readRecords钩子，有则判断是否有recordsInputPath配置，有则触发this.hooks.readRecords，会触发使用records的相关插件执行。在compiler.hooks.beforeRun的回调中触发hooks.run钩子，webpack内部暂时无法插件订阅该钩子。如果当前的文件系统是给定的inputFileSystem，则记录当前的时间，重新编译，此前的文件系统中的内容没用了。webpack的运行是一个串行的过程。
2024-06-29 16:32:52
1043
原创 javascript设计模式---单例模式
单例模式又称为单体模式，并提供一个访问它的全局访问点，也就是说，第二次使用同一个类创建的对象的时候，应该得到和第一次创建的对象完全相同的对象。
2024-06-26 16:53:17
271
原创 vuex的深入学习[基于vuex3]----篇(二)
store: store对象实例，new Vuex.store({…})生成的对象rootState: 根模块的state对象path: 当前模块所处的层级数组module: 模块对象hot。
2024-06-23 21:38:50
840
原创 javascript设计模式---工厂模式
工厂模式就是用来创建对象的一种最常见的设计模式，不需要创建对象的具体逻辑，而是将逻辑封装在一个函数中，那么这个函数就可以视为一个工厂，工厂模式根据抽象程度的不同可以分为简单工厂，工厂方法和抽象工厂。
2024-06-23 19:00:13
269
原创 vuex的深入学习[基于vuex3]----篇（一）
如果没有options.store，证明调用本函数是vue的子组件，不是根实例，这是通过options.store,证明该函数调用的是vue的子组件，不是根vue实例，这是通过options.parent找到父组件的索引。如果有this.$options.store，如果传递的是函数，则调用该函数，则调用该函数，函数和vue的data是一样的，通过工厂模式，当多实例复用一个配置文件的时候。*index.js: 源码程序的主入口，提供store的各module构建安装。*plugins: 提供开发辅助插件。
2024-06-23 17:00:15
781
原创 Webpack源码深入-compiler
上述中执行就是执行中的run方法，在执行的过程中，会加载webpack/lib/webpack.js中，得到this.webpack模块，然后运行this.runWebpack()方法，创建compiler对象。
2024-06-20 11:21:42
395
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人