1. Python技术站首页
  2. GitHub

20170918 前端开发周报之JS前端开发必看

• GitHub
yizhihongxing

“20170918 前端开发周报之JS前端开发必看”攻略

前言

“20170918 前端开发周报之JS前端开发必看”是一篇总结了近期前端开发领域重要进展的周报，其中包含了一些值得前端开发者关注的内容和示例。本文将对其中的两个示例进行详细讲解，并分享相应的代码实现。

示例一：用JavaScript实现一个命令行画图程序

该示例介绍了如何使用JavaScript实现一个简单的命令行画图程序，可以通过控制台输入指令来产生不同的图形。下面是具体的实现步骤：

  1. 首先定义一个对象canvas来表示画布，其中包含两个属性：width表示画布的宽度，height表示画布的高度。

javascript
const canvas = {
width: 20,
height: 10
};

  1. 定义一个二维数组buffer来表示画布上的每个点存储的值，初始值为0。

javascript
const buffer = [];
for (let i = 0; i < canvas.height; i++) {
buffer[i] = [];
for (let j = 0; j < canvas.width; j++) {
buffer[i][j] = 0;
}
}

  1. 定义一个函数render用于将画布上的点渲染出来，即在控制台打印出一个表示画布的字符串。这个函数通过遍历buffer数组来实现。

javascript
function render() {
let result = '';
for (let i = 0; i < canvas.height; i++) {
for (let j = 0; j < canvas.width; j++) {
result += buffer[i][j] ? '*' : ' ';
}
result += '\n';
}
console.log(result);
}

  1. 定义若干个函数来实现不同的绘图指令，比如画水平线、画垂直线、画矩形等等。以画矩形为例：

javascript
function drawRect(x1, y1, x2, y2) {
for (let i = y1; i <= y2; i++) {
for (let j = x1; j <= x2; j++) {
buffer[i][j] = 1;
}
}
}

  1. 在控制台接收用户输入的指令，并根据指令调用相应的绘图函数。

```javascript
const readline = require('readline');

const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
});

rl.on('line', line => {
const args = line.split(' ');
const command = args.shift();
switch (command) {
case 'rect':
drawRect(...args.map(Number));
render();
break;
// ... 其他绘图指令
}
});
```

示例二：使用ES6重构Promise

该示例介绍了如何使用ES6的新语法重构Promise。ES6让Promise的写法更加简洁、清晰，使得异步编程变得更加易于理解和维护。下面是具体的实现步骤：

  1. 定义一个类MyPromise来表示Promise。

```javascript
class MyPromise {
constructor(executor) {
// ...
}

   then(onResolved, onRejected) {
       // ...
   }

   catch(onRejected) {
       // ...
   }

}
```

  1. 在MyPromise的构造函数中，定义一个变量state来表示Promise的状态，初始值为'pending'；定义一个变量value来存储Promise的结果（成功时是一个值，失败时是一个错误对象）；定义一个数组callbacks来存储所有需要调用的回调函数。

```javascript
class MyPromise {
constructor(executor) {
this.state = 'pending';
this.value = null;
this.callbacks = [];
// ...
}

   then(onResolved, onRejected) {
       // ...
   }

   catch(onRejected) {
       // ...
   }

}
```

  1. 在MyPromise的构造函数中，定义两个方法resolve和reject，分别用来改变Promise的状态为成功或失败，并触发回调函数。

```javascript
class MyPromise {
constructor(executor) {
this.state = 'pending';
this.value = null;
this.callbacks = [];

       const resolve = value => {
           if (this.state !== 'pending') {
               return;
           }

           this.state = 'fulfilled';
           this.value = value;

           this.callbacks.forEach(({ onResolved }) => {
               onResolved(value);
           });
       };

       const reject = reason => {
           if (this.state !== 'pending') {
               return;
           }

           this.state = 'rejected';
           this.value = reason;

           this.callbacks.forEach(({ onRejected }) => {
               onRejected(reason);
           });
       };

       executor(resolve, reject);
   }

   then(onResolved, onRejected) {
       // ...
   }

   catch(onRejected) {
       // ...
   }

}
```

  1. 在then方法中，根据当前Promise的状态来判断是调用onResolved还是onRejected。如果状态是成功，调用onResolved并返回一个新的Promise；如果状态是失败，调用onRejected并返回一个新的Promise。

```javascript
class MyPromise {
constructor(executor) {
this.state = 'pending';
this.value = null;
this.callbacks = [];

       const resolve = value => {
           if (this.state !== 'pending') {
               return;
           }

           this.state = 'fulfilled';
           this.value = value;

           this.callbacks.forEach(({ onResolved }) => {
               onResolved(value);
           });
       };

       const reject = reason => {
           if (this.state !== 'pending') {
               return;
           }

           this.state = 'rejected';
           this.value = reason;

           this.callbacks.forEach(({ onRejected }) => {
               onRejected(reason);
           });
       };

       executor(resolve, reject);
   }

   then(onResolved, onRejected) {
       return new MyPromise((resolve, reject) => {
           if (this.state === 'fulfilled') {
               try {
                   const result = onResolved(this.value);
                   if (result instanceof MyPromise) {
                       result.then(resolve, reject);
                   } else {
                       resolve(result);
                   }
               } catch (error) {
                   reject(error);
               }
           } else if (this.state === 'rejected' && onRejected) {
               try {
                   const result = onRejected(this.value);
                   if (result instanceof MyPromise) {
                       result.then(resolve, reject);
                   } else {
                       resolve(result);
                   }
               } catch (error) {
                   reject(error);
               }
           } else {
               this.callbacks.push({ onResolved, onRejected });
           }
       });
   }

   catch(onRejected) {
       return this.then(null, onRejected);
   }

}
```

  1. 在catch方法中，调用then方法，传入null作为onResolved，并传入onRejected作为onRejected，从而实现捕获Promise的异常情况。

```javascript
class MyPromise {
constructor(executor) {
this.state = 'pending';
this.value = null;
this.callbacks = [];

       const resolve = value => {
           if (this.state !== 'pending') {
               return;
           }

           this.state = 'fulfilled';
           this.value = value;

           this.callbacks.forEach(({ onResolved }) => {
               onResolved(value);
           });
       };

       const reject = reason => {
           if (this.state !== 'pending') {
               return;
           }

           this.state = 'rejected';
           this.value = reason;

           this.callbacks.forEach(({ onRejected }) => {
               onRejected(reason);
           });
       };

       executor(resolve, reject);
   }

   then(onResolved, onRejected) {
       return new MyPromise((resolve, reject) => {
           if (this.state === 'fulfilled') {
               try {
                   const result = onResolved(this.value);
                   if (result instanceof MyPromise) {
                       result.then(resolve, reject);
                   } else {
                       resolve(result);
                   }
               } catch (error) {
                   reject(error);
               }
           } else if (this.state === 'rejected' && onRejected) {
               try {
                   const result = onRejected(this.value);
                   if (result instanceof MyPromise) {
                       result.then(resolve, reject);
                   } else {
                       resolve(result);
                   }
               } catch (error) {
                   reject(error);
               }
           } else {
               this.callbacks.push({ onResolved, onRejected });
           }
       });
   }

   catch(onRejected) {
       return this.then(null, onRejected);
   }

}
```

以上就是使用ES6重构Promise的实现过程。重构后的Promise更加简洁易懂，可以让我们更加方便地进行异步编程。

总结

本文对“20170918 前端开发周报之JS前端开发必看”中的两个示例进行了详细的讲解，包括命令行画图程序的实现和Promise重构的实现。希望读者通过这两个示例，掌握一些新的前端开发技巧和思路。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：20170918 前端开发周报之JS前端开发必看 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月16日
下一篇 2023年5月16日

相关文章

  • vue调试工具vue-devtools安装及使用方法

    接下来我将详细讲解“vue调试工具vue-devtools安装及使用方法”的完整攻略，包含安装和使用方法以及两条示例说明。 1. 安装vue-devtools vue-devtools是一个基于Chrome和Firefox浏览器的扩展程序，需要先安装浏览器扩展，然后才能在Vue的应用程序中使用。 1.1 Chrome浏览器 打开Chrome浏览器，进入Chr…

    GitHub 2023年5月16日
    00

  • 解决fcitx输入法在IDEA中输入法候选框无法跟随光标移动的问题

    当在IntelliJ IDEA中使用fcitx输入法时，可能会遇到一个问题，就是输入法候选框无法跟随光标移动。这种情况下，用户需要关闭IntelliJ IDEA的”勾选 ideavim”功能，来解决fcitx输入法在IDEA中输入法候选框无法跟随光标移动的问题。下面是具体的解决步骤。 步骤一：关闭IntelliJ IDEA的”勾选 ideavim”功能 在开…

    GitHub 2023年5月16日
    00

  • Golang中Gin框架的使用入门教程

    下面详细讲解“Golang中Gin框架的使用入门教程”的完整攻略。 一、Gin框架介绍 Gin是一个高性能的Go语言Web框架, 旨在提供简洁的API操作和高效的路由处理。 Gin的API易于使用，Goroutine友好，并提供了一种方便的设计模式来处理各种Web路由，并将HTTP请求传递给正确的处理程序。 二、Gin框架的安装 要开始使用Gin框架，您需要…

    GitHub 2023年5月16日
    00

  • 在Ubuntu Linux上安装和使用Git和GitHub

    在Ubuntu Linux上安装和使用Git和GitHub的完整攻略如下： 安装Git 首先需要在Ubuntu Linux上安装Git，可以通过终端命令来进行安装： sudo apt-get install git 配置Git 安装完成后需要进行Git的配置，主要包括配置用户名和邮箱地址： git config –global user.name &quo…

    GitHub 2023年5月16日
    00

  • git中ssh key配置详解

    下面我将为您详细讲解“git中ssh key配置详解”的完整攻略，包含两条示例说明。 Git中SSH Key配置详解 在使用Git进行代码管理时，我们通常会使用SSH Key来进行身份验证，这样能够提供更加安全的代码管理。下面是如何在几个常见的操作系统上生成SSH Key并将其添加到Git账户中的详细步骤。 生成SSH Key 在Linux或Mac上生成SS…

    GitHub 2023年5月16日
    00

  • go mayfly开源项目代码结构设计

    下面我会详细讲解“go mayfly开源项目代码结构设计”的完整攻略，其中会包含两条示例说明。 go mayfly开源项目介绍 首先，我们需要了解一下go mayfly开源项目，它是一款专门为小型实时web应用程序设计的框架，具有高效、轻量、易于使用等特点。因此，go mayfly的代码结构设计也应该具备这些特点。 go mayfly代码结构设计概述 接下来…

    GitHub 2023年5月16日
    00

  • 1分钟将vscode撸成小霸王的方法

    下面是详细的攻略： 一、安装 首先，你需要下载并安装 Visual Studio Code。安装成功后，打开 VS Code，我们来开始撸小霸王吧！ 二、配置 1. 安装插件 VS Code 带有丰富的插件系统，可以让你用最简单的方式配置环境、编辑代码。在这里，我们推荐以下插件： Chinese (Simplified) Language Pack for …

    GitHub 2023年5月16日
    00

  • JavaScript复原何同学B站头图细节示例详解

    下面我会详细讲解“JavaScript复原何同学B站头图细节示例详解”的完整攻略，包含两条示例说明。 问题背景 最近，一张名为“何同学”的B站UP主的头部图片在社交平台上热传，该图片的特点是有许多细节和交互效果，因此引起了设计师和前端开发人员的广泛关注和模仿。其中，许多人使用了JavaScript来实现这些细节和交互效果，本文的目的是讲解如何使用JavaSc…

    GitHub 2023年5月16日
    00
合作推广
合作推广
分享本页
返回顶部