issue-blog
issue-blog copied to clipboard
SunShinewyf
技术积累和沉淀
> 前言：[egg-bin](https://github.com/eggjs/egg-bin)是一个本地开发者工具，集成到`egg`中，里面涵盖了很多功能，比如调试，单元测试和代码覆盖率等这些功能，可以说是比较强大了。 下面就`egg-bin`源码分析一些东西（针对的是 4.3.0 的版本） ### `egg-bin`如何工作的 在本地运行`egg`项目的时候，我们往往会根据不同的场景（调试，测试等）来选择不同的命令（`egg-bin dev、egg-bin debug`)启动项目，从而达到我们需要的效果，但是`egg-bin`是如何让命令运作起来的呢？ 比如在命令行中回车下面的命令： ```js $ egg-bin dev --port 7001 ``` 开始进入`node_modules/egg-bin/bin/egg-bin.js`文件,文件代码比较简单： ```js #!/usr/bin/env node 'use strict'; const Command = require('..'); new Command().start();...
> 在项目过程中，对 react-router 这个库了解甚少，只是停留在一些基础的用法层面，源码层面的东西还是云里雾里，对它如何运作的原理也是知之甚少，所以趁着最近修 bug 的空档期深入学习一下。 此文基于 react-router 4 进行讲解，如果对 react-router 还不太熟悉的童鞋可以移步 初探 React Router 4.0 和 react-router 的 API 文档地址 先学习一下。 ## react-router-dom 和 react-router react-router-dom 中包含了 web 端所有路由相关的东西，它基于...
> 最近在需求开发的过程中，踩了很多因为更新引用数据但是页面不重新渲染的坑，所以对这块的内容进行深入探究了一下。 在谈及 Immutable 数据之前，我们先来聊聊 React 组件是怎么渲染更新的。 ### React 组件的更新方式 ### state 的直接改变 React 组件的更新是由状组件态改变引起，这里的状态一般指组件内的 state 对象，当某个组件的 state 发生改变时，组件在更新的时候将会经历如下过程： - shouldComponentUpdate - componentWillUpdate - render() - componentDidUpdate state 的更新一般是通过在组件内部执行 this.setState...
> 最近在研究代码重构之路，发现自己的一些代码写得有点丑陋而且可读性不强，于是去学习了一些经验，整理如下 可读性强而且简洁的代码让人有阅读的欲望，也可以显示出代码的一种美感，同时便于后期的维护和扩展。如何让其他人看到你的代码不难受、易接受，是开发者的一种能力，也是一种修养~ ## 变量 ### 起有含义的变量名 通过对变量取有含义的名字，不仅可以免除注释带来的代码不美观的弊端，还能提高可读性。所谓顾名思义，就是这个道理。 ```javascript //Bad const yyyymmdstr = moment().format('YYYY/MM/DD'); //Good const currentDate = moment().format('YYYY/MM/DD'); //遍历的情况 //Bad tagList.forEach(i=>{ doSomething(i); }) //Good tagList.forEach(tag=>{ doSomething(tag); }) ``` ###...
>最近在一些项目中遇到高阶组件的身影，不是很了解，于是深入钻研了一番，以下权当是学习记录了~ 在谈及高阶组件之前,我们先来讲讲它的前身 mixin ~ mixin 的作用是：如果多个组件中包含相同的方法（包括普通函数和组件生命周期函数），就可以把这一类函数提取到 mixin 中，然后在需要公共方法的组件中使用 mixin, 就可以避免每个组件都去声明一次，从而达到复用。 React 在早期是使用 createClass 来创建一个 Component 的，而且 createClass 支持 mixin 属性，最常见的就是 react-addons-pure-render-mixin 库提供的 PureRenderMixin 方法，用来减少组件使用中一些不必要的渲染，使用方式如下： ```js import PureRenderMixin from 'react-addons-pure-render-mixin'; React.createClass({...
React 在触发更新的时候执行的主要[源码](https://github.com/facebook/react/blob/f33f03e3572d11e6810f4ce110eb3af97cbd24a8/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js#L792) 精简主要代码如下： ```js updateComponent: function( transaction, prevParentElement, nextParentElement, prevUnmaskedContext, nextUnmaskedContext ) { var inst = this._instance; var willReceive = false; var nextContext; //省略 var prevProps = prevParentElement.props; var nextProps...
> redux-saga 是一个管理 Redux 应用异步操作的中间件，功能类似`redux-thunk + async/await`, 它通过创建 Sagas 将所有的异步操作逻辑存放在一个地方进行集中处理。 ### redux-saga 的 effects redux-saga中的 Effects 是一个纯文本 JavaScript 对象，包含一些将被 saga middleware 执行的指令。这些指令所执行的操作包括如下三种： - 发起一个异步调用（如发一起一个 Ajax 请求） - 发起其他的 action 从而更新...
dva 初探 >前言： 最近正在学习 dva ,整理出一些学习笔记，笔者默认阅读此文的读者有一定的react , redux , redux-saga 基础，如果没有，可先自行了解这些技术，本文不再赘述。 ### 什么是 dva dva是基于现有应用框架（`redux`+`react-router`+`redux-saga`等）封装的一个框架（不是库），基本上没有引入新概念，也没有创建新语法，对于熟悉前言中涉及的技术栈的童鞋来说会非常容易上手。详细介绍可移步[dva介绍](https://github.com/dvajs/dva/issues/1) ### 为什么会有 dva 在处理复杂异步请求的业务中，一开始我们是使用 redux-thunk + async/await 结合使用，比如在异步登录的逻辑中，使用 redux-thunk 处理如下： ```js // action/auth.js import request...
> `process`对象是一个`global`（全局变量），它对于`Node.js`应用程序始终是可用的，所以在使用时无需使用`require()`。 对于`process`部分的API,这里不详细讲，具体可移步[这里](https://nodejs.org/dist/latest-v8.x/docs/api/process.html) ### node 中的 console.log `js`中的`console.log`和`node`中的`console.log`还是有一些区别的。 `js`中的`console.log`在一些情况下执行时存在异步情况，根据《你不知道的JavaScript中卷》中的描述： > 并没有什么规范或一组需求指定console.* 方法族如何工作——它们并不是JavaScript 正式 的一部分，而是由宿主环境（请参考本书的“类型和语法”部分）添加到JavaScript 中的。因此，不同的浏览器和JavaScript 环境可以按照自己的意愿来实现，有时候这会引起混淆。 > 尤其要提出的是，在某些条件下，某些浏览器的console.log(..) 并不会把传入的内容立即输出。出现这种情况的主要原因是，在许多程序（不只是JavaScript）中，I/O 是非常低速的阻塞部分。所以，（从页面/UI 的角度来说）浏览器在后台异步处理控制台I/O 能够提高性能，这时用户甚至可能根本意识不到其发生。 > 下面这种情景不是很常见，但也可能发生，从中（不是从代码本身而是从外部）可以观察到这种情况： PS:可以试试这个 ```js var a = {...
> `node.js`中的模块机制是基于`CommonJs`，对于`CommonJs`的`module`部分，可以戳[这里](http://wiki.commonjs.org/wiki/Modules/1.1.1)进行查看。 ### 模块的加载规范 对于`js`的模块部分，有好多这方面的文章，所以在这里我就不再赘述了，对于几种模块的加载规范之间的差别，可移步[这里](https://www.zhihu.com/question/20351507/answer/14859415) ### 简述 `module` 定义 在`node`中，每一个文件都被当成一个独立的模块，而且每个模块都有自己的作用域，这就很好地保证了不同模块之间变量的相互污染。因为每个模块被`node`包装成如下所示： ```js (function (exports, require, module, __filename, __dirname) { //the code of singal file }); ``` `exports`属性上的任何方法和属性都可以在外部被调用，模块中的其余变量或属性则不可直接被调用。但是被加载模块中的全局变量可以被外部调用 ```js //a.js name =...