一、初始化 NPM 项目
# npm npm init # git git init
二、安装 TypeScript
npm i typescript --save-dev # 查看版本 npx tsc --version
三、初始化配置文件 tsconfig.json
npx tsc --init
"创建一个新的 TypeScript 项目"继续阅读
分类： 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 方法
输入两个参数:
- str:
'哈哈，我是{{name}}，今年{{age}}岁啦。' - 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/实战
一、什么是 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 引入一个模块后：
- 当前的代码将与符合版本条件的模块和谐相处。
- 如何这个模块已经存在于项目的
node_modules中，什么也不提示。 - 如何这个模块不存在于项目的
node_modules中，警告用户缺少此模块，但是不自动安装。
注意： npm i 并不会自动安装 peerDependencies 里的模块，所以开发模块的需要在 devDependencies 同步添加相应模块。
二、什么场景下适合引入 peerDependencies
- 多份模块代码的重复加载易引发冲突。
- 依赖在项目中是可见的。
- 可以让开发者自己决定安装哪个版本。
"使用 peerDependencies 缩减项目体积"继续阅读
使用 requestIdleCallback 优化埋点数据上报
一、什么是 requestIdleCallback？
requestIdleCallback 接收回调函数，在浏览器的空闲时段调用，这样既不阻塞关键性事件，又能保证低优任务的时效性。
二、使用 requestIdleCallback
可以像使用 setTimeout 一样使用 requestIdleCallback，区别是 requestIdleCallback 中的回调函数可以接收当前剩余空闲时间，以便合理利用这段时间来处理队列任务。一般会在回调函数内再次调用 requestIdleCallback，以便在下次空闲时间段继续执行剩余的任务。
"使用 requestIdleCallback 优化埋点数据上报"继续阅读