blog
blog copied to clipboard
imweb
IMWeb团队文章推荐
> 本文作者：IMWeb Llunnn 原文出处：[IMWeb社区](http://imweb.io/topic/5b8f42127cd95ea863193599) **未经同意，禁止转载** 最近在开发小程序，尝试性地使用了一下[mpvue](http://mpvue.com/)框架。 `mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。` mpvue同时维护了Vue和小程序的两套机制，因此需要对两套机制进行关联。这里主要对mpvue的生命周期来进行一些梳理。 ### 微信小程序生命周期 首先我们需要了解，微信小程序的生命周期： App对象，主要有onLaunch, onShow和onHide。 Page对象，主要有onLoad, onShow, onReady,...
> 本文作者：IMWeb HuQingyang 原文出处：[IMWeb社区](http://imweb.io/topic/5bcd417305c8cb261b76a1f9) **未经同意，禁止转载** 前段时间，老板说：iPhone 又出了那么多新机型，你搞下兼容吧。我：测试机呢？老板说：没有。我：？？？  这让我十分为难，毕竟巧妇难为无米之炊，于是我只好使出绝招：模拟器大法！ ## 一. 安装 & 启动 首先需要安装 Xcode，安装完毕后，在终端中运行 `xcode-select --install`安装 Command-line-tools。 安装完毕后搜索`Simulator`，或者按 `Command+Shift+G`, 输入`/Applications/Xcode.app/Contents/Developer/Applications/Simulator.app`，便可运行模拟器。 你也可以使用命令行来管理和启动模拟器： - 运行 `xcrun instruments -s` 列出可用的 iOS...
> 本文作者：IMWeb 孙世吉 原文出处：[IMWeb社区](http://imweb.io/topic/5bb9fd3779ddc80f36592f47) **未经同意，禁止转载** 本文有标题党之嫌，内含大量Microtasks相关总结性信息，请谨慎服用。 ## Google Developer Day China 2018 by Jake Archibald 2018年9月21日，虽然没有参加该场GDD，但是也有幸拜读了百度@小蘑菇小哥总结的文章[深入浏览器的事件循环(GDD@2018)](https://zhuanlan.zhihu.com/p/45111890),配注的说明插图形象生动，文终的click代码也很有意思，推荐大家阅读。这里就先恬不知耻的将该文的精华以及一些自己的总结陈列如下:  | 异步任务 | 特点 | 常见产生处 | | ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------...
> 本文作者：IMWeb 黎腾 原文出处：[IMWeb社区](http://imweb.io/topic/5a08a5c7ef79bc941c30d8dd) **未经同意，禁止转载**  ### 前言 编码，是每个程序员绕不开的话题。对于前端工程师而言，字符更是会直观地展示在界面上。 提起文字，大部分人的脑中，都会定式为规整排列的字符。但是林子大了什么鸟都有，世界上可是存在着6800+种文字，难免会飞出来一些诡异的鸟… 而号称“万国码”的Unicode，在实现编码与展示的时候，也会不会遇到一些奇葩的事情呢？ 事实上，可能你早已见识过了： ------------- x̙͈̝͍͕̙̄͛̽̆͌́̕͟g̘̣̠̝̟̤̥̼̼̽͑͋̈̑̒͟͞q̛̤̦̝̘͎͋̔̋͌͒̆̋̚͡f̵̢̙͇̮̠̋̀͌̅̉̃̔͜͜͠͡r̢̜̩͙̭̲͓͈̈̀͑̆͋̚͢͜m̷̛͙̝̣̲̭͍͉̊̓̾̈̋̿̚͢͟͠s̷̡̩͔̮͈̜̊̽͂̆̈́̃̓͋̏ 热҈的҈字҈都҈出҈汗҈了҈ 你的屏幕被蓝翔挖掘机给挖坏了不信你看;̷̸̨̀͒̏̃ͦ̈́̾̀́̎͢҉̵̶͚̼͉͖̺̥͔͇̰̹̮͙͉̻̼̭̻͕̮͇ͨͬͪ͗̇̑̽͋̀̋̊͌ͧͨͭ̓̅͐ͥ̂̔̊ͧ͊҉̶̵̷̞̩̦̳̺̳̬̬̩̣̫͇̯̥͖͍͕̠̦̼̗ͯ̽͌̔ͪͯ́́͋̍ͨ̿̿̎͒ͤ̓̅̀͂ͧ͋̏ͫͣ̔͘͜͠͏̶̵̸̧̧̥̺͓̘̺͎̜̥͕͈̝̫͎̺̮̱̤̠̠͖̳̻̥̣̪͍͕͇̮͙̹̪ͮͧͫ͂͒ͤͣ̌̽ͨͪ͒̄̄̉̒̊ͩ̅͆͘̚͘͘̚͟͟͝ͅ -------- 今天我们就来探讨一下这些奇怪的字符。 ### 一、文字可以戴帽子和穿鞋子 提起泰文，很多朋友都会立即想到：**萨瓦迪卡（你好）**。 但这句话是怎么写的呢？ 其实这句你好，男生和女生之间还有差异，男生写法是：``สวัสดีครับ``，女生则是：``สวัสดีค่ะ``。 不过这并不重要，重要的是，我们发现某些字的上面，还带了特殊的符号。就好像是戴上了帽子。 事实上，泰文字符不仅会“戴帽子”，偶尔还会“穿鞋子”。 比如下面三个字符：``ผ ผู ผู้`` 如果脑洞再大一点，有人就会想，那是不是还可以戴多顶帽子呢？ 的确如此…泰文允许你穿一双鞋子，并且戴两顶帽子。完整的形式是这样的：...
> 本文作者：IMWeb laynechen 原文出处：[IMWeb社区](http://imweb.io/topic/5b6817b5f6734fdf12b4b09c) **未经同意，禁止转载** 我们知道 Electron 提供了一个类似浏览器，但有更多权限的环境来运行我们的网页，那么 Electron 是怎么做到将我们的网页代码打包成一个可执行程序的呢？ 这篇文章主要介绍如何打包 Electron 应用，以及分析 `electron-builder` 是如何对我们的应用进行打包的。 # 如何打包 Electron 目前有两种打包工具：[electron-userland/electron-builder](https://github.com/electron-userland/electron-builder) 和 [electron-userland/electron-packager](https://github.com/electron-userland/electron-packager)。 ## 使用 electron-builder 打包 ### 安装依赖： ``` yarn add...
> 本文作者：IMWeb sugerpocket 原文出处：[IMWeb社区](http://imweb.io/topic/5b148768d4c96b9b1b4c4ea1) **未经同意，禁止转载** 众所周知，javascript 是单线程的，其通过使用异步而不阻塞主进程执行。那么，他是如何实现的呢？本文就浏览器与nodejs环境下异步实现与event loop进行相关解释。 # 浏览器环境 浏览器环境下，会维护一个任务队列，当异步任务到达的时候加入队列，等待事件循环到合适的时机执行。 实际上，js 引擎并不只维护一个任务队列，总共有两种任务 1. Task(macroTask): `setTimeout`, `setInterval`, `setImmediate`,` I/O`, `UI rendering` 2. microTask: `Promise`, `process.nextTick`, `Object.observe`, `MutationObserver`, `MutaionObserver` 那么两种任务的行为有何不同呢？ 实验一下，请看下段代码...
> 本文作者：IMWeb laynechen 原文出处：[IMWeb社区](http://imweb.io/topic/5b3b72ab4d378e703a4f4435) **未经同意，禁止转载** 在上一篇 [Electron 进程通信](http://imweb.io/topic/5b13a663d4c96b9b1b4c4e9c) 中，介绍了 Electron 中的两种进程通信方式，分别为： 1. 使用 `ipcMain` 和 `ipcRenderer` 两个模块 2. 使用 remote 模块 相比于使用两个 IPC 模块，使用 `remote` 模块相对来说会比较自然一点。`remote` 模块帮我们屏蔽了内部的进程通信，使得我们在调用主进程的方法时完全没有感知到主进程的存在。 上一篇 [Electron 进程通信](http://imweb.io/topic/5b13a663d4c96b9b1b4c4e9c)...
> 本文作者：IMWeb 黄qiong 原文出处：[IMWeb社区](http://imweb.io/topic/5b8df7db7cd95ea863193582) ## 前言 > 以下，是我在[2018 React Conf](https://note.youdao.com/) 的分享内容，希望对大家有所帮助。可以先在[官网](https://note.youdao.com/)下载我的ppt对照看，效果更佳哦~。 很多人都使用过React，但是很少人能说出它内部的渲染原理。有人会说，会用就行了，知道渲染原理有必要么？其实渲染原理决定着性能优化的方法，只有在了解原理之后，才能完全理解为什么这样做可以优化性能。正所谓：知其然，然后知其所以然。 废话不多说，下面我们就开始吧~ 本篇文章，将会分为四部分介绍： **JSX如何生成element** 当我们写下一段JSX代码的时候，react是如何根据我们的JSX代码来生成虚拟DOM的组成元素element的。 **element如何生成真实DOM节点** 再生成elment之后，react又如何将其转成浏览器的真实节点。这里会通过介绍首次渲染以及更新渲染的流程来帮助大家理解这个渲染流程。 **性能优化** 结合渲染原理，通过实际例子，看看如何优化组件。 **React 16异步渲染方案** 到目前为止，这些优化组件的方法还不能解决什么问题，所以我们需要引入异步渲染，以及异步渲染的原理是什么。 ##一、JSX如何生成element 这里是一段写在render里的jsx代码。 ``` return ( Hello, This...
> 本文作者：IMWeb howenhuo 原文出处：[IMWeb社区](http://imweb.io/topic/5b3f03f44d378e703a4f4456) **未经同意，禁止转载** 原文链接：[How To Master Advanced React Design Patterns: Compound Components](https://itnext.io/using-advanced-design-patterns-to-create-flexible-and-reusable-react-components-part-1-dd495fa1823) 为了庆祝 React 16.3 的正式发布，我决定分享我最近使用的一些技术，这些技术彻底改变了我创建 React 组件的方法。因此，我能够设计出完全可重用的组件，并且可以在许多不同的环境中灵活地使用这些组件。 [单击此处查看本系列的第2部分：Context API](http://imweb.io/topic/5b4088914d378e703a4f445e) [](https://codesandbox.io/embed/5x22900pnl?referrer=https%3A%2F%2Fitnext.io%2Fmedia%2F90a97a5f3dbfdc1ddac8890fa032a576%3FpostId%3Ddd495fa1823) 上面的 `sandbox` 是一个简洁的 `Stepper` 组件的初始代码，我将使用它来展示其中的一些技术。 就目前而言，这个组件完全正常工作，并且完全按照设计目的进行，但它缺乏灵活性。 ```...
> 本文作者：IMWeb howenhuo 原文出处：[IMWeb社区](http://imweb.io/topic/5b46e85e16519c67408b06a3) **未经同意，禁止转载** 原文链接：[How To Master Advanced React Design Patterns: Render Props](https://itnext.io/using-advanced-design-patterns-to-create-flexible-and-reusable-react-components-part-3-render-d7517dfe72bc) 在本系列的第1部分中，我们探讨了如何使用复合组件和静态类属性来构建可读可重用的 `Stepper` 组件。我们看到这种设计模式有一些局限性，因为它不是很灵活; 组件需要是父组件的直接子组件，否则 `props` 传递会中断。 [点击此处查看第1部分](http://imweb.io/topic/5b3f03f44d378e703a4f4456) 在第2部分中，我们使用新的 `Context API` 为第1部分的限制提供了优雅且可读的解决方案。可这种设计模式的问题在于它需要一些初始设置才能工作，并且我们的组件不能放在另一个应用程序中。 [点击此处查看第2部分](http://imweb.io/topic/5b4088914d378e703a4f445e) 在本部分中，我们将探讨一种设计模式，该模式可以解决到目前为止我们已经确定的所有问题。 它被称为：`render props`。 这种设计模式起初可能有点令人头疼（还记得我们在第2部分中使用的...