梁少峰
标题的说法其实不太准确，因为react原生的事件系统本身就是事件代理的，意味着事件会一直冒泡到document进行绑定。所以，使用普通的**event.stopPropagation();**是没有办法在react中实现阻止事件“冒泡”类似的操作的。 stackoverflow和github issue上都有相关的讨论，比如 1. http://stackoverflow.com/questions/24415631/reactjs-syntheticevent-stoppropagation-only-works-with-react-events 2. https://github.com/facebook/react/search?q=stopPropagation&type=Issues&utf8=%E2%9C%93 最后我找到了一个比较简单地解决方法，就是 **react-native-listener**。 ``` // before use react-native-listener ``` ``` // after use react-native-listener ``` 参考地址：https://www.npmjs.com/package/react-native-listener
# 前言 在上一篇 #100 中，我们实现了 webpack 的 code-splitting 功能。**今天，我们来探索 loader 机制，最终实现的代码版本参考[这里](https://github.com/youngwind/fake-webpack/tree/96eae479379ca83dc7121f4afaef0b3453668081)。**（参考的 webpack 版本是[这个](https://github.com/webpack/webpack/tree/356ab65ea0c097fdb2d3d70f9ba8593f325dc92e)） # 问题 以加载 less 为例。 ```js // example.js require('./style.less'); ``` ```less // style.less @color: #000fff; .content {...
# 前言 我们都知道：“React 组件绑定事件本质上是代理到 document 上”，今天，我们来探索其精微之处。 # stopPropagation VS stopImmediatePropagation 考虑这么一种情况：document 上绑定了 3 个事件，有什么办法能够做到 → 在触发了第 1 个事件之后，不再触发第 2、3 个事件呢？我的第一想法是调用 `e.stopPropagation`。但是，实际验证是不行的，如下图所示。  为什么呢？我重新翻开红宝书，第 356 页，发现除了 `e.stopPropagation`外，还有一个类似的方法，叫做`e.stopImmediatePropagation`，它们两个的区别是： 1. stopPropagation 能够阻止事件的进一步捕获或者冒泡； 2....
# 前言 这篇文章我准备了很久，反复修改了很多次，仍不觉得满意，原因是： 1. 网上虽有很多 HTTPS 相关的资料，但是质量参差不齐，而且有些地方的理解还不一致，我不知道哪个是对的。 2. 对于 HTTPS，我很难在实践中应用它，因此，也没法从实践中确认我所理解的就是对的。 下面是我参考的资料，基本代表了我学习 HTTPS 的一个思路顺序： 1. [关于互联网流量劫持分析及可选的解决方案](https://my.oschina.net/leejun2005/blog/614612), By xrzs 1. [密码学笔记](http://www.ruanyifeng.com/blog/2006/12/notes_on_cryptography.html), By 阮一峰 2. [对称加密算法 VS 非对称加密算法](http://blog.loveyoung.me/2016/02/19/%E7%99%BD%E8%AF%9D%E8%A7%A3%E9%87%8A-%E5%AF%B9%E7%A7%B0%E5%8A%A0%E5%AF%86%E7%AE%97%E6%B3%95-%E9%9D%9E%E5%AF%B9%E7%A7%B0%E5%8A%A0%E5%AF%86%E7%AE%97%E6%B3%95.html), By loveyoung 3. [密码技术系列 Part...
# 前言 最近在翻红宝书，看到 Web Worker 那章，猛然意识到，通过它竟然可以把几个缓存相关的概念串起来，甚是有趣，撰文记之。最后我也写了一个完整的[离线应用 Demo](https://github.com/youngwind/service-worker-demo)，以供运行调试。 # 浏览器缓存 传统意义上的浏览器缓存，分为**强缓存**和**协商缓存**，其共同点都是通过设置 HTTP Header 实现。关于两者的异同已经被讨论得很多，我就不赘述了，附两个参考资料。 1. [浏览器的缓存机制](http://coderlt.coding.me/2016/11/21/web-cache/), By Aitter 2. [http协商缓存VS强缓存](http://www.cnblogs.com/wonyun/p/5524617.html), By wonyun 这种浏览器缓存（我称之为 Header 缓存）有两个共同的缺点： 1. 当没有网络的时候，应用无法访问，因为 HTML 页面总得去服务器获取。 2. 缓存不可编程，无法通过...
# 前言 在上一篇 #98 中，我们通过实现requireJS，对模块化有了一些认识。今天我们更进一步，看看如何实现一个简单的[webpack](https://github.com/webpack/webpack)，实现的源码参考[这里](https://github.com/youngwind/fake-webpack)。 # 目标 现在的webpack是一个庞然大物，我们不可能实现其所有功能。 那么，**应该将目光聚焦在哪儿呢？** 从[webpack的第一个commit](https://github.com/webpack/webpack/tree/2e1460036c5349951da86c582006c7787c56c543)可以看出，其当初最主要的目的是**在浏览器端复用符合CommonJS规范的代码模块**。这个目标不是很难，我们努力一把还是可以实现的。 注意：在此我们不考虑插件、loaders、多文件打包等等复杂的问题，仅仅考虑最基本的问题：**如何将多个符合CommonJS规范的模块打包成一个JS文件，以供浏览器执行。** # bundle.js 显然，浏览器没法直接执行CommonJS规范的模块，怎么办呢？ 答案：**将其转换成一个自执行表达式** 注意：此处涉及到webpack构建出来的`bundle.js`的内部结构问题，如果不了解bundle.js具体是如何执行的，请务必搞清楚再往下阅读。可以参考 #64 或者[这里](https://segmentfault.com/a/1190000006814420) # 例子 我们实际要处理的例子是[这个](https://github.com/youngwind/fake-webpack/tree/1bfcd0edf10f1a2ff3bfd7c418e7490a735b9823/examples/simple)：example依赖于a、b和c，而且c位于node_modules文件夹中，我们要将所有模块构建成一个JS文件，就是[这里的output.js](https://github.com/youngwind/fake-webpack/blob/1bfcd0edf10f1a2ff3bfd7c418e7490a735b9823/examples/simple/output.js) # 思路 仔细观察[output.js](https://github.com/youngwind/fake-webpack/blob/1bfcd0edf10f1a2ff3bfd7c418e7490a735b9823/examples/simple/output.js)，我们能够发现： 1. 不管有多少个模块，头部那一块都是一样的，所以可以写成一个模板，也就是[templateSingle.js](https://github.com/youngwind/fake-webpack/blob/1bfcd0edf10f1a2ff3bfd7c418e7490a735b9823/lib/templateSingle.js)。 2. 需要分析出各个模块间的依赖关系。也就是说，需要知道`example依赖于a、b和c`。 3. c模块位于node_modules文件夹当中，但是我们调用的时候却可以直接`require('c')`，这里肯定是存在某种自动查找的功能。...
# 前言 2 年前我刚接触 react-router，觉得这玩意儿很神奇，只定义几个 Route 和 Link，就可以控制整个 React 应用的路由。不过那时候只想着怎么用它，也写过 2 篇与之相关的文章 #17 #73 （现在看来，那时候的文章写得实在是太差了）今天，我们来认真研究一番，希望能解决以下 3 个问题。 1. 单页面应用路由的实现原理是什么？ 2. react-router 是如何跟 react 结合起来的？ 3. 如何实现一个简单的 react-router？ # hash 的历史...
# 前言 继 #93 之后，我们来探索如何实现[Vue的父子组件通信](https://vuejs.org.cn/guide/components.html#父子组件通信)。 在问**如何实现**之前，我习惯性地思考**为什么**。 为什么Vue、React这些MVVM框架会出现**组件通信**这个概念？犹记得我去年初刚刚学前端的时候，学的还是jquery，那时候还没接触组件的概念，所有的DOM都写到一块，A处的DOM和B处的DOM并没有**明确的边界**。如果A处的DOM想修改B处的DOM，那么一定是A处的DOM触发某个js方法，然后该js方法直接修改B处的DOM。就这样，非常原始，也非常符合js这门**脚本语言**的风格。 然而，前端早已非“当年吴下阿蒙”。在不断吸收传统软件开发优良思想的过程中，前端已经越来越系统化，js也逐渐成为一门正规的语言。**组件化的概念其实就很类似传统软件开发中的模块化（各模块之间有明确的边界），既然划分了模块，那么模块之间的通信自然就成为了要解决的问题。这就是为什么这些MVVM框架会出现组件通信这个概念。** # 目标 本文只解决**父子组件通信**，不解决**兄弟组件通信**。预期做到的效果如下所示。  注意：图中展示的效果总共有三层实例/组件，层层嵌套。他们之间传递“姓名”和“年龄”两个字段，又分为”向上冒泡“和”向下广播“两个方向，所以总共有2*2=4种事件。其中，在冒泡（dispatch）和广播（broadcast）的过程中，”姓名“事件的传递不会停止，而”年龄“事件在触发第一次的回调函数的时候，就会停止冒泡或广播。如果希望在首次触发回调之后继续冒泡或广播，那么须在events事件中指定`return true`。这与[vue的实现](https://vuejs.org.cn/guide/components.html#自定义事件)保持一致。 PS: 此处示例对应的代码比较长，就不在文中展示了，请直接阅读[源码](https://github.com/youngwind/bue/tree/8f3160c9af0f3f9d42ffc9881c63bff9eb5783be/example)，或者[运行项目](https://github.com/youngwind/bue/tree/8f3160c9af0f3f9d42ffc9881c63bff9eb5783be)直接debug。 # 思路 我们考察[child组件](https://github.com/youngwind/bue/blob/8f3160c9af0f3f9d42ffc9881c63bff9eb5783be/example/index.js#L7-L39)，发现它跟一般的组件有以下两点不同： 1. 多了一个events字段，里面定义了许多事件及其对应的回调方法。 2. methods方法中调用了$dispatch和$broadcast，用来触发及传播事件。 先来看第一点。 # 事件初始化 我们需要将事件及其回调函数注册到child实例上，这样当其他组件（无论是父组件还是子组件）传来消息的时候，程序才能知道该触发哪个事件，该执行哪个回调函数。 ``` js //...
# 一、前言 好久没写博客了，因为这两年特别的忙，忙着做什么呢？**忙着去实践答案了**。 # 二、问题 两年前，我写过一篇文章[《前端之问，程序员之问，职业之问》](https://github.com/youngwind/blog/issues/114)，里面探讨了 Web 前端开发领域的三个问题： 1. 跟其他岗位相比（比如后端，算法），Web 前端天花板（职称、晋升、薪酬等等）较低； 2. 跟其他岗位相比，在技术上 Web 前端可深挖的技术较少，进阶难； 3. 程序员普遍是青春饭，Web 前端也不例外。 当时我找到了答案，但是需要实践去验证。所以，我来到了 AlloyTeam，开发腾讯文档。 # 三、答案 ## 3.1 天花板低？ 不存在的。腾讯文档往小了说，属于在线文档，往大了说，属于办公工具，市场大得很。君不见这么些年，国外的微软靠着 Office 赚得盆满钵满。只要市场够大，能赚钱，资本就会投入，公司就会重视，就有搞头，晋升薪酬这些，还用发愁吗？（**悄咪咪的说，pony 一直都很重视腾讯文档呢**）而且人们永远都有办公的需求，这个市场是长期存在的，再搞二十年也不成问题。 ##...
dash，大名鼎鼎，它的documenation功能大家都用得很多，但是snippets可能就用得比较少了。 一图胜千言。  --- 有了这个，就可以把一些常用的代码片段提前写在这儿，比如for循环啦，ajax请求啦等等，而且跟编辑器无关。只要给dash开通辅助功能，它就能在任何地方使用！