2018年12月_多啦的博客_多拉斯基

原创前端练习37 迷你MVVM

知识点如何获取所有文本节点defineProperty和defineProperties将字符串替换为参数变量如何标记依赖的元素题目做一个小型的MVVM库，可以做到数据和视图之间的自动同步。你需要做的就是完成一个函数bindViewToData，它接受一个DOM节点和一个对象data作为参数。bindViewToData会分析这个DOM节点下的所有文本节点，并且分析其中被{{和}...

2018-12-29 15:31:37 128

原创前端练习36 翻箱倒柜

知识点Iterator接口Generatorr函数题目完成一个类Box，实例化的时候给它传入一个数组。Box的实例支持for...of操作，可以把初始化的时候传给Box的数组内容遍历出来：const box = new Box(['book', 'money', 'toy'])for (let stuff of box) { console.log(stuff) // =&gt...

2018-12-28 15:26:24 123

原创前端练习35 Symbol转换

知识点对象的遍历方法Symbol与其他类型的转换题目请你完成convertSymbolToNormalStr函数，它会把一个键全是Symbol的对象转换成键全是String的对象，而同时值保持不变。例如：convertSymbolToNormalStr({ [Symbol('name')]: 'Jerry' }) // => { name: 'Jerry' }实现首先要把...

2018-12-28 14:57:15 173

原创《JS高级程序设计》第二遍读书笔记

这一遍的重点还是在JS语言本身，后面的DOM和BOM部分看的比较快，因为现在实际上用的不多，掌握大致的原理，需要的时候再翻手册就可以了。认为暂时没必要的知识点WebGL，认为已经不需要、过时的知识/XML/E4X终于在2018年的末尾把这个书又看了一遍，还是有些进步的，2019，加油（2018.12.28）第一章 JavaScript简介JavaScript组成部分：ECMASc...

2018-12-28 11:35:06 229

原创前端练习34 监听数组变化

知识点new的时候的返回值ES5的继承ES6的继承Proxy题目请你完成ObserverableArray，它的实例和普通的数组实例功能相同，但是当调用：pushpopshiftunshiftsplicesortreverse这些方法的时候，除了执行相同的操作，还会把方法名打印出来。例如：const arr = new ObserverableArray()...

2018-12-27 17:22:29 453 1

原创 JS语言理解03 非构造函数的继承

2018.12更新一般非构造函数的继承，最常用的就是Object.create方法：let child = Object.create(father, descriptors);这样就可以实现child与father的继承，继承关系是通过child.__proto__ = father实现的，再通过描述符对象descriptors添加属于自己的属性实际上，Object.create方法就...

2018-12-27 16:04:52 57

原创前端练习33 到底一不一样

知识点NaN的比较0和-0的比较题目完成is函数，它接受两个参数，你返回true和false来表示这两个参数是否有相同的值。例如：is('foo', 'foo'); // trueis(window, window); // trueis('foo', 'bar'); // falseis([], []); // falsevar...

2018-12-26 19:47:30 92

原创前端练习32 中间件模式

知识点中间件的实现Reduce用于函数题目中间件模式（middleware）是一种很常见、也很强大的模式，被广泛应用在 Express、Koa、Redux 等类库和框架当中。简单来说，中间件就是在调用目标函数之前，你可以随意插入其他函数预先对数据进行处理、过滤，在这个过程里面你可以打印数据、或者停止往下执行中间件等。数据就像水流一样经过中间件的层层的处理、过滤，最终到达目标函数。请你...

2018-12-25 11:12:56 398

原创前端练习31 谁在召唤我？

知识点函数中的callee、caller属性Error.prototype.stack属性题目我们要实现一个函数where，它会返回它被调用时的所在函数的名字，例如：function main () { where() }function a () { function b () { where() // => 'b' } b()}main(...

2018-12-24 10:52:52 107

原创前端练习30 间谍活动

知识点函数Proxy题目完成间谍函数spy，它可以潜伏到任何一个函数当中，监听它们的所有活动。spy接受一个函数作为参数，返回一个被间谍潜伏以后的函数。let america = (a, b) => a + bamerica = spy(america)america(1, 2) // => 3spy返回的函数和原来的函数的功能一样，但是它悄悄记录了每一次执行的...

2018-12-21 20:14:54 68

原创《图解HTTP》读书笔记

简单易懂，非常适合用来入门，应该再早一些看的（2018.11.04 - 2018.12.21）第一章了解Web及网络基础Web使用HTTP（HyperText Transfer Protocol，超文本传输协议）作规范。3项WWWW构建技术：HTML/HTTP/URL目前主流和HTTP协议主流版本是1.1，HTTP2.0正在制定中网络基础 TCP/IP通常使用的网络（包括互联网）...

2018-12-21 17:25:35 480

原创《Web前端开发最佳实践》读书笔记

总的来说，这本书给我感觉帮助不大，比较适合新手，对新手养成好的习惯有些帮助。更深层次的东西比较少，而且由于书的发行周期，对于前端这种日新月异的技术来说，过时、与新技术新理念脱节，是没法避免的事情（2017.12.24）第二章高效Web前端开发前端代码重构过程删除无用代码，精简代码，主要是已经不起作用的CSS样式和废弃的JS函数前端代码规范化整理基础类库前端代码模块化提高页面加...

2018-12-21 17:21:47 1809

原创前端练习29 循环调节列表

知识点DOM节点的获取、插入、删除事件委托题目页面上有这么一个列表： <li> <span>1</span> <button class='up'>UP</button> <button class='down'>DOWN</button> </li&

2018-12-21 10:25:49 124

原创前端练习28 执行任意表达式

知识点evalwithnew Function题目在开发前端框架、模版引擎的时候，经常会需要我们在特定的上下文中，动态分析、执行特定的表达式。例如：在{ x: 1, y: 2, z: 3 }的上下文中执行表达式x + y那么就会得到3，执行z - x就会得到2。请你完成execute函数，接受一个字符串和对象作为参数，它可以在特定的上下文中执行任意的表达式，例如：execute(...

2018-12-20 20:18:02 81

原创前端练习27 不用循环生成数组

知识点递归思路Array.fromnew Array参数和Array.of的区别数组的keys()方法数组map方法对空对象的处理题目完成arrWithoutLoop函数，它会被传入一个整数n作为参数，返回一个长度为n的数组，数组中每个元素的值等于它的下标。arrWithoutLoop中不能使用循环控制结构。实现首先想到了用Array.from方法，原来用它来填充数组，它接受...

2018-12-20 09:59:25 1382

原创前端练习26 上车后异步开车

知识点异步流程控制题目完成函数driveCustomers，它接受不定数量的参数，这是参数都是函数，每个函数代表一个人。这些函数都接受一个回调函数作为参数，当回调函数被调用的时候说明这个人已经上车了，回调函数会被传入人名。例如：const MissLi = (callback) => { setTimeout(() => { callback('MissLi') ...

2018-12-20 09:11:33 96 1

原创前端练习25 实现一个EventEmitter

知识点观察者模式的概念和实现class的使用题目完成EventEmitter模块，它是一个类，它的实例具有以下几个方法：on、emit、off：on(eventName, func)：监听eventName事件，事件触发的时候调用func函数。emit(eventName, arg1, arg2, arg3...)：触发eventName事件，并且把参数arg1, arg2, a...

2018-12-19 14:39:52 917

原创前端练习24 queryString分析器

知识点URL中的查询参数和hash值多种情况的考虑题目完成一个parseQueryString函数。它接受一个url字符串作为参数，返回一个对象，这个对象包含query string上的键值对。例如：parseQueryString('https://scriptoj.com/problems?offset=100&limit=10')返回:{ offset: '100...

2018-12-19 10:22:31 127

原创前端练习23 操作Cookie

知识点读取CookieCookie形式设置Cookie删除Cookie题目完成cookieJar单例，它有三个方法：set(name, value, days)：设置cookie的值，days为多少天以后过期。get(name)：获取cookie的值。remove(name)：删除cookie的值。实现首先，设置cookie时是直接给Cookie赋值：documen...

2018-12-18 15:07:46 97

原创前端练习22 数组展平

知识点concat方法可以接受数组作为参数，也可以接受非数组成员作为对象递归reduce方法判断数组类型题目编写一个JavaScript函数，接受一个仅包含数字的多维数组，返回拍平以后的结果。例如传入：[1, [[2], 3, 4], 5]，返回[1, 2, 3, 4, 5]。实现明显要通过递归实现，可以使用reduce方法，它可以保存当前只执行过的结果在total中，如果当前...

2018-12-18 10:09:24 274

原创前端练习21 后端数据处理

知识点分析数据结构数组的reduce方法题目从某数据库接口得到如下值：{ rows: [ ["Lisa", 16, "Female", "2000-12-01"], ["Bob", 22, "Male", "1996-01-21"] ], metaDat

2018-12-18 09:30:36 351

原创前端练习20 DOM标签统计

知识点使用document.documentElement获取页面的<HTML>标签DOM节点的children属性是一个类数组对象，转换为数组的方法数组去重递归题目完成getPageTags函数，判断你的代码所执行的页面用到了哪些标签。例如，如果页面中：<html> <head></head> <body>&...

2018-12-17 19:25:23 296

原创前端练习19 函数柯里化

知识点通过length属性获得函数的参数个数柯里化的概念和实现题目函数式编程当中有一个非常重要的概念就是函数柯里化。一个接受任意多个参数的函数，如果执行的时候传入的参数不足，那么它会返回新的函数，新的函数会接受剩余的参数，直到所有参数都传入才执行操作。这种技术就叫柯里化。请你完成curry函数，它可以把任意的函数进行柯里化，效果如下：const f = (a, b, c d) =&...

2018-12-17 15:11:43 270

原创前端练习18 转换驼峰命名

知识点str.replace的用法，第二个参数的使用正则表达式的使用题目编写toCamelCaseVar函数，将下划线格式的字符串替换成为驼峰式的字符串，例如is_good转换为isGood变量名首尾的下划线不需要处理实现这道题目必然要用到的就是String.prototype.replace方法str.replace(regexp|substr, newSubStr|func...

2018-12-17 11:11:27 278

原创 Vue源码03 Vue中nextTick的实现

Vue是如何检测到DOM更新完成的其实这个问题和“nextTick的原理”是相同的。实际上，Vue并没有检测Dom的更新，而是利用了JS的事件队列的机制来实现nextTick的首先，Vue触发的DOM更新也是通过nextTick实现，将DOM的更新（而非DOM的渲染）放到了一个队列的末尾，所以只需要将nextTick中的任务放到该队列的末尾执行即可了所以Vue首选的方案就是利用Promis...

2018-12-17 09:35:47 128

原创前端练习16 16进制颜色值转 RGB 值

题目完成函数hexToRGB，它的作用将16进制颜色值转换成RGB值：hexToRGB('#F0F0F0') // => rgb(240, 240, 240)hexToRGB('#9fc') // => rgb(153, 255, 204)hexToRGB('无效颜色') // => null实现实现要明确16进制和RGB值的区别，16进制颜色是用3个十六进制值代表...

2018-12-16 18:25:39 1085

原创前端练习17 函数式编程的compose函数

题目函数式变成可以把处理数据的函数向管道一样连起来，上一个函数的结果作为下一个函数的参数，得到最终的结果：const add1 = (x) => x + 1const mul3 = (x) => x * 3const div2 = (x) => x / 2div2(mul3(add1(add1(0)))) // => 3完成一个compose函数，它接受多个...

2018-12-16 18:25:01 679

原创跨文档通信

跨文档通信跨文档通信指的是从页面A到页面B之间的通信，不需要借助服务器能够实现的方法：通过消息事件实现，不受跨域的限制，并且可实现双向通信postMessageMessageChannel通过客户端存储实现，收到跨域的限制（只有同源的文档才可以访问同一块客户端存储）cookielocalStrage/sessionStroageIndexedDB在页面跳转时携带信...

2018-12-14 17:21:58 200

原创前端练习15 求二维数组的排列组合

题目求出一个二维数组[[A, B], [a, b], [1, 2]]所有排列组合输入[[A, B], [a, b], [1, 2]]输出[Aa1, Aa2, Ab1, Ab2, Ba1, Ba2, Bb1, Bb2]实现编程，首先要分析规律，有了规律之后要做的就是用代码将这种规律实现就好了！！！！！分析一下，将计算过程拆解为两两相乘的过程首先计算[A, B] * [a, b]，得到...

2018-12-13 20:27:06 467 2

原创 32 BFC原理

定义BFC（Block Formatting Context – 块级格式化上下文）是布局过程中生成会块级合资的区域，也是浮动元素与其他元素的交互限定区域。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的margin不会合并，属于同一个BFC的块级元素之间的...

2018-12-13 16:24:19 36

原创移动端开发05 移动端的事件点透

触摸事件的响应顺序ontouchstartontouchmoveontouchendonclickgraph LRontouchstart-->ontouchmouveontouchmouve-->ontouchendontouchend-->onclick现象当A/B两个层上下z轴重叠，上层的A点击后消失或移开（这一点很重要），并且B元素本身有默认cl...

2018-12-13 14:53:25 68

原创前端练习14 将数字转换为文字

题目给出这样一组数字：'11100101'1代表yes，0代表no,要寻求完成一个switchStr函数，最终的输出结果是:1~3：”yes”,2~4:”no”,5:”yes”,6:”no”,7:”yes” 实现首先想到用for循环遍历实现，要注意遍历时起始的下标：const switchStr = str = > { let currentStr = str[0];...

2018-12-10 14:05:30 1126

原创前端练习12 求DOM树的最大深度

题目求DOM树的节点的最大深度实现可以用递归实现，关键就是找出递归的公式：1 + （兄弟节点中深度最大值）然后找出递归的结束条件，即当不存在子节点时结束递归，返回1其次还要注意，DOM节点的children属性是一个类数组对象，类似函数的arguments属性，不能直接使用数组方法，需要先转换为数组const getDepth = node =&gt; { if (!node....

2018-12-08 11:37:51 565 1

原创前端性能优化总结

性能优化从以下几个角度来考虑页面性能优化网络性能优化网络性能优化网络性能优化主要从以下几个角度：加快请求速度（使用CDN， keep-alive，Websocket，避免重定向，优先加载CSS文件）增多请求并发（Domian-Hash）减小请求数目（合并文件、雪碧图）减小请求体积（压缩图片和文件，Gzip，懒加载，Cookie-Free（减少不必要的cookie），Cache...

2018-12-07 18:17:51 66

原创网络基础09 提高网络性能

总结加快请求速度（使用CDN， keep-alive，Websocket，避免重定向，优先加载CSS文件）增多请求并发（Domian-Hash）减小请求数目（合并文件、雪碧图）减小请求体积（压缩图片和文件，Gzip，懒加载，Cookie-Free（减少不必要的cookie），Cache-Control，合理设置缓存）要点在 HTTP/1.1 协议中「浏览器客户端在同一时间，针对同一...

2018-12-07 18:16:35 190

原创网络基础02 HTTP缓存

WEB缓存分类Web缓存大致可以分为：数据库缓存、服务器端缓存（代理服务器缓存、CDN缓存）、浏览器缓存。浏览器缓存也包含很多内容：HTTP缓存、indexDB、cookie、localstorage 等等。强缓存和协商缓存强缓存：可以理解为无须验证的缓存策略。对强缓存来说，响应头中有两个字段Expires/Cache-Control来表明规则。协商缓存：缓存的资源到期了，并不意味着资源...

2018-12-05 19:09:54 74 2

原创前端练习11 手写实现parsenInt方法

题目手写parseInt的实现：要求简单一些，把字符串型的数字转化为真正的数字即可，但不能使用JS原生的字符串转数字的API，比如Number()实现这道题考察的知识点有下面几个方面：1 parseInt的使用parseInt接受两个参数，第一个参数s是要转换的数字或者字符串，第二个参数radix是指定的转换的基数，介于2和36之间因此需要对两个参数都进行校验，按照题目要求，需要对如果...

2018-12-05 11:21:51 647

原创前端练习10 连续子串最大和

求连续子串最大和的练习。

2018-12-04 21:55:13 583

原创前端练习09 同字母异序

题目同字母异序指的是两个字符串字母种类和字母的数量相同，但是顺序可能不同。完成isAnagram，接受两个字符串作为参数，返回true或者false表示这两个字符串是否同字母异序。例如：isAnagram(&quot;anagram&quot;, &quot;nagaram&quot;) // =&amp;gt; return true.isAnagram(&quot;rat&quot;,

2018-12-04 21:46:57 151

转载 Vue提高17 Vue响应式原理

原文地址 - 从零开始 - Vue 响应式原理白话响应式过程简单来说，依赖收集的过程是：在组件init的过程中，将data中的属性添加getter/setter方法在组件渲染过程中（render函数执行时），每个组件实例内部会实例化一个Watcher对象，data中的属性会被touch，触发getter方法，记录组件和属性的对应关系当属性更新时，访问setter方法，会调用对应的wa...

2018-12-04 16:29:22 85

空空如也

多拉斯基的留言板

空空如也