- 博客(52)
- 收藏
- 关注
RSS订阅原创 JS封装复制文本内容到剪贴板的方法
模拟用户操作，调用document.execCommand("copy")的API，这里提供两种思路，一种是强制给ClipboardEvent对象强制写入值，但注意要阻止默认事件，否则会被复写。另一种思路是创建一个文本选区，然后再执行document.execCommand("copy")复制文本，这个实现和用户实际操作非常接近了，以下提供两种方法。假如我们创建的dom是input元素，还可以取一个巧，调用dom的API——select方法，可以直接创建一个本文选区，可以少写一些代码。
2022-12-18 02:57:07
1420
1
原创 JS 谈谈你对闭包的理解？
闭包的定义是：那些引用了另一个函数作用域中的变量的函数。——《红宝书》书中举了一个经典的例子：function compare(name) { return function(obj1,obj2) { let value1 = obj1[name]; let value2 = obj2[name]; if (value1 > value2) { return 1 }else if(value1 &
2021-10-20 01:54:33
216
原创 JS 1–100000个数字，丢了两个数后打乱顺序怎么找到丢的两个数字？
这题感觉靠脸，99998个数字还是打乱的数组，如果先排序或者其他整理数据结构的方法，然后再遍历十分浪费性能。假如这剩下99998个数字存放在arr数组里，那么const target = []for (let i = 1; i <= 100000; i++) { if (!arr.includes(i)) { target.push(i); if(target.length === 2){ break; }
2021-10-09 01:34:09
362
原创 JS 在10000下不重复的数字中随机抽取5000不重复样本，多次操作获得的不同结果
要求：arr为一个1至10000的数组，随机抽取5000个不同的数据，放到target数组里，并且arr最后剩下未抽取的数。①首先创建一个数组arr包含1-10000的数字②打乱顺序数组arr的顺序，然后arr.splice(0,5000)给target赋值，简单粗暴。或者用for循环,使用splice方法随机对arr数组任意index截取一位，并且push到target数组中。方法有很多。const arr = new Array(10000);for (let i = 0; i &l
2021-10-09 01:20:01
657
原创 JS 封装函数：数字转换为中文，或反之
要求：change(123) 返回 '一二三'；change('一二三')，返回123function change(arg) { let key = '一二三四五六七八九十'.split('') if (typeof arg === 'number') { let reg = /\d/g; arg = arg.toString().replace(reg, function (num) { return key[+num -
2021-10-07 00:51:20
166
转载 JavaScript 对象有哪些原生方法，列举一下
toString : 返回所有势力所属类的信息，通常用这个检测数据类型；Object.prototype.toString.call() hasOwnProperty : 检测某个属性是否是这个对象的私有属性； in：检测某个属性是否是这个对象的属性； propertyIsEnumerable：对象的某个属性是否是可枚举的；...
2021-10-06 23:57:52
167
原创 JS 说一说你知道的数组方法，哪些改变了原数组？
改变原数组的方法：pop()、push()、reverse()、shift()、sort()、splice()、unshift() 不改变原数组的方法：concat()、join()、slice()、toString()
2021-10-06 23:51:30
286
原创 JS 计算一组数据的平均数
要求：average(args)返回一个Number类型的平均数,保留一位小数。function average(...arg) { let sum = 0; arg.forEach(val => { sum += val }) return +(sum / arg.length).toFixed(1);}
2021-10-06 23:48:49
589
原创 JavaScript 数组去重
function quchong(arr) { if (!Array.isArray(arr)) { return arr; } const temp = []; for (let i = 0; i < arr.length; i++) { if (temp.includes(arr[i])) { arr.splice(i, 1); i--; } else { .
2021-10-06 23:39:05
68
转载 JavaScript null和undefined的区别?
undefined是一个表示"无"的原始值,转为数值时为NaN当声明的变量还未被初始化时,变量的默认值为undefinednull用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象null表示一个对象被定义了，值为“空值”；undefined表示不存在这个值。undefinedundefined表示 “缺少值”,就是此处应该有一个值,但是还没有定义。典型用法是：变量被声明了,但没有赋值时,就等于 undefined 调用函数时,应该提供的参数没有提供,该参数等于..
2021-10-06 00:42:43
153
原创 JS 封装一个函数计算距离某一天还有多少天
要求：restDays('xxxx/xx/xx')返回剩余天数// JS 封装一个函数计算距离某一天还有多少天function restDate(date) { const target = +new Date(date); const today = +new Date(); const A_DAY = 1000 * 60 * 60 * 24; const A_HOUR = 1000 * 60 * 60; const A_MINUTE = 1000 * 60
2021-10-06 00:21:53
707
原创 JS 封装一个给定整数范围的随机数生成器函数
要求：random(max,min)返回max-min范围内的随机产生一个随机数。function ramdom(max, min) { return (Math.round(max - min) + min);}
2021-10-05 23:57:39
170
原创 Vue.js 组件通信都有哪些？
Vue组件间通讯遵循单项数据流的原则：父组件→子组件。如果子组件想要更改父组件的数据，需要通知父组件去修改，本质上还是父组件自己去更改数据。组件间的通信归纳为以下：目录Props 父组件-> 子组件 传参$emit 子组件 -> 父组件 传参Props 父组件-> 子组件 传参页面展示描述：父组件中子组件<son />绑定了share属性，值为父组件的data："father_share_data"。同时子组件这边使用props接...
2021-10-05 00:11:31
245
原创 Vue.js 组件的生命周期函数钩子有哪些？
8个钩子：创建Create: beforeCreate(), created() 挂载Mount: beforeMount(), mounted() 更新update: beforeUpdate(), updated() 销毁destroy: beforeDestroy, destroyed()
2021-09-28 00:47:54
171
转载 Vue.js 中模板编译原理
答：将template转化成render函数。源码：function baseCompile ( template: string, options: CompilerOptions) { const ast = parse(template.trim(), options) // 1.将模板转化成ast语法树 if (options.optimize !== false) { // 2.优化树 optimize(ast, options) }
2021-09-28 00:27:49
128
原创 Vue.js 简单描述nextTick原理?
①调用nextTick函数传入回调函数②JS中调用栈（call stack）的执行规则是先执行同步代码，空闲时进行事件循环（event loop）执行任务队列（task queue）里的函数。像操作DOM的代码就是同步代码，会先于nextTick函数传入的回调函数执行。③实际上问题就是怎么写异步函数的问题，Vue中采用了4种执行异步函数的代码判断，Promise类 => MutationObserver类 => SetImmediate函数 => SetTimeout函数P
2021-09-28 00:24:15
261
原创 Vue.js 响应式数据的原理
核心：Object.defineProperty 或 Proxy类 去操作底层默认行为。Object.defineProperty 简单版：/*html... <body> <p>请输入:</p> <input type="text" id="input"> <p id="p"></p> </body> <script>
2021-09-27 23:34:50
80
原创 Vue.js MVC框架和MVVM框架有什么不同？
看了一圈帖子，其实我感觉就2个词——拆分和改进。以下是个人理解，打个容易理解的比喻：在MVC框架中：M——后台数据池：即后端数据库，并提供接口给前端调用；V——HTML页面：即用户所看到界面，如一个input框用户可以输入信息；一个链接用户可以点击跳转C——JS代码：即我们在js文件中写的业务逻辑，如何处理用户的操作？View→Control：解析用户操作行为，转化为代码； Control(parse...)：写业务逻辑处理数据，准备好后台需要的数据； Control→Model
2021-09-26 21:43:41
336
转载 Vue3.0你知道有哪些改进?
Vue3采用了Type Script来编写 支持 Composition API Vue3中响应式数据原理改成proxy vdom的对比算法更新，只更新vdom的绑定了动态数据的部分
2021-09-25 17:51:02
241
转载 Vue.js 谈谈常见性能优化
1.编码优化:不要将所有的数据都放在data中，data中的数据都会增加getter和setter，会收集对应的watcher （vue 2.x 响应式原理Object.defineProperty） vue在 v-for 时给每项元素绑定事件需要用事件代理 （多个子元素绑定事件的场景下，可以把事件帮给父元素（wrapper层），通过e.target事件冒泡抓住事件原来写逻辑） SPA页面采用keep-alive缓存组件 （SPA即单页面应用，通过js切换元素显示与隐藏，不会刷新页面重.
2021-09-25 16:48:54
195
原创 Vue中相同逻辑如何抽离？
1、使用mixin全局混入功能，可以给每个组件合并抽离出来的逻辑。但过于简单粗暴，应写相应的逻辑限制混入实际的作用范围，比如使用 if 判断某个组件是否包含某个数据，如果存在则执行混入的规则。2、公共方法可以抽离成一个 util.js 文件单独保存，某个组件需要时再import..from/ require('...')导入公共方法。3.大量使用的公共方法可以直接定义在 Vue.prototype 上，在入口文件可以操作。...
2021-09-25 00:16:51
1551
转载 Vue.js ajax请求放在哪个生命周期中？
答：在created的时候，视图中的dom并没有渲染出来，所以此时如果直接去操dom节点，无法找到相关的元素 在mounted中，由于此时dom已经渲染出来了，所以可以直接操作dom节点 一般情况下都放到mounted中,保证逻辑的统一性,因为生命周期是同步执行的，ajax是异步执行的一般情况下都放到mounted中,保证逻辑的统一性,因为生命周期是同步执行的，ajax是异步执行的服务端渲染不支持mounted方法，所以在服务端渲染的情况下统一放到created中...
2021-09-25 00:05:33
774
原创 Vue.js 组件中 data 什么时候可以使用对象形式定义
答：当我们 new Vue() 创建根实例时，此时也是创建了根组件，此组件不会被复用而造成对象内属性一变其他复用组件也跟着变的问题，此时data可以写成对象形式而不是函数返回对象的形式。/* html */<div id="app"> {{data1 + data2}}</div><script src='./vue.js' /><script> const vm = new Vue({ el:'#app',
2021-09-25 00:02:46
434
原创 Vue.js NextTick有什么用？
答：下次 DOM 更新循环结束之后再执⾏延迟回调，⽤于获得更新后的 DOM。/*...*/ <div id="app"> <div v-if='msg'>{{msg}}</div> <div v-if='msg1'>{{msg1}}</div> <div v-if='msg2'>{{msg2}}</div> <button @click='ha
2021-09-24 23:10:01
61
转载 Vue.js 中如何使用一个插件？
采⽤ ES6 的 import … from … 语法或 CommonJS 的 require() ⽅法引⼊插件 使⽤全局⽅法 Vue.use( plugin ) 使⽤插件,可以传⼊⼀个选项对象 Vue.use(MyPlugin, { someOption: true })
2021-09-24 18:24:20
119
原创 Vue.js ＜keep-alive＞＜/keep-alive＞ 的作用是什么?
答：缓存组件的状态，并在再次激活组件时使用缓存。如某个组件因触发事件改变某些数据，当组件切换时，会默认回到未操作的状态。使用<keep-alive>包裹组件就可以保持组件操作后的状态。...
2021-09-24 18:21:53
226
转载 Vue.js $route 和 $router 的区别是什么？
$route 是“路由信息对象”，包括 path ， params ， hash ， query ，fullPath ， matched ， name 等路由信息参数。 ⽽ $router 是“路由实例”对象包括了路由的跳转⽅法（push，go等），钩⼦函数等
2021-09-24 18:13:38
126
原创 vuex是什么？怎么使用？使用场景有哪些？
Q: vuex是什么？A: vuex形象的说是一个数据共享仓库，用于在组件关系复杂的情景下也能轻松地进行组件间数据通信。官方的说法是“一个专为 Vue.js 应用程序开发的状态管理模式，用于集中式存储管理应用的所有组件的状态”。传统的，子组件向父组件通信依赖调用实例的$emit函数，父组件向子组件通信使用props属性传参，但是关系较远的两个组件再使用这种方式必然十分繁琐。或许在根实例上注入共享数据，子组件通过 this.$root 去访问根实例的数据，在少量组件的情况下较为方便，而在大量组件的应用场.
2021-09-24 18:10:59
2840
原创 Vue.js 路由的钩子函数有那些？（即导航守卫）
全局守卫：（在router.js中用 'router.xxx守卫' 的方法调用钩子函数）1、全局前置守卫 beforeEach ——② 2、全局解析守卫 beforeResolve ——⑥ 3、全局后置钩子 afterEach ——⑦const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})路由独享守卫：befo...
2021-09-24 16:44:06
511
原创 简述html、css、js、函数代码注释的写法
HTML注释： <!-- HTML注释 -->CSS注释： /* css注释 */JS注释： // js单行代码注释 /* js多行代码注释 */JS函数描述注释：/** * 这是一个模板函数注释 * @param {String | String[]} str - 必传参数，传参类型为String|String[] * @param {Array|Object} op...
2021-09-24 02:17:55
268
转载 JavaScript 书写规范/原则
[转]参考变量的首字母不能是数字，其它字母可以是字母、数字、下划线 及 $符(美元) 不能用关键字和保留字作为变量的名字；（使用框架开发给组件命名需要注意） 使用驼峰命名法来书写变量（构造函数大驼峰/变量和函数小驼峰或_下划线分词/固定常量或函数全大写） 使用匈牙利命名法来书写明确知道变量名字，让别人一眼看出什么变量类型；（搜了一下是缩写词用法比如元素 element 简写 elem/el ，按钮 button 简写 btn 等） 后续需要用到的变量，可以先赋值为null； 借用变量的时候
2021-09-24 01:35:32
179
原创 常见浏览器有哪些？它们的内核是什么？
主流浏览器 内核 所属公司 IE（Internet Explorer） trident 微软Microsoft Chrome webkit / blink 谷歌Google Mozilla Firefox gecko 摩斯拉Mozilla Opera presto 欧朋Opera Software ASA Safari webkit 苹果Apple Inc. Microsoft Edge Chromium(
2021-09-24 01:22:19
120
原创 JavaScript 中的全局变量与局部变量的区别?
全局变量：是在全局作用域（即函数作用域及块级作用域以外的）中被定义的变量，其作用域是整个宿主环境。使用var关键字在全局作用域定义变量时，该变量作为windows对象的属性被存储。当宿主环境被关闭销毁时，才释放存储空间。局部变量：是在局部作用域（即函数作用域或块级作用域之内的）中被定义的变量，其作用域是函数内部或块级作用域内部。当 函数或块 执行完毕后，会被垃圾回收（创建闭包的情况除外）来释放存储空间。当一个全局变量指向一个闭包时，把该变量值置为null，即销毁对闭包的引用。则闭包中的数据会在下一次垃圾
2021-09-23 17:54:24
422
原创 true+11+null+9+undefined+“str“+false+null+9+[] 结果是？
答：'NaNstrfalsenull9'。运算是从左至右的。true + 11 ==1 + 11 == 12//boolean值被隐式Number包装成number类型；12 + null == 12 + 0 // null值被隐式Number包装成number类型；12 + 9 == 21 // number之间的运算；21 + undefined == NaN // underfined + 任何数据类型结果都是NaN（...
2021-09-23 00:49:24
76
原创 JS中函数如何绑定？（或者问this指向如何改变？）有何不同？
call函数：Fn.call(thisTarget, arguement1?, arguement2? ...)thisTarget必传的，实参逐个传，并用 ' , ' 隔开。 Object.prototype.toString.call(123) // [object Number]apply函数：Fn.apply(thisTarget, [arguement1, arguement2,...]?) Object.prototype.toString.apply(123) /.
2021-09-23 00:25:12
58
原创 JavaScript 如何实现预加载一张图片
预加载使用情景：当网络状态不好时，目标图片加载缓慢，此时需要一张体积小的图片充当占位符，一是告诉用户知道这个地方有个图片这一信息，二是页面更美观一些不至于留一块大白。核心：监听DOM的load事件（在DOM对象已加载时，发生此事件）。<body> <img src="./red.png" /> <script> const oImg = document.querySelector('img'); ...
2021-09-22 23:45:08
321
原创 JS如何遍历数组与对象？
通用：方法一：for-in循环 for (const key in data) { if (Object.hasOwnProperty.call(data, key)) { console.log(key, data[key]); } }方法二：Object.keys + forEach数组方法 Object.keys(data).forEach(key => con
2021-09-22 17:54:21
281
原创 用JS封装返回斐波那契数列第n位数的函数
要求：不使用全局变量，调用该函数并传数字n，需做严谨性判断，结果返回第n位数。方法一：使用递归的思想，动态规划的知识。第n项是第n-1项和第n-2项的和。 function Feibo(n) { if (typeof n !== 'number' || n <= 0) return false; if (n === 1 || n === 2) return 1; return Feibo(n - 1)
2021-09-22 17:00:26
270
原创 JavaScript 如何让alert弹出框中的信息换行？
核心：使用转义字符。 window.alert('L\nO\nV\nE');测试一下：备注：转义字符 含义 \n 换行 \t 制表符 \b 空格 \r 回车 \f 换页符 \ 反斜杠 ' 单引号 '' 双引号 \0nnn 八进制代码 nnn 表示的字符( n 是 0 到 7 中的一个八进制数字) \xnn 十六进制代码 nn 表示的字符( n 是 0 到 F 中...
2021-09-22 16:30:57
2315
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人