前端
关注
分享
扫一扫
文章平均质量分 65
Sylvia_2000
这个作者很懒，什么都没留下…
展开
-
opacity数值设置为百分比，打包后数值变为1%
问题：在设置CSS样式时，把元素opacity的数值设置为百分比，比如65%，在打包发布到环境上之后，发现元素消失了。查看style，发现其实是元素还存在，只是opacity数值变为1%，所以看起来好像消失了一样，且不管怎么修改设置都一直是1%解决方案：实际opacity的取值范围是0~1，所以应该设置为0.65；改为0.65后，发布到环境上，元素可见且opacity取值为0.65，问题解决...原创 2021-03-29 09:29:24 · 1314 阅读 · 7 评论 -
关于es6新特性的总结
1.let & const1) let，作用与var类似，用于声明变量特性：let 不能重复声明变量，var 可以重复声明变量；块级作用域，es5中存在全局作用域、函数作用域、eval作用域；es6中引入了块级作用域，let声明的变量在块级作用域{}内有效let声明的变量不存在var的变量提升问题举个例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2021-01-31 21:53:16 · 34895 阅读 · 20 评论 -
关于webpack的理解
webpack是一个JavaScript应用程序的静态模块化打包器，意味着webpack在不进行特殊配置的情况下就只认识JavaScript一种语言，只能处理JavaScript这一种语言1)原理&作用0) 理解前端模块化⇒ 为了避免变量冲突和覆盖，不同js文件间可以使用命名空间，譬如在susan.js中var susan = { name: 'susan', tell: function(){ console.log('我的名字：', name) }}在liming.js原创 2021-01-26 20:55:25 · 279 阅读 · 0 评论 -
关于npm的理解
1.npm仓库与依赖的概念npm是一个包管理器，通过站点上的仓库，实现上传、分发、下载包的功能由于站点在国外，我们可以设置连接npm的国内淘宝镜像站点npm config set registry https://registry.npm.taobao.orgnpm install loadash --save / npm install loadash -s--save是为了将下载下来的包记录在package.json中的dependencies字段中，后续项目迁移后，只需要运行np原创 2021-01-23 22:18:43 · 497 阅读 · 0 评论 -
2020-vue：vue组件间通信
文章目录1.父子组件通信1) 父子组件通过props传递参数父组件子组件另，props可以有以下3种写法2.子父组件通信1) 子父组件通过$emit方法传递参数父组件子组件2) 父子组件通过引用类型传参父组件子组件3.兄弟组件间通信1) 通过父组件作为中间件来通讯父组件子组件1子组件22)通过EventBus进行兄弟间组件通讯main.js子组件1子组件2父组件1.父子组件通信1) 父子组件通过props传递参数父组件<template> <div>原创 2021-01-11 17:21:26 · 654 阅读 · 1 评论 -
2020-vue面试题
文章目录1.vue双向绑定的原理2.解释单向数据流和双向数据绑定3.如何去除url中的“#”(history模式和hash模式的区别)4.对MVC、MVVM的理解5.介绍虚拟DOM树6.vue生命周期（4个阶段，8个钩子函数）7.组件间通信1）父子通信2）子父通信3）兄弟间通信8.vue-router路由实现9.v-if 和 v-show 的区别10.$route 和 $router 的区别11.vue组件data为什么必须是函数12.计算属性computed和事件methods有什么区别13.jQuery原创 2021-01-09 16:58:43 · 674 阅读 · 1 评论 -
利用webworker实现前端的多线程编程
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!-- 主线程 -->原创 2021-01-07 23:16:15 · 312 阅读 · 0 评论 -
关于promise用法示例及实现原理
文章目录1.用法示例2.实现promise原理1.用法示例 lilei('yo~~').then(hanmeimei).then(liming) function lilei(bang){ return new Promise((open)=>{ console.log('李雷起跑') setTimeout(() => { console.log('李雷到达终点') console.l原创 2021-01-06 22:54:26 · 181 阅读 · 0 评论 -
利用promise及参数解构封装ajax请求
文章目录1.前端代码2.后端1.前端代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>原创 2021-01-06 16:13:14 · 390 阅读 · 3 评论 -
2020-10：节流&防抖及其应用场景和原理
文章目录1.防抖2.节流1.防抖只要不是最后一次触发，就不执行异步请求<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head>原创 2021-01-05 15:08:59 · 334 阅读 · 0 评论 -
2020-9：DOM的浏览器兼容性问题/IE的事件处理和W3C的事件处理有哪些区别
DOM的浏览器兼容性问题1）事件模型2）事件绑定：3）获得事件对象的方法：4）获得目标元素5）阻止冒泡：6）阻止默认行为:7）定义一个函数，可以支持所有浏览器中的处理函数的绑定（考虑浏览器的兼容性）1）事件模型DOM（3个阶段）：① 外向内：捕获② 目标触发③ 内向外：冒泡执行IE8（2个阶段）：没有捕获阶段① 目标触发② 内向外：冒泡执行2）事件绑定：DOM: elem.addEventListener(‘click’, function(){}, false)，第3原创 2021-01-03 15:39:47 · 190 阅读 · 0 评论 -
2020-题目（CSS3）
1. display: none; 与 visibility: hidden; 的区别相同点：都能让元素不可见不同点：1) 渲染树display: none; 会让元素完全从渲染树（不是dom树）中消失，渲染的时候不占据任何空间；visibility: hidden; 不会让元素从渲染树中消失，渲染元素继续占据空间，只是内容不可见2) 属性是否可继承display: none; 是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示visibility:原创 2020-12-30 22:40:53 · 119 阅读 · 0 评论 -
2020-题目（HTML5）
2020题目（2）1.DOCTYPE的作用？标准模式与兼容模式的区别？2.页面导入样式时，使用link和@import有什么区别？1) 用途：2) 加载顺序3) 优先级4) DOM操作3.对浏览器内核的理解4.常见的浏览器内核种类5.HTML5新特性6.HTML5移除的元素7.如何处理HTML5新标签的兼容性8.对HTML语义化的理解9.[重要]cookie、sessionStorage、localStorage相同点：都存储在客户端不同点：1) 存储大小2) 有效时间3) 数据与服务器之间的交互方式4）实原创 2020-12-30 21:24:14 · 407 阅读 · 1 评论 -
2020-8：实现浏览器内多个标签页之间通信的4种方式(html5 & JavaScript)
1) cookie + setInterval 方式注: cookie、localStorage、sessionStorage在同源页面间属于共享资源。（同源：如两个页面的协议、IP地址、端口号相同，即为同源页面）缺点：① cookie 空间有限，浏览器在每个域名下最多能设置30-50个cookie，容量最多4k左右② 每次 HTTP 请求会把当前域的所有cookie发送到服务器上，包括只在本地才用到的。浪费网络带宽③ setInterval的频率设置，过大会影响浏览器性能，过小会影响时效性优原创 2020-12-30 21:19:08 · 1220 阅读 · 1 评论 -
2020-题目（JavaScript）
1.this指向问题 var length = 10 function fn(){ console.log(this.length) } let obj = { length : 5, method : function(fn){ fn() arguments[0]() } } obj.method(fn,1) // 执行结果：10 22.声明提前 fun原创 2020-12-27 19:43:10 · 150 阅读 · 0 评论 -
2020-7：浅拷贝&深拷贝（JavaScript）
let lili = { name : 'lili', age : 12, scores: null, friends: ['jack','rose'], adress : { province : 'sichuan', city : 'chengdu', }, } // 浅拷贝：如果被拷贝的原始对象中包含对象或数组，拷贝的是其变量保存的值，即引用的地址值 -- 若改变lili2...原创 2020-12-26 22:45:36 · 135 阅读 · 1 评论 -
2020-6：闭包（JavaScript）
let funs = [] for(let i = 0; i < 3; i++){ funs[i] = (function(i){ // 注意此处是按值传递 return function(){ console.log('i:',i) } })(i) } /* 执行后形成闭包 funs = [ function(){ (i=0) console...原创 2020-12-26 19:27:11 · 98 阅读 · 0 评论 -
2020-5：作用域链--this的指向问题（JavaScript）
obj.fun()fun中的this指向 .前的objnew 构造函数()构造函数中的this指向 将来new出的新对象fun()匿名函数自调用：(function(){})()setInterval(function(){…},1000)setTimeout(function(){…},1000)setInterval(obj.fun,1000)setTimeout(obj.fun,1000)以上this均指向windowbtn.addEventListener(‘click’,ob原创 2020-12-26 19:14:00 · 103 阅读 · 0 评论 -
2020-4：数组操作--去重--字典（JavaScript）
let arr = [1,2,3,4,3,2] let dict = {} // 遍历数组，以当前元素作为属性名加入字典中，属性值可随便写 for(let i = 0; i < arr.length; i++){ dict[arr[i]] = 1 } console.log(dict) // 遍历字典，仅获取属性名 let res = [],i = 0 for(res[i++] in dict); // 依次取出...原创 2020-12-26 19:13:05 · 463 阅读 · 0 评论 -
2020-3：字符串操作--统计一个字符串中字符出现的次数，并找出最大值--字典（JavaScript）
// 字典方法 统计一个字符串中字符出现的次数 let str = 'helloworld' let dict = {} // 先定义空对象 for(let i = 0; i < str.length; i++){ // 遍历字符串中每个字符 if(dict[str[i]] === undefined){ // 如果dict对象中未包含以当前字母为属性名的成员，就强行添加一个以当前字母为属性名的成员，并赋属性值为1 dict[str[i]]...原创 2020-12-26 12:13:39 · 558 阅读 · 0 评论 -
从cookie字符串中取值
<script> var cookies=JSON.parse('{"'+document.cookie.replace(/=/g,'":"').replace(/;\s+/g,'","')+'"}') console.log(cookies); </script>1.document.cookie 将 cookie 取出...原创 2019-08-01 14:00:41 · 1966 阅读 · 0 评论 -
js 数组 冒泡排序
1.使用原生js进行冒泡排序let arr=[74,23,59,80,46,9];// 外层循环：控制比较的轮数for(var i=1;i<arr.length;i++){ // 内层循环：控制比较的次数 for(var j=0;j<arr.length-i;j++){ // 如果当前的元素大于下一个元素，则元素位置交换 if(ar...原创 2019-08-08 14:00:06 · 267 阅读 · 0 评论 -
利用vue实现级联菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-08-19 08:49:08 · 3285 阅读 · 1 评论 -
使用原生js翻转数组
如下let arr=['a','b','c','d'];let newArr=[];for(var i=0;i<arr.length;i++){ newArr[i]=arr[arr.length-1-i]}console.log(arr)console.log(newArr)原创 2019-08-07 19:54:12 · 846 阅读 · 0 评论 -
原生js封装计算时间差函数
// 声明两个日期var d1=new Date('2019/5/1 10:30:23');var d2=new Date('2019/12/25 00:00:00');// 函数主体function getDValue(date1,date2){ var d=Math.abs(date1-date2); // 得到总秒数 var s=Math.floo...原创 2019-08-16 20:21:54 · 541 阅读 · 0 评论 -
一个vue项目的创建_for小白版
0.检查node版本 / 安装node–检查node -v–安装地址：link1.检查vue/cli版本 / 安装vue/cli脚手架命令行工具–检查vue --version–安装npm install -g @vue/cli2.使用vue命令，创建一个项目vue create projectName...原创 2019-08-26 21:38:39 · 157 阅读 · 0 评论 -
webpack常用命令
0.在指定文件夹内初始化npmnpm init1.使用npm在该文件夹内安装webpacknpm install webpack --save-dev原创 2019-08-27 04:10:57 · 169 阅读 · 0 评论 -
正则表达式
一、应用场景1.验证字符串格式2.查找敏感词二、规则0.最简单的规则，就是一个关键词原文1.字符集：[备选字列表]，如[槽草艹]匹配规则为多选一匹配时，只要与[]中任意一个字符匹配，就算满足规则1.1 字符集的组合：关键词原文[字符集]，如：我[槽草艹][字符集][字符集]，如：[我卧][槽草艹]1.2 字符集的简写1）如果[ ]中部分备选字符连续（此处指Unicode码连...原创 2019-08-31 18:20:30 · 297 阅读 · 0 评论 -
事件冒泡
捕获 ==> 触发 ==> 冒泡注：ie8中为 触发 ==> 冒泡事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。注：这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。...原创 2019-08-03 17:54:34 · 224 阅读 · 0 评论