blog
blog copied to clipboard
yinguangyao
关于 JavaScript 前端开发、工作经验的一点点总结。
## 前言 前端组件化一直是老生常谈的话题，在前面介绍 React 的时候我们已经提到过 React 的一些优势，今天则是带大家了解一下组件设计原则。 ## jQuery 插件 在开始讲 React 组件之前，我们还是要先来聊聊 jQuery。在我看来，jQuery 插件就已经具备了组件化的雏形。 在 jQuery 还大行其道的时代，我们在网上可以到处一些 jQuery 插件，里面有各种丰富的插件，比如轮播图、表单、选项卡等等。 ### 组件？插件？ 组件和插件的区别是什么呢？插件是集成到某个平台上的，比如 Jenkins 插件、Chrome 插件等等，jQuery 插件也类似。平台只提供基础能力，插件则提供一些定制化的能力。 而组件则是偏向于 ui 层面的，将...
## 前言 很多前端开发都知道面向对象编程（OOP），却比较少了解 AOP（面向切面编程）这个概念。如果你有使用过 Spring 或者 Nestjs 之类的框架，那就已经接触过 AOP 了。 AOP 是 OOP 的一种补充，前面介绍过的装饰器和 Proxy 都是可以实现 AOP 的一种方式，这也是为什么我把这节放到后面才来讲。 本节课将会重点介绍 AOP（面向切面编程）、IOC（控制反转）和 DI（依赖注入）、Middleware（中间件）相关的概念与实践。 ## 什么是 AOP？ ### 面向切面编程 > AOP 是通过预编译方式和运行期动态代理实现在不修改源代码的情况下给程序动态统一添加功能的一种技术。 >...
在我们平时的开发中，if else是最常用的条件判断语句。在一些简单的场景下，if else用起来很爽，但是在稍微复杂一点儿的逻辑中，大量的if else就会让别人看的一脸蒙逼。 如果别人要修改或者新增一个条件，那就要在这个上面继续增加条件。这样恶性循环下去，原本只有几个if else最后就有可能变成十几个，甚至几十个。 别说不可能，我就见过有人在React组件里面用了大量的if else，可读性和可维护性非常差。（当然，这个不算if else的锅，主要是组件设计的问题） 这篇文章主要参与自《代码大全2》，原书中使用vb和java实现，这里我是基于TypeScript的实现，对书中内容加入了一些自己的理解。 ## 从一个例子说起 ### 日历 假如我们要做一个日历组件，那我们肯定要知道一年12个月中每个月都多少天，这个我们要怎么判断呢？ 最笨的方法当然是用if else啊。 ```javascript if (month === 1) { return 31; } if (month === 2)...
## 前言 随着 React/Redux 的火热，函数式编程也逐渐被带入了前端的应用领域，甚至还诞生了 elm、ClojureScript 等基于 JavaScript 的函数式语言。熟练掌握这节课的内容，对后续学习函数式编程会有一定帮助。 ## 1. 高阶函数 高阶函数也是函数式编程中的一个概念，使用范围比较广泛。在现在很火的 React 中，高阶组件就是基于高阶函数发展而来。 先看一下高阶函数的定义： > 高阶函数，又称算子(运算符)或泛函，包含多于一个箭头的函数。 在数学和计算机科学中，高阶函数是至少满足下列一个条件的函数: 1. 接受一个或多个函数作为输入 2. 输出一个函数 举一个简单的例子： ``` const add = function(x, y,...
## 1. 前言 随着 ES6 的发布，JavaScript 语法也越来越趋于成熟，新的提案也在不断地提出。 ECMA 提案一共有四个阶段，处于 Stage3 的都需要我们持续关注，以后很可能就会被纳入新标准中。 今天主要来深入讲解一下动态 import 和 Top-level await。  ## 1. Dynamic Import 如果你写过 Node，会发现和原生的 `import/export` 有个不一样的地方就是 Node 支持就近加载。 Node 允许你可以在用到的时候再去加载这个模块，而不用全部放到顶部加载。 而...
![image_1e4411le1meo5qg1v8nllo7ov1g.png-1150.8kB][1] > 只听空相大声道：“请道长立即禀报张真人，事在紧急，片刻延缓不得！”那道人道：“大师来得不巧，敝师祖自去岁坐关，至今一年有余，本派弟子亦已久不见他老人家慈范。” ## 前言 在武侠小说中，经常看到这样的桥段。某位武林人士前来拜访德高望重的帮派掌门，往往需要经过手下弟子的通报。如果掌门外出或者不想见来人，就会让弟子婉拒。 今天要讲的 Proxy 和这个有异曲同工之妙。顾名思义，Proxy 的意思是代理，作用是为其他对象提供一种代理以控制对这个对象的访问。 > 本文会涉及到 [Proxy][2] 和 [Reflect][3]、[Function][4]、[扩展运算符][5] 等知识，主要以实践为主，对语法不会进行详细地讲解，建议配合阮一峰的 [ES6入门][6] 中相关章节服用。 ![code.png-74.3kB][7] ## 1. Proxy 提供了哪些拦截方式？ Proxy 一般是用来架设在目标对象之上的一层拦截，来实现对目标对象访问和修改的控制。Proxy 是一个构造函数，使用的时候需要配合 `new` 操作符，直接调用会报错。 ![image.png-21.9kB][8] Proxy...
## 1. 前言 前几天在知乎看到了一个问题，React 的 Hooks 是否可以改为用类似 vue3 composition api 的方式实现？ 关于 React Hooks 和 Vue3 Composition API 的热烈讨论一直都存在，虽然两者本质上都是实现状态逻辑复用，但在实现上却代表了两个社区的不同发展方向。 我想说，小孩子才分好坏，成年人表示我全都要。 ![image_1e49c6pov12uu1tnirjl1vl3o6ql.png-64kB][1] ## 2. 你不知道的 Object.defineProperty 那今天我们来讨论一下怎么用 React Hooks 来实现 Vue3...
关于编程学习
本文来自工业聚在 React China 论坛的分享。 ## 问答 1. 工业聚大大您好。前一阶段参加了几次面试，有几个公司面试反馈说前端掌握的深度不够，这个问题我感觉很令人费解，但是也是我需要加深的方向。 所以我想请问工业聚大大，向我们这种毕业1-3年的前端，该怎么做去加强自己在前端领域的深度呢，同时又能保持基本的技术广度呢？感谢您的回答! > 不管是技术深度还是广度，都依赖于一个扎实的技术基础。如果还没有通读过《JavaScript权威指南》、《JavaScript 高级程序设计》、《JavaScript DOM编程艺术》等经典书籍，可以开始啃起来了。 > 然后，可以开始实现常见的 UI 和交互效果，比如轮播图，移动端的 swiper，Tab 切换，下拉刷新等等。每一种效果，都有从低到高的完成度。比如。轮播图里，有无小圆点切换，有无左右箭头，是否支持定时轮播，是否可以无限循环地轮播，是否支持移动端 touch 事件等等，都反映了你写的效果的完备性和完成度。不断地提高它们，同时也就打磨了 JS 编程能力。 > 其他还有模板引擎（templte engine），lodash/underscore，jquery/zepto，react/vue 等不同类型的库或框架，先不看它们的源码，按照你对其 API 的理解，仿写一个最小可运行版本。再去看它们源码，印证你的实现跟原版实现的差异。 >...
# 浅谈react diff实现 这是一篇硬核文，因此不会用生动幽默的语言来讲述，这篇文章大概更像是自己心血来潮的总结吧哈哈哈哈。 有很多文章讲过 react 的 diff 算法，但要么是晦涩难懂的源码分析，让人很难读进去，要么就是流于表面的简单讲解，实际上大家看完后还是一头雾水，因此我将 react-lite（基于 react v15） 中的 diff 算法实现稍微整理了一下，希望能够帮助大家解惑。 对于 react diff，我们已知的有两点，一个是会通过 key 来做比较，另一个是 react 默认是同级节点做diff，不会考虑到跨层级节点的 diff（事实是前端开发中很少有DOM节点跨层级移动的）。  ## 递归更新 首先，抛给我们一个问题，那就是 react 怎么对那么深层次的 DOM...
## 前言 JavaScript 中的类型转换一直都是让前端开发者最头疼的问题。前阵子，推特上有个人专门发了一张图说 JavaScript 让人不可思议。 ![image_1dm5s9qr814dvnsi96laugvg9.png-51.4kB][1] 除了这个，还有很多经典的、让 JavaScript 开发者摸不着头脑的类型转换，譬如下面这些，你是否知道结果都是多少？ ``` 1 + {} === ? {} + 1 === ? 1 + [] === ? 1 + '2' ===...