codingmeup
codingmeup
## TS 是什么，解决了什么问题，为什么要用TS TypeScript = Type + Script（标准JS）。我们从TS的官方网站上就能看到定义：TypeScript is a typed superset of JavaScript that compiles to plain JavaScript。TypeScript是一个编译到纯JS的有类型定义的JS超集。 **目标：生命周期较长（常常持续几年）的复杂SPA应用，保障开发效率的同时提升代码的可维护性和线上运行时质量** - **从开发效率上看**，虽然需要多写一些类型定义代码，但TS在VSCode、WebStorm等IDE下可以做到智能提示，智能感知bug，同时我们项目常用的一些第三方类库框架都有TS类型声明，我们也可以给那些没有TS类型声明的稳定模块写声明文件，如我们的前端KOP框架(目前还是蚂蚁内部框架，类比dva)，这在团队协作项目中可以提升整体的开发效率。 - **从可维护性上看**，长期迭代维护的项目开发和维护的成员会有很多，团队成员水平会有差异，而软件具有熵的特质，长期迭代维护的项目总会遇到可维护性逐渐降低的问题，有了强类型约束和静态检查，以及智能IDE的帮助下，可以降低软件腐化的速度，提升可维护性，且在重构时，强类型和静态类型检查会帮上大忙，甚至有了类型定义，会不经意间增加重构的频率（更安全、放心）。 - **从线上运行时质量上看**，我们现在的SPA项目的很多bug都是由于一些调用方和被调用方（如组件模块间的协作、接口或函数的调用）的数据格式不匹配引起的，由于TS有编译期的静态检查，让我们的bug尽可能消灭在编译器，加上IDE有智能纠错，编码时就能提前感知bug的存在，我们的线上运行时质量会更为稳定可控。
55、新特性
https://www.zhihu.com/question/376613288
### 调用 setState 之后发生了什么？ #### 回答1 * React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。 * 经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个UI界面。 * 在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染。 * 在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。 #### 回答2 所谓的同步异步， 更准确的说法是是否进行了批处理。 对于React 17来说，批处理是通过标识位来实现的，在合成事件中以及hook中setState方法都是进行了批处理的；由于batchUpdate方法本身是同步的，因此setTimeout会导致标识位的设定不符合预期，从而出现批处理失败（转为同步）的情况；在SetTimeout中我们可以用手动批处理的方式实现批处理（ReactDOM.unstable_batchedUpdates）；因此，React 17的批处理又可以称为半自动批处理。 对于React...
最终场景： 基于模型设计直接生产标准化页面 低代码引擎的几大核心能力：入料、编排、渲染、出码 低代码引擎： 制定统一底层协议，基于标准打造出低代码平台的基础能力，并在此基础上提供定制化能力 ### 架构分层 协议栈 --（实现）--> 低代码引擎 -- (扩展) --> 引擎的生态(包含 插件物料工具链面板配置) --(支撑)--> 低代码平台（宜搭 纪元 表单平台 数据平台） ### 前端技术领域 1. 组件体系： 将页面中所使用的的元素进行原子化封装，通过配置选项让组件具备适应性调整的能 力 2. 可视化搭建设计器：布局可视化、配置可视化、样式可视化 3. 弱工程化：将打包、发布等等各种环节进行弱化，用户只需要所见即所得的关注页面产出...
### imgcook  D2C 核心流程只有 3 步，图层解析、布局分析、DSL 转换生成代码。 1. 图层解析，Design to JSON，提取 Sketch、Figma、PSD、图片等类型设计稿中的元素信息，转换为没有层级结构的、绝对定位的 JSON 描述，主要包括： ○ 节点类型，Div、Image、Text ○ 样式信息，opacity、color、background、fontSize、border 等 2. 布局分析，JSON to JSON，将没有层级结构的、绝对定位的 JSON 描述经过布局分析转换成有层级结构、相对定位的 JSON 描述，主要包括： ○ 父子节点包含关系，DOM层级结构...
# 目前已有的模式 逻辑复用在 React 中是经历了很长的一段发展历程的， mixin -> HOC & render-props -> Hook ### 逻辑重用 相信很多接触过 React Hook 的小伙伴已经对这种模式下组件间逻辑复用的简单性有了一定的认知，自从 React 16.7 发布以来，社区涌现出了海量的 Hook 轮子，以及主流的生态库 react-router，react-redux 等等全部拥抱 Hook，都可以看出社区的同好们对于 Hook 开发机制的赞同。 其实组件逻辑复用在 React...
### 什么是Webpack 可以看做一个模块化打包机，分析项目结构，处理模块化依赖，转换成为浏览器可运行的代码。 - 代码转换: TypeScript 编译成 JavaScript、SCSS,LESS 编译成 CSS. - 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片。 - 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。 - 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。 - 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。 构建把一系列前端代码自动化去处理复杂的流程，解放生产力。 ### Webpack事件流机制 Webpack是基于事件流的插件集合，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是**Tapable**，Tapable是一个类似Node.js的EventEmitter的库,主要是**控制钩子函数的发布与订阅，控制着webpack的插件系统**。Webpack中最核心的**负责编译的Compiler**和**负责创建的捆绑包的Compilation**都是Tapable实例。 Tapable库暴露很多Hook类，为插件提供挂载的钩子 ```js const { SyncHook, //...
```js 1、 寄生组合继承 function Animal (name) { this.name = name || 'Animal'; this.sleep = function(){ console.log(this.name + '正在睡觉！'); } } Animal.prototype.eat = function(food) { console.log(this.name + '正在吃：' + food); };...
15、深浅拷贝
深拷贝：拷贝实例； 浅拷贝：拷贝引用（原对象）。 说深拷贝和浅拷贝之前，我先去了解了下高程书上的JavaScript的变量类型： - 基本类型：undefined、null、Boolean、number、string。变量直接按指存放在栈区内，可以直接访问，所以我们平时把字符串、数字的值赋值给新变量，相当于把值完全复制过去，新变量的改变不会影响旧变量。 - 引用类型：存放在堆区的对象，变量在栈区中保存的是一个指针地址。 例子 let a = 123; let b = a; b = 456; console.log(a);//123 console.log(b);//456  ### 浅拷贝实现 - 函数实现 ```js function shallowClone (source){...
#### 1. Koa 虽然同它哥 Express 说的一样，是 Web Framework。不过从架构功能设计和架构设计上看，它更像它舅舅（原谅我亲戚关系懵了）── Connect。更多是一个中间件框架，其提供的是一个架子，而几乎所有的功能都需要由第三方中间件完成。 #### 2. Express 更为贴近 Web Framework 这一概念，比如自带 Router、路由规则等（在没有剥离bodyParser之前更为贴切）；相比之下 Koa 则更为宽松，光是 Router 就有 20+ 个，自由选择嘛（Home · koajs/koa Wiki · GitHub），更为灵活。 @死马 （Koa...