YongSir

这一篇仍然是视频部分的补充资料，主要就是介绍javaScript的

关于js代码

通过前边的知识，我们知道写在网页中script标签中的内容，就是javaScript代码，我们以前还提到过， javascript 是一种接近人类自然语言的高级编程语言。所以在网页中一个必然的事实就是，凡是看到

这一篇仍然是视频部分的补充资料，主要就是介绍javaScript的

关于js代码

通过前边的知识，我们知道写在网页中script标签中的内容，就是javaScript代码，我们以前还提到过， javascript 是一种接近人类自然语言的高级编程语言。所以在网页中一个必然的事实就是，凡是看到<script>标签之间包含的东西，那么它就是js代码，而js代码在现代的网页中是无处不在的，我们随意的找一些现实中的例子，比如baidu，如果我们使用开发者工具打开–还记得怎样操作吗？（想一想快捷键–F12），你就会发现大量的script标签，就像这样：

但是我们为什么需要js代码呢？

因为本身html是死的，它是什么样就在你写完它的那一刻就固定了，比如一个标题元素<title>标题一</title>一开始就固定了永远是标题一，一个数字为100,那么它就会是一直是100，像这样一经创建再也不改变的现象，通常用静态这个词来概括。但现实中的网页却不是这样，大多数时候网页是可以进行各种各样的交互的。比如在我们上次视频中的那个按钮–也就是<button>，我们点击了它会触发一定的事件，我们视频中就是让它计算最终结果并显示结果，再比如你去优酷看视屏的时候，你要去点击播放按钮才会开始播放，以及在玩游戏时你常常会通过键盘让角色运动，而让它干点儿什么通常就是靠js来帮助实现的。

换一个更通俗的例子，还记得我们前边的机器人吗，我们通过html这样的元素组成了机器人的头，身体等各个部位，而js就相当于给机器人添加了各种行动和思想，让机器人可以动动胳膊抬抬腿之类的行动，这就是为什么我的网页中需要js。因为它会让原本死的元素由静态变为动态，从而变得可以被人们点击，滚动，缩放（缩放网页，你可以试试按下键盘中的Cril键，同时滚动鼠标中间的滚轮）等等交互行为。

好了，现在停下来我们总结一下：
我们会知道，通常的网页都是可以交互的，有的有可以点击的按钮，有的有可以放大的图片，大部分网页还能随着鼠标的滑动而滚动…等等这些行为，都是依靠js来实现的。

那么我们就来看看JS的具体内容，他到底有什么魔力呢？我们重新回顾一下上次视屏中的js代码：

// 表示注释，就是用来说明你在干什么的，使用时系统会忽略掉代//的行，所以这其实是给人看的，计算机是不管的

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
34
35
36
37
38
39
40
41

<script>
  // 说明: element
  // 上边的右侧代码是元素，它是网页的基本组成部分，这些都是 W3C 规定好了的，所以不是重点，重点是下边的代码
  // 这里用到的数学公式： 速度v * 时间t = 路程s
  
  // ------------------
  // 编程就是把复杂的事情，一步一步分解
  // 目标： 创建一个网页，可以输入v和t，点击按钮，计算路程s，并显示结果
  //    1> 创建一个网页，可以有输入v和t的元素 --- 已完成，并且不需要你掌握，知道了就行
  //    2> 要能拿到v和t元素:  分别找到t/v input元素  
  //    3> a 点击按钮（事件）
  //       b 拿到现在的v/t的值
  //       c 计算
  //       d 拿到resultElm 
  //       e 修改innerText
  
  
  // 步骤2> 分别找到t/v input元素, 通过id去找到的 -- 规定好了的方法
  var speedElm = document.getElementById("speed")
  var timeElm = document.getElementById("time")
  var distanceElm = document.getElementById("distance")

  // 步骤3> 
  //    a 指定点击事件 -- 也是规定好了的， 通过onClick="anXiale()"
  function anXiale() {
  //    b 拿到现在的v/t的值
    var speedValue = speedElm.value
    var timeValue = timeElm.value
    var distanceValue = distanceElm.value

  //    c 带入公式 s = v * t ????
    var distance = speedValue * timeValue      

  //    d 拿到resultElm 
    var resultElm = document.getElementById("result")      
  
  //    e 将结果显示到 resultElm元素 -- 规定好了的
    resultElm.innerText =": " + distance
  }
  
</script>

首先，你肯定总是见到var这个单词，var是一种简写，他的全称是variable【变量】,再直白一点儿就是可以改变的量，比如在计算一个正方形的面积时，我们带入公式 S(面积) = a(边长) * a(边长),不同的a就会有不同的S， a和S都是可以改变的，因此它们都是变量，而有的量比如 圆的面积计算中 S = 2 * π * (r * r)，其中的r跟S都是可以改变的是变量，而 2 和 π 都是固定的，所以我们称呼它们是常量而不是变量，对，就是这么的直白。

恭喜你，因为变量几乎就是网页可以变化的全部秘密，正是由于js中变量的存在，所以网页才可以动起来，所以变量的作用就像是提线木偶的线，一旦拉扯那些控制线，木偶就会做动作。

其次，上边代码中还有一些符号，有计算符号 + * 还有 = ，他们的意思就是他们本身的意思，只需要注意的是 =, 在编程中并不叫等号，而是赋值符号，它表示将右侧的数值或者变量 赋值给 右侧的变量，好吧看起来的确有一些相等的意思，暂时这样理解也是没问题的。

还有，这样的语句 function anXiale() {}, 这个我们称之为函数，它是最小的功能单元，我们来具体看看：

1
2
3
4
5
6
7
8

// 函数定义: 括号里数，我们叫他参数，没有参数就不写
function 函数名（参数名1, 参数2...） {
    // 函数具体怎么作实在这里，我们称之为 函数实现
    return 返回数值  // 有的函数有，有的没有
}

// 函数调用，就是
函数名（参数名1, 参数2...)

比如,我们刚刚提到的计算正方形的面积，如果写成函数的话并使用一下就是：

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

// 函数定义
function squareArea(a) {
    return a * a
}

// 首先声明面积变量S
var S
// 然后调用函数，参数
S = squareArea(5)  
// 输出结果
console.log("面积是" + S)

运行一下结果就是，点击这里去看代码：

所以呢，函数就是一种操作，它会有输入然后执行某种操作，在比如我们使用console.log("面积是" + S)来输出结果到控制台，其实这也是一个函数，你看不到它的实现是因为 浏览器已经默默的帮你实现了，你直接使用就可以了，还有比如document.getElementById("speed")这样的函数调用，其实我说这都是规定好的，就是因为它们跟console()一样，都由浏览器帮我们实现好了，所以浏览器跟系统，其实又点儿想你的爸爸妈妈，他们已经帮你准备好了所有的物质基础，你只需要负责好好学习跟快乐成长就可以了 :)

好了，读到这里我希望在回过去看看我们上次的视频中的代码，是不是了解更多一些了呢，是不是觉得我说的那句你们基本已经学会了编程了，其实真的不是在骗你们…

所以，总结一下，网页 = html元素 + js，html是网页这个机器人的组成零件，js是可以让机器人动起来的电能和大脑。

另外，这里我举了一个计算面积的例子，你能不能参照着，想想如何去完成一个计算器呢？
我想最起码我们要有4个函数对应 加减乘除 4个基本操作对吧？还要有数据输入的html元素？对，还有呢…？

好了，下期视屏中我们一起试试吧

通过前边的铺垫，我们基本上对编程有了一些了解，简短的来说，编程就是通过编程语言，给机器预设一些指令代码，让机器能够按照一定的步骤完成我们需要的功能。
然后通过视频介绍我们知道了网页的秘密，所有的网页本质上都是代码，而且是一种叫html的代码，这篇文章，会介绍一些在视频中提到的专用词汇。

首先是关于网页

一个网页就是一个html格式的文件，如果你尝试把一个网站保存下来的话，它的后缀就是文件名.html，我相信你肯定知道txt格式, 也见过mp3,mp4,exe等。

如果你电脑里的文件是没有后缀的话，那就是系统并没有设置显示文件后缀，可以参考这里去试试https://jingyan.baidu.com/article/5d368d1e31ed903f60c057c6.html

一般来说，格式是代表着一种数据的组织方式，也指示着文件的用途。我套用个生活中的例子，需要帮助时，当你看到一个穿警服的人，即便你并不认识也从来没见过他，你也会知道他是警察，有困难就去找他帮忙。警服在这里就表示了对方警察的身份和职能，其实格式也有类似的意思，它会代表文件的某种特定的用途。比如mp4是要拿视屏播放器才能打开的，因为它是一种视屏文件格式，mp3是音乐要用音乐播放器放，txt文本格式可以用记事本打开，同理我们这里的html，它就是代表网页，是需要用浏览器来打开的。

事实上，浏览器是能够认识html中的代码，进而把这些代码渲染成漂亮的网页便于人们使用，毕竟只有专业认识才认识代码，而普通人上网只需要看到浏览器处理后的网页的样子就可以了。

– 好了，恭喜你，你了解到一个叫做文件格式的新知识了

html是有一定规则的，还记得在js.jirengu.com这个在线练习网站中，打开差不多是这样的：

刚进入时，左侧它就会自动给出一部分写好了的代码，我把它复制到下面：

1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

</body>
</html>

视屏中并没有详细说明这些东西，但你可能也发现了一些规律，比如大部分代码都好像是这样的一种形式：<单词> 有的可能还有其他东西 </单词>， 或者简单一点儿像 <单词>，总之是由一个或者几个尖括号和单词组成的结构，这种结构我们称之为网页中的一个元素[element： 元素，单元之意]。元素就像是零件，将他们组合起来就是一个网页了，事实上，你看到的所有网页都是由各种各样的元素组合起来的，就好比扣子，拉链和布料这些基本材料，可以做成各种各样的衣服那样，（这是你小姨举的例子 (^_^)v

– 好了，恭喜你，你又知道了： 网页是由各种各样的元素组成的

除此之外，上边提到的结构中还有单词我们没有说到，这些单词不是乱写的，而是由一个叫万维网联盟（缩写W3C）的国际组织规定好了的，它们是能被各种浏览器都认识的特定单词，也称之为标签， 所以基本上：

元素 = <标签名> 可能有内容 </标签名> 或者 <标签名>

所以我们现在就来找找，上述的代码中有哪些标签呢?
有一个html标签，一个head标签，一个body标签，meta跟title也都是标签，这里说明一下，第一句<!DOCTYPE html>是个例外，它的作用是告诉浏览器下面的 HTML 是用什么版本编写的，方便浏览器认识代码用的，你可以把它理解为一种固定不变的步骤。

我们知道了术语之后，再回头看看上边的代码，其实基本上就是一个大的html元素，有2个子元素是 头（head）元素 跟 体（body）元素，而头元素中又嵌套了 meta元素（这里的meta里边的charset我们称之为的属性）和 title元素， 而我们通常就会在 主体（body）元素 中利用各种标签，进行代码的编写，从而达到我们想要的网页效果，这也是我们视频中步骤一部分的内容。如果我用图表示一下，就是这样：

就像机器人拥有各种各样的零件一样，网页中w3c规定的标签目前有150多个之多，常见的还有比如视频中我们用到的 <div> （表示区域）, <button>(表示按钮), <img>（表示图片）, <input>（表示输入框）, <script>(表示js代码)等等，以后我们还会逐渐见到其他元素，不过不要慌，这些标签都不用你去记忆，用到时去搜索查查，知道它是怎么回事儿就够了。

关于js代码

…待续

上两次阅读部分的意味更加浓厚一些，都是些很细小的知识，这篇文章我们将试着尝试一些更加实际的体验，去直观感受一下什么是编程，当然前半段会有一部分编程语言发展历史的介绍，耐心看完啦。

你已经知道了编程就是跟机器交互的过程，而我们告诉机器该怎么做，靠的是一种叫做编程语言的工具。你还知道机器内部所有的信息其实都是各种数字电路的信号，我们习惯使用0和1来代表数字信号，换言之机器能认识的其实只有0101，这种机器能直接 认识和执行的由一系列01010 组成的东西我们称之为机器语言。

事实上最原始的编程，就是科学家们利用0101的组合去一步一步指示机器去完成功能的，但是只用0101又一个很大的问题，那就是虽然机器明白了，人却不懂了。具体来说如科学家A编的程序可能只有A自己知道，科学家B是无论如何都看不懂的，就算是对A自己，过了一段时间之后可能也都忘了当时是怎样编程了的。如果都是像0101这般不直观不友好的机器语言，项目就不可能让更多的人参与，机器所能完成的工作也就不可能像我们今天这样多姿多彩。怎么办呢？如果我们有一种人类能看懂而机器又能认识的语言就好了，可惜不行，因为我们前边提到了机器能也只能认识0101这样的机器语言，于是科学家从人类的实际生活中受到启发，生活中比如你想跟一个法国的小朋友交流，你会中文而她只会法语，你就会想着找个翻译就解决了你们的语言问题，于是科学家们就约定了一个总体原则，那就是所有的编程语言都最终可以被翻译成机器能认识的机器语言，这样就解决了上述问题。

按照上述的发展历程，在机器语言之上，一种更友好的编程语言被发明出来，那就是汇编语言，真实的汇编语言长得是这个样子的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.section .data
#数据段，定义以ascii编码的字符串“hello, xiao ze qiu!\n”,并以output来表示内存的起始地址
    output:
        .ascii "hello, xiao ze qiu!\n"
.section .text
.global _start
#程序以_start:开始运行
_start:
#调用write系统，eax为4表示write，ebx表示要写入的文件描述符，
#1表示标准输出，也就是终端，ecx表示字符串开头的内存地址，edx表示长度
    movl $4,%eax
    movl $1,%ebx
    movl $output,%ecx
    movl $12,%edx
    int $0x80
#调用退出系统，1表示退出，0为正常退出，这里和c语言main函数的返回值应该是一个意思
    movl $1,%eax
    movl $0,%ebx
    int $0x80

你是不是有些蒙了，看起来好难好复杂的样子啊！其实上述程序干的事情很简答，只是在屏幕上跟你打个招呼而已 – “hello, xiao ze qiu!”，但是写起来却要那么长一串，所以在这里要心疼一下早编程的前辈们��，这个例子就暴漏了汇编语言的弱点，那就是虽然总算比0101有好一些，但实在是太麻烦了，难道编程语言就不能像我们平时说话那样，表达明确又简单吗？

其实是可以的，那就是人们终于在受不了汇编之后，又发明了很多种更接近人类语言的编程语言，我们统称它们为高级编程语言，它们有很多很多，据统计有250多种并且还在不断的被发明出来，因为它们各自要解决的问题和使用领域的不同，根据不用的设计理念就有了如此多的数量，但肯定都比汇编简单太多太多，比如上述打招呼如果用C语言来实现就是：

1
2
3
4
5
6

#include <stdio.h>

int main() {
    printf("hello, xiao ze qiu!"); // print 就是打印的意思，printf指的是打印之后自动换行而已
    return 0;
}

是不是简单了很多也好懂了很多:-)， 其实还有更简单比如有一门叫JavaScript的语言中只需要一句话：

1

console.log("hello, xiao ze qiu!") // console 就是控制台，就是windows系统上那个命令行的黑框框的东西，你自己先在电脑上试试，看能不能找到

如果还是觉得麻烦，还有最简单的，比如在一门叫Python的编程语言中就是：

1

print("hello, xiao ze qiu!")

是不是很简单，这样的对人友好的高级编程语言很接近于我们日常使用的语言，于是跟机器交流就变得容易多了，这才促进了整个计算机科学的发展。

所以我们稍稍总结一下，编程语言的发展基本上是这样的： 机器语言 ~> 汇编语言 ~> 高级语言， 我们通常意义的编程就是，利用接近人类自然语言的高级语言给机器规定动作。

下面就开始思考一个个具体的问题，让我们对生活中习以为常的逻辑行为做一些具体的仔细的整理。
不防就从对现实生活中模仿开始，比如我们知道周一到周五是上课时间，而周六日是休息不上课的，就这样简单的一句话，当我们试着把每个过程说清楚，用代码的方式就像是这样：

1
2
3
4

首先是一个日期
然后把它转化成星期
如果是在周一到周五，那么正常上课
如果是周六或者周日，那么不用上课

这里边蕴含着一种选择结构，如果把它画成逻辑流程图，会更直观一些：

生活中还有其他的逻辑流程，比如再考虑这样一个例子，考试的时候你需要把全部的题做完才能交卷，这样的逻辑图是怎样的呢？我可以画出来是这样的：

跟第一种不同的是这里边不光有选择结构还附带的有循环结构的逻辑，所谓循环逻辑就是直到满足一定的条件才会退出循环，否则就会一直执行的一种结构

事实上还有一种顺序结构就是按顺序一步一步来，上述的每个箭头都代表从这一步到下一步的顺序执行，它是最符合我们人类直觉最自然的结构，所以不必额外提出来。

现在，如果你能仔细在思考一下，就会发现这个世界上所有的事情，都最终可以用上边这3种基本逻辑结构通过组合来实现，有的是选择分支多一些，有的是循环多一些，比如我们让上边考试的例子在具体一些，那就加上考试是有时间的因素，一个考试的完整流程可能是这样的，先说代码：

1
2
3
4

开始
开始做题，并开始计时
如果时间到了就必须交卷，退出
如果时间没到，就把所有题做完，退出

这里边的时间逻辑是最主要的，只要时间到了就必须交卷，不管做没有做完，还有另一种情况是时间没走完但做完了也可以交卷，文字不容易说明，不防也化成逻辑流程图：

注意图中有2条不一样的线，红色的表示同时进行，因为一开始计时就代表着可以开始做题；另外一条蓝色的线，代表每次做题都会去检测时间是否到了，如果到了就马上交卷，如果没到就继续计时和做题，基本就是2个并行分支一个计时，一个检测是否做完，在每个分支内部又是选择和循环的组合。所以这就是编程全部秘密，编程就是将某个功能，按照基本步骤进行逻辑划分，拆成一个一个简单的顺序或者选择或者循环的结构，从而最终达到某种确定的结果。

当然这里我们是通过文字和流程图实现的，实际的计算机编程中，我们只需要把上述，改为使用计算机能理解的编程语言实现了而已，所以只要你学会了将一个复杂过程一步一步的逻辑分解，就可以说已经学会了编程，这么一看，其实你已经无意识的使用了很多年的编程，只是你不知道罢了，所以编程不是什么神秘的事，相反它之非常平常。

那具体是怎样把这些逻辑通过编程语言来实现呢？其实我们只需要借助一点点数学就可以了，比如我下边简单的列举几个，看看你自己能不能看出来它是属于什么结构的：

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

// 一个 = 就是普通的等号，" == " 这个才表示 比较数值

// -------------- 1 --------------
var x = 0       // 不要管前边的var，你可以把x当成方程中的自变量一样，下边还有几个简单的单词，你应该可以自己查到的，试试吧
if (x == 0) {
	// 情况1之下做点儿什么	
}else {
	// 情况2之下做点儿什么	
}

// -------------- 2 --------------
var x = 10
while(x > 5) { // while 单词表示 当什么什么时候
	// 做点儿什么，比如输出x
    console.log(" >> " + x)
	x = x - 1
}

// -------------- 3 --------------
// x-- 是 x = x-1 的一种简写
for (var x = 10; x > 5; x--) {
	// 做点儿什么,比如输出x
    console.log(" -- " + x)
}

1很简单，就是个只有2个分支的选择结构,我们称之为 if-else语句
2通过单词也能大概猜到是个循环结构，我们称之为 while语句
3呢，其实3也是一种循环结构，这种语句在编程中称之为 for语句， 它只是比2中的 while语句 写起来更简单一些罢了, 2和3都表示一种循环结构，它们的执行结果如图

好了，这次只是让你简单的认识一下编程，至于各种语句应该怎么写，将在后续慢慢去了解，现在你只要能够知道顺序/选择/循环这3种结构，并学会把生活中的事情分解成一步一步的上述3种结构就可以了

一切都是数字和电路

我们上一次大致对电脑以及编程的概念有了一些了解，编程就像是跟机器说话，告诉机器按照我们设计的流程去完成工作，而电脑 = 电子元件 + 程序 = 硬件 + 软件。 这一节就在具体说说为什么电脑除了需要硬件之外还需要软件。

这还得从电路开始说起，我跟你提到过电路可以分为2类。一种叫数字电路,它出现的比较晚是个小弟，它的大哥是一个叫模拟电路的家伙，这家伙从人类认识和使用电以来，基本都是它，比如作为能源供应驱动电机，灯泡等等。

我还提到过，电不光是一种能量，还可以是一种信息，所以模拟电路和数字电路的区别，最根本的来说就是2者电路中的信号不一样，一个电路板如果它里面的信号是数字信号，那它就是数字电路，否则就是模拟电路。

简单的来说，随处可见的自然信号都模拟信号，比如声音信号，灯光等等，模拟信号的特点就是在时间上和取值上都是连续的不间断的，如果在你学过的数轴上，随意画出来就是一条连续不间断的曲线，就是一个典型而自然的模拟信号。

数字信号就不一样了，在时间上和取值上都是不连续的。这些说起来有些难以理解，但是通过图就看出来的：

这是很简单的图，还有更复杂一些的，你能不能判断那些是模拟的那些是数字的呢？

其实关键就是看信号图是否连续，如果没有间断那就是模拟的，如果是一个一个柱子一样的东西那就是数字的。

既然模拟信号又自然应用的又早，那为什么现在主流都是数字信号呢？

其实，再上图中你就能猜出一些，原因很多，但最关键的是数字信号简单，规律性强，简单就意味着用电量少，有规律就意味着处理很传输方便，所以数字电路可以做到很小很强，我们接着图：

上图左侧是早期的计算机，硬件主要都是模拟电路，而右侧你就很熟悉了，就是普通的家用电脑，前者有几个屋子大小而后者桌上就能放，相对于体积差异它们的功能强弱才是更让人惊奇的，后者计算能力比前者要强好几百万倍都不止，即便你的手机的处理能力，也要比屋子一样的老电脑强很多很多。这就是为什么现在数字电路被广泛的使用在各个领域，电脑就是其中最典型的存在。

了解了这些之后，我们再回到主题，电脑 = 硬件 + 软件，其中硬件指的是数字电路，那么软件呢？

其实还是好回到数字也是信息的那个例子，回顾一下吧：
比如我给定一个标准电压5v，如果比5小的电压我们称之为低电压，我们用0表示，比它高就是高电压，我们用1表示。同时我们还规定，如果高电压就代表天气晴朗适合出门玩，低电压为雨天不能出门，文字描述对应到表格就是：

那么如果给出的是1，你一看自然就知道了：噢，今天天清气朗，是可以出去游玩，0的话就正好相反。上述就通过把电压转化成了数字信号0或1（这一步是硬件在发挥作用），从而来0表示阴雨并让1表示晴天（这个规定谁代表谁就属于软件的工作），他们共同作用就完成了表示天气的好坏的功能。

让我们在扩展一下，如果科学家发现了一种材料，它做成的电路能根据天气的好坏而发生变化，雨天低于5v，晴天就高于5v，这时候我们把这种材料做的电路放到院子里，你只用在屏幕前去看显示0或者1，就知道了天气，不用自己出去看，并且整个过程是自动化的，也就是说一旦已你第一次布置好了之后，就再也不用去干预了，你就拥有了一个能自动告诉你天气的智能设备了。

这就是软件+硬件之所以厉害的原因，它们配合起来就是自动的，智能的。

看起来也不是太难，是吧

总结一下，通过这篇文章，你对软件和硬件多了解了一些：

• 电脑里的硬件基本都是数字电路，它们可以处理数字信号
• 数字信号不是0就是1，电脑中的一切本质上都是0和1，不管是图片视屏还是游戏
• 软件的作用就是为了支持和解释硬件的，它规定01代表了什么

这还是一篇概念性的材料，看过有个印象就行了，能了解到电脑中的一切都是0101很重要，因为它就是电脑工作的基本机制。预告一下：下周，我们就要开始试试最简单的编程了。

第0章 引子

你一定对电脑和手机的使用非常熟悉，这些事情你几乎天天在做：

• 打开电脑，屏幕亮起，等待一小段时间（或许你知道这是在启动系统），直到出现桌面
• 点击游戏图标，进入游戏就可以开心的玩游戏了
• 点击QQ，输入密码和账号，点击好友图像，就能在弹出的对话框中通过打字、语音或者视屏跟好友聊天了
• 到超市买东西，打开手机扫一扫就完成了付款
• 再回忆一个找动画片的例子： 打开浏览器，输入www.baidu.com就到了百度的首页，通过百度找到自己喜欢的动画片，比如“火影忍者”，在搜索结果中找到土豆网，点击它，等页面加载结束就可以看到动画片了

上述你一定非常熟练，对吧

但是你没有好奇过这一切是怎么发生的，它们背后的原理是什么呢？电脑究竟有什么魔力让它能帮你找到自己想要的信息？如果你学会了背后的东西，是不是就能自己去做自己的游戏，自己的QQ呢？

其实是可以的，在你轻描淡写的动动鼠标就完成的背后，是由大量杰出的科学家和工程师们的辛勤工作的成果，它们利用电子技术、信息网络技术和软件工程让这一切变得如此易用和普通。

那么一开始，我们就先聊聊电脑，你认为电脑是什么呢？什么才算是电脑呢？看看下边几张图吧，你猜猜图中哪些是电脑：

其实上边的都是电脑，家用台式机和笔记本很常见，但第一图的工业小型机和第四图的超级计算机就不常见了，其实远远不止这些，电脑的范围比你想象的还要广泛，比如你用的手机，每辆汽车上都有管理刹车和空调的汽车电脑，去银行取钱用到的ATM，去超市付款时收银员操作的收银机，甚至小到你玩的遥控玩具车，厨房里的电磁炉微波炉等等都可以称之为电脑，那么我们可以这样约定一下，我们所说的电脑是这样一种机器：能够自动化的实现某种或多种功能的电子设备，它们都可以称为电子计算机，也就是我们口语化的电脑。

是不是没想到原来电脑有那么多小兄弟，你的周围除了那个四四方方的带有屏幕的机器外，还有那么多设备其实都是电脑，那你在想想，除了上边我提到的之外，还有没有其他的东西也可叫做电脑呢？你可以按照我们刚才约定的那个定义去估计，试一试吧

然后我们在将注意力放到刚刚的定义上，定义里有2个关键字，一个是电子设备,一个是自动化。怎样理解呢，你可以把电脑想象成一个完整健康的人，一个人首先是有肉体躯干的，其次他还是有思想有智力的，类似的，组成电脑的各种电子器件就相当于肉体躯干，而软件就是电脑的思想智力，如果一个人只有躯干没有意识，那他就是植物人，对电脑也是一样的，如果一堆没有软件调控的硬件，也不能完成我们需要的功能。所以一个完整的电子计算机（健康的人） = 电子元件（肉体） + 程序（思想意识），更通俗一些的说法是电脑 = 硬件 + 软件

所谓编程就是编写软件的行为，是一种给器件赋予灵魂，让硬件组织起来共同完成某种功能的行为。换一个角度说来，或许更容易理解一些：我们说话用的是普通话，你跟你姥姥说话用的是山东话，你小姨跟她的学生交流需要英语，我们人类之间的交流是需要语言交流的，同样的道理，如果想让那一堆冰冷的电子器件一起干一件什么件事的话，就需要跟机器交流。跟机器交流就是编程，我们用来跟机器交流的语言就是编程语言。所以本质上编程就是通过编程语言，编写出机器能识别和执行的程序，让机器遵照先前编写好了的程序，达到完成某种功能的过程。

所以简单的说编程就是告诉机器去干什么的过程

希望你通过上面的文字，能对软件，硬件，编程的概念有一个大概的印象，并且能对电脑的认识有所扩展一些就算达到目的了

给你留一个可选的小任务：上边的图片中有个叫神威的家伙，看起来很霸气，你能不能自己动手查一查它究竟有何特殊之处呢？

概述

• 是什么？
  通俗来讲就是利用已有数据，得到某种模型，并利用其预测未来的计算机方法,跟模式识别，统计学习，数据挖掘，计算机视觉，语音识别，和NPL等领略息息相关，是一门交叉学科。一般可认为数据挖掘等同于机器学习，只是其数据来源不仅仅来源于结构化数据，还包括图像，音频等。下面的说法也常常被默许：
  模式识别最初来源于来源于工业界，后来扩展到语言，图像等等
  数据挖掘 = 机器学习 + 数据库
  自然语言处理 = 文本处理+机器学习
  计算机视觉=图像处理+机器学习
  语音识别=语音处理+机器学习

核心的学习问题的定义：针对某类任务T的,可以用P来衡量性能，如果P可根据经验E来自我完善,则称之为该计算机程序从经验E中学习。 而机器学习这么学科就是让机器进行学习的学科,其最原始的定义由Tom Mitchell等提出：
从样本集S(z, {xkk, y, ykk})学习/估计一个假设f(x)，使得f(x)是问题世界模型F(x)的一个近似

• 常见术语罗列，基本很容易理解
  f = aX + bY + cZ + ...

数据集: 所有可能取到的变量
示例/样本
属性/特征: a,b,c等
属性空间/样本空间/输入空间X：由全部属性而成的空间,如上述a，b，c为坐标轴形成的空间,每个点可以是一个样本
特征向量: 属性空间中的坐标向量
训练集
训练样本
假设
标记：关于示例结果的信息，如年龄20～35称之为适龄青年，适龄青年就是一个标记
样例：拥有标记的示例，会组成标记空间/输出空间
分类：对于离散型任务的别称
回归：预测结果是连续值的问题的统称
特征清洗相关： 采样，归一/离散化，降维，特征提取等
损失函数： 用以度量结果和预期的不同

• 适用领域

收集数据 ->

• 机器学习算法分类

引子

在早先在的组件化演化一文中，通过对组件封装的一步一步推演，最终得到了一个集API权限管理，节省命名空间，以及调用方便的方式，但仍然没有解决所有的问题，比如模块依赖管理，而这是模块化演进到可用级别的必要条件

如果不是把工作重点转移到公司前端的工作上，无论如何都不会想到前端为了处理命名空间冲突+组件加载及依赖管控+API接口权限管理，这种绝大多数语言几乎天然拥有的能力，而为此付出了多少，在Java一个package，C++中一个import module 在前端的工作中确实在是大费周折，本质原因就是js原本是被设计成一门脚本语言，设计者也没有料到web会发展成今天这样复杂和多样，而只是以函数作为作用域标准，如果不加处理项目稍大，命名空间的管理和组件的依赖就是灾难级别的，所以modeul化是必然并还将继续发展，正如：

规范形成的过程是痛苦的，前端的先驱在刀耕火种、茹毛饮血的阶段开始，发展到现在初具规模

模块化？

道理都说了，那就从代码来直观的展示一下模块化的历程，以下每一个🔜表示一种演进：

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

function foo1(){
    // do something
}

function foo2(){
    // do something
}

// 🔜 函数 => 类
var Module = {
    var1: 1,
    var2: 2,
    foo1: function(){  /* do something */ },
    foo2: function(){  /* do something */ }
}
Module.foo2(); 
Module.var2 = 100; // 无权限控制

// 🔜 类 => 借助立即执行函数
var myModule = (function(){
    var var1 = 1;
    var var2 = 2;
    foo1: function(){ /* do something */ },
    foo2: function(){ /* do something */ }

    return {
        fn1: foo1,
        fn2: foo2
    };
})();
myModule.foo1()

很容易看出利用立即执行函数的好处，在以上的基础上随着服务器端NodeJS的兴起，终于推出了第一个模块化的js规范 – CommonJS

服务器端的CommonJS

具体来说就是3个基本规范：
1 作用域：单独文件，单独作用域，除非是Global的
2 输出：指定module.exports为唯一出口
3 依赖：通过require加载模块
于是上述demo套用这个规范以后就是：

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

// --- Tony.js中 ---
var name = 'Tony Stark'
fucntion sayName() {
    console.log('Iron man is' + name)
}

module.exports = {
    run: sayName
}

// --- Other file ---
var tonyModule = require('./Tony.js') // 同步，并且相对路径时js需省略
tonyModule.sayName()

如果完全将CommonJS移植到浏览器，那么require同步加载势必会影响体验，但不同步呢依赖件的管理就不那么容易了，这个问题偏向的不同导致了2中浏览器端的模块化标准：AMD和CMD

AMD 和 CMD

但是万变不离其宗，不管是谁都需要解决模块定义，输出和输入（加载)这3个问题

• AMD（Asynchronous Module Definition): 通过RequireJS库，实现了浏览器端异步模块定义，具体来说：

1 模块定义和输出：使用全局函数define(id?, dependencies?, factory／exportValue)定义模块，其中的最后一个参数factory／exportValue为输出，可以是一个对象的值，更多的是初始化工厂方法
2 异步输入／加载： require([dependency, ...], function() {})函数，会自动异步加载依赖项，直到加载完成才执行对应操作

1

<script data-main="js/app.js" src="lib/require.js"></script>

页面上只出现一个<script data-main="js/app.js" src="js/require.js"></script>即可，这里的data-main是require的入口路径有的类似于main()函数一样，requirejs使用它来启动脚本的自动加载过程，这样就可以组织一个典型的页面结构：

然后使用时借助require([dependency, ...], function() {})函数

1
2
3
4
5
6
7
8
9
10

requirejs.config({
    baseUrl: 'js/lib',
    paths: {
        app: '../app'
    }
});

requirejs(['jquery', 'canvas', 'app/sub'], function ($, canvas, sub) {
    //using jQuery, canvas and the app/sub here
});

这就是AMD规则

• CMD(Common Module Definition): 以SeaJS为基础，国内发展出来的通用模块加载规则,其定义和输入输出如下define(id?, [dependency...], function(require, exports, module) { });，一个简单的例子：

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

  // Tony.js define(function(require, exports, modules)) { var $ = require('jQurey.2.1.js') // 假设tony需要使用jQurey var name = 'Tony Stark' fucntion sayName() { console.log('Iron man is' + name) } module.exports = sayName // 输出 } // ----- Other file ------ var sayName = require('lib/Tony.js') var ironMan = new Tony() ironMan.sayName()

可看出更commondJS更相似，推崇一个文件一个模块，推崇就近加载，也就是用到就去加载

关于这两个的区别网上可以搜出一堆文章，简单总结一下

• 最明显就是：在模块定义时，对依赖模块的执行时机处理不同（注意不是加载的时机或者方式不同）

  AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块
  CMD推崇就近依赖，只有在用到某个模块的时候再去require
  这种区别各有优劣，只是语法上的差距，而且就现在阶段来说，requireJS和SeaJS都支持对方的写法，所以写法的差距都不在具有区分度

很多人说requireJS是异步加载模块，SeaJS是同步加载模块，这么理解实际上是不准确的，其实加载模块都是异步的，只不过AMD依赖前置，js可以方便知道依赖模块是谁，立即加载，而CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块，这也是很多人诟病CMD的一点，牺牲性能来带来开发的便利性，但实际上解析模块用的时间短到可以忽略

同样都是异步加载模块，AMD在加载模块完成后就会执行该模块，所有模块都加载执行完后会进入require的回调函数，执行主逻辑，这样的效果就是依赖模块的执行顺序和书写顺序不一定一致，看网络速度，哪个先下载下来，哪个先执行，但是主逻辑一定在所有依赖加载完成后才执行
CMD加载完某个依赖模块后并不执行，只是下载而已，在所有依赖模块加载完成后进入主逻辑，遇到require语句的时候才执行对应的模块，这样模块的执行顺序和书写顺序是完全一致的

组合兼容式

CMD 和 AMD 最初从在写法上就能区分，但是现在逐渐都兼容对方的写法，虽然对于学习来说不免会带来一些困惑，但对于实际项目的便利性确是实实在在的，其实兼容起来很容易，对于AMD/CMD检测define，对于CommonJS检查module.export，实现起来大致如下：

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

(function (name, definition, context) {
    if (typeof module != 'undefined' && module.exports) {
        // 在 CMD 规范下 (node)
        module.exports = definition();
    } else if (typeof context['define'] == 'function' && (context['define']['amd'] || context['define']['cmd'])  ) {
        //在 AMD 规范下(RequireJS) 或者 CMD 规范下(SeaJS)
        define(definition);
    } else {
        //在浏览器环境下
        context[name] = definition();
    }
})('sample', function () {

    var sample = (function () {
        "use strict";
        var a = 1;
        function inc(){
            a++;
        }
        function get(){
            return a;
        }
        return {
            inc: inc,
            get: get
        }
    })();
    return sample;
}, this);

这样就实现了写法兼容，想怎么写都行了

js作为一门松散的语言，如果有严格class_base面向对象语言的经验，如java，C#的，经常会有WTF的感受，不是说好了面向对象吗，怎么类不是类，继承不好好继承，多态到混乱的感觉，也写了不短时间的js，最感慨的就是：前端程序员们，竟然使用一门如此简陋的语言创造了如此异彩纷呈的互联网世界,这比js本身更WTF，不信去那个著名的诡异js的网站测测，看能做对几个题💔。好了不在吐槽引战了,本篇就来彻底说说js中的面向对象

在说明之前，特别需要指出的是，不要因为对js这种prototype_base不了解，就按照java等的标准去有色的去看js，殊不知从面向对象这个层面上来说，只要满足对操作和消息的封装，不管是class_base还是prototype_base，即便实现方式差异巨大，但无疑都是最纯正的面向对象

在js中它本身并没有明确的类的概念，这是最让很多人WTF的地方，面向对象居然没有类，但是如果从OOP的本意出发，只要可以用引用类型抽象出具有相同特性的结构，对操作和消息进行黑盒实现，那么就是面向对象，js中这个封装结构就是Object对象，在ECMA-262中这样给对象定义：无序属性的集合就是对象，其属性可以包含基本值，对象和函数，所以看起来就是一组没有特定顺序的键值对集合。对象的每个属性或者方法都有一个名字，而每个名字都会有映射的值。所以从另一角度来说，ECMAScript的对象就是散列表–一组键值对，值可以是基本值或函数。当然想所有的面向对象语言一样，对象是基于引用类型创建的

从属性说起

回顾一下对象的创建：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// Object实例创建
var person = new Object()
person.name = 'Tony stark'
person.age = 42
person.job = 'Iron man'
person.sayName = function() {
	alert(this.name)
}

// 更加常见的 字面量 形式
var person = {
	name: 'Tony',
	age: 42,
	job: 'Iron man'
	sayName: function() {
		alert(this.name)
	}
}

当创建一个对象的时候，除了我们所定义的属性，对象本身还有为实现JavaScript引擎，还有为属性规定其特征的内部属性，也称之为特征属性，通常这些内部值是不能访问的，为了区分将其规范到2对方括号中，而特征属性可分为2种：
1 表征数据的特征属性

1
2
3
4

[[Configurable]] // 表示能否通过delete删除属性，能否修改，默认为true
[[Enmuerable]]   // 表示是否可通过 for-in 遍历属性，默认为true
[[Writable]]     // 可写的
[[value]]        // 就是具体的属性数据值

以上这种属性的属性，大家都能嗅出权限控制的味道来，实时就是如此，并且js提供了Object.defineProperty()方法来控制，如：

1
2
3
4
5
6
7
8

var person = {}
Object.defineProperty(person, "job", {
	configurable: false,
	value: "Iron man"
})

delete person.job
alert(person.job) // Iron man

事实以上在严格模式之下，是会抛出异常的，这就是特征属性对属性数值的规范，并且一旦规定configurable: false，无法使用Objcet.defineProperty()方法修改除writable之外的任何特征，在使用中尤其重要的一点是，Object.defineProperty()方法，如果不指定，会默认设置enumerable，configurable，writable为false的,即便没有人真的用这个方法来创建属性，这一点也要足够审慎

2 访问器特指属性
这一种特征属性不包含数值，只包含了一对儿setter 和 getter，更具体一些就是：

1
2
3
4

[[Configurable]] // 表示能否通过delete删除属性，能否修改，默认为true
[[Enmuerable]]   // 表示是否可通过 for-in 遍历属性，默认为true
[[Get]]          // 默认值是undefined
[[Set]]          // 默认值是undefined

对于访问器属性，也只能通过Object.defineProperty()/defineProperties()设置，用法就不多说了，绝大多数就是用以设置一些对象默认的值
而对于一个已有属性的特征属性，可以通过Object.getOwnPropertyDescriptor()得到

对象创建和扩展

看完了属性，让我们注意力转回到对象的创建上，毕竟我们的开发就是在频繁的创建或者扩展对象，先直接看代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 工厂模式创建
function createPerson(name, age, job) {
	var obj = {
		name: 'Tony',
		age: 42,
		job: 'Iron man'
		sayName: function() {
		alert(this.name)
		}
	}
	return obj
}

// 构造函数创建
function Person(name, age, job) {
	this.name= name; 
	this.age= age;
	this.job= job;
	this.sayName= function() {
		alert(this.name)
	};
}
var tony = new Person('tony', 29, 'Iron man')

第一种方式很好理解，但一个突出的问题是，我们虽然创建了对象，但并不显示的知道对象的类型，这是不能接受的；而第二种方式，显然很明确，并且使用了 new 操作符，new实际上包含了：创建对象 -> 构造函数作用域赋给创建的对象 -> 执行构造函数 -> 返回新对象的完整过程

然后集中到构造函数中，向Java等靠拢，习惯性的大写，但它之中并没有显示的创建对象的操作，更没有直接把属性值赋给this对象，也没有return, 这是因为 new操作符都做了

对于一个对象，构造函数本身，就对应于constructor属性，可以这样验证：

1
2
3

var p1 = new Person('p1', 12, xxx)
var p2 = new Perosn('p2', 22, yyy)
p1.constructor == p2.constructor == Person // true

但使用构造函数并不是没有缺陷，如上述的p1和p2, 其sayName由于是函数，我们知道本身也是对象，所以各自实例花了自己的Function，换个角度会更明白一些：
this.sayName: new Function('alert(this.name)')

可见p1和p2的sayName的值，的确是各自分别地实现化了，那么问题随之而来：
第一：上述很明显不是我们通常意义上所理解的面向对象，虽然不排除有现实需求
第二：更严重的是在使用中，会导致不同的作用域链和标识符解析，出现了同名函数实际上不相等的事儿，eg：

1

p1.sayName == p2.sayName // false

解决方式就是避免每个实例都创建，所以使用this对象单独绑定函数就行，like this：

1
2
3
4
5
6
7
8
9
10

// 构造函数创建
function Person(name, age, job) {
	this.name= name; 
	this.age= age;
	this.job= job;
	this.sayName= sayName;
}
function sayName() {
	alert(this.name)
}

这明显是一种妥协的处理方式，为了让各个实例共享单独的函数对象，把函数放到了全局，且不说有很多的函数，造成全局命名是灾难，但是alert中的this只表示Person，从语义上就不脱，所以我们需要救助于原型模式

使用原型模式创建和扩展对象

接着上述，如果使用原型模式，我们这样创建对象：

1
2
3
4
5
6
7
8
9
10
11

function Person() {}
Person.prototype.name = 'tony'
Person.prototype.age = 29 
Person.prototype.job = 'Iron man'
Person.prototype.sayName= function() {
	alert(this.name)
}

var p1 = new Person()
var p2 = new Person()
p1.sayName == p2.sayName // true

这样所有的实例都会共享属性和方法了，同时注意到构造函数中什么也没有，但它是怎么做到的呢？这就涉及到ECMAScript中原型对象的性质

涉及到js中对象的结构，那就使用console.dir(obj)查看一下，下图分别是使用最普通的字面量创建，构造函数以及原型模式的对象结构：

可见：

• 任何时候，只要创建一个新对象，那么该对象就会有一个自动的prototype属性，这一句__proto__:Object告诉我们，这是一个指向对象的原型对象的指针 – 该对象包含了所有实例共享的属性和方法
• 创建的对象本身的属性可以是从原型对象获取，也可以由自己创建，通过上图属性出现在不同的层能明显的看到
• ㊙️特别注意，原型对象中才存在constructor属性，它会指向对象的构造函数。上图可见，它默认会指向Object，但一旦自定义了构造函数，就指向构造函数本身，但不管怎样，构造函数是实例本身没有的，只有实例的原型对象才有

更加直接一些，我们可以通过isPrototypeOf()方法来确定对象之间是否是同一个原型对象，通过getPrototypeOf()来回去原型对象的属性值比如：

1
2
3
4
5

Person.prototype.isPrototypwOf(p1) // true

var personProtoObj = Object.getPrototypeOf(preson)
console.log(personProtoObj == Person.prototype) // true
personProtoObj.name // 'tony'

我们可以拿到了原型对象及其name属性值，从实例角度来说，获取一个属性，首先从本身的属性中去查找，如果本身没有，就去原型对象中查找，这就解释了按上述方法，不管有多少实例，最终都会向上追溯到同一个原型对象的相同属性，这就实现了共享

更进一步，如果实例拥有一个相同的属性，那么会怎样呢？使用hasOwnProperty()会检测属性是否存在于当前实例，如：

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

var p3 = new Person()
p3.name = 'hulk'

p3.hasOwnProperty('name') // true
p1.hasOwnProperty('name') // false

console.log(p3.name) // 'hulk'
console.log(p1.name) // 'tony'

// 当delete之后
delete p3.name
p3.hasOwnProperty('name') // fasle
console.log(p2.name) // 'tony' -- 重新找到原型中的属性值

同名属性如果自有，就而不会去影响原型的属性，也就是上述没有，才上溯到原型的原则。此外对于for - in循环，也只会在实例本身中去循环而不会去管原型中的属性

上边的写法很麻烦，不妨把各个属性用字面量组合写到一起：

1
2
3
4
5
6
7
8
9
10
11

function Person() {}
Person.prototype = {
	name: 'tony',
	age: 42,
	job: 'Iron man'
	sayName: function() {
		alert(this.name)
	}
}

var stark = new Person()

使用字面量把各个属性写到一起，如果输出stark的结构的话，还是能看到不同之处，如图：

可见比较两者，可看出这种字面量写在一起时，其原型对象并没有contructor,而是完全重写了一个新的原型对象，这个重写也切断了实例和原本prototype.constructor之间的连接关系，这是最大的不同之处,解决方式就是显示的添加一个constrictor并让其指向对象本身，这里就是在重写的原型中添加：

1
2
3
4

Person.prototype = {
	...
	constructor: Person
}

好吧，那到底该如何使用构造函数构造对象呢？一句话来说的就是，要共享的原型之，不共享的构造之,eg:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function Man(name, age, job, wife) {
	this.name = name
	this.age = age
	this.job = job
	this.wife = wife
}

Man.prototype = {
	constructor: Person,
	sex: male,
	sayName: function() {
		alert(this.name)
	}
	eat: function() {
		alert(this.name + 'is eatring!')
	}
}

var tony = Man('tony', 42, 'Iron man', 'xxx')
var hulk = Man('hulk', 32, 'Hulk and scientist', 'yyy')

如上所示，tony和hulk的名字，工作，老婆是不能共享的，那就放到构造函数中，而都作为男性，性别是一样的，都能报出自己的名字，都能吃饭，所以这些共享的放到原型对象中

综上所属，可看出通过原型对象，js实现了各实例属性的共享，这就是原型对象的秘密

js对象的继承

通过上述，所有的对象都有原型对象的指针，并且原型对象本身也有一个原型对象，都是来自于Objcet这个基本对象，大致能猜到继承的影子了，对于Java等OO语言，继承可以有2种：接口继承和实现继承，接口只继承方法签名儿实现继承则继承实际方法，在js中是没有接口集成的，只有实现继承，如前边的揣测，使用过原型对象组成的链条来实现的

• 基本的原型链式继承

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

  var SuperType = function() { this.property = "super" } SuperType.prototype.getSuperValue = function() { return this.property } var SubType = function() { this.subProperty = "sub" } /* 后代对象的原型是父对象的实例 */ SubType.prototype = new SuperType() SubType.prototype.getSubproperty = function() { return this.subProperty } var father = new SuperType() var son = new SubType() console.log(instance.getSuperValue()) // 'super' console.log(father) console.dir(son)

最关键的一句就是SubType.prototype = new SuperType(),也就是重写子对象的原型对象让后代对象的原型对象 = 父对象的实例，由此实例的属性和实例能找的它原型的属性，就都可以让子对象顺着它的原型对象而收缩到，从效果上就实现继承，如上述代码他们的继承图就是：

很显然，这样单纯的让原型对象==父对象的实例以后，回引出一下几个问题：
1 如果需要为向子对象的原型对象中添加新方法，是不能写成字面量的形式的。因为这样一来就等同于重现了实例对象，会覆盖掉最初的原型对象，自然链接父对象的原型链会被切断，而失去继承的效果，这一点是尤其需要注意的
2 基于同样的道理当子对象为他的原型添加属性，这个属性会被共享到所有的子对象实例，所以不应该把子对象的构造函数留空
3 此外还有一个问题是，再也无法单独为超对象的构造函数传递参数，因为这势必会影响到继承自他的子对象
所以单纯使用原型链只能算是粗暴的继承

• 伪经典继承（也称组合继承 combination inheritance）
  这的将构造函数 + 原型链组合的一种方式，其思路是：原型链实现对原型对象的继承，而实例属性的继承通过构造函数实现，如此便是：

  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

  function SuperType(name) { this.name = name this.colors = ['red', 'green', 'bule`] } SuperType.prototype.sayName = function() { alert(this.name) } var SubType = function(name, age) { // 继承父对象的实例属性 Supertype.call(this, arguments) this.age = age } // 继承父对象的原型属性 SubType.prototype = new SuperType() // 可以选择纠正一下构造函数 <!--SubType.prototype.constructor = SubType--> SubType.prototype.sayAge = function() { alert(this.age) } var son1 = new SubType('son1', 22) son1.colors.push('yellow') son1.sayName() // son1 son1.sayAge() // 22 var sonOther = new SubType('other', 44) console.log(sonOther.colors) // ['red', 'green', 'bule`] sonOther.sayName() // other sonOther.sayAge() // 44

看图更加清晰一些：

由于父对象的实例属性，在子对象的构造函数中完成继承，所以等同于子实例属性的创建和覆盖，同时只属于子实例实例如age不在被共享，而共享的只是来自于父实例的属性，这解释了son1.colors 和 sonOther.colors的不同；来自于父类原型的属性及方法以及被继承。可见没有了上面只使用原型链的问题，但这样就完美了吗？

上述这就用js实现了java类一样的继承了，但在js中绝大多数时候，是不需要这样完全模拟类的继承的，并且并不完美：至少SuperType就被调用了2次，一次在构造函数中，一次在链接原型链时，所以还需要改进

这就是js更常见的继承了，它并不模拟类的实现，虽然看起来不够模版化，数据耦合性很高，但却是见的比较多的，使用extendObj简单的封装了一下

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

var extendObj = function(superObj) {
    var obj = new Object(superObj.prototype)
    obj.constructor = obj
    return obj
}

var fa = {
    name: '老王',
    surname: '王',
    familyName: function() {
        console.log(this.surname)
    }
}
console.log(fa.familyName())
console.dir(fa)

// 不使用构造函数,不模拟类
var sequela1 = extendObj(fa)
sequela1.name = '小王'
sequela1.course = '数学'
sequela1.projectWork = function() {
    console.log(this.course)
}
console.dir(sequela1)
console.log(sequela1.projectWork())

综上，就是js的继承，可见js即便他现在使用很广泛，也还有很多脚本化的身影，继承写起来并不入java等的容易，但也的确实现了继承，何况能理解到另一种形式的OOP，也很助于理解其他OOP语言

附上一个测试的demo代码：

向所有刚接触到VIM的新手一样，笔者曾几何时也把vim搞的花里胡哨，美其名曰vim-ide，折腾了tons of plugins，直到vim被弄得越来越臃肿，直到遇到了浩哥，看到大哥信手纯vim在我面前完成了所有的那些，我原本只能借助插件完成的功能，一时惊愕不已: 原来这些VIM全都是自有的，这篇的目的并不是让大家告别插件，彻底的不用，而是结合笔者自己的使用经验,多给一钟选项罢了，好了开始吧

vim下的文件跳转和查找

不知道大家是否注意到过vim的设置选项中，是有一些默认的值得，比如:set path?，多半会输出这样一个结果：

1

path=.,/usr/include,,

通过path这个名称，大致也能猜到这是vim有关文件查找的路径，后边的就是指几个默认当前目录下，所以不出意外的话我们的查找应该以当前目录层级的相对路径，可是很可能你并不明确当前目录下的文件，这时候使用:find *通配的去查找着当前路径下的文件，可以使用tab跳转，但是如果:set wildmenu的话，找起来就更方便了，画风是这样的

然后enter，就进入到了想要的文件，这就是实现了简单的文件查找和变更，如果此时先要回到原来的文件，可以通过:ls命令，他会罗列出当前vim缓存所有的未关闭的文件，like this：

比如这里我想回到vim拾遗的文章，输入：

1

:b vi

我甚至都不用tab出完整的文件名，直接enter就回到了原来的文件，当然你也可以语义化为back
vi…

vim自己的自动补全

用vim敲代码几乎都或多或少听过YouCompleteMe这个插件的大名，它几乎支持每种语言，让代码写起来更容易，但实际上，vim本身就提供了这样的功能，那就是一系列的Cr + n的命令，下面列举如下：

1
2
3
4
5
6
7
8

" 当前文件匹配
Cr x + Cr n " next 
Cr x + Cr p " pre 

" 文件夹匹配
Cr x + Cr F 再配合 n/p 
" tag匹配
Cr x + Cr ]

谁用谁知道,是的我已经听到有人吐槽这个原生OnmiComplete很若，但是对多数人来说的确够用了，如果实在想做到想IDE一样索引API，那还需要CTags，对我来说完全目前还用不上，自带的足以，以后有机会在补上Ctags 及 JSTags 根vim配合的自动补全吧

引子

大数据处理和存储框架Hadoop，除了最重要的HDFS和MapReduce/Spark计算框架之外，还需要很多辅助组件，比如需要分布式协调系统zookeeper来做热备，维护元数据命名空间, Sqoop作数据导入导出等等。这些都是从整个系统上的工具，而作为数据持久化的存储系统的HDFS，自然也发展出了很多自己的辅助组件，其中HBase无疑是最耀眼的

是什么？

简单的，HBase是一种类数据库的存储层工具，其用于组织和管理结构化数据的存储，由于需要服务HDFS，自然它也是分布式的，并且是一种 列式的分布数据库 ，最早由Goolge的BigTable论文中提出。虽然依托于HDFS很容易让人想起另一个结构数据工具Hive，但二者的区别和设计目的是不同的，在生态中的所处位置也不一样，这一点在Hive初探文章中有所探讨，总体来说，Hive是MepReduce层的工具，而Hbase是在结构化存储层，直接连接hdfs，还有诸如：

• Hive并不适用于实时数据查询处理，而这是HBase的强项
• Hive部署不依托Zookeeper，而HBase需要
• Hive的交互有SQL，而HBase不直接提供

相对于Hive的比较，更有趣的是HBase根传统数据库，比如mySQL这样的行式数据库的不同

HBase解决了那些HDFS的问题呢？HDFS本身就拥有良好的容错和扩展性，常常被扩展到上百节点，但仍然存在着作为文件系统，相较于结构化存储系统固有的天然劣势：如果我们只关心文件中的一部分数据，想对部分数据进行操作，文件系统只能通过对整个文件进行扫描来实现，所以HDFS：

• 不支持数据查找
• 不适合增量式数据处理
• 不支持数据更新

如果是单纯的离线存储也就罢了，但现实往往有实时性的需求，所以才有了HBase对HDFS的补充，HBase可以支持：插入／删除／查询等单条/部分数据的操作，便于高效过滤和读写数据

也正是由于其设计目的限制，让HBase拥有了一些跟传统数据库完全不同的实现，这就是列式无模式稀疏的数据组织方式。

列式？ 🤔因吹死停

先来看看一组数据，如果是在传统RDBMS中如mySQL是这样存储的：
| id | name | nickName | password | time |
| :–: | :——: | :——: | :——: |:——: |
| 001 | zhangsan | zzss | p11zzz | 20161212 |
| 002 | lisi | lsls | 333lll | 20161213 |

每一行的是一个完整数据单元，每一列对应于都是一个具体数据。但是在没有建立索引的情况下，读取整行，在遍历查找数据，会付出巨大IO；而索引和视图的建立，付出的IO和性能也不容忽视；最重要的是为满足多样的查询需求，数据库要不可避免的大量扩大膨胀，才能满足性能需求。而这些问题HBase是怎样处理的呢，如果上述数据在HBase中是怎样存储的呢？

数据模型

上述是一个一种物理存储的形式，不太容易看明白，如果表述为逻辑存储形式：

从上述的物理和逻辑排布中，能看出在HBase中：
只有一中索引标识那就是RowKey，

传统行数据库的问题

构架，为什么能做到实时？

• 预写入日志：WALs

HDFS的物理目录结构

在Hbase的设置文件中，具体设置：
<name>hbase.rootdir</name>

常见操作

• 2种方式

  • JDBC API
  • CLI

• 读hdfs

• 增
• 删
• 查
• 改
• 写hdfs

核心使用

• 热点问题：客户点直接访问集群少数节点，导致节点机器超载，性能下降甚至region不可用，从而影响同RegionServer下的其他region
• rowKey的设计
• 窄表和宽表
• 负载均衡

一个案例

jQuery中提供了一些常用的动画，拜强势的PM和UX所赐，在他们威逼利诱之下也让我逐渐熟悉了jQuery动画的某些用法。

在具体说之前，不妨先来猜测一下，如果让我自己造一个专门的Animation的轮子，我想至少要满足一下功能：
1 简单的常用动画，要足够简单–如hide，show，toggle…
2 能对简单的动画进行组合，组合出比较复杂的动画，并且对整个动画执行的各个关键帧，要能控制和截断动画等操作
3 需要一个代完整参数的仿射变换的函数，就像cocoa中的CGAffineTransform一样：

1
2
3
4

struct CGAffineTransform {
    CGFloat a, b, c, d;
    CGFloat tx, ty;
};

并且要映射成CSS

如果上述这些基本需求能满足，那么基本上这个地球上存在的能想到的动画都基本能实现，具体实现上由于帧动画和组合动画的要求，自然需要一个统一的动画队列，甚至是动画缓存池，要以对各个动画生命周期的控制

事实上jQuery设计者们都不是吃素的，他们为其提供了远超上以上需求的动画API，只是很多时候我们没有去仔细研究罢了

先从一个slideShow的封装说去

在前端虽说已经有了一些很成熟的UI库，但是对于我这个有过客户端开发经验的人总是忍不住会对一些常见的组建进行自以为是的封装，总想着向MFC，Cocoa那样完全组件化的开发，特别是针对于UI层级，但是考虑到前端的特殊性，这两种封装思路有时候并不经相同，所以想借着一个轮播slide的Demo，浅显的梳理一下。

直接从最关键的接口设计入手：于客户端封装相比，前端的组件可以全部js化，也可以html实现，更多的是二者兼而有之，而客户端平台往往只需要管理好接口API权限和参数，没有这种选择性的问题，比如在本例中，可以这样:

1
2

<script scr='slideShow.js'></script>
<div class='slideShow'></div>

仅仅通过一个div借助js来实现,至于轮播的图像数据，以及其他元素全部通过js来添加，看起来很美妙:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$.fn.slide = function(opt) {
    // 创建5个img
    // img设置样式，src等等
    // img包裹个几层
    ...

    // 创建一个指示器 
    ...

    // 创建next／pre btn等等
}

// 调用
$('.slideShow').slide({
    width: 300px;
    height: 200px;
    numOfCell: 5;
    auto: true;
    ...
})

也可在更多html的基础上，如：

1
2
3
4
5
6
7

<div class='banner slideShow'>
    <img class='picCell' scr='http://001.png'></img>
    <img class='picCell' scr='http://001.png'></img>
    <img class='picCell' scr='http://001.png'></img>
    <img class='picCell' scr='http://001.png'></img>
    <img class='picCell' scr='http://001.png'></img>
</div>

这一种明显给了更多的html内容，特别是img元素样式的单独分类,让变动更加直接，看起来也还不错，为了方便使用jQuery，具体例子的gits：https://github.com/13hoop/sliderShow/blob/master/index.html

1
2
3
4
5
6

// 调用方式
$('.banner').slides({
    width: 480,
    height: 360,
    auto: true
})

以上2中共同之处都是直接封装的$.fn上，这样调用时通过$('.banner')调用,看起来的确是很方便，但遗憾的是直接从是对jQuery的扩展，但一下子让所有的页面都具有了sliderShow，太过粗暴的硬塞给所有依赖jQuery的文件，很多时候是没有必要的

困惑 😖

我自己第一个很困惑的问题是对于样式在封装中的处理：
是用js创建样式，还是不使用？如果全部用js会不会引入其他问题，比如有2个同样的控件，同样的样式要js创建2遍，性能如何？如果按照web规范，结构是结构，样式是样式，那对于基本不变的样式如在移动端页面，岂不是不能做到开箱即用？在纠结以一段时间之后，很可悲的发现与其这样瞎想，不如直接动手试试，尝试几次之后，不得不接受这样的结论：没有一个一劳永逸的准则，具体控件具体实现？🤔，完全是废话根没说一样😂，看来这个问题只能探讨到这儿了

接着说封装形式，前边是封装到jQuery的fn上，如果借助js模拟类的形式呢？：

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

// 创建实例
new Banner($('.banner'), function() {

})

// Banner`类`
var Banner = function($target, callback) {
    this.$target = $target
    this.callback = callback
    this.init()
    this.bind()
}
Banner.prototype.init = function() {
    // 创建5个img
    // img设置样式，src等等
    // img包裹个几层
    ...

    // 创建一个指示器 
    ...

    // 创建next／pre btn等等
}
Banner.prototype.bind = function() {
    // 事件 here
}

很方便简洁的代码组织形式，自己偶尔写写简单基本都是按这个套路的，比如一个懒加载的图片墙，采用类型的封装之后就是：

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
34
35
36
37
38
39
40
41
42
43
44
45

var Explode = function ($target, callback) {
    this.$target = $target
    this.callback = callback
    this.check()
    this.bind()
}
Explode.prototype.bind = function () {
    var _this = this
    var clock // 模拟网络延伸
    $(window).on('scroll', function (e) {
        if (clock) {
            clearTimeout(clock)
        }
        clock = setTimeout(function () {
            console.log('hello')
            _this.check()
        }, 100)
    })
}
Explode.prototype.isVisible = function () {
    var height_win = $(window).height()
    var scrolled = $(window).scrollTop()
    var height = this.$target.height()
    var offTop = this.$target.offset().top
    if (height_win + scrolled >= offTop && offTop + height >scrolled) {
        return true
    } else {
        return false
    }
}
Explode.prototype.check = function() {
    if(this.isVisible(this.$target)) {
        this.callback(this.$target)
    }

$('.container img').each(function (k, img) {
    var $value = $(img)
    new Explode($value, function ($target) {
        var url = $value.attr('data-src')
        if ($value.hasClass('loaded')) return
        console.log(k + '~~~')
        $value.attr('src', url)
        $value.addClass('loaded')
    })
})

最好的方式

但缺陷还是有的，最明显的就是没有实现权限管理，暴漏了太多，不妨再来一次：

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

var Explode =(function () {
    var _Explode = function ($target, callback) {
        this.$target = $target
        this.callback = callback
        this.check()
        this.bind()
    }
    _Explode.prototype.bind = function () {
        var _this = this
        var clock // 模拟网络延伸
        $(window).on('scroll', function (e) {
            if (clock) {
                clearTimeout(clock)
            }
            clock = setTimeout(function () {
                console.log('hello')
                _this.check()
            }, 100)
        })
    }
    _Explode.prototype.isVisible = function () {
        var height_win = $(window).height()
        var scrolled = $(window).scrollTop()
        var height = this.$target.height()
        var offTop = this.$target.offset().top
        if (height_win + scrolled >= offTop && offTop + height > scrolled) {
            return true
        } else {
            return false
        }
    }
    _Explode.prototype.check = function () {
        if (this.isVisible(this.$target)) {
            this.callback(this.$target)
        }
    }

    return {
        init: function(targets, callback) {
            $(targets).each(function(idx , target){
                new _Explode($(target), callback) 
            })
        },
        // once: function(targets, callback) {
        //     $(targets).each(function(idx , target){
        //         new _Explode($(target), callback) 
        //     })
        // }
    }

})()

Explode.init($('.container img'), function($elNode) {
    var url = $elNode.attr('data-src')
    if ($elNode.hasClass('loaded')) return
    $elNode.attr('src', url)
    $elNode.addClass('loaded')
})

通过一个匿名函数，实现对_Explode代码的封装，同时借助return返回需要对外开放的方法，即添加了权限开放管理，又节省了命名空间，还在调用上获得得了便利，这才是比较容易接受的好方法

总结

扯了这么多，总是觉得单单控件的实现并没有怎样的难度，在前端反倒是对这些空间站的管理才是令人头大的，好在现在的套路基本被摸索出来了，那就是模块化js的开发规则，上述的最后一种方式，其实已经有一些模块化的影子了，但并不能很好的处理组建的依赖问题，而这些将在模块化js中一并解决，具体会在js模块化管理的探索后续文章中讨论

趁着同事那儿借来《Vim使用技巧》的机会，重新梳理一下Vim的常见使用技巧，记录于此
虽说Vim平时用的很多，自认为还是比较熟练的，但直到看到这本书，才知道原来自己用了假的Vim，很多技巧性的组合可以让人耳目一新，效率提高不止一倍，尤其记住书中所言：

在Vim中所有的操作通常都会有更加便捷版本,比如在移动光标时，一旦连续按了2次以上的h，那就意味着浪费时间,停下来想想能不能更简单

当然按作者的苛刻标准绝大多数所谓vimer都是妄称，但这并不妨碍我们对工具的精益求精，配置方面，按照我自己的习惯，有2点建议供参考:
1 在vim中通常首先废弃方向键 + delete键，尤其是初学者
2 中文输入发的问题，基本上这是个无解的问题，能做到最好的就是当从中文inert下Esc时，自动切换到英文输入法，不过也仅仅是这样了

废话不多说了，下边开始记录:

更好的motion

• 只用h/l键来解决差一错误(off-by-one error)，即当目标差一两个字符时才去用
• 启用行号，区分实际行和显示行，毕竟通常大家都是启用wrap 的,所以在行号的辅助下区分二者很重要
• 同行多行显示下,移动用gj/g^/g$/g0/gk而不是j/^/$/0/k来操作显示行
• 使用w,b,e,ge基于单词移动更好,借用这张图：
  
  并且将常见操作组合记忆，如cw就和change word很贴合，ea就是添加单词尾部等

• 最好的移动永远是查找

  • ; + ,配合f{char}能决绝99%的问题，特别提醒 别把方向字符查找弃之不用 ，当然如果是中文就歇菜了

  • t{char}和d/c合用更配噢 ,eg:

    1 2 3

    function foo(x: Int, y: int) // f,dt)操作之后,变为 function foo(x: Int)

  • v + t/f{char} + d/c/y 比鼠标托选精准高效一万倍

    1 2 3

    console.log('This phrase takes time but eventually gets to the point') // 想删除'takes time but eventully',可以ftvfyd即可 console.log('This phrase gets to the point')

• 结构化文本结构化处理：
  vim既然是码农的神器，那么对于结构化文本处理能力自然是没得说，只是使用并不不及，是时候应该主注重这方面的锻炼了– 文本对象字符由2个字符组成，第一个永远是i 或者 a,通常以i开头的文本对象会选择分割符内部文本，而已a开头的文本对象会将分割符包含在内，为了记忆不妨把i读成inside，a就是around/all, eg:
  
  熟练掌握vim结构化处理是一个vimer的基本内功,特别是在前端或者简单的脚本语言编程中，使用的尤其多，总结一下常见分割符文本对象的操作:

  1 2 3 4 5 6

  a) 或者 ab // 对应（） i) 或者 ib // 对应（）内部 a} 或者 aB // 对应{} a> // 对应<> at // 对应 一对xml标签 it // 对应 xml标签内部

  第一个例子中特意给出v可视化模式下是为了方便观察，而在操作符待决模式下才能真正展现其强大的能力，配合c / d / y + i / a + {char}才能让你键码齐飞，高效异常，eg：

  1 2 3 4 5

  <a href="#">ABOUT</a> <!-- 光标启示在#，ci"之后，输入http://github.com --> <a href="http://github.com">ABOUT</a> <!-- 紧接着输入cit 加上 github，就完成了编辑--> <a href="http://github.com">github</a>

  不少人都是单独的把ci"解读为修改双引号内部内容，把cit解读为修改标签内部内容，同样dit为删除标签内部内容，其实都是文本化操作的产物，完全没有必要去死记硬背

• 非块级问对对象的操作：按单词w-word，按句子s-sentence，按段落p-paragraph
  其实这一点在前边的按单词操作中已经有所涉及，但结合机构化的操作能有很多意想不到的高效体验，常见的如：

  1 2 3 4 5

  Improve your writing bu deleting excellent adjectives. // fx 光标到excellent, 然后 daw Improve your writing bu deleting adjectives. // 如果上述是 diw, 就会出现2个空格 Improve your writing bu deleting adjectives.

  可见aw和iw得区别很细微，如果不好记忆，不妨想我一样只去记忆i表示inside1之意，其他的它是不管的，接着上面的例子，如果只是想把单词改变， eg：

  1 2 3

  Improve your writing bu deleting excellent adjectives. // fx ，然后 ciw 加上修改的单词 most Improve your writing bu deleting most adjectives.

  所以总结起来就是：
  d + aw / as / ap比较好，而c 与iw / is 更配

• 善用自动标记完成移动
  vim的基本操作中其实没有必要涉及到使用m{char},系统为我们提供了很多自动的标记，它指示了一些简单的行为，如上次修改位置，上次插入位置，以及括号之间的移动，like this：

  1 2 3 4 5

  `` // 上次跳转动作之前的位置--相当于<C-o> `. // 上次更改位置 `^ // 上次插入位置 `[/] // 上次c或y的启示／结束 % // 括号之间的跳转

  特别提醒，括号跳转时，往往要配合标记跳转一起来使用，如下面的ruby代码要将}变为]，这里就有一个小陷阱，因为%只会在同级括号键自动跳转，如果直接使用r]就不再能跳转到末尾的]，所以正确的做法是：

  1 2 3 4 5

  cities = %w { london,berlin,nweYourk} # dt{ 然后不忙r[ 而是% 跳转到末尾的'}' # 然后现更改最后的} 为 ] # 在``会光标的上一位置，再r[ cities = %w [ london, berlin, nweYourk]

  好吧，的确有点儿繁琐，肯定有更好的办法，不过配合光标标记还是完成了

上边的操作都很基本，可以说每个人都会，但vim不是知识而是一种技能，常常练习才能真正的实现手眼并举，编码齐飞

记录一下JS中某些语法点，以及同swift,python等的对比

默认参数(Default arguments)

函数支持默认参数的必要性：从个人经历来看，在开发中特别是组建和公共API的开发中，由于JS松散的类型,特别是函数调用参数不定的特点，屡屡出现的类型检测这样的鸡肋代码让人如鲠在喉,eg:

1
2
3
4
5
6
7

var add = function(a, b) {
	b = typeof b !== "undefined" ? b : 0
	return a + b		
}

add(1) // 1
add(1,1) // 2

如果使用默认参数，我们就省去了不必要的检测：

1

var add = function(a, b=0)

剩余/可选参数(Rest arguments)

正如前边所说，js函数调用很松散，所以可选参数在js上很容易实现，最简单的莫过于使用arguments，但对其他语言就需要特殊的支持，ES6上显然也是这样认为的，所以:

1
2
3

function(arg0, arg1, ...rest) {
	alert('you pass' + rest.length + 'extra args') 
}

说明： 根arguments对象不同，剩余参数数组rest是一个真实的数组

jQuery 常见方法

• 集合类操作相关:对集合类元素的遍历操作已经见怪不怪了，几乎所有的语言都有，比如swift和java中的map,reduce等等，在jQuery中也自然存在：
  $.each(obj, function(key, value))
$.map(obj, function(value, index)：自1.4之前只对数组管用，1.6之后改为所有，按设计规则，常根return
  $.extend([deep?], target, [obj1, ...]):对象的合并扩展，默认是浅拷贝，常常用在函数参数的扩展上，这一点倒是根默认参数的设计很契合，可以扩展已有的参数 eg

  1 2 3 4 5 6

  // 通过extend扩展已有参数 function(obj) { var default = {a: 'a'}; var opt = $.extend(default, obj); console.log(opt); }

  
  Demo 测试

jQuery非典型

当从window对象开始查找时，如果使用jQuery函数会出现问题,eg:

1
2
3

$(window).on('scroll', function (e) {
		var img = $(this).find('img)	// find函数只会返回[]
})

visibility: hidden和display: none

最重要的区别在于: 后者脱离文档流，而前者不是,所有的效果差异都是这一点造成的，如前者会在隐藏的部分保持空白，而后者不会，再如在hidden以后，前者可检测宽高offSet等位置信息，而后者没有，在作页面自动加载时遇到了这个问题，在此记录

Hive 初探

在hadoop生态，最重要的无疑是HDFS 和 MapReduce/Spark等运算框架，但依托于HDFS的数据库存储层工具往往是平时用到的最多的，当前2大依托于HDFS的结构化数据存储有：HBase和Hive

这篇文章就来说说Hive的方方面面。

虽然Hive是hadoop生态中的一个数据结构化管理层,但要注意的是，不同于mySQL等数据库，也根Hbase不同，hive本身被设计的目的就不在于其实时查询，因此它的查询是一个耗时的过程，但他可以支持类SQL语言，可以让job不再要求我们一行一行的写代码，会根据语句自动生成MapReduce代码，从而简化操作。总之，Hive提供给我们HQL，让我们方便的MapReduce，最终用以对hdfs上数据的提取/转化/加载(ETL),对映射到数据库表中的数据进行方便的操作,其提供了3种用户接口:

• CLI: 根mySQL的命令基本相同
• WebUI: 默认端口9999
• Client：通过JDBC等来远程访问

构架

借用hive - facebook爸爸的构架图：

安装及错误处理

作为Hadoop组建，安装起来很简单，关键在于配置，通常都使用mySQL存储metaStore,所以在设置中:

在安装时注意版本对应，确保各个节点机器的ssh通信正常，会省去不少麻烦
启动时需注意保证集群启动正常，一个常见的错误：

就是因为namenode为启动成功，在hadoop生态，几乎所有的组件都是依赖与hdfs，yarn的，然后配合zookeeper热备，一旦出现启动不了的问题，首先就要去检查依赖的运行环境是否启动正常

基本操作相关

1 表的创建相关

• 创建表基本上根普通的SQL语句一致，只是我们常常需要指定分割符号，指定排序，存储类型等等，常见的通用模型如：

  1 2 3 4 5 6 7 8 9

  CREATE [EXTERNAL] TABLE [IF NOT EXISTS] table_name [LIKE] patternTable [(col_name data_type [COMMENT col_comment], ...)] [COMMENT table_comment] [PARTITIONED BY (col_name data_type [COMMENT col_comment], ...)] -- 指定分区方式 [CLUSTERED BY (col_name, col_name, ...) [SORTED BY (col_name [ASC|DESC], ...)] INTO num_buckets BUCKETS] [ROW FORMAT row_format] [STORED AS file_format] -- 存储类型 [LOCATION hdfs_path]

关键字ROW FORMAT DELIMITED:

1
2
3
4

FIELDS TERMINATED BY ‘,’           //指定每行中字段分隔符为逗号
LINES TERMINATED BY ‘\n’           //指定行分隔符
COLLECTION ITEMS TERMINATED BY ‘,’ //指定集合中元素之间的分隔符
MAP KEYS TERMINATED BY ‘:’         //指定数据中Map类型的Key与Value之间的分隔符

关键字PARTITIONED BY： 就是对应于mapreduce中的分区

关键字CLUSTERED BY: 称之为分桶

关键字STORED AS：指定表在HDFS上的文件存储格式，可选的文件存储格式有：

1
2
3
4
5

TEXTFILE 		//文本，默认值
SEQUENCEFILE    // 二进制序列文件
RCFILE          //列式存储格式文件 Hive0.6以后开始支持
ORC             //列式存储格式文件，比RCFILE有更高的压缩比和读写效率，Hive0.11以后开始支持
PARQUET         //列出存储格式文件，Hive0.13以后开始支持

一个具体的🌰，eg：

1
2
3
4
5

CREATE TABLE IF NOT EXISTS tableDemo 
(sno INT,sname STRING,age INT,sex STRING)
ROW FORMAT DELIMITED
FIELDS TERMINATED BY '\t'
STORED AS TEXTFILE;

上述创建了一个行分割符号为tab的表tableDemo，使用show tables;可查看

• 删除– DROP
• 修改表结构用ALTER TABLE tableName [ADD COLUMNS][RENAME TO xxx]等

2 数据操作

• 加载数据

  1 2	LOAD DATA LOCAL INPATH '$local_Dir/xxxx.txt' INTO TABLE tableName; -- 加载本地数据 LOAD DATA INPATH '$hdfs_dataDir/xxxx.txt' INTO TABLE tableName; -- 加载hdfs数据

  说明：这里只是总结操作，具体概念后文详述

  • 加载数据到分区，eg：

    1 2 3 4

    LOAD DATA LOCAL INPATH '$loacl_dir/data.txt` overwrite INTO TABLE tableName PARTITION (dt='part001')

  • 加载数据到桶表：
    首先要开启桶：set hive.enforce.bucketing = true,eg:

    1 2 3

    INSERT OVERWRITE TABLE tb_bucket_shop SELECT shop_id, shop_name, shopkeeper FROM tb_part_shop CLUSTER BY shop_id;

• 插入操作

  1 2 3 4 5 6 7 8 9

  -- 单表插入 INSERT OVERRITE TABLE copied_table SELECT * FROM meta_table -- 多表插入 FROM meta_table INSERT OVERRITE TABLE copied_table1 SELECT * INSERT OVERRITE TABLE copied_table2 SELECT *

• 查询操作
  通用格式：

  1 2 3 4 5 6 7 8 9

  SELECT [DISTINCT] col_name LIMIT num FROM table1 [table2 ...] [ORDER BY col_name] [GROUP BY col_name] [SORT BY col_name] [DISTRIBUTE BY func(col_name)] [CLUSTER BY col_name] [WHERE col_name OPERATOR [AND OPERATOR...] ]

  • GROUP BY: 分组

  • ORDER BY: 全局排序
    Hive优化常常要用到，不同于数据库的order，使 时需要指定hive.mapred.mode:

    1 2	hive.mapred.mode = nonstrict; // 默认 hive.mapred.mode = strict; // 必须指 limit

  • SORT BY: 分区内排序并可以指定task数
    如task=1，那么效果等同于ORDER BY, 指定Reduc 个数：set mapred.reduce.tasks=num

  • DISTRIBUTE BY和CLUSTER BY
    distribute by：按照指定的字段或表达式对数据进行划分，输出到对应的Reduce或者文件中。
    cluster by：除了兼具distribute by的功能，还兼具sort by的排序功能。

hadoop + yarn + zookeeper: 5个节点搭建Demo

1 规划

• 统一useradd：hadoop + passwd,目录~／app + ~/data + ~/tools

• hadoop2.6.9 stable + jdk1.7 + zookeeper 3.4
• ntpdate时钟同步 + ssh + 脚本

2 安装

• jdk + 环境变量

• Zookeeper+ 环境变量

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

  zoo.cfg: clientPort = 2181; service.1=node1:2888:3888 service.2=node1:2888:3888 service.3=node1:2888:3888 service.4=node1:2888:3888 service.5=node1:2888:3888 dataDir=/home/hadoop/data/zookeeper/zkdata dataLogDir=/home/hadoop/data/zookeeper/zkdatalog ---- zkdata下： myid >> 节点编号 启动测试： 脚本 + ~/app/zookeeper/bin/zkServir.sh start/status + jps

• hadoop + 环境变量

  hadoop-env.sh + core-site.xml + hdfs-site.xml
  

  首次顺序: zookeeper >> journalnode >> namebode format >> zkfc format >> 启动namenode + 备用namenode启动并同步 >> journalnode stop
  无误可使用sbin/start-dfs.sh启动

• YARN配置： mapred-site.xml + yarn-site.xml(resourcemanager配给node1，node2，启动热备，mapReduce-shufflehandler)

3 测试

• namenode热备测试：查看host:8088 >> active/standby >> 关闭active >> 查看standy自动active
• recourcemanager测试：查看状态 rmadmin -getServiceStae node1/2 >> active/standby >> 关闭active >> standy自动激活
• 官方Demo测试

跨域操作

浏览器出于安全方面的考虑，对于一个页面内的所有的请求做了一系列的限制，称之为：同源策略，但有时候我们的确有这方面的需求，所以可以通过一下说明一下：

• 同源Same origin Policy: 即是指3相同–相同协议 + 相同origin(可以理解为协议后的／到第一个／之间的内容) + 相同端口
• 跨域访问／不同源: 就是与不同域间接口通信,从浏览器的角度基本有4种常见形式JSONP,CROS,(满足一定条件下的)降域方式,通过window的message事件

首先演示一下正常请求操作：

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
34
35
36
37
38
39
40
41
42
43
44
45
46

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>跨域操作</title>
<style>
  .container{
    width: 900px;
    margin: 0 auto;
		background: slategray;
  }
</style>
</head>

<body>
	<div class="container">
        <h1>aaa域中的html</h1>
		<hr> 点击去另一域bbb中加载数据
		<br>
		<button>点击</button>
	</div>

	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
		var btn = $('button')[0]
		var container = $('.container')[0]
		btn.addEventListener('click', function() {
			xhr = new XMLHttpRequest()
			xhr.open('get', 'http://aaa.com:3000/info', true)
			xhr.send()
			var html = ""
			xhr.onreadystatechange = function() {
				if(xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
					result = JSON.parse(xhr.responseText)
					html = document.createElement('p')
					html.innerText = result['info']
					container.appendChild(html)
				}else {
					console.log('error')
				}
			}				
		})
	</script>
</body>
</html>

服务器端使用node的mock-server，在router.js中回应：

1
2
3
4

app.get('/info', function(req, res) {
	var data = {info: 'Greating from router.js'}
	res.send(data)
});

得到：

现在来进行简单的跨域请求，如xhr.open('get', 'http://aaa.com:3000/info', true)中的url改为http://bbb.com:3000/info'，浏览器会报错：

• CORS
  刚才从提示中已经隐含了提示：No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://aaa.com:3000' is therefore not allowed access.如果我们在服务器端的为请求头添加权限，就能正常访问了如：

  1 2 3 4 5

  app.get('/info', function(req, res) { var data = {info: 'Greating from router.js'} res.header("Access-Control-Allow-Origin", "*"); res.send(data) });

所以可以猜测实际上request是到达了，但没有响应权限，响应内容为空，有些浏览器甚至状态码都显示200，这一点挑食时注意，
由于这种处理主要是服务器端处理的资源分享方式，所以称为CORS [Cross-Origan Resource Sharing] 跨域资源共享

这样虽然解决了问题，但都是从服务器操作，下面重点介绍从浏览器端的操作

• JSONP
  本质上就是一个script标签调用的远程脚本，利用script标签的src属性，拿到不同域的远程脚本内容实现跨域通信，其内容格式为callBack({data})，总之基本上就是js调用函数的格式，script会执行找到本执行本地方法callBack,将上诉代码更改一下：

  1 2 3 4 5 6 7

  <scrip> var callBack = function(data) { console.log("^^^^ . ^^^^^" + data) alert('本地写好了的callBack，被远程js调用，并传递数据: ' + data.info) } </script> <script src="http://bbb.com:3000/info.js"></script

刷新页面就能看到callBack被调用了,这就是JSONP的核心内容
但是如果仅仅是这样，就要求我们提起在本地写好callBack并通知给服务器，协商的成本太高，所以将callBack函数名带在url中，url做成?callback=funcName,后台获取到funcName，在组织JSONP文件传入数据即可
注意：虽然总是根ajax一起出现，但本质上是2中东西，前者是异步网络技术，而后者就是个普通script脚本

• postMessage
  适用于共用一个window下不同frame的通信，即不同html间可跨域的通信，eg，这是在bbb.com域下的iframe.html：

  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 34 35 36

  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { background: palevioletred; } </style> </head> <body> <h3>iframe 中的html -- 来自不同域bbb.com中的html</h3> <div class="page"> <form action=""> 输入：<br> <input class="input" type="text"> </form> </div> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> var input = $('.page .input')[0] input.addEventListener('input', function(e) { console.log(this.value) window.parent.postMessage(this.value, '*') }) window.addEventListener('message', function(e) { input.value = e.data console.log(e.data) }) </script> </body> </html

然后增加新代码后的index.html为：

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>server-mock使用说明</title>
<style>
  .container{
    width: 900px;
    margin: 0 auto;
		background: slategray;
  }
	.page {
		background: lightseagreen;
		text-align: center;
	}
	iframe {
		width: 300px;
	}
</style>
</head>
<body>
	<div class="container">
		<h1>aaa域中的html</h1>
		<hr> 点击去另一域bbb中加载数据
		<br>
		<button>点击</button>
	</div>
	<hr>
	<div class="page">
		<form action="">
			输入：<br>
			<input class="input" type="text">
		</form>
		<iframe src="http://bbb.com:3000/iframe.html" frameborder="0"></iframe>		
	</div>

	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
		var btn = $('button')[0]
		var container = $('.container')[0]
		btn.addEventListener('click', function() {
			xhr = new XMLHttpRequest()
			xhr.open('get', 'http://bbb.com:3000/info', true)
			xhr.send()
			var html = ""
			xhr.onreadystatechange = function() {
				if(xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
					result = JSON.parse(xhr.responseText)
					html = document.createElement('p')
					html.innerText = result['info']
					container.appendChild(html)
				}else {
					console.log('error')
				}
			}				
		})

		var callBack = function(data) {
			console.log("^^^^ . ^^^^^" + data)
			alert('本地写好了的callBack，被远程js调用，并传递数据: ' + data.info)
		}
	</script>
	<script src="http://bbb.com:3000/info.js"></script>
	<script>
		var iframe = $('.page iframe')[0]
		var input = $('.page .input')[0]

		input.addEventListener('input', function(e) {
			console.log(this.value)
			window.frames[0].postMessage(this.value, '*')
		})

		window.addEventListener('message', function(e) {
			input.value = e.data
			console.log(e.data)
		})
	</script>
</body>
</html>

验证结果后最终实现2不同域不同html文件之间的通信

• 一定条件下的降域
  在主域相同情况下，通过设置document.domain为共同的自身或者更高一级的赋予，就可以通过
  window.fram[0].document.querySelecotr('.page .inpu')访问到iframe.html中的元素了，严格说来并不是一种跨域
  ，比如完全demain不用的2个域是不允许这样操作的，所以在真正需要跨域的时候并不常用

so上推荐了一篇通俗的介绍了MapReduce设计思想的文章，简单的做了翻译：
先从一个简单的需求开始，当我们在js中想输出这样的内容时，最直接的方法是使用alert：

1
2

alert('apple!');
alert('bannaner!');

但这绝不是一个好的方式，上述代码琐碎绝并且繁琐，那么我们将它封装成一个函数：

1
2
3
4
5
6

function fruit(str) {
	alert(str + '!');
}

fruit('apple'); // apple!
fruit('plum'); // plum!

通过将拥有相似功能的代码封装为函数，可以让代码简洁明了
那么如果是下面的情况呢：

1
2
3
4
5
6
7

alert('Tim like:')
fruit('apple')
fruit('plum')

alert('Jerry like:')
fruit('lemmon')
fruit('orange')

比刚才稍微复杂一点儿，但也很容易就能被包装为：

1
2
3
4
5
6
7
8
9
10
11

function someOneDo(someone, f1, f2, f) {
  alert(someOne + 'like:')
  f(f1)
  f(f2)
}

someOneDo('Tim','apple', 'lemmon', fruit);
// 使用匿名函数：
someOneDo('Jerry','lemmon','orange', function(str) {
  	alert(str + '!');
});

把fruit函数作为一个参数，在someOneDo中调用，这是js中典型的回调。
接下来仿照上述来处理一个根数组有关的问题：

1
2
3
4
5
6
7

var a = [1,2,3]
for(i=0; i<a.length; i++) {
  a[i] = a[i] * 2
}
for(i=0; i<a.length; i++) {
  a[i] = alert(a[i])
}

分析一下，根上一个例子完全一样，代码类似，都有for循环，都再对元素进行操作，不妨这样：

1
2
3
4
5
6

map(f,arr) {
  f(arr)
}

map(function(x){ return x*2}, a);
map(alert, a);

编程中中会有遇到这样的状况，就拿数组来说

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function sum(a)
{
  var s = 0;
  for (i = 0; i < a.length; i++)
    s += a[i];

   return s;
}

function join(a)
{
  var s = "";
  for (i = 0; i < a.length; i++)
  	s += a[i];

  return s;
}

sum元素求和和join拼接元素代码是如此的类似，忍不住在抽象一下：

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

function reduce(fn, a, init) {
  var s = init;
  for (i = 0; i < a.length; i++) {
	s = fn(s, a[i])
  }
  return s
}

function sum(a) {
  return reduce(function(a, b) { return a+b }, a, 0)
}

function jion(a) {
  return reduce(function(a, b) { return a+b}, a, "")
}

这样就把里面的操作封装到了reduce上，现在不管是求和还是拼接都可以通过一个函数来完成了
很多的老旧的语言没办法像这里的js一样把函数置为first class object，比如C／C++中虽然有函数指针，但也做不到这样的简便，很多面向对象的语言干脆不提倡对函数做过多的操作，比如要在Java中这样将函数置为first class object,需要你从头创建一个functor类作为函数基础对象，特别是在数据处理领域内，现代一点的语言都不会自大到–死抱着面向对象可以解决一切问题的谬论。
上述内容多数人看到这里就觉得其实你也没说什么，不过是将函数在抽象了而已，那我们就回到map函数刚刚对数组的操作，看看我们到底能有哪些获益吧！

通过上述map发现：当你对数组元素有任何的操作时，无论数组怎样便利都不会影响结果，你可以从0..last,也可以从last…0，更可以把数组一分为二，一个线程从0…half,另一个线程从half..last，对看到了吗？map对数组的操作整整快了一倍。
现在假设你有成百个上千个分布于世界各地的数据中心，每台机器都运行着微小的map操作，处理一小个小小的数据片段的操作，组合起来的处理能力将使TP，BP级别的，这就为处理大数据问题提供了思路

By abstracting away the very concept of looping, you can implement looping any way you want, including implementing it in a way that scales nicely with extra hardware.

这就是MapReduce处理大数据的核心思想：通过抽象出循环的概念，可以以任何你想要的方式实现循环，同时支持任何程度上的随意扩展额外的硬件添加节点。

参考：
https://www.joelonsoftware.com/2006/08/01/can-your-programming-language-do-this

闭包: 自包含的函数代码块，很像OC中的Block，可以被传递，作用往往是捕获与存储上下文中的变量或引用，实现对不在同一作用域内的数据的访问，从这个意义上来讲，只要能去访问到不是自己作用域内的函数，都可以算是闭包，比如：

• 全局函数是一个有名字但不会捕获任何值得闭包，因为位于最外层，在一些语言中当成特殊的闭包；
• 嵌套函数是一个有名字并可以捕获其外层作用域内值的闭包
• 闭包表达式，是可以捕获上下文变量的匿名闭包

首先，先给出一个稍有难度的例子，关于Core data ＋ protocol的具体使用，如果看不下去，就不用指望能学会了

• 使用protocol简化和规范NSManagedObject的操作

  1 2

• 使用protocol 分离NSFetchedResultsController 数据操作

1
2

跟别人吹牛，论截止到目前为止，在实际项目中使用swfit和Objective-C最大的不同，如果没有提到Model选型的问题，个人愚见：这个人要么就是沿用OC的方式在用swift，要么就是totality谎言，总之都不能算是真正的swifter

我把这个问题称之为swift中的最 WTF 问题

如一个常见的个人资料［Profile］部分的实现：在页面加载之前，开始loadData，完成以后接着装填proflieModel，然后展示model，

swift 开发经验之常见封装讨论

公司的项目终于全面swift化了，转到swift之后最大的感受在于写代码的自由性，不管是struct和enum都被大大拓展，个人感受来说确实码砖时开心了很多，代码也简洁了很多，即便是自己初级的水平，但还是想斗胆来做一下常用功能需求在swift中的实现及封装的讨论，比如对网络部分的封装，权限请求的封装等等，鉴于水平有限，诸多不足，贻笑大方，且作消遣排挤之用！

网络部分

作为正常的地球人＋小公司独立开发属性，使用Matt大神的Alamofire我想是的选择，当然如果您司有自己的私有库，那就不存在这个问题的讨论了，所以也很自然的选择了它。

作为最著名的第三发框架和诸多开发者信誉加成，Alamofire本身已足够优秀，但在使用中，往往我们都会按照自己的习惯做一下封装，这也是这一部分的主题，笔者会介绍一下自己的习惯：

总体原则：

1. 去耦: 不管怎样优秀，但Alamofire终归是第三方框架，前司升级AFNetwork 3.0的症痛还历历在目，如果刨除当时自己半路接手＋经验不足的安慰理由外，对这种高耦合式的使用第三方框架的教训不够也是主要原因，吃过亏自然就知道了，所以原则上，在使用任何第三方框架时，尽量自己做一曾封装，即便是意义不大技术含量低级的封装，对第三方 API 的调用尽量集中在封装内，这也就是为何我一直推崇繁复的 CoreData 而避免所谓便利的 Rleam 等的原因。

2. 简化: 跟后台紧密配合，单独剥离不同url请求，做到每一个请求就是对应一个方法，这样最大的好处就是请求清晰简明，别人在接手也容易

3. 完备: 集中处理诸如权限，错误，提示的处理，集中设置请求头的属性，方法，输出请求调试内容，做到出了问题迅速定位，用户体验不割裂

以上都是常见的调调，不看也罢，主要是充分利用swift的特点，完成封装的具体过程

－－－－－－－－－－－－－－－－－－－
🙈🙈🙈🙈🙈🙈🙈🙈 假装看不见的分割线 🙈🙈🙈🙈🙈🙈🙈🙈🙈
－－－－－－－－－－－－－－－－－－－

避免直接使用String作为参数，借助swift的enum和struct避免 面向字符串编程

如使用枚举集中整理url和method,配合CustomStringConvertible输出description，Method已在Alamofire中实现，like this：

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

enum Method: String, CustomStringConvertible {
    case OPTIONS = "OPTIONS"
    case GET = "GET"
    case HEAD = "HEAD"
    case POST = "POST"
    case PUT = "PUT"
    case PATCH = "PATCH"
    case DELETE = "DELETE"
    case TRACE = "TRACE"
    case CONNECT = "CONNECT"

    public var description: String {
        return self.rawValue
    }	
}

加一些 “Protocal-Oriented”

从不少开源代码中看到不少这样的使用，在WWDC上也有相关内容，随着自己对swift使用经验的积累，越来越体会到“组合”比之余“继承”的方便之处

从一个常见的使用场景，performSegueWuthIdentifer(identifer: String, sender: AnyObject?)方法，根据不用的identifer执行不同的跳转，原来只能借助于switch语句，由于都是string，很容易写错，那么在swift中呢？

也许可以用enum把identifer装饰一下，避免频繁直接使用字符串，like this：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

	enum SegueIdentifer: String {
		case aaa
		case bbb
	}

// ...
    override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
    	guard let idf = segue.identifer, segueIdf = SegueIdentifer(raValue: idf) else {
			fataError("wrong idf:\(segue.identifer)")
		}

		switch segueIdf {
		case .aaa:	
			// do some thing
		case .bbb
			// do some thing
		}
	}