CSS 实现内容高度不够的时候底部（footer）自动贴底

发表评论

在 UI 切图过程中，页面往往由三个部分组成，头部、内容和底部。当页面的内容高度不够撑满屏幕，底部（footer）就跟着内容浮动上来了，小屏幕由于高度有限看不出来异常，但如果是大屏的话，底部下面变会多出很多空白，非常影响美观。

方案 1：Flex-Box

头部使用 position: sticky; 吸顶，再使用盒子（main）来包住内容（container > content）和底部（footer），这个盒子设置最小高度为除头部外的剩余屏幕高度：min-height: calc(100vh - 50px);，盒子里面使用弹性布局（flex: 1 1 auto;）让内容区域自动撑开，而底部保持不变（flex: 0 0 auto;），这样就有了内容不够时底部自动吸底，内容足够时底部自动下移的效果。

"CSS 实现内容高度不够的时候底部（footer）自动贴底"继续阅读

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

1 条评论

一、什么是 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 自动部署前端项目"继续阅读

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

发表评论

一、背景

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

二、解决方案

方案 1：中转页

用一个轻量级的 H5 页面做流量中转，收集完用户信息后使用 Ajax 来请求后端接口来判断一个用户是否命中灰度，再通过 location.href 或 location.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
    }
)

"使用 Go&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 方法"继续阅读