一些关于前端、技术，和我的生活的文字

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

Category: Others - Page 5 | Spark1e的个人博客

### 已解决

* Q: 用JS实现一个函数，能使输入特定的字符串转化为特定结构化数据。

  字符串仅由小写字母和`[,]`构成，且字符串不包含多余的空格

  示例一：`'abc'` -> `{value:'abc'}`

  示例二：`'[abc[bcd[def]]]'`-> `{value:'abc',children:{value:'bcd',children:{value:'def'}}}`

  A:

  ```javascript
  // 类比AST，将输入转换为一系列操作
  function normalize(str) {
    let parent = {}
    // 所有括回均不需要，直接移除
    parent.children = _normalize(str.replace(/\]/g, ''))
    return parent.children
  }
  
  function _normalize(str) {
    // [abc[bcd[def]]] => {value: "abc", children: {value: "bcd", children: {value: "def"}}}
    // 不具有树形结构直接返回
    let obj = {}
    if(str.charAt(0) !== '[') {
      obj.value = str
      return obj
    }
    // '['开始, 找到之后的连续字符串
    let arr = str.split('[')
    let _val = arr[1]
    // 截取剩下的部分再进行递归
    let rest = ''
    for(let i = 2; i < arr.length; i++) {
      rest = rest + '[' +arr[i]
    }
    if (rest === '') {
      return {value: _val}
    }
    return {value: _val, children: _normalize(rest)}
  }
  
  normalize('[abc[bcd[def]]]')
  // normalize('def')
  ```
  
* Q: 模仿lodash内调用curry函数，实现一个myCurry？

  A:

  > 墙裂推荐这篇[译文](https://www.jianshu.com/p/822c4bfeb8a9)，将柯里化的思考过程逐步展现出来
  
  > 本题解法来自《JavaScript轻量级函数式编程》

  ```javascript
  // lodash: _.curry(func, [arity=func.length])
  // 实现两点：1. 参数复用——可固定参数，2. 延迟计算——返回最终函数触发计算
  // 原型实现：
  function curry(fn, arity = fn.length) {
    return (function nextCurried(prevArgs) {
      return function curried(nextArg) {
        var args = prevArgs.concat([nextArg])
        if(args.length >= arity) {
          return fn(...args)
        } else {
          return nextCurried(args)
        }
      }
    })([])
  }
  // 注意：偏函数partial(add, 3)和柯里化curry(add)(3)的区别
  ```
  
* Q: 在不使用slice，replace等原生函数的情况下，实现一个indexOf方法（本题来自“司徒正美”的[博客](https://www.cnblogs.com/rubylouvre/archive/2011/08/19/2144894.html)）？

  A:
  ```javascript
  function getSubStrArr(str, length) {
    var subStrArr = []
    if(!length || length === 0) return subStrArr;
    for (var i = 0; i < str.length - length + 1; i++) {
      if(length > 1) {
        var tmp = [];
        for(var j = 0; j < length; j++) {
          tmp.push(str.charAt(i + j));
        }
        subStrArr.push(tmp.join(''));
      } else {
        subStrArr.push(str.charAt(i));
      }
    }
    return subStrArr;
  }

  function myIndexOf(str, target) {
    if(target === '' || target === undefined) return flag;
    var flag = -1
    var subStrArr = getSubStrArr(str, target.length);
    for(var i = 0; i < subStrArr.length; i++) {
      if(subStrArr[i] === target) {
        flag = i
      }
    }
    return flag
  }
  console.log(myIndexOf('abcdefgh', 'cde'))
  ```
  
* Q: 简单手写实现bind

  A: 见 [实现bind](https://blog.sparking.app/post?id=fe%252Fspeaking-javascript-%25E9%2598%2585%25E8%25AF%25BB%25E7%25AC%2594%25E8%25AE%25B0-%25E4%25B8%2589)
  
* Q: 如何获取两个时间（格式如: 2001-01-30）中间相差的年月日（提供三个精度）

  A:
  ```javascript
  // 这道题投机的方式是通过字符串与年月日格式的硬匹配完成，但是如果要求多种精度，则需要很繁琐，建议使用Date
  function parseDate(str) {
    let strArr = str.split('-')
    if(strArr.length !== 3 || parseInt(strArr[0]) < 1970 || parseInt(strArr[1]) > 11 || parseInt(strArr[2]) > 31 ) { // 简单处理，兼容如果当月没有此日期
      throw new Error('日期格式非法')
    }
    let date = new Date(strArr[0], strArr[1]-1, strArr[2])
    return date;
  }

  // 深拷贝日期对象
  function dateToString(_date, unit) {
    var _d = new Date(_date.valueOf());
    var _dStr = ''
    if(unit > 0) _dStr += _d.getFullYear();
    if(unit > 1) _dStr += ('-' + (parseInt(_d.getMonth()) + 1 >= 10 ? (parseInt(_d.getMonth()) + 1).toString() : '0' + (parseInt(_d.getMonth()) + 1).toString()));
    if(unit > 2) _dStr += ('-' + (parseInt(_d.getDate()) >= 10 ? parseInt(_d.getDate()).toString() : '0' + parseInt(_d.getDate()).toString()));
    return _dStr;
  }

  // unit指精度, 从1-3分别指年月日，函数返回一个数组，包含中间所有的相差的日子
  function minorDates(start, end, unit) {
    var _u = unit || 3;
    var _start = parseDate(start)
    var _end = parseDate(end)
    var _minors = []
    var _minorDate = _end - _start
    var step = 24 * 60 * 60 * 1000; // default 一天
    if(_minorDate <= 0) {
      return _minors
    } else {
      for(var i = 0; i < _minorDate / step; i++) {
        var _d = dateToString(new Date(_start.getTime() + i * step), unit)
        if(_minors.indexOf(_d) === -1) _minors.push(_d);
      }
    }
    return _minors
  }

  console.log(minorDates('2019-02-25', '2020-02-25', 3))
  ```

### 来自前端面试周报的题

> 本篇主要记录 Github airuikun/[**Weekly-FE-Interview **](https://github.com/airuikun/Weekly-FE-Interview) 仓库内的优秀面试题我自己的解法，会持续更新，但是不会每题都解一遍，建议可以访问源仓库。

* Q: 简单手写实现Promise

  A:

  ```javascript
  // 实现主要三个功能，thenable，resolve，reject，catch，finally
  ```
* Q: 简单手写实现Async/Await

  A:

  ```javascript
  
  ```

### [掘金](https://juejin.im/) 日常浏览的题目

* Q: Promise题

  **限制异步操作的并发个数并尽可能快的完成全部**

  有8个图片资源的url，已经存储在数组urls中。

  urls类似于`['https://image1.png', 'https://image2.png', ....]`

  而且已经有一个函数function loadImg，输入一个url链接，返回一个Promise，该Promise在图片下载完成的时候resolve，下载失败则reject。
  但有一个要求，任何时刻同时下载的链接数量不可以超过3个。请写一段代码实现这个需求，要求尽可能快速地将所有图片下载完成。

  > 作者：LinDaiDai_霖呆呆
  >
  > 链接：https://juejin.im/post/5e58c618e51d4526ed66b5cf
  >
  > 来源：掘金

  A:

  ```javascript
  // 最优解法可以往瀑布流靠拢，有一个三个任务race的池，当一个完成时加入一个未开始的开始。
  ```

### 大厂面试题

_本节内容来自网络_

前端部分面试题解（不定期更新）

## SaaS (软件即服务：Software as a Service)

> 举个不是非常恰当的例子，我想吃汉堡，我去汉堡店直接点汉堡，这是提供了“产品”来使用。

比如“石墨文档”这一类的在线应用，使用了他人提供好的成品软件，底层硬件和运行环境都交由平台管理，这种模式可以称为SaaS。

## PaaS (平台即服务：Platform as a service)

> 还是汉堡的例子，我觉得汉堡店的汉堡没那味儿，找了个可以DIY的店，这家店不提供成品的汉堡，但是会给我炉灶、炊具之类的，还有相关的材料，我可以自己做出自己需要的汉堡，这里提供了“平台”。

比如国外已经商业化的平台Heroku，这里并不需要用户去配置底层的硬件，只需要在容器内编写业务所需的代码即可。底层的操作系统、语言支持、硬件环境均由平台管理，这种可以称为PaaS。

## laaS (基础设施即服务：Infrastructure as a Service)

> 我觉得DIY的也不够好吃，想了想决定组一片地自己种原料自己管理店铺，自己组装一条生产线专门生产自己喜欢的汉堡。这些资源可以产出各式各样的产品，但是我只是借助它的“基础设施”完成我的需要，这种可以称为laaS。

比如目前的云平台，国外的DigitalOcean等，提供实际的基础设施，用户可以将自己的服务部署在相应的机器上使其运行并得到我们需要的结果，这种可以称为laaS。

## 其他新兴的模式

- 桌面即服务（DaaS）
- 无服务器计算（Serverless or FaaS）
	> 无服务器运算（英语：Serverless computing），又被称为功能即服务（Function-as-a-Service，缩写为 FaaS），是云计算的一种模型。以平台即服务（PaaS）为基础，无服务器运算提供一个微型的架构，终端客户不需要部署、配置或管理服务器服务，代码运行所需要的服务器服务皆由云端平台来提供。—— Wikipedia
- 安全即服务（Security as a service，SECaaS）
- 后端即服务（BaaS）
- 容器即服务 （Containers-as-a-Service）

SaaS, laaS, PaaS这些名词的快速理解

- 将端口添加到区域（永久 `--permanent`）
    ```bash
    firewall-cmd --zone=public --add-interface=eth0
    ```

- reload防火墙
    ```bash
    firewall-cmd --reload
    firewall-cmd --complete-reload # 需要断开链接
    ```
    
- 查看指定区域所有打开的端口
    ```bash
    firewall-cmd --zone=public --list-ports
    ```
    
- 在指定区域打开端口
    ```bash
    firewall-cmd --zone=public --add-port=80/tcp # (永久生效再加上 --permanent, udp设置同理)
    ```
    
- 查看防火墙状态
    ```bash
    systemctl status firewalld
    # firewall-cmd --state
    ```
    
- 防火墙启动/禁用等
    ```bash
    systemctl start firewalld # 启动防火墙
    systemctl stop firewalld # 禁用防火墙
    systemctl enable firewalld # 设置开机启动
    sytemctl disable firewalld # 停止并禁用开机启动
    firewall-cmd --reload # 重启防火墙
    ```

CentOS服务器配置防火墙

### git基本概念

### 设置git信息
- `git config --global user.name "[name]"`
  设置提交时的用户名
- `git config --global user.email "[email]"`
  设置提交时的用户邮箱
- `git config --global color.ui auto`
  设置命令行颜色

### 新建仓库
- `git init [project-name]`
  代码文件夹初始化git
- `git clone [url]`
  克隆项目仓库（包含整个版本信息）

### 修改
- `git status`
  列出所有即将被提交的新建和更改的文件
- `git diff`
  显示所有未加入暂存区的差异
- `git add [file]`
  1. git add -A: [`<path>`]表示把`<path>`中所有tracked文件中被修改过或已删除文件和所有untracted的文件信息添加到索引库。
  2. git add -i: [`<path>`]查看`<path>`中被所有修改过或已删除文件但没有提交的文件，并通过其revert子命令可以查看`<path>`中所有untracted的文件，同时进入一个子命令系统。
- `git diff --staged`
  显示暂存区文件与最新文件版本的差异
- `git reset [file]`
  取消文件暂存，但保留其内容
- `git commit -m "[descriptive message]"`
  1. `-m`指后面可以直接输入message，否则需要调用编辑器
  2. `-a`命令后，与单独执行`git add`类似，但不会将新文件加入暂存区，因而不推荐使用
  3. `-v`命令可以在提交时显示所有diff信息

### 分工协作
- `git branch`
  默认无参数时，列出所有本地的当前仓库的分支
- `git branch [branch-name]`
  在本地创建一个新的分支
- `git checkout [branch-name]`
  切换到指定的分支并更新当前工作区
- `git merge [branch]`
  将指定分支的代码历史拼合到当前分支
- `git branch -d [branch-name]`
  删除指定的分支（慎用）

### 文件编辑
- `git rm [file]`
  将文件从当前工作区删除，暂存删除操作
- `git rm --cached [file]`
  将文件从版本控制中移除，但本地保留文件
- `git mv [file-original] [file-renamed]`
  修改文件名称，准备提交

### 跟踪设置
- `.gitignore`
  设置当前目录下版本控制自动忽略的文件，后缀或指定文件夹均可 
- `git ls-files --other --ignored --exclude-standard`
  列出当前项目下所有忽略的文件

### 碎片储存
- `git stash`
  临时保存所有的已跟踪的修改，以下命令都可以通过传入@n删除指定的更改
- `git stash pop`
  恢复最近一次暂存的修改，并从栈中移除
- `git stash list`
  列出栈中所有已暂存的修改条目
- `git stash drop`
  直接放弃最近一次暂存的更改

### 查看历史
- `git log`
  列出当前分支的版本历史
- `git log --follow [file]`
  列出指定的文件的版本历史，包括重命名
- `git diff [first-branch]...[second-branch]`
  显示两个分支的内容差异
- `git show [commit]`
  输出指定提交的metadata以及内容变化

### 撤销操作
- `git reset [commit]`
  撤销指定`[commit]`后所有的提交，保留本地更改
- `git reset --hard [commit]`
  删除所有的更改和历史，回退到指定的`[commit]`

### 同步更改
- `git fetch [bookmark]`
  下载从`[bookmark]`所有的更改历史
- `git merge [bookmark]/[branch]`
  组合`[bookmark]`分支到当前分支
- `git push [alias] [branch]`
  上传所有本地分支的提交到git服务器
- `git pull`
  下载书签历史以及非协作变化

Spark1e

Category: others

前端部分面试题解（不定期更新）

SaaS, laaS, PaaS这些名词的快速理解

CentOS服务器配置防火墙

Git常用命令速览