笔记
文章平均质量分 58
Trist丨
www.trist.cn
展开
-
第一章:TypeScript
了解TypeScriptTypeScript是Javascript的超集,Typescript = Type + ECMAScript + Babel-Lite为何使用TypeScript增加了代码的可读性和可维护性减少运行时错误,写出的代码更加安全,减少 BUG享受到代码提示带来的好处重构神器从开发效率上看,虽然需要多写一些类型定义代码,但TypeScipt能做到智能提示,智能感知bug,我们不必运行项目时才发现错误,我们也可以给那些没有TS类型声明的稳定模块写声明文件原创 2021-07-15 10:38:33 · 169 阅读 · 0 评论 -
Vue3中组件的挂载及调用
在Vue2.X中,我们通过Vue.prototype.$dialog = dialog的方式挂载组件,并使用this.$xxx的形式通过函数调用组件,如this.$dialog({})而在Vue3.X中,组合式API没有this,不过新增了globalProperties属性,代替了Vue.prototype查看Vue3.X官方文档(https://www.vue3js.cn/docs/zh/api/application-config.html#globalproperties)// 之前(Vue原创 2021-04-06 16:13:14 · 8176 阅读 · 2 评论 -
vue-cli3+ 打包至非根目录静态资源(图片,字体文件)路径加载错误,导致不显示,丢失
缘由当开发vue项目时,ele字体图标显示无任何问题,然而当项目打包部署上线时,图片,字体文件等静态资源就丢失了,通过分析是因为项目打包时是非根目录,通过publicPath进行了配置,静态资源没有匹配到publicPath,因此打包出来的路径错误,导致页面不显示资源分析由于是打包至非根目录下,我们需要对webpack中的publicPath进行配置,同时记得修改router.js中的base地址// 打包至非根目录下// vue.config.jspublicPath: "/tpls/vue/原创 2021-03-03 18:19:53 · 2755 阅读 · 3 评论 -
js中原型,原型链的理解
引入相信大家都使用过构造函数,它可以很方便的让我们构造出一个对象上所包含的属性和方法,并通过new关键词把我们所需要的对象构造出来,但当我们用到一些公共方法时,我们可能会遇到许多问题。举个例子:我们通过构造函数创建一个小狗的对象,并添加属性和方法,并实例化出来我们知道,小狗对象只有名字与年龄是不同的,而方法say是每个实例化小狗对象都拥有的,不需要做改变。但是这种写法所实例化的过程是这样的:而我们的想要的效果是下面这样的:在使用new关键字,每次创建一个对象的时候,都会在内存开辟一个新的空间,我转载 2020-09-09 10:49:35 · 128 阅读 · 0 评论 -
快速掌握js中闭包的理解与应用(面试中如何回答闭包)
闭包:首先讲讲闭包的定义:在我看来,闭包有三大特点。一是函数嵌套函数,二是外部函数可以访问内部函数的变量,三是参数和变量不会被垃圾回收机制回收。所以简单来说我认为闭包可以理解为是连接函数内部和函数外部的一座桥梁。然后讲讲闭包的原理:为什么会形成闭包呢,因为当内部函数被返回至外部并保存时,一定会形成闭包。而关于闭包为什么能访问内部函数的变量,且不会垃圾回收机制回收,是因为闭包会产生原来的作用域链不被释放。我们从JS预编译的角度来讲,可以知道当外部函数执行的前一刻,内部函数被原创 2020-06-06 20:13:53 · 10080 阅读 · 0 评论 -
前端性能优化-图片
前端性能优化的目的:从用户角度而言: 优化能够让页面加载得更快、对用户的操作响应的更及时,能够给用户提供更为良好的体验。从服务商角度而言: 优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。我们先了解图片大小的计算:对于一张 100 * 100 像素的图片来说,图像上有 10000 个像素点,如果每个像素的值是 RGBA 存储的话,那么也就是说每个像素有 4 个通道,每个通道 1 个字节(8 位 = 1个字节),所以该图片大小大概为 39KB(10000 * 1 * 4 / 10原创 2020-05-31 22:26:59 · 165 阅读 · 0 评论 -
JS For循环中嵌套setTimeout()方法的理解
思考:先上代码,我们可以看一遍,思考一下答案,对比两种方法的区别。for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 1)}for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 1)}答案: 3 ,3 ,3 和 0 ,1 ,2解析:我们通过在每一个阶段加入 console.log(i) 来更深层次的理解 js 的原创 2020-05-22 17:32:07 · 2529 阅读 · 0 评论 -
js中数组去重的几种实现方式(区别)
// 1,2,3,'a','2',null,NaN,undefined,{a:1},true 10项 var arr = [3,'a', 1, 2, 2, 3, '2', 3, null, NaN, null, NaN, undefined, {size:1}, undefined, true, {size:1}, true]; // 方法一:利用splice方法去重 // 说明:用双层for循环嵌套,用每一项与另外得其他项一一对比,若相同则删除后...原创 2020-05-18 14:12:41 · 266 阅读 · 0 评论 -
js中如何判断引用值为数组(几种不同方式的详解)
回顾在JavaScript中,数据属于Object类型,也属于引用数据类型。我们可以通过typeof来判断该数据是否为引用类型,但无法判断其为数组。实验数据: var a = []; var b = {};依据原型判断通过原型上的构造器 constructor 判断说明: 每一个实例对象一个来自原型上的 constructor 属性,它指向构造函数,即存放着创建当前对象的构造函数 console.log(a.constructor) // ƒ Arr原创 2020-05-16 17:43:46 · 189 阅读 · 0 评论 -
js中深浅拷贝的实现方式(含图解原理)
关于赋值,浅拷贝,深拷贝提前熟知:栈内存(stack):会自动分配的内存空间,它由系统自动释放堆内存(heap):动态分配的内存及大小,不一定会自动释放基本数据类型:String, Number, Boolean, undefined, null, Symbol引用数据类型:Object, Array, Function在JS中,数据类型分为基本数据类型和引用数据类型两种,对于基本数据类型来说,它的值直接存储在栈内存中,而对于引用类型来说,它在栈内存中仅仅存储了一个引用,而真正的数据存储在堆原创 2020-05-15 22:32:21 · 1754 阅读 · 2 评论 -
CSS实现元素水平垂直居中的几种方式
让不定宽元素垂直水平居中的几种方法gridflexpositiontranslate演示环境代码用两个div作为父元素,实现子元素div的水平垂直居中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie...原创 2020-05-06 16:38:41 · 279 阅读 · 0 评论 -
关于React中DOM,虚拟DOM及diff算法的理解
前言初次学习React,最先接触的关键字应该就是响应式UI,虚拟DOM,组件本文中,我们来讲讲Dom,虚拟Dom,以及diff算法的理解。DOMDOM的全称是“Document Object Model”,即文档对象模型。通过这个截图我们可以发现,其实简单点我们可以将DOM理解为一棵树,一颗倒长的树。也可以说是一颗家谱树,而家谱树本身就是一种模型,其典型用法是表示人类家族谱系。它能很容...原创 2020-04-25 19:20:16 · 427 阅读 · 0 评论