博客

开发 WordPress 项目，正确的做法是在本地开发，然后把对项目做的修改部署到生产环境。按照 《WordPress 开发：开发环境》 这个课程，可以自动化在本地搭建一个开发环境，可以使用 Composer 管理 WordPress。《WordPress 开发：生产环境》，这个课程里演示了自动化搭建生产环境，并部署 WordPress 项目的方法。

本地开发环境与生产环境基本可以保持一致，同样的操作系统（Ubuntu），同样的配置方法。对环境的配置都保存成了文件，修改了配置文件，再次执行配置，可以配置本地开发环境，也可以自动化去配置网站的生产环境。最近更新了 《WordPress 开发：开发环境》，演示了在本地开发环境上发现核心需要更新，更新以后，做一下提交，然后把更新再部署到生产环境的整套过程。

下面介绍一下更新核心并部署到生环境的流程。

Bootstrap 4 的界面组件课程已经发布了，可以帮你快速了解 Bootstrap 最核心的部分。你可以使用 Bootstrap 的组件快速为网站应用创建界面。课程里演示了 Bootstrap 所有组件的使用方法，除了表单部分，我们会单独再做个课程介绍一下表单的使用方法。

学习 Bootstrap 框架，不仅仅是要得到好看的界面，更重要的是去了解它的一些解决问题的思路，比如设计一个界面都需要怎么去组织 HTML 的代码结构。学习 Bootstrap 的组件部分，有几点要注意一下，颜色，尺寸，交互，配置还有事件。

组件可能有不同的颜色，尺寸，有些组件还有些交互功能，配置使用这些功能可以使用 Bootstrap 提供的 data 接口，或者可以通过 JavaScript 代码去配置。带交互功能的组件一般还会触发一些自定义的事件，我们可以监听这些事件去做一些事情。

学习使用 Bootstrap 这个库是最好的学习 HTML 与 CSS 的方法，当然还有一点 JavaScript。如果您刚刚起步学习 Web 开发，那首先要学 HTML 与 CSS。有一点基础以后，就可以去学习使用 Bootstrap 去设计界面了。它给了我们一套界面设计框架，学习它是怎么组织的 HTML 代码结构，然后在上面去应用 CSS 样式，CSS 类的命名方式，各种选择器，如何利用各种伪类与伪元素。Bootstrap 里面的东西主要分成了四个部分。布局，内容，组件，还有工具。我们先来了解一下 Bootstrap 的布局（Layout）。

布局（Layout）

网格是设计界最常用的工具。Bootstrap 使用了 12 栏网格（Grid）的布局系统，就是它把一行（Row）内容分成了十二栏（Column）。你可以为一行内容里面的每一个栏去指定它占用的栏数，一行最多只能显示十二栏宽度的内容。

比如你的界面上需要一块三栏显示的内容，A，B还有 C，你可以让 A 占用 6 栏宽度，B 占用 4 栏宽度，剩下的两个网格宽度留给 C 。这样 A，B，C 这几栏内容加起来的宽度正好是 12 个网格，所以它们也就正好可以在一排显示。如果一排内容的宽度超过了 12 个网格，那后面的栏会自动给挤到第二排显示。

有天早上起来，打开宁皓网，点开用户列表一看，我靠，一群 “开票” 广告用户名（开票请加q...）。一看就知道是用某种机器软件自动注册的用户名，每个用户名会稍微有点变化，每间隔一段时间就会自动注册一个这样的用户。我在后台添加了一个黑名单，禁止用户名里带 “票”。管用了一阵子，不过看来对方早有准备，他手工试了几下以后，发现 “票” 这个字被禁以后，他就把 “票”，改成 “Piao” 了。

后来我就干脆，把 “票”，“漂”，“Piao” ... 以及其它出现在垃圾用户名里的字符都放到黑名单里边，心想这回肯定没事了。结果第二天一早又发现，这哥们不 “开票” 改卖 “建材” 了。然后我就又禁用一轮，他一边注册， 我一边删，一边添加黑名单。后来可能是他累了，最后放弃了。我不想在页面上添加反人类的验证码，或者让用户玩拼图游戏。是不是可以通过机器学习来解决。

Bootstrap 4 是地球上最受欢迎的 CSS 界面框架。最新版的 Bootstrap 4 已经发布测试版，现在我们的网站应用的界面已经可以基于 Bootstrap 4 去开发了。宁皓网录制了一批新鲜的 Bootstrap 课程，刚刚发布了 《Bootstrap 4：网页布局》，其它组件的使用方法本月会陆续发布完。

学习 Bootstrap

Bootstrap 的基本使用是非常简单的，仔细地看看官方文档就能直接用了，不过即使是老手，也经常在文档中迷失。正确的方法是先看宁皓网的视频：） 然后再去看文档。

找份前端工作，或自己创业做个项目。应用的前端部分少不了用 Vue.js 与 React.js 这两个框架其中的一个。在国内腾讯，阿里这样的公司也都在使用它们。在 Github 托管的所有开源项目里面，当前 React 排第四，Vue 排第六。

用最简单的例子，演示最核心的东西。跟随最近发布的《Vue.js：应用案例》，《Vue.js：应用案例（Vuex）》，还有《React.js：应用案例》 这几个课程，您可以更好地理解这两个框架。配合宁皓网的其它相关课程，您应该可以开始使用它们去创建自己需要的应用了。

订阅宁皓网，在线学习所有 Vue.js 与 React.js 相关课程。

在介绍 React 表单使用的时候，我们创建一个 HelloForm 组件，组件里用了一个文本框，监听了文本框的 change 事件，用 handleChange 来处理这个事件。在这个事件处理里面，输出了文本框里面发生变化的值。有些动作我们不想执行的那么勤快，有一点点变化就去执行一些任务，这样太浪费。比如你想实时地把用户输入的内容保存在后端数据库里，后端可能受不大了，我们得去做点限制。可以用 Throttle 或 Debounce。

在 Lodash 这个库里有可以创建  Throttle 或 Debounce 函数的方法。先给项目安装一下 Lodash：

yarn add lodash

在项目文件里，可以直接导入 Lodash 的 Throttle 或 Debounce 。像这样：

在应用里有些功能（函数）你希望限制它的执行。比如一个实时搜索功能，用户在搜索框里输入想要找的东西，可以实时地显示搜索结果。这个功能我们可能要去监听搜索框里的 change 或者 input 事件，发生变化以后就去请求搜索。但是我们不希望每次有一点点变化就去执行搜索，这就需要使用 Throttle 或 Debounce 去限制一下这个搜索功能的执行。

Throttle 与 Debounce 都可以限制函数的执行，但是有一点区别。

Throttle

Throttle：函数在每个等待间隔时间里最多只能执行一次。使用 Throttle 的时候，可以提供一个要执行的函数，还要一个等待时长。比如我们要执行的函数是 search，等待的时长是 1000ms ，这样 search 这个函数在 1000ms 以内，最多就只能被调用一次。

Debounce

Debounce：直到从上一次 Debounce 函数被执行以后再经过一个设置的等待的时间以后，才会执行 Debounce 函数。就是我们设置个等待时间，这个时间过了以后才能调用函数，接着想要再次调用这个函数必须还要经过从上一次调用函数以后，再经过设置的等待时间以后才行。

HTML 的表单元素有自己的内部数据（State），用户在文本框里输入内容，勾选了复选框，这些行为会直接修改表单元素的内部数据。在 React 里，修改数据都要通过 setState 去做。下面这个练习可以帮你理解在 React 组件里的使用表单。

添加一个 HelloForm 组件：

class HelloForm extends Component {
  state = {
    text: ''
  }

  handleChange = (event) => {
    this.setState({
      text: event.target.value
    })
    console.log('输入：', event.target.value)
  }

  handleSubmit = (event) => {
    event.preventDefault()
    console.log('提交：', this.state.text)
  }

  render () {
    return (
      <form onSubmit={ this.handleSubmit }>
        <input type="text"
          value={ this.state.value }
          onChange={ this.handleChange } />
      </form>
    )
  }
}

在 React 组件的显示里面，我们经常需要根据组件里的数据去显示一个组件的列表。可以使用数组的 map 方法得到一组列表，然后放在组件的显示里用一下。注意列表里的每个项目都应该有个 key 属性，并且每个项目的  key 属性的值都应该不一样。下面这个练习可以帮您理解在 React 组件里显示列表。

有个 Message 组件是这样的：

const Message = (props) => {
  return <div>{ props.message }</div>
}

再改造一下 App 组件，先在组件的 State 里添加一组要显示的数据：

  state = {
    header: 'ninghao.net',
    show: false,
    messages: [
      { id: 0, text: 'hello ~'},
      { id: 1, text: 'hola ~'},
      { id: 3, text: '您好 ~'}
    ]
  }

上面我们添加了一个 messages ，它里面有一个 id 属性，还有个 text 属性，这个 messages 里的数据我打算用 Message 这个组件来显示。先去生成一个组件列表，在 App 组件的 render 方法里，用一下 map 方法：

const { messages } = this.state
const messageItems = messages.map(message => {
  return <Message key={ message.id } message={ message.text } />
})