本站只提供技术知识分享,不提供详细开发教程及其步骤。如有需要可留言提问 : )

H5常用js库

HTML5 deam 5361℃ 0评论

小五随意总结了几个H5中常用的js库/框架,有些是小五常用惯用的,有些是总结案例时经常遇到的。当然还有很多其它的js库没有提及,欢迎各位留言补充~

1

基础

  1. Zepto
  2. jQuery

 

这两个都是常用JavaScript库,对于前端来说很基础。获取个节点啊,发个ajax请求啊都用它们。Zepto跟jQuery很类似,它俩的用法基本上是互通的。相比下jQuery更成熟,衍生的插件更丰富,但是Zepto更小,文件小加载会更快,更适合在手机端使用。

 

注意Zepto和jQuery最好不要一起用,容易引起代码冲突。

2

手势

  1. hammerJS
  2. Interact.js
  3. Touch.js

hammerJS和Interact.js都是Javascript手势库,支持多点触控。小五最习惯用Interact.js来实现双指控制元素放大缩小和旋转的效果。

Touch.js是和Zepto一起用的,主要就是应用它的swipe事件,注意如果引了Touch.js,浏览器的默认事件(滑屏)会被阻止哦。 (为啥会有它,因为本人经常用)

3

动画(canvas)

  1. CreateJS
  2. cocos2d-js
  3. Egret
  4. Lufylegend

 

这些都是游戏引擎,操作canvas用的。如果直接用js的canvas api写游戏,那过程可是极为痛苦的,引用了游戏引擎会极大的缩短开发时间。

 

CreateJS是adobe公司开发的,语法与ActionScript类似。createjs专门为flash开发了插件,所以可以由flash直接导出H5,不过小五还没试过咧。

前两个都是国外开发的,而后两个是国内开发的。英语不好的可以试试后两个引擎使用哈。Egret在国内的影响还是蛮大的,有很多不错的H5案例都引用了白鹭引擎。

虽然这些框架功能都十分强大,直接引用可以提高不少效率。但对canvas原生api的调用还是了解一下比较好,毕竟拿游戏引擎开发和用原生js写的思路还是有很大不同的。

4

3D(webgl)

  1. ThreeJS
  2. Pixi.js

 

three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。如果你学过opengl的话,用three.js开发3d程序会十分得心应手的。

 

Pixi.js在国外案例里经常出现,他们的标语是2D webGL renderer with canvas fallback,小五还没怎么研究过,没搞明白2d webgl 是个什么鬼,不过感兴趣的可以去看看。它家官网示例demo里的兔子倒是挺可爱的。5

缓动

  1. TweenMax
  2. Tween.js

     

虽然我把它单分出来放到缓动类里,但其实也都是拿来做动画的。研究不深,待各位补充。

6

加载

  1. PxLoader

做个图片预加载,js预加载什么的。

7

内容滑动

  1. Swiper

小五没怎么用过,我们滑屏都是自己写的代码,不过看好多人都引用这个做滑屏~倒也是方便。

滚动

  1. iScroll

顾名思义,主攻滚动的插件

物理引擎

  1. Box2DJs/Box2DWeb

这个不用解释了吧,让动画效果更接近真实,比如做个逼真的滑动碰撞什么的。

8

视频

  1. Video.js

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。<— 这个是网上摘的,小五就只用过一次,操作起来很方便~

9

模块化组织JS

  1. requireJS

这个应用的不多,一个简单的H5所需的代码量不大,一般不需要对js模块化,但是比较大型的H5就不一样了。

当然还有其他前端的框架,比如

  1. Bootstrap
  2. Angularjs
  3. backbone

 

这几个就更难在H5里见到了,一般在大型的偏向业务的web app或网站中会经常被应用到~

本文由 原创编译,转载请注明出处:http://www.90tec.com/h5/32.html

本站部分内容来自网络,如有侵权,请联系我们进行处理,转载本站文章请注明出处!
喜欢 (2)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址