liurong1028的博客

原创 angular中配置sass的方法

方法一：1. 利用cnpm工具安装sass依赖和loadercnpm install node-sass --save-devcnpm install sass-loader --save-dev2. 修改.angular-cli.json文件"styles": [ "styles.scss" ],"defaults":{ "styleExt": "scss", "comp...

原创 四种常见的内存泄漏

1. 意外的全局变量：未定义的变量会在全局对象创建一个新变量，如下：function foo(arg) { bar = "this is a hidden global variable";}函数foo内部忘记使用var，实际上js会把bar挂载到全局对象上，意外创建一个全局变量function foo(arg) { window.bar = "this is...

原创 vue的常见理论知识

1. active-class是哪个组件的属性？嵌套路由怎么定义？active-class是vue-router模块的router-link组件。需要在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。2. 怎么定义vue-router的动态路由？怎么获取传过来的动态参数？一个参数对path属性加上/:参数名获取: $route.para...

原创 js数组方法大全

javascript的两种创建方式：（一）：使用Array构造函数：var arr1 = new Array(); // 创建一个空数组var arr2 = new Array(8); // 创建一个包含20项的数组var arr3 = new Array('aa', 'bb', 'cc'); // 创建一个包含3个字符串的数组（二）：使用字面量的表示法：var arr4...

原创 React中constructor(props){}究竟是什么

1. super是什么super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。constructor() { super(); this.state = {sear...

原创 vue纯手写导出excel功能

1.  新建js文件：blob-url.js/** * blob to download **/export function download(target, downloadName) { let url = ''; if (target instanceof Blob) { url = blobToURL(target); } else if (typeof ...

原创 vue点击按钮复制链接地址

1. 安装插件：cnpm install vue-clipboard2 --save2. 在main.js里面引入：import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)3. 在主页面使用：<section class="form"> <span class=...

原创 vue在线生成二维码

1. 安装插件：cnpm install qrcode2 --save2. 在主页面引入并且使用：<script>import QRCode from 'qrcode2'export default { data () { return { url: '' } }, methods: { getQrcode () {...

原创 vue纯手写PC端分页

公共组件：page.vue<template> <aside class="pager" v-if="len>1"> <div class="pager_box"> <span :class="{disabled:now<=1}" @click="getData(n

原创 React的函数定义/类定义组件

方法一： function Welcome(props) { return <h1>Hello, {props.name}</h1>;}方法二： class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}<...

转载 http 304发生了啥？怎么解决？

       如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。　　该响应必须包含以下的头信息：　　Date，除非这个服务器没有时钟。假如没有时钟的服务器也遵守这些规则，那么代理服务器以及客户端可以自行将 Date 字段添加到接收到的响...

原创 vue优化打包速度与大小

原创 移动端使用rem编写适配

在app.vue里面添加代码：mounted() { const devWidth = document.documentElement.clientWidth const size = ((devWidth > 640 ? 640 : devWidth) / 7.5) + 'px' document.documentElement.style.fontSize...

原创 canvas编写一个圆环展示多种数据

<div class="count-wrap"> <canvas id="time-graph-canvas" width="160" height="160"></canvas> </div>.count-wrap { width: 3rem;

原创 移动端input输入的时候固定的底部被键盘顶上去解决方法

<div v-for="(item, index) in formList" class="formList" :key="index"> <input v-model="dataValue[item.alias]" :placeholder="item.placeholder" :type="ite

原创 css纯手写横向进度条和圆形进度条

1. 在style.scss里面封装样式// 进度条(横向或圆形) // *$type:1=>'横向';2=>'圆形',noColor=>'初始颜色', yesColor=>'过去的颜色'*@mixin progress($type:2, $height: 5, $noColor: #ffb386, $yesColor: #ccc, $width:70, $to...

原创 js获取比当前时间多几天或少几天的日期？计算结束时间与开始时间相差几天

1. 获取比当前时间多几天或少几天的日期a. 封装函数（startDate：当前时间，num： 多几天或少几天天数， add： ‘+’或者‘—’）dateAdd (startDate, num, add) { startDate = new Date(startDate) if (add === '+') { startDate = +startDat...

原创 vue移动端纯手写上拉加载更多

1. 新建vue文件：scrollMore.vue<template> <div class="scroll_list" :style="{'transform': 'translate3d(0, ' + translateVal + 'px, 0)'}" @touchstart="touchStart" @touchmove="touchMove" @touchend...

原创 vue导入excel表并且展示excel数据，并且解决了change事件只会触发一次，多次失效的问题

1. 安装： cnpm install xlsx --save2.  新建js文件：import Vue from 'vue'import XLSX from 'xlsx' /** * 导入ex表格 得到json数据 * 已注入所有Vue实例， * template模板里调用 $importf * 组件方法里调用 this.$importf * 例：<input t...

原创 常见的状态码

一些常见的状态码为：200 – 服务器成功返回网页 404 – 请求的网页不存在 503 – 服务器超时 1xx（临时响应） 表示临时响应并需要请求者继续执行操作的状态码。 100（继续） 请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。 101（切换协议） 请求者已要求服务器切换协议，服务器已确认并准备切换。 ...

原创 DNS域名可以对应多个ip地址的作用

IP和DNS服务器没有必然联系。IP是个协议，实际用到的是IP地址，是一些数字组成的。DNS服务器是域名服务器，简单点说就是在互联网或广域网中，把英文网址转换成数字地址，进行解析。IP和DNS服务器。以下是具体定义：IP是Internet Protocol的外语缩写，中文缩写为“网协”.网络之间互连的协议也就是为计算机网络相互连接进行通信而设计的协议。在因特网中，它是能使连接到网上的所有计算...

转载 负载均衡之DNS域名解析

本文则讲解另一种实现服务器集群的负载均衡方案——DNS域名解析DNS（Domain Name System）是因特网的一项服务，它作为域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网。人们在通过浏览器访问网站时只需要记住网站的域名即可，而不需要记住那些不太容易理解的IP地址。在DNS系统中有一个比较重要的的资源类型叫做主机记录也称为A记录，A记录是用于名称解析的重要记录，它...

转载 负载均衡之HTTP重定向

由于目前现有网络的各个核心部分随着业务量的提高，访问量和数据流量的快速增长，其处理能力和计算强度也相应地增大，使得单一的服务器设备根本无法承担。在此情况下，如果扔掉现有设备去做大量的硬件升级，这样将造成现有资源的浪费，而且如果再面临下一次业务量的提升时，这又将导致再一次硬件升级的高额成本投入，甚至性能再卓越的设备也不能满足当前业务量增长的需求。 针对此情况而衍生出来的一种廉价有效透明的方法以扩展现...

原创 Git

1: 什么是 Git 复刻(fork)?复刻(fork)、分支(branch)和克隆(clone)之间有什么区别?- 复刻(fork)是对存储仓库(repository)进行的远程的、服务器端的拷贝，从源头上就有所区别。复刻实际上不是 Git 的范畴。它更像是个政治/社会概念。- 克隆(clone)不是复刻，克隆是个对某个远程仓库的本地拷贝。克隆时，实际上是拷贝整个源存储仓库，包括...

原创 端口号常用的有哪些

在网络技术中，端口（Port）包括逻辑端口和物理端口两种类型。物理端口指的是物理存在的端口，如ADSL Modem、集线器、交换机、路由器上用 于连接其他网络设备的接口，常见的物理端口有RJ-45端口、SC端口等等。逻辑端口是指逻辑意义上用于区分服务的端口，如TCP/IP协议中的服务端口，端口号的范围从0到65535端口不能重复。 常用端口号如下：  端口：80 服务：HTTP 说明...

原创 url输入到浏览器经历了啥

总体来说分为以下几个过程:DNS解析 TCP连接 发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 连接结束 具体过程：DNS解析DNS解析的过程就是寻找哪台机器上有你需要资源的过程。当你在浏览器中输入一个地址时，例如www.baidu.com，其实不是百度网站真正意义上的地址。互联网上每一台计算机的唯一标识是它的IP地址，但是IP地址并不...

原创 this的指向及作用，function的封装

this的应用及指向问题this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是调用函数的那个对象。this的使用情况：1、作为普通函数调用，这是函数的最通常用法，属于全局性调用，因此this就代表全局对象。2、作为对象方法的调用，函数还可以作...

原创 正则及表单验证

正则的概念正则表达式(regular expression)是一个描述字符规则的对象。ECMAScript 的RegExp 类（构造函数）表示正则表达式，而String 和 RegExp 都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。 正则表达式主要用来验证客户端的输入数据。 用户填写完表单单击提交按钮之后， 表单就会被发送到服务器，在服务器端通常会用 PHP、ASP.NET...

原创 Cookie

通信协议通信协议是指双方实体完成通信或服务所必须遵循的规则和约定。在计算机通信中，通信协议用于实现计算机与网络连接之间的标准，网络如果没有统一的通信    协议，电脑之间的信息传递就无法识别。 通信协议是指通信各方事前约定的通信规则，可以简     单地理解为各计算机之间进行相互会话所使用的共同语言。两台计算机在进行通信时，必须使       用的通信协议。TCP/IPTransmis...

原创 vue的项目结构搭建和内部指令

1. 项目结构搭建(1) cnpm install --global vue-cli(2) vue init webpack my-project(3) cd my-project(4) cnpm install (5) cnpm run dev2. sass的安装：cnpm install node-sass --savecnpm install sass-loader --save3. 内部指...

原创 event事件

  event概念及作用在触发DOM上某个事件时，会产生一个事件对象event,这个对象包含着所有事件相   关的信息，包含导致事件的元素，事件的类型以及其他的与特定事件相关的信息。它是事件绑定中的一个隐藏的参数，可以通过arguments[0]来获取也可以叫事件源对象，这里面包含了关于这次事件的相关信息  获取方式（兼容问题）在W3C标准中，直接在函数中声明该参数即可 ...

原创 面相对象编程

  ECMAScript有两种开发模式：面向过程--函数式(过程化). 面向对象(OOP)。面向对象的语言有一个标志，那就是类（构造函数）的概念，而通过类可以创建任意多个具有相同属性和方法的实例对象。但是，ECMAScript没有类的概念，因此它的对象也与基于类的语言中的对象有所不同。（基于面向对象）  面向对象的特点（了解）抽象：就是忽略一个主题中与当前目标无关的那些方面，以便更充分地注意与当前...

原创 js基本语法

  javascript基本介绍及发展趋势JavaScript是一种轻量级、解释型的Web开发语言。所谓轻量级，就是语言的体系结构不是很庞杂，例如，没有C、Java等语言中的类、内存管理、系统管理等高深的知识范畴；所谓解释型，就是语言在浏览器或服务器等环境中直接被解释执行，不需要对源代码进行编译操作。JavaScript具有面向对象的能力，更确切的讲它是函数式的脚本语言，如果你随意查看JavaSc...

原创 闭包和继承

  变量作用域（全局作用域、局部作用域）Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量，在函数外部自然无法读取       函数内的局部变量。  什么是闭包（闭包的原理）闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函   数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以，在本质    上，闭包就是将...

原创 php

PHP概述 PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”） 是一种免费开源的服务器端脚本程序。利于学习，使用广泛，主要适用于Web开发领域。可以运行在 UNIX、  LINUX、WINDOWS下。作为一个后台语言，标准的变量、数据类型、运算、选择结构、循环结构、函数、数组；跟大多数的编程语言是一样的。唯一的差别，基本都在一些语法上。  服务器安...

原创 ajax

  ajax的概念和优势AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。通过在后端与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页面。可以把一部分以前...

原创 浏览器的同源策略

  浏览器的同源策略同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自...

原创 jQuery入门

  API概述API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的 是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，       或理解内部工作机制的细节。  jQuery概述是一个javascript代码仓库，我们称之为javascript框架。是一个快速的简洁的javascript框架，可以简...

原创 逻辑分支

  程序的三大结构顺序结构顺序结构表示程序中的各操作是按照它们出现的先后顺序执行的。选择结构选择结构表示程序的处理步骤出现了分支，它需要根据某一特定的条件选择其中的一个分支执行。选择结构有单选择、双选择和多选择三种形式。循环结构循环结构表示程序反复执行某个或某些操作，直到某条件为假（或为真）时才可终止循环。在循环结构中最主要的是：什么情况下执行循环？哪些操作需要循环执行？  语句ECMA-262 ...

原创 Sass & Gulp

  Sass介绍CSS 不是一个编程语言，可以用它来开发网页样式，但是没有办法用它进行编程。SASS 的出现，让 CSS 实现了通过代码编程来实现的方式。SASS 是一种 CSS 开发工具，提供了许多便利的写法，让CSS 的处理实现了可编程处理。SASS 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性，可以生成风格良好的 CSS 样式表文件，易于组织和维护。  环境搭建及编译指令安...