发表于 | 更新于
本文字数： 3k | 阅读时长 ≈ 5 分钟

之前，由于需要批量对不少音频文件做格式转换，以及批量对文件进行重命名等，所以在网上找了不少教程，最后汇总成了这边文章。

针对以上需求，主要包括两方面的操作：

  1. 使用 FFmpeg 这个强大的命令行工具，来实现音视频文件的录制和转换。
  2. Windows 平台上针对文件的批处理任务，可以通过命令行的形式，也可以通过编写脚本的形式。

FFmpeg 的简单使用

FFmpeg 功能非常强大，命令也较多，这里先简单以对话体的形式，给出一些常见的基本命令。

  • 如何将 music.wav 音频文件转换为 music.mp3 音频文件？
1
ffmpeg -i music.wav music.mp3
  • 如何将 music.wav 音频文件转换为指定比特率的 music.mp3 音频文件？
1
2
3
4
5
# 转换为 192kbps 的 mp3 格式音频文件
ffmpeg -i music.wav -b:a 192K music.mp3

# 转换为 320kbps 的 mp3 格式音频文件
ffmpeg -i music.wav -b:a 320K music.mp3
阅读全文 »

发表于 | 更新于
本文字数： 9.8k | 阅读时长 ≈ 18 分钟

这个系列分为 3 个部分（这篇文章是第 2 部分）：

  1. 最基本简单的 Redux 实现，以及如何与 React 结合使用
  2. 实现 React-Redux
  3. 增强 Redux 的实现，包括拆分合并 reducer，中间件等

react-redux 是 Redux 官方的 React 绑定库。

一个 UI 组件如果需要使用 Redux 来进行状态管理，需要做以下几件事：

  • 在组件初始化时内获取 store 中的状态
  • 订阅 store 内状态的改变，状态有更新则刷新组件状态
  • 在组件卸载时移除对 store 状态的订阅

上面的逻辑，是每个组件与 Redux 结合使用时都需要的。react-redux 将上面的逻辑以高阶组件的形式复用了。

connect

react-redux 的一个基本核心是 connect 函数，它的作用是将一个感知不到 Redux 存在的展示型组件进行包装，将 store 中的状态以及改变状态的能力（dispatch(action)），注入到组件中。它可能是类似下面形式的函数：

1
2
3
4
5
const connect = wrappedComponent => {
  return {
    /* component with state and dispatch */
  };
};

加入上面提到的重复逻辑后：

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
import React from 'react';
import store from './store'; // fake path

const connect = () => WrappedComponent => {
  return class Connect extends React.Component {
    constructor(props) {
      super(props);
      this.state = store.getState();
      this.dispatch = store.dispatch;
    }

    componentDidMount() {
      this.unsubscribe = store.subscribe(() => {
        this.setState(store.getState());
      });
    }

    componentWillUnmount() {
      this.unsubscribe();
    }

    render() {
      return (
        <WrappedComponent {...this.props} {...this.state} {...this.dispatch} />
      );
    }
  };
};
阅读全文 »

发表于 | 更新于
本文字数： 10k | 阅读时长 ≈ 18 分钟

实现 Redux

这个系列分为 3 个部分（这篇文章是第 1 部分）：

  1. 最基本简单的 Redux 实现，以及如何与 React 结合使用
  2. 实现 React-Redux
  3. 增强 Redux 的实现，包括拆分合并 reducer，中间件等

Redux 的三大原则：

单一状态树

单一状态树，意味着只有一个 store 对象来保存应用程序的状态。这样的好处包括：易于 debug，实现数据持久化，实现诸如时间旅行等功能。

状态是只读的

状态只能通过触发 action 来改变，action 可以理解为一种改变状态的意图，它是一个类似这样的 JavaScript 对象：

1
2
3
4
{
    type: 'ADD_TODO',
    text: 'Learn Redux'
}

其中的 type 属性是必须要有的，其他的是可选属性。

通过这种形式，所有能改变状态的情形都被集中管理了，并且严格按照一定的顺序来执行。

As actions are just plain objects, they can be logged, serialized, stored, and later replayed for debugging or testing purposes.

状态只能通过纯函数来改变

action 是指意图，那么意图的具体内容是什么，则是由 reducer 来指定的。 reducer 是一个纯函数。入参是应用程序的前一个状态，我们不应该修改入参，而是应该返回一个新的状态。一个纯函数必须满足以下两个条件：

  • 相同的输入，每次都得到相同的输出。
  • 不应该产生副作用，包括但不限于：更改入参，修改局部状态，发起网络请求，读写数据库，触发事件，打印日志等。

纯函数与非纯函数举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 非纯函数，由于 Math.random() 存在，每次得到的输出是不一样的
const getRandomNum = x => x + Math.random();
// 非纯函数，每次得到的输出是不一样的
const getTime = () => Date.now();
// 非纯函数，依赖外部变量 base
let base = 9;
const getNumber = x => base + x;
// 非纯函数
const getUsers = async id => {
  const response = await fetch(`https://example.com/user?id=${id}`);
  const json = await response.json();
  return json;
};

// 纯函数
const square = x => x * x;

基本实现，不考虑视图层

先不考虑拆分 reducer，中间件，以及一些边缘情况，只考虑最常见的使用情形，Redux 的核心是下面的几个函数：

  • createStore(reducer) 入参是 reducer，返回一个 store 对象。该对象包含以下 3 个方法
  • getState() 返回一个新的状态对象
  • subscribe(callback) 订阅一个回调函数，当状态变化时，该回调会被执行
  • dispatch(action) 分发 action
阅读全文 »

发表于 | 更新于
本文字数： 1.9k | 阅读时长 ≈ 3 分钟

在钢、铁、合金为代表的现代工业社会，金属材料在各类产品上的运用非常广泛。金属材料以其优良的力学性能、加工性能和独特的表面特性，成为现代设计中的一大主流材质。也因多数金属材料有着易加工、视觉效果好、呈现出的设计感强烈、表面处理手段丰富，首当其冲也受到了设计师们的喜爱。

金属表面的预处理

在对金属材料进行表面处理之前，金属材料的表面有一些瑕疵，这些瑕疵的处理就需要用到预处理工序，以使物件达到可进行表面处理的状态。

预处理的工艺和方法很多，常用工艺主要为：机械处理、化学处理、电化学处理。

  • 机械处理：如切削、研磨、喷砂等加工清理物件表面的鏽蚀和氧化皮等，将表面加工成平滑、或具有凹凸模样；

  • 化学处理：清理物件表面的油污、鏽蚀、及氧化皮等。

  • 电化学处理：则主要用于强化化学除油、浸蚀的过程，有时也用于弱浸蚀时活化金属製品的表面状态。

金属表面的处理技术

表面处理技术是产品美观的必备手段，对物件（产品）起到保护和美化产品外观的作用，主要分：着色工艺和肌理工艺。

表面着色工艺

金属材料的表面着色工艺是采用热处理、机械、化学、电解等方法，为物件表面镀上各种色泽的表面层。

  • 化学着色：将经过氧化处理过后的金属材料，浸入到有机或无机染料溶液中，染料渗入金属表面氧化膜的空隙中，发生化学、或物理作用从而实现着色。

  • 电解着色：在特定的溶液中，通过电解处理方法，使金属表面发生反应而生成带有颜色的膜层。过程中，金属阳离子会渗入到金属表面的氧化膜空隙中，从而使氧化膜产生不同的色系。而色系根据所用材料的调配而定，常见的是红、青、蓝，以及青铜色系、棕色系、灰色系等。

  • 阳极氧化着色：英文名叫 Anodizing。在特定的溶液中，以化学或电解的方法进行处理，生成吸附染料的膜层，在染料的作用下着色。阳极氧化的染色色彩艳丽，色域宽广，但目前应用范围仅限于铝、锌、镉、镍等几种金属材料。

  • 微弧氧化着色：英文名叫 Microarc oxidation，简称 MAO。是在电解质溶液中施加高电压，在材料表面原位生长陶瓷氧化膜的过程。由于氧化液大多采用硷性溶液，对环境污染小。微弧化膜具备了阳极氧化膜和陶瓷喷涂层两者的优点，这项技术工艺被认为是阳极氧化的替代技术。目前应用范围仅限于铝、镁、钛等几种金属材料。

阅读全文 »

发表于
本文字数： 1k | 阅读时长 ≈ 2 分钟

什么是生命周期方法

可以这样理解，生命周期方法是 React 提供的钩子函数，使得我们可以介入组件的生命周期，比如组件的挂载过程（组件实例被创建并被插入到 DOM 中）和更新（组件的 state 或者 props 改变）过程。

总的来说，组件的挂载过程有 4 个钩子函数，并按照下面的顺序依次调用：

  1. constructor(props)
    创建组件实例并将其插入 DOM 时调用。通常在此钩子函数内设置组件的初始状态以及绑定类方法。
  2. static getDerivedStateAndProps(props, state)
    组件在初始挂载以及后续每次更新时，该钩子函数都会在 render() 函数之前被调用。此外，由于这是一个静态方法，无法访问组件实例。
  3. render()
    对于类组件而言，这是一个必须声明的钩子函数，该函数返回一个 React 元素，以作为组件的渲染结果输出。此钩子函数必须为纯函数，不应该在这里更改组件的 state 和 props。
  4. componentDidMount()
    当组件挂载过程完成，会被调用一次。一般做法是，在此钩子函数内获取异步数据并保存到组件的状态。

组件的更新过程有 5 个钩子函数，并按照下面的顺序依次调用：

  1. static getDerivedStateFromProps(prop, state)
    同上面的挂载过程
  2. shouldComponentUpdate(nextProps, nextState)
    当组件的 state 或者 props 发生改变时被调用，返回一个布尔值以告诉 React 是否执行此次更新。通常的用例是：在大型应用程序中被用作性能优化。
  3. render()
    同上面的挂载过程
  4. getSnapshotBeforeUpdate(prevProps, prevState, snapshot)
    在最近的一次渲染结果被提交到 DOM 之前被调用。
  5. componentDidUpdate()
    更新之后被立即调用，不包括初始渲染。通常用来做 DOM 操作或者异步获取数据。

此外，组件的卸载过程也有 1 个钩子函数：

  • componentWillUnmount()
    在组件被销毁之前调用，通常在此钩子函数内做一些清理工作。

最后，componentDidCatch(error, info) 被用来进行错误处理，可以将捕获的错误信息保存到组件状态，以进行相应的处理。

发表于
本文字数： 1k | 阅读时长 ≈ 2 分钟

媒体查询

媒体查询是 CSS3 中引入的一项新技术，它可以根据不同的可视窗口大小显示不同的布局。可视窗口是用户在网页上的可见区域，根据访问网站的设备不同而不同。

媒体查询由媒体类型组成，如果媒体类型与展示网页的设备类型匹配，则应用对应的样式。你可以在媒体查询中用上你想用的选择器和样式。

下面是一个媒体查询的例子，当设备宽度小于或等于 100px 时返回内容：

1
@media (max-width: 100px) { /* CSS Rules */ }

图片自适应

用 CSS 来让图片自适应其实很简单。不要使用绝对单位：

1
img { width: 720px; }

你应该使用：

1
2
3
4
5
img {
  max-width: 100%;
  display: block;
  height: auto;
}

max-width 属性能让图片以 100% 的最大宽度适应其父容器的宽度，但图片不会拉伸得比原始宽度还宽。将 display 属性设置为 block 可以让 <image> 标签从内联元素（默认值）更改为块级元素。设置 height 属性为 auto保持图片的原始宽高比。

针对高分辨率屏幕应使用视网膜图片

为优化图片在高分辨率设备下的显示效果，最简单的方式是定义它们的 width 和 height 值为源文件宽高的一半。

这是一个图片宽高设置为源文件一半的例子：

1
2
3
4
<style>
  img { height: 250px; width: 250px; }
</style>
<img src="coolPic500x500" alt="一张高质量的图片">

使排版根据设备尺寸自如响应

除了用 em 或 px 去设置文本大小, 你还可以用视窗单位来做响应式排版。视窗单位还有百分比，它们都是相对单位，但却基于不同的参照物。视窗单位相对于设备的视窗尺寸 (宽度或高度) ，百分比是相对于父级元素的大小。

四个不同的视窗单位分别是：

  • vw：如 10vw 的意思是视窗宽度的 10%。
  • vh： 如 3vh 的意思是视窗高度的 3%。
  • vmin： 如 70vmin 的意思是视窗中较小尺寸的 70% (高度 VS 宽度)。
  • vmax： 如 100vmax 的意思是视窗中较大尺寸的 100% (高度 VS 宽度)。