guolinengineer的博客

原创 vue组件中启用定时器setInterval和清除

原创 js es6中includes 和 原生的indexOf 的区别

在ES5，Array已经提供了indexOf用来查找某个元素的位置，如果不存在就返回-1，但是这个函数在判断数组是否包含某个元素时有两个小不足，第一个是它会返回-1和元素的位置来表示是否包含，在定位方面是没问题，就是不够语义化。另一个问题是不能判断是否有NaN的元素 ES6提供了Array.includes()函数判断是否包含某一元素，除了不能定位外，解决了indexOf的上述的两个问题。...

原创 三次握手四次挥手

名词解释：SYN (synchronous) 建立联机ACK (acknowledgement) 确认PSH (push) 传送FIN (finish结束)RST (reset) 重置URG (urgent) 紧急Sequence number (顺序号码)Acknowledge number 确认号码establish 建立TCP 解释：TCP(Tra...

原创 行内元素和块级元素

行内元素：不会占据新的一行只能行内元素，不能包含块级元素行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素：会占据新的一行块级元素中可以包含块级元素和行内元素块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。...

转载 一个hover小过渡效果

元素标签上添加过渡的标准 : .course-item{    position: relative;    top:0;    transition:box-shadow,top  0.5s;}hover 后要改变的内容.course-item:hover{    box-shadow:0 2px 15px -2px #8b8b8b;    top: -5px;}这个和使...

原创 今日头条async/await面试题执行顺序

async function async1 () { console.log('async1 start') await async2(); console.log('async1 end')}async function async2 () { console.log('async2')}console.log('script start')setTimeout...

原创 top和margin-top的区别

top、margin-top的区别：1、top、bottom、left、right是绝对定位，必须设置position为absolute。 margin一系列设置是相对定位。注意：如果用top等，而position未设置为absolute，那设置是不起作用的。2、top这些在绝对定位的前提下，这个绝对定位，是相对body  或者  position：relative的父级元素的绝对定位。mar...

原创 观察者模式和发布订阅模式

差异在观察者模式中，观察者需要直接订阅目标事件。在目标发出内容改变的事件后，直接接收事件并作出响应。发布订阅模式相比观察者模式多了个事件通道，订阅者和发布者不是直接关联的。比如你去外面吃饭，就经常出现两种模式1.观察者模式:你进入餐馆，坐在餐馆里等待叫号，当叫号时，你就知道又有人可以吃饭了，你会下意识的看看自己的号。这个过程就是观察者模式。餐馆是观察的对象，餐馆的座位是观察者队列，叫号...

原创 css3中不需要回流和重绘的属性

众所周知，页面的回流和重绘会造成额外的计算消耗，降低用户体验，而css3自带的硬件加速则根本不需要回流和重绘css3不需要回流和重绘的属性：transform opacity filter Will-changetransform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜opacity属性设置元素的不透明级别。如 opacity: 0...

转载 最小化重绘和重排

const e1 = document.getElementById('test');e1.style.padding = '5px';e1.style.borderLeft = '1px';e1.style.borderRight = '2px';上面例子中，三个样式被修改（几何结构改变），每一个都会引起回流。当然，大部分浏览器都做了优化，只会触发一次重排。但是如果旧版浏览器浏览或者...

原创 浏览器渲染过程

1. 解析html，生成DOM树，解析css，生成CSSOM树2.将DOM树和CSSDOM树结合，生成渲染树（Render Tree）3.Layout (回流)：根据生成的渲染树，进行回流（Layout），得到节点的几何信息（位置，大小）4.Painting(重绘)：根据渲染树的以及回流得到的几何信息，得到节点的绝对像素5.Display：将像素发送给gpu，展示在页面上，（这一步...

原创 css3 新特性（一）：多类选择器，带标签类名选择器，群组选择器

多类选择器：假如有<li class=" important item ">, <li class=" import ">, <li class=" item ">三个标签样式为：.item .important { background: red }  只能选择到第一个<li>带标签类名选择器：在html文档中，div可

原创 node环境使用es6的配置过程

首先，node环境是不支持es6环境的，别像我一样傻傻的看着报错不知道怎么回事0x1 BabelBabel 是目前最流行的转码工具，代码编译器，我们使用它来实现我们的功能。0x2 准备工作首先需要在你的项目中安装相关的包，执行下面的命令$ npm install --save-dev babel-cli babel-preset-env # babel-cli 和 es6+ ...

原创 window与node作用域的理解及this的指向

我们知道，在浏览器环境下，window对象是全局对象，this的主人指向函数或表达式执行时使用他们的对象，可以是对象，可以是全局作用域，可以是局部作用域，具体要看到底是谁在调用他们，而变量的寻找像洋葱一样，一层一层向外寻找，我们先看一段代码熟悉一下：//这是在浏览器环境下，chrome下var n =2 ;var obj={n:4,fn1:(function(){console....

原创 全面理解JS(函数)执行顺序

第一步： 检查语法错误  浏览器或者node环境将所有JS检查一遍，检查是否有语法错误，注意并不会执行，这里是确保可执行，然后进行第二步：预编译第二步：预编译预备知识：变量提升  首先要理解函数声明整体提升，变量 声明提升。这里要注意变量的提升，一般我们声明一个变量都是var a = 1;console.log(a) //1//但实际上拆分成了两步,真正执行是这样的...

原创 箭头函数的{}和()是不同的

users.map( user => { user.isVIP ? {...user, balance: user.balance + 10} : user } )users.map( user => ( user.isVIP ? {...user, balance: user.balance + 10} : user ) )上面两者是不同的，一个是运算，一个是直接返回...

原创 背景图片的切合

如果背景图片分辨率太高，可以用background-size进行转换和贴合

原创 vue中几个组件类的关联与绑定

<div class={['a', is_true ? 'b' : '']}></div>类似上面的表达式，我就可以在组件的前面定义一个方法，由它来决定 is_true 的值，从而控制几个互相有关联的组件的类，b类中可以添加新的样式，也可以覆该以前的样式属性（只要b的定义在a的后面），而不去用getElementById() 或者 refs这种方式去改变组件的类属性，...

转载 在JS中消灭for循环

一，用好 filter，map，和其它 ES6 新增的高阶遍历函数问题一：将数组中的 false值去除const arrContainsEmptyVal = [3, 4, 5, 2, 3, undefined, null, 0, ""];答案：const compact = arr => arr.filter(Boolean); 问题二： 将数组中的 VIP 用户...

原创 moment 时间戳js库的使用

官网：http://momentjs.cn/_onFormOpen(isEdit, editdata, querydata) { return new Promise((resolve) => { const { contract_time: contractTime, end_time: endTime } = editdata // 表中的contract_...

原创 开发环境，测试环境与生产环境的区别

三个环境指项目开发的三个阶段：开发->测试->上线其中生产环境也就是通常说的真实环境。开发环境：项目尚且在编码阶段，我们的代码一般在开发环境中 不会在生产环境中，生产环境组成：操作系统 ，web服务器 ，语言环境。  php 。 数据库 。 等等测试环境：项目完成测试，修改bug阶段生产环境：项目数据前端后台已经跑通，部署在阿里云上之后，有客户使用，访问，就是网站正式运...

原创 vue 有get前缀的函数

export default class DIDAnchor extends Vue { classPrefix = classPrefix get anchorClassifyList () { let list = [...this.$store.state.anchorClassifyList] list.unshift({ label: '全部',...

原创 项目开发中的一些问题（一）

1.接收res之后的容错处理// 数据容错.then((res) => {// result是嵌套解构，所以要用两次解构赋值// 如果用{ result: { list, totalCount } = result }, result就只会是一个标签，没有赋值// result为防止它是null，可以先默认赋值为一个空对象{}// 一般totalcount是数字，el-ui...

原创 JSX下的元素可见性

vue 组件的 JSX 写法使得 v-if 不可用 ，这时候可以利用其他办法来解决1.函数返回renderitem () { if (// ...判断条件){ return <element>...</element> } else { return false }}// ...rennder () { <eleme...

原创 element-ui应该注意的format格式

element-ui的日期选择组件默认格式是一个时间戳，但往往我们的项目需要的时间格式是一个字符串，这时候就需要用到格式转化，element-ui组件提供了一个方便的转换命令：使用format指定输入框的格式；使用value-format指定绑定值的格式。默认情况下，组件接受并返回Date对象。以下为可用的格式化字串。<el-date-picker value={ formE...

原创 props中默认返回的值

props: {itemTotal: {type: Number,default: 0},searchParmas: {type: Object,default: () => ({})}} -------------------------------------------注意到：default: () => ({}), 原因是可以各自...

原创 { props.onClick() }与{ props.onClick } 的差异

这里我们把 onClick={() => props.onClick()} 直接修改为 onClick={props.onClick} , 注意不能写成 onClick={props.onClick()} 否则 props.onClick 方法会在 Square 组件渲染时被直接触发而不是等到 Board 组件渲染完成时通过点击触发，又因为此时 Board 组件正在渲染中（即 Board 组...

原创 package.json中private选项的作用

如果你"private": true在package.json中设置，那么npm将拒绝发布它。这是一种防止意外发布私有存储库的方法。如果您希望确保仅将某个包发布到特定注册表（例如，内部注册表），请使用publishConfig下面描述的 字典registry在发布时覆盖config参数。...

原创 react 组件中this的问题

class Toggle extends  React.Component {  constructor (props) { super(props); this.state = { isToggleOn: true } this.handleClick = this.handleClick.bind(this) } handleClick() { ...

原创 js中的偏函数

使用bind()我们设定函数的预定义参数，然后调用的时候传入其他参数即可：function list() {  return Array.prototype.slice.call(arguments);}var list1 = list(1, 2, 3); // [1, 2, 3]// 预定义参数37var leadingThirtysevenList = list.bind(u...

原创 vue使用less关于scope问题

scoped可以实现style只作用于当前的.vue文件<template> <div class="user"></div></template><script></script><style lang='less' scoped>.user { color:#33

原创 oninput与onchange

oninput和onchange都是js的原生方法区别是 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素另外oninput 也可以写成on-input...

原创 node绝对路径是_dirname而不是__dirname

在写webpack配置文件时报错了，才发现是__dirname而不是_dirname,之前早就发现这个问题了，只是忘了记录下来