前两天有个前端项目要适配移动端,我一想jQuery那套东西又重又老,学起来头都大。赶紧搜替代方案,这不就撞上Zepto了嘛听说这玩意儿轻得像张纸,专治手机端开发,赶紧开搞!
第一步:先把这货弄到手
我直接冲官网想下压缩包,结果找了半天发现现在都npm安装了。打开命令行怼了句npm install zepto,结果安装完一看:node_modules里居然散装成几十个js文件!当场懵逼——说好的轻量?原来还得自己打包!
第二步:手动搓个专用包
硬着头皮查文档,发现要用他们提供的打包工具。先全局装了npm install -g zepto,然后在项目根目录敲命令:
zepto --build
命令行哗滚日志,在dist文件夹里终于出了个*,拿在手里掂量了下才30KB,这下舒服了。
第三步:往页面里糊文件
把刚打包的*甩进项目文件夹,老规矩在html里加了个script标签:
<script src="path/to/*"></script>
F12打开控制台,试着输入$.fn,看到弹出一堆函数名,成了!这玩意儿能用了!
第四步:找东西 & 改样式
拿自己页面的按钮开刀,先试试$('#submit-btn'),秒抓到元素。想改个背景色,直接怼:
$('.warning').css('background','#ffece6')
页面里几个警告块唰地黄了,比用原生JS查DOM省事一百倍!
第五步:给按钮栓动作
接着折腾登录按钮,绑点击事件:
$('#login-btn').on('click', function(){ *('戳到我了!'); 手指一点手机屏幕,控制台真吐出字了。顺手还试了试滑动手势监测: $('div').swipeLeft(function(){ alert('别扒拉我!'); 搞完这五步手机刷新页面,所有功能跑得贼顺。最大惊喜是Zepto的API和jQuery几乎一模一样,把我从jQuery苦海里捞出来了!虽然打包时卡壳了半小时,但用起来是真香。要我说移动端开发别犹豫,Zepto就是穷人的法拉利!