- 博客(42)
- 收藏
- 关注
RSS订阅原创 前端img图片优化
1.如果是小标志图的话，可以放在iconfont里，下载代码引用，或者直接在里面找。2.如果小型图，可以在webpack打包的时候转base64（可配置限制大小）3.如果大型图，放在服务器上，引入url
2021-03-18 23:31:13
335
原创 flex 布局属性
容器属性justify-content: center; 子元素横轴排列方式align-items: center; 子元素纵轴排列方式align-content: center; 多行子元素纵轴排列方式flex-direction: row-reverse; 主轴排列方向flex-wrap: wrap; 是否超出换行flex-flow ：row wrap； 4，5条的集合子元素属性order : 1 子元素排列顺序align-self
2021-03-16 23:37:28
164
1
原创 Object.keys()、Object.values()、Object.entries()
一、Object.keys(obj)参数：要返回其枚举自身属性的对象返回值：一个表示给定对象的所有可枚举属性的字符串数组处理对象，返回可枚举的属性数组let person = {name:"张三",age:25,address:"深圳",getName:function(){}};console.log(Object.keys(person));在处理字符串或者数组时返回索引值数组**二、Object.values()返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键值
2021-03-02 12:27:59
126
原创 解决移动端 iframe 嵌套页面 ios会出现不滑动问题
把 iframe页面包一层div，然后加上以下样式-webkit-overflow-scrolling: touch;overflow: scroll;例如 //html <div class="aa"> <iframe src="" width="100%" height="100%"></iframe> </div> //css <style> .aa{ -webkit-overflow-scrolling: t
2021-02-22 17:03:52
982
原创 css 去除相邻元素行内块元素display inlineblock中的间隙
倆个行内快元素在一行时会出现间隙，例如<style> .aa{ display: inline-block; background-color: red; color: green; font-size: 14px; }</style><body> <div class="aa">行内快</div> <div class="aa">间隙</div> <div&g
2021-02-20 08:57:32
304
原创 js 中 new操作符的作用
1.在内存中创建一个新对象2.把新对象的_ _ proto_ _属性链接到构造函数的原型prototype属性上3.把构造函数内部的this指向新对象上4.执行构造函数（给新对象添加属性）5.如果构造函数返回的是非空对象()，则返回该对象；否则，返回刚创建的对象。（返回的是引用类型就返回引用类型对象，没有返回或者返回数据类型则返回新创建的对象）下面是一些小例子，加深一下理解function fn() { this.user = '11'; return {};
2021-02-19 23:41:35
122
原创 ajax 和 axios
ajax技术核心是XMLHttpRequest,无须刷新页面即可从服务器取得数据，然后在通过DOM将新数据插入到页面中。四部曲1.先创建 XMLHttpRequest构造函数var xhr = new XMLHttpRequest()2.创建连接 请求已备发送xhr.open("method",url,bollean)3.发送请求xhr.send(null)4.绑定监听事件，接收服务器发来的数据xhr.onreadystatechange = function(){if(this
2021-01-19 00:33:53
126
原创 原生实现vue的双向数据绑定
<!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> <input type="text"
2021-01-07 11:11:51
82
原创 css 让文本 单行居中，多行居左
//父元素设置 text-align:center;//子元素 p标签 text-align :left ; display:inline-block;// 文本不够一行的时候，父元素属性使p标签居中显示。p元素内部文本撑开宽度。多行时，p标签宽度顶满父元素宽度，内部文本居左...
2021-01-05 08:49:38
281
原创 json 对象 stringify parse
*JSON.stringify()和JSON.parse() 都是深拷贝//JSON.stringify() 将js序列化为 json字符串//可以接受三个参数//第一个是 要序列化的对象//第二个是 过滤器（可以是数组或函数）//第三个是 用于缩进结果字符串的选项let book = { title:"平凡的世界", authors:["路遥","我"] }JSON.stringify(book，["authors"],4)JSON.stringify(book,(key,value
2020-12-09 18:52:37
127
原创 js 嵌套对象，替换属性值（递归）
//把 aa 里面a的属性为1的替换为1234//不知道 对象嵌套多长少层 利用递归原理 let aa = {a:1,b:2,c:{a:1,b:2,c:{a:1,b:2,c:{a:2}}}} function abc(aa){ for( var key in aa){ if(key=="a" && aa[key]=="1"){ aa[key]="1234" } if(typeof aa[key] =
2020-12-08 16:09:12
2138
原创 js sort、reserve排序(商品常用)
reserve 翻转数组 （灵活应用）sort（）不加参数直接调用，会在每一项调用string（）转型函数，然后按照字符编码顺序排序。var arr1 = ['a', 'd', 'c', 'b'];arr.sort(); //['a', 'b', 'c', 'd']var arr2 = [10, 5, 40, 25, 100, 1];arr2.sort(); //[1, 10 ,100, 25, 40, 5]这样没有达到我们想要的效果；sort（）方法还可以接受一个比较函数，用于判断哪
2020-12-08 11:34:13
1845
原创 css画三角型 画圆型
正方形边框其实是三角形 width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;
2020-12-03 17:42:18
115
原创 css 清除浮动父元素高度坍塌最佳方法
.aaa::after{ content: ""; display: block; clear: both; }
2020-12-02 18:09:03
109
原创 css 元素、图片居中
不知道宽高1.父元素相对定位子元素绝对定位 position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);2.绝对定位方式display: flex;align-items: center;justify-content: center;position: absolute; top: 0; bottom: 0; left: 0; ri
2020-12-02 17:56:00
84
转载 css弹性盒子--弹性布局flex-grow、flex-shrink、flex-basis详解
flex-grow、flex-shrink、flex-basis三个属性的作用：在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。(注意：这三个属性都是在子元素上设置的，下面小编要讲的是父元素，指以flex布局的元素(display:flex))小编这里先教一下大家如何快速记住这三个属性：首先是 flex-basis ，basis英文意思是<主要成分>，所以他和width放在一起时,肯定把width干掉，basis遇到width时就会说我才是最主要的成分，你是
2020-12-02 09:30:31
574
原创 css 超出多行省略号（移动端完美适配）
word-break: break-all; /* autoprefixer: ignore next */ display: -webkit-box; /* autoprefixer: ignore next */ -webkit-line-clamp: 2; //超出几行 /* autoprefixer: ignore next */ -webkit-box-orient: vertical;...
2020-12-01 22:55:56
1024
原创 vuex 和localstorage、sessionstorage，区别
1.区别：vuex存储在内存，localstorage（本地存储）则以文件的方式存储在本地,永久保存（不主动删除，则一直存在）；sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理2.应用场景：vuex(响应式的)用于组件之间的传值，localstorage，sessionstorage则主要用于不同页面之间的传值。（非响应式的，
2020-11-30 11:13:01
2584
原创 css 俩个垂直的块级元素外边距塌陷问题
在“标准文档流中” 通过 margin 定义块元素的垂直外边距时，可能会出现外边距的合并现象；合并的情况有两种：一种是相邻块元素垂直外边距的合并，另一种是嵌套块元素垂直外边距的合并相邻块元素的垂直外边距的合并现象当上下相邻的两个块元素都设置外边距（margin），如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂直间距不是 margin-bottom + margin-top实际会取两个值中的较大者作为外边距，这种现象被称为相邻块元素垂直外
2020-09-21 14:19:27
425
原创 vue 单页面(spa)多页面(mpa)优缺点
公司从单页面应用转移到了多页面，总结了下他俩之间优缺点单页面应用（spa）概念：只有一个html页面，所有跳转方式都是通过组件切换完成的。优点：页面之间跳转流畅、组件化开发、组件可复用、开发便捷、易维护。缺点：首屏加载较慢，加载整个项目中使用的css、js，SEO优化不好。多页面应用（mpa）概念：整个项目有多个html页面，所有跳转方式都是页面之间相互跳转的。优点：首屏加载较快，只加载本页所使用的的css、js，SEO优化较好。缺点：页面跳转较慢。...
2020-09-11 14:30:45
1139
1
原创 js 运行机制(Event Loop事件轮训)同步任务 异步任务(宏观任务和微观任务)(待更新详细介绍执行逻辑)
1、JS是单线程语言，包括同步任务、异步任务，异步任务又包括宏观任务和微观任务2、执行顺序：同步任务——>微观任务——>宏观任务3、宏观任务的方法有：script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)4、微观任务的方法有：Promise.then、MutaionObserver、process.nextTick(Node.js 环境)，as
2020-07-23 16:00:09
783
原创 js 防抖和截流
函数防抖节流防抖 //搜索监听响应在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时var timer; window.onscroll=function(){ if(timer){ clearTimeout(timer) } timer = setTimeout(function(){ console.log("哈哈") },2000); }节流 //滚动事件
2020-07-22 17:47:54
404
原创 js 数组常用api(包含fliter,some,map,every,reduce)
1.join 将数组转换成字符串，默认以逗号分隔 (不改变原数组)var arr = [1,2,3,4];console.log(arr.join()); //1,2,3,4console.log(arr.join("/")); //1/2/3/42.sort 按数组生序降序排列数组arr.sort(function(a,b){return a-b})升序arr.sort(function(a,b){return b-a})降序//数组里对象某隔属性值function compare(
2020-07-21 15:54:44
392
原创 5大浏览器内核
-ms-代表【ie】内核识别码-moz-代表火狐【firefox】内核识别码-webkit-代表谷歌【chrome】/苹果【safari】内核识别码-o-代表欧朋【opera】内核识别码做浏览器兼容的话，把浏览器前缀加上
2020-07-21 14:34:05
219
原创 vue 常见问题汇总（持续更新）
1:v-for 与 v-if 不能用于同一级v-for优先级高于v-if 每一个都会判断2:v-for 加key值不加key值生成的每一个元素都一样，修改其中一个的话。会从新便利数组，加key，修改其中一个的话，直接找到被修改的元素进行修改。3:vuex 状态管理state: 存储状态值getters: 不改变状态值，派生出一些状态，比如对表进行过滤并计数mutations: 修改状态值 同步事件action: 修改状态值 处理异步事件module： 模块结合辅助函数用方便
2020-07-09 15:36:10
431
原创 常用git 自己收藏总结
//新建个文件目录git init //初始化仓库，通过这个命令把这个目录变成git可以管理的仓库//把自己写的东西放在目录下git add +文件 // 把文件添加到仓库工作区git rm +文件 // 从版本库暂存区删除文件 git commit -m "xxx" // 把文件提交到残酷 xxx本次提交声明//为什么Git添加文件需要add，commit一共两步呢？因为commit可以一次提交很多文件，所以你可以多次add不同的文件git status 查看当前库的状态 比如
2020-07-07 13:38:22
97
原创 js原生解决页面传值(乱码获取不到等)问题
进行页面传参时，里面有特殊符号或者有嵌套双引号等这类的，这个时候传参获取不到，或者有乱码问题，我们可以用转码来传递这类的参数值//传递的页面 把传递的值进行编码var send = btoa(encodeURI(string));//接收的页面 把接收来的值进行转码var receive = decodeURI(atob(send));encodeURL/decodeURL : 不能编码!，#，$，&，’，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A
2020-06-10 17:53:21
326
原创 移动端之禁止输入框输入表情
思路是给输入框绑定 change事件,用正则匹配输入框的内容，发现有表情就替换为空只能输入数字英文啊等等都是这个思路我这里是用的 vue 框架（别的方法都一样），例如 <input type="text" v-model="inputMessage" :change="check_num()">inputMessage ：输入框输入的值 check_num(){ var regStr = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\
2020-06-08 00:01:54
2076
原创 vue 中生成带logo的二维码vue-qr(可换背景)&& 利用qrcode生成二维码
vue 中生成带logo的二维码这里运用了一个插件 vue-qrnpm install vue-qr --save<template> <div> <vue-qr :correctLevel="3" :autoColor="false" colorDark="#313a90" :bgSrc="bgSrc" :logoSrc="logoSrc" :text="codeUrl" :size="95" :margin="0" :logoMargin="3">
2020-06-02 11:25:07
1412
原创 移动端之块级元素div a img标签等解除点击高亮阴影效果
移动端之a标签解除点击高亮效果css 中 a{ -webkit-tap-highlight-color:transparent; }***在微信里点击事件跳转下载等，不同机型的手机 普通标签可能出现不跳转的情况，这里就可以用a标签实现跳转...
2020-05-29 14:55:38
451
原创 移动端之禁止长按复制文字(兼容ios)
移动端之禁止长按复制文字在css中设置以下即可 *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-select:none;}在添加完
2020-05-29 11:25:56
1403
原创 js 字符串常用api()
js 字符串常用api！！！所有字符串的方法都会返回新字符串。它们不会修改原始字符串。！！！所有字符串的方法都会返回新字符串。它们不会修改原始字符串。！！！所有字符串的方法都会返回新字符串。它们不会修改原始字符串。查找字符串一、 length： 返回字符串的长度 var str = "abcdef" var strLen = str.length // 6二、 indexOf( )： 返回字符串中指定文本首次出现的索引（位置***如果未找到返回 -1（可以利用这个做js判断）
2020-05-28 14:55:23
610
原创 移动端之js判断是安卓还是ios设备(是否在微信端打开)
js判断是安卓还是ios设备(是否在微信端打开)//判断是否在微信中打开var ua = navigator.userAgent.toLowerCase();var isWeixin = ua.indexOf('micromessenger') != -1; if( isWeixin ){ //执行逻辑 }else{ //执行逻辑 }//判断是否在ios或者安卓打开var u = navigator.userAgent;var isIos = !!u.match(/\(i[^;]+;
2020-05-28 12:08:26
460
原创 移动端之h5禁止缩放(ios10以上兼容）
移动端ios10以上禁止缩放问题通常移动端禁止缩放，在meta里这样设置。安卓机这样设置就可以啦，但是ios10以上不支持了，还需设置以下代码，直接引用即可。<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, minimum-scale=1.0,maximum-scale=1.0"> // ios 10 禁止缩放 //ios 10以上 wi
2020-05-28 11:01:41
1934
原创 移动端之点击复制到粘贴板(兼容安卓和ios)
标题 js点击复制到粘贴板兼容安卓和ios运用clipboard插件，能兼容ios和安卓 各大浏览器官网 http://www.clipboardjs.cn 都有详细文档
2020-05-13 14:36:07
495
原创 微信小程序路由(组件之间跳转)传参和传数据
先了解下及种路由跳转wx.redirectTo(Object object) 关闭当前页面，跳转到应用内的某个页面。（销毁跳转）不能跳转到 tabbar的页面wx.navigateTo(Object object) 保留当前页面，跳转到应用内的某个页面。不能跳转到 tabbar的页面wx.switchTab(Object object) 跳转到 tab...
2020-04-17 17:46:54
1251
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人