标签归档:JavaScript

JavaScript 异步流程控制的知识点整理

在写信息管理系统的时候,经常需要等待前面的任务执行完,比如最常见的Ajax请求后做弹窗提示,又或者是多个Ajax需要并行/串行执行操作等。

因为JS是单线程语言,所以在整个执行环境都依靠EventLoop。因此,实现异步除了最基本的Callback回调函数,社区还开发了Promise、Async/Await等语法糖或者库,我写一篇文章整理一下工作以来接触到的异步知识

Callback 回调函数

异步控制接触最早的,其实就是这个Callback回调函数,代码示例如下

// JQuery的Ajax请求
$.ajax({
   url: '/api/system/login',
   params: {},
   success: () ={
      console.log('在异步Ajax请求成功之后,会调用到此回调函数');
   }
});

// setTimeout/setInterval绑定回调函数
setTimeout(()={
    console.log('两秒之后会调用到此函数');
},2000)

// Node.js 经常的回调函数以及传参
var fs = require('fs');

fs.readFile('test.txt', 'utf-8', function(err, data) {
    // 这里同样绑定了回调函数,Node.js设计一般第一个参数是err,第二个参数是data数据等
    if(err) 

Redux数据流框架介绍,构建易维护的单向数据流

React本身是一个View层,尽管借助prop属性和事件,能够完成父子组件之间的通信,但是在一个逻辑复杂的系统里,往往DOM的层次很深,如果每一层都传递一遍prop,开发效率就会有所下降。

这个时候,我们需要有一个专门管理数据流的框架来处理——Redux,通过Store/Dispatch/Reducers等概念,将整个数据流进行抽象。除此之外,还能加一些中间件(middleware)来进行拦截操作。下面我整理一下我使用Redux以来的一些知识点

1, 安装Redux依赖

基础框架可以使用我的开源仓库https://github.com/tun100/webpack-configure-react,并且在package.json里添加以下依赖,并且执行命令cnpm i -S -D

    "react-redux": "^5.0.5",
    "redux": "^3.7.2",
    "redux-saga": "^0.15.6",

2,最简单的Redux配置

首先,在import顶部增加以下代码

import React, { useEffect, useState, useContext, PureComponent, Component } from 'react';
import ReactDOM from 'react-dom';
import { Provider, connect } from "react-redux";
import { 

手动配置webpack 4.x,定义属于自己的脚手架

概述

webpack作为一个构建工具是非常优秀的,提供了多页面、Plugin、Loader等功能,而且还有基于webpack的零配置工具(如create-react-app)等。在webpack应用如此广泛的情况下,我觉得有必要深入了解webpack并从零开始配置,因为至少出了问题能很快的找到异常配置并快速修改好。之前搭建webpack也好多次了,但是没有进行总结。这次决定从头开始搭建,然后边操作边记录

之前还用过Parcel等新秀解决方案,它讲究的是零配置,用过在一些小项目上,但貌似还不太稳定,经常会出编译错误,所以又跑回了webpack的怀抱^_^

测试环境

Node.js: 8.14.0

Npm: 6.4.1

已搭建好环境的仓库

为了方便随时Clone出webpack编译环境,我把最终环境部署在Github仓库上了,
地址是:https://github.com/tun100/webpack-basic-frame

依赖初始化

npm init -y

然后将下面的依赖信息添加到package.json(因为不同依赖版本的差异,容易导致bug,如果使用我的这个依赖,我确信肯定能构建环境成功^_^),在添加成功之后执行npm i -S && npm i -D

   "scripts": {
     "dev": "npx webpack-dev-server --config ./webpack.dev.config.js --progress --profile --colors --watch --mode development",
     "dist": "npx webpack --config