这是一篇比较轻松的文章，说一说clang编译后的代码怎么看。clang编译后的是C++的源代码，但其实也仅是用到了struct结构，其本质是C语言源代码，所以标题里就写“C语言代码”了。10多行的代码在编译之后能达到上万行代码，如果是第一次看，还是会有点懵的，所以记录一下要如何找到自己想要的核心代码，以便有小伙伴想要了解这块时，少走一点弯路。

写过Objective-C的同学都应该知道，Objective-C里有一个id类型，可以在编写程序时指代任何对象类型，在程序运行起来后再具体确定到底是什么类型。给一个对象发送一个未定义在它的类中的方法在编译期间也不会报错，因为在运行时可以给类再添加方法，也可以改变方法的接收者，甚至是交换两个方法的实现过程。还有一点，我们一直在用，但可能忽略了它也是动态性的一个基础特性，就是可以根据不同的屏幕尺寸加载不同的启动图片，还可以根据不同屏幕的分辨率加载不同分辨率的资源图片，比如在Retain屏上加载@2x图片，在一些老设备上加载原图，在后来的plus系列设备上加载@3x图片。总结一下，Objective-C动态性体现在3个方面：动态类型、动态绑定、动态加载。下面主要说一下动态类型和动态绑定。

这是《Effective Objective-C 2.0》英文版的Chapter2和Chapter4的笔记

理解Property

• Property能够带来以下几点好处：

1. 声明Property后，编译器会在编译期间自动为你在代码中添加一个以下划线为前缀的实例变量，和该实例变量的getter/setter方法。这样在外部调用时，就可以通过getter/setter来读和写对象的实例变量了，而不是直接使用实例变量本身。
2. 外部可以用.的形式使用一个Property，这样比较接近大多数编程语言的调用风格，编译器会自动把它转换成中括号调用的形式。

这是《Effective Objective-C 2.0》英文版的Chapter3的笔记

使用前缀避免命名空间冲突

• 前缀以至少3个字母定义，因为Apple有权使用任何两个字母组合作为自己类、方法和框架等等的命名前缀。
• 在.m中定义的C函数或常量也要在前面加上前缀，因为尽管它在实现文件中，而不是在头文件中声明的，但编译后它仍会出现在top-level symbol中，所以容易发生冲突。

我们从服务器上clone下来项目后，在项目的根目录都会自动生成一个.git目录，这个目录的结构如下：

其中的config文件包含了当前仓库在本地的源、分支等等信息，它的基本内容如下，我这里配置了两个remote：

《Functional Programming in JavaScript》笔记

这本书中的示例代码可以这里找到：https://github.com/luijar/functional-programming-js。

Part 1 —— 入门

Why Functional?

1)什么是函数式编程？

以往我们也会写大量的function来解决问题，但是我们的function中封装的基本都是解决问题的过程，在函数式编程中，function不仅要来计算出一个结果，更要用它来抽象出控制流和对数据的操作，进而达到避免副作用、减少程序中的状态变化。函数式编程不是一种特殊的工具，而是一种解决问题的思路。

理解DOM

HTML和XML本身只是一种特定格式的文档，要想对其进行操作，必须按照他们这种格式特点转换成编程语言能够处理的对象。行业中需要有一套HTML和XML文档转换后的接口规范，来约定接口的实现方，尤其是各浏览器厂商，以便上层开发者使用。DOM（Document Object Model的缩写）就是被业界使用的HTML和XML文档的编程接口。在MDN上对DOM的解释如下：

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

查看更多介绍

浏览器环境中是用JavaScript实现的DOM接口，主要用来解析HTML文档，但DOM并不是ECMAScript规范中的一部分，JavaScript和DOM是相互独立的两部分。浏览器通常也把DOM和JavaScript独立实现。比如，Safari中的DOM和渲染是使用WebKit中的WebCore实现，JavaScript部分是由独立的JavaScriptCore引擎来实现。Google Chrome同样使用WebKit中的WebCore库来渲染页面，但JavaScript引擎是他们自己研发的，名为V8。

其他编程语言也可以实现DOM接口，比如Swift的第三方库SwiftSoup，python的BeautifulSoup库，Node.js也有第三库可用，如jsdom。

这可以让我们做很多有意思的事，可以多琢磨琢磨，不要把自己的思维局限在浏览器中的JavaScript上~

DOM中的所有元素项都被定义为节点（nodes），这些节点又嵌套成一个树结构，通常称为DOM tree，根节点是document。下面总结一下如何访问、修改DOM中的元素。

操作DOM

查询DOM节点

1. document.getElementById()

返回一个特定ID的元素，由于元素的ID在大部分情况下都是独一无二的，这自然而然地成为了高效查找特定元素的方法。

1

var elem = document.getElementById('para')

2. Element.getElementsByClassName()

返回一个动态的包含指定标签名的元素的HTML集合HTMLCollection。指定的元素的子树会被搜索，不包括元素自己。返回的列表是动态的，这意味着它会随着DOM树的变化自动更新自身，所以使用相同元素和相同参数时，没有必要多次调用Element.getElementsByClassName()。当Element是document对象时，会搜索整个文档，包括根元素。参数可以为多个class名，多个时用空格分割。

注意，这个方法返回的并不是一个数组，Array.prototype中的方法不能直接使用，可以将HTMLCollection作为方法的上下文（this）传入。

1
2
3
4

var testElements = document.getElementsByClassName('test')
var testDivs = Array.prototype.filter.call(testElements, function(testElement) {
    return testElement.nodeName === 'div'
})

3. Element.getElementsByTagName()

跟getElementsByClassName一样，也是返回一个动态的包含指定标签名的元素的HTML集合HTMLCollection。参数中的标签名最好小写，兼容XHMTL。如果传入*，代表所有元素。

1
2

var table = document.getElementById('forecast-table')
var cells = table.getElementsByTagName('td')

4. Element.querySelector()

参数是一组合法的css选择器。返回指定的元素的子树中，第一个与选择器组匹配的元素。如果没有找到，返回值为null。如果Element为document对象，则搜索整个文档，找到第一个满足条件的元素。

1
2
3
4

var el = document.getElementById('#para')
var testEl = document.body.querySelector('.test')
// 查找div或article元素
var el = document.querySelector('div, article')

5. Element.querySelectorAll()

参数也是一组合法的css选择器。返回指定的元素的子树中，所有与选择器组匹配的元素列表NodeList。返回的NodeList不是动态的，也就是如果DOM树发生变化，它不会跟着改变。

1
2

var el = document.querySelector('#test')
var matches = el.querySelectorAll('div.highlighted > p');

遍历DOM节点

DOM本身是一个树的结构，可以使用根节点、父节点、子节点，兄弟节点等这些属性来遍历DOM元素。

1. 根节点

document对象是DOM中每个节点的根节点。它实际上是window对象的一个属性。html、head、body元素直接作为document的属性。

2. 父节点

父节点是当前节点的上一层节点。

这两个属性大多数时候使用哪一都可以，只有一点微小的区别：

1
2
3
4

const html = document.documentElement

console.log(html.parentNode)          // #document
console.log(html.parentElement)       // null

当遍历DOM时，parentNode使用的更普通一些。

3. 子节点

子节点是当前节点的下一层节点。

DOM中的节点有一个nodeType属性，表示节点的类型，常用的有如下几个：

childNodes、firstChild、lastChild查找的是所有类型的节点，而children、firstElementChild、lastElementChild只查找nodeType = 1的节点。例如：

1
2
3
4
5

<h1>Shark World</h1>

const h1 = document.getElementsByTagName('h1')[0]
h1.firstChild           // "Shark World"
h1.firstELementChild    // null

4. 兄弟节点

与当前节点处于同一层级的节点。

previousSibling和nextSibling会查找任意类型的节点，previousElementSibling和nextElementSibling只查找nodeType = 1的节点。

改变DOM节点

1. 创建节点

2. 插入节点

3. 删除节点

这两个方法足以让我们移除DOM中的任何节点。也可以用node.innerHTML = ''达到移除节点的效果，但最好不要这样用，这样写很不直观。

修改元素的Attributes、Classes、Styles

1. 修改元素的Attributes

2. 修改元素的Classes

3. 修改元素的Styles

直接使用元素的style属性设置即可，样式名称用驼峰格式写法并且开头字母小写，例如：

1
2
3
4

div.style.borderRadius = '50%'
div.style.display = 'flex'
div.style.justifyContent = 'center'
div.style.alignItems = 'center'

可以使用setAttribute()给一个元素设置style属性：

1

div.setAttribute('style', 'text-align: center')

参考资料

【1】 Understanding the DOM — Document Object Model

减少操作DOM带来的性能损失

把DOM和JavaScript各自想象为一个岛屿，它们之间用收费桥梁连接。ECMAScript每次访问DOM，都要途径这座桥，并交纳“过桥费”。访问DOM的次数越多，费用也就越高。

摘自《高性能JavaScript》第3章

最小化DOM访问次数

1. 克隆已有节点，而不是创建新节点

使用element.cloneNode()代替document.createElement()，在大多数浏览器中都更有效率，但也不是特别明显。

2. 访问集合元素时使用局部变量

上一节总结查询DOM节点的方法时说到，Element.getElementsByClassName()和Element.getElementsByTagName()返回的HTMLCollection，是动态的，时刻保持着和DOM节点的同步。增加对该集合的访问次数，就会增加对DOM节点的查询次数，从而影响性能。所以当遍历一个集合时，能用局部变量进行缓存的属性和方法，就用局部变量缓存，能带来较大的速度提升。

1
2
3
4
5
6
7
8

function loopCollection() {
    const coll = document.getElementsByTagName('div')
    const len = coll.length

    for(let count = 0; count < len; count++) {
        // ...
    }
}

3. 访问元素节点时使用只会返回元素节点的API

上一节总结遍历DOM节点的属性和方法时说到，像firstChild这一类的API返回的是所有类型的节点，firstElementChild这一类的API只会返回元素节点（nodeType = 1）。如果我们的目的是只想访问元素节点（HTML标签），最好使用firstElementChild这一类的API，具体有哪些可以再回到上一节看一下。这样得到的集合项更少，所以速度也会更快。

4. 访问特定元素时使用选择器API

选择器API主要是：querySelector()和querySelectorAll()。在需要组合查询时，选择器API只要传入正确的css选择器，就能一次返回特定元素。而使用getElementById()、getElementByTagName()等等API，需要查询多次，并且代码冗长。而且querySelectorAll()返回的是静态的节点列表，省略了将动态集合再转换成数组的步骤。所以选择器API能带来较好的速度提升。

减少重绘和重排的次数

当DOM的变化影响了元素的几何属性（宽和高）——比如改变边框或给段落增加文字，导致行数增加——浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为“重排”。完成重排后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为“重绘”。

摘自《高性能JavaScript》第3章

也就是页面需要重新布局时就会触发“重排”，主要有下列情况会发生重排。

• 添加或删除可见的DOM元素.
• 改变元素位置。
• 元素尺寸改变（包括：外边距、内边距、边框宽度、宽度、高度等属性改变）。
• 内容改变，例如：文本改变或图片被另一个不同尺寸的图片替代。
• 页面渲染初始化。
• 浏览器窗口尺寸改变。

每一次重排都会产生计算消耗，大多数浏览器通过队列化修改并批量执行来优化重排过程。但是如果访问下面这些属性，会强制浏览器立即执行重排，返回布局信息。

• offsetTop, offsetLeft, offsetWidth, offsetHeight
• scrollTop, scrollLeft, scrollWidth, scrollHeight
• clientTop, clientLeft, clientWidth, clientHeight
• getComputedStyle()(currentStyle in IE)

下面总结一下减少重排和重绘次数的方法。

1. 改变样式时，使用el.style.cssText一次性设置所有样式，这样只会修改DOM一次。

1
2

const el = document.getElementById('myDiv')
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;'

2. 批量修改DOM

批量修改DOM说的是，先让元素脱离文档流，然后再对元素进行改变，所有的改变都设置完了后，再把元素放回到文档中。脱离文档和再回到文档中会分别触发一次重排，中间无论有多少修改都只会触发一次重排。

使元素脱离文档流有三种基本方法：

• 隐藏元素，应用修改，重新显示。

1
2
3
4

const ul = document.getElementById('myList')
ul.style.display = 'none'
appendDataToElement(ul, data)
ul.style.display = 'block'

• 使用文档片段（document fragment）在当前DOM之外构建一个子树，再把它拷贝回文档。

这种效率是最高的，可能平时都被忽略了。

1
2
3

const fragment = document.createDocumentFragment()
appendDataToElement(fragment, data)
document.getElementById('myList').appendChild(fragment)

• 将原始元素拷贝到一个脱离文档的节点中，修改副本，完成后再替换原始元素。

1
2
3
4

const old = document.getElementById('myList')
const clone = old.cloneNode(true)
appendDataToElement(clone, data)
old.parentNode.replaceChild(clone, old)

3. 缓存布局信息

比如要移动一个元素，下面的代码可以进行优化：

1

myElement.style.left = 1 + myElement.style.left + 'px'

将myElement.style.left用赋值给一个变量，在移动时使用该变量做计算：

1
2
3
4

var current = myElement.style.left

current++
myElement.style.left = current + 'px'

4. 让元素脱离动画流

1. 使用绝对位置定位页面上的动画元素，将其脱离文档流。

2. 让元素动起来。当它扩大时，会临时覆盖部分页面。但这只是页面一个小区域的重绘过程，不会产生重排并重绘页面的大部分内容。

3. 当动画结束时恢复定位，从而只会下移一次文档中的其他元素。

5. 避免在在大量元素上使用:hover

使用事件委托

如果想要在大量子元素中单击任何一个元素都执行一段代码，可以将事件监听器设置在父节点上，发生在子节点上的事件会冒泡到父节点上，这样就不需要给每个子节点都单独设置监听器。

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

<ul id="menu">
    <li><a href="menu1.html"></a></li>
    <li><a href="menu2.html"></a></li>
    <li><a href="menu3.html"></a></li>
    <li><a href="menu4.html"></a></li>
</ul>


// 处理点击a标签的事件
document.getElementById('menu').onclick = function(e) {
    e = e || window.event
    var target = e.target || e.srcElement

    // 从target中拿到有用信息，进行相关处理

    // 取消默认行为，并阻止再向#menu的父节点传递
    if (typeof e.preventDefault === 'function') {
        e.preventDefault()
        e.stopPropagation()
    } else {
        e.returnValue = false
        e.cancelBubble = true
    }
}

参考资料

【1】 《高性能JavaScript》第3章

能把一件平凡的琐事娓娓道来，讲得栩栩如生、引人入胜，这就是本事！

真正的文艺青年是怀中抱着乐器，手中赚着笔，最好还能抬起摄影机，至于其他人嘛，就称为……文艺青年爱好者吧。

《如丧》算是高晓松的随笔集吧，记录了他与老狼等人组乐队时的年少轻狂，酒驾坐了半年牢期间所思所想，在厦门流浪的日子，对05年超女的看法，拍《大武生》的前前后后，等等。哦，书的中间还有几篇是高晓松写的剧本，我略过没看，还是喜欢看矮大紧去诉说他的想法。

书中的一些文字，很喜欢。记录下来，也许哪一天翻出来读一读，又是另一翻感受。

在开发项目的过程中，必不可少地要创建Model，大部分时候都是对照着服务器返回的json来创建。一个property，一个property去写实在枯燥乏味，尤其是当字段量很大的时候，敲的都要怀疑人生了…。ModelMaker是用Swift Package Manager开发的一个命令行工具，只要指定好Json的文件路径，以及生成Model后要放置的目录，即可自动创建Model了，目前支持创建ObjC和Swift的Model。本文将介绍一下该脚本的实现思路，记录一下用SPM制作命令行工具的步骤。如果你感兴趣，可以在此基础上继续修改生成的Model的样子。

工作中经常会听到这样的声音，“时间赶，先实现了再说，后面找时间再慢慢优化”。扪心自问吧，一个版本开发结束后，除了要改bug，你有多少次回头再去看写过的代码，可能早忘了你要优化什么了。就算你有心要优化，你还要去争取测试资源，如果不是一个部门的就更有难度了。再者，如果实现功能的过程中不注重细节和设计，只图快，那么到了测试阶段发现问题，或者后面的版本需求变动，改起来同样耗时多，还有可能因为缝缝补补让代码变得更加糟糕。唉，小伙伴们如果有似曾相识的经历，欢迎文末留言补充。