houfeng_高分内容_个人页-阿里云开发者社区

发表了文章 2019-10-17

基于 Dawn 进行多工程管理

基于 Dawn 进行多工程管理 # 1. 简述当一个项目中子工程较多时，就会面临「单仓库（Monorepo）」还是「多仓库（Multirepo）」管理的问题。当然两个方式各有优缺点，而我们选择多工程单 Repo 时，能够带来一些管理上的简便，比如「Issues 和 PR 的集中管理、整体一致的 Changelog 等」。而进一步「模块间的依赖管理、版本管理、发布管理」等问题，如果

发表了文章 2019-09-10

在 React 中使用 Shadow DOM

# 1. Shadow DOM 是什么 Shadow DOM 是什么？我们先来打开 Chrome 的 DevTool，并在 'Settings -> Preferences -> Elements' 中把 ' Show user agent shadow DOM' 打上勾。

发表了文章 2018-04-23

为 Node.js 应用建立一个更安全的沙箱环境

![1](https://segmentfault.com/img/bV88V9) ## 有哪些动态执行脚本的场景？在一些应用中，我们希望给用户提供插入自定义逻辑的能力，比如 Microsoft 的 Office 中的 `VBA`，比如一些游戏中的 `lua` 脚本，FireFox 的「油猴脚本」，能够让用户发在可控的范围和权限内发挥想象做一些好玩、有用的事情，扩展了能力，满足用户的

发表了文章 2018-02-11

在 React 工程中利用 Mota 编写面向对象的业务模型

## 简述 React 是一个「视图层」的 UI 框架，以常见的 MVC 来讲 React 仅是 View，而我们在编写应用时，通常还需要关注更加重要的 model，对于 React 来讲，我们常常需要一个「状态管理」库。然而，目前大多数针对 React 的状态管理库都是「强依赖」过多的侵入本应该独立的业务模型中，导致「业务逻辑」对应的代码并不能轻易在其它地方重用，往往这些框架还具有「强排它

发表了文章 2018-02-11

The best GraphQL Loader for Webpack

GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余。想更多的了解或使用 GraphQL，请访问 https://github.com/facebook/graphql GraphQL 有针对不同语言的服务端实现，以帮助开发人员搭建

发表了文章 2018-01-19

阿里云前端周刊 - 第 39 期

## 推荐 ### 1. Safari 支持 Service Worker 了！ https://mp.weixin.qq.com/s/gqNjFzRhurLLYTdWjIKpXg 在昨天发布的 Safari 46 技术预览版里，发布了一个重大更新，在新的桌面版 Safari 里将默认打开 Service Worker，这意味着苹果正在逐步接受 PWA，我们将进入 PWA 的时代

发表了文章 2018-01-19

阿里云前端周刊 - 第 41 期

## 推荐 ### 1. Intel CPU 爆重大设计缺陷，浏览器中同样可以越权访问 https://googleprojectzero.blogspot.hk/2018/01/reading-privileged-memory-with-side.html 近日 Intel CPU 被爆存在设计缺陷，普通的用户程序能够识别受保护区域的内核布局及其中内容；所有能访问虚拟内存的 CP

发表了文章 2018-01-15

阿里云前端周刊 - 第 37 期

## 推荐 ### 1. Node.js 的可扩展应用模式：CQRS, ES, Onion https://medium.com/@domagojk/patterns-for-designing-flexible-architecture-in-node-js-cqrs-es-onion-7eb10bbefe17 本文介绍如何使用 CQRS 与 Event Sourcing

发表了文章 2018-01-10

阿里云前端周刊 - 第 40 期

## 推荐 ### 1. Metaballs 粘滞融合效果 https://www.w3cplus.com/svg/metaballs.html Metaballs是有机的黏糊糊的黏糊糊的东西。从数学的角度来看，它们是一个等值面。可以用一个数学公式来表示：f(x,y,z) = r / ((x - x0)2 + (y - y0)2 + (z - z0)2)，我们可以在一个元素中使用

发表了文章 2017-12-14

阿里云前端周刊 - 第 36 期

## 推荐 ### 1. Rust 默认可以编译为 WebAssembly https://www.hellorust.com/news/native-wasm-target.html 随着 Pull Request 46115: "rustbuild: Enable WebAssembly backend by default" 被合入 master 分支，Rust 现在可以不

发表了文章 2017-12-06

阿里云前端周刊 - 第 32 期

## 推荐 ### 1. Preact：一个备胎的自我修养 https://zhuanlan.zhihu.com/p/30796007 前一段时间由于React Licence的问题，团队内部积极的探索React的替代方案，同时考虑到之后可能开展的移动端业务，团队目标是希望能够找到一个迁移成本低，体量小的替代产品。经过多方探索，Preact进入了我们的视野。从接触到Preact开

发表了文章 2017-12-06

阿里云前端周刊 - 第 34 期

## 推荐 ### 1. Node.js 中内存溢出与内存膨胀调试 https://tech.residebrokerage.com/debugging-node-js-memory-problems-d450787d9253 内存问题是服务端应用程序的常见痛点之一，本文作者近日就受困于内存泄露（Memory Leak）与内存膨胀（Memory Bloat），本文即是他的调试经验

发表了文章 2017-12-06

阿里云前端周刊 - 第 35 期

## 推荐 ### 1. PWA 是否能带来新一轮大前端技术洗牌？ https://openweb.baidu.com/pwa-future/ PWA 不是特指某一项技术，而是应用了多项技术的 Web App。其核心技术包括 App Manifest、Service Worker、Web Push、Credential Management API ，等等。其核心目标就是提升 W

发表了文章 2017-11-28

阿里云前端周刊 - 第 33 期

## 推荐 ### 1. React 16.1.0 发布 https://github.com/facebook/react/releases/tag/v16.1.0 本周 React 16.1.0 版本发布，自该版本开始 React 不再发布到 Bower，而是采用 unpkg 来镜像存放 UMD 构建版本；那些依赖于 Bower 进行依赖管理的开发者只能选择使用老的版本。此外

发表了文章 2017-11-24

阿里云前端周刊 - 第 32 期

## 推荐 ### 1. React 16 新特性尝鲜实战教程 https://juejin.im/post/59f26fe5f265da43252889d9 React 16 的发布除开源许可证和 Fiber 机制全面开启之外，还为我们提供了部分非常强大的新特性，本视频教程将通过...

发表了文章 2017-11-08

阿里云前端周刊 - 第 31 期

## 推荐 ### 1. 利用 Dawn 工程化工具实践 MobX 数据流管理方案 https://zhuanlan.zhihu.com/p/30554301 项目在最初应用 MobX 时，对较为复杂的多人协作项目的数据流管理方案没有一个优雅的解决方案，通过对MobX官方文档中针对大型可维护项目最佳实践的学习和应用，把自己的理解抽象出一个简单的todoMVC应用，供大家交流和讨论

发表了文章 2017-10-26

阿里云前端周刊 - 第 29 期

## 推荐 ### 1. RESTful API 设计最佳实践 https://blog.philipphauer.de/restful-api-design-best-practices/ 项目资源的URL应该如何设计？用名词复数还是用名词单数？一个资源需要多少个URL？用哪种HTTP方法来创建一个新的资源？可选参数应该放在哪里？那些不涉及资源操作的URL呢？实现分页和版本控制

发表了文章 2017-10-17

使用 Dawn 构建 React 项目

开发一个 React 项目，通常避免不了要去配置 `Webpack` 和 `babel` 之类，以支持 `commonjs` 或 `es` 模块及各种 `es` 新语法，及及进行 `jsx` 语法的转义。当然也可以用 `create-react-appp` 脚手架快速创建一个 `react` 项目，但与此同时 `create-react-app` 常常又显的不太自由。在配置 `webpac

发表了文章 2017-10-17

阿里云前端周刊 - 第 27 期

## 推荐 ### 1. Facebook 宣布重置 React，Jest，Flow 与 Immutable.js 的开源证书 https://code.facebook.com/posts/300798627056246 自宣布保留 React 等开源项目附带专利要求的开源协议之后，社区反馈了极大的不满与怀疑，包括 WordPress 在内的许多开源项目也宣布即将切换技术栈；鉴

发表了文章 2017-10-17

阿里云前端周刊 - 第 28 期

## 推荐 ### 1. 现代 JavaScript 语法清单 https://github.com/mbeaudru/modern-js-cheatsheet#modern-javascript-cheatsheet 本文涉及到了现代项目开发中常用的 JavaScript 语法使用以及示例代码的清单；本指南并不打算从零介绍 JavaScript，而是对于那些有一定基础知识的开

发表了文章 2017-09-25

阿里云前端周刊 - 第 26 期

## 推荐 ### 1. Node.js 8.5.0 发布 https://nodejs.org/en/blog/release/v8.5.0/ 已经发布的 Node.js 8.5.0 版本中引入了一系列的新特性与错误修复，其中值得注意的是 V8 重新支持 Snapshots、引入了 console.group()、新增了 fs.copyFile 与 fs.copyFileSyn

发表了文章 2017-09-19

阿里云前端周刊 - 第 25 期

## 推荐 ### 1. Chrome 61 新特性介绍 https://developers.google.com/web/updates/2017/09/nic61 Chrome 61 中即将原生地支持 JavaScript 模块，意味着开发者可以不用 Babel 等转换器即直接在浏览器中运行模块化代码。除此之外，Chrome 61 还允许开发者使用 navigator.sh

发表了文章 2017-09-13

? 阿里云前端工程化工具 Dawn 正式开源!

![Banner](https://github.com/alibaba/dawn/raw/master/docs/assets/banner.png) # Dawn Dawn 取「黎明、破晓」之意，原为「阿里云·业务运营团队」内部的前端构建和工程化工具，现已完全开源。它通过 pipeline 和 middleware 将开发过程抽象为相对固定的阶段和有限的操作，简化并统一了开发人员的

发表了文章 2017-09-13

阿里云前端周刊 - 第 24 期

## 推荐 ### 1. Firefox 引入 Headless 模式 https://developer.mozilla.org/en-US/Firefox/Headless_mode 类似于 Chrome 的 Headless 模式，现在 Firefox 也引入了 Headless 模式，其允许开发者利用 Firefox 进行更加方便地自动化测试、动态网页抓取等操作；本文也介

发表了文章 2017-09-04

阿里云前端周刊 - 第 23 期

## 推荐 ### 1. 组件化设计思维 – 从规范到工具的构建与探索 http://www.zcool.com.cn/article/ZNTQ4NjE2.html 阿里巴巴在中台战略的背景下，设计提效又再次推动着设计思维的变革。设计师们不仅仅需要出色地完成业务需求的设计，同时还需要思考设计的价值，也就是经常提到的最佳方案性价比。我们需要在设计的个性化表达和资源投入之间找到最

发表了文章 2017-08-30

阿里云前端周刊 - 第 22 期

## 推荐 ### 1. React 就开源许可证风波进行回复 https://code.facebook.com/posts/112130496157735/explaining-react-s-license/ 数周前，Apache 基金会决定禁止旗下项目使用 React，因为其在标准的 BSD 许可证之外添加了专利声明；此举引发了社区的广泛讨论，希望 React 能够更新其

发表了文章 2017-08-24

阿里云前端周刊 - 第 21 期

## 推荐 ### 1. Firefox 55 引入 WebVR 支持 https://hacks.mozilla.org/2017/08/firefox-55-supports-webvr/?utm_source=frontendfocus&utm_medium=email 近日发布的 Windows 平台上的 Firefox 55 版本，成为首个支持新 WebVR 标准的桌面

发表了文章 2017-08-18

通过 JSX Control Statements 编写 JSX

# 通过 JSX Control Statements 编写 JSX ## 一、前言一些开发者，特别是有使用过「模板技术」的开发者（例如 Handlebars），刚开始尝试使用 React 编写应用时，可能会惊讶的发现，JSX 竟然没有内建支持类似其它模板引擎似的任何结构控制语句或指令。但这就是 JSX，它就是这么设计的，JSX 不是传统的模板，也不需要某个模板引擎去解析。大体上，可

发表了文章 2017-08-15

阿里云前端周刊 - 第 20 期

## 推荐 ### 1. 阿里电商架构演变之路 https://yq.aliyun.com/articles/161190 首届阿里巴巴中间件技术峰会上，阿里巴巴中间件技术部专家唐三带来“阿里电商架构演变之路”的演讲，本文从阿里业务和技术架构开始引入，分别分享了阿里电商从1.0到4.0架构的演变之路，着重分析了分布式和异地多活的改变之路。 ### 2. WebVR开发教程

发表了文章 2017-08-08

阿里云前端周刊 - 第 19 期

## 推荐 ### 1. 高性能 MobX 模式（part 3）- 用例教程 https://zhuanlan.zhihu.com/p/28199184 前面两部分把重点放在了 MobX 基础模块的构建上。用这些模块我们可以开始解决一些现实场景的问题了。这篇文章将会通过一系列的示例来应用我们已经了解的概念。当然了，这不会是一个冗长的列表，而是可以让你尝试转变思维去应用 Mob

发表了文章 2017-08-07

阿里云前端周刊 - 第 18 期

## 推荐 ### 1. 深入浅出 React 高阶组件 https://zhuanlan.zhihu.com/p/28138664 由高阶函数引申高阶组件，高阶组件是接受 React 组件作为输入，输出一个新的 React 组件的组件，本文介绍了在 React 工程中如何编写和使用高阶组件，以及结合 Decorator 的一些实践。 ### 2. 高性能 MobX 模式（

发表了文章 2017-07-27

阿里云前端周刊 - 第 17 期

## 推荐 ### 1. Styled-Components 实战 http://www.ruanyifeng.com/blog/2017/07/neural-network.html Styled-Components 是由 Max Stoiber 与 Glen Maddern 创建的新的 CSS-in-JS 工具库，能够帮你组织 React 或者 React Native 项

发表了文章 2017-07-24

阿里云前端周刊 - 第 16 期

## 推荐 ### 1. 神经网络入门 http://www.ruanyifeng.com/blog/2017/07/neural-network.html 眼下最热门的技术，绝对是人工智能，人工智能的底层模型是"神经网络"（neural network）。许多复杂的应用（比如模式识别、自动控制）和高级模型（比如深度学习）都基于它。学习人工智能，一定是从它开始。 ### 2

发表了文章 2017-07-11

阿里云前端周刊 - 第 15 期

## 推荐 ### 1. 为什么我们选择 TypeScript https://redditblog.com/2017/06/30/why-we-chose-typescript/ 本文是 Reddit 工程师 Niranjan Ramadas 记述在前端技术选型时选用 TypeScript 的考虑过程。作者认为任何语言都有其优缺点，不过合适的语言应该具备如下特点：强类型、完备的

发表了文章 2017-07-04

阿里云前端周刊 - 第 14 期

## 推荐 ### 1. JavaScript 在嵌入式设备与物联网中的应用现状 https://auth0.com/blog/javascript-for-microcontrollers-and-iot-part-1/?utm_source=newsjs&utm_medium=sc&utm_campaign=javascript_microcontrollers 随着近年来

发表了文章 2017-06-20

阿里云前端周刊 - 第 12 期

## 推荐 ### 1. JavaScript's new #private class fields http://thejameskyle.com/javascripts-new-private-class-fields.html Private class fields are now at Stage 2 in the JavaScript standard proces

发表了文章 2017-06-13

阿里云前端周刊 - 第 11 期

## 推荐 ### 1. JavaScript 模块现状 https://zhuanlan.zhihu.com/p/26567790 最近在 twitter 上有很多关于 ES Module 现状的讨论，尤其是在 Node.js 上，他们计划引入新的文件扩展名 *.mjs。人们有足够理由对此感到担忧和不确定，因为这个话题异常复杂，接下来会尽力阐述清楚问题。 ###

发表了文章 2017-05-31

阿里云前端周刊 - 第 9 期

## 推荐 ### 1. Web 开发者安全速查表 http://www.freebuf.com/articles/web/135278.html 如果你觉得你可以在一个月之内开发出一款集使用价值、用户体验度、以及安全性为一身的产品，那么在你将产品原型真正推上市场之前，请一定要三思啊！当你仔细核查了本文给出的安全小贴士之后，你可能会发现你在产品的开发阶段跳过了很多重要的安全步

发表了文章 2017-05-31

阿里云前端周刊 - 往期回顾（1-3）

## 阿里云前端周刊 - 第 1 期 ### 一、推荐、 ##### 1. 如何撰写 Git 提交信息 https://chris.beams.io/posts/git-commit/ 重建一段代码的上下文是非常费时费力的，这是无法完全避免的。所以我们应该努力尽可能的减少它。提交信息可以帮上这个忙，也正因为此，一个提交信息反应了一名开发者是不是个好的协作者。 ####

发表了文章 2017-05-31

阿里云前端周刊 - 往期回顾（7~9）

## 阿里云前端周刊 - 第 7 期 ## 推荐 ### 1. GUI 应用程序架构的十年变迁 https://segmentfault.com/a/1190000009346599 随着现代浏览器的日渐流行，Web 以及混合开发技术的发展，大前端的概念日渐成为某种共识；而无论 iOS、Android、Web 这样的端开发还是 React Native、Weex 这样的跨端开

发表了文章 2017-05-22

CIZE：像 Gulp 一样搭建一个 CI 服务

# CIZE 是什么？ CIZE 是一个「持续集成」工具，希望能让开发人员更快捷的搭建一个完整、可靠、便捷的 CI 服务。甚至可以像 Gulp 或 Grunt 一样，仅仅通过一个 ```cizefile.js``` 即可完成几乎所有的工作。 [![npm version](https://badge.fury.io/js/cize.svg)](http://badge.fury.i

发表了文章 2017-03-27

faked 一个用于 mock 后端 API 的轻量工具

![logo](https://github.com/Houfeng/faked/raw/master/docs/faked.png) ## 一、简介 faked 是一个在前端开发中用于 mock 服务端接口的模块，轻量简单，无需要在本地启动 Server 也无需其它更多的资源，仅在浏览器中完成「请求拉截」，配合完整的「路由系统」轻而易举的 mock 后端 API。 GitHub R

发表了文章 2017-03-24

faked 一个用于 mock 后端 API 的轻量工具

faked 是一个在前端开发中用于 mock 服务端接口的模块，轻量简单，无需要在本地启动 Server 也无需其它更多的资源，仅在浏览器中完成「请求拉截」，配合完整的「路由系统」轻而易举的 mock 后端 API。

发表了文章 2017-03-15

分享一个 Node 进程互斥锁小模块 - lockman

### 介绍 lockman 是一个用于多进程的「互斥锁」，类似一些语言中（比如 C#）的 lock 关键字可以用来确保代码块完成运行，而不会被其他进程「影响」。它可以把一段代码定义为「互斥段」（critical section），「互斥段」在一个时刻内只允许一个进程进入执行，而其他进程必须等待。不同之处，C# 的 lock 关键字作用在「线程间」，lockman 作用在

发表了文章 2017-03-15

Mditor 发布「桌面版」了 - http://mditor.com

![alt](http://mditor.com/assets/site-shot.png) # 简单说明 Mditor 最早只有「组件版」，随着「桌面版」的发布，Mditor 目前有两个版本： - 可嵌入到任意 Web 应用的 Embed 版本，这是一桌面版的基础，Repo: [https://github.com/houfeng/mditor](https://github.com

发表了文章 2017-03-06

分享一个 markdown 编辑器 - Mditor

## 只求极致 [ **M** ] arkdown + E [ **ditor** ] = **Mditor** [![version](https://badge.fury.io/js/mditor.svg)](http://badge.fury.io/js/mditor) Mditor 是一个简洁、易于集成、方便扩展、期望舒服的编写 markdown 的编辑器，仅

发表了文章 2017-02-20

Confman - 分享一个「Node 应用」配置文件加载模块

# 一句话介绍 Confman 是一个强大的配置文件加载器，无论你喜欢 yaml 、cson、json、properties、plist、ini、toml、xml 还是 js，都能满足你的愿望，并且更加简单、更加强大。 [![npm version](https://badge.fury.io/js/confman.svg)](http://badge.fury.io/js/confman

houfeng_个人页

个人介绍

擅长的技术

基于 Dawn 进行多工程管理

在 React 中使用 Shadow DOM

为 Node.js 应用建立一个更安全的沙箱环境

在 React 工程中利用 Mota 编写面向对象的业务模型

The best GraphQL Loader for Webpack

阿里云前端周刊 - 第 39 期

阿里云前端周刊 - 第 41 期

阿里云前端周刊 - 第 37 期

阿里云前端周刊 - 第 40 期

阿里云前端周刊 - 第 36 期

阿里云前端周刊 - 第 32 期

阿里云前端周刊 - 第 34 期

阿里云前端周刊 - 第 35 期

阿里云前端周刊 - 第 33 期

阿里云前端周刊 - 第 32 期

阿里云前端周刊 - 第 31 期

阿里云前端周刊 - 第 29 期

使用 Dawn 构建 React 项目

阿里云前端周刊 - 第 27 期

阿里云前端周刊 - 第 28 期

阿里云前端周刊 - 第 26 期

阿里云前端周刊 - 第 25 期

? 阿里云前端工程化工具 Dawn 正式开源!

阿里云前端周刊 - 第 24 期

阿里云前端周刊 - 第 23 期

阿里云前端周刊 - 第 22 期

阿里云前端周刊 - 第 21 期

通过 JSX Control Statements 编写 JSX

阿里云前端周刊 - 第 20 期

阿里云前端周刊 - 第 19 期

阿里云前端周刊 - 第 18 期

阿里云前端周刊 - 第 17 期

阿里云前端周刊 - 第 16 期

阿里云前端周刊 - 第 15 期

阿里云前端周刊 - 第 14 期

阿里云前端周刊 - 第 12 期

阿里云前端周刊 - 第 11 期

阿里云前端周刊 - 第 9 期

阿里云前端周刊 - 往期回顾（1-3）

阿里云前端周刊 - 往期回顾（7~9）

CIZE：像 Gulp 一样搭建一个 CI 服务

faked 一个用于 mock 后端 API 的轻量工具

faked 一个用于 mock 后端 API 的轻量工具

分享一个 Node 进程互斥锁小模块 - lockman

Mditor 发布「桌面版」了 - http://mditor.com

分享一个 markdown 编辑器 - Mditor

Confman - 分享一个「Node 应用」配置文件加载模块

基于 Dawn 进行多工程管理

在 React 中使用 Shadow DOM

为 Node.js 应用建立一个更安全的沙箱环境

在 React 工程中利用 Mota 编写面向对象的业务模型

The best GraphQL Loader for Webpack

阿里云前端周刊 - 第 39 期

阿里云前端周刊 - 第 41 期

阿里云前端周刊 - 第 37 期

阿里云前端周刊 - 第 40 期

阿里云前端周刊 - 第 36 期

阿里云前端周刊 - 第 32 期

阿里云前端周刊 - 第 34 期

阿里云前端周刊 - 第 35 期

阿里云前端周刊 - 第 33 期

阿里云前端周刊 - 第 32 期

阿里云前端周刊 - 第 31 期

阿里云前端周刊 - 第 29 期

使用 Dawn 构建 React 项目

阿里云前端周刊 - 第 27 期

阿里云前端周刊 - 第 28 期