我个人的笔记本已经用了几年了，型号比较老，是联想小新锐7000。

两三年前我用这台电脑装 deepin 的时候就发现连接耳机会有白噪音，而且换用其它的 linux 发行版仍然有这个问题。

在本文记录一下该问题的解决方案，作个备忘的同时希望能帮到其他出现这个问题的人。

之前我的解决方案

在网上查询后，发现可以通过修改 alsamixer 设置解决

1
2
3
4
5
6
7
8

alsamixer # 进入 alsa 混音器界面

# 按 F6 选择当前设备的声卡，我这里是 HDA Intel PCH
# 方向键移动用 Auto-Mute Mode 项，切换一下启动状态（Disabled ↔ Enable）
# 这个时候你可能就发现烦人的底噪消失了
# ESC 退出混音器

alsactl store   # 保存当前声卡配置，需要 sudo 权限

但是，这种方式有点问题，当设备重启或耳机插拔就会发现底噪又出现了，进入 alsamixer 发现，刚才设置的 Auto-Mute 设置又变回了原样。

所以当时我写了一个小脚本让它开机自动执行，并且保持耳机一直插在电脑上，但这毕竟治标不治本。

所以之后不堪其扰，再加上刚需（指打游戏）又装回了 windows 😂

新的解决方案

最近又开始在实机上用 Linux 当做我的主力系统，这次我选择装的是 Arch Linux，桌面环境使用的是 KDE Plasma。

这次装好系统后，发现之前碰到的底噪问题仍然存在，这次在外网翻了半天，终于找到了管用的方法¹。

导致 alsamixer 无法保存设置的原因：alsa-mixer: disable the Auto-Mute once the system has speaker

1. 首先，旧的方案仍然适用，我们先按照上述的命令进行更改

2. 修改 alsa 扬声器相关的配置文件：

1
2
3
4
5

# 使用你喜欢的文本编辑器打开下面的路径，需要 sudo 权限，这里使用的是 vim
vim /usr/share/pulseaudio/alsa-mixer/paths/analog-output-speaker.conf

# 若你没有使用 pulseaudio 的话，可以试试下面的路径存不存在
vim /usr/share/alsa-card-profile/mixer/paths/analog-output-speaker.conf

1
2
3
4
5
6
7
8
9

; analog-output-speaker.conf

...
; 找到这两项 Auto-Mute 相关的条目，注释掉
[Element Auto-Mute Mode]
; enumeration = select
[Option Auto-Mute Mode:Disabled]
; name = analog-output-speaker
...

3. Reboot && Enjoy yourself!

本文对 v5 版本的 react-router-dom 库基本 api 等和常用知识点进行记录。

基本使用

类似于 Vue Router，React Router 包括两种路由模式：BrowserRouter 和 HashRouter。

• BrowserRouter 模式中，React Router 对 html5 内置的 history 对象进行了封装，路由切换时效果更好；

• HashRouter 模式中，Router 采用锚点的方式进行页面跳转，对低版本浏览器的兼容更好，但 url 中会多显示一个 /#/。

基本使用流程如下：

1. 在顶层组件中进行全局路由模式的引入。

1
2
3
4
5
6
7

root.render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

2. 使用 Link 组件代替 html 原生的 <a> 标签。

1
2
3
4
5
6
7
8
9
10
11

<nav>
  {/*
    <a href="#" className="nav-item">Home</a>
  */}
  <Link to="/home className="nav-item">
    Home
  </Link>
  <Link to="/about" className="nav-item">
    About
  </Link>
</nav>

3. 在需要渲染路由组件的位置使用 Route 组件进行路由的注册

1
2
3
4

<section>
  <Route path="/home" component={Home} />
  <Route path="/about" component={About} />
</section>

即可实现基本的路由功能。

补充：当前的组件还不能支持路由跳转后的高亮显示，可将 Link 组件使用 NavLink 进行代替

NavLink 效用：会默认对当前路由所在的路由链接添加一个 active css 类， 也可使用 activeClassName 属性指定其他的 css 类名。

例：

1
2
3
4
5
6
7
8

<nav>
  <NavLink to="/home" activeClassName="active" className="nav-item">
    Home
  </NavLink>
  <NavLink to="/about" activeClassName="active" className="nav-item">
    About
  </NavLink>
</nav>

进一步优化

路由重定向

访问页面时，页面会自动匹配根路径的资源。若根路径无内容时，可通过 Redirect 组件重定向到想要默认展示的页面。

逻辑上感觉有点类似于 switch case。

1
2
3
4
5

<Switch>
  <Route path="/home" component={Home} />
  <Route path="/about" component={About} />
  <Redirect to="/home" />
</Switch>

路由模糊匹配和精确匹配

要开启精确匹配，只需在注册路由时添加一个 exact 属性，不过要注意可能会对多级路由的匹配造成负面影响。

1

<Route exact path="/home" component={Home} />

Switch 组件使用

1
2
3
4
5
6
7

<section>
  <Route path="/test/home" component={Home} />
  <Route path="/test/about" component={About} />
  <Route path="/test/about" component={About} />
  <Route path="/test/about" component={About} />
  <Route path="/test/about" component={About} />
</section>

在上述的例子中，我们会发现，当路由跳转到 /test/about 后，第二个 About 组件和后续所有注册的路由都会渲染在页面上。

为了解决这个问题，可以在路由注册的外层包裹一个 Switch 组件，Switch 组件可在同一 path 匹配成功后就不进行后续重名路由的渲染。

1
2
3
4
5
6
7
8

<section>
  {/* 使用 switch 后同个 path 的路由匹配成功后只会挂载第一个 */}
  <Switch>
    <Route path="/test/home" component={Home} />
    <Route path="/test/about" component={About} />
    <Route path="/test/about" component={About} />
  </Switch>
</section>

其他 api

路由传参

React Router 的路由传参方式有以下三种：

通过 params 方式进行传参

路由注册时，使用类似于后端 restful 路由的方式。

而在Link 组件直接传递相应的 url。

在子组件中，通过 props.match.params 就可获取到相应参数。这种方式较为常用。

1
2
3

<Link to={`/home/message/detail/${id}`}>{title}</Link>

<Route path="/home/message/detail/:id" component={Detail} />

通过 search（类似 ajax 中显式 query）方式进行传参

这种方式只需在路由链接中显式传递 query 参数，而路由注册时无需更改。

在子组件中，通过 props.location.search 就可获取到相应参数，不过获取到的为一个 urlencoded 格式的字符串，需要手动或通过第三方 qs 操作库进行转换。

1
2
3

<Link to={`/home/message/detail/?id=${id}&title=${title}`}>{title}</Link>

<Route path="/home/message/detail" component={Detail} />

通过 state 方式隐式传参

需在路由链接中传递包含 pathname 和 state 属性的对象，路由注册时无需更改。

在子组件中，通过 props.location.state 就可获取到相应参数，但要注意，数据全部保存在浏览器 BOM 对象中的 history 属性上，清除缓存后数据会丢失。

可在使用 state 时通过逻辑或为其赋一个空对象，避免页面出错。

1
2
3
4
5

<Link to={{ pathname: "/home/message/detail", state: { id, title } }}>
  {title}
</Link>

<Route path="/home/message/detail" component={Detail} />

replace 模式

和 exact 类似，给路由链接添加一个 replace 属性后即开启 replace 模式，作用就是替换默认的 go 行为，路由跳转会替换当前的历史记录，无法通过后退返回。

1
2
3
4
5
6
7

<Link
  // replace 模式，替换当前历史记录
  replace
  to={{ pathname: "/home/message/detail", state: { id, title } }}
>
  {title}
</Link>

函数式编程

根组件在包裹上 Router 组件后，每个路由组件就默认将 history，match，location 等三个属性传递进了 props 中，在自定义函数中直接调用就可实现函数式编程。

1
2
3
4
5
6

const handleReplaceBtnClick = (id, title) => {
  const { replace } = props.history;
  return () => {
    replace(`/home/message/detail/${id}/${title}`);
  };
};

本文记录一下 Redux 学习中比较晦涩的部分，用以加深印象。

纯 Redux

redux 文件夹基本组成

• store.js

1
2
3
4
5
6
7

import { legacy_createStore as createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import countReducer from "./count.reducer";

const store = createStore(countReducer, applyMiddleware(thunk));

export default store;

备注：

1. redux-thunk 是一个中间件，用于异步 action 获取 dispatch 方法
2. createStore 方法已经不推荐使用

• action.js

1
2
3
4
5
6
7
8

import { PLUS, SUBTRACT } from "./constant";

export const createPlusAction = (data) => ({ type: PLUS, data });
export const createSubtractAction = (data) => ({ type: SUBTRACT, data });

// 异步 action redux-thunk 中间件
export const createPlusAsyncAction = (data, timeout) => (dispatch) =>
  setTimeout(() => dispatch(createPlusAction(data)), timeout);

备注：同步 action 需返回一个对象，用于传递给 reducer，方便代码复用。

• reducer.js

1
2
3
4
5
6

import { PLUS, SUBTRACT } from "./constant";

const countReducer = (prevState = 0, { type, data }) =>
  (prevState += (type === PLUS && data) || (type === SUBTRACT && -data));

export default countReducer;

备注：reducer 是纯函数，基本不会处理数据操作之外的业务逻辑。

• constant.js

1
2

export const PLUS = "plus";
export const SUBTRACT = "subtract";

备注：字面量常量集，方便复用，提升代码的健壮性。

redux store 监听

1
2
3
4
5
6

// 组件中
useEffect(() => {
  store.subscribe(() => {
    setCount(store.getState());
  });
}, []);

Redux 默认无法在 React 组件中进行对数据监听，这会导致视图层不会重新渲染。需在生命周期钩子中对其进行订阅。

也可在入口文件中对入口的 render 方法进行订阅，从而一劳永逸（不过可能会在每次数据更新时可能由于 diffing 算法造成不必要的性能开销）。

react-redux

react-redux 是由 Redux 官方维护的一套专供与 React 技术栈的 Redux 封装库。

React-Redux 将 UI 和 数据完全分离开来，分为 UI 组件和容器组件。UI 组件中不会进行任何有关 redux 状态管理的操作，所有 redux 相关操作都提升到容器组件中来进行。

connect 高阶组件

connect 方法的 api：
connect(mapStateToProps, mapDispatchToProps)(UI)

• mapStateToProps：需传递一个回调函数，用于给 UI 组件传递 redux 中的 state。
• mapDispatchToProps：同上，用于给 UI 组件 redux 中操作 state 的方法（dispatch）。

1
2
3
4
5
6
7
8
9

export default connect(
  (state) => ({ count: state }),
  (dispatch) => ({
    plus: (number) => dispatch(createPlusAction(number)),
    subtract: (number) => dispatch(createSubtractAction(number)),
    plusAsync: (number, timeout) =>
      dispatch(createPlusAsyncAction(number, timeout)),
  })
)(CountUI);

省略写法

• 容器组件

1
2
3
4
5
6
7
8
9

export default connect(
  (state) => ({ count: state }),
  // 自动分发
  {
    plus: createPlusAction,
    subtract: createSubtractAction,
    plusAsync: createPlusAsyncAction,
  }
)(CountUI);

备注：mapDispatchToProps 可传递一个包含创建 action 方法的对象，效果同未简化版本等价，类似于依赖注入。

• 入口文件

1
2
3
4
5
6
7
8

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    {/* Provider 自动分发 store 给容器组件 */}
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

备注：Provider 组件可自动为 App 组件下的容器组件分发 redux 相关 props。

2020 年 2 月 25 日

做路由跳转的时候发现，一级路由正常，但是切换到 2 级路由就会出现 地址更新页面没有跳转。

解决方法：在父层路由所调用的组件中一定要包括router-link管道，

框架不停提示各种各样的 error。

解决方法：修改.eslintrc.js文件
比如默认函数名后一定要空一个空格，但是这和编辑器逻辑是相悖的，所有我们可以把他关掉：rules下"space-before-function-paren": 0, // 去除函数括号前的空格

2020 年 2 月 27 日

react 父子组件传值中，prop.children可实现类似 vue 中 slot 插槽的用法

默认 umi 开启了配置式路由，这个时候如果要用约定式路由可以去.umirc.ts中将route项注释或删除

面包屑配置文件，直接在相应的组件里引入调用即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

import React from "react";
import { Link } from "react-router-dom";
import styles from "./index.css";
import withBreadcrumbs from "react-router-breadcrumbs-hoc";

// 路由表重命名
const routes = [
  { path: "/", breadcrumb: "首页" },
  { path: "/project", breadcrumb: "投票管理" },
  { path: "/about", breadcrumb: "关于我们" },
];

// 面包屑
const Breadcrumbs = ({ breadcrumbs }: any) => (
  <div className={styles.breadcrumb}>
    {breadcrumbs.map(({ breadcrumb, match }: any, index: number) => (
      <div className="bc" key={match.url}>
        {console.log(breadcrumb)}
        <Link to={match.url || ""}>
          // 遍历，当路由在上方路由表中存在的时候，返回面包屑显示的名称
          {routes.map((route) => route.path == match.url && route.breadcrumb)}
        </Link>
        {index < breadcrumbs.length - 1 && "　>　"} // 使用的全角空格
      </div>
    ))}
  </div>
);

export default withBreadcrumbs()(Breadcrumbs);

不要频繁使用 xpath 和 css selector
不要频繁使用 xpath 和 css selector
不要频繁使用 xpath 和 css selector

不用 xpath

能用 id 就用 id ，有 name 用 name，没有的话用 classname，甚至 linktext、tagname 都没有的话最后再去选择采用 xpath 或者 css selector，或者采用其他的复合的定位方法进行定位。

xpath 定位比较浪费资源，而且它可能会出现一些难以预料到的错误，比如定位元素偏移等。

多用延时

在编写测试用例的时候，可能编写的脚本逻辑完全正确，但因为不知道哪里的原因这个脚本跑不通。这个时候，可以在报错或者响应超时的地方适当的加入延时方法，不用太长，一秒钟左右就可以。之后再跑一遍可能就会发现脚本能顺利执行了

1
2
3
4
5

from time import sleep;

# 语句
sleep(1)
# 语句

1

Thread.sleep(800) // 需要抛出异常

是这样的，这个页面是个很简单的表单弹窗，但是我死活定位不到这个元素。。。不管用是xpath、id、class等等
打开控制台发现原来这是一个iframe弹窗，经过神奇的百度我找到了如下的解决方法

1

driver.switch().frame() // frame 参数可填frame标签的id或name, 或driver.findElement()

然而并没有什么卯月

报了No frame element found by name or id xxx错误

我又尝试用id去定位这个弹窗的顶层元素，结果报了No such element错误：

1

driver.findElement(By.className("popWindow-reduction"))

通过自己尝试和翻阅各种资料，发现可能是动态id惹的祸

于是我尝试用粗暴的Actions（python为ActionChains）键鼠操作进行实验然后成功：

1
2
3
4
5
6
7
8

Actions actions = new Actions(driver);
actions
.click()
.sendKeys(Keys.TAB, "123413551235", Keys.TAB, Keys.ENTER)
.click()
.sendKeys(Keys.TAB, Keys.ENTER)
.perform();
System.out.println("执行成功");

但是这种方法虽然很方便有效，不过看上去太过凌乱了，而且操作都是我实际在页面上进行操作尝试出来的，比较麻烦

所以我又开始寻找元素定位的方法，最后得到的代码是这样的：

1
2
3
4
5
6
7

// 语句太长所以定义一个变量进行存储
WebElement iframe = driver.findElement(By.className("popWindow-box")).findElement(By.tagName("iframe"));
driver.switchTo().frame(iframe);    //切换到frame标签
driver.findElement(By.id("pimNote_content")).sendKeys("12345666");
driver.findElement(By.id("submitButton")).click();
driver.switchTo().defaultContent(); //切换回默认页面
driver.findElement(By.xpath("//*[@id=\"alt1\"]/div[2]/input")).click();

为什么要用class进行定位呢？具体的我也没有深究过，不过推测可能是因为这个modal对话框是用jq实时生成的，所有组件内部的id定位无效
还有我一开始尝试定位的是modal的根标签#popWindow-all，结果并没有成功，可能是因为这个标签没有高度的原因。

我也是一边摸索着学习一边记录，如果有不正确或不严谨的地方还请各路大佬斧正。

补充

driver.switchTo().frame()参数并不是只能传id和name以及WebElement，当上述参数都不能正常使用时可以尝试使用index进行定位，比如：

1

driver.switchTo().frame(0)// 跳转到页面第一个frame

1

WebElement label = driver.findElement(By.xpath(“//div[@class=’el-switch__label el-switch__label’ and not(contains(@style,’display:none’))]”));

原作者：灵枢_ > 原文链接：【WebDriver】解决ElementNotVisibleException方法总结…_CSDN 博客

模块或功能点开头

• 在编写模块非首页或登录页时，第一条用例应该是
  • 导航栏有效性验证：跳转到相应页面
• 在模块中每个会跳转新页面或弹窗的功能点，开头三条用例：
  • 功能测试
    • 按钮/文本链接有效性验证：跳转到页面或弹出窗口
    • 文字控件显示验证：描述当前页面的显示内容
      • Title
      • 面包屑（如果有）
      • 文字和控件显示（如果有）
      • 导航栏高亮显示（如果有）
      • 列表字段（如果为列表页）
      • 按钮显示（如果有）
    • 如果含多角色权限，应该拆开编写
    • 如果含列表，应该有数据和无数据分开编写
  • UI测试
    • 布局配色合理性验证：布局美观，配色合理
    • 文字显示正确性验证：文字正确无错漏
• 列表页：
  • 页码选择器：
    • 各个按钮的有效性验证
    • 首页时上一页按钮不可用验证
    • 末页时下一页按钮不可用验证
  • 排序：
    • 排序正确性验证：列表按某种规则升序中降序显示全部信息

查询功能点

• 控件测试：
  • 下拉框列表值正确性验证：下拉列表显示blablabla
  • 日历控件正确性验证：日期默认为今天，可选择blablabla，需求说明书已说明
• 具体的查询：先测试不输入查询条件的情况，再逐个测试单条件，再测试组合条件
  • 不输入查询条件，进行查询：列表显示所有信息
  • 从下拉框到文本框单条件依次输入，进行查询：列表显示相应的信息
  • 输入全部查询条件，进行查询：同上条
  • 若文本框可进行模糊查询，应该拆分成==模糊查询和精确查询==两种情况

具体的功能测试

采用等价类划分和边界值分析等白盒测试方法进行编写，无效等价类严格按有效等价类（与或非）取反得到

模块或功能点结尾

• 弹窗：
  • 取消按钮有效性验证：关闭弹窗，返回上一页
  • x按钮（若有）有效性验证：同上
  • 确定/提交等按钮不需要进行单独验证
• 状态管理：
  • 启用按钮有效性验证
  • 禁用按钮有效性验证

unittest是 Python 自带的单元测试框架，可以帮我们完成接口自动化测试、UI 自动化测试。主要用来组织和执行测试单条测试用例组织在一起执行，同时能够满足如果一条测试用例执行失败，后面的测试执行，并且提供了丰富的断言方法，判断测试用例是否通过，最终生成测试结果。

unittest核心要素

unittest测试流程

1. 写好TestCase：一个class继承unittest.TestCase，就是一个测试用例，其中有多个以test开头的方法，每一个方法都在load的时候会生成一个TestCase实例。如果一个class中有四个test开头的方法，最后load到suite中时则有四个测试用例。
2. 由TestLoader加载TestCase到TestSuite。
3. 由TextTestRunner来运行TestSuite，运行的结果保存在TextTestResult中。

说明：

通过命令行或者unittest.main()执行时，main()会调用TextTestRunner中的run()来执行，或者可以直接通过TextTestRunner来执行用例。
Runner执行时，默认将结果输出到控制台，我们可以设置其输出到文件，在文件中查看结果，也可以通过HTMLTestRunner将结果输出到HTML。

unittest框架使用说明

1

import unittest # 导入测试框架

定义一个继承自unittest.TestCase的测试用例类。

定义setUp()方法、tearDown()方法、setUpClass()方法、tearDownClass()方法，其中setUp()方法指在每个测试用例方法执行前，都会执行一次；tearDown()方法指在每次测试用例方法执行结束后，都会执行一次；setUpClass()方法指在一个测试用例集执行前只执行一次；tearDownClass()方法指在一个测试用例集执行后只执行一次。

定义测试用例，名字以test开头。
一个测试用例应该只测试一个方面，测试目的和测试内容应很明确。主要调用assertEqual、assertRaises等断言方法判断程序执行结果和预期值是否相符。

调用unittest.main()启动测试。
如果测试未通过，会输出相应的错误提示。如果测试全部通过则不显示任何东西。

• 安装python环境
• 通过pip下载selenium
  • 打开控制台或者终端
  • python -m pip install --upgrade pip 更新pip到最新版本
  • 如果安装失败可试添加--user 如 python -m pip install --user --upgrade pip
  • 安装selenium：pip install [-U] selenium

自动化环境搭建完毕

模仿鼠标键盘的链式操作ActionChains

1
2
3
4
5
6
7
8
9
10
11

from selenium import webdriver
from selenium.webdriver import ActionChains

driver = webdriver.Chrome()
driver.get('https://www.baidu.com')

# 定位到文本框
inp = driver.find_element_by_id('kw')

# 链式
ActionChains(driver).click().send_keys('php是世界上最好的语言').context_click().perform()

操作js代码进行标签属性的删除

1
2
3
4

# 百度主页
inp = driver.find_element(By.PARTIAL_LINK_TEXT, '主页 ')

driver.execute_script('arguments[0].removeAttribute("target")', inp)

driver.implicitly_wait()与time.sleep()的区别

作者：乐乐熊小妹
来源：https://www.cnblogs.com/lelexiong/p/9875157.html

1
2
3
4
5

# 隐式等待，5秒钟内只要找到了元素就开始执行，5秒钟未找到超时
driver.implictly_wait(5)

# 延时5秒执行
time.sleep(5)

如何灵活运用这两种方式：

当某个页面元素变化多，影响多的情况下，用sleep,等页面元素稳定了，再定位。

如果用implicitly_wait(5)，还没等页面元素稳定后就定位 ，导致定位不准确，比如操作某个元素后，会出现提示框，影响了后面元素的位置，导致定位不准确；所以用sleep,等提示框消失后开始定位

执行JavaScript语句实现相应操作

• driver.execute_script('') 在’’里输入js语句

比如：

1
2

# 页面滚动300px
driver.execute_script('window.scrollTo(0, 300)')

使用select类进行下拉框值的选择

可使用selenium提供的select类进行下拉框值的选择

这里使用的Java语言来描述，演示的是用下拉框文本来选择对应条目
也可以用index或value来实现，select类都提供了相应的方法

1
2

Select select = new Select(WebElement arg);
select.selectByVisibleText("下拉选项文本");

关于浏览器（含国产）和webdriver等环境配置

这里以配置国产QQ浏览器为例

1
2
3
4
5
6
7
8
9
10

// 通过 chrome options 配置QQ浏览器启动
ChromeOptions op = new ChromeOptions();
op.setBinary("C:\\Program Files (x86)\\Tencent\\QQBrowser\\QQBrowser.exe");
WebDriver driver = new ChromeDriver(op);

// 或者
// 通过设置环境变量配置QQ浏览器启动
System.setProperty("webdriver.chrome.bin", "C:\\Program Files (x86)\\Tencent\\QQBrowser\\QQBrowser.exe");
// 通过设置环境变量配置 chromedriver
System.setProperty("webdriver.chrome.driver", "C:\\chromedriver.exe");

frame/iframe相关

frame / iframe操作常用的语句：

1
2
3
4
5
6
7
8
9
10
11
12

// 通过 frame / iframe 在页面中的索引进行定位
driver.switchTo().frame(int index); 
// 通过 frame / iframe 的 id 或 name 进行定位
driver.switchTo().frame(String id_or_name);
// 通过普通方式定位到 frame， 然后再进行跳转
driver.switchTo().frame(WebElement element);

// 跳转到父层（上一层）框架
driver.switchTo().parentFrame();

// 跳转到初始内容，即原始层
driver.switchTo().defaultContent();

• 会影响系统运行的读写功能级别都是高，比如crud功能
• 查询功能级别是中
• UI相关的级别是低，比如页面正确性验证所在的级别就为低

而这个标准并不是业界统一的，不同的公司企业制定的标准不同。

记录自老师的原话

一般以企业给的标准为准，但是各个企业标准不统一，我们比赛的这家企业对这个问题的级别前后说法也不一。一般测试用例的级别区分不太分明，也不太重要，bug的级别非常重要。

String

ES6 中用来填充字符串的两个新方法

1
2

String.prototype.padStart(maxLength, (fillString = ""));
String.prototype.padEnd(maxLength, (fillString = ""));

顾名思义，padStart是在头部填充，而padEnd是在尾部填充，maxLength为字符串的最短长度，字符串低于这个长度就会进行填充，填充内容为fillString

例如进行日期格式化时：

1
2
3
4
5
6
7
8
9

// 模拟日期转换
let y = 2019;
let m = 9;
let d = 1;

m.padStart(2, "0"); // 头部填充，字符串不足2位前补'0'
d.padEnd(2, "0");

console.log(`${y}年${m}月${d}日`);

Vue.js 允许你自定义过滤器，可被用做一些常见的文本格式化，过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，有“管道”符指示；

代码示例：

1
2
3
4
5
6
7
8
9

// 过滤器的定义语法
{{name | nameope}} // mustache插值表达式

// 全局过滤器
Vue.filter("nameope", (data) => {
  // 在这里做一些对mustache插值数据的渲染前处理
  return data;
  // return 处理完的数据
});

过滤器中匿名函数的第一个参数是从管道符前接收到的原值，从第二个参数起可以传入需要参与对原值处理的值
如：

1
2
3

Vue.filter("nameope", (data, arg) => {
  return data + arg;
});

过滤器可以多次调用

1

{{ msg | format | test }}

msg 值会先被 format 处理，处理之后再丢给 test 处理，从左往右依次顺序执行。

下面是一个对 ISO 时间字符串进行过滤格式化的实例：

1
2
3
4
5
6
7
8
9
10

// 全局的过滤器，进行时间的格式化
Vue.filter('dateFormat', dateStr => {
  // 根据给定的时间字符串得到相应的时间
  let dt = new Date(dateStr)

  let y = dt.getFullYear()
  let m = dt.getMonth() + 1
  let d = dt.getDate()

  return `${y}-${m}-${d}`

私有过滤器：

1
2
3
4
5
6

new Vue({
  el: "#app",
  data: {},
  methods: {},
  filters: {}, // 这里是私有过滤器
});

1234
刚刚更换了NexT的HEXO主题，测试页面

1
2
3

var a = 'hello world'
console.log(a) // ==> out 'hello world'