zepto怎么玩入门?新手5步快速上手指南(简单易学)

前两天有个前端项目要适配移动端,我一想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就是穷人的法拉利!