一、如何写好JavaScript

1.1写好JavaScript的原则

各司其职
组件封装
过程抽象
避免不必要的由JS直接操作的样式
可以用class来表示状态
纯展示类交互寻求零JS方案

二、组件封装

结构：HTML 轮播图是一个典型的列表结构可以用无序列表u1元素来实现

表现：CSS

使用css绝对定位将图片重叠在同一个位置
轮播图切换的状态使用修饰符
轮播图切换动画使用css transition

行为：JS

行为API
- slider
行为控制流
- 使用自定义事件来解耦

1. 定义构造函数

首先，我们需要定义一个构造函数，用来创建JS组件的实例：

将组件通用模型抽象出来

function Table(element, options) {
  // ...
}

其中，element参数是表格DOM元素，options参数是一个包含组件配置选项的对象。

添加默认配置选项

接下来，我们需要添加默认的配置选项：

var defaults = {
  data: [],
  pageSize: 10,
  sortable: true,
  editable: true,
  // ...
};

function Table(element, options) {
  this.element = element;
  this.options = $.extend({}, defaults, options);
  // ...
}

在这里，我们将默认的配置选项和传入的配置选项进行合并。

实现初始化方法

当组件创建出来以后，需要实现初始化方法：

function Table(element, options) {
  this.element = element;
  this.options = $.extend({}, defaults, options);

  this.init();
}

Table.prototype.init = function() {
  this.render();
  this.bindEvents();
};

在init()方法中，我们需要调用render()方法来渲染表格，该方法用来将数据显示到表格中；然后调用bindEvents()方法来绑定事件，例如监听表格头点击事件进行排序，监听单元格双击事件进行编辑等。

实现数据渲染方法

下一步，需要实现render()方法。这个方法用来将数据渲染到表格中。

Table.prototype.render = function() {
  var data = this.options.data;
  var table = $('<table></table>');
  var thead = $('<thead></thead>');
  var tbody = $('<tbody></tbody>');

  // ... 生成表格HTML结构 ...

  this.element.empty().append(table);
};

在方法中，我们通过拼接字符串的方式生成表格HTML结构，然后将它添加到表格DOM元素中。

实现事件绑定方法

最后一步是实现事件绑定方法：

Table.prototype.bindEvents = function() {
  var self = this;

  // 监听表格头点击事件进行排序
  if(this.options.sortable) {
    this.element.on('click', 'thead th', function() {
      // ...
    });
  }

  // 监听单元格双击事件进行编辑
  if(this.options.editable) {
    this.element.on('dblclick', 'tbody td', function() {
      // ...
    });
  }
};

在方法中，我们使用jQuery的事件委托机制，监听表格头点击事件进行排序，监听单元格双击事件进行编辑。需要注意的是，在事件处理函数中，需要保证this指向当前JS组件的实例，我们可以使用self保存this指向的引用。

至此，一个简单的表格JS组件就完成了。

重构：插件化

解耦

将控制元素抽取成插件
插件与组件之间通过依赖注入方式建立联系

重构：模板化

将HTML模板化更易于扩展

组件框架

抽象

组件设计的原则

封装性、正确性、扩展性、复用性

实现组建的步骤

结构设计、展示效果、行为设计

三次重构

插件化、模板化、抽象化（组件框架）

三、过程抽象

用来处理局部细节控制的一些方法
函数式编程思想的基础应用

高阶函数

once：为了让只执行一次的需求覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程称为过程抽象
HOF：
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器

编程范式

命令式与声明式

JavaScript | 青训营