maho 分析阅读docute 分析阅读tsup 分析阅读POI 源码阅读SAO 源码阅读

更好的观看体验移步飞书[链接]时间花费时间一天两个小时左右，读文档用了两个多小时，一共花费五天 10 个小时的时间，基本把大概的逻辑（主线）理解清楚了。写文档两个小时。读 poi 整体感受比 sao 略微的费劲一些，需要熟悉 webpack 的操作配置。POI 是什么？就是把webpack 封装了一层的工具，可以本地启服务和打包。省...

SAO 源码阅读更好的观看体验，移步飞书[链接]SAO 是什么？代码仓库地址 [链接]SAO 是一个脚手架，不同于 vue/react  这类的cli 脚手架， 可以通过 sao 新建很多个模板，根据模板批量生产初始化代码。参考这里 [链接]sao [nm](https://github.com/saojs/sao-nm) dirname sao react dirname SAO 做了什么模板可以是本地，g...

Uses the API from this great article on 今日诗词API.Feel free to make a PR to add!

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。通俗的解释就是，Vuex 就是为 vue 组件之间进行数据共享而开发的插件。

最近在学three.js，特地整理偶然间碰到的学习资料分享给大家，国内除了大公司，专门学习three.js的太少了，普通的业务前端学它并不会增大面试成功率，react，vue新特性，原理都学不利落呢，谁会去研究这种只是炫，好玩的东西呢

本打算教一步步实现koa-router，因为要解释的太多了，所以先简化成mini版本，从实现部分功能到阅读源码，希望能让你好理解一些。希望你之前有读过koa源码，没有的话，给你链接

实现下面这道题中的machine函数 {代码...} 原型写法 维护一个数组，异步就push函数，不是异步就push字符串 {代码...} es6写法 维护一个queue队列数组，里面全部是构造函数，第一个参数代码是否异步，第二个是callback {代码...} 比较 数组每一个都是构造函数有点浪费空间

承接上一章 Application函数 {代码...} Emitter Application继承自Emitter Emitter主要是观察订阅者模式，在index.js可以这样写，会出现结果 {代码...} 学习一下Object.create {代码...} a在b的原型链上，b能访问a的属性 单元测试 {代码...} only函数返回新对象，并且只返回包含key，key的值不为null {代码...} {代码......

1.闭包加作用域问题 {代码...} 打印结果是99 100 函数声明了两次，有一次覆盖，最后的覆盖了前面的，要是只声明一遍，那么a1()打印的就是100 2.作用域问题 {代码...} 打印 1 1 1 反直觉自带坑的题 3.找鼠标最近的a标签 {代码...} 4.写vDom 用对象表示dom结构 根据json生成dom dom变化记录变化 在真实dom更新变化 vdom好...

网上有很多bolg分析Koa源码阅读的项目，但是我依然想写，因为每个人和每个人的表述语言不一样，每个人和每个人的侧重点也不一样。写这篇希望给不用读源码的人，一眼就能很轻松的看明白。so，开始吧

下载 去github上下载Vue {代码...} 运行起来 rollup + flow vue使用使用rollup打包，flow规范数据类型 rollup可以先用webpack套用，读起来差不多，时间有限，毕竟只有5分钟，这个就不用去看rollup文档了 入口 打开package.json我们看scripts配置 {代码...} 找到scripts/config.js打开 根据配置TARGET的不同会选择不同的c...

里面主要含有一个对象inputFileSyste，options，输出的outputOptions，dependencyFactories等给每次打包一个hash值，代表唯一性

我们先看一下 compilation是什么？是一个很大的对象打印key值 {代码...} 我们看有熟悉的chunks，entries，options，这些是Compilation定义的属性 {代码...} 从这一堆的模块引入里，也可以猜出Compilation主要做了Modules变成Chunks编译的过程 里面有一些方法 1.对模块的处理，创建搜索添加构建/模块依赖处理，添加模块依...

再通俗一点的解释： 比如当你api.AutomaticPrefetchPlugin你能调用AutomaticPrefetchPlugin文件下的方法 这个和上面的不同在于上面的是挂在webpack函数对象上的

NodeEnvironmentPlugin还做了watch处理，NodeWatchFileSystem是webpack之所以能根据变化自己更新的核心，好凌乱，我们先从那个坑跳出来

原本写的误操作被吞了，下面是代码记录这个模块主要做了缓存文件操作 {代码...}

进入webpack.js {代码...} compiler太复杂我们先看NodeEnvironmentPlugin {代码...} 打开插件NodeJsInputFileSystem.js {代码...} graceful-fs就是对node 原生fs 做了一层封装，显得更优雅 总体看来NodeEnvironmentPlugin这个模块就是对文件做了处理，又重新封装了node.js 对fs模块做了以一些处理，文件的输入，输出，缓...

为什么读webpack源码 因为前端框架离不开webpack，天天都在用的东西啊，怎能不研究 读源码能学到很多做项目看书学不到的东西，比如说架构，构造函数，es6很边缘的用法，甚至给函数命名也会潜移默化的影响等 想写源码，不看源码怎么行，虽然现在还不知道写什么，就算不写什么，看看别人写的总可以吧 知道世界的广阔，那么...

Tapable在node_modules插件下git地址上面写的解释Just a little module for plugins就跟没写一样在lib/index.js 文件下

我们看到引入了 对webpack.js {代码...} 进行分析 webpackOptionsSchema是一个很大的json文件，里面规定了 我们随便看一段 {代码...} 这是对你输入options的规定loader的type要求是object$ref是 #/definitions/Externals其实就是本json下的definitions/Externals这样写可以提取公用的配置，避免代码冗余 一共2100行，其...

我们打开bin/cli.js根据上次所返回的Options processOptions(options)这个因为有了上次的基础，比较容易读了,大体逻辑是这样的 先定义一个 outputOptions 空对象 同上次的ifArg一个逻辑，argv还是一个 {代码...} 目前的方式只有一个满足 info-verbosity如果满足的会执行fn, init一系列函数 {代码...} 这个函数直接结果是...

注意了，这里有一个return 也就是这个convert-argv模块的最终返回结果，函数到这里就结束了。接下来我看看一下processConfiguredOptions函数

HighCharts太丑了,有木有HighCharts修改好费劲所以有了这个插件轮子 git地址 使用说明 安装 npm安装 {代码...} yarn安装 {代码...} 结合 react-highcharts使用 {代码...} pink粉色 {代码...} columns {代码...}

很好奇markdown是怎么变成html的,偶然间看到github上的这一篇星星✨很高的源码,就来研究研究下载打开在lib文件夹下的marked.js大概1600行左右的样子,没有组件化,所有的js都是在一个页面,读着很是顺畅哈~(这里没有贬低多个文件的啊,不要生气,嘻嘻😄其实是有的,一个文件就是看着简单)在html引入js <script src="./marked....

打开[链接]:8080/ examples里面的文件都能运行了,Counter,Counter with Hot Reload,Shopping Cart,TodoMVC,FluxChat 这些每一个有很有代表性

传送门vdom原理

模版如下 {代码...} options.render为 {代码...} 对应 {代码...} options.staticRenderFns为 [0] {代码...} 对应的template为 {代码...} render-helpers 下 index.js {代码...} render.js {代码...} 这样this._c就是执行createElementthis._m就是执行renderStatic_v就是执行createTextVNode 在vdom下create-element.js {...

然而通常人们（自以为）使用框架是因为：它们支持组件化；它们有强大的社区支持；它们有很多（基于框架的）第三方库来解决问题；它们有很多（很好的）第三方组件;它们有浏览器扩展工具来帮助调试；它们适合做单页应用。

首先在init.js里调用$mount函数把el #app获取相应dom传递过去 {代码...} entry-runtime-with-compiler.js里在Vue原型上定义$mount方法 {代码...} template(64)和 render(72), staticRenderFns(73) 对应图中所示 render是渲染函数，staticrenderfns是静态树的渲染函数 {代码...} {代码...} children多的放进了staticrende...