小五随意总结了几个H5中常用的js库/框架,有些是小五常用惯用的,有些是总结案例时经常遇到的。当然还有很多其它的js库没有提及,欢迎各位留言补充~
基础
- Zepto
- jQuery
这两个都是常用JavaScript库,对于前端来说很基础。获取个节点啊,发个ajax请求啊都用它们。Zepto跟jQuery很类似,它俩的用法基本上是互通的。相比下jQuery更成熟,衍生的插件更丰富,但是Zepto更小,文件小加载会更快,更适合在手机端使用。
注意Zepto和jQuery最好不要一起用,容易引起代码冲突。
手势
- hammerJS
- Interact.js
- Touch.js
hammerJS和Interact.js都是Javascript手势库,支持多点触控。小五最习惯用Interact.js来实现双指控制元素放大缩小和旋转的效果。
Touch.js是和Zepto一起用的,主要就是应用它的swipe事件,注意如果引了Touch.js,浏览器的默认事件(滑屏)会被阻止哦。 (为啥会有它,因为本人经常用)
动画(canvas)
- CreateJS
- cocos2d-js
- Egret
- Lufylegend
这些都是游戏引擎,操作canvas用的。如果直接用js的canvas api写游戏,那过程可是极为痛苦的,引用了游戏引擎会极大的缩短开发时间。
CreateJS是adobe公司开发的,语法与ActionScript类似。createjs专门为flash开发了插件,所以可以由flash直接导出H5,不过小五还没试过咧。
前两个都是国外开发的,而后两个是国内开发的。英语不好的可以试试后两个引擎使用哈。Egret在国内的影响还是蛮大的,有很多不错的H5案例都引用了白鹭引擎。
虽然这些框架功能都十分强大,直接引用可以提高不少效率。但对canvas原生api的调用还是了解一下比较好,毕竟拿游戏引擎开发和用原生js写的思路还是有很大不同的。
3D(webgl)
- ThreeJS
- Pixi.js
three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。如果你学过opengl的话,用three.js开发3d程序会十分得心应手的。
Pixi.js在国外案例里经常出现,他们的标语是2D webGL renderer with canvas fallback,小五还没怎么研究过,没搞明白2d webgl 是个什么鬼,不过感兴趣的可以去看看。它家官网示例demo里的兔子倒是挺可爱的。
缓动
- TweenMax
- Tween.js
虽然我把它单分出来放到缓动类里,但其实也都是拿来做动画的。研究不深,待各位补充。
加载
- PxLoader
做个图片预加载,js预加载什么的。
内容滑动
- Swiper
小五没怎么用过,我们滑屏都是自己写的代码,不过看好多人都引用这个做滑屏~倒也是方便。
滚动
- iScroll
顾名思义,主攻滚动的插件
物理引擎
- Box2DJs/Box2DWeb
这个不用解释了吧,让动画效果更接近真实,比如做个逼真的滑动碰撞什么的。
视频
- Video.js
Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。<— 这个是网上摘的,小五就只用过一次,操作起来很方便~
模块化组织JS
- requireJS
这个应用的不多,一个简单的H5所需的代码量不大,一般不需要对js模块化,但是比较大型的H5就不一样了。
当然还有其他前端的框架,比如
- Bootstrap
- Angularjs
- backbone
这几个就更难在H5里见到了,一般在大型的偏向业务的web app或网站中会经常被应用到~
本文由 爱分享 原创编译,转载请注明出处:http://www.90tec.com/h5/32.html