codingmeup

### css CSS 容器查询 @container 有点类似于 CSS 的媒体查询 @media ，只是它将根据元素的父容器（或祖先元素）的尺寸（size）或样式（style）来调整自己或自己后代元素的样式规则。在没有 CSS 容器查询，Web 开发者为了能在不同容器下调整 UI，大多都是依赖于媒体查询来做。也就是说，有了该特性之后，不需要再依赖视窗大小加添加类名的方式来调整UI :has()伪类代表一个元素，如果作为参数传递的任何选择器至少与一个元素相匹配！也就是:has()中的选择器至少匹配一个元素时才会被选中 ```js figure img { aspect-ratio: 21 / 9; border: 5px solid #3f51b5; } figure:has(figcaption) img...

## 需要注意的HTML写法 HTML 学的是用法和规范, 可以使用emmet 快速写 #### 常见的规范的链接: https://juejin.im/post/599ececb5188252423583c27 https://github.com/dyygtfx/html-best-practices #### 问题点 * a标签不可以嵌套交互式元素 * 块级元素可以包含内联元素和某些块级元素，内联元素不能包含块级元素，只能包含内联元素 * p标签不能包含块级元素 * 不可包含块级元素的标签 * li标签可以包含div以及ul，ul的子元素应该只有li * 元素并排（块级和块级并列，内联和内联并列) * 字符实体引发的错误 * 错误的使用 role 属性...

深入Babel ============== ### 前言 [一口(很长的)气了解 babel](https://juejin.im/post/5c19c5e0e51d4502a232c1c6) babel 架构图  1. @babel/core核心 这也是上面说的‘微内核’架构中的‘内核’。对于Babel来说，这个内核主要干这些事情 - 加载和处理配置(config) - 加载插件 - 调用 Parser 进行语法解析，生成 AST - 调用 Traverser 遍历AST，并使用访问者模式应用'插件'对 AST 进行转换 - 生成代码，包括SourceMap转换和源代码生成 2....

## 前端及前端编译原理 JS 写 JS 编译器 ### 一、为什么要用JS写JS的解释器 接触过小程序开发的同学应该知道，小程序运行的环境禁止`new Function`，`eval`等方法的使用，导致我们无法直接执行字符串形式的动态代码。此外，许多平台也对这些JS自带的可执行动态代码的方法进行了限制，那么我们是没有任何办法了吗？既然如此，我们便可以用JS写一个解析器，让JS自己去运行自己。 在开始之前，我们先简单回顾一下编译原理的一些概念。 ### 二、什么是编译器 说到编译原理，肯定离不开编译器。简单来说，当一段代码经过编译器的词法分析、语法分析等阶段之后，会生成一个树状结构的“抽象语法树（AST）”，该语法树的每一个节点都对应着代码当中不同含义的片段。 比如有这么一段代码： ``` const a = 1 console.log(a) ``` 经过编译器处理后，它的AST长这样： ``` { "type": "Program", "start": 0, "end":...

### 哪些东西Babel不做 Babel **只是转译新标准引入的语法** 比如： - 箭头函数 - let / const - 解构 **哪些在 Babel 范围外？对于新标准引入的全局变量、部分原生对象新增的原型链上的方法，Babel 表示超纲了。对于上面的这些 API，Babel 是不会转译的，需要引入 polyfill 来解决。** - 全局变量如（Promise Symbol WeakMap Set） - includes - generator...

#### compose ```js /** * Composes single-argument functions from right to left. The rightmost * function can take multiple arguments as it provides the signature for * the resulting composite...

### combineReducers ```js import { ActionTypes } from './createStore' import isPlainObject from 'lodash/isPlainObject' import warning from './utils/warning' // redux中要求reducer必须一定要有返回值，如果没有值回值，就会抛这个错误 function getUndefinedStateErrorMessage(key, action) { var actionType = action && action.type var...

### bindActionCreators ```js //bindActionCreator 对actionCreator做了一层包装，将actionCreator返回的action，用 dispatch分发出去 function bindActionCreator(actionCreator, dispatch) { return (...args) => dispatch(actionCreator(...args)) } //bindActionCreator 的作用，是把每一个actionCreator和 dispatch绑定起来， /** * Turns an object whose values are action creators, into an...

### applyMiddleware ```js import compose from './compose' /** * Creates a store enhancer that applies middleware to the dispatch method * of the Redux store. This is handy for a...

### index.js ```js import createStore from './createStore' import combineReducers from './combineReducers' import bindActionCreators from './bindActionCreators' import applyMiddleware from './applyMiddleware' import compose from './compose' import warning from './utils/warning' /* * This...