Blog
Blog copied to clipboard
webproblem
学习笔记和技术输出
最近在整理面试资源的时候，发现一道有意思的题目，所以就记录下来。 ### 题目 如何实现 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 =...
 ### 前言 前段时间看到过一道实现数组乱序的面试题，也在《如何轻松拿到淘宝前端 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/MVP/MVVM 是什么？之间的异同又是什么？ #### MVC  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 打造了多个能够适用不同技术栈中的手势库版本，能够方便的使用在...