Blog
Blog copied to clipboard
学习笔记和技术输出
最近在整理面试资源的时候,发现一道有意思的题目,所以就记录下来。 ### 题目 如何实现 multi(2)(3)(4)=24? 首先来分析下这道题,实现一个 multi 函数并依次传入参数执行,得到最终的结果。通过题目很容易得到的结论是,把传入的参数相乘就能够得到需要的结果,也就是 2X3X4 = 24。 ### 简单的实现 那么如何实现 multi 函数去计算出结果值呢?脑海中首先浮现的解决方案是,闭包。 ```javascript function multi(a) { return function(b) { return function(c) { return a * b...
# Vue源码系列--初始化 最近在看 Vue 的源码架构,打算在公司组织 Vue 源码的分享会,所以准备做一系列关于 Vue 源码的技术输出。 ## 目录结构 先来大致看下 vue 目录结构,这里只列出 src 目录下的文件结构。 ``` ├── src ├── compiler -------------------------------- 编译器代码,将 template 模板编译成 render 函数 ├── core ------------------------------------...
先来明白些概念性内容。 ## 进程、线程 * 进程是系统分配的独立资源,是 CPU 资源分配的基本单位,进程是由一个或者多个线程组成的。 * 线程是进程的执行流,是CPU调度和分派的基本单位,同个进程之中的多个线程之间是共享该进程的资源的。 ## 浏览器内核 * 浏览器是多进程的,浏览器每一个 tab 标签都代表一个独立的进程(也不一定,因为多个空白 tab 标签会合并成一个进程),浏览器内核(浏览器渲染进程)属于浏览器多进程中的一种。 * 浏览器内核有多种线程在工作。 * GUI 渲染线程: * 负责渲染页面,解析 HTML,CSS 构成 DOM 树等,当页面重绘或者由于某种操作引起回流都会调起该线程。 * 和...
在上篇文章中,遗留了两个问题: * arguments 存在性能问题 * call 比 apply 速度更快 本篇文章将会对这两个问题进行详细的分析。 ### arguments 存在性能问题 arguments 是存在于函数内部用于存储传递给函数的参数的类数组对象,在函数被调用时创建。arguments 是类数组对象,只拥有 length 属性,但是可以在函数内部转换为数组。 ```javascript function test() { var args = Array.prototype.slice.call(arguments); console.log(args); // ["白展堂", "吕秀才"]...
### 前言 经常会看到这样的面试题,让面试者手动实现一个 map 函数之类的,嗯,貌似并没有什么实际意义。但是对于知识探索的步伐不能停止,现在就来分析下如何实现 map 函数。 PS: 关于 underscore 源码解读注释,详见:[underscore 源码解读](https://github.com/webproblem/Blog/blob/master/源码解读/underscore/Underscore.1.8.3.analysis.js)。 ### Array.prototype.map 先来了解下原生 map 函数。 map 函数用于对数组元素进行迭代遍历,返回一个新函数并不影响原函数的值。map 函数接受一个 callback 函数以及执行上下文参数,callback 函数带有三个参数,分别是迭代的当前值,迭代当前值的索引下标以及迭代数组自身。map 函数会给数组中的每一个元素按照顺序执行一次 callback 函数。 ```javascript var arr =...
![image](https://user-images.githubusercontent.com/20440496/47947861-d7310000-df5f-11e8-9f53-9717d2d093cc.png) ### 前言 前段时间看到过一道实现数组乱序的面试题,也在《如何轻松拿到淘宝前端 offer》一文中看到作者提到数组乱序的问题,竟然还涉及到 v8 引擎方面的知识,正好近期在拜读 underscore 的源码,自己也没有了解过这方面的知识点,在此就总结下关于数组乱序的知识。 ### 面试题 看到的面试题大致是这样的:```var arr = ['a', 'b', 'c', 'd', 'c']; 实现数组乱序``` 。 首先,通过题目可以看出,可能存在一个小陷阱,数组中存在两个 'c' 元素,我想这并不是面试官或者出题人无意打错字,可能是想顺便考察下面试者对数组去重的掌握情况。当然了,这个小细节也可以忽略直接进入实现乱序功能。 对于有代码洁癖的开发人员来说,是不允许自己的程序中出现相同的元素数组值的,所以我们先把数组去重好了。 ```javascript arr = [...new Set(arr)];...
首先要清楚 JavaScript 中的相等分为宽松相等(==)和严格相等(===)。宽松相等在比较值的时候会先进行类型的隐式转换,严格相等下如果比较值的类型不一致,那么就判定比较值不全等。如果比较值是引用类型,宽松相等和严格相等就不能直接判断出值是否相等了(引用类型浅拷贝比较值除外,也就是比较值指向的是同一引用地址),原因是对于任意两个不同的非原始对象,即便他们有相同的结构,都会计算得到 false 。 ```javascript var num = 1; var str = '1'; console.log(num == str); // true console.log(num === str); // false var obj1 = {name: '白展堂'}; var...
### 前言 之前有碰到过一些关于对 MVC/MVP/MVVM 模式理解的面试题,以及它们之间的异同,这里就做下简单的笔记。 由于软件架构设计模式的知识点理解起来会比较吃力,网上也很少有较权威的讲解文章,所以这里的笔记可能会存在知识点比较浅显或者错误的理解,待以后有深刻的理解后再修正,这里只记录当前对 MV* 模式的理解。 需要注意的是,这种 MV* 模式和设计模式是有区别的。MV* 模式是一种管理与组织代码的学问,其本质是一种软件开发的模型。而设计模式是在解决一类问题的基础上总结出来的解决方案,是具体写代码的方式。 且前后端的 MV* 模式是不相同的,不能混为一谈。以 MVC 模式为例区分前后端之间的区别如下: ![前后端MVC](https://user-images.githubusercontent.com/20440496/48963506-df181900-efce-11e8-9af8-b3a0be827967.png) ### MVC/MVP/MVVM 是什么?之间的异同又是什么? #### MVC ![image](https://user-images.githubusercontent.com/20440496/48963510-eb03db00-efce-11e8-9afc-70a0fdad0ea3.png) MVC 分为 3 个模块,Model(数据层),View(视图层),Controller(控制器)。模块之间的依赖关系如下: * Model:...
## 简介 AlloyFinger 是由腾讯前端团队 AlloyTeam 出品的一个小巧轻量级的移动端手势库,整个手势库的代码不超过400行,却支持绝大多数的手势操作,能够满足日常的开发需求。AlloyFinger传送门: [AlloyFinger](https://github.com/AlloyTeam/AlloyFinger)。 ## JavaScript 移动端触摸事件 手机移动端浏览器提供了4种触摸事件:touchstart,touchmove,touchend,touchcancel,分别对应的是手指触点刚接触屏幕时触发事件,手指触点在屏幕上移动时触发事件,手指触点移开屏幕时触发事件以及被系统中断时触发事件(按 Home 键返回主屏等操作)。 这里要说明下,移动端浏览器也支持部分 PC 端带有的事件,比如 click 事件。但是在移动端上,click 事件会存在延时触发的情况,大概延时300ms。 ### 移动端300ms延时触发 click 事件 在移动端为什么click事件会存在延时触发的情况呢?究其原因,是因为苹果公司在早期发布iphone的时候,采用了双击缩放网页的设计。当用户手指点击一次屏幕时,浏览器不能立即判定用户操作是单击操作还是双击操作,而是延迟了300ms,以判断用户是否再次点击了屏幕,如果300ms之内没有再次点击屏幕就判定为单击事件,才会去触发click事件。 ## 源码分析 AlloyTeam 团队为 AlloyFinger 打造了多个能够适用不同技术栈中的手势库版本,能够方便的使用在...