前端基础
关注
分享
扫一扫
API搬运工
进击的前端
展开
-
promise.all/ promise.race 简单实现
Promise.all = arr => { let aResult = []; //用于存放每次执行后返回结果 return new _Promise(function (resolve, reject) { let i = 0; next(); // 开始逐次执行数组中的函数(重要) function next() { arr[i].then(function (res) { aResult.pu.原创 2020-09-01 18:40:08 · 284 阅读 · 0 评论 -
javascript 实现一个深克隆 deepClone
// 实现一个deepClone 函数 深克隆/** * 思路 * 1.如果是基本数据类型，直接返回 * 2.如果是RegExp或者Date 类型，返回对应的类型 * 3.如果是复杂数据类型，递归 * 4.考虑循环引用的问题 */function deepClone (obj, hash = new WeakMap()) { if (obj instanceof RegExp...原创 2020-03-03 15:41:20 · 401 阅读 · 0 评论 -
javascript [] == ![] 为什么是true？
==和===区别==， 两边值类型不同的时候，要先进行类型转换，再比较===，不做类型转换，类型不同的一定不等。==类型转换过程：如果类型不同，进行类型转换判断比较的是否是 null 或者是 undefined, 如果是, 返回 true .判断两者类型是否为 string 和 number, 如果是, 将字符串转换成 number判断其中一方是否为 boolean, 如果是...原创 2020-02-25 17:35:40 · 390 阅读 · 0 评论 -
HTTP的几种请求方法和用途
GET方法发送一个请求来取得服务器上的某一资源POST方法向URL指定的资源提交数据或附加新的数据PUT方法跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有HEAD方法只请求页面的首部DELETE方法删除服务器上的某资源OPTIONS方法它用于获取当前URL所支持的方法。如果请求成功，会有一...原创 2019-12-07 10:57:10 · 579 阅读 · 0 评论 -
实现Storage，使得该对象为单例
实现Storage，使得该对象为单例，并对localStorage进行封装设置值setItem(key,value)和getItem(key)var instance = null;class Storage { static getInstance() { if (!instance) { instance = new Storage(); } ret...原创 2019-10-16 10:05:01 · 404 阅读 · 0 评论 -
LeetCode 589 N叉树的前序遍历 javascript
给定一个 N 叉树，返回其节点值的前序遍历。例如，给定一个3叉树:返回其前序遍历:[1,3,5,6,2,4]。思路：循环调用root.children下是否有子节点push到数组内/** * // Definition for a Node. * function Node(val,children) { * this.val = val; * th...原创 2019-04-26 10:17:49 · 222 阅读 · 0 评论 -
VUE Element-ui输入手机号加横线（三四四）或增加空格
一、问题描述： 项目中需要用到手机号每添加后增加空格或增加横线。三四四的逻辑。那么，在vue，element-ui 组件中，如何实现呢。二、效果图：三、实现代码： <template slot="mobile"> <el-input v-model="obj.mobile" placeholder="请输入手机号" @blur="checkRe...原创 2019-01-16 16:41:55 · 4986 阅读 · 1 评论 -
display: inline-block 和float 的区别
在我们平时工作中，经常会遇到把一些块状元素在一行排列显示，这时候我们通常会用到flaot,或许会用inline-block等等，那么他们有什么共性和区别？适用在什么场景？ 共性：①inline-block: 是把一个元素的display设置为块状内联元素，意思就是说，让一个元素的容器inline展示，并且里面的内容block展示；inline属性使元素内联展示，内联元素设置宽度无效，相...原创 2019-01-14 17:37:38 · 395 阅读 · 0 评论 -
浅谈 域名收敛
在说域名收敛之前，问大家一个问题.为什么你手机打开时，白屏时间会这么长?答: 网速慢呗~ 怪我咯这当然不能怪你，确实是网速慢，但另外一方面是，如果网速已经很慢了，而你的网页加载效率又太低~ 造成的结果就是:go die~一个网页白屏时间是由下面几部分决定的所以，网页的优化就可以从上述几个部分开始. 这里我们要提及的就是DNS 优化, 即，域名收敛.Why should we...原创 2019-01-14 16:52:20 · 458 阅读 · 0 评论 -
meta viewport原理
什么是Viewport手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewpo...原创 2019-01-14 14:27:03 · 214 阅读 · 0 评论 -
JS中的位操作符：“与，或，非，异或，左移，右移”
Javascript有算数操作符，赋值操作符，比较操作符，逻辑操作符，同时也有位操作符。引子先想一想，如下，该输出什么答案？ console.log('5 & 1 :', ( 5 & 1 )); console.log('5 | 1 :', ( 5 | 1)); console.log('~ 5:', (~5)); console.lo...转载 2018-11-28 11:48:15 · 235 阅读 · 0 评论 -
vue el-checkbox 回显失效 踩坑
回显el-checkbox checked 失效 如果后端返回的数据为int类型 ： 1或 0 checked 失效。如果后端返回数据经过object.assign() checked 失效<template slot-scope="scope" ><el-checkbox v-model="scope.row.isSms" @change="v =>...原创 2018-11-28 21:30:20 · 13303 阅读 · 5 评论 -
js取数组最大值，最小值的方式
var arr = [7,2,0,-3,5];1.apply()应用某一对象的一个方法，用另一个对象替换当前对象let max = Math.max.apply(null,arr);let min = Math.min.apply(null,arr);console.log(max, min)由于max()里面参数不能为数组，所以借助apply(funtion,args)方法调用...原创 2018-11-16 10:15:23 · 284 阅读 · 0 评论 -
CSS3 flex 布局 解析
今天整理下最近对flex的理解Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。它即可以应用于容器中，也可以应用于行内元素，2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支...原创 2018-11-12 14:55:20 · 441 阅读 · 0 评论 -
javascript 函数的节流 （throttle）
节流(throttle): 每隔一段时间后执行一次，也就是降低频率，将高频操作优化成低频操作，通常使用场景: 滚动条事件 或者 resize 事件，通常每隔 100~500 ms执行一次即可function throttle(fn, wait, immediate) { let timer = null let callNow = immediate ret...原创 2019-02-28 11:48:29 · 208 阅读 · 0 评论 -
elementUI reload 奇葩记录一贴
elementUI 只有一个input框时，业务中读取卡信息会有一个submit操作。会造成页面reload刷新form 中增加 @submit.native.prevent 防止页面刷新白屏。原创 2019-02-25 16:18:43 · 770 阅读 · 0 评论 -
map await await is a reserved word 解决方案
问题：arr.map 调用await 报错。解决方案：async 自执行解决await 单独调用async 函数报错。(async() => { item.address = await this.citys.getCityName1(item.address)})()...原创 2019-03-21 12:14:27 · 1502 阅读 · 0 评论 -
原生js深度拷贝
// 用原生JS实现对象的深度拷贝var deepCopy = function(obj) { if (typeof obj !== 'object') return; // // 根据obj的类型判断是新建一个数组还是对象 var newObj = obj instanceof Array ? [] : {}; for (var key in obj) { ...原创 2019-09-16 10:18:46 · 212 阅读 · 0 评论 -
在 vue+element ui 中只有一个输入框（el-input）的情况下，回车会提交表单。
如果刚好输入的组件包在form表单中，当一个form元素中只有一个输入框时，在该输入框中按下回车会提交该表单，导致页面刷新在 el-form 上加上 @submit.native.prevent 这个则会阻止表单回车提交。<el-form @submit.native.prevent></el-form>...原创 2019-08-27 15:17:40 · 1610 阅读 · 0 评论 -
npm 下载node_modules 报错，node_modules 中丢失本地配置的tag的包
yarncnpmnpm本地node 版本问题cnpm多yarn几次。原创 2019-05-29 22:06:32 · 1542 阅读 · 0 评论 -
vue.js 中直接调用filters中的函数
this.$root.$filters.函数（value）<span class="ml20 cGray">${this.$root.$filters.formatSex(row.patientSex)}</span>原创 2019-05-30 17:50:11 · 4165 阅读 · 2 评论 -
匹配所有特殊字符和字母
来源：业务需要，根据产品的逻辑英文名可以输入一切的特殊符号注意事项：需要注意中英文的特殊符号切换。 engName: [ { required: false, message: '请输入正确的英文名', trigger: 'blur' }, { max: 4, pattern: /^[.·`~!@#￥$%^&*()\-_=+、【】？，\\[...原创 2019-05-24 18:11:55 · 1805 阅读 · 0 评论 -
vue computed 和watch的区别
1 computed特性1.是计算值，2.应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值3.具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数2 watch特性1.是观察的动作，2.应用：监听props，$emit或本组件的值执行异步操作3.无缓存性，页面重新渲染时值不变化也会执行...原创 2019-04-24 17:26:39 · 148 阅读 · 0 评论 -
vue模块私有组件中(scoped)设置全局样式
项目开发过程中，我们经常会用到scoped来使样式文件只适用于当前模块，scoped设计的初衷就是让样式变得不可修改，可以很好的实现私有化简单介绍一下scoped三条渲染规则dom：html的dom节点会有唯一的data属性（例如下方的data-v-5558831a） <div data-v-5558831a class="header"> <div da...原创 2019-04-24 11:24:39 · 2998 阅读 · 0 评论 -
css 设置滚动条。
项目中有用到记录一下。CSS滚动条选择器节你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:::-webkit-scrollbar— 整个滚动条. ::-webkit-scrollbar-button— 滚动条上的按钮 (上下箭头). ::-webkit-scrollbar-thumb— 滚动条上的滚动滑块. ::-webkit-sc...原创 2019-03-13 11:04:16 · 2052 阅读 · 0 评论 -
前端项目结构整理
my-project├── .idea # 这个是编辑器生成的├── build # Webpack 配置文件放在这里├── config # Vue 基本配置文件放在这里├── node_modules # 第三方依赖├── src ...原创 2018-11-06 17:36:29 · 2365 阅读 · 1 评论 -
浏览器环境嗅探 javascript
浏览器环境检测var inBrowser = typeof window !== 'undefined';var UA = inBrowser && window.navigator.userAgent.toLowerCase();var isIE = UA && /msie|trident/.test(UA);var isIE9 = UA &&...原创 2018-09-14 16:41:19 · 700 阅读 · 0 评论 -
javascript 深冻结函数
Object.freeze()冻结对象// 深冻结函数.function deepFreeze(obj) { // 取回定义在obj上的属性名 var propNames = Object.getOwnPropertyNames(obj); // 在冻结自身之前冻结属性 propNames.forEach(function(name) { var prop ...原创 2018-09-14 16:14:27 · 521 阅读 · 0 评论 -
CSS 弹性盒子布局
CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。CSS3 弹性盒子(Fle...原创 2018-03-28 17:38:27 · 736 阅读 · 0 评论 -
JS：防抖动与节流
针对一些会频繁触发的事件如scroll、resize，如果正常绑定事件处理函数的话，有可能在很短的时间内多次连续触发事件，十分影响性能。因此针对这类事件要进行防抖动或者节流处理函数节流是指一定时间内js方法只跑一次。比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释。函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上...原创 2018-04-10 17:06:37 · 362 阅读 · 0 评论 -
设置span宽度的解决方案
在html中如何设定span的宽度？这看上去是个很简单的问题，似乎用style中的width属性就可以了。but 缺省情况下span的宽度设定无效 在html中如何设定span的宽度？这看上去是个很简单的问题，似乎用style中的width属性就可以。例如，<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...原创 2018-03-23 17:11:07 · 2075 阅读 · 0 评论 -
Vue table 动态表格td可编辑 详解
项目中需求用到可编辑表格 下图这种 ↓element UI 组件table表格中 增加template 模版翻入input根据业务逻辑增加全局变量 isEdit 是否变化。<el-table-column label="名称" width="140"> <template scope="scope">...原创 2018-03-23 15:11:13 · 23493 阅读 · 17 评论 -
gif的故事：解剖表情动画的构成
前言在现在表情包横行的年代，相信大家对表情动图已经不陌生了，这些动图通常就是我们使用的gif图（比如下图）。所谓动图就是会动的图片，而其会动的原理跟动画、影视剧一样，通过连续播放图片让我们从视觉感官上认为图片会动。那么gif图片又是如何将动图中的每一帧存储下来的呢，这下就需要我们动起刀子，解剖一下gif图。简介gif图本身无需过多介绍，相信这个星球上的人类基本上没有没接触过的吧。但是从专业的角度上...原创 2018-03-13 14:17:43 · 1673 阅读 · 0 评论 -
CSS word-break 详解
初始值normal适用元素all elements是否是继承属性yes适用媒体visual计算值as specifiedAnimation typediscrete正规顺序the unique non-ambiguous order defined by the formal grammar语法word-break: normal word-break: break-all word-brea...原创 2018-03-22 14:10:49 · 1638 阅读 · 0 评论 -
sublime3 Vue 格式化插件
1、先安装HTML/CSS/JS Prettify 插件： (1) ctrl+shift+p (2) 点击Install Package，然后搜索HTML-CSS-JS Prettify，按确定，等待安装结束。2、安装HTML/CSS/JS Prettify后 ： tools->HTML/CSS/JS Prettify->set prettify preference 在”allowe...原创 2018-03-15 18:27:58 · 686 阅读 · 0 评论 -
使用 base64 解决跨域上传
js文件：(function () { window.onload = function(){ var input = document.getElementById("demo_input"); var result= document.getElementById("result"); var img_area = document.ge...原创 2018-03-08 13:44:27 · 762 阅读 · 0 评论 -
Http状态码整理
101服务器已经理解了客户端的请求，并将通过Upgrade 消息头通知客户端采用不同的协议来完成这个请求。在发送完这个响应最后的空行后，服务器将会切换到在Upgrade 消息头中定义的那些协议。 只有在切换新的协议更有好处的时候才应该采取类似措施。例如，切换到新的HTTP 版本比旧版本更有优势，或者切换到一个实时且同步的协议以传送利用此类特性的资源。102由WebDAV（RFC 2518）扩展...原创 2018-03-07 11:23:32 · 210 阅读 · 0 评论 -
重绘和回流repaint/reflow
Reflow(回流)对于DOM结构中的各个元素都有自己的盒模型，浏览器根据各种样式（浏览器的、开发人员定义的等）来计算，并根据计算结果将元素放到它该出现的位置，这个过程称reflow。reflow会影响到dom的结构渲染，同时会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。Repaint原创 2017-12-13 10:38:24 · 173 阅读 · 0 评论 -
js timerv vue 计时器，时间转换 小时：分钟：秒
应用场景为：vue 单文件内环境。项目中有打电话呼入接听后计算呼入时长的需求设置一个callinTime 展示。start (bolean) { let _this = this let hour, minute, second hour = minute = second = 0 if (bolean === true) { ...原创 2018-04-18 13:50:23 · 4942 阅读 · 1 评论 -
JavaScript 拓扑排序 算法
拓扑排序会对有向图的所有顶点进行排序，使有向边从前面的顶点指向后面的顶点。拓扑排序算法与深度优先搜索类似。不同的是，拓扑排序算法不会立即输出已访问的顶点，而是访问当前顶点邻接表中的所有相邻顶点，直到这个列表穷尽时，才将当前顶点压入栈中。拓扑排序算法被拆分为两个函数。第一个函数 topSort()，会设置排序进程并调用一个辅助函数 topSortHelper()，然后显示排序好的顶点列表。主要工作是...原创 2018-04-24 18:27:24 · 1258 阅读 · 0 评论