yfm120750310的博客

组件化组件的基本概念和基本组成部分为组件添加JSX语法组件的基本概念和基本组成部分组件区别于模块，区别于对象，组件是和ui强相关的东西，它既是对象又是模块，它可以以树形结构来进行组合，并且有一定的模板化的配置的能力。看一下组件和对象的区别：对象的三要素是属性、方法和继承关系。组件在此基础上又多了一些别的概念，其中最重要的是children，没有children就没办法形成树形结构，没有树形结构描述界面的能力就差了很多。组件在对象的基础上加了这么多语义相关的概念，使得组件变成一种非常适合描述ui的

XML和SGMLHTML——XML和SGMLnbsp使用破坏语义，还是要用white space来进行空格的表示lt 尖括号转译HTML标签的语义¡&<"&#161;&amp;&lt;&quot;DOM APIelemet：注意：parentElement和parentNode是百分百相等的。insertAfter可以用appendChild和insertBefore来实现，所以这里就没有额外定义api。事件API冒泡和捕获

CSS2.1语法css2.1语法文档：https://www.w3.org/TR/CSS21/grammar.html#q25.0看下第一条产生式：在这里 charset就是@charset的结构。然后允许出现若干个import，它一定在charset之后，但是在其他的规则之前。接下来支持一个长列表，这个长列表里面有三种结构：ruleset、media和page，其他的都是空白符号。ruleset 就是普通的css规则media就是media标签page主要用于打印的信息CDO、CDC是

range对象实现DOM精确操作Range定义使用方法使用场景CSSOMDOM操作的实现caseMDN接口文档：https://developer.mozilla.org/zh-CN/docs/Web/API/RangeRange定义我们先来看下MDN对range对象的定义：Range 接口表示一个包含节点与文本节点的一部分的文档片段。使用方法我们可以用 Document 对象的 Document.createRange 方法创建 Range，也可以用 Selection 对象的 getRange

手写实现基础的reactiveproxy的基本用法模仿reactive实现原理reactive基础上实现调色盘caseproxy的基本用法看一下MDN对proxy的定义：Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。语法：const p = new Proxy(target, handler)所以根据proxy的特性，我们可以看到，使用了proxy，我们代码的预期性会变差。看一下proxy的基本用法：let object = { a:1,

字符串算法字符串分析算法字典树字符串分析算法字典树——大量搞重复字符串的存储与分析KMP——在长字符串里找模式Wildcard——带通配符的字符串模式正则——字符串通用模式匹配状态机——通用的字符串分析LL LR——字符串多层级结构分析字典树看一下基础的字典树生成方法：<script> let $ = Symbol("$") class Trie { constructor(){ // 用Object.create的

前端中的AST抽象语法树问题四则运算正则表达式词法分析语法分析完整代码github地址:https://github.com/feddiyao/Frontend-05-Template/tree/master/Week%2003四则运算首先明确，此次的代码都是基于LL的语法分析来实现的，实现的是四则混合运算的功能，先看下定义：TokenNumber：· 1 2 3 4 5 6 7 8 9 0 的组合Operator:+ - * / 之一WhiteSpace:<SP>L

寻路问题地图编辑器地图编辑器首先实现一个地图编辑器，随着鼠标在页面上的点击滑动可以进行地图的绘画，并给出了一个save按钮来进行编辑后的地图内容的保存<style> .cell { display: inline-block; line-height: 7px; width: 6px; height: 6px; background-color: gray; border-bottom:

训练营第一课tictactoe需求实现红绿灯需求ui设计功能实现tictactoe需求就是一个三子棋的游戏，双方交替落子，率先先连成三子则获胜。实现用一个list来进行棋盘格子的布局，编写对应的show方法<style> .cell { width: 100px; height: 100px; background-color: green; display: inline-block; bord

toyReact框架搭建环境配置JSX 原理和关键实现我们之前在博客上有提到 react的教程中tic-tac-toe游戏的案例，那么在篇博客中，我们主要要实现的是搭建自己的toyReact框架，将tic-tac-toe在toyReact框架中跑起来。环境配置包安装：npm install --save-dev webpack webpack-clinpm install --save-dev babel-loader @babel/core @babel/preset-envnpm insta