红烧金鱼草-CSDN博客

原创 ES6-iterable迭代器

【 for...of 】const m = new Map()m.set('foo','123');m.set('bar','345');for(const [key,value] of m) { // 使用es6解构 console.log(key,'=',value) // foo=123;bar=345}const obj = {foo:123,bar:456}; // for of 不能遍历普通对象，必须是有迭代器的数据类型for(const item of obj )

2021-03-27 22:54:56 296

原创 Promise源码解析

/** * 手写promise 1.promise 就是一个类在执行这个类的时候，需要传递一个执行器进去，执行器会立即执行 2.promise 中有三种状态分别为成功fulfilled 失败rejected 等待pendeng pending -> fulfilled pending -> rejected 一旦状态确定就不可更改 3.resolve和reject函数是用来更改状态的 resolve: fulfilled reject: .

2021-03-18 17:19:23 3912 1

原创了解字符编码

一、什么是字符编码，字符编码的来历？1、字符集——集合字符是各种文字和符号的总称，包括各个国家文字、标点符号、图形符号、数字等。字符集是多个字符的集合，字符集种类较多，每个字符集包含的字符个数不同，常见字符集有：ASCII字符集、ISO 8859字符集、GB2312字符集、BIG5字符集、GB18030字符集、Unicode字符集等。总结：使用哪些字符，也就是说哪些汉字、字母、符号和数字等会被收入标准中。所包含“字符”的集合就叫做“字符集”。2、字符编码——规则字符编码就是以二...

2021-03-18 12:58:53 687

原创 JS异步编程及进化史

一、什么是异步编程？首先我们需要了解JS是单线程语言。为了避免出现线程同步的问题。一个人执行一个任务，如果有多个任务，那任务需要排队，然后一个一个去执行。单线程的优势是更安全更简单，但是缺点也很明显，如果中间某个任务特别耗时，那么就会出现阻塞。所以为了解决这种问题，JS有两种执行任务的模式：同步模式（Synchronous）和异步模式（Asynchronous）。同步模式：代码依次执行，后一个任务必须等待前一个任务结束才可以执行。console.log('global begin')

2021-03-17 19:16:33 293 3

原创面试必问题——项目中遇到过的问题及解决方案

问题一：chromeiframe跨域设置不了cookie。原因：因为chrome升级80之后，sameSite默认为Lax.解决：设置sameSite为None，Secure(secure必须设置不然无效)问题二：safari跨域不能设置cookie原因：未知解决：方法一：先打开页面，设置上有cookie，这时候再跨域设置就可以。方法二：window.open(url)。定时关闭，通过这种方式加载去设置cookie问题三：弹框点击确定，冒泡到下一层解决：设置弹框的层级index.

2020-09-17 17:02:19 4464

原创 vue-cli3 webpack打包优化，提升网站性能

最近为了提升网站性能，考虑了一下打包优化。加载包越小，服务器响应越快。webpack这个打包神器，研究得还不够透彻。于是学习一下。打包优化，一般从以下几个方面考虑：一、代码压缩1.去掉.map文件.map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了.map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。操作：module.exports = { // ... productionSou...

2020-06-18 18:04:31 1169

原创 vue项目如何做seo优化？

一、ssrvue-cli+nuxt.js ssr的原理就是服务器端渲染，然后返回。用nuxt的话，最好是项目刚开始就使用，不然就要重构代码，费时费劲，成本很高，对服务器的压力还是比较大。但是优点是首屏加载速度会比较快。二、预渲染：prerender-spa-plugin插件只针对部分页面。如果是详情页，希望seo收录每个详情页的信息，则不太适用。或者项目过大的情况，配置过多，打包会很漫长。参考1：https://www.jianshu.com/p/56949dab75e5参考2：htt.

2020-06-18 17:25:58 3585

原创 vue-cli3 webpack配置多环境打包，解决浏览器缓存

问题1：当时遇到本地，测试服，线上不同的配置，然后一直改代码。就很坑。于是想到多环境打包。问题2：每次上线后，都有以前的缓存，导致页面不能更新，都需要通知使用者强刷。但是这种方法使用感太差了。【webpack打包文件加上版本号和时间戳】：const webpack = require('webpack');const path = require('path');const Timestamp = new Date().getTime();module.exports = { p

2020-06-16 22:13:20 677

原创点击弹框外任意元素隐藏弹框

1.使用监听方法。点击元素不是弹出框则隐藏<template> <div v-if="showAlert" class="alert" style="position: fixed;top: 100px;width: 200px;height: 200px;background: #ccc;">测试弹框 </div>&l...

2019-12-05 11:54:00 829

原创正则验证手机号、护照等

consttelephoneExc=/^[1][3-9]\d{9}$|^([6|9])\d{7}$|^[0][9]\d{8}$|^[6]([8|6])\d{5}$/;//大陆+港澳台const telephoneExc = /^1(3|4|5|6|7|8|9)\d{9}$/;//护照验证var PassportNumberReg = /^1[45][0-9]{7}$|(^[P...

2019-10-09 10:55:15 978

原创微信内嵌浏览器不能上传图片的问题

问题：测试的时候发现微信内嵌浏览器不能上传图片，能选择图片但是没有上传。使用的是vue+el-upload上传在网上搜了一下是安卓微信遗留的问题。解决方法：将input标签<input type=“file" name="image" accept="image/gif, image/jpeg, image/png”>写成<input type="...

2019-09-03 14:12:54 3984

原创正则验证身份证和url网址

// 身份证正则验证：// 最后一位通过计算得到// 且对长度进行验证。必须是18位合法的身份证。const idExc =/^[1-9][0-7]\d{4}(((19|20)\d{2}(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((19|20)\d{2}(0[13578]|1[02])31)|((19|20)\d{2}02(0[1-9]|1\d|2[...

2019-07-12 17:05:21 495

原创 vue项目国际化 vue-i18n以及踩坑解决小姐姐手把手教你VUE国际化~

1.安装配置- 安装 $ npm install vue-i18n或者：<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>impor...

2019-06-05 15:59:31 21814 32

转载 vue Bus 学习

有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。转载链接：http://www.cnblogs.com/fanlinqiang/p/7756566.html...

2019-05-23 17:05:34 126

原创 vue使用element-ui的上传，input输入框，单选多选按钮等组件

1.引入element-ui --- 复选框+上传+输入框// element-uiimport {Checkbox, Input, Upload, CheckboxGroup } from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.component( 'checkbox', Checkbox );...

2019-05-13 17:58:09 8761

原创 vue阻止向上和向下冒泡

1.阻止向下冒泡<div class="content" @click.self="cancelFunc"></div>2.阻止向上冒泡<div class="item" @click.stop="function">

2019-05-13 17:41:25 12712 4

原创正则匹配标签、空格、换行符、特殊符号

if(content){ //正则匹配标签、空格、换行符、特殊符号等。ps:如果是纯图片匹配值为空，内容显示“查看详情” content= content.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi,'').replace(/<[^>]+?>/g,'').re...

2019-05-13 17:05:00 2986

原创页面出现两个滚动条如何隐藏其中一个，并依然可以滚动

问题描述：我在页面上有一个弹框，想要弹框滚动，背景页面不动。解决方法：.alert-box{ position: fixed; overflow-y: scroll; width: 100%; height: 100%; top: 0; left: 0; &::-webkit-scrollbar{ display: none; }}...

2019-04-23 21:55:05 8438

原创 2019前端面试问题集合

【记录一下2019年面试遇到过的问题】1.如何让两个div相对垂直居中。(flex)2.行内元素和块级元素3.css三列布局--两边固定中间自适应和中间固定两边自适应4.translate和translate3D（3D可以开启GPU加速）5.动画相关知识6.doctype的作用，html4,html5声明有什么差别7.js的基础数据类型和引用数据类型8.js判断数据...

2019-02-25 23:32:27 2000

原创 canvas基础学习笔记

1.什么是canvas 1.1 canvas 相关概念1、HTML5 标签，表示画布，作为图像绘制的容器 canvas 元素本身是没有绘图能力的，所有的绘制工作必须在脚本如JavaScript 内部完成2、画布是一个矩形区域，您可以控制其每一像素。3、canvas DOM对象，像所有的dom对象一样Canvas 对象有自己本身的属性、方法和事件。canvas dom...

2019-02-20 23:49:04 466

原创有关mime-type的简单介绍

1.【什么是mimetype？】2.【有什么用？】3.【怎么用？】4.【使用场景项目中？】5..【常用的mimetype？】 ----------------------------------------------------------------------------------------------------------------------------...

2019-02-20 23:45:59 4170

原创 Ajax优缺点以及基本用法

Ajax:什么是ajax? Ajax有什么用？优劣点基本语法（用法）AJAX的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。使用XHTML+CSS来标准化呈现；使用XML和XSLT进行数据交换及相关操作；使用XMLHttpRequest对象与Web服务器进行异步数据通信；使用Javascript操作Documen...

2019-02-18 21:25:48 315

原创关于favicon.ico

问题：经常在控制台遇到这样的报错 "Failed to load resource: the server responded with a status of 404 (Not Found) favicon.ico"解决：在head中引入<link rel="icon" href="/favicon.ico" />什么是favicon.ico？：打开一个网页，显示在浏览器...

2019-02-18 11:42:45 1287

原创 JS设计模式

1、各模式概念与实现方式举例（针对js而言）1.1单例模式概念：单例是一个实例，不能再拿去生成实例。单例只被执行一次，最终就是一个{}。示例：a是一个单例,创建它的方式如： var a={} var a=new Object(); var a=function(){return {}}(); var a=(function(){return {}...

2019-02-17 14:38:12 485

原创 JavaScript——vue切换路由滚动条恢复到顶部

问题描述：vue是单页面应用。导致路由切换之后，之前的滚动距离会一直存在。然后会影响下一个页面的页面样式。问题解决：router.afterEach((to,from,next) => { window.scrollTo(0,0);});...

2018-08-09 18:00:58 3212 2

原创 JavaScript——正则表达式

一、正则表达式概念正则表达式是由普通字符（例如字符 a 到 z）以及特殊字符（称为"元字符"）组成的文字模式。正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。正则表达式是一种数学概念，一种语法规则。不同语言引擎上实现与支持有所差异。但差异不算特别大。...

2018-08-07 19:58:37 261

原创 javaScript——浅谈MVVM模式

1、MVVM与MVC的区别是什么？在MVC里，View是可以直接访问Model的！从而，View里会包含Model信息，不可避免的还要包括一些业务逻辑。 MVC模型关注的是Model的不变，所以，在MVC模型里，Model不依赖于View，但是 View是依赖于Model的。不仅如此，因为有一些业务逻辑在View里实现了，导致要更改View也是比较困难的，至少那些业务逻辑是无法...

2018-07-23 17:40:52 2284

原创 javaScript——浅谈跨域的概念和几种跨域的方法

1. 跨域的概念即什么情况下会发生跨域一个网站的网址组成包括协议名，子域名，主域名，端口号。比如 https://github.com/ ，其中https是协议名，www是子域名，github是主域名，端口号是80，当在在页面中从一个url请求数据时，如果这个url的协议名、子域名、主域名、端口号任意一个有一个不同，就会产生跨域问题。2. 跨域存在的形态2.1 Ajax不同域之间是...

2018-07-20 17:20:17 368

原创 JavaScript——浏览器的重绘与回流

一、浏览器渲染过程？ 1. 浏览器把获取到的html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象。dom树里面包含了所有的html tag，包括display:none隐藏，还有用JS动态添加的元素等。 2. 浏览器把所有样式(主要包括css和浏览器的样式设置)解析成样式结构体，在解析...

2018-07-20 15:55:04 23591 5

Lotus的博客