07 2018 档案
摘要：我们在项目中使用环境变量时，经常会使用到 .env 文件，那么关于 .env 文件中的内容是如何设置的？ VUE_APP_URL 是在 .env.* 文件中定义的，在项目启动时，vue-cli 会将以 VUE_APP_ 开头的变量读取至环境变量，这是 vue-cli 强制要求的“你想用我的工具，就得
阅读全文
摘要：方法一：正则实现 function format (num) { var reg=/\d{1,3}(?=(\d{3})+$)/g; return (num + '').replace(reg, '$&,'); } 解释： 1、正则表达式 \d{1,3}(?=(\d{3})+$) 表示前面有1~3个数
阅读全文
摘要：一、回调函数 这是异步编程最基本的方法。 假定有两个函数f1和f2，后者等待前者的执行结果。 采用这种方式，我们把同步操作变成了异步操作，f1不会堵塞程序运行，相当于先执行程序的主要逻辑，将耗时的操作推迟执行。 利用定时器的工作原理将f1放入事件队列中去执行，哪怕延时是0，也是如此，因此不堵塞程序运
阅读全文
摘要：很多人不是特别明白并发编程和并行编程的区别所在，有很多人很容易搞混淆，觉得二者近似相等，本文将用几个浅显易懂的例子，来说明一下什么是并发和并行。 1、任务与多任务 关于什么是进程，什么是线程，这里不打算多说，关于每一种开发语言的多线程处理技术语法上有所区别，原理很多类似，可以查阅相关的参考书。什么是
阅读全文
摘要：1、$(document).ready 点评： 需要引用jquery ；兼容所有浏览器。 2、标签的async=”async”属性 async的定义和用法(是HTML5的属性) async 属性规定一旦脚本可用，则会异步执行。 点评：HTML5中新增的属性，Chrome、FF、IE9&IE9+均支持
阅读全文
摘要：一、bind()函数的两个特性： 1、bind和curring，函数科里化 可以利用此种特性方便代码重用，如下，可以不同的页面中只需要配置某几项，前面几项固定的配置可以选择用bind函数先绑定好，讲一个复杂的函数拆分成简单的子函数。 2、bind和new 函数中的return除非返回的是个对象，否则
阅读全文
摘要：装饰者模式提供比继承更有弹性的替代方案。 装饰者用于包装同接口的对象，不仅允许你向方法添加行为，而且还可以将方法设置成原始对象调用（例如装饰者的构造函数）。 装饰者用于通过重载方法的形式添加新功能，该模式可以在被装饰者前面或者后面加上自己的行为以达到特定的目的。 那么装饰者模式有什么好处呢？前面说了
阅读全文
摘要：职责链模式（Chain of responsibility）是使多个对象都有机会处理请求，从而避免请求的发送者和接受者之间的耦合关系。将这个对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理他为止。 也就是说，请求以后，从第一个对象开始，链中收到请求的对象要么亲自处理它，要么转发给链中的下一
阅读全文
摘要：一、location的匹配规则 = 表示精确匹配。只有请求的url路径与后面的字符串完全相等时，才会命中。 ^~ 表示如果该符号后面的字符是最佳匹配，采用该规则，不再进行后续的查找。 ~ 表示该规则是使用正则定义的，区分大小写。 ~* 表示该规则是使用正则定义的，不区分大小写。 注意的是，nginx
阅读全文
摘要：前端缓存，这是一个老生常谈的话题，也常被作为前端面试的一个知识点。今天我们再来总结一下。 分类：前端缓存分为强缓存和协商缓存两种。 一、强缓存 强缓存主要使用 Expires、Cache-Control 两个头字段，两者同时存在 Cache-Control 优先级更高。当命中强缓存的时候，客户端不会
阅读全文
摘要：迭代器模式(Iterator)：提供一种方法顺序一个聚合对象中各个元素，而又不暴露该对象内部表示。 迭代器的几个特点是： 1、访问一个聚合对象的内容而无需暴露它的内部表示。 2、为遍历不同的集合结构提供一个统一的接口，从而支持同样的算法在不同的集合结构上进行操作。 3、遍历的同时更改迭代器所在的集合
阅读全文
摘要：事件派发dispatchEvent dispatchEvent 向指定目标事件派发一个事件；一般的事件触发是用户进行某些操作时才会触发，而使用dispatchEvent可以在代码中手动触发事件。 定义事件的目的就是为了执行某一方法，手动触发事件的目的也是执行该事件下的方法。 window.onloa
阅读全文
摘要：CDN全称Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接
阅读全文
摘要：当浏览器请求一个URL的时候，通过firebug我们可以发现大概有以下几个过程：阻挡、域名解析、建立连接、发送请求、等待响应、接收数据。后面四个跟用户的网络情况和你的服务器处理速度有关，本文重点说说前两个。 1、阻挡：解决方案——提高浏览器并发连接数 阻挡：不同的浏览器对单个域名的最大并发连接数有一
阅读全文
摘要：一、网络加载类 1、减少 HTTP 资源请求次数 合并静态资源图片、JavaScript 或 CSS 代码，减少页面请求数和资源请求消耗 避免重复的资源，防止增加多余请求 2、减小 HTTP 请求大小 减少没必要的图片、JavaScript、CSS 及 HTML 代码 对文件进行压缩优化 使用 gz
阅读全文
摘要：在大型网站中，我们发现页面资源经常使用不同的域名进行引用，例如126邮箱的部分js、css、图片存放于http://mimg.127.net/域名下，京东的部分静态图片存放在http://img11.360buyimg.com域名下，那这样做究竟有什么好处呢，和性能又有什么关系呢，下面进行具体分析。
阅读全文
摘要：一、使用Nigix做映射 - 配置不同域名对应不同端口 我们都知道如果在域名管理的控制面板设置域名对应ip只能设置到ip，不能详细设置到端口。如果一台服务器部署了多个web应用，使用的不同端口启动的，那么就可以Nginx做映射。 比如我有一个域名 www.525.life；域名还可以分出2级域名:
阅读全文
摘要：我们知道，对于每一个http请求，无论是动态的网页aspx，还是jsp，还是/user/add这种MVC模式的URL，还是CSS或者JS文件，每一个http请求都会带着在硬盘上存有的跟这个域相关存有的cookie信息。越来越多的cookie导致请求头越来越大。那么应该如何去优化呢？ cookie存储
阅读全文
摘要：一、背景 前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是
阅读全文
摘要：命令模式(Command)的定义是：用于将一个请求封装成一个对象，从而使你可用不同的请求对客户进行参数化；对请求排队或者记录请求日志，以及执行可撤销的操作。也就是说命令模式旨在将函数的调用、请求和操作封装成一个单一的对象，然后对这个对象进行一系列的处理。 此外，可以通过调用实现具体函数的对象来解耦命
阅读全文
摘要：策略模式定义了算法家族，分别封装起来，让他们之间可以互相替换，此模式让算法的变化不会影响到使用算法的客户。 在理解策略模式之前，我们先来看一个例子，一般情况下，如果我们要做数据合法性验证，很多时候都是按照swith语句来判断，但是这就带来几个问题，首先如果增加需求的话，我们还要再次修改这段代码以增加
阅读全文
摘要：外观模式（Facade）为子系统中的一组接口提供了一个一致的界面，此模块定义了一个高层接口，这个接口值得这一子系统更加容易使用。 外观模式不仅简化类中的接口，而且对接口与调用者也进行了解耦。外观模式经常被认为开发者必备，它可以将一些复杂操作封装起来，并创建一个简单的接口用于调用。 外观模式经常被用于
阅读全文
摘要：与建造者模式类似，工厂模式创建对象（视为工厂里的产品）时无需指定创建对象的具体类。 工厂模式定义一个用于创建对象的接口，这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。 这个模式十分有用，尤其是创建对象的流程赋值的时候，比
阅读全文
摘要：当我们的内容超出了我们的div，往往会出现滚动条，影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。 这里介绍一个简单的方法：大体思路是在div外面再套一个div。这个div设置overflow:h
阅读全文
摘要：在软件系统中，有时候面临着“一个复杂对象”的创建工作，其通常由各个部分的子对象用一定的算法构成；由于需求的变化，这个复杂对象的各个部分经常面临着剧烈的变化，但是将它们组合在一起的算法确相对稳定。 如何应对这种变化？如何提供一种“封装机制”来隔离出“复杂对象的各个部分”的变化，从而保持系统中的“稳定构
阅读全文
摘要：一、viewport 表示SVG可见区域的大小，或者可以想象成舞台大小，画布大小。 上面的SVG代码定义了一个视区，宽500单位，高300单位。 注意这里的措辞是“单位”，不是“像素”。虽然说，width/height如果是纯数字，使用的就是“像素”作为单位的。也就是说，上面SVG的视区大小就是50
阅读全文
摘要：下载安装echarts包：npm install echarts -D 一、全局引入 main.js中配置 缺点：如果是完整的引入Echarts，会额外的引入其他无用的配置文件，造成应用文件体积过大，资源加载耗时过长，影响用户体验 二、按需引入 如果是在许多页面中都有用到，就写在main.js中 在
阅读全文
摘要：ES6中Promise可以说很大情况下改善了异步回调的嵌套问题，那么如果我们自己去写一个类似Promise的库应该怎么去写？ 我们先看一下Promise的特点： 第一：Promise构造函数接受一个函数作为参数，函数里面有两个参数resolve和reject分别作为执行成功或者执行失败的函数 var
阅读全文
摘要：在JavaScript里，构造函数通常是认为用来实现实例的，JavaScript没有类的概念，但是有特殊的构造函数。通过new关键字来调用定义的构造函数，你可以告诉JavaScript你要创建一个新对象并且新对象的成员声明都是构造函数里定义的。 在构造函数内部，this关键字引用的是新创建的对象。基
阅读全文
摘要：在传统开发工程师眼里，单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。 在JavaScript里，单例作为一个命名空间提供者，从全局命名空间里提供一个唯一的访问点来访问该对象。 在JavaScript里
阅读全文
摘要：一、js中new一个对象的过程 首先了解new做了什么，使用new关键字调用函数（new ClassA(…)）的具体步骤： 1、创建一个新对象： var obj = {}; 2、设置新对象的constructor属性为构造函数的名称，设置新对象的__proto__属性指向构造函数的prototype
阅读全文
摘要：1、svg image标签降级技术： svg不能很好的在anroid2.3中得到支持，需要额外的补充，IE8-以及Android 2.3默认浏览器是不支持SVG的。 svg image标签降级技术，这是一个名叫Alexey Ten首先提出来的，类似下面的代码： 即所有浏览器，包括IE，会把image
阅读全文
摘要：通常用window.location该属性获取页面 URL 地址： 1、什么是window.location？ 比如URL：http://b.a.com:88/index.php?name=kang&when=2011#first window.location和document.location互
阅读全文
摘要：这个题目不约而同的出现在了多家公司的面试题中，当然也是因为太过于典型，解决方案无非就是拆字符或者用正则匹配来解决，我个人强烈建议用正则匹配，因为url允许用户随意输入，如果用拆字符的方式，有任何一处没有考虑到容错，就会导致整个js都报错。而正则就没有这个问题，他只匹配出正确的配对，非法的全部过滤掉，
阅读全文
摘要：浏览器渲染流程： 1、浏览器开始解析目标HTML文件，执行流的顺序为自上而下。 2、HTML解析器将HTML结构转换为基础的DOM(文档对象模型)，构建DOM树完成后，触发DomContendLoaded事件。 3、CSS解析器将CSS解析为CSSOM(层叠样式表对象模型)，一棵仅含有样式信息的树。
阅读全文
摘要：网页中引用的外部文件： JavaScritp、CSS 等常常会阻塞浏览器渲染页面。假设在 <head> 中引用的某个 JavaScript 文件由于各种不给力需要2秒来加载，那么浏览器渲染页面的过程就会被阻塞2秒，直到该JS文件下载并执行完后才继续。 前端性能调优时必须排除任何潜在的渲染阻塞点，让浏
阅读全文
摘要：1、绝对定位元素溢出父元素，怎么隐藏问题？ 通常，为了让DIV子元素超出部分隐藏，都是在父元素设置overflow:hidden，这样即可防止子元素撑开父元素，使子元素能够溢出隐藏！ 但是，对于position:absolute定位的子元素，仅仅使用overflow:hidden没办法将其溢出部分隐
阅读全文
摘要：嵌套路由就是在一个被路由过来的页面下可以继续使用路由，嵌套也就是路由中的路由的意思。 比如在vue中，我们如果不使用嵌套路由，那么只有一个<router-view>，但是如果使用，那么在一个组件中就还有<router-view>，这也就构成了嵌套。 1、为什么要使用嵌套路由？ 就比如在一个页面中，
阅读全文
摘要：一、读取核心配置文件 核心配置文件是指在resources根目录下的application.properties或application.yml配置文件，读取这两个配置文件的方法有两种，都比较简单。 核心配置文件application.properties内容如下： 1、使用@Value方式（常用）
阅读全文
摘要：一、从提交节点图解分析 首先通过简单的提交节点图解感受一下rebase在干什么？如下两个分支master和feature，其中feature是在提交点B处从master上拉出的分支，master上有一个新提交M，feature上有两个新提交C和D 此时切换到feature分支上，执行如下命令，相当于
阅读全文
摘要：<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 <keep-alive> 与 <transition>相似，只是一个抽象组件，它不会在DOM树中渲染(真实或者虚
阅读全文
摘要：在vue.js组件教程的一开始提及到了is特性 意思就是有些元素，比如 ul 里面只能直接包含 li元素，像这样： <ul> <li></li> </ul> //而不能： <ul> <your-component> </ul> 这样就不能复用your-component这个组件了，如果要达到我们的目
阅读全文
摘要：1、路由全局守卫 在做项目的时候，遇到需要做路由跳转，但当用户输入错误url地址，或是其它非法url路由地址，我们或许会想到跳转至404页面。不管你有没有写一个404页面，当出现未匹配路由都需重新指定页面跳转。可能大家首先想到会是路由重定向，redirect来解决这个问题。但实际上通过redirec
阅读全文
