@kungfuboy 2017-03-15T00:46:52.000000Z 字数 1965 阅读 952

类库和框架

技术

什么是类库？

可能对于类库和框架的界限有点凌乱。

先来认识什么叫类库？

来，我们先写一个方法：

// 别说看不懂
function print(data) {
    alert(data);
}

好，现在我们实现了一个方法，我们以后需要打印某一个对象，就可以调用这个方法，它是通用的，于是我们把它放在一个叫做ku.js的文件里，那这个ku.js就是个库了。

库的概念清楚了？

那么，什么叫类库呢？

假设我这个ku.js文件被其他人引用了，他的程序里有另外一个同名的函数：

// 别说看不懂
function print(data) {
    console.log(data);
}

阿欧，两个函数重名了，调用的时候就会出问题。那怎么办呢？

很简单，我们将ku.js封装成一个对象，给它一个相对封闭的作用域：

var ku = {
    print: function(data) {
        alert(data);
    }
}

这样的话，别人引用我这个库之后，想要调用ku.js里的print方法，就需要这样用ku.print(data)。

好了，这就已经是个类库了。

我们可以回忆一下jQuery，我们在使用它的时候，最常用的就是$('#id')，其实它完全等价于jQuery('#id')，如果你喜欢，也可以实现一个长得一样的选择器：

var $ = function(obj) {
    document.querySelector(obj);
}

也就是说，你使用类库里的方法前，首先需要将某一个DOM元素传入这个类库，类库会将这个元素包装成属于它自己的对象，然后才能使用类库内部的其他的方法。否则，你是无法调用类库内的方法的！

例如，我想在原生代码里直接调用jQuery的html()方法，是会报错的：

document.getElementById('id').html();
// 报错信息："TypeError: document.getElementById(...).html is not a function

最优雅的类库Mootools也是类似：

// 通过class选中一个DOM对象，随后封装成$对象。
$$('.foo');
// 等价于mootools('.foo');

$$就是mootools的标识符！等同于jQuery的$。

最受欢迎的可视化库D3也是同理，先暴露，再调用方法：

d3.selectAll("p").style("color", "white");

相信你们已经看出什么了，类库在使用的时候，一定一定需要先暴露自己，才能在屁股后面调用它的方法，这不是耍帅，而是为了避免全局污染。

相比于类库，框架当然要复杂一点点。

那我们稍微说得抽象一点点，类库在使用前需要暴露，框架在使用前则需要划地盘，像Angular 1：

<body np-app="my-app">
...
</body>

意思就是：从<body>标签开始，到</body>标签结束，中间所有的DOM都是我的。如此一来，在它所管辖的范围里，它可以用任何手段去解析指令、绑定数据、更改DOM，那么我们在使用框架提供的方法时……

嘻嘻，踩坑了哦！框架是不会对用户提供内置方法的，它更愿意提供接口，让用户自己去定义方法，然后以一种优雅的方式去调用，例如过滤器。好吧，即便过滤器是工具性质，但它毕竟也是内置方法，那我修正一下：

一个有追求的框架不会对用户提供操作数据或操作逻辑的方法。

那么，假如有一个业务，比如ajax请求，它有一定的浏览器兼容性问题，我自己去实现的话需要花费很多功夫，框架又不提供这个方法，那么我想将类库引用进来可否？

是可以的，我们可以将jQuery导入到Angular里面，然后调用它的$.ajax()方法……

什么样的人才会干这样的蠢事？

就为了一个ajax请求，把一个80k的库弄进来……

axios是一个很优秀的ajax库，它只做ajax，那我们就可以把它引入，然后在任何地方使用：

axios.post(url, arg)

看！它暴露了！它暴露了！

所以这是个类库。

因此，类库和框架是可以和谐相处的，他们甚至有很多共性，你定制一个过滤器的时候，就可以看见类库的影子：

Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('')
})

看！它暴露了！它暴露了！

类库和框架的最根本的区别就是控制权的反转，类库是你想什么时候用就什么时候用，框架则是你往一个已经设计好的模式里填东西，开发工作量少，但相应地，你得适应它的规则，这些书都有记载，不是我在乱掰……

当然，一个优秀的框架，自然会尽量给你更多自由！例如钩子函数什么的……

如果你喜欢，可以把一个库写得很像框架（backbone.js），也可以把一个框架写得很像库（dojo.js）。

什么是类库，什么是类库，相信我已经讲清楚了！