自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 npm包管理器

将包下载到当前的项目的node_modules文件夹下,会在packages.json中的dependence属性中添加一个新属性。会自动添加package-lock.json文件,该文件是帮助加速npm下载的(避免出现下载重复的包),不用管。"lodash":"^4.17.21" 表示匹配最新的4.x.x的版本,也就是如果后期lodash包更新到了4.18.1,我们的包也会一起更新,但是如果更新到了5.0.0,我们的包是不会随之更新的。npm init -y:在后边加上-y表示按默认的方式初始化。

2023-02-14 16:57:50 425 1

原创 node核心模块

如果将一个相对路径作为参数,则resolve会自动将其转换为绝对路径,此时根据工作目录的不同,它所产生的绝对路径也不同。当我们通过fs模块读取磁盘中的数据时,读取到的数据总会以Buffer对象的形式返回。注意:通过不同的方式执行node代码时,它的工作目录是有可能发生变化的。process:表示当前的node进程,通过该对象可以获取进程的信息,或者对进程进行各种操作。fs.readFileSync是同步的读取文件的方法,会阻塞后边代码的执行。readFile():异步的读取文件的方法。

2023-02-13 00:21:49 265

原创 commonjs规范

扩展名可以省略,在node中,如果省略扩展名,会自动添加一个.js的扩展名寻找对应的js文件,找不到则寻找文件名.json,找js文件的优先级更高。引入自定义模块时,模块要以./或../开头,如果不以这样的形势开头,node会认为你要加载的时核心模块或node_modules中的模块。早期的网页中,是没有一个实质的模块化规范的,我们实现模块化的方式就是最原始的通过script标签来引入多个js文件。在定义模块时,模块中的内容默认是不能被外部看到的,可以通过exports来设置对外暴露的内容。

2023-02-12 13:14:45 595

原创 小程序-视图与逻辑-页面导航

页面导航指的是页面之间的互相跳转。例如,浏览器中实现页面导航的方式有如下两种:a链接,location.href。

2023-02-08 15:52:22 404

原创 小程序-网络数据请求

此时为了不耽误开发的进度,我们可以在微信开发者工具中,临时开启【不校验合法域名,web-view(业务域名),TLS版本以及https证书】选项,跳过request合法域名的校验。Ajax的核心是基于浏览器中的XMLHttpRequest对象,小程序的宿主环境是微信,所以小程序中不能叫做“发起Ajax请求”,而是叫做“发起网络数据请求”。登录微信小程序管理后台->开发->开发管理->开发设置->服务器域名->开始配置->进行身份验证->配置服务器域名。如上例中get请求的代码,将请求方式改为post即可。

2023-02-06 22:06:06 331

原创 小程序-模板与配置-页面配置

小程序中,app.json中的window节点,可以全局配置小程序中每个页面的窗口表现。如果某些小程序页面想要拥有特殊的窗口表现,此时,"页面级别的.json配置文件"就可以实现这种需求。小程序中,每个页面都有自己的.json配置文件,用来对当前页面的窗口外观、页面效果等进行配置。注意:当页面配置与全局配置冲突时,根据就近原则,最终的效果以页面配置为准。

2023-02-06 17:35:35 103

原创 小程序-模板与配置-全局配置

tabBar是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序通常将其分为:底部tabBar 顶部tabBar注意:tabBar只能配置最少2个,最多5个tab页签。当渲染顶部tabBar时,不显示icon,只显示文本。

2023-02-06 17:19:13 877

原创 小程序-模板与配置-WXSS模板样式

rpx的实现原理非常简单:鉴于不同设备的屏幕大小不同,为了实现屏幕的自动适配,rpx吧所有设备的屏幕在宽度上等分为750份(即当前屏幕宽度为750rpx)。WXSS(wei xin style sheets)是一套样式语言,用于美化WXML的模板样式,类似于网页开发中的CSS。小程序在不同设备上运行的时候,会自动把rpx的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配。在页面的.wxss文件中定义的样式为局部样式,只作用于当前页面。当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式。

2023-02-05 21:28:17 481

原创 小程序-模板与配置-WXML模板语法

Page({data : {//字符类型的数据 info : "init data" , //数组类型的数据 msgList : [ {事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。

2023-02-05 20:52:25 313

原创 微信小程序开发 开启

小程序是运行在微信环境中,而网页是运行在浏览器环境中。由于运行环境不同,所以小程序中,无法调用DOM和BOM的API。但是,小程序中可以调用微信环境提供的各种API,例如地理定位,扫码,支付。网页的开发模式:浏览器+代码编辑器。而小程序有自己的一套标准开发模式:登录网址https://mp.weixin.qq.com/,注册一个个人的账号,填写好相关的信息,我们的账号就注册好了。获取小程序的APPID。在上边的网址完成注册以后,我们在页面中可以找到我们的小程序的APPID展示在如图所示的位置。微信

2022-12-04 02:12:13 15723 2

原创 一键让网页变黑白色调

每次在清明节,或者发生重大变故的时候,当我们浏览网页时,发现我们的网页(比如百度的搜索页面变成了黑白色)。这种效果是怎么实现的呢?我们无论通过什么方式,比如找到网站的css文件,插入以上类似代码,或者在网页标签内加入,只要使其生效,就能达到让网页变灰的效果。使用css样式,在网页的CSS文件中添加以下的CSS代码,来实现网页黑白色,以下是以webkit为内核的浏览器的示例。URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。

2022-11-30 20:53:56 1716

原创 TypeScript开启

这里在使用ts里的变量的时候,产生一个问题,同一个文件夹下(其实不同文件夹下也会产生这样的问题)的t不同s文件怎么会产生重名问题,是因为在一个没有任何设置的普通项目中,vscode编辑器会把当前打开的 ts 文件当作一个整体的作用域进行验证。这里的w是watch的意思,输入这样的命令之后,会帮助我们监视该ts文件,当该文件内容发生变化之后,会帮助我们在一定的时间间隔之后自动编译ts文件。通过类型声明可以指定ts中变量(参数、形参)的类型。当对变量的声明和赋值时同时进行的,TS编译器会自动判断变量的类型。

2022-11-27 22:57:40 2247

原创 Vue3 开启

重写虚拟DOM的实现和Tree-shaking(移除JavaScript上下文中未引用的代码的行为的一个术语)1.使用vue-cli创建(保证vue-cli版本在4.5.0以上)移除keyCode支持作为v-on的修饰符。开发环境中,无需打包代码,可快速的冷启动。真正的按需编译,不再等待整个应用编译完成。vue3更好的支持TypeScript。watch与watchEffect。provide与inject。ref与reactive。新一代的前端构建工具。2.使用vite创建。

2022-10-24 23:02:55 2107

原创 配置webpack优化图片文件

进行处理,Webpack5 已经将两个 Loader 功能内置到 Webpack 里了,我们只需要简单配置即可处理图片资源。优点:减少请求次数;过去webpack4将图片资源通过。在五大模块同级下设置该配置项即可。

2022-10-19 17:52:14 572

原创 CSS预处理器 ---less

Less(Leaner Style Sheets 精简样式表) 是一种动态样式语言,属于 css 预处理器的范畴,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展,Less 既可以在 客户端 上运行 ,也可以借助 Node.js 在服务端运行。在Hbuildx中下载插件less,右键点击less文件,选择外部命令,点击编译less,即可把less文件编译为css文件存放在相同路径下。

2022-10-02 23:27:53 457 1

原创 webpack开启--webpack理解

能够将程序猿书写的源代码打包为浏览器可以高效稳定运行的,兼容性较好的代码(build/dist/over)。webpack本身可以处理的是js文件(es6模块化文件)转为comminJs和json文件,而且它不能对es6转es5做相应的处理。1.该文件是webpack的配置文件,所有webpack的任务,用到的loader、plugins都要配置在这里。2.在webpack中将所有的前端资源文件都(json、js、css、img、less...)作为模块处理。3.根据模块的依赖关系进行分析,生成对应资源。

2022-09-22 23:46:07 993

原创 圣杯布局的两种实现

实现效果:网页窗口在缩放过程中,三栏布局两边的盒子宽度是固定的,中间的盒子的宽度是自适应的。1.margin负值+float。2.flex布局实现。

2022-09-18 22:03:34 245 2

原创 vue3双向绑定的原理

2.修改某些Object方法的返回结果,让其变得更合理。比如利用Object.defineProperty给基本数据类型添加一个属性,就无法对属性进行定义,这时会抛出一个错误。4.Reflect对象的方法与Proxy对象的方法一一对应,只要是Proxy对象的方法,就能在Reflect对象上找到对应的方法。1.将Object对象的一些明显属于语言内部的方法,放到Reflect对象上。proxy:用于修改某些操作的默认行为,等同于在语言层面做出修改。reflect:es6为操作对象而提供的新的api。

2022-09-15 00:29:07 2063

原创 实现简单的发布订阅者模式

3. 发布消息,发布者遍历缓存列表,依次触发里面存放的订阅者回调函数。2.给发布者添加一个缓存列表,存放回调函数通知订阅者。1.首先想好谁是发布者。

2022-09-14 16:50:24 439

原创 手写call,apply方法

核心思想就是:apply与call都应该写在Function.prototype上,然后首先判断该方法的调用者this是不是一个函数,不是则抛出一个错误。是则根据call及apply函数的参数来满足对应的功能,如果传入某个this(对象),则使用这个对象作为context,否则使用window作为context。之后就是把该方法的调用者this(上文中为person.getName方法)挂载到person1这个对象身上,然后person1就有了和person一样的方法context.fn()。

2022-09-07 00:04:54 248

原创 Set数据结构

es6提供了新的数据结构Set,它类似于数组,但成员的值都是唯一的,没有重复的值。如何创建set数据结构: //set本身是一个构造函数,用来生成set数据解构 var s = new Set() console.log(s.size); //size属性返回s这个set数据解构中的成员数量 //set构造函数可以接受一个数组作为参数,用来初始化 const set = new Set([1,2,3,4,'abc'])

2022-05-09 21:52:47 795

原创 String的扩展方法

模板字符串:ES6新增的创建字符串的方式,使用反引号定义。它的特点有以下几个1.模板字符串可以解析变量,在反引号内部使用 {变量名}let name = '张三'let sayHello = `Hello,my name is ${name}`console.log(sayHello);2.模板字符串可以换行let result = { name: '张三', age: 20, id: 1 }

2022-05-09 21:09:33 338

原创 浅拷贝与深拷贝

浅拷贝:只复制某个对象的引用,而不复制对象本身,新旧对象还是共享同一块内存。深拷贝:创造一个一摸一样的对象,新对象和原对象不共享内存,修改新对象不会改变原对对象。浅拷贝的两种方法:1.使用for in 遍历对象 挨个赋值2.使用Object.assign()方法语法格式:Object.assign(拷贝给的对象,拷贝对象)var obj = { id: 1, name: 'andy', msg: {

2022-05-09 20:32:24 252

原创 Array的扩展方法

构造函数方法:array.form方法:1.可以将伪数组转换为数组。 var arrlike = { '0': 1, '1': 2, '2': 3, '3': 4, length: 3 } var arr = Array.from(arrlike) console.log(arr);2.该方法还可以接收第二个参数,作

2022-05-09 20:31:16 431

原创 扩展运算符(展开语法)

扩展运算符可以数组或者对象转为用逗号分隔的参数序列。let arr = [1,2,3]console.log(...arr);console.log(1,2,3);由于在console.log中','会被当做是参数分隔符,所以在这里我们看不到逗号。应用1:合并数组方法1:let arr1 = [1,2,3] let arr2 = [4,5,6] let arr3 = [...arr1, ...arr2] console.l

2022-05-09 18:07:04 350

原创 es6剩余参数

剩余参数语法允许我们把一个不定数量的参数定义为一个数组。 function fn(a,b,...n) { console.log(a); console.log(b); console.log(n); } fn(1,2,3,4,5,6,7,8,9)打印如下:但是在箭头函数中使用不了arguments,所以我们采用如下的写法:const fn = (...args) => {

2022-05-09 17:37:35 429

原创 es6箭头函数

es6中新增的定义函数的方式:() => {}const fn = () => {}函数体中只有一句代码,且代码的执行结果就是返回值,就可以省略大括号与return。function fn(num1, num2) { return num1 + num2 }//它就等效于底下的代码 const fn = (num1, num2) => num1 + num2如果形参只有一个,就可以省略小括号。const

2022-05-09 17:14:36 313

原创 es6新增语法-解构赋值

解构赋值:ES6中允许从数组中提取值,按照对应位置,对变量赋值。对象也可以实现解构。数组解构: let arr = [1,2,3] let [a, b, c] = arr console.log(a); console.log(b); console.log(c);如果解构不成功,变量的值为undefined。我们在上例中添加了一个变量d。从控制台打印d,结果显示为undefined。对象解构:let obj = {

2022-05-09 16:22:27 443

原创 const关键字

const声明的变量也具有块级作用域。

2022-05-09 16:02:38 265

原创 ES6开启 let关键字

为什么使用es6:变量提升增加了程序在运行时的不可预测性。语法过于松散,在实现相同的功能时,不同的人可能会写出不同的代码。1.let关键字类关键字的特点:(1):es6新增的用于声明变量的关键字。let声明的变量只在所处的块级作用域内有效。在一个大括号中使用let声明的变量才具有块级作用域,var是不具有这个特点的。 if (true) { let a = 1 console.log(a); }

2022-05-07 21:54:19 294

原创 正则表达式

什么是正则表达式:正则表达式是对字符串(包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为“元字符”))操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。在JavaScript中正则表达式也是一种对象。它经常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单,用户名输入框只能输入英文字母、数字、下划线。昵称输入框中可以输入中文。此外,正则表达式还用于过滤掉页面中的一些敏感词,或从字符

2022-05-06 21:57:31 193

原创 什么是递归函数

如果一个函数在内部调用自身,这个函数就是递归函数。如下案例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-

2022-05-06 17:16:21 1680

原创 JS高级 闭包

1.变量作用域变量根据作用域的不同分为两种:全局变量与局部变量。函数内部可以使用全局变量,函数外部不可以使用局部变量。当函数执行完毕,函数内部的局部变量会销毁。2.闭包 什么是闭包闭包指有权访问另一个函数作用域中变量的函数。function fn () { var num = 1 function fun() { console.log(num); } fun

2022-05-05 21:04:54 165

原创 严格模式。

JavaScript严格模式,即在严格的条件下运行。使用严格模式的目的:消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为; 消除代码运行的一些不安全之处,保证代码运行的安全; 提高编译器效率,增加运行速度; 为未来新版本的Javascript做好铺垫1.为脚本开启严格模式为整个脚本文件开启严格模式,需要在所有语句之前放一个特定语句"use strict"。单引号也可。<script> 'use strict'; </

2022-04-28 21:39:42 1163

原创 改变函数内部this指向

常用的改变函数内部this指向的方法: bind() call() apply()1.call()call() 可以调用函数 也可以改变该函数的this指向call的主要作用可以实现继承//1.call var o = { name: 'andy' } function fn (a, b) { console.log(this); console.log(a + b);

2022-04-28 17:39:41 350

原创 函数内部的this指向

//1.普通函数 this指向window function fn() { console.log(this); } //2.对象的方法 this指向对象o 函数的调用者 var o = { sayHi: function () { console.log(this); } } o.sayHi() .

2022-04-27 21:22:06 281

原创 函数进阶、开启 函数的定义与调用

函数的定义与调用:函数的定义方式:1.函数声明方式function关键字(命名函数):function fn () { }2.函数表达式(匿名函数)var fn = function() { }3.new function('参数1','参数2','函数体') (构造函数) var f = new Function ('a', 'b', 'console.log(a + b)')注意:function里面参数都必须是字符串格式。

2022-04-27 21:12:55 172

原创 ES5中的新增方法

es5新增方法概述:数组方法:迭代(遍历方法)foreach() map() filter() some() every()foreach()方法:语法格式:array.foreach(function(currentValue, index, arr))例子: //foreach迭代数组 var arr = [1,2,3] var sum = 0 arr.forEach(function(value, index, ar...

2022-04-27 20:43:42 320

原创 JavaScript 中的继承

es6之前没有给我们提供extends继承。我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承。1.call() 调用这个函数,并且修改这个函数运行时的this指向。语法:call(thisobj,arg1,arg2,...)thisobj:当前调用函数this的指向对象。...

2022-04-26 21:04:50 1427

原创 利用原型对象扩展内置对象

可以通过原型对象,扩展内置对象的属性和方法。比如给数组添加自动求偶数和的功能。//原型对象应用:扩展内置对象方法 Array.prototype.sum = function () { var sum = 0 for (var i = 0 ;i < this.length; i++) { sum += this[i] } retur

2022-04-26 17:44:21 178

空空如也

空空如也

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

TA关注的人

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