JS
关注
分享
扫一扫
椒盐大肥猫
扶我起来
展开
-
实现防抖函数并支持第一次立刻执行（vue3 + ts环境演示）
【代码】实现防抖函数并支持第一次立刻执行（vue3 + ts环境演示）原创 2024-03-20 18:36:02 · 1050 阅读 · 0 评论 -
JavaScript继承与原型链
原型对象也有一个自己的原型，层层向上直到一个对象的原型为 null。根据定义，null 没有原型，并作为这个原型链（prototype chain）中的最后一个环节。当你试图访问一个对象的属性时，如果在该对象本身中找不到该属性，就会在其原型中搜索该属性，如果仍然找不到，那么就会搜索原型的原型，以此类推，直到找到一个名字匹配的属性或到达原型链的末尾（即原型为null的对象）。1.1 在继承中，子类继承父类的特征和行为，使得子类对象具有父类的实例域和方法。继承和原型链是什么？原创 2024-01-25 16:50:25 · 1355 阅读 · 0 评论 -
构造函数更改或新增原型链
注意：如果构造函数返回非对象时，则会忽略该返回值，构造函数继续会返回原始值（默认的实例）原创 2024-01-25 15:30:25 · 427 阅读 · 0 评论 -
构造函数内部的this和常规函数内部的this
1.2 作为普通函数执行时，函数内部的顶层this会指向window。原创 2024-01-15 18:51:36 · 433 阅读 · 0 评论 -
JavaScript暂时性死区问题记录
注意：暂时性死区问题只针对当前模块，如下例子则不会存在暂时性死区的问题。原创 2024-01-08 10:09:17 · 456 阅读 · 0 评论 -
ES6中WeakMap和Map的区别
WeakMap和Map都是ES6中新增的数据结构，用于存储键值对。原创 2024-01-04 14:18:07 · 584 阅读 · 0 评论 -
箭头函数的this指向问题
箭头函数内部的this是继承自定义时所在对象，而不是执行时所在的对象。这意味着箭头函数没有自己的this，而是使用外层代码块的this。因此，箭头函数不能用作方法或构造函数，也不能访问arguments和super。例如，下面的代码中，obj的show方法是一个箭头函数，它的this是继承自全局对象window，而不是obj本身。所以，this.x的值是undefined，而不是100。如果想让箭头函数的this指向obj，可以使用普通的函数表达式，或者使用bind方法显式绑定this。原创 2023-12-29 17:11:27 · 496 阅读 · 0 评论 -
浏览器事件循环错题记录
【代码】浏览器事件循环错题记录。原创 2023-12-25 10:18:49 · 393 阅读 · 0 评论 -
ES6表达式声明对象属性名和方法名
【代码】ES6表达式声明对象属性名和方法名。原创 2023-10-23 15:54:54 · 105 阅读 · 0 评论 -
利用html2canvas + jspdf将页面内容生成pdf并且下载
【代码】利用html2canvas + jspdf将页面内容生成pdf并且下载。原创 2023-10-07 11:21:31 · 824 阅读 · 0 评论 -
算法题记录
算法题记录原创 2023-03-08 16:05:27 · 251 阅读 · 0 评论 -
常用JavaScript技巧
1、函数绑定this方法apply(this, [1, 2])参数1：传入的this参数2：需要传入的参数（数组形式）call(this, 1, 2)参数1：需要传入的this参数2：需要传入的参数2、apply应用：获取数组的最大值Math.max.apply(null, [3, 5, 4]) // 5重写默认方法var count = 0;var oldParseInt = parseInt; // 保存原函数window.parseInt = fu原创 2022-03-14 23:23:57 · 792 阅读 · 0 评论 -
前端公共图标管理方案（可适用于png、svg混合的图标）
背景一些旧项目或者一些有png和svg图片作为图标的项目，而且不使用iconfont进行管理图标时，可以自己用jQuery+vue写一个html页面，来管理这些公共图标。实现思路cdn引入jQuery：用于动态获取css文件内容，经过正则格式化后，可以得到一个图标数组cdn引入 vue：将格式化后的数组，动态渲染图标cdn引入clipboard：用于复制图标名称具体实现如下，直接帖代码：<!DOCTYPE html><html lang="en"><hea原创 2021-10-10 14:05:23 · 471 阅读 · 0 评论 -
移动端应用根据不同平台引入静态cordova
在index.html页面引入以下script（安卓和ios的cordova需要自己下载并放置到对应的路径）<script> // -------注入cordova,自动适配安卓和ios平台 (function () { const agent = navigator.userAgent.toLowerCase(); console.log(agent); let importForCordova; if (agent.inclu原创 2021-05-17 13:42:28 · 366 阅读 · 0 评论 -
lodash真正按需引入方法
一、错误的按需引入lodash方法按照以下代码引入方法时import { random } from 'lodash'打包时，仍然会将lodash全部方法打包，如下图所示虽然经过gzip压缩后，lodash只有25k，但是蚊子腿也是腿，该优化还是需要进行优化一下。二、正确按需引入lodash方法下面进行正确的按需引入方式import { random } from 'lodash/random'打包后，可以看出webpack只打包了lodash中的random方法，文件大小也由531k原创 2021-04-22 15:41:50 · 8994 阅读 · 2 评论 -
判断js的数据类型
使用Object.prototype.toString.call()来判断数组、对象、字符串、数字和布尔类型Object.prototype.toString.call(1)// "[object Number]"Object.prototype.toString.call('string')// "[object String]"Object.prototype.toString.call(false)// "[object Boolean]"Object.prototype.toSt原创 2021-01-18 16:04:39 · 108 阅读 · 0 评论 -
触发链接跳转的几种方式
链接跳转的几种方式一、window.location.href方式跳转var openUrl = 'http://www.baidu.com';window.location.href = openUrl;二、window.open方式跳转var openUrl = 'http://www.baidu.com';window.open(openUrl, '_blank');// window.open(openUrl, '_self');三、a标签方式跳转代码如下（示例）： /原创 2020-11-23 18:04:51 · 3249 阅读 · 0 评论 -
表单验证
限制input框只输入纯整数数字<input type="text" class="input-number" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" name="password" ng-maxlength="10"> // onKeyUp="value=value.原创 2020-09-03 14:40:01 · 135 阅读 · 0 评论 -
JS资源容灾
JS资源容灾为了项目的首次加载速度快，有时候我们会使用一些在线的插件引入（例如cdn引入插件），但是在线的插件难免会出现一些不可避免的问题，例如插件服务器崩溃了、时间久远导致插件不再更新的问题等等，这些都会导致项目引入的在线插件无法正常使用，可能会导致项目无法正常使用。因此，js资源的容灾还是很有必要的。思路在script标签那里添加一个onerror方法，当在线资源加载失败时候，在onerror方法里面手动添加静态js资源具体实现下面以引入clipboard插件进行测试<!DOC原创 2020-08-10 10:55:31 · 224 阅读 · 0 评论 -
根据浏览器语言来设置项目语言
// navigator.appName === 'Netscape'说明是浏览器访问（Chrome，Firefox，Safari，opera，IE浏览器）if (navigator.appName === 'Netscape') { // navigator.language判断浏览器的语言 if (JSON.stringify(navigator.language).indexOf('en') !== -1) { // 设置项目的语言 Cookies.set('language原创 2020-06-05 14:10:33 · 340 阅读 · 0 评论 -
防抖函数优化搜索框
3.1.1.防抖优化搜索框一、在angular1.x项目优化搜索框::: tip（1）.通过方法形式触发搜索的，可以引入loadsh的debounce优化:::步骤一：在index.html页面引入插件<script src="https://cdn.bootcss.com/lodash.js/4.17.11/lodash.js"></script>步骤二：作用的页面<input type="text" data-ng-keyup="queryMethod()原创 2020-05-18 15:26:23 · 537 阅读 · 0 评论