JS
关注
分享
扫一扫
xj-L
哈哈哈哈哈哈
展开
-
封装 generator 为 async 函数
generator 和 iterator对于 generator 生成的迭代器，调用函数，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，总是需要手动调用 next 函数去获取下一个迭代器状态function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending';...原创 2019-01-17 14:41:58 · 644 阅读 · 0 评论 -
严格模式
本篇文章转载自我的个人博客严格模式主要限制： 1、变量必须声明后再使用 2、函数的参数不能有同名，否则报错 3、不能使用with语句 4、不能对只读属性赋值 5、不能使用前缀0表示八进制 6、不能删除不可删除的属性 7、不能删除变量delete prop，会报错，只能删除属性delete global[prop] ...原创 2018-08-02 13:14:09 · 297 阅读 · 0 评论 -
ES6--修饰器
本篇文章转载自我的个人博客修饰器是一个函数，用来修改类的行为@testableclass MyTestable{ constructor() { super(); }}function testable(target) { target.isTestable = true;}MyTestable.isTestable; //true...原创 2018-08-02 13:12:32 · 822 阅读 · 0 评论 -
ES6--Class的继承（下）
本篇文章转载自我的个人博客类的prototype和__proto__1、Class同时具有prototype和__proto__2、子类的__proto__属性表示构造函数的继承，总是指向父类3、子类的prototype属性的__proto__属性表示方法的继承，总是指向父类的prototype属性4、作为对象子类B的原型（__proto__）是父类A,作为构造函数，子类B的原...原创 2018-08-02 11:59:00 · 198 阅读 · 0 评论 -
ES6--Async函数的实现
本篇文章转载自我的个人博客async function fn(){ //...}//等同于function fn(args){ return spawn(function* (){ //... });}所有async函数都可以写成第二种形式，其中spawn函数是自动执行器spawn函数实现：function spawn(genF){ return new P...原创 2018-08-02 11:55:12 · 345 阅读 · 0 评论 -
ES6--Async
本篇文章转载自我的个人博客async对Generator函数的改进： Generator执行必须靠执行器（类似co模块）,async函数自带执行器 返回值为Promise对象，则async函数可以看成封装多个异步操作的Promise对象 async表示异步操作，await表示紧跟在后面的表达式需要等待结果 co模块约定，yield命令后面只能...原创 2018-08-02 11:52:38 · 420 阅读 · 0 评论 -
ES6--Class的继承（上）
本篇文章转载自我的个人博客extendsES6中通过extends关键字实现继承class ColorPoint extends Point { constructor(x, y, color) { super(x, y); //调用父类的constructor(x,y) this.color = color; } toString() { return this....原创 2018-08-02 11:51:09 · 522 阅读 · 0 评论 -
ES6--Proxy
本篇文章转载自我的个人博客ProxyProxy可以理解为在对象前架设一个拦截层（过滤与改写）定义：var proxy = new Proxy(target,handler);自带方法：get(target,propKey,receiver);set(target,propKey,value,receiver);has(target,propKey);deleteP...原创 2018-08-02 11:48:23 · 212 阅读 · 0 评论 -
常见正则表达式
本篇文章转载自我的个人博客字符串trim函数其中str为测试字符串，re为正则表达式var str = ' www.liulei.@qq .coml@qq.com ';var re = /((^s*)|(s*$))/g;console.log(str.replace(re,''));日期检测var str = '2014-04-01'; var re = ...原创 2018-08-02 11:45:39 · 324 阅读 · 0 评论 -
ES6--Module
本篇文章转载自我的个人博客exportexport命令可以输出变量、类、函数export输出变量就是本来的名字，但可以通过as关键字重命名export命令规定对外接口，必须与模块内部变量一一建立连接对应关系//报错export 1;//报错var m = 1;export m;//报错function f() {}export f;//正确export v...原创 2018-08-02 13:17:12 · 231 阅读 · 0 评论 -
JavaScript加载
本篇文章转载自我的个人博客传统js加载方式<script src="path/to/myModule.js"></script><script src="path/to/myModule.js" defer></script><script src="path/to/myModule.js" async&原创 2018-08-02 13:19:13 · 360 阅读 · 0 评论 -
Canvas 绘制背景小球、与鼠标交互的小球
canvas入门，跟随掘金小册如何使用 Canvas 制作出炫酷的网页背景特效学习，完成一个简单的 canvas demo下面是代码，操作解释都有注释：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie原创 2018-11-30 11:25:34 · 995 阅读 · 1 评论 -
连字符字符串与驼峰字符串的相互转换
连字符转驼峰第一种方法：使用正则匹配函数let str = 'str-arr-test';str = str.replace(/(\w*)-(\w*)/g, function ($1, $2, $3) { //console.log($2, $3); return $2 + $3[0].toUpperCase() + $3.slice(1);});console.l...原创 2018-09-24 22:30:15 · 2783 阅读 · 0 评论 -
字符串的全排列
方法一：使用 js 中的 reduce 方法function allPermutation(str) { if (str.length === 2) { return [str, str[1] + str[0]]; } return str.split('').reduce((acc, val, idx) => acc.conca...原创 2018-09-23 23:48:16 · 379 阅读 · 0 评论 -
不用四则运算计算两数之和
这道题中可以使用按位异或，因为按位异或就是不进位加法，进位我们可以使用两个数按位与，可以得出应该进位的数，使用 << 左移符号来进位递归调用，知道 a 为零时返回 b ，b 为零时返回 a 举例：8 + 8 =1000 + 1000 =a 等于按位异或后为 0 b等于按位与之后为 1000，使用左移符号为 10000此时 a 为 0 ，返回 b ，也就是 10...原创 2018-09-06 10:07:31 · 743 阅读 · 0 评论 -
浏览器和 Node 中的事件循环 Event Loop 对比
什么是 Event Loop ？众所周知，JavaScript 是非阻塞单线程语言，在浏览器执行过程中会遇到很多事件，而这些事件的执行就涉及到异步处理（包括数据请求 Ajax 、用户交互事件、脚本、渲染等）这么多的事件肯定得有个执行顺序，这就涉及到 Event Loop 。而浏览器端和 node 的事件循环又有所不同。浏览器JavaScript 中分为执行栈和任务队列，而任务队列又...原创 2018-08-17 11:46:49 · 1668 阅读 · 1 评论 -
Vue.js 内部运行机制（六）---- 批量异步更新策略及 nextTick 原理
之前我们学到了 Vue 更新数据是如何更新视图的。简单回顾数据更新（setter）-> 通知依赖收集集合（Dep） -> 调用所有观察者（Watcher） -> 比对节点树（patch） -> 视图在更新视图这一步，使用异步更新策略为什么呢？引用小册中的例子,下面有一个这样的 Vue 组件<template> <div> ...原创 2018-08-08 11:22:08 · 2616 阅读 · 0 评论 -
Vue.js 内部运行机制 (五) ---- 数据状态更新时的差异 diff 及 patch 机制
之前我们说到响应式、依赖收集、Virtual Dom，下一步应该就是比较我们的新旧节点树（Diff），update 更新视图，最终是将新产生的 VNode 节点与老 VNode 进行一个 patch 的过程，比对得出「差异」，最终将这些「差异」更新到视图上注：本文中图片都来自掘金小册《数据状态更新时的差异 diff 及 patch 机制》附上自己梳理的一份 Diff 思维导图跨平台的A...原创 2018-08-07 16:09:01 · 1537 阅读 · 0 评论 -
阿里笔试题
本篇文章转载自我的个人博客题目 ajaxArray是一个异步请求数组，完成mergePromise函数达到以下输出，并返回一个Promise对象const ajax1 = () => timeout(2000).then(() => { console.log('1') return 1 })const ajax2 = () =>...原创 2018-08-03 10:45:09 · 414 阅读 · 0 评论 -
Vue.js 内部运行机制 (三) ---- Virtual DOM 的实现
在这一节我们主要学习简单的Virtual Dom的实现VNode类VNode 归根结底就是一个 JavaScript 对象，只是通过类的属性可以正确直观地知道当前节点的信息即可。这是最简单的实现。/** * virtual node生成类 * 去除复杂的情况 */class VNode { constructor(tag, data, children, text,...原创 2018-08-05 18:42:13 · 396 阅读 · 0 评论 -
Vue.js 内部运行机制 (二) ---- 响应式系统的依赖收集追踪原理
为什么需要依赖收集？ 1、在 Vue 中，我们可能更新了不用更新视图的数据，如果没有依赖收集，则也会调用更新视图的 cb 函数，显然这是不合理的2、Vue 页面中可能多处引用同一个 Vue 组件对象，更新响应式数据时，则应当更新多处视图，这些都涉及依赖收集 首先的订阅者 Dep 类/** * 依赖收集类 */class Dep { constructor() {...原创 2018-08-05 14:48:51 · 1326 阅读 · 1 评论 -
取消Promise
转载自 为Promise插上可取消的翅膀const makeCancelable = (promise) => { let hasCanceled_ = false; const wrappedPromise = new Promise((resolve, reject) => { promise.then((val) => hasCancele...转载 2018-07-31 17:20:23 · 1321 阅读 · 0 评论 -
理解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 · 16401 阅读 · 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 · 5106 阅读 · 0 评论 -
MessageChannel API
MessageChannel接口允许我们创建一个新的消息通道，并通过它的两个MessagePort 属性发送数据，返回的两个属性为只读属性MessageChannel API在Web Worker中同样可以使用使用：let channel = new MessageChannel();channel.port1; //只读channel.port2; //只读返回两...原创 2018-07-24 20:54:45 · 1936 阅读 · 0 评论 -
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 · 3057 阅读 · 0 评论 -
前端JS面试题
题目：实现函数计算 Cal(2).加(1).减(2).乘(3).除(3)，Cal函数只是一个传参函数分析：在此题中每次函数调用结束会调用下一个函数，即函数返回值是一个对象，这是我们可以考虑使用原型链和thisfunction Cal(num) { let obj = { num } Object.defineProperties(obj.__proto__, ...原创 2018-07-18 18:24:10 · 356 阅读 · 0 评论 -
JavaScript跨域问题--CORS
1.CORSFirefox3.5+、Safari4+、Chrome、iOS版Safari和Android平台中的WebKit都通过XMLHttpRequest对象实现对CORS原生支持。IE则是引入XDR类型（与XHR类似）来支持CORS。XHR跨域： 跨域注意：1.不能使用setRequestHeader()设置自定义头部 2.不能发送接收cooki...原创 2018-03-28 18:35:54 · 543 阅读 · 0 评论 -
原生js实现深拷贝函数
首先实现一个函数对变量类型进行判断// 判断变量的类型function getType(obj){ var str = Object.prototype.toString.call(obj); var map={ '[object Boolean]' : 'boolean', '[object Number]' : 'number', '[object Strin...原创 2018-03-26 16:42:50 · 9115 阅读 · 2 评论 -
Vue生命周期
先放一张官方文档图：钩子函数从图中可以看到Vue生命周期中的几个钩子函数Vue2.0生命周期钩子函数 描述 beforeCreate 组件实例刚被创建，$data、$el等都为undefined created 组件实例创建完成，$data数据已经绑定，但$el尚未声明，为undefined beforeMount 组件挂载之前，$el属性已经生...原创 2018-07-25 11:50:27 · 225 阅读 · 0 评论 -
React PureComponent 使用指南
本篇博客转载自React PureComponent 使用指南，侵删。为什么使用？React15.3中新加了一个 PureComponent 类，顾名思义， pure 是纯的意思， PureComponent 也就是纯组件，取代其前身 PureRenderMixin , PureComponent 是优化 React 应用程序最重要的方法之一，易于实施，只要把继承类从 Component ...转载 2018-07-25 17:45:56 · 3136 阅读 · 3 评论 -
常见的排序算法
冒泡排序冒泡排序算法的原理如下： 比较相邻的元素。如果第一个比第二个大，就交换他们两个。 对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。 针对所有的元素重复以上的步骤，除了最后一个。 持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。 ----摘自百度百科 functi...原创 2018-07-27 17:35:18 · 175 阅读 · 0 评论 -
面试题--如何渲染几万条数据并不卡住界面
根据题意，如果我们一次性渲染刷新几万条数据，页面会卡顿，因此只能分批渲染，既然知道原理我们就可以使用setInterval和setTimeout、requestAnimationFrame来实现定时分批渲染，实现每16 ms 刷新一次requestAnimationFrame跟setTimeout/setInterval差不多，通过递归调用同一方法来不断更新画面以达到动起来的效果，但它优于se...原创 2018-07-22 17:50:55 · 10883 阅读 · 0 评论 -
前端性能优化
HTML语义化HTML：可以使代码简洁清晰，支持不同设备，便于团队开发，对搜索引擎和用户更加友好； 减少DOM节点：加速页面渲染； 给图片加上正确的宽高值：减少页面重绘，同时防止图片缩放； 避免src属性和link的href属性为空：当值为空时浏览器很可能会把当前页面当成其属性值加载； 正确的闭合标签；CSS合并css文件 使用link 合写css（通过少些css属性来达...原创 2018-07-22 15:13:56 · 254 阅读 · 0 评论 -
Vue.js 内部运行机制 (一) ---- 响应式系统基本原理
最近准备好好看看《Vue的内部运行机制》，学到什么就写什么，先介绍Vue的响应式主要核心APIObject.defineProperty(obj, key, descriptor)descriptor其中有几个属性：configurable --》属性可配置性，属性是否可修改或删除，默认falseenumerable --》属性可枚举性，默认falsevalue --》属性值...原创 2018-08-03 17:02:10 · 903 阅读 · 0 评论 -
尾递归与递归
什么是递归递归是什么就不多说了，下面举个例子function f(n) { if (n === 1) { return 1 } return n * f(n - 1)}f(3) // 6递归非常耗费内存，因为递归调用栈中需要同时保存成千上百个调用记录，很容易发生"栈溢出"错误。什么是尾递归如果一个函数中所有递归形式的调用都出现在函数的末尾，我们称这个...原创 2018-07-26 18:06:56 · 530 阅读 · 0 评论 -
React生命周期
在上一篇博客文章中写到了Vue生命周期，现在介绍React生命周期，一样，先放一张图，图片来自React组件生命周期下面所有生命周期介绍就写在代码里吧import React, { Component } from 'react'class App extends Component { constructor(props, context) { /** *...原创 2018-07-25 20:47:12 · 396 阅读 · 0 评论 -
js手动实现简易懒加载----LazyLoad
前言在网页加载中，对于一些存在很多Image的网页，一次加载所有图片，会造成性能浪费，图片优化的方法有很多，例如base64、雪碧图等，图片懒加载也是比较常见的一种性能优化的方法原理给页面中img标签设定自定义属性data-original,用来存放真正的img源URL，给所有img的src属性设定为一张静态图片或者不设置监听窗口滚动scroll事件，遍历图片计算图片是否出现在浏览...原创 2018-07-28 19:04:49 · 1092 阅读 · 0 评论 -
面试题：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 · 4030 阅读 · 0 评论 -
实现ajax请求数据
使用get请求数据：function createXhr(){ var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest();//w3c }else{ xhr = new ActiveXObject('Micosoft.XMLHTTP');//ie } return xhr;}function addParams...原创 2018-03-26 16:05:14 · 648 阅读 · 0 评论