从零开始学_JavaScript_系列
文章平均质量分 90
qq20004604
前阿里巴巴,高级前端开发
展开
-
前端如何展示一个有上亿数据的树结构
需求描述数据上亿,有数千个从属于根节点的一级子节点;每个一级子节点有数个到数万个二级子节点;二级子节点可能有三级子节点;子节点的最多层深不定(即,也许可能有 10 层);需求分析当面临一个树结构的时候,一般首先考虑用 tree 组件,但是,这里显然是不可能的,理由如下:数据量太多,一个节点可能有数万子节点,显示会非常卡(一般来说,最多显示几百个才能保证性能,超过 1000 很容易卡);当多展开几个子节点后,很难找到自己需要的那个子节点;即使增加过滤/搜索功能,也不太方便;因此我们原创 2020-09-07 17:01:23 · 3691 阅读 · 0 评论 -
从零开始学_JavaScript_系列(53)——Generator函数(1)基本概念和示例
1、Generator基本概念注:【遍历器】和【迭代器】是一个意思。1.1、表象:函数名有个星号(就是乘号*);函数体内部使用yield表达式(yield翻译成中文:产生);函数调用后返回值是一个遍历器对象,该对象可以调用next方法遍历yield表达式返回的值;函数内部可有返回值,也可以没有(这个影响的是遍历器遍历到第一次done为true时,value的值是什么);函数执行后并不直接执原创 2017-08-21 22:01:04 · 490 阅读 · 0 评论 -
从零开始学_JavaScript_系列(39)——对象的扩展(2)Object对象的扩展方法
一句话总结1、Object.is判断两个变量是否相等 2、Object.assign可以合并对象的非原型链上,且可枚举属性 3、Object.getOwnPropertyDescriptor查看属性是否可枚举、可修改、可赋值4、Object.keys获取对象非原型链上,且可枚举属性的key原创 2017-06-04 19:26:18 · 712 阅读 · 0 评论 -
从零开始学_JavaScript_系列(38)——对象的扩展(1)属性的简洁写法
一句话总结:1、属性名,以及是属性的函数的简洁写法,写起来简单易阅读2、属性名可以用变量字符串拼接起来(话说以前也有吧?)3、函数都有name属性,但set和get也要加前缀原创 2017-06-04 19:24:30 · 605 阅读 · 0 评论 -
从零开始学_JavaScript_系列(47)——Reflect
Reflect1、是什么? 一种原生对象; 用于调用原属于对象内部的方法(比如定义属性)2、如何使用(几种常见方法示例)2.1、读 Reflect.get(target, propertyKey[, receiver])拦截对target对象的propertyKey属性的读取,返回这个属性的值。参数一是被访问的对象;参数二是属性名;参数三当遇见getter时,将gett原创 2017-07-03 00:12:23 · 551 阅读 · 0 评论 -
从零开始学_JavaScript_系列(52)——Iterator接口与for...of
0、一句话总结 Array、Set、arguments等自带Iterator接口 自定义Iterator接口,适合应用在自定义数据类型(比如链表) 任何接受数组作为参数的场合,其实都调用了遍历器接口 for…of可以遍历Iterator接口,无论他是默认的还是我们自定义的 for…of遍历得到的是value,for…in遍历得到的是key1、Iterator原创 2017-08-12 18:07:34 · 789 阅读 · 0 评论 -
从零开始学_JavaScript_系列(48)——Promise(1)基础知识
1、是什么【一个十分适合处理异步操作的对象】【有进行中(pending)、成功(resolved)、失败(rejected)三种状态】【可以轻松处理成功或失败的情况,代码结构更清爽,操作结果可预期】【对象的状态不受外界影响,只会根据预先设定的情况执行代码,方便从pending状态切换到resolved或者rejected】原创 2017-07-28 10:04:41 · 1040 阅读 · 2 评论 -
从零开始学_JavaScript_系列(49)——Promise(2)then、值、catch
4、回调函数返回值与then的返回值4.1、 回调函数返回值回调函数的返回值,指的是Promise实例的then的回调函数resolve和reject的返回值。如代码:let foo = new Promise((resolve, reject) => { resolve("foo");}).then(msg => { console.log(msg); msg += "原创 2017-07-28 10:06:40 · 2632 阅读 · 0 评论 -
从零开始学_JavaScript_系列(50)——Promise(3)全部完成all和看谁最快race
7、全部完成才结束Promise.all场景我们在写ajax的时候,经常会面临这样一个场景:我有三个ajax请求,但是需要等着三个ajax的请求结果都出来后再进行处理。如果常见写法,我们需要在每个都执行完之后,依次判断一下其他的完成了没有,完成了才能继续,没完成就return。但是使用Promise.all的话,问题简单多了。 Promise.all(iterable);参数:一般是一个数组,原创 2017-07-28 10:10:36 · 786 阅读 · 0 评论 -
从零开始学_JavaScript_系列(40)——对象的扩展(3)当枚举、原型链遇见对属性的操作
一句话总结:1、当属性在原型链上,或者不可枚举时,会被很多方法忽视(参照6.1);2、__proto__和prototype的关系(参照7.1);3、Object.setPrototypeOf(obj, prototype)设置__proto__属性;4、Object.getPrototypeOf(obj)获取__proto__属性原创 2017-06-04 19:31:16 · 796 阅读 · 0 评论 -
从零开始学_JavaScript_系列(41)——对象的扩展(4)扩展运算符三个点...
一句话总结:es7新增对对象有效的扩展运算符...(三个点)原创 2017-06-04 19:32:51 · 3519 阅读 · 0 评论 -
从零开始学_JavaScript_系列(37)——让浏览器支持es7特性
这里只说chrome浏览器。原创 2017-06-04 14:42:47 · 3861 阅读 · 0 评论 -
从零开始学_JavaScript_系列(42)——简述js的八种继承方式
继承方式有以下几种:prototype:传统原型链继承,要继承的函数的prototype属性,被被继承函数的实例所替代;apply、call继承:在要继承的函数里,调用被继承的函数,并利用apply和call传参this实现;Object.assign() 属性合并继承(非原型链),类似2,可以同时合并多个;Object.create() 以某个对象为原型创建属性继承(原型链继承),类似1原创 2017-06-05 01:07:08 · 916 阅读 · 0 评论 -
从零开始学_JavaScript_系列(36)——base64字符串与图片的相互转换
base64字符串转图片原理是当base64字符串作为img标签的src属性时,如果是有效的,则可以预览。而若要下载,则创建一个新的a标签将a标签的href属性设置为该base64字符串设置a标签的download属性为文件名再通过js手动触发该a标签的点击事件,则完成了下载行为(具体视浏览器可能需要选择下载目录或者使用默认目录)。图片转base64字符串分为两种,一种是提供图片的src标签原创 2017-05-31 21:30:42 · 6789 阅读 · 0 评论 -
从零开始学_JavaScript_系列(35)——继承与遍历的对照表
继承属性的继承有多种方式,但简单来说,分为继承后在本身属性上,以及在继承的属性在原型链上。前者的典型情况是通过call、apply或者Object.assign()等,他们之间还略有区别(但不影响遍历)。后者的典型情况是通过prototype来继承,属性不在对象本身上,而是在例如 obj.__proto__ 上,或者更深一层等。遍历遍历的方法也有很多种,兼容旧版本的常见方法是for…in,之后还有O原创 2017-05-31 11:36:35 · 503 阅读 · 0 评论 -
从零开始学_JavaScript_系列(46)——Proxy代理(给对象加壳)
Proxy代理1、是什么?用于修改对某个对象的属性的操作的默认行为;绑定与指定对象;返回值和原对象不全等(原因是返回值在原对象外面套了一层壳,已经不是同一个玩意了);但返回值终究操作的还是原对象,因此无论对哪个操作,修改的都是原对象的值;可以拦截对对象属性的读取、修改、遍历等;是对对象的属性生效,而访问对象的子属性的子属性时,需要先访问子属性,因此当操作对象子属性的子属性也生效;同样因原创 2017-07-03 00:02:01 · 1051 阅读 · 0 评论 -
从零开始学_JavaScript_系列(45)——ES6新增数据结构:Map和WeakMap
一句话总结:1、 Map的参照1.1; 2、 WeakMap的是弱化版Map,只有增、查、取、删四个API;原创 2017-06-07 23:29:38 · 813 阅读 · 0 评论 -
从零开始学_JavaScript_系列(44)——ES6新增数据结构:Set类型和WeakSet
一句话总结:1、Set类型可以用于存储元素,并且变量内每个元素都是独一无二的(不会重复);2、可以通过Set内置方法——添加、删除、查有无、清空元素;3、Set可以方便的转为数组后进行处理,在初始化为Set类型变量;4、WeakSet是弱化版的Set,并且只对引用类型有效(其他报错);5、WeakSet只支持添加、删除、查有无,其他统统没有原创 2017-06-07 16:37:35 · 870 阅读 · 0 评论 -
从零开始学_JavaScript_系列(43)——Symbol简述
一句话总结: 1、一个新的数据类型; 2、当key时,只有指定遍历方法,才能获取该属性名; 3、Symbol.for(key)方法,同样的key可以生成同样的Symbol类型变量; 4、一些内置属性,可以设置某些类型的属性,用于配置某些功能原创 2017-06-05 19:44:28 · 649 阅读 · 0 评论 -
从零开始学_JavaScript_系列(51)——Promise(4)Promise.resolve和Promise.reject
9、Promise.resolve Promise.resolve(value); Promise.resolve(promise); Promise.resolve(thenable);参数与返回值:参数是promise对象:返回值是参数,不做任何改变;参数是thenable:指是一个有then属性的对象,返回值是一个新建的Promise对象,相当于将then方法作为原创 2017-07-28 10:11:50 · 1203 阅读 · 0 评论 -
从零开始学_JavaScript_系列(58)——Thunk函数
1、Thunk函数基本定义1.1、缘由与函数的求值策略有关,求值策略分为两种:传名策略:在需要求值的时候才求值;传值策略:在传入函数的时候就求值;(又有说法叫按值传递)如以下的示例代码:function foo(a) { return a * 10 // 1+2在这里计算结果叫做【传名策略】}foo(1 + 2) // 1+2在这里计算结果叫做【传值策略】JavaScript原创 2017-08-25 09:47:28 · 1268 阅读 · 1 评论 -
手把手教你用套路写页面(HTML、CSS初中级前端教学)(第一节)
很多人不太会写 HTML 和 CSS,这里教你如何分析页面结构,如何使用各种标准套路写出各种页面。以 HTML 和 CSS 为主,部分动态内容加入 js 实现。所有技巧全部简单暴力,没有兼容性问题(除非你要兼容IE8),但是非常好用。源代码:https://github.com/qq20004604/tell-you-write-manage-page作者微信:qq20004604讨论...原创 2019-08-07 14:53:36 · 3746 阅读 · 4 评论 -
用套路写页面(第二节)不定高边栏,子元素高度动态且相邻联动
目录:5、左侧边栏(难度:3.5颗星)5.1、原型分析套路5:当高度/宽度为动态获取,且相邻联动的两个区域5.2、左边栏上下区域划分套路6:无痕滚动5.3、按钮的 CSS5.4、历史记录5.5、总结5、左侧边栏(难度:3.5颗星)前文参照:第一节:https://blog.csdn.net/qq20004604/article/details/987482205.1、原...原创 2019-08-08 16:47:45 · 646 阅读 · 0 评论 -
从零开始学_JavaScript_系列(68)——es6模块的使用
1、es6模块用于浏览器中标准写法是:<script type="module"> console.log('module')</script>按照预期效果是会非堵塞加载,然后再执行。事实上是里面的代码根本不会执行。又比如说:<script type="module" src="./bar.js"></script><script src="./foo.js"></script>你以为会原创 2017-09-17 23:05:19 · 1696 阅读 · 0 评论 -
从零开始学_JavaScript_系列(67)——es6的import和export(chrome61版本后可用)
import和export原创 2017-09-13 09:03:50 · 3409 阅读 · 0 评论 -
从零开始学_JavaScript_系列(66)——AMD、CMD、CommonJS
AMD、CMD、CommonJS原创 2017-09-11 08:55:34 · 741 阅读 · 0 评论 -
三十分钟熟悉es6(es6日常使用功能总结)
1、前注本文是对es6的小结,关于详细说明可以参照我的系列文章es6 从入门到熟练,或者阮一峰的ECMAScript 6 入门。我的系列文章是在阮一峰对应文章的基础上,增加更多适合初中级开发者的内容(包括代码和解释),降低学习难度。本文是在以上基础上,结合我本人实际开发经验,对es6整体的一个小结。缩减了不常用的内容,只着重阐述一些常用的东西,方便初级中级开发者理解。2、开发环境关键字:IE9、Ba原创 2017-09-17 23:32:34 · 2158 阅读 · 0 评论 -
从零开始学_JavaScript_系列(63)——class(4)静态方法和new.target
9、类静态方法9.1、基本概念所谓静态方法,在class指专属于class本身的方法,而且不会被类的实例所继承。如代码:class Foo { static test() { console.log("this is static") }}Foo.test() // this is staticlet p = new Foo()p.test() //原创 2017-09-01 17:19:27 · 376 阅读 · 0 评论 -
从零开始学_JavaScript_系列(62)——class(3)setter和getter、Generator、async函数
6、setter和getter之前说过,常规情况下,类是没办法直接实现变量的。有一种变相的做法,是用es5的setter和getter特性来实现。但这种办法并不是完美的,有两个缺陷:setter和getter,就功能来说更强大,但对于一般需求来说,又过于复杂了;setter和getter本身只是起到一个代理的作用,本身并不能真正存储变量,还是需要通过一个间接的变量来存储他;这个用于存储的间接的原创 2017-09-01 17:18:27 · 646 阅读 · 0 评论 -
从零开始学_JavaScript_系列(61)——class(2)私有方法、this
4、私有4.1、私有方法不得不遗憾的表示,目前来看,类似c++或者java里的那种私有方法和私有变量,在js里面还是实现不了的。因此变通方法有三个:1、伪私有:下划线开头表示私有方法。如代码:class Foo { _testPrivate() { }}这种私有方法是一种约定俗称的私有方法命名方式。用下划线开头,表示告诉使用者,这些是私有方法,你最好不要改,改了有可能出错。但实际中,原创 2017-09-01 17:17:03 · 1054 阅读 · 0 评论 -
从零开始学_JavaScript_系列(60)——class(1)基本概念
1、概念1.1、前注如果对c++之类语言比较熟悉的话,上手class的难度会很低,比上手原型链的难度低不少。目前来看,class的实现,依然是通过构造函数和原型链来实现的(相当于是一个语法糖,至少目前是这样的),而在Babel转码之后,也是通过构造函数和原型链来做到的。这里对于较为简单的内容,不会费太多笔墨,如果某些地方不太明白,可以看阮一峰的博文。1.2、基本形态为了帮助理解,写一个构造函数版,和原创 2017-09-01 17:14:50 · 722 阅读 · 0 评论 -
从零开始学_JavaScript_系列(65)——class的继承(2)super、extends与多重继承
4、super关键字4.1、作为函数时使用当super作为函数时使用,非常简单。只允许在子类的构造函数中调用;并且需要在调用this之前调用;而且必须调用一次(除非你省略掉子类的构造函数);如果不符合以上要求,那么就会报错,以下是标准写法class Foo {}class Bar extends Foo { constructor() { super() }原创 2017-09-08 14:12:14 · 2010 阅读 · 0 评论 -
从零开始学_JavaScript_系列(64)——class的继承(1)基本概念、继承构造函数和class
1、class继承概述1.1、所谓继承继承这个概念还需要解释么?好吧,我解释一下:简单粗暴的解释继承,就是指:我定义一个类A,他自带一些方法;然后我定义一个类B,他有一些方法是独特的,但他还有一些方法是类A已有的,那么如果让类B再重复定义这些类A已有的方法,显然是低效的写法;这种让类B可以使用类A的方法的做法,就是继承;传统解决办法是创建一个类A的实例,然后让类B指向这个创建的实例,从而利用原创 2017-09-08 14:11:08 · 398 阅读 · 0 评论 -
从零开始学_JavaScript_系列(59)——async函数
1、async函数简介1.1、前注在阅读本章节之前,建议先阅读 【Generator函数】章节和【Thunk函数】章节。不然很有可能对本章节内容摸不着头脑,或者理解有所偏差。如果有所了解或者比较熟悉的话,那么对本章绝大部分内容上手是非常轻松的。这里假定你已经对以上知识有所理解,不考虑完全不懂的人能否理解本博文。1.2、兼容性关于asnyc函数的兼容性:Can I use网站的说明简单来说:支持asy原创 2017-08-28 21:17:27 · 1020 阅读 · 0 评论 -
从零开始学_JavaScript_系列(57)——Generator函数(5)状态机与函数的应用
6、状态机这里的状态机通常指有限状态机。所谓的有限状态机,是一个模型,通俗的来说: 这个模型有x个状态(x可确定),在任一时刻只能处于一个状态下,并且可以从一个状态切换到另外一个状态。举个例子:假如有一个ajax请求的提交按钮(比如【登陆】);他有两个状态:①待命中;②提交中;显然,他要么处于【待命】状态,要么处于【提交】状态,不可能又待命又提交;其中待命状态是可点击的,而提交状态是不原创 2017-08-23 00:40:15 · 504 阅读 · 0 评论 -
从零开始学_JavaScript_系列(56)——Generator函数(4)简写,this与继承
5、简写与this5.1、简写Generator函数的写法有三种(除了第一种名字都自己捏的):声明式;赋值式;属性式;其中,属性式除了常规写法外,还有简写版(就像当函数作为对象属性时的简写一样)。如代码,一目了然:// 声明式function *g1() { yield 'g1'}// 赋值式let g2 = function*() { yield 'g2'}// 属原创 2017-08-23 00:39:02 · 423 阅读 · 0 评论 -
从零开始学_JavaScript_系列(55)——Generator函数(3)yield*表达式
4、yield*表达式4.1、基础简单来说,yield*表达式就是在一个Generator函数内嵌套另外一个Generator函数。于是在遍历的过程中,当在第一个Generator函数内遇见第二个Generator函数后,就会先停止遍历第一个Generator函数,先遍历完第二个Generator函数,然后再恢复。如代码:let g1 = function*() { yield 1;原创 2017-08-23 00:37:56 · 419 阅读 · 0 评论 -
从零开始学_JavaScript_系列(54)——Generator函数(2)简单应用、throw和return
2、基本应用2.1、解构赋值数组是可以通过Iterator接口进行解构赋值的,对象不行是因为对象没有这个接口,那么假如我们给对象补上这个接口,对象自然也可以了。而Generator函数显然是Iterator的完美搭配(因为他能返回一个遍历器),将Generator函数作为对象的[Symbol.iterator]属性即可。如代码:let foo = { a: '1', b: '2',原创 2017-08-21 22:03:34 · 369 阅读 · 0 评论 -
从零开始学_JavaScript_系列(34)——将canvas获取的图片下载到本地
调用摄像头 + 摄像头图像映射到canvas上 + 将拍摄到的图片下载到本地原创 2017-02-25 01:35:49 · 1061 阅读 · 0 评论 -
从零开始学_JavaScript_系列(33)——dom.append()与$.append()
(39)dom.append()与$.append()通过原生js获取到的dom,和通过jQuery获取到的dom,都有append方法,但是他们表现出来的效果是有所区别的。具体来说,如代码: var dom1 = document.getElementById("test1");dom1.append('原生js获取的dom的append方法是不能:加粗和斜体的');va原创 2017-01-19 15:20:28 · 822 阅读 · 0 评论