手撕 new、call、apply、bind,然后再实现一遍

虽然在工作中, callapply 和 、 bind 不算很常用,但是想必大家在面试中还是会经常碰到这类题目的。同时,在阅读一些比较好的开源项目的时候,会发现里面会经常地使用上述 api 去复用原有的方法,达到节约内存和优化代码的效果。接下来,就让我带你简单又详细的手撕(剖析)和自己实现 newcallapplybind

阅读更多

大话 JavaScript 继承

在面向对象编程中,为了能更好的复用以前的开发代码,缩短开发的周期,提高开发的效率,继承是一种很好的方法。它可以让我们使用继承的方式,去使用原有对象的一些方法或者属性。在 JavaScript 这么灵活的语言之中,常见的继承方式有六种,现在我们就来一个一个的过一遍。

阅读更多

React源码笔记——jsx为何物

jsx 为何物

最近开始看点 React 的源码,想找点地方输出一些笔记。以前写过 Reactjsx,如果对 jsx 不太熟悉或者想回忆回忆的可以移步去看看。

用了那么久的 Reactjsx 简直就是天天打照面的了。然鹅用得再熟,还是只是停留在形而上而已,像面试的时候,被问到 jsx 的本质是啥?还能不假思索说出是一个 js 对象,那这个对象怎么来的,是通过什么方式拓展了 js 这种类似 html 语法的能力的,就开始支支吾吾了。为了知其然知其所以然,也为了能满足自己的好奇心,我不由得想像小时候拆电话一样拆开 React 的源码一探究竟。最后拼回去还能不能打电话就不是我考虑的事了(老爸对不起,我下次不敢了)。

阅读更多

使用 Taro 2.x 跨平台开发的一些姿势

Taro框架

Taro是一套遵循React语法规范的多端解决方案。通过Taro编译工具,将源代码编译出不同端(微信 / 京东 / 百度 / 支付宝 / 字节跳动 小程序、快应用、H5、React-Native 等)的运行代码。

听着让人挺激动的,write once, run anywhere,从我开始写JQuery时就已经喊得响亮,彼时还只是能处理下不同浏览器中js的兼容性问题。如今Jq英雄迟暮,以ng、vue和react三大精神小伙为首的前端框架开始飞速发展,已然不满足于前端浏览器的这一亩三分地了…

但是别急着徜徉,理想虽然美好,现实却是很残酷的。随着开发的深入,发现了诸多跨平台的坑点,故整理了一下,才有了这篇水文。

阅读更多

数据结构——链表

链表

简单说几句

在前端开发中,经常接触到的线性结构数组字符串,还有ES6中的SetMap。这其中最常用的,应该就数数组了。我们今天要说到的链表也是数据元素的线性集合,跟数组和字符串不同的是,链表元素的线性顺序不是由他们在内存中的物理位置给出的,而是由他一个又一个的节点的指向串起来的序列表现出来的。这样设计的目的是为了解决数组等数据结构需要预先知道数据大小的缺点,开发js的同学可能不太了解,因为js中的数组是支持动态扩容的,(感兴趣的朋友移步这篇好文『v8引擎下的“数组”底层实现』)

链表在插入的时候很快,可以达到O(1)的复杂度,但他的访问时间是线性的,更快的访问,如随机访问,是不可行的。与链表相比,数组具有更好的缓存位置。
今天就来说说这个链表,以及它在js中的实现。

阅读更多

LRU缓存淘汰算法

简单说几句

各位看官先不要被这个什么 LRU 给劝退了,这个东西其实很简单。LRU 就是 Lastest Recently Used,即最近最少使用,说人话就是数据中,如果数据最近被访问过,那么将来被访问的几率也更高 ,优先淘汰最近没有被访问到的数据。

放张图:

阅读更多

十分钟——带你了解webpack的主要配置

简单说几句

webpack本质上是一个打包工具,它会根据代码的内容解析模块依赖,帮助我们把多个模块的代码打包。借用webpack官网的图片。

webpack

阅读更多

十分钟,带你玩转reduce

简单说几句

Array.prototype.reduce是个功能很强大,也很有意思的数组方法。以前没深入学习的时候,只是让他来做做累加,处理一些简单数据的合计功能。当我深入挖掘的时候才发现他可以做的东西还有很多,比如拼接字符串、拼接数组、过滤和映射数组、整合对象等骚操作。

这里利用十分钟的时间,详尽地阐述reduce的作用,还有一些用例,让大伙可以在优雅实现功能的同时,还能节省开发时间,早点下班[手动滑稽]。

阅读更多

十分钟,带你了解React 16.8的useState和useEffect

HooksReact 16.8新增的特性,并且他是向后兼容的,facebook也坦言没有计划会在React中移除class组件。你完全可以不使用hooks,一直使用class组件。

概念

React hooks允许你在非class组件中使用stateReact其他的特性:propscontextrefs 以及生命周期
Hook本质上是一些函数,可以在函数组件中“钩入”其他React的特性,使得你不用使用class也可以使用React。值得注意的是,hooks是不能在class组件中使用的。

阅读更多

走进React——jsx

用React开发时,最具标识性的,估计就是jsx语法了。它并不是HTML,也不是字符串,官方称之为——一个javascript的语法拓展。在用react开发中,个人感觉jsx能极大地提升开发者的开发体验。在传统的开发中,都提倡将视图与逻辑文件分离,而React则是通过一个称之为“组件”的东东来存放视图和逻辑,将业务拆分为一个个的小模块,更多组件的概念在后续的文章中也会放出来跟大家探讨。

开始前先说几句

本次所有示例的代码的html结构都如下

1
<div id="root"></div>

ok,交代完毕,开始步入正题。

阅读更多