- 博客(143)
- 收藏
- 关注
RSS订阅原创 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
436
1
原创 node核心模块
如果将一个相对路径作为参数，则resolve会自动将其转换为绝对路径，此时根据工作目录的不同，它所产生的绝对路径也不同。当我们通过fs模块读取磁盘中的数据时，读取到的数据总会以Buffer对象的形式返回。注意：通过不同的方式执行node代码时，它的工作目录是有可能发生变化的。process：表示当前的node进程，通过该对象可以获取进程的信息，或者对进程进行各种操作。fs.readFileSync是同步的读取文件的方法，会阻塞后边代码的执行。readFile()：异步的读取文件的方法。
2023-02-13 00:21:49
279
原创 commonjs规范
扩展名可以省略，在node中，如果省略扩展名，会自动添加一个.js的扩展名寻找对应的js文件，找不到则寻找文件名.json,找js文件的优先级更高。引入自定义模块时，模块要以./或../开头，如果不以这样的形势开头，node会认为你要加载的时核心模块或node_modules中的模块。早期的网页中，是没有一个实质的模块化规范的，我们实现模块化的方式就是最原始的通过script标签来引入多个js文件。在定义模块时，模块中的内容默认是不能被外部看到的，可以通过exports来设置对外暴露的内容。
2023-02-12 13:14:45
602
原创 小程序-网络数据请求
此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启【不校验合法域名，web-view(业务域名)，TLS版本以及https证书】选项，跳过request合法域名的校验。Ajax的核心是基于浏览器中的XMLHttpRequest对象，小程序的宿主环境是微信，所以小程序中不能叫做“发起Ajax请求”，而是叫做“发起网络数据请求”。登录微信小程序管理后台->开发->开发管理->开发设置->服务器域名->开始配置->进行身份验证->配置服务器域名。如上例中get请求的代码，将请求方式改为post即可。
2023-02-06 22:06:06
340
原创 小程序-模板与配置-页面配置
小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现。如果某些小程序页面想要拥有特殊的窗口表现，此时，"页面级别的.json配置文件"就可以实现这种需求。小程序中，每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置。注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。
2023-02-06 17:35:35
104
原创 小程序-模板与配置-全局配置
tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序通常将其分为：底部tabBar 顶部tabBar注意：tabBar只能配置最少2个，最多5个tab页签。当渲染顶部tabBar时，不显示icon，只显示文本。
2023-02-06 17:19:13
880
原创 小程序-模板与配置-WXSS模板样式
rpx的实现原理非常简单：鉴于不同设备的屏幕大小不同，为了实现屏幕的自动适配，rpx吧所有设备的屏幕在宽度上等分为750份（即当前屏幕宽度为750rpx）。WXSS（wei xin style sheets）是一套样式语言，用于美化WXML的模板样式，类似于网页开发中的CSS。小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面。当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式。
2023-02-05 21:28:17
483
原创 小程序-模板与配置-WXML模板语法
Page({data : {//字符类型的数据 info : "init data" , //数组类型的数据 msgList : [ {事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。
2023-02-05 20:52:25
317
原创 微信小程序开发 开启
小程序是运行在微信环境中，而网页是运行在浏览器环境中。由于运行环境不同，所以小程序中，无法调用DOM和BOM的API。但是，小程序中可以调用微信环境提供的各种API，例如地理定位，扫码，支付。网页的开发模式：浏览器+代码编辑器。而小程序有自己的一套标准开发模式：登录网址https://mp.weixin.qq.com/，注册一个个人的账号，填写好相关的信息，我们的账号就注册好了。获取小程序的APPID。在上边的网址完成注册以后，我们在页面中可以找到我们的小程序的APPID展示在如图所示的位置。微信
2022-12-04 02:12:13
15772
2
原创 一键让网页变黑白色调
每次在清明节，或者发生重大变故的时候，当我们浏览网页时，发现我们的网页（比如百度的搜索页面变成了黑白色）。这种效果是怎么实现的呢？我们无论通过什么方式，比如找到网站的css文件，插入以上类似代码，或者在网页标签内加入，只要使其生效，就能达到让网页变灰的效果。使用css样式，在网页的CSS文件中添加以下的CSS代码，来实现网页黑白色，以下是以webkit为内核的浏览器的示例。URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。
2022-11-30 20:53:56
1725
原创 TypeScript开启
这里在使用ts里的变量的时候，产生一个问题，同一个文件夹下(其实不同文件夹下也会产生这样的问题)的t不同s文件怎么会产生重名问题，是因为在一个没有任何设置的普通项目中，vscode编辑器会把当前打开的 ts 文件当作一个整体的作用域进行验证。这里的w是watch的意思，输入这样的命令之后，会帮助我们监视该ts文件，当该文件内容发生变化之后，会帮助我们在一定的时间间隔之后自动编译ts文件。通过类型声明可以指定ts中变量（参数、形参）的类型。当对变量的声明和赋值时同时进行的，TS编译器会自动判断变量的类型。
2022-11-27 22:57:40
2285
原创 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
2113
原创 配置webpack优化图片文件
进行处理，Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源。优点：减少请求次数；过去webpack4将图片资源通过。在五大模块同级下设置该配置项即可。
2022-10-19 17:52:14
576
原创 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
465
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
996
原创 圣杯布局的两种实现
实现效果：网页窗口在缩放过程中，三栏布局两边的盒子宽度是固定的，中间的盒子的宽度是自适应的。1.margin负值+float。2.flex布局实现。
2022-09-18 22:03:34
247
2
原创 vue3双向绑定的原理
2.修改某些Object方法的返回结果，让其变得更合理。比如利用Object.defineProperty给基本数据类型添加一个属性，就无法对属性进行定义，这时会抛出一个错误。4.Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。1.将Object对象的一些明显属于语言内部的方法，放到Reflect对象上。proxy：用于修改某些操作的默认行为，等同于在语言层面做出修改。reflect：es6为操作对象而提供的新的api。
2022-09-15 00:29:07
2077
原创 实现简单的发布订阅者模式
3. 发布消息，发布者遍历缓存列表，依次触发里面存放的订阅者回调函数。2.给发布者添加一个缓存列表，存放回调函数通知订阅者。1.首先想好谁是发布者。
2022-09-14 16:50:24
443
原创 手写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
250
原创 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
796
原创 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
346
原创 浅拷贝与深拷贝
浅拷贝：只复制某个对象的引用，而不复制对象本身，新旧对象还是共享同一块内存。深拷贝：创造一个一摸一样的对象，新对象和原对象不共享内存，修改新对象不会改变原对对象。浅拷贝的两种方法：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
437
原创 扩展运算符(展开语法)
扩展运算符可以数组或者对象转为用逗号分隔的参数序列。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
353
原创 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
432
原创 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
314
原创 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
原创 ES6开启 let关键字
为什么使用es6：变量提升增加了程序在运行时的不可预测性。语法过于松散，在实现相同的功能时，不同的人可能会写出不同的代码。1.let关键字类关键字的特点：(1):es6新增的用于声明变量的关键字。let声明的变量只在所处的块级作用域内有效。在一个大括号中使用let声明的变量才具有块级作用域，var是不具有这个特点的。 if (true) { let a = 1 console.log(a); }
2022-05-07 21:54:19
297
原创 正则表达式
什么是正则表达式：正则表达式是对字符串（包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为“元字符”））操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。在JavaScript中正则表达式也是一种对象。它经常被用来检索、替换那些符合某个模式(规则)的文本，例如验证表单，用户名输入框只能输入英文字母、数字、下划线。昵称输入框中可以输入中文。此外，正则表达式还用于过滤掉页面中的一些敏感词，或从字符
2022-05-06 21:57:31
199
原创 什么是递归函数
如果一个函数在内部调用自身，这个函数就是递归函数。如下案例：<!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
1682
原创 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
1166
原创 改变函数内部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
351
原创 函数内部的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
283
原创 函数进阶、开启 函数的定义与调用
函数的定义与调用：函数的定义方式：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
325
原创 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关注的人