组件化的应用背景和优势在此不再赘述，下面我们将从实践的角度，讨论一下如何应用组件化的思想，下面将以我自己的理解逐步展开，抛砖引玉。

哪些内容需要组件化

在我的理解中，一个项目可以拆分为以下几种组件：

• 基础组件；
• 功能组件；
• 业务组件；

下面依次来解释几种组件的定义和规则。

CocoaPods 可以说是 iOS 开发应用最广泛的包管理工具，本篇文章主要介绍 CocoaPods 的第三方库是怎样从网络集成到我们本地的项目当中，也是制作私有库、开源库和 iOS 项目组件化的一个知识铺垫。

让我们从一张图片开始：

CocoaPods 工作流程

关于 Runloop，这篇文章写的非常棒，深入理解RunLoop。我写这篇文章在深度上是不如它的，但是为什么还想写一下呢？

Runloop 是一个偏门的东西，在我的工作经历中，几乎没有使用到它的地方，在我当时学习它时，因为本身对 iOS 整个生态了解不够，很多概念让我非常头疼。

因此这篇文章我希望可以换一下因果关系，先不要管 Runloop 是什么，让我们从需求入手，看看 Runloop 能做什么，当你实现过一次之后，回头看这些高屋建瓴的文章，可能会更有启发性。

本文涉及的代码托管在：https://github.com/tianziyao/Runloop

首先先记下 Runloop 负责做什么事情：

• 保证程序不退出；
• 负责监听事件，如触摸事件，计时器事件，网络事件等；
• 负责渲染屏幕上所有的 UI，一次 Runloop 循环，需要渲染屏幕上所有变化的像素点；
• 节省 CPU 的开销，让程序该工作时工作，改休息时休息；

保证程序不退出和监听应该比较容易理解，用伪代码来表示，大致是这样：

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
30
31
32
33

// 退出
var exit = false
// 事件
var event: UIEvent? = nil
// 事件队列
var events: [UIEvent] = [UIEvent]()
// 事件分发/响应链
func handle(event: UIEvent) -> Bool {
    return true
}
// 主线程 Runloop
repeat {
    // 出现新的事件
    if event != nil {
        // 将事件加入队列
        events.append(event!)
    }
    // 如果队列中有事件
    if events.count > 0 {
        // 处理队列中第一个事件
        let result = handle(event: events.first!)
        // 处理完成移除第一个事件
        if result {
            events.removeFirst()
        }
    }
    // 再次进入发现事件->添加到队列->事件分发->处理事件->移除事件
    // 直到 exit=true，主线程退出
} while exit == false

负责渲染屏幕上所有的 UI，也就是在一次 Runloop 中，事件引起了 UI 的变化，再通过像素点的重绘表现出来。

上面讲到的，全部是 Runloop 在系统层面的用处，那么在应用层面，Runloop 能做什么，以及应用在什么地方呢？首先我们从一个计时器开始。

最近想要做一个小项目，由于前后都是一个人，在登录和注册的接口上就被卡住了，因此想登录、注册、口令之间的关系，使用 PHP 实现登录注册模块，和访问口令。

出于安全的考虑，首先定下三项原则：

1. 在传输中，不允许明文传输用户隐私数据；
2. 在本地，不允许明文保存用户隐私数据；
3. 在服务器，不允许明文保存用户隐私数据；

在网络来说，我们知道不论 POST 请求和 GET 请求都会被抓包，在没有使用 HTTPS 的情况下，抓包我们是防不住的，如果明文传输用户隐私，那后果就不说了。

本地和服务器也是如此，比如 iOS 设备，如果存储在本地，越狱之后通过设备 Finder 之类的功能，也能轻易找到我们存储在本地的用户隐私。

使用 Keychain 在本地也有保存，但不在沙盒，暂且忽略。

上面讲到，用户隐私数据总归可以被拿到的，如何保证被拿到之后不会被用来做坏事？

我们经常能听到映射和反射，那么它们代表的含义是什么呢？

映射只是一种概念，通常是用代码方式来表示一个比较复杂的意义。例如访问网站时 404 错误的含义是“找不到当前页”，500错误是“服务器内部错误”。那么我们会把这些错误的原因和一些固定的数字对应起来，这就是一种映射。

体现在程序里，映射用的比较多的地方就是和数据库打交道。我们通常会期望不直接操作数据库而对数据库做出一些改变。那么我们会声明一个类去对应数据库的一张数据表。

例如有一张学生表，有学号和姓名两个字段。我们可以在代码里建一个学生类，下面有学号和姓名两个属性，通过一定的技术可以把这个类和那张学生表对应起来，可以实现在操作这个类的时候，却去改变那张表的数据的效果，我们可以称这是一种映射。

熟悉 C#、Java 的朋友应该不难理解反射的，反射是一种技术，很多高级语言都有这种技术。具体作用就是通过一个独立存在的对象，可以找到该对象的其他信息。

例如该对象是由哪个类实例化而成的，例如有一条狗和一个人，我们通过反射技术，可以得知狗是犬科，人是灵长目的。犬科和灵长目就是我们通过反射所得到的信息，这两个词语不是一个层面的东西。

用代码来说，映射就是 a -> b，反射就是 a.id、a.func() 等。

JavaScript 中的对象是指带有属性和方法的特殊数据类型。JavaScript 中的所有事物都是对象，比如字符串、数组、函数等。对象分为内置对象和原生对象，它们的区别在于：前者总是在引擎初始化阶段就被创建好的对象，是后者的一个子集；而后者包括了一些在运行过程中动态创建的对象。从语法层面来看的话，原生对象需要使用 new 创建，而内置对象则不需要。

JavaScript 常见的内置对象有：Array 、String 、Math 、Date 几种。

索引字符串中的字符

charAr(index) 和 charCodeAt(index) 方法可以根据 index 下标获取字符串中的指定字符，如下：

1
2
3
4
5

var str = 'hello, world!'
var subStr = str.charAt(1);
var subStrCode = str.charCodeAt(1);
console.log(subStr);  //log: e
console.log(subStrCode);  //log: 101

这里的 101 是 e 的 Unicode 编码。如越界，返回值是空的。

JavaScript 中的对象是指带有属性和方法的特殊数据类型。JavaScript 中的所有事物都是对象，比如字符串、数组、函数等。对象分为内置对象和原生对象，它们的区别在于：前者总是在引擎初始化阶段就被创建好的对象，是后者的一个子集；而后者包括了一些在运行过程中动态创建的对象。从语法层面来看的话，原生对象需要使用 new 创建，而内置对象则不需要。

JavaScript 常见的内置对象有：Array 、String 、Math 、Date 几种。

最大值和最小值

max 用以求一组数中的最大值，min 用以求一组数中的最小值：

1
2
3
4

var maxNum = Math.max(1,2,6,7,-22,67);
var minNum = Math.min(1,2,6,7,-22,67);
console.log(maxNum);  //log: 67
console.log(minNum);  //log: -22

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。

DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。我们可以将 DOM 视为连接 HTML 和 JavaScript 的接口。通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML，比如：

• 改变页面中的所有 HTML 元素
• 改变页面中的所有 HTML 属性
• 改变页面中的所有 CSS 样式
• 对页面中的所有事件做出反应

JavaScript 中的对象是指带有属性和方法的特殊数据类型。JavaScript 中的所有事物都是对象，比如字符串、数组、函数等。对象分为内置对象和原生对象，它们的区别在于：前者总是在引擎初始化阶段就被创建好的对象，是后者的一个子集；而后者包括了一些在运行过程中动态创建的对象。从语法层面来看的话，原生对象需要使用 new 创建，而内置对象则不需要。

JavaScript 常见的内置对象有：Array 、String 、Math 、Date 几种。

Array 的元素可以是任意的类型。Array 的创建有两种方式，使用构造函数：

1
2
3
4
5
6

//构造函数创建数组
var nums = new Array();
//指定数组的长度
var colors = new Array(10);
//指定数组包含的项
var arr = new Array(1, 2, 3, 4);

或者使用字面量来创建数组：

1
2
3
4

var a = 'a';
var b = true;
var c = 100;
var chars = [a, b, c];

很久很久以前，有一群人，他们决定用 8 个可以开合的晶体管来组合成不同的状态，以表示世界上的万物。他们看到 8 个开关状态是好的，于是他们把这称为 字节。

再后来，他们又做了一些可以处理这些字节的机器，机器开动了，可以用字节来组合出很多状态，状态开始变来变去。他们看到这样是好的，于是它们就这机器称为 计算机。