分类： JavaScript

如何跳出 reduce 循环

发表评论

方案 1：设置条件（flag）

const arr = [0, 1, 2, 3, 4]
const sum = arr.reduce((prev, curr, index, currArr) => {
    if (index >= 4) {
        return prev
    } else {
        prev += curr
        return prev
    }

}, 0)
console.log(sum) // 6

方案 2：循环过程中修改原始数组

const arr = [0, 1, 2, 3, 4]
const sum = arr.reduce((prev, curr, index, currArr) => {
    prev += curr
    if (curr === 3) currArr.length = 0
    return prev
}, 0)
console.log(sum) // 6

"如何跳出 reduce 循环"继续阅读

实现一个 template 方法

发表评论

输入两个参数:

  1. str: '哈哈，我是{{name}}，今年{{age}}岁啦。'
  2. data: { name: 'mazey', age: 18 }

执行 template(str, data)

输出: '哈哈，我是mazey，今年18岁啦。'

const str = '哈哈，我是{{name}}，今年{{age}}岁啦。'
const data = {
    name: 'mazey',
    age: 18
}

function template (str, data) {
   str = str.replace(/\{\{(.+?)\}\}/g, (...rest) => {
        console.log(rest) // ["{{name}}", "name", 5, "哈哈，我是{{name}}，今年{{age}}岁啦。"]
        return data[rest[1]]
    })
    return str
}

console.log(template(str, data)) // 哈哈，我是mazey，今年18岁啦。

"实现一个 template 方法"继续阅读

讲讲 Promise/实战

2 条评论

一、什么是 Promise

1.1 Promise 的前世今生

Promise 最早出现在 1988 年，由 Barbara Liskov、Liuba Shrira 首创（论文：Promises: Linguistic Support for Efficient Asynchronous Procedure Calls in Distributed Systems）。并且在语言 MultiLisp 和 Concurrent Prolog 中已经有了类似的实现。

JavaScript 中，Promise 的流行是得益于 jQuery 的方法 jQuery.Deferred()，其他也有一些更精简独立的 Promise 库，例如：Q、When、Bluebird。

"讲讲 Promise/实战"继续阅读

使用 Gulp 快速打包项目

发表评论

一、安装

npm install --save-dev gulp gulp-cli

二、创建配置文件 gulpfile.js

定义 Gulp 任务，从而使用 gulp ${taskName} 来运行他。

# npm pkg
npm install --save-dev gulp-uglify

# gulpfile.js
const gulp = require('gulp');
const uglify = require('gulp-uglify');

gulp.task('build', function () {
  return gulp
    .src('./src/index.js')
    .pipe(uglify())
    .pipe(gulp.dest('lib'));
});

# >_
npx gulp build

gulp.task() 定义任务名字。gulp.src() 方法存放源文件（本例 ./src/index.js），如果要处理多个文件要写成数组形式：gulp.src(['1.js', '2.js'])。通过管道 .pipe() 内的方法进行处理这些文件，最后通过 gulp.dest() 保存修改过的文件。

"使用 Gulp 快速打包项目"继续阅读

使用 peerDependencies 缩减项目体积

发表评论

一、什么是 peerDependencies

peerDependencies 存在于 NPM 的 package.json 中，如果项目中依赖模块 X、模块 Y，模块 Y 又依赖模块 X，当模块 X 出现版本冲突的时候，则会打包出 X 的两份代码。在这个模块 Y 里面使用 peerDependencies 引入模块 X，这样当前项目和模块 Y 便会共用这个模块 X。

当在 peerDependencies 引入一个模块后：

  1. 当前的代码将与符合版本条件的模块和谐相处。
  2. 如何这个模块已经存在于项目的 node_modules 中，什么也不提示。
  3. 如何这个模块不存在于项目的 node_modules 中，警告用户缺少此模块，但是不自动安装。

注意： npm i 并不会自动安装 peerDependencies 里的模块，所以开发模块的需要在 devDependencies 同步添加相应模块。

二、什么场景下适合引入 peerDependencies

  1. 多份模块代码的重复加载易引发冲突。
  2. 依赖在项目中是可见的。
  3. 可以让开发者自己决定安装哪个版本。

"使用 peerDependencies 缩减项目体积"继续阅读

使用 requestIdleCallback 优化埋点数据上报

发表评论

一、什么是 requestIdleCallback？

requestIdleCallback 接收回调函数，在浏览器的空闲时段调用，这样既不阻塞关键性事件，又能保证低优任务的时效性。

二、使用 requestIdleCallback

可以像使用 setTimeout 一样使用 requestIdleCallback，区别是 requestIdleCallback 中的回调函数可以接收当前剩余空闲时间，以便合理利用这段时间来处理队列任务。一般会在回调函数内再次调用 requestIdleCallback，以便在下次空闲时间段继续执行剩余的任务。

"使用 requestIdleCallback 优化埋点数据上报"继续阅读

实现 new

发表评论

正常 new 一个实例：

# 场景一
function foo () {
    this.a = 1
}
foo.prototype.b = 2
const bar = new foo()
console.log(bar) // {a: 1}
console.log(bar.b) // 2

# 场景二 构造函数返回一个对象
function foo () {
    this.a = 1
    return {a: 2}
}
const bar = new foo()
console.log(bar) // {a: 2}

"实现 new"继续阅读