本文目录一览：
- 1、有哪些值得推荐的类似 jQuery UI 或者 Bootstrap 这样的 UI 框架
- 2、js创建数组对象的过程有几种?特点是什么?
- 3、如何使用Createjs来编写HTML5游戏EaselJS简介
- 4、如何使用Createjs来编写HTML5游戏完成一个简单的打飞机游戏
- 5、介绍几个HTML5动画工具
有哪些值得推荐的类似 jQuery UI 或者 Bootstrap 这样的 UI 框架
1）Twitter Bootstrap
Bootstrap是最流行的HTML5框架之一。这是一款用于Web开发的时尚、直观、强大的前端框架。它有着用于开发响应式网站的所有组件，如12列响应式网格、定制jQuery插件、bootstrap编辑器等等。
2）HTML5 Boilerplate
HTML5 Boilerplate能帮助我们构建快速、可适应的Web应用和网站。它提供了优秀的网站性能和独立的服务器维护配置。它可以帮助你开展新的项目。
3）Foundation
Foundation是当今世界最先进的响应式前端框架。我们可以通过构建面向小型设备的网站来使用此HTML5架构。它也可用于灵活和响应式的网站
4）UIKit
UIKit是一款轻量级，模块化的前端框架，可快速构建强大的web前端界面。UIKit提供了全面的HTML、CSS和JS组件，使用和定制都很方便。
5）HTML5 KickStart
HTML5 KickStart有着精简的HTML5、CSS和JS的构建模块，支持快速制作网站。它小小的程序包中囊括了响应式网格布局、触摸功能的幻灯片等等
6）Gumby
Gumby2是一个非常了不起的响应式CSS框架。Gumby框架也允许定制：这和下载、调整、部署一样简单！Gumby2建立在Sass的基础上。
7）Skeleton
Skeleton简单又友好，可用于开发HTML5网站和移动应用。它有一个CSS文件的小集合，能让你快速开发出任意大小的网站。
8）Groundwork
Groundwork是一款响应HTML5、CSS和JavaScript的框架，拥有如网格系统，高度可定制化，响应式文本等等功能。
9）Base
Base是一款基于语义的、轻量级的和可扩展的框架，可用于快速创建响应式站点。
10）Montage
Montage是一款支持构建现代化Web应用程序的HTML5框架。它能协助你开发出可扩展和可维护的HTML5应用。它拥有如可重用的组件和HTML模板，声明组件模型，声明数据绑定等功能。
11）Layers CSS
Layers CSS是轻量级的CSS框架，它不强调任何设计但是可以用来处理主要结构。它拥有流动网格和一些简单的类，以支持响应式布局。
12）52Framework
52Framework是一款旨在提供用简单方法通过HTML5和CSS3构建响应式网页，同时支持所有现代浏览器的HTML5框架。它里面有多种超棒的组件，如HTML5视频播放器，圆角，HTML5画布例子，HTML5表单验证等等等等。
13）CreateJS
CreateJS是一系列模块化的库和工具，经由HTML5的Web技术生成丰富多彩的交互式内容。它有HTML5音频，对象管理，渐变等功能。CreateJS套件包括：EaselJS，TweenJS，SoundJS，PreloadJS和Zoe。
14）Kube
Kube Framework只有一个CSS文件。它的美丽就源于它的简单。对开发人员拥有最大的灵活性和定制，并提供LESS文件。
15）Less Framework
Less Framework是一个现代化的前端框架，用于构建响应式的设计。它也是一款支持设计自适应网站的CSS网格系统。它含有通通基于单网格的4款布局和3套预设排版
16）SkelJS
skelJS是一款轻量级的前端框架，用于构建响应式网站和app。
具体的官方网址请参考以下博客内容：
js创建数组对象的过程有几种?特点是什么?
js编程中创建对象的几种方式，如原始方法、工厂方法等创建对象。
1、原始方法
复制代码代码示例:
script type="text/javascript"
var obj = new Object();
obj.name = "Koji"; //为对象添加属性
obj.age = 21;
obj.showName = function(){ //为对象添加方法
alert(this.name);
}
obj.showAge = function(){
alert(this.age);
}
obj.showName(); //Koji
obj.showAge(); //21
/script
上面的方式通过new关键字生成一个对象，然后根据JS是动态语言的特性添加属性和方法，构造一个对象。其中的this是表示调用该方法的对象。
这种方式的问题是如果需要多次创建对象，则需要重复代码多次，不利于代码的复用。
2、工厂方法 ：
复制代码代码示例:
script type="text/javascript"
function createObj(){
var obj = new Object(); //创建对象
obj.name = "Koji";
obj.age = 21;
obj.showName = function(){
alert(this.name);
}
obj.showAge = function(){
alert(this.age);
}
return obj; //返回对象
}
var obj1 = createObj();
var obj2 = createObj();
obj1.showName(); //Koji
obj2.showAge(); //21
/script
这种方式提高了代码重用率，还可以改变工厂方法，传入参数赋值。
复制代码代码示例:
script type="text/javascript"
function createObj(name, age){ //构造对象时可以传入初始化参数
var obj = new Object(); //创建对象
obj.name = name;
obj.age = age;
obj.showName = function(){
alert(this.name);
}
obj.showAge = function(){
alert(this.age);
}
return obj; //返回对象
}
var obj1 = createObj("Koji", 22);
var obj2 = createObj("Luo", 21);
obj1.showName(); //Koji
obj1.showAge(); //22
obj2.showName(); //Luo
obj2.showAge(); //21
/script
上面的方式虽然可以提高代码的复用率，但和面向对象中类的概念相比有一个很大的缺陷。面向对象强调对象的属性私有，而对象的方法是共享的。而上面的工厂方法创建对象的时候要为每个对象创建各自私有的方法。同时由于为每个对象都创建逻辑相同的方法，浪费内存。
改进如下：
复制代码代码示例:
script type="text/javascript"
function createObj(name, age){
var obj = new Object(); //创建对象
obj.name = name;
obj.age = age;
obj.showName = showName;
obj.showAge = showAge;
return obj; //返回对象
}
function showName(){ //函数也是一个对象
alert(this.name);
}
function showAge(){
alert(this.age);
}
var obj1 = createObj("Koji", 22);
var obj2 = createObj("Luo", 21);
obj1.showName(); //Koji
obj1.showAge(); //22
obj2.showName(); //Luo
obj2.showAge(); //21
/script
上面通过定义连个函数对象，解决了不同对象持有函数对象的私有问题。现在所有对象的方法都持有上面两个函数的引用。但这么一来的话，对象的函数又和对象成了相互独立，不相干的了。这和面向对象中特定方法属于特定类的思想不符合。
3、构造函数方式
复制代码代码示例:
script type="text/javascript"
//定义一个构造函数，用来生成对应的对象，可以类比Java中的构造函数
function Person(name, age){
//当调用new Person的时候，在执行第一行代码前，先生成一个Person对象，并将对象在内存中的
//索引赋值给this关键字，此时可以通过this关键字操作新生成的对象，如下面的添加属性或方法
this.name = name; //this关键字不能少。为当前对象，即this关键字引用的对象的name属性赋值
//，实际相当于为当前对象添加name属性后,再为其name属性赋值。
this.age = age;
this.showName = function(){ //为当前对象添加方法
alert(this.name);
}
this.showAge = function(){
alert(this.age);
}
//将当前对象返回给赋值符号左边的变量（不必明确使用return）
}
var obj1 = new Person("Koji", 22); //生成一个Person对象
var obj2 = new Person("Luo", 21);
obj1.showName(); //Koji
obj1.showAge(); //22
obj2.showName(); //Luo
obj2.showAge(); //21
/script
构造函数的方式和工厂方式一样，会为每个对象创建独享的函数对象。当然也可以将这些函数
对象定义在构造函数外面，这样又有了对象和方法相互独立的问题。
原型方法：
该方法利用的对象的prototype属性
复制代码代码示例:
script type="text/javascript"
function Person(){} //定义一个空构造函数，且不能传递参数
//将所有的属性的方法都赋予prototype属性
Person.prototype.name = "Koji"; //添加属性
Person.prototype.age = 22;
Person.prototype.showName = function(){ //添加方法
alert(this.name);
}
Person.prototype.showAge = function(){
alert(this.age);
}
var obj1 = new Person(); //生成一个Person对象
var obj2 = new Person();
obj1.showName(); //Koji
obj1.showAge(); //22
obj2.showName(); //Koji
obj2.showAge(); //22
/script
当生成Person对象的时候prototype的属性都赋值给了新的对象。那么属性和方法是共享的。
该方法的问题首先是构造函数不能传参，每个新生成的对象都有默认值。其次，方法共享没有任何问题，但是属性共享就有问题，当属性是可改变状态的对象的时候。
例子：
复制代码代码示例:
script type="text/javascript"
function Person(){} //定义一个空构造函数，且不能传递参数
Person.prototype.age = 22;
Person.prototype.array = new Array("Koji", "Luo");
Person.prototype.showAge = function(){
alert(this.age);
}
Person.prototype.showArray = function(){
alert(this.array);
}
var obj1 = new Person(); //生成一个Person对象
var obj2 = new Person();
obj1.array.push("Kyo"); //向obj1的array属性添加一个元素
obj1.showArray(); //Koji,Luo,Kyo
obj2.showArray(); //Koji,Luo,Kyo
/script
以上代码通过obj1向obj1的属性array添加元素的时候，obj2的arra属性的元素也跟着受到影响，原因就在于obj1和obj2对象的array属性引用的是同一个Array对象，那么改变这个Array 对象，另一引用该Array对象的属性自然也会受到影响混合的构造函数/原型方式。
使用构造函数定义对象的属性，使用原型（prototype）定义对象的方法，这样就可以做到属性私有，而方法共享。
例子：
复制代码代码示例:
script type="text/javascript"
function Person(name, age) {
this.name = name;
this.age = age;
this.array = new Array("Koji", "Luo");
}
Person.prototype.showName = function() {
alert(this.name);
}
Person.prototype.showArray = function() {
alert(this.array);
}
var obj1 = new Person("Koji", 22); //生成一个Person对象
var obj2 = new Person("Luo", 21);
obj1.array.push("Kyo"); //向obj1的array属性添加一个元素
obj1.showArray(); //Koji,Luo,Kyo
obj1.showName(); //Koji
obj2.showArray(); //Koji,Luo
obj2.showName(); //Luo
/script
属性私有后，改变各自的属性不会影响别的对象。同时，方法也是由各个对象共享。在语义上，
这符合了面相对象编程的要求。
4、动态原型方法
复制代码代码示例:
script type="text/javascript"
function Person(name, age) {
this.name = name;
this.age = age;
this.array = new Array("Koji", "Luo");
//如果Person对象中的_initialized为undefined，表明还没有为Person的原型添加方法
if (typeof Person._initialized == "undefined")
{
Person.prototype.showName = function() {
alert(this.name);
}
Person.prototype.showArray = function() {
alert(this.array);
}
Person._initialized = true; //设置为true，不必再为prototype添加方法
}
}
var obj1 = new Person("Koji", 22); //生成一个Person对象
var obj2 = new Person("Luo", 21);
obj1.array.push("Kyo"); //向obj1的array属性添加一个元素
obj1.showArray(); //Koji,Luo,Kyo
obj1.showName(); //Koji
obj2.showArray(); //Koji,Luo
obj2.showName(); //Luo
/script
这种方法和构造函数/原型方式大同小异。只是将方法的添加放到了构造函数之中，同时在构造函数Person上添加了一个属性用来保证if语句只能成功执行一次。
在实际应用中采用最广泛的是构造函数/原型方法。动态原型方法也很流行，它在功能上和构造函数/原型方法是等价的，不要单独使用构造函数或原型方法。
如何使用Createjs来编写HTML5游戏EaselJS简介
createJs的由来，基础什么的就不说了，就直接说createJs的用法吧。
首先到createJs官网下载，createJs分成easelJs（图形动画）、preloadJs（文件加载）、soundJs（音频控制）以及tweenJs（补间动画）四部分，大家下载的时候，建议下载两个文件，一个是压缩版文件，用于项目中的引用，再下载个源码文件，用于查看用法、API、demo等。因为楼主目前只用了easelJs和preloadJs，所以暂时就只说这两个，其实就这两个已经非常够用了。
接下来开始分析代码：
首先引入js文件
script
src="easeljs-0.7.1.min.js"/script
script
src="preloadjs-0.4.1.min.js"/script
然后进行舞台初始化操作：
function
init(){
stage
=
new
createjs.Stage("cas");
C_W
=
stage.canvas.width;
C_H
=
stage.canvas.height;
var
manifest
=
[
{src:"image/man.png"
,
id:"man"},
{src:"image/ground.png"
,
id:"ground"},
{src:"image/bg.png"
,
id:"bg"},
{src:"image/high.jpg"
,
id:"high"},
{src:"image/coins.png"
,
id:"coin"}
]
loader
=
new
createjs.LoadQueue(false);
loader.addEventListener("complete"
,
handleComplete);
loader.loadManifest(manifest);
drawLoading();
}
上面就用到了preloadJs中的方法，实例化一个loader，把需要加载的图片文件放在manifest里面，进行加载，加载完成后调用回调handleCompelete函数：
function
handleComplete(){
//当图片素材load完后执行该方法
var
manImage
=
loader.getResult("man"),
lowground
=
loader.getResult("ground"),
highground
=
loader.getResult("high"),
bgImage
=
loader.getResult("bg"),
coins
=
loader.getResult("coin");
sky
=
new
createjs.Shape();
sky.graphics.bf(bgImage).drawRect(0,0,C_W,C_H);
sky.setTransform(0,
0,
1
,
C_H/bgImage.height);
stage.addChild(sky);
man
=
createMan(200,326,manImage);
//该框为判定角色的判定区域
kuang
=
new
createjs.Shape();
kuang.graphics.beginStroke("rgba(255,0,0,0.5)").drawRect(0
,
,
man.size().w
,
man.picsize().h*1.5);
//
stage.addChild(kuang);
mapHandle(lowground
,
highground
,
coins);
createjs.Ticker.timingMode
=
createjs.Ticker.RAF;//设置循环方法，可以是requestAnimationFrame或者是setTimeout
createjs.Ticker.setFPS(30);//舞台帧率控制
createjs.Ticker.addEventListener("tick",
tick);//绑定舞台每一帧的逻辑发生函数
window.addEventListener("keydown"
,
function(event){
event
=
event||window.event;
if(event.keyCode===32man.jumpNumman.jumpMax){
man.jump();
}
})
}
获得加载完成后端的图片数据就直接用loader.getResult就可以获取了，跑酷游戏需要一个背景，所以，我们实例化一个sky，然后进行位图绘制，bf方法是beginBitmapFill的缩写，该方法就是开始绘制位图，后面的drawRect是位图的绘制区域，区域当然是整个画布啦，所以就是drawRect(0,0,C_W,C_H)。实例化出来sky后就直接添加到舞台stage里面就行了。接下来是实例化一个角色，createMan方法后面有说，是自己封装的。
然后进行舞台循环设置，上面有注释了，就不说了。
如何使用Createjs来编写HTML5游戏完成一个简单的打飞机游戏
CreateJS包含4个部分，EaselJS、TweenJS、PreloadJS、SoundJS，其中最主要的部分EaselJS包含了开发Html5游戏的所有功能，仅仅使用EaselJS几乎可以完成所有的开发工作，其余三项可以看作EaselJS的辅助工具。比如响应tick事件然后改变元素坐标就可以实现动画功能，而使用TweenJS来创建补间动画，则可以省去你很多代码，简化了操作。一个简单的tick动画看起来是这样的：pre t="code" l="js"var stage, circle;
function init(){
stage = new createjs.Stage(document.getElementById('game'));
createjs.Ticker.addEventListener("tick", handleTick);
createjs.Ticker.setFPS(60);
circle = new createjs.Shape();
circle.graphics.f("red").dc(0,0,50);
circle.x = 0;
circle.y = 100;
stage.addChild(circle);
circle.addEventListener("click", function(event){
createjs.Ticker.setPaused(!createjs.Ticker.getPaused());
});
}
function handleTick(event){
if(!event.paused){
circle.x +=5;
if(circle.x 1000){
circle.x = 0;
}
}
stage.update();
}
介绍几个HTML5动画工具
HTML5使得开发者能为你的网站创建出惊人的动画效果。这些很棒的动画效果会为你的网站增添更多吸引力，接着会带来更多的生意。这些用HTML5创建的动画效果很出色，看起来很惊人。但为了做出这种动画效果，你需要经历很多比较麻烦的工作，所以你可以使用一些免费或市面上收费的HTML5动画工具。
本文将会为大家介绍市面上最好的HTML5动画工具。这个清单使我们极为用心列出来的，以为大家呈现出真正有用且专业的HTML5动画工具。所以接着读下去并找到最符合你需求的那个工具吧，以下每个工具都有它独特的地方。
1. Mixeek
这是一款用来设计和运行Web动画和交互的免费应用工具。它基于JavaScript，CSS3和HTML5，它有着轻量级、已使用的特点。
2. Animatron
它主要用来设计和发布动画/交互的内容，包括在PC端和手机端两个地方。
3. Tumult Hype
设计师们可以用它创造出漂亮的Web内容，而且几乎不用任何的Coding，可以运行在桌面、手机和Pad上。
4. Mugeda
Mugeda是一个基于云平台的专业可视化环境，用于直接在浏览器中制作富含动画和交互的HTML5内容。设计师无需任何编码，就可以制作富有感染力的移动动画内容。
5. HTML5 Maker
这是一款制作动画、标语和有感染力图像的最佳帮手，而且它是免费的。
6. Hippo studios
它提供了一个可以创造超强动画、复杂游戏、多媒体、App等的平台。
7. Sencha
Sencha Space 是安全应用管理平台，帮助你更好的部署你的应用给大部分用户，支持大多数设备，使用最新的 hassle。
8. Blysk
这又是一款实用工具，它可以帮助Web设计师创造页面上的动画，有更多的交互效果。
9. Radiapp
它可以为你的网站创造视频、动画和图像。
10. Createjs
CreateJS是一个JavaScript库，可以说是一款为HTML5游戏开发的引擎，帮助用户有更好的体验。
11.Motion Composer
Motion Composer是一套用于对比、整合和展示动作捕捉数据的软件包。可以制作多特征的动画，有着简单易用的接口。
