jQuery？三大全家桶？或者……
也许你不是一个经验丰富的前端开发者，也许你正想摆脱jQuery却又欲罢不能，也许几百kb的三大全家桶让你受了惊，那么赶快服用本文，你会感觉一股清凉从百汇穴至贯涌泉，js在你的任督二脉飞速流动，想写网站的劲头喷薄欲出，当上CFO，迎娶百富美的日子就在眼前。如果出现以上症状，请赶紧就医，不能再拖了。
jQuery
曾经舍我其谁的DOM操作，闭着眼睛写ajax调用，睁眼一看，我靠，都8102年了，仿佛自己被时代out，周围都是angular、vue、react双向数据绑定玩的贼溜，由此我陷入了沉思
我是不是该换个框架？
换
我第一个瞄上Angular，谷歌大厂做的，老远就能闻到香。于是，我走进一看，MVVM模式，纳尼，我MVC都没学好，你这不是赶我走吗。不行，我不能放弃，果断学习了一个月。经过一个月学习后，我爱上了Vue。
经过肤浅的学习后，我开始实践了起来，经历香，这是我用不着的，香，这是我用不着的…… 果然太多东西让我消化不良，除了肚子不舒服，也有6起来，算球了，我还是翻翻github吧。事实证明，这是有效的策略，翻了一年后，猜猜我发现了什么？
拿错书了
moon
moon 这像是你个轻量版的Vue，有双向数据绑定、组件、路由，但是整个框架只有67KB，压缩为min只有18KB。如果你只需要完成双向数据请使用 v.11.0，虽然最新的版本是1.0.0 beta2，但是请相信我就用 v.11.0。语法风格接近于Vue，虽然v 0.11.0 的文档已经没有了，但是从issue中搜索还是能翻出一些使用方法。至于这个有文档的 1.0.0 beta2 是个残废，有三个问题。
- 不能动态生成HTML标签
- If 语句必须以 Else 结尾，没有Else渲染不正确
- mvl 语法在没有IDE插件支持的情况下，会让你设计HTML页面时没有语法高亮。
另外，请不要直接使用 moon.min.js，如果你写的HTML标签语法检查不够严格，比如 <br>、<input> 这样写，会导致数据绑定后的渲染有问题，并且F12控制台没有任何输出。发布之前一定要使用moon.js ，这样即使HTML标签语法错误，至少还能在控制台找到错误信息，帮助你快速排查问题。
适用于moon v0.11.0的语法说明
| 语法 | 说明 |
|---|---|
| m-on:click | 绑定点击事件。同理可以将click换成其他事件 |
| m-literal:class | 绑定class属性。同理可以把class换成其他属性 |
| m-html | 动态渲染html。相当于innerHTML，可以动态写入html标签 |
| m-for | 重复渲染当前html标签 |
| m-if | 条件渲染。条件为真是才会渲染该html标签 |
| m-else | 没得。莫得 |
| {{ }} | 渲染字符串。 |
| m-model | 双向绑定value属性。适用于input操作value属性 |
| m-show | 是否显示。boolean类型 |
点击这个 moon-demo 展示基本使用方法
ajax
这时候，我相信你已经按捺不住，想要祭出jQuery，但是请稍等，我给你案例一个小家伙reqwest，min版本虽然不到10KB，但你要的ajax操作全都有。
reqwest('path/to/html', function (resp) {
qwery('#content').html(resp)
})
reqwest({
url: 'path/to/html'
, method: 'post'
, data: { foo: 'bar', baz: 100 }
, success: function (resp) {
qwery('#content').html(resp)
}
})
reqwest({
url: 'path/to/html'
, method: 'get'
, data: [ { name: 'foo', value: 'bar' }, { name: 'baz', value: 100 } ]
, success: function (resp) {
qwery('#content').html(resp)
}
})
reqwest({
url: 'path/to/json'
, type: 'json'
, method: 'post'
, error: function (err) { }
, success: function (resp) {
qwery('#content').html(resp.content)
}
})
reqwest({
url: 'path/to/json'
, type: 'json'
, method: 'post'
, contentType: 'application/json'
, headers: {
'X-My-Custom-Header': 'SomethingImportant'
}
, error: function (err) { }
, success: function (resp) {
qwery('#content').html(resp.content)
}
})
API我就不多粘贴，点击连接跳转过去，肆意Ctrl+C吧。
lodash
还是不够香？没有jQuery各种方便的数据结构操作？那就来一口lodash，保准尝过之后就忘记自己是谁。嫌太肥的，直接下core版，准保没油。
// 遍历数组和Object
_.forEach(arr, function(value){})
_.forEach(arr, function(value, key){})
// 过滤Object属性
var users = [
{ 'user': 'barney', 'age': 36, 'active': true },
{ 'user': 'fred', 'age': 40, 'active': false }
];
_.filter(users, function(o) { return !o.active; });
// => objects for ['fred']
// The `_.matches` iteratee shorthand.
_.filter(users, { 'age': 36, 'active': true });
// => objects for ['barney']
// 随机数组里的元素
_.shuffle([1, 2, 3, 4]);
// => [4, 1, 3, 2]
// 填充数组
var array = [1, 2, 3];
_.fill(array, 'a');
console.log(array);
// => ['a', 'a', 'a']
_.fill(Array(3), 2);
// => [2, 2, 2]
_.fill([4, 6, 8, 10], '*', 1, 3);
// => [4, '*', '*', 10]
不抄API了，你们自己过去抄吧 lodash
CSS
这个嘛，看自己的喜好选，要我推荐那就 bulma，min版166KB，图标可以配三套，分别是：Font Awesome、Material Design Icons、Open Iconic，反正我只用Font Awesome，因为可以通过 icomoon 打包自己想用的，又可以甩掉很多肥肉，燃烧你网站的卡路里。
最后，让我们求个和
// 单位：KB
var quanJiaTong = {
"moon.min.js": 18.33,
"reqwest.min.js": 9.55,
"lodash.core.min.js": 12.29,
"bulma.min.css.js": 165.56,
}
var total = 0.0
_.forEach(quanJiaTong, function(size){
total += size
})
console.log("自制全家桶共计：", total.toFixed(2), "KB")
// output:
// 自制全家桶共计： 205.73 KB
网友评论