- 博客(26)
- 收藏
- 关注
RSS订阅原创 微信小程序中如何引入外部字体库iconfont的图标
1.进入阿里巴巴图标资源库，选择：资源管理–>我的项目–>右侧图标（创建项目）2.搜索你要的图标，加入购物车3.进入你的购物车，添加到你的项目中4.选择 Font class ，下载到本地5.解压下载的文件，打开网址：https://transfonter.org/，将tff文件转为css文件后下载到本地6.将转化后下载的文件解压，重名为为xxx.wxss（我这里重命名为iconfont.wxss）放入到你的小程序项目中7.打开你第一次从阿里图标库中下载的文件...
2021-08-24 10:11:45
640
1
原创 js可选的链?与双问号??用法，js实现值为null或undefined时默认赋值，js对象属性取值，对象属性不存在时不报错的实现
1.可选的链js对象属性取值，对象属性不存在时不报错const user = { employee: { name: "Kapil" }};user.employee?.name;// Output: "Kapil"user.employ?.name;// Output: undefineduser.employ.name// 输出: VM21616:1 Uncaught TypeError: Cannot read property 'name' of undefined
2021-08-19 11:02:59
1003
原创 计算字符串中某个字符出现次数的方法，计算某些特殊词出现的频率
1.通过创建一个对象let string = ‘kapilalipak’;const table={};for(let char of string) {table[char]=table[char]+1 || 1;}// 输出{k: 2, a: 3, p: 2, i: 2, l: 2}2.使用Map方式（key唯一）const countMap = new Map();for (let i = 0; i < string.length; i++) {if (countMap.h
2021-08-19 10:40:46
331
原创 数组去重的方法
方式一使用filter方法，如下：const array = [5,4,7,8,9,2,7,5];array.filter((item,idx,arr) => arr.indexOf(item) === idx);方式二使用set，如下：const nonUnique = […new Set(array)];// Output: [5, 4, 7, 8, 9, 2]
2021-08-19 10:32:36
91
原创 数组排序：字符串，数字或对象
字符串排序const stringArr = [“Joe”, “Kapil”, “Steve”, “Musk”]stringArr.sort();// 输出(4) [“Joe”, “Kapil”, “Musk”, “Steve”]stringArr.reverse();// 输出(4) [“Steve”, “Musk”, “Kapil”, “Joe”]数字排序const array = [40, 100, 1, 5, 25, 10];array.sort((a,b) => a-b
2021-08-19 10:28:24
83
原创 reduce求和，最小值和最大值
const array = [5,4,7,8,6,2,3,1];1.求和array.reduce((a,b) => a+b);// 输出: 362.最大值array.reduce((a,b) => a>b?a:b);// 输出: 8最小值array.reduce((a,b) => a<b?a:b);// 输出: 1
2021-08-19 10:23:13
467
原创 如何实现自定义下拉组件，select下拉框样式自定义，带搜索的select下拉框
1.实现的效果2.实现说明3.完整代码一、实现的效果：二、实现说明：1.由于无法修改原生select中的option样式，因此自己通过ul，li实现下拉列表，用input实现回显框；input实现select回显注意2个地方：1）使用 readonly=“readonly” 让input框无法实现输入 ，不获取焦点；<input type="text" readonly="readonly" class="ec-input__value" placeholder="业务类型" .
2021-08-03 12:28:37
3045
原创 事件委托时遇到的两个问题：1.有时候莫名出现其他的（样式）变化：多点击几次，父节点（样式）发生变化；2.点击时事件不生效（jquery)
问题一：点击时，相应的子节点发生改变，多点击几次，发现有事莫名的多出了其他的样式变化：1）理想的效果2）有时候的效果问题：为何会多出一个样式变化呢？debugger一下发现从打印的结果来看target指向的是父节点ul而非子节点li那么，我们可以增加target.nodeName == ‘LI’，来让target指向子节点时才执行相应的操作；问题二：点击时事件不生效如下图，当我们点击文字时发现无法实现切换效果同样打印一下target时会发现，当点击文字的时候target指向的是l
2021-08-03 10:41:47
301
原创 表单提交按钮，当未填写信息时，按钮不可点击
表单提交按钮，当未填写信息时，按钮不可点击1、基于jquery实现方案2、基于vue实现方案1、基于jquery实现方案1.html部分 <div class="form"> <div>用户名:<input name="name" data-name="name"/></div> <div>密码:<input name="paw" data-name="paw" /></div> <
2021-06-29 12:34:51
4575
1
原创 npm install时 npm ERR! zlib: unexpected end of file 错误
解决方法1.清理本地npm缓存包npm cache clean --force2.安装npm install --no-package-lock参数 --no-package-lock 将阻止 npm 创建 package-lock.json 文件，这个错误估计与这个文件的存在有关
2020-06-12 06:01:31
839
原创 vue：怎么理解vue中的diff算法
1.diff算法是虚拟DOM技术的必然产物，通过新旧虚拟DOM作对比（即diff)，将变化的地方更新再真实DOM上，另外也需要diff高效的执行对比过程，从而降低时间复杂度为O(n);2.vue 2.x中为了降低watcher粒度，每个组件只有一个Watcher与之对应，只有引入diff才能精确找到发生变化的地方；3.vue中diff执行的时刻是组件实力执行其更新函数时，它会对比上一个渲染结果oldVnode和新的渲染结果newVnode，此过程称为patch;4.diff过程整体遵循深度优先，同层比
2020-05-19 07:59:16
758
原创 vue:v-if和v-for哪个优先级更高，如果两个同时，出现应该怎么优化得到更好的性能？
1)v-for优先于v-if；在vue源码src\compiler\codegen\index.js中可以看出将AST转化为render字符串时，v-for处理在v-if前面。2)因此如上图，如果同时出现，每次渲染都会先执行循环再判断if条件，无论如何循环都不可避免，这样浪费了性能；3）同时出现时的优化方式：在外层嵌套一层v-if判断的template,然后再内部进行v-for循环。那么这时，如果不满足v-if条件就不会执行v-for循环。4)如果在循环内部进行if判断，我们可以先用comp
2020-05-17 16:07:02
3106
原创 为什么typeof Object结果为function
1.首先在控制台看看typeof Object 结果是什么？2.再打印Objct看看是不是恍然大悟了呢？没错Object是构造函数，同样的Array，String，Boolean，Date，RegExp也都是构造函数。...
2020-03-25 20:55:56
4745
原创 call() 、 apply() 、bind()方法的作用和区别！
call() 、apply()、bind(）这三个方法的作用都是：改变函数执行的上下文区别:bind()是返回的是执行上下文被改变的函数且不会立即执行，call()、applay()直接执行该函数；call()、apply()区别在于在于两者的参数：call()在第一个参数之后的 后续所有参数就是传入该函数的值。apply() 只有两个参数，第一个是对象，第二个是数组，这个数组就是该函数...
2018-12-23 22:55:51
721
原创 CSS选择符、优先级算法以及内联和important哪个优先级高？
css选择符类型：1、通用选择器：*2、类别选择器：.class3、id选择器：#id4、标签选择器：p5、后代选择器：div p6、子选择器：div > p7、群组选择器：div , p8、相邻同胞选择器：div +p9、伪类选择器：:link :visited :active :hover :focus :first-child10、伪元素选择器：:first-le...
2018-12-19 16:54:53
3429
3
原创 :first-child与:first-of-type的区别
<div> <p>div的第一个子元素</p> <h1>div的第二个子元素</h1> <span>div的第三个子元素</span> <span>div的第四个子元素</span> </div&g
2018-12-18 14:24:00
313
原创 css的引入方式，link与@import的区别
外部引用CSS两种方式link和@import引入的方式 和@import url(“css文件”);XML/HTML代码<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />XML/HTML代码<style type="text/css
2018-12-18 13:27:37
174
原创 es6详解--笔记
es6兼容 ie10+，chrome,fireFox、移动端、nodeis以上兼容es6转js 处理：babel = browser.js转换,webpack中在线转换：引入browser.js，es6主要包含：变量、函数、数组、字符串、面向对象、Promise、generator、模块化js中var 的缺点：可以重复申明，当然严格模式不支持；无法限制修改；没有块级作用域；...
2018-12-06 18:03:39
195
原创 DOM事件的理解
1、DOM事件级别（DOM标准指定的级别）DOM0:在js中写法element.onclick = function(){}，在html中onclick属性上加js语句；DOM2:element.addEventListener(‘click’,function(){},false);冒泡还是捕获由false/true来定DOM3:element.addEventListener(...
2018-12-05 23:32:11
685
原创 vue 项目打包本地访问--history模式入坑
问题重现：vue2.x 版本router去掉url中#，即history模式，打包后,http-sever启动服务访问不出页面？history模式的设置如下const router = new Router({ mode: 'history', // 去掉url中的# ... });http-sever启动服务1、http-server安装及运行2 、http-server...
2018-12-05 17:14:59
6841
1
原创 js获取容器的大小（宽高）
通过JS获取盒模型对应的宽和高，有以下几种方法：1. dom.style.width/height这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。2. dom.currentStyle.width/height这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设...
2018-12-04 22:56:13
10754
原创 谈谈对CSS盒模型的理解
1、什么是css模型？css的盒模型由里到外包括：content,padding,border,margin. 4部分；css的盒模型有两种：IE盒模型和标准盒模型。2、两种盒模型的区别在IE盒模型中，我们设置的height,width值包含：(content)+填充(padding)+边框(border) 这三个部分，而标准盒模型中height,width值只是content部分；3、...
2018-12-04 22:25:23
708
原创 移动端0.5px实现过程入的坑---有的下边框无法显示
众所周知在移动的端写1px边框，显示出来的效果看起来比较粗，那么下面介绍一种常见的0.5px 的实现方案；利用css3的缩放方式实现，其原理是：transform:scale()来达到压缩一半的目的。html部分： <ul class="cardList" v-show="selected == 1"> <li class="cardItem" v-for="...
2018-12-04 17:07:34
3301
1
原创 页面实现三栏布局的几种方式
问题：假设高度已知，请写出三栏布局，左栏、右栏宽度300px，中间宽度自适应。实现改布局的方式有下面五种：1、浮动方式 ；2、绝对定位方式；3、flex方式 ；4、表格方式–display:table及display：table-cell实现；5、网格布局方式–display:grid;接下来通过代码的方式分别介绍一下这五种实现三栏布局的方式：1、浮动布局方式 <sectio...
2018-12-04 00:01:35
614
原创 对于异步的一些理解
1、什么是单线程，和异步有什么关系单线程：同一时间，只能做一件事；js中单线程的原因：避免DOM渲染的冲突。js执行和DOM渲染是共用一个线程的：两段js不能同时执行，js执行的时候DOM渲染会暂停；单线程的解决方案–异步。在js的世界中，所有的代码都是单线程执行的，由于这个“缺陷”，导致js所有网络操作，浏览器事件都必须是异步执行。异步函数：setTimeout /ajax/seti...
2018-12-02 23:38:15
243
原创 浅谈MVVM。
浅谈MVVM。1、什么是MVVM?MVVM即 Model-View-ViewModel 的缩写，是一种基于前端开发的架构模式。MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离,把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到...
2018-12-02 18:56:30
1224
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人