Skip to content

Latest commit

 

History

History
53 lines (27 loc) · 2.94 KB

进度.md

File metadata and controls

53 lines (27 loc) · 2.94 KB
Raw

1.初探前端工程化--已看完

第二节：

  • webpack 也给我们提供了几种不同的 hash 配置。在配置文件的 output 字段中，我们设置导出的 filename 可以指定 hash，有三个值可以选择。

  • [hash]：整个项目共用同一个 hash 值，只要项目里有文件更改，整个项目构建的 hash 值都会更改。

  • [chunkhash]：同一个模块共用一个 hash 值，就算将 JS 和 CSS 分离，其 hash 值也是相同的，修改一处，JS 和 CSS 的 hash 值都会变。

  • [contenthash]：单个文件单独的 hash 值，只要文件内容不一样，产生的 hash 值就不一样。 可以看出来，选择 contenthash 更有利于缓存效果，所以我们就选择 contenthash。

第五节：CommonJS、AMD、CMD 、ES Modules

第六节：React 是怎么由 JSX 到最终的真实 DOM

2.你不知道的chrome调试技巧--已看完

第六节：

  • 本质上来说 Array.from(document.querySelectorAll('div')) === ?('div')
  • $i
现在的前端开发过程，离不开各种 `npm` 插件，但你可能没有想过，有一天我们竟然可以在 `Dev Tools` 里面来使用 `npm` 插件！


有时你只是想玩玩新出的 `npm` 包，现在不用再大费周章去建一个项目测试了，只需要在 [Chrome插件:Console Importer](https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie/related) 的帮助之下，快速的在 `console` 中引入和测试一些 `npm` 库。


运行 `$i('lodash')` 或者 `$i('moment') ` 几秒钟后，你就可以获取到 `lodash / momentjs` 了:

第十二节： 2.增强 log 的阅读体验

有时即使你 console.log 一个简单的变量，你可能会忘记（或混淆）哪一个是那个。那当你有不同的变量需要打印的时候，阅读起来会更费劲。

假如有这么一堆你想要输出但看起来并不易读的数据

“哪一个值对应哪一个变量来着？”

为了让它变得更加易读，你可以打印一个对象 - 只需将所有 console.log 的参数包装在大括号中。感谢 ECMAScript 2015 中引入了 enhanced object literal(增强对象文字面量) ，所以加上 {} 已经是你需要做的全部事情了：

第十二节： 4.增强 log 的阅读体验

我们刚刚看到了 console.table 这个技巧，也了解了在他上面的 {} ，那么我们为什么不将他们结合起来打造一个终极 log 呢？