2018年07月_xj-L

转载取消Promise

转载自为Promise插上可取消的翅膀const makeCancelable = (promise) => { let hasCanceled_ = false; const wrappedPromise = new Promise((resolve, reject) => { promise.then((val) => hasCancele...

2018-07-31 17:20:23 1273

原创 Flex布局（CSS弹性盒子）

CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。 ----摘自MDN 使用CSS弹性盒子.box{ display: flex;}...

2018-07-31 16:10:12 823 1

原创 js手动实现简易懒加载----LazyLoad

前言在网页加载中，对于一些存在很多Image的网页，一次加载所有图片，会造成性能浪费，图片优化的方法有很多，例如base64、雪碧图等，图片懒加载也是比较常见的一种性能优化的方法原理给页面中img标签设定自定义属性data-original,用来存放真正的img源URL，给所有img的src属性设定为一张静态图片或者不设置监听窗口滚动scroll事件，遍历图片计算图片是否出现在浏览...

2018-07-28 19:04:49 1032

原创常见的排序算法

冒泡排序冒泡排序算法的原理如下：比较相邻的元素。如果第一个比第二个大，就交换他们两个。对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。针对所有的元素重复以上的步骤，除了最后一个。持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。 ----摘自百度百科 functi...

2018-07-27 17:35:18 154

原创尾递归与递归

什么是递归递归是什么就不多说了，下面举个例子function f(n) { if (n === 1) { return 1 } return n * f(n - 1)}f(3) // 6递归非常耗费内存，因为递归调用栈中需要同时保存成千上百个调用记录，很容易发生"栈溢出"错误。什么是尾递归如果一个函数中所有递归形式的调用都出现在函数的末尾，我们称这个...

2018-07-26 18:06:56 493

原创记秋招第一次挂经-金山云

为什么需要vuex 多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力来自不同组件的行为需要变更同一状态。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。一个斐波拉契序列使用递归迭代，有什么问题（尾递归）需要传输几兆的数据，怎样减少文件大小 ElementUI中的双向绑定水平垂直居中 ES6...

2018-07-26 14:55:33 273

原创 React生命周期

在上一篇博客文章中写到了Vue生命周期，现在介绍React生命周期，一样，先放一张图，图片来自React组件生命周期下面所有生命周期介绍就写在代码里吧import React, { Component } from 'react'class App extends Component { constructor(props, context) { /** *...

2018-07-25 20:47:12 363

转载 React PureComponent 使用指南

本篇博客转载自React PureComponent 使用指南，侵删。为什么使用？React15.3中新加了一个 PureComponent 类，顾名思义， pure 是纯的意思， PureComponent 也就是纯组件，取代其前身 PureRenderMixin , PureComponent 是优化 React 应用程序最重要的方法之一，易于实施，只要把继承类从 Component ...

2018-07-25 17:45:56 3059 3

原创 Vue生命周期

先放一张官方文档图：钩子函数从图中可以看到Vue生命周期中的几个钩子函数Vue2.0生命周期钩子函数描述 beforeCreate 组件实例刚被创建，$data、$el等都为undefined created 组件实例创建完成，$data数据已经绑定，但$el尚未声明，为undefined beforeMount 组件挂载之前，$el属性已经生...

2018-07-25 11:50:27 197

原创 MessageChannel API

MessageChannel接口允许我们创建一个新的消息通道，并通过它的两个MessagePort 属性发送数据，返回的两个属性为只读属性MessageChannel API在Web Worker中同样可以使用使用：let channel = new MessageChannel();channel.port1; //只读channel.port2; //只读返回两...

2018-07-24 20:54:45 1882

原创 HTML5-History路由

现今框架（Vue、React等）内置路由（Router）默认一般为Hash路由，包括我自己搭建的博客路由也使用Hash路由今天主要记录H5的新增API--History，可以实现不刷新操作页面，通过其中API操作浏览器历史记录history.pushState(state, title, url);/* state通常作为页面数据状态值* title即页面标题，一般都为null* ...

2018-07-24 11:42:20 3004

原创怪异模式与标准模式

什么是怪异模式与标准模式：浏览器一般都有两种解析渲染模式：标准模式和怪异模式。在标准模式下，浏览器按照HTML与CSS标准对文档进行解析和渲染；而在怪异模式下，浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。而浏览器解析渲染时采取什么模式是由什么决定呢？答案是DOCTYPE声明DOCTYPE声明：告知浏览器如何解析和渲染文档 DTD：文档类型定义//H5中DOCTYPE...

2018-07-24 11:11:43 734

根据题意，如果我们一次性渲染刷新几万条数据，页面会卡顿，因此只能分批渲染，既然知道原理我们就可以使用setInterval和setTimeout、requestAnimationFrame来实现定时分批渲染，实现每16 ms 刷新一次requestAnimationFrame跟setTimeout/setInterval差不多，通过递归调用同一方法来不断更新画面以达到动起来的效果，但它优于se...

2018-07-22 17:50:55 10798

原创前端性能优化

HTML语义化HTML：可以使代码简洁清晰，支持不同设备，便于团队开发，对搜索引擎和用户更加友好；减少DOM节点：加速页面渲染；给图片加上正确的宽高值：减少页面重绘，同时防止图片缩放；避免src属性和link的href属性为空：当值为空时浏览器很可能会把当前页面当成其属性值加载；正确的闭合标签；CSS合并css文件使用link 合写css（通过少些css属性来达...

2018-07-22 15:13:56 237

原创 CSS预编译---SASS

声明变量（$name:10px;）计算功能（font-size:10px-2px;）嵌套#idName { .className { color: red; }}注释（标准的CSS注释 /* comment */ ，会保留到编译后的文件。单行注释 // comment，只保留在SASS源文件中，编译后被省略。在/*后面加一个感叹号，表示这是...

2018-07-22 15:08:15 311

原创 javascript中stopImmediatePropagation函数和stopPropagation函数的区别

1、stopImmediatePropagation方法：　　stopImmediatePropagation方法作用在当前节点以及事件链上的所有后续节点上，目的是在执行完当前事件处理程序之后，停止当前节点以及所有后续节点的事件处理程序的运行2、stopPropagation方法　　stopPropagation方法作用在后续节点上，目的在执行完绑定到当前元素上的所有事件处理程序之后，...

2018-07-20 17:37:24 822

原创面试题：js拍平多维数组

在面试中我们常常会被问到如何用原生js实现拍平多维数组let array = [1, [2], [3, [4, [5]]]]function flat(arr) { //在此处实现代码}console.log(flat(array)) //[1, 2, 3, 4, 5]原始方法：let array = [1, [2], [3, [4, [5]]]]function ...

2018-07-20 11:25:38 3978

原创理解js中instanceof运算操作符

什么是instanceof在js代码中，我们经常使用 instanceof 就是判断一个实例是否属于某种类型，instanceof 可以在继承关系中用来判断一个实例是否属于它的父类型简单实例：function Foo(){}function Bar(){}Bar.prototype = new Foo()let obj = new Bar()obj instanceof Ba...

2018-07-19 15:14:52 16002 3

原创 js手动实现new方法

new新生成了一个对象新对象隐式原型链接到函数原型调用函数绑定this 返回新对象核心代码：function _new(fun) { return function() { let obj = { __proto__: fun.prototype } fun.apply(obj, arguments) return obj ...

2018-07-19 11:01:31 5055

原创前端JS面试题

题目：实现函数计算 Cal(2).加(1).减(2).乘(3).除(3)，Cal函数只是一个传参函数分析：在此题中每次函数调用结束会调用下一个函数，即函数返回值是一个对象，这是我们可以考虑使用原型链和thisfunction Cal(num) { let obj = { num } Object.defineProperties(obj.__proto__, ...

2018-07-18 18:24:10 324

原创圣杯布局、双飞翼布局、flex布局

在面试中，我们经常会遇到CSS中两端宽度固定大小，中间自适应问题问题：编写CSS，实现三栏水平布局，其中left、right分别位于左右两侧，left宽度为100px，right宽度为200px，main处在中间，宽度自适应解决方法：圣杯布局页面DOM结构如图：设置外层div内边距，使中间div宽度为100%，将所有节点设置浮动方向为left，利用margin-l...

2018-07-18 11:08:08 270

你的博客