很多时候, 我们需要用到jQuery, 但是我们又不需要jQuery所有功能, 为了一部分功能而引入一个完整的jQuery库, 实在是有点浪费, 特别是在移动端, 那么我们该怎么来精简掉一些我们不需要的功能呢?
准备工作, 安装 nodejs 和 git, 安装教程网上一搜一大把, 这里不再重复.
1. 克隆jquery仓库
git clone git://github.com/jquery/jquery.git
jQuery的仓库有点大, 网络不太好的, 建议挂VPN
2. 安装grunt
npm install -g grunt-cli
网络不太好的, 可以用cnpm安装
3. 安装jQuery仓库的相关依赖
cd jquery && npm install
网络不太好的, 可以用cnpm安装
4. 可以精简那些模块?
jquery的api文档: http://www.css88.com/jqapi-1.9/, 可以对比着精简
以下是可以精简的模块列表:
ajax
css
css/showHide
deprecated
dimensions
effects
event
event/alias
event/focusin
event/trigger
offset
wrap
core/ready
deferred
exports/global
exports/amd
sizzle
ajax模块
主要包括以下API
全局Ajax事件处理程序
.ajaxComplete()
.ajaxError()
.ajaxSend()
.ajaxStart()
.ajaxStop()
.ajaxSuccess()
底层接口
jQuery.ajax()
jQuery.ajaxSetup()
快捷方法
jQuery.get()
jQuery.getJSON()
jQuery.getScript()
.load()
jQuery.post()
css模块
主要包括以下API
.css()
css/showHide:
主要包括一下API
.hide()
.show()
.toggle()
deprecated
主要包括以下API
已经过时, 但是并未删除的
dimensions
主要包括以下API
.width()
.height()
.innerWidth()
.innerHeight()
.outerWidth()
.outerHeight()
effects
主要包括以下API
自定义动画
.animate()
.clearQueue()
.delay()
.dequeue()
jQuery.dequeue()
.finish()
jQuery.fx.interval
jQuery.fx.off
.queue()
jQuery.queue()
.stop()
渐变动画
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()
滑动动画
.slideDown()
.slideToggle()
.slideUp()
event
主要包括以下API
事件绑定
.off()
.on()
.one()
event/alias
主要包括以下API
表单事件
.blur()
.change()
.focus()
.select()
.submit()
鼠标事件
.click()
.contextmenu()
.dblclick()
.hover()
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseout()
.mouseover()
.mouseup()
event/focusin
主要包括以下API
.focusin()
.focusout()
event/trigger
主要包括以下API
.bind()
.delegate()
.trigger()
.triggerHandler()
.unbind()
.undelegate()
offset
主要包括以下API
.offset()
.offsetParent()
.position()
.scrollLeft()
.scrollTop()
wrap
主要包括以下API
.wrap()
.wrapAll()
.wrapInner()
.unwrap()
core/ready
主要包括以下API
.holdReady()
.ready()
deferred
主要包括以下API
延迟对象
deferred.always()
deferred.done()
deferred.fail()
deferred.isRejected()
deferred.isResolved()
deferred.notify()
deferred.notifyWith()
deferred.pipe()
deferred.progress()
deferred.promise()
deferred.reject()
deferred.rejectWith()
deferred.resolve()
deferred.resolveWith()
deferred.state()
deferred.then()
.promise()
另外: 如果移除deferred模块, ajax模块, effects模块, core/ready模块也会被移除
exports/global
移除全局的jQuery和$
exports/amd
移除AMD的定义
sizzle
移除该模块后, 选择器将使用原生的querySelectorAll
5. 开始精简
grunt custom:-ajax,-css,-deprecated,-dimensions,-effects,-event,-event/trigger,-event/alias,-event/focusin,-offset,-wrap,-deferred,-exports/amd,-sizzle
将需要精简的模块放在custom:后面, 然后在jquery目录下执行上面命令
6. 其他说明
哪怕将所有可以精简的模块都精简了, 核心API(除延迟对象), 选择器API, 遍历API 几乎都可以使用
