封装通用组件

主要思想

封装组件的思想主要是将前端页面/业务逻辑等按模块方式进行抽离，复杂的页面布局/逻辑等放入独立写的模块内部，使用详情组件只需要传入组件定义的数据/方法/chidlren等就可以完成相应功能开发。

封装组件主要分三类：

1. 普通展示型组件(函数式组件)
2. 纯逻型组件(容器组件)
3. 通用业务组件(以基础组件/第三方组件为基础+一定的业务逻辑)

封装普通展示型组件

通过函数式组件实现，比较轻量，不带组件的生命周期，不带内部state，后期也可以通过React Hooks添加内部状态数据的控制

demo

前言

经常在面试中被问到“如何清除浮动？”、“为什么 overflow: hidden 可以清除浮动？”等等比较基础的问题。虽然这些题目案在各种写面试题的文章中都有提供答案，但这种教科书式的问答肯定不是我们的目的，与其记住答案不如彻底掌握其核心原理——块级格式化上下文（BFC）。

这篇文章主要就是彻底分析清楚BFC原理、总结BFC经典场景中的用法，最后在实践中总结BFC在H5、小程序开发中的应用。

前言

在前一篇文章中遇到的vue路由组件缓存问题已经解决并对项目进行了适当的优化改进，但是并未开探寻究vue-router的源码，这篇就继续上次的话题，深入分析vue-router源码中对导航守卫、动态参数匹配、过渡效果和异步组件等的实现。

本文分析的源码为vue-router@3.1.3，vue@2.6.11

前言

最近在整体地复习一遍现代前端必备的核心知识点，将会整理成一个前端分析总结文章系列。这篇是其中的第三篇，主要是总结下JS中原型与继承等核心知识点。（另外，此系列文章也可以在语雀专栏——硬核前端系列查看）。

本文首发自迪诺笔记，转载请注明出处😁

引言

JavaScript的模块机制其实是借鉴的其他程序设计语言的, 如Java中package的概念, import java.util.ArrayList;; package就是逻辑上相关的代码组织到同一个包内，包内是一个相对独立的作用域，不用担心命名冲突等等, 当需要在外部使用的时候直接import相应的package即可。

由于JavaScript在设计之初的定位原因, 并没有提供类似模块的功能, 随后便出现了各种模拟类似功能的规范。到今天(2018-5-28)ES6已经十分普及, ES6的模块机制已经大规模使用, 我们完全可以使用ES6提供的模块化规范(机制)。