使用 GitLab CI/CD 和阿里云 CLI 自动部署前端项目

一、什么是 CI/CD?

CI(持续交付)是功能迭代后自动构建、打包、校验代码格式、跑单测、单测覆盖率,常见的就是 Webpack、Rollup、ESLint等。

CD(持续部署)是经过 CI 后,代码自动部署到服务器。

在 GitLab 中部署 CI、CD

GitLab CI/CD 通 .gitlab-ci.yml 配置文件来部署。

cd project_path

touch .gitlab-ci.yml

“使用 GitLab CI/CD 和阿里云 CLI 自动部署前端项目”继续阅读

使用 Golang & MurmurHash & JsonLogic 实现前端资源灰度分流

一、背景

在日常的前端开发中,倘若想验证一个业务功能正向性,需要针对部分用户进行灰度实验。

二、解决方案

方案 1:中转页

用一个轻量级的 H5 页面做流量中转,收集完用户信息后使用 Ajax 来请求后端接口来判断一个用户是否命中灰度,再通过 location.hreflocation.replace 来做相应的页面跳转。

优点:

  1. 适用于页面结构大不同的多个页面。

缺点:

  1. 两次页面加载页面,极其影响转化率。
  2. 不适用于只是模块小改的页面。

示例:

ajax.get('https://getwhich.com').then(
    abValue => {
        let jumpUrl = 'https://default.com'
        if (abValue === 'iAmExp') {
            jumpUrl = 'https://exp.com'
        }
        location.href = jumpUrl
    }
)

“使用 Golang & MurmurHash & JsonLogic 实现前端资源灰度分流”继续阅读

如何跳出 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

一、什么是 Promise

1.1 Promise 的前世今生

Promise 最早出现在 1988 年,由 Barbara LiskovLiuba Shrira 首创(论文:Promises: Linguistic Support for Efficient Asynchronous Procedure Calls in Distributed Systems)。并且在语言 MultiLispConcurrent Prolog 中已经有了类似的实现。

JavaScript 中,Promise 的流行是得益于 jQuery 的方法 jQuery.Deferred(),其他也有一些更精简独立的 Promise 库,例如:QWhenBluebird

# Q / 2010
import Q from 'q'

function wantOdd () {
    const defer = Q.defer()
    const num = Math.floor(Math.random() * 10)
    if (num % 2) {
        defer.resolve(num)
    } else {
        defer.reject(num)
    }
    return defer.promise
}

wantOdd()
    .then(num => {
        log(`Success: ${num} is odd.`) // Success: 7 is odd.
    })
    .catch(num => {
        log(`Fail: ${num} is not odd.`)
    })

由于 jQuery 并没有严格按照规范来制定接口,促使了官方对 Promise 的实现标准进行了一系列重要的澄清,该实现规范被命名为 Promise/A+。后来 ES6(也叫 ES2015,2015 年 6 月正式发布)也在 Promise/A+ 的标准上官方实现了一个 Promise 接口。

new Promise( function(resolve, reject) {...} /* 执行器 */  );

想要实现一个 Promise,必须要遵循如下规则:

  1. Promise 是一个提供符合标准then() 方法的对象。
  2. 初始状态是 pending,能够转换成 fulfilledrejected 状态。
  3. 一旦 fulfilledrejected 状态确定,再也不能转换成其他状态。
  4. 一旦状态确定,必须要返回一个值,并且这个值是不可修改的。

“讲讲 Promise”继续阅读

记一次 MySQL 崩溃的修复经历

这一天网站突然打不开报 MySQL 连接错误,上服务器后发现 MySQL 已经停止服务,各种启动无效。经历了一系列搜索和无效的工作后,去云服务上后台看监控,发现硬盘满了。于是得出结论硬盘空间不足会导致 MySQL 服务停止。

切到根目录下使用 du -sh * 查看各目录的占用情况,发现 /root/.pm2 在捣鬼。

20K    dump.pm2
16K    dump.pm2.bak
33G    logs
4.0K    module_conf.json
4.0K    modules
8.0K    pids
16G    pm2.log
4.0K    pm2.pid
0    pub.sock
0    reload.lock
0    rpc.sock
4.0K    touch

于是先删除日志文件,启动 MySQL 服务即可。

rm -rf logs/*
rm -rf pm2.log
service mysqld start

查看错误日志发现 Node 服务的某个模块不存在…

使用 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 快速打包项目”继续阅读