2019年03月_wangliang_001

原创 vue-router设置mode为history页面报Cannot Get

场景在开发环境中，觉得通过hash方式访问链接有点奇怪，就想使用history模式，于是在router/index.js设置：import Vue from 'vue'import VueRouter from 'vue-router'import routes from './routes'Vue.use(VueRouter)const router = new VueRouter...

2019-03-29 20:40:17 3032 2

原创闭包的理解及应用

1.什么是闭包在各种专业文献中定义闭包的概念，都非常抽象难懂，通过我自己的理解是:闭包是定义在函数内部的函数，内部函数可以访问外部函数的变量。2.闭包的特点1.缓存结果，闭包中的变量不会主动释放，会一直存储在内存中。2.形成独立的作用域3.闭包的缺点1.由于闭包会使行函数中的变量都保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄...

2019-03-25 17:08:31 243

原创 Ajax工作原理及实现步骤

Ajax简介Ajax（Asyncchronous JavaScript and Xml），翻译过来就是说：异步的javaScript和xml， Ajax不是新的编程语言，而是一种使用现有标准的新方法。Ajax的优点：在不重新加载整个页面的情况下，可以与服务器交换数据，并更新部分网页的艺术。1. Ajax的工作原理Ajax的工作原理相当于在用户和服务器之间加了一个中间层(Ajax引擎)，...

2019-03-25 16:26:09 5306

原创浏览器中输入url后发生了什么

在学习前端的过程中经常看到这样一个问题：当你在浏览器中输入url后会发生什么？下面是个人学习过程中的总结，供个人复习使用，如有理解不正确或者不足的地方希望大家指出。先上一张脑图： 1.DNS域名解析在浏览器DNS缓存中搜索在操作系统DNS缓存中搜索读取系统hosts文件，查找其中是否有对应的ip向本地配置的首选DNS服务器发起域名解析请求2. 建立TCP连接为了准确地传输数据，...

2019-03-24 09:02:30 186

对于浏览器缓存，相信很多开发者对它真的是又爱又恨。一方面极大地提升了用户体验，而另一方面有时会因为读取了缓存而展示了错误的东西，而在开发过程中千方百计地想把缓存禁掉。那么浏览器缓存究竟是个什么样的神奇玩意呢？什么是浏览器缓存简单来说，浏览器缓存就是把一个已经请求过的Web资源(如html, 图片, js, 数据等)拷贝一份副本在浏览器中，缓存会根据进来的请求保存输出内容的副本。当下一个请求来...

2019-03-23 21:39:34 302

原创清空数组有几种方法

1. 通过将数据的长度置为0var arr = [1, 2, 3]arr.length = 02.通过splice方法var arr = [1, 2, 3]while(arr.length){ arr.splice(0, 1)}3. 直接将数组置为空数组var arr = [1, 2, 3]arr = []...

2019-03-23 17:13:14 7524

转载使用Access-Control-Allow-Origin解决跨域

什么是跨域当两个域具有相同的协议（如http/https）,相同的端口（如80），相同的host(www.baidu.com),那么我们就可以认为它们是相同的域（协议，域名，端口都必须相同）。跨域是指协议，域名，端口不一致，出于安全考虑，跨域的资源之间是无法交互的。解决方案解决方案是很多的，如前端通过jsonp, window.name , location.hash, window.d...

2019-03-23 17:05:37 1920

转载前端性能优化-资源预加载

预加载预加载是浏览器对将来可能被使用资源的一种暗示，一些资源可以在当前页面使用到，一些可能在将来的某些页面中被使用。作为开发人员，我们比浏览器更加了解我们的应用，所以我们可以对我们核心资源使用该技术。当提到前端性能优化时，我们首先会联想到文件的合并，压缩，文件缓存和开启服务端的gzip压缩等，这使得页面加载更快，用户可以尽快使用我们的Web应用来达到他们的目标。资源预加载是另一个性能优...

2019-03-23 16:48:21 388

原创浏览器内核控制meta name="renderer" 说明文档

浏览器内核控制meta 说明文档目前国内很多浏览器都是双核浏览器（极速模式，兼容模式），如果想告知网址用哪个内核渲染，可以通过meta标签来控制。代码示例：在head标签中添加一行代码：<html> <head> <meta name="renderer" content="webkit"> </head> <b...

2019-03-23 09:58:42 275

原创 webpack插件之extract-text-webpack-plugin

作用extract-text-webpack-plugin插件主要是为了抽离css样式，防止将样式打包在js中引起页面样式加载错乱的现象。安装npm i extract-text-webpack-plugin -D使用在webpack.config.js中进行配置1.引入extract-text-webpack-pluginconst ExtractTextPlugin = req...

2019-03-19 15:10:59 1279

原创 webpack插件之HtmlWebpackPlugin

功能htm-webpack-plugin插件的作用：1）为html文件引入外部资源如script, link动态添加每次compile的Hash,防止引用缓存的外部文件问题。2）可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口。安装npm i html-webpack-plugin -D配置在w...

2019-03-19 10:46:50 1061

原创 webpack插件总结之DefinePlugin，ProvidePlugin

DefinePlugin通过DefinePlugin可以定义一些全局的变量，我们可以在模块当中直接使用这些变量。无需作任何声明，看一个简单的webpack配置：const webpack = require('webpack')const path = require('path')module.exports = { entry: { main: './src/main.js'...

2019-03-18 16:44:40 2563

原创 babel 升级到7.X采坑总结

场景babel升级到7后，安装babel相关插件后，项目跑不起来，一直报错：Error: Cannot find module '@babel/core'babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should...

2019-03-17 13:39:04 2268

原创 vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin

场景webpack版本：4.29.6vue-loader版本： 15.7.0在使用webpack手动构建Vue项目时，突然报出这个错误：vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.分析Vue-load...

2019-03-16 08:01:37 251

qq_29055201的博客