Gearbox 发布会
@CSS魔法
2016. 06. 15.
“ 打造实用工具 · 改善开发体验 ”(第一波)
- Gearbox 是什么?
- 我们为什么需要 Gearbox?
- Gearbox 如何改善既有代码?
(45 分钟)
Gearbox 是什么?
Gearbox 是
一个轻量级的 JS 工具库
“
”
貌似啥也没说……

立即进入下一个环节!
我们为什么需要 Gearbox?
“ 浏览器平台上的 JS 工程师
是如何写代码的?”
浏览器环境
ECMAScript + DOM + BOM
倒霉的开发者
业 务 代 码
( 欠 奉 )
标准库
jQuery / Zepto
Underscore
第三方基础库
业务开发者的对策:
function queryStringToObject() {
var pairs = window.location.search.substring(1).split("&")
var obj = {}
var pair
var i
for (i = 0; i < pairs.length; i++) {
if (pairs[i] === "") continue
pair = pairs[i].split("=")
obj[ decodeURIComponent(pair[0]) ] = decodeURIComponent(pair[1])
}
return obj
}
$.getQueryParameters = function(str) {
const query = (str || document.location.search)
return query == "" ? {} : query.replace(/(^\?)/, '').split("&").map(function(n){
return n = n.split("="), this[decodeURIComponent(n[0])] = decodeURIComponent(n[1]), this;
}.bind({}))[0]
}
以解析 Query String 为例……
LZ 写的工具方法
YP 写的工具方法
这种方式在一定程度上可以发挥作用……
- 无推广
- 无文档
- 无测试
对不起,你们辛苦了……
但也有一些问题:
浏览器环境
ECMAScript + DOM + BOM
倒霉的开发者
业 务 代 码
( 欠 奉 )
标准库
“ 工具库 ”
jQuery / Zepto
Underscore
第三方基础库
Gearbox
ECMAScript + DOM + BOM
业 务 代 码
Zepto
Underscore
Gearbox
jQuery / Zepto
这其实就是
我在手机站建立的
“JS 分层架构”:
ECMAScript + DOM + BOM
长期以来 Web 站的情况:
业 务 代 码
jQuery
Underscore
Gearbox
不久前,我们
在 Web 站补上了
缺失的拼图……
是的,两个平台的 JS 架构趋于一致了!
- 架构层面:复杂度 ↓↓↓
- 业务层面:开发体验 ↑↑↑
Gearbox 如何改善既有代码?
在进入这个话题之前……
- 在哪里可以找到 Gearbox?
- Gearbox 的设计思路
- Gearbox 有哪些功能?
我们需要进一步了解 Gearbox:

github.com/CMUI/gearbox
$ npm install cmui-gearbox
Star
You'll need it, I bet.
github.com/CMUI/gearbox
Gearbox 的设计思路
- 靠近业务
- 轻量
- 简明易用
“ 靠近业务 ”
ECMAScript + DOM + BOM
业 务 代 码
jQuery / Zepto
Underscore
Gearbox
“ 轻量 ”
jQuery / Zepto
Underscore
Gearbox
一个库如何做到 “轻量”?
实际体积:2.8 KiB (Minified + Gzipped)
“ 简明易用 ”
纯静态的 API 风格:
gearbox.str.trim()
命名空间
模块名
方法名
Gearbox 有哪些功能?
Gearbox
str
ua
url
dom
action
template
好,开始动手改善既有代码!
(这里给大家上真实代码)
字符串相关
PR #40554
if (postData.indexOf('autoRefresh') < 0) {
postData += '&autoRefresh=0'
}
if (! gearbox.str.includes(postData, 'autoRefresh')) {
postData += '&autoRefresh=0'
}
PR #40940
function updateSubmitButton() {
var mobileNumber = $numInput.val()
var isValid = /\d{11}/.test(mobileNumber)
$btnSubmit.prop('disabled', !isValid)
}
function updateSubmitButton() {
var mobileNumber = $numInput.val()
var isValid = gearbox.str.RE_MOBILE.test(mobileNumber)
$btnSubmit.prop('disabled', !isValid)
}
URL 相关
PR #40536
$('li.listing-cpm-ad a.ad-title').each(function () {
var url = $(this).attr('href')
var urlComponent = url.split('?')
if (urlComponent[1] == undefined) {
$(this).attr('href', url + '?src=cpm')
} else if (urlComponent[1].indexOf('src=cpm') <= -1) {
$(this).attr('href', url + '&src=cpm')
}
})
$('li.listing-cpm-ad a.ad-title').each(function () {
const url = $(this).attr('href')
const urlCPM = gearbox.url.appendParam(url, {src: 'cpm'})
$(this).attr('href', urlCPM)
})
PR #40562
$(rangeFilterBtn).on('click', function() {
let queryStr = decodeURI(window.location.search.substr(1))
let queryData = {}
$.each(queryStr.split('&'), function (k, value) {
let pair = value.split('=')
queryData[pair[0]] = pair[1]
})
// ...
})
$(rangeFilterBtn).on('click', function() {
let queryData = gearbox.url.parseQuery(location.search.slice(1))
// ...
})
UA 探测
PR #40969
var webkitVersion =
(/\bAppleWebKit\/([0-9]*)\./.exec(navigator.userAgent) || [])[1]
if (parseInt(webkitVersion, 10) >= 534 &&
/\b(iPhone OS 6|Chrome|iPhone OS 7)/i.test(navigator.userAgent)
) {
$log('enable animation')
}
if (
gearbox.ua.isChrome()
|| gearbox.ua.isIOS()
|| gearbox.ua.engine === 'webkit'
&& parseFloat(gearbox.ua.engineVersion) >= 534
) {
$log('enable animation')
}
DOM 相关
PR #40968
searchForm.on('click', function() {
$('body').addClass('show-search')
// ...
})
searchCancel.on('click', function() {
$('body').removeClass('show-search')
// ...
})
searchForm.on('click', function() {
gearbox.dom.$body.addClass('show-search')
// ...
})
searchCancel.on('click', function() {
gearbox.dom.$body.removeClass('show-search')
// ...
})
Action 与 Template
已经讲过无数遍了……

还有其它功能吗?
github.com/CMUI/gearbox/wiki

还有其它功能吗?
github.com/CMUI/gearbox/wiki


API 文档齐备!
这玩意儿可靠吗?

这玩意儿可靠吗?


IE 8+
单元测试齐备!
Star
You'll need it, I bet.
github.com/CMUI/gearbox
Credits
- 设计
- 开发
- 测试


- 移植
- 测试
Q & A
Thank You!
Gearbox 发布会
By CSS魔法
Gearbox 发布会
“打造实用工具 · 改善开发体验”(第一波)- Gearbox 是什么? - 我们为什么需要 Gearbox? - Gearbox 如何改善既有代码?
- 1,191