
JavaScript
文章平均质量分 94
VillanelleS
勤勤恳恳小码农一枚~
展开
-
前端工程化之模块化开发 & webpack
常用的构建工具:webpack,vite,rollup,esbuild,rspack初始化参数运行一个脚本传入相关参数,给到 webpack.config.js 文件当中,最终创建 webpack 实例化,会初始化参数,初始化参数后,会进行,将当前脚本的参数和webpack参数进行合并,得出开始编译通过上一步得到的 options,触发 Compiler 实例,new Compiler(options),进行,相当于调用插件的 apply 方法,添加对某些事件的监听执行Compiler的 run 方原创 2025-04-05 01:21:10 · 1222 阅读 · 0 评论 -
Vue进阶之Vue Router&SSR
hash和history的区别点并不多,开始是对base进行处理,后面都直接调用用webhistory,对事件的监听,事件方法的处理进行了统一,只是对路径做了区别。现在:访问一个url,也都会向服务器拉一个页面回来,但是由于spa工程,服务器返回的都会在nginx层进行一个转发,都转发到根目录了。有这么一种情况,针对不同id的用户,路由的前面路径是同样的,但是后面会针对不同人的id从而路径是不同的,这里会有一个问题,让首屏加载的资源越少,节点更少,组件异步,则首屏渲染的更快,加载的更快。原创 2024-12-23 15:43:12 · 752 阅读 · 0 评论 -
JavaScript进阶7之TypeScript
d.ts是所有类型的集合,全称是:declaration type 都是通过 @types/react去管理的。针对不同场景下参数的兼容,参数不同,则场景不同,考虑到的情况也不一样。以上两种写法,一般都用第一种写法,比较规范,考虑到代码扩展性等。引入的是文件的类型,导出的时候也是按照文件模块/类型引用。关于ts配置项,tsconfig.json。再 tsconfig includes注入。@types是约定俗成的。全局模块,是全局直接用。原创 2024-04-11 14:47:14 · 740 阅读 · 3 评论 -
JavaScript进阶6之函数式编程与ES6&ESNext规范
在JavaScript中,o?这个操作符用于在访问对象属性时进行安全的操作,即使对象的某个属性不存在或者为null或undefined,也不会导致运行时错误。.a表示如果对象o存在且具有属性a,则返回o.a的值;如果对象o不存在或者属性a不存在,则返回undefined,而不会抛出错误。一方面,css in js 相对不好处理,但是有对应的方案, 而且比较符合正常开发者定义组件,维护对应的内容。这种语法的引入使得代码更加简洁并且更安全,特别是在处理深层嵌套的对象属性时。看具体原理,内部具体是怎么做的。原创 2024-04-10 17:47:20 · 945 阅读 · 0 评论 -
JavaScript进阶5之垃圾回收(计算机组成、解释与编译、JavaScript引擎、垃圾回收、内存管理)、运行机制(浏览器进程分类、浏览器事件循环)
标记清除(Mark-Sweep),目前在 JavaScript引擎 里这种算法是最常用的,到目前为止的大多数浏览器的 JavaScript引擎 都在采用标记清除算法,各大浏览器厂商还对此算法进行了优化加工,且不同浏览器的 JavaScript引擎 在运行垃圾回收的频率上有所差异。标记清除算法有一个很大的缺点,就是在清除之后,剩余的对象内存位置是不变的,也会导致空闲内存空间是不连续的,出现了 内存碎片(如下图),并且由于剩余空闲内存不是一整块,它是由不同大小内存组成的内存列表。原创 2024-03-27 17:58:43 · 1160 阅读 · 0 评论 -
JavaScript进阶4之JavaScript模块化,模块化的演进过程(全局函数、namespace、freeze、IIFE)、模块化规范(CommonJs、AMD、CMD、ES6模块化、UMD)
CommonJS规范主要用于服务端编程,加载模块是同步的,这并不适合在浏览器环境,因为同步意味着阻塞加载,浏览器资源是异步加载的,因此有了AMD CMD解决方案;AMD规范在浏览器环境中异步加载模块,而且可以并行加载多个模块。不过,AMD规范开发成本高,代码的阅读和书写比较困难,模块定义方式的语义不顺畅;CMD规范与AMD规范很相似,都用于浏览器编程,依赖就近,延迟执行,可以很容易在Node.js中运行;原创 2024-03-26 09:51:00 · 668 阅读 · 0 评论 -
JavaScript进阶3之参数按值传递、call,apply,bind和new的实现、继承的多种方式
因为 new 的结果是一个新对象,所以在模拟实现的时候,我们也要建立一个新对象,假设这个对象叫 obj,因为 obj 会具有 Person 构造函数里的属性,我们可以使用 Person.apply(obj, arguments)来给 obj 添加新的属性。当传递 value 到函数 foo 中,相当于拷贝了一份 value,假设拷贝的这份叫 _value,函数中修改的都是 _value 的值,而不会影响原来的 value 值。提供的 this 值被忽略,同时调用时的参数被提供给模拟函数。原创 2024-03-13 18:07:36 · 760 阅读 · 0 评论 -
JavaScript进阶2之执行上下文、作用域链、函数创建、函数激活、checkScope的执行过程、闭包、this
结合着之前讲的变量对象和执行上下文栈,我们来总结一下函数执行上下文中作用域链和变量对象的创建过程checkscope 函数被创建,保存作用域链到 内部属性[[scope]]执行 checkscope 函数,创建 checkscope 函数执行上下文,checkscope 函数执行上下文被压入执行上下文栈checkscope 函数并不立刻执行,开始做准备工作,第一步:复制函数[[scope]]属性创建作用域链。原创 2024-03-10 18:11:35 · 779 阅读 · 0 评论 -
JavaScript进阶1之作用域、执行上下文的顺序执行、可执行代码、执行上下文栈
JavaScript采用静态作用域,于是执行 foo 函数,先从 foo 函数内部查找是否有局部变量 value,如果没有,就根据书写的位置,查找上面一层的代码,也就是 value 等于 1,所以结果会打印 1。如果没有,就从调用函数的作用域,也就是 bar 函数内部查找 value 变量,所以结果会打印 2。但是使用var表达式定义函数add1,只有变量声明提前了,变量初始化代码仍然在原来的位置,没法提前执行。用函数语句创建的函数add2,函数名称和函数体均被提前,在声明它之前就使用它。原创 2024-03-10 16:19:59 · 473 阅读 · 0 评论 -
Javascript实现图片延迟加载
所以,对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB。当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载完成,也许会失去很多的用户。// 页面窗口改变 / 视窗大小改变时。// 1. 做纵向的可见判断。// 3. 防止图片重复加载。// 加载需要懒加载的图片。// 判断图片是否可见。// 横纵方向改变时。原创 2024-03-08 09:43:36 · 1032 阅读 · 0 评论 -
JavaScript基础4之原型的原型继承、原型链和理解对象的数据属性、访问器属性
基于原型对象的继承使得不同构造函数的原型对象关联在一起,并且这种关联的关系是一种链状的结构,我们将原型对象的链状结构关系称为原型链。继承是面向对象编程的另一个特征,通过继承进一步提升代码封装的程度,JavaScript中大多是借助原型对象实现继承的特性。男人和女人都同时使用了同一个对象,根据引用类型的特点,他们指向同一个对象,修改一个就会都影响。正常的原型链都会终止于 Object 的原型对象,Object 原型的原型是 null。//女人 构造函数 继承 想要继承 Person。原创 2024-03-07 22:10:27 · 784 阅读 · 0 评论 -
JavaScript基础3之面向对象关于面向过程、函数式编程、对比、构造函数、原型
所有的数据和方法都被封装在对象内,由开发者自己选择性的去公开哪些属性和方法,对于创建的实例来说他能访问的只能是这些公开的属性和方法,而对于其他对象来说是无权访问此类或者进行更改,封装这一特性为程序提供了更高的安全性。对象都会有一个属性__proto__指向构造函数的prototype原型对象,之所以我们对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象有__proto__原型的存在。所以,我们对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象有。原创 2024-03-05 22:36:59 · 807 阅读 · 0 评论 -
JavaScript基础1之变量的var、const、let和数据类型的原始类型、对象类型、内存空间、拷贝
var name="张三",age=18,sex="男";原创 2024-03-04 09:42:36 · 972 阅读 · 0 评论