Skip to content

Commit

Permalink
add daily reading 11.14
Browse files Browse the repository at this point in the history
  • Loading branch information
yygmind committed Nov 14, 2018
1 parent da55677 commit 03e5d08
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 0 deletions.
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@

#### 博文

* [Vue 进阶系列(三)之Render函数原理及实现](https://github.com/yygmind/blog/issues/10)

* [Vue 进阶系列(二)之插件原理及实现](https://github.com/yygmind/blog/issues/9)
* [Vue 进阶系列(一)之响应式原理及实现](https://github.com/yygmind/blog/issues/6)
* [JavaScript常用七种继承方案](https://github.com/yygmind/blog/issues/7)
Expand Down
44 changes: 44 additions & 0 deletions daily reading/2018.11.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,50 @@



#### 11月14号

* [ES6 系列之模块加载方案](https://juejin.im/post/5bea425751882508851b45d6)(优)

* `requirejs` 为全局添加了 `define` 函数,只要按照这种约定的方式书写这个模块即可
* require.js 会自动分析依赖关系,将需要加载的模块先全部加载,如果有多个依赖,会先加载依赖的依赖,再加载当前依赖。
* AMD( The Asynchronous Module Definition) 是 RequireJS 在推广过程中对模块定义的规范化产出。
* 与 AMD 一样,CMD 其实就是 SeaJS 在推广过程中对模块定义的规范化产出。
* 区别1:CMD 推崇**依赖就近**(依赖可以就近书写),AMD 推崇**依赖前置**(依赖必须一开始就写好)
* 区别2:对于依赖的模块,AMD 是**提前执行**,CMD 是**延迟执行**,AMD 是将需要使用的模块先加载完再执行代码,而 CMD 是在 require 的时候才去加载模块文件,加载完再接着执行。
* AMD规范是非同步加载模块,允许指定回调函数。适用于浏览器环境,因为要从服务器端加载模块,这时就必须采用非同步模式,
* CommonJS 是同步加载模块,只有加载完成,才能执行后面的操作,和CMD 执行顺序一致。Node.js 主要用于服务器编程,模块文件一般都已经存在于本地硬盘,所以加载起来比较快,不用考虑非同步加载的方式,所以 CommonJS 规范比较适用。
* 浏览器加载 ES6 模块,也使用 `<script>` 标签,但是要加入 `type="module"` 属性。
* ES6 和AMD执行顺序一致,将需要使用的模块先加载完再执行代码。
* 区别1:CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
* 区别2:CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
* Babel 将 ES6 模块转为 CommonJS ,然后通过webpack包裹一层,注入module、 exports、 require 等环境变量。

* [剖析Promise内部结构,一步步实现一个完整的Promise](https://github.com/xieranmaya/blog/issues/3) (优)

* Promise构造函数接收一个executor函数,executor函数执行完同步或异步操作后,调用它的两个参数resolve和reject

* 考虑到执行executor的过程中有可能出错,所以我们用try/catch块给包起来,并且在出错后以catch到的值reject掉这个Promise

* resolve和reject的逻辑判断状态为pending之后把状态改为相应的值,并把对应的value和reason存在self的data属性上面,之后执行相应的回调函数

* then里面执行onResolved或者onRejected,并根据返回值(标准中记为x)来确定promise2的结果,并且,如果onResolved/onRejected返回的是一个Promise,promise2将直接取这个Promise的结果

* **Promise神奇的值的穿透也没有那么黑魔法,只不过是then默认参数就是把值往后传或者抛**

* [前端安全系列(一):如何防止XSS攻击?](https://tech.meituan.com/fe_security.html)(优)

* 通常页面中包含的用户输入内容都在固定的容器或者属性内,以文本的形式展示。攻击者利用这些页面的用户输入片段,拼接特殊格式的字符串,突破原有位置的限制,形成了代码片段。攻击者通过在目标网站上注入脚本,使之在用户的浏览器上运行,从而引发潜在风险。通过 HTML 转义,可以防止 XSS 攻击。

* 做了 HTML 转义,并不等于高枕无忧。对于链接跳转,如 `<a href="xxx"``location.href="xxx"`,要检验其内容,禁止以 `javascript:` 开头的链接,和其他非法的 scheme。

* HTML 转义是非常复杂的,在不同的情况下要采用不同的转义规则。如果采用了错误的转义规则,很有可能会埋下 XSS 隐患。应当尽量避免自己写转义库,而应当采用成熟的、业界通用的转义库。

* XSS 攻击可分为存储型、反射型和 DOM 型三种。

* 避免XSS攻击:利用模板引擎、避免内联事件、避免拼接 HTML



#### 11月13号

* [这一次,彻底弄懂 JavaScript 执行机制](https://juejin.im/post/59e85eebf265da430d571f89)
Expand Down

0 comments on commit 03e5d08

Please sign in to comment.