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