自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(87)
  • 收藏
  • 关注

原创 Vue小技巧-公共组件开发

我们会遇到很多类似于这样的场景,公共组件弹窗,点击会执行某个函数。一般做法是同props把弹窗一些value,function注入进去,然后子组件emit执行一下,但是这样有一个问题,就是太麻烦了。本文通过动态挂载组件的 方式去解决这个需求,废话少说,直接上代码。

2023-01-08 19:17:25 493

原创 JS小技巧

开发过程中,我们很多参数都会从url中获取,因此封装一个getUrlParams方法很重要。例如 a.length 返回时可能是0,大于0的数值、undefined。我们就可以把上述a.length的返回值转为布尔值了。判空方法想要的返回值是true 和 false。如果用其他方法的话,可能比较啰嗦。

2023-01-06 15:23:53 216

原创 JavaScript高级知识-ES5~6

定义方法:类声明式和类表达式// 第一种 class XXX {} // 第二种 var yyy = class XXX {}// ES5类的声明 function Student(name , age) {} // ES6类的声明 class Person {} } var p = new Person('张三' , 18);var p1 = new Person('张三ds' , 18);${this.

2022-11-10 15:10:50 516

原创 JavaScript高级知识-Object.defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。

2022-11-09 14:55:22 200

原创 JavaScript高级知识-闭包

执行函数:函数执行中:执行完函数adder,但是由于adder5还引用函数adder,所以函数adder不会被回收,又因为函数adder的作用域链关联着函数createAdder,所以函数createAdder也不会被回收,这就是闭包的作用。

2022-11-09 10:36:21 195

原创 JavaScript高级知识-浏览器的解析以及JS运行原理

事实上,浏览器在解析HTML的过程中,遇到script元素是不能继续构建DOM树的。而一些特殊的属性,会创建一个新的合成层(compositing layer),并且新的图层可以利用GPU来加速绘制。函数在执行过程中,会根据函数体创建一个函数执行上下文(Functional Execution Context,简称FEC),并且压缩到EC Stack中,作用域链是在进入执行上下文时就定义(根据函数声明的位置)好了,所以打印出来的message是全局的,而不是obj.message。

2022-11-08 17:33:05 952

原创 JavaScript高级知识-this的指向

因为箭头函数demo是没有this的,所以js引擎往上一层作用域找,找到普通函数test(存在this),而函数test的this指向obj对象,因此最终结果就是obj对象。因为箭头函数demo是没有this的,所以js引擎往上一层作用域找,找到箭头函数test(也不存在this),最终找到全局作用域,因此最终结果就是window对象。注意:new绑定和call、apply是不允许同时使用的。'指定this,forEach: '4. new绑定优先级高于bind。注意:obj的{}不是一个作用域。

2022-11-07 16:24:08 282

原创 Axios基础知识

Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

2022-11-07 11:20:05 267

原创 Pinia基础知识

不同的是,action 可以是异步的,你可以在它们里面 await 调用任何 API,以及其他 action!下面是一个使用 Mande 的例子。Store (如 Pinia) 是一个保存状态和业务逻辑的实体,它并不与你的组件树绑定。因此,即使在使用常规函数定义 getter 时,我们也可以通过 this 访问到整个 store 实例,但(在 TypeScript 中)必须定义返回类型。它们可以通过 defineStore() 中的 actions 属性来定义,并且它们也是定义业务逻辑的完美选择。

2022-11-07 10:28:54 2125

原创 Vuex基础知识

在开发中,应用程序有时需要处理各种各样的数据,这些数据需要保存在我们应用程序中的某一个位置,对于这些数据的管理我们称之为。

2022-11-06 15:19:11 456

原创 vue-router基础知识

很多时候,我们需要将给定匹配模式的路由映射到同一个组件。例如,我们可能有一个 User 组件,它应该对所有用户进行渲染,但用户 ID 不同。路径参数 用冒号 : 表示。当一个路由被匹配时,它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。setup语法糖中使用useRoute()获取route实例。其他的语法跟以前的没啥两样。

2022-11-05 15:39:00 80

原创 Vue3基础知识-1

setup函数的参数,主要有两个:props和context。

2022-11-04 15:15:43 1902 1

原创 vue2基础知识-2

安装Vue CLI脚手架查看Vue CLI版本用Vue CLI创建项目。

2022-11-02 21:49:28 271

原创 vue2基础知识-1

插值语法:data属性返回的对象是有添加到Vue的响应式系统中。当data中的数据发生改变时,对应的内容也会进行更新。用法如下:methods: 里面写一些功能函数方式二:template里面的数据就是用来替换动态的绑定一个或多个 attribute,也可以是组件的 prop。v-on(掌握)给元素绑定事件监听器。条件渲染 (掌握)v-if :template元素因为v-if是一个指令,所以必须将其添加到一个元素上,但是如果我们希望切换的是多个元素呢?此时我们渲染的是div,但是我

2022-10-31 15:38:51 307

原创 eslint基本教程

eslint是一个代码检查工具,用于检查你的代码是否符合指定的规范。

2022-10-25 16:18:48 184

原创 npm、yarn、npx工具说明

Node Package Manager, Node包管理器。npm是node的一个管理工具,所以安装Node就自动安装了npm。

2022-10-25 11:23:01 685

原创 vite基础知识-1

讲vite之前,我们先来了解一下webpack的原理。webpack支持多种模块化(浏览器端和服务端都可以运行)。webpack将上述代码编译:(编译后才能在浏览器运行)webpack的编译原理:构建AST,抽象语法分析上述js文件有哪些导入和导出的操作,但是这个过程是运行在服务端的。因为webpack支持这种多模块的形式,所以必须统一模块化代码。因此构建项目之前它会把所有的依赖都读取一便进行转换,导致项目启动时非常耗时。

2022-10-24 15:33:34 2395

原创 Nodejs-1

Node.js是一个基于Chrome V8引擎的JavaScript运行环境。Node.js是JavaScript的后端运行环境,因此Node.js中是无法调用DOM和BOM等浏览器内置API。

2022-10-19 16:18:27 319

原创 React-Cli配置

【代码】React-Cli配置。

2022-10-16 22:23:24 377

原创 webpack高级教程-2

提升开发体验使用 Source Map 让开发或上线时代码报错能有更加准确的错误提示。提升 webpack 提升打包构建速度使用 HotModuleReplacement 让开发时只重新编译打包更新变化了的代码,不变的代码使用缓存,从而使更新速度更快。使用 OneOf 让资源文件一旦被某个 loader 处理了,就不会继续遍历了,打包速度更快。使用 Include/Exclude 排除或只检测某些文件,处理的文件更少,速度更快。

2022-10-14 11:00:49 109

原创 webpack高级教程-1

开发时我们运行的代码是经过 webpack 编译后的,例如下面这个样子很多代码都是通过从eval函数暴露,要是代码有bug,不方便定位出错点。比如:这个例子不太合适,但只是一个例子而已。

2022-10-13 13:33:49 173

原创 webpack基础教程-3

Css 文件目前被打包到 js 文件中,当 js 文件加载时,会创建一个 style 标签来生成样式。这样对于网站来说,会出现闪屏现象,用户体验不好,所以我们应该是单独的 Css 文件,通过 link 标签加载性能才好。

2022-10-12 16:41:34 118

原创 webpack5基本教程-2

生产模式是开发完成代码后,我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化,让其运行性能更好。优化代码运行性能优化代码打包速度。

2022-10-11 16:40:47 416

原创 webpack5基本教程-1

开发模式:仅能编译 JS 中的 ES Module 语法生产模式:能编译 JS 中的 ES Module 语法,还能压缩 JS 代码。

2022-10-10 21:45:47 347 1

原创 spring学习-2

在controller层使用如下代码不利于开发。可以利用spring框架的优势,xml注入。模拟controller层。

2022-10-09 21:56:20 218

原创 项目第一天

因为ideal中默认配置中有几个地方的jdk版本与实际不一致。直接Ctrl+shit+alt+s出现以下面版。创建spring的配置文件。修改pom.xml的内容。

2022-10-08 15:56:02 59

原创 electron的基本教程

问题:每次修改完代码后,必须重新执行 npm run start才能展现最新的页面。BrowserWindow 模块,它创建和管理应用程序 窗口。app 模块,它控制应用程序的事件生命周期。preload.js把通信方法暴露给渲染进程。问题:electron和h5页面如何通信。index.html引入app.js文件。修改package.json。window上运行结果。安装electron。主进程main.js。渲染进程app.js。

2022-10-05 16:46:47 366

原创 pinia的使用

大多数时候,state 是 store 的核心部分。我们通常从定义应用程序的状态开始。在 Pinia 中,状态被定义为返回初始状态的函数。Pinia 在服务器端和客户端都可以工作。Actions 相当于组件中的 methods。使用相对路径时太多"…打开vite.config.js配置文件。启动json-server。创建一个store文件。

2022-10-04 19:46:52 366

原创 项目的搭建

看到这个页面就说明项目搭建成功。

2022-10-04 16:18:17 87

原创 tsconfig.json文件参数说明

【代码】tsconfig.json文件参数说明。

2022-10-03 14:13:03 156

原创 TS-模块与命名空间

模块使用模块加载器去导入其它的模块。在运行时,模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。大家最熟知的JavaScript模块加载器是服务于 Node.js 的 CommonJS 和服务于 Web 应用的 Require.js。项目开发过程中,我们会发现我们的命名是有严格规范的,我们不能随意的去起名字,但若是都采用尽量标准化的方式去命名,我们又无法避免的会造成污染,TypeScript提供了namespace 避免这个问题出现。// 文件名 : SomeInterface.ts。

2022-10-03 13:45:06 923

原创 TS-装饰器

介绍:装饰器是一种特殊类型的声明,它能够被附加到类,方法, 访问器,属性或参数上。用 @添加装饰器本质上还是一个函数,在别的语言中已广泛使用,如: python, 但在TS中依旧为一个测试中的版本,若要启 用实验性的装饰器特性,你必须在命令行或tsconfig.json里启用experimentalDecorators编译器选项添加到类上, 类装饰器添加到方法上,方法装饰器添加到访问器上,访问器装饰器添加到属性上,属性装饰器添加到参数上,参数装饰器。

2022-10-03 10:30:31 490

原创 TS-泛型的基本使用

【代码】TS-泛型的基本使用。

2022-10-02 16:40:37 279

原创 TS中的类实现

类描述了所创建的对象共同的属性和方法。TypeScript 支持继承类,即我们可以在创建类的时候继承一个已存在的类,这个已存在的类称为父类,继承它的类称为子类。只要一个接口继承了某个类, 那么就会继承这个类中所有的属性和方法,但是只会继承属性和方法的声明, 不会继承属 性和方法实现。类继承使用关键字 extends,子类除了不能继承父类的私有成员(方法和属性)和构造函数,其他的都可以继承。extends: 继承某个类,继承之后可以使用父类的方法,也可以重写父类的方法。访问器和设置器必须有相同的成员可见性。

2022-10-02 16:19:48 643

原创 TS-interface的用法

它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。看到这里,或许有人会觉得interface和type有啥区别吗?为了使用接口表示函数类型,我们需要给接口定义一个调用签名。

2022-10-02 14:18:32 4259

原创 TS的数据类型

object表示非原始类型,也就是除number,string,boolean,symbol,null或undefined之外的类型。像C#等其它语言一样,使用枚举类型可以为一组数值赋予友好的名字。never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型;变量也可能是 never类型,当它们被永不为真的类型保护所约束。类型别名就是给一个类型起个新名字, 但是它们都代表同一个类型。表示的是那些永不存在的值的类型;但是赋一个其他类型的值就会报错。

2022-10-02 11:05:03 337

原创 TS环境的安装与初体验

然后就会生成一个 test.js文件.然后运行如下命令就可以看到结果。直接输入 node test.ts 会报错的。我们应该首先先把ts文件转换为js文件。dist: 编译后的代码所在的位置。

2022-10-01 17:17:05 187

原创 JSON字符串化需要注意的地方

基本类型值的字符串化规则为:null转为"null", undefined转换为"undefined",true转为"true"。数字的字符串话则遵循通用规则。JSON.stringify(…)在对象中遇到undefined、function和symbol时会自动将其忽略,在数组中则返回null(以保证单元位置不变)但是,当面对对象的时候,String() 或者 toString() 就不适用了。此时,我们大部分都会想到JSON的方法。可是这个方法有一点的缺陷。

2022-09-22 19:43:36 266

原创 JS的类型

但是 null类型比较特殊// true这是由于历史原因所导致,这里不做解释。不知道你是否尝试过 typeof function a() {} === “function”;// true难道function也是js的内置类型?其实并不是,它只是object的一个“子类型”。具体来说,函数是“可调用对象”,它有一个内部属性[[Call]],该属性使其可以被调用。另外,函数不仅是对象,而且还拥有属性。因为此函数声明了3个命名参数a, b, c,所以其length值为3。

2022-09-22 16:35:51 108

转载 手写浅拷贝和深拷贝

浅拷贝是指,一个新的对象对原始对象的属性值进行精确地拷贝,如果拷贝的是基本数据类型,拷贝的就是基本数据类型的值,如果是引用数据类型,拷贝的就是内存地址。如果其中一个对象的引用内存地址发生改变,另一个对象也会发生变化。Object.assign()是ES6中对象的拷贝方法,接受的第一个参数是目标对象,其余参数是源对象,用法:Object.assign(target, source_1, ···),该方法可以实现浅拷贝,也可以实现一维对象的深拷贝.注意:● 如果目标对象和源对象有同名属性,或者多个源对象有同

2022-06-08 15:56:22 1296 2

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除