qq_31392495的博客

原创 输入url到页面加载完成发生了什么谈跨域、缓存、DNS、http与https(版本，状态码，请求头)以及TCP/IP（三次握手四次挥手）

输入URL到页面加载完成发生了什么？这是一道非常经典的面试。这道题涉及的知识面很广，每一方面都能追得很深的细问，下面主要讲前端方面涵盖的知识点，想要更深的研究的小伙伴可以自行去了解。浏览器输入URL按回车检查有没有缓存，有缓存(http缓存)则返回200（form cache），否则继续DNS解析URL对应的IP根据IP建立起TCP协议（三次握手）客户端发起http请求服务端处理请求，返回响应资源浏览器接收响应资源（图片、文本、音频、视频等超文本数据）；就html而言，浏览器解析构建DOM树

原创 引入字体包

我接触的设计师都比较喜欢用苹方字体，然后每次都要引入字体包。首先一定要设计师给ttf格式的文件，然后在scss中引入@font-face{ font-family:'PingFangSC-Regular'; font-weight:normal; src:url('@/assets/font/PingFangSC-Regular.tff') } .ping{ font-family:'PingFangSC-Regular'; } 页面使用<p class="ping"&g

原创 认识AMD、CMD、CommonJs、ES6模块

原创 flexible、postcss-px2rem实现屏幕适配

1、下载cnpm install lib-flexible --savecnpm install px2rem-loader --save-dev2、把index.html的标签注释掉，flexible会自动为你生成，否则就会按照你的meta来适配3、vue.config.js引入px2rem-loader，它会帮你把项目中的px转换成适配的rem；我这里用的是scss，所以只会转换scss，引入的组件的样式和引入第三方的css没有响应，待后续更新module.exports = { cha

原创 基于cli4,在用Vue做项目时导入图片出现[object module],已解决

现象：这个错误是我在用vue-cli中使用webpack打包的时候，页面内容已经展示出来但是图片显示不出来，一看引用链接src为"[object Module]"的问题。出错原因：也是找到了大佬的博客看到的，他说这个是file-loader的版本问题，我现在的file-loader版本是^6.2.0。原来file-loader里面有一个esModule的配置，低版本默认为false，高版本默认为true解决方案：降低file-loader版本为^4.2.0新版本直接设置esModule的属性

原创 vue-cli3 图片压缩【image-webpack-loader】使用

1.下载image-webpack-loader注：最好用cnpm下载，npm下载会有问题cnpm install --save-dev image-webpack-loader2.在vue.config.js中修改相关配置module.exports = {…// 默认设置const defaultOptions = {bypassOnDebug: true}// 自定义设置const customOptions = {mozjpeg: {progressive: true,

原创 禁用系统键盘，使用自定义键盘光标删除

需求：使用自定义键盘，并且实现光标删除思路：1、需要显示光标的同时禁止弹出系统键盘：把input的readonly属性设置为false；当弹起系统键盘时添加计时器把readonly属性设置为true；（光标显示和键盘的显示不是相关联）2、控制光标定位到文本的指定位置：当点击自定义键盘赋值给input的时候，让input聚焦，使用setSelectionRange定位光标，input聚焦之后引起系统键盘弹起，使用思路1禁用系统键盘this.vinnumber.el.getInputElemen

原创 hammerjs移动端手势放大或移动图片

基于angular的项目引入hammerjs手势操作。1、首先下载npm install hammerjs2、在main.ts引入import ‘hammerjs’;3、在app.module.ts对手势进行配置； import {HammerGestureConfig, HAMMER_GESTURE_CONFIG} from '@angular/platform-browser'; export class MyHammerConfig extends HammerGestureConfig

原创 ionic4任意拖拽ng2-dragula

ionic自带的组件 on-reorder-group只能上下拖拽排序，如果想要元素任意拖拽可使用ng2-dragula；详情参考：stackoverflow–questionsdragula示例以及github地址

原创 ionic ModalController二次弹出模态框

需求：当你已经打开了一个模态窗A的时候，想在这个模态窗A的基础上再打开一个模态窗B。**原理：**要在A的上下文环境下创建B如下图直接创建是会报错的（this.modalController.create is not a functoin）要在构造方法constructor里改变presentModal方法的this指向，指向modalController；使其在同一个上下文。 constructor(public modalController: ModalController) { thi

原创 ion-backdrop-ios.entry.js:46 [Intervention] Ignored attempt to cancel a touchstart event with cancel

在ionic native&angular的项目中，凡是有背景的弹窗，下拉框等等，如点击背景的时候就会报这样子的错。其实这是在浏览器才会这样，因为，在您的（可能是移动的）网站上，有一个事件侦听器可以侦听触摸输入。当此侦听器正在执行此操作时，例如滚动页面，并且您想要取消此滚动行为，浏览器会说；没门！你不能取消我！这是警告！因此，在调用preventDefault（）之前检查事件是否可取消。要检查事件是否可取消，请通过检查来检查cancelable event属性的布尔值event.cancela.

原创 ionic3和ionic4以上不同版本的environment多环境配置

一、ionic3中多环境配置ionic3 中使用 environments讲解：ionic3中是利用@ionic/app-scripts插件来启动应用的，要是node_module里面没有这个插件的话，得手动下载安装：@ionic/app-scriptnpm install @ionic/app-scripts@latest --save-dev拦截@ionic/app-scripts/config/webpack.config.js根据环境参数设置别名@env/environment；

原创 Angular的组件间通信

组件交互官方文档一、@Input与@Output （类似于Vue中的Prop和$emit自定义事件）父组件向子组件传递信息。父组件通过模板属性传递，子组件通过@Input接收属性Child.ts:Child.html:Father.html:Father.ts用于子组件向父组件传递信息，类似于vue中的this.$emit()自定义事件；通常搭配@Output装饰器使用。子组件 child.ts 自定义open和close事件：import { Component, In

原创 深入了解angular的模块化系统NgModule

Angular应用就是模块化的，它的模块化系统NgModule相当于一个容器。NgModule通过它的元数据收集一些组件，指令，module、管道和一些其他的代码形成一个领域，并未这个领域提供一个编译上下文环境。每个 Angular 应用都至少有一个 NgModule 类，也就是根模块，它习惯上命名为 AppModule，并位于一个名叫 app.module.ts 的文件中。引导这个根模块就可以启动你的应用。大多数应用有很多特性模块，（即有多个NgModule），比如一些需求模块的组件会有自己的NgMo

原创 ionic cordova添加平台时插件报错

ionic cordova platform add android平台时报了如下图的错误：一开始以为是网络或者缓存之类的导致插件下载不成功，根据百度所得设淘宝镜像，c清npm缓存之类的都是不行。认真看了下报错信息，是要我手动添加插件，于是解决方案如下1. cnpm install cordova-plugin-streaming-media --save-dev2. ionic cordova plugin add cordova-plugin-streaming-media再重新ionic

原创 ionic+angular+cordova混合app打包android apk

刚拿到这个混合app开发时，第一步就是npm install下载依赖包，（前提已经安装了node.js）但是由于npm是国外的，app中好多依赖也是国外比较新；在没有翻墙的情况下，下载失败的话，就要转成淘宝镜像。npm install -g cnpm --registry=https://registry.npm.taobao.org然后再使用cnpm install 下载依赖。一、安装cordova、ionicionic cordova platform查看已安装平台，ionic info查看i

原创 DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="mj">click me</div></body>

原创 你不知道的Javascript中同名的函数与变量的提升和覆盖

规则是：对于同名的变量声明，Javascript采用的是忽略原则，后声明的会被忽略，变量声明和赋值操作可以写在一起，但是只有声明会被提升，提升后变量的值默认为undefined。对于同名的函数声明，Javascript采用的是覆盖原则，先声明的会被覆盖，因为函数在声明时会指定函数的内容，所以同一作用域下一系列同名函数声明的最终结果是调用时函数的内容和最后一次函数声明相同对于同名的函数声明和变量声明，采用的是忽略原则，由于在提升时函数声明会提升到变量声明之前，变量声明一定会被忽略，所以结果是函数声明有效

原创 val、let和const

一、varvar是ES5的语法，没有块级作用域；执行环境为上下文，也分全局作用域和局部（函数）作用域。var a = 10;function fun(){ console.log(a);//当前的执行环境为fun函数的局部作用域，函数外部无法访问，函数内部才可以访问；var存在变量提升，所以这里输出undefined var a = 5; //假设这里去掉var，就是相当于定义了意外的全局变量，等价于window.a = 5；这时第一个console输出语句中a的值在fun局部作用域没有找到，就会

原创 最新的 ECMAScript 标准定义了 7 种数据类型以及检测类型方式

一、6种原始数据类型基本数据类型（按值访问）Null（js中的数据在底层是以二进制存储，如果前三位为0，那么就会判定为object，而null的所有都为0）Undefined基本包装类型（当读取基本类型的某一个值时，后台会为该创建 String/Boolean/Number 类的一个实例类，在实例上调用指定的方法。如str.substring(2),然后销毁）vascript之基本包装类型（Boolean，Number，String）基础篇var s1='some text';var s2

原创 js之深入认识防抖和节流

在前端开发中遇到写频繁触发事件的事情，会引起一些性能上的问题；我们就需要用防抖节流进行处理，结合实际场景和防抖节流的原理，自行考虑要哪个。以下就是频繁触发事件的一些操作：window 的 resize、scrollmousedown、mousemovekeyup、keydowninput输入框动态搜索数据…防抖 深入了解防抖原理： 你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是

原创 js运行机制----Event Loop 事件循环机制

先出一条题，测试一下自己是否做对了，做对就说明你理解了，做错了就继续看下去吧。// 执行一个宏任务async function async1() { console.log( 'async1 start'); await async2(); // 执行完 async2() 后，遇到微任务await，（await后面的代码）放入微任务队列 console.log( 'async1 end'); } async function async2() { c

原创 前端攻防（XXS、CRSF、sql注入）

一、XXS跨站脚本攻击原理：恶意攻击者在web页面中插入一些恶意的script代码。攻击类型：丰持久性XSS攻击（反射型和DOM-base型）和持久性XSS攻击（存储型）1.1 反射型攻击步骤：攻击者将恶意XSS代码写在目标网站url的search中，将url发给受害者受害者用户打开该页面，XSS代码作为输入提交到服务端，服务端将XSS代码从url中取出拼接到html中返回给浏览器浏览器解析html的同时会执行XSS恶意代码恶意代码执行后，获取用户信息并发送到攻击者的服务器攻击者

原创 vue响应式系统（变化检测）

变化侦测分为两种类型，一种是“”推，另一种是“拉”。Angular和react的变化侦测都属于“拉”，也就是说，当状态发生变化时，它不知道哪个状态发生变化了，只知道状态有可能改变了，然后就会发送一个信号告诉框架，框架收到信号后，就会进行一个暴力对比找到哪些DOM需要重新渲染的。这也是Angular的脏检查（基于zoom.js,利用$digest函数触发）的过程，react用的是虚拟DOM。Vue的变化侦测属于“推”。当状态发生变化，Vue在一定程度上能马上知道哪些状态发生改变，具有更细粒度的更新；也因为