HTML5 API 浏览器支持情况检测

HTML5发展到现在,虽说没有大规模的普及,但在我们日常生活中,也很容易见到了,HTML5的游戏、网站、应用也是层出不穷。而作为前端人员,也应该多了解这些API为以后应用打基础,下面我将给大家介绍 HTML5 新引入的API,并附上各个 API 的浏览器检测方法,我主要参考了最近看的《html5揭秘》和《html5高级程序设计》。

首先,我们先介绍下 Modernizr, 它是一个用来检测浏览器对 HTML5 和 CSS3 特性支持情况的开源 Javascript 类库,现在最新的是 2.5.3 版(下载),使用方法很简单,在页面里引入 JS 后,它会自动运行,并创建一个 Modernizr 全局对象,它为每一个可以检测的特性都创建了一个对应的布尔类型的属性,我们只要去调用就行了,例如:

if( Modernizr.canvas ){
  // 恩,我知道这个属性,他是画图用的:)
}else{
  // canvas 这是个什么东东??
}

1.Canvas
Canvas是依赖分辨率的位图画布,其绘制的图形是不可缩放的,你可以通过 Javascript 在 Canvas 上面绘制任何图形,甚至加载照片,HTML5标准制定了一系列 Canvas API,用于绘制简单的图形、定义路径、创建渐变及应用图像变换等 。一个 Canvas 就是一个矩形区域,默认情况下宽 300 像素,高 150 像素。
注意:Canvas绘制出来的对象不属于页面 DOM 结构或其他任何的命名空间。

// 创建一个 Canvas 元素,并检查该元素是否拥有 getContext() 方法,然后用双否定强制返回一个布尔值
var hasCanvas = !!document.createElement("canvas").getContext;

// Modernizr检测方法,返回布尔值
var hasCanvas = Modernizr.canvas ;

继续阅读 HTML5 API 浏览器支持情况检测

Javascript面向对象学习笔记(一)

最近一直在学习Javascript的面向对象,感觉这里是个难点,想掌握只能是多写多练了,这是我的学习笔记,整理出来和大家分享,希望能有所帮助,我主要参考了《JavaScript高级程序设计》和《JavaScript权威指南》。

1.工厂模式:

function robot(model, color){
    var e = new Object();
    e.model = model;
    e.color = color;
    return e;
}

var robot1 = robot("T1000", "white");
var robot2 = robot("S2000", "black");

函数 robot() 可以被无限次的调用,并每次都会返回一个包含 model 和 color 属性的对象,但这些被返回的相似的对象之间却体现不出任何联系。

2.构造函数模式:

function Robot(model, color){ //构造函数以大写字母开头
    this.model = model;
    this.color = color;
    this.sayModel = function(){
        alert(this.model);
    }
}

var robot1 = new Robot("T1000", "white");
var robot2 = new Robot("S2000", "black");

alert(robot1.model);    //"T1000"
alert(robot2.model);    //"S2000"
robot1.sayModel();      //"T1000"
robot2.sayModel();      //"S2000"

继续阅读 Javascript面向对象学习笔记(一)