摘要: 原文地址:http://www.html5rocks.com/en/tutorials/getusermedia/intro/概述有了HTML5,我们就可以在不借助Flash或者Silverlight的情况下完成这项工作了。HTML5能够使我们访问设备的硬件,比如GPS,WebGL等等。这篇文章,我... 阅读全文
posted @ 2014-04-16 16:19 JChen___ 阅读(1137) 评论(0) 推荐(0) 编辑
摘要: 装饰者模式概述本章讨论的是一种为对象添加特性的技术,她并不使用创建新子类这种手段。装饰者模式可以用来透明的把对象包装在具有同样接口的另一个对象中。这样一来,就可以给一个方法添加一些行为,然后将方法调用传递给原始对象。装饰者的结构装饰者可用于为对象添加功能,她可以用来替代大量子类。我们还是来看那个自行... 阅读全文
posted @ 2014-04-14 10:40 JChen___ 阅读(2007) 评论(2) 推荐(0) 编辑
摘要: 适配器模式概述适配器模式可用来在现有接口和不兼容的类之间进行适配。使用这种模式的对象又叫包装器(wrapper)。适配器特点从表面看,适配器模式很像门面模式。她们都要对别的对象进行包装并改变其呈现的接口。二者的区别在于她们如何改变接口:门面元素展现的是一个简化的接口,她并不提供额外的选择,而且有时为了方便完成任务她还会做出一些假定。适配器则要把一个接口转换为另一个接口,她并不滤除某些能力,也不会简化接口。假设有一个对象,还有一个以三个字符串为参数的函数:var clientObject = { string1: 'foo', string1: 'bar', st 阅读全文
posted @ 2014-04-11 13:36 JChen___ 阅读(1838) 评论(1) 推荐(0) 编辑
摘要: 门面模式这是一种组织性的模式,它可以用来修改类和对象的接口,使其更便于使用。它可以让程序员过得更轻松,使他们的代码变得更容易管理。门面模式有两个作用:简化类的接口消除与使用她的客户代码之间的耦合一个简单的门面模式var addEvent = function(el, ty, fn){ var cases = [ function(el, ty, fn) { el.addEventListener(ty, fn, false); }, function(el, ty, fn) { el.attachEvent('on'+ty, fn); }, fu... 阅读全文
posted @ 2014-04-08 11:45 JChen___ 阅读(1068) 评论(0) 推荐(0) 编辑
摘要: 组合模式概述组合模式是一种专为创建Web上的动态用户界面量身定制的模式.使用这种模式可以用一条命令在多个对象上激发复杂的递归的行为.它可以用来把一批子对象组织成树形结构,并且使整棵树都可被遍历.所有组合对象都实现了一个用来获得子对象的方法.组合对象有两种结构组合对象和叶对象,如下: 组合对象 / | \ 组合对象 叶对象 组合对象 / \ / \叶对象 叶对象 叶对象 叶对象 组合模式的适用条件存在一批组织成某种层次体系的对象(具体的结构在开发期间可能无法得知)希望这批对象或其中的一部分对象实施一个操作.组合模式擅长于对大批对象... 阅读全文
posted @ 2014-04-04 13:55 JChen___ 阅读(704) 评论(0) 推荐(0) 编辑
摘要: 桥接模式的用途在实现API的时候,桥接模式非常有用.在设计一个JavaScript API的时候,可以用这个模式来弱化它与使用它的类和对象之间的耦合.示例:事件监听器桥接模式最常见和实际的应用的场合之一是事件监听器回调函数.假设有一个名为getBeerById的API函数,它根据一个标识符返回有关某种啤酒的信息.常规的实现:addEvent(element,'click', getBeerById);function getBeerById(e){ var id = this.id; asyncRequest('GET', 'beer.uri?id=&# 阅读全文
posted @ 2014-04-01 11:05 JChen___ 阅读(408) 评论(0) 推荐(0) 编辑
摘要: RSS阅读器由于我们只想跟RSS容器对象打交道,所以用一个工厂来实例化这些内部对象并把它们组装到一个RSS阅读器中.使用工厂方法在好处在于,我们创建的RSS阅读器类不会与那些成员对象紧密耦合在一起.RSS阅读器的成员对象成员对象1: xhr这个对象就是上一篇中介绍过的,所以就不再说了.成员对象2: 显示类为了满足RSS阅读器类的需要,它需要实现几个方法.var DisplayModule = new Interface('DisplayModule', ['append', 'remove', 'clear']);var List 阅读全文
posted @ 2014-03-30 19:36 JChen___ 阅读(301) 评论(0) 推荐(0) 编辑
摘要: XHR工厂基本实现var AjaxHandler = new Interface('AjaxHandler', ['request', 'createXHR']);var SimpleHandler = function(){};SimpleHandler.prototype = { request: function(method, url, callback, postVars){ var xhr = this.createXHR(); xhr.onreadystatechange = function(){ if(xhr.ready... 阅读全文
posted @ 2014-03-28 16:50 JChen___ 阅读(346) 评论(0) 推荐(0) 编辑
摘要: 工厂模式本章讨论两种工厂模式:简单工厂模式使用一个类(通常是一个单体)来生成实例。使用场景:假设你想开几个自行车商店(创建自行车实例,组装它,清洗它,出售它),每个店都有几种型号的自行车出售。/*=====================实现车==========================*/var Bicycle = new Interface('Bicycle', ['assemble', 'wash', 'ride', 'repair']);//Interface见2.初识接口那一章的用鸭式辨型模仿接口 阅读全文
posted @ 2014-03-26 10:07 JChen___ 阅读(768) 评论(0) 推荐(0) 编辑
摘要: 什么是链式调用这个很容易理解,例如:$(this).setStyle('color', 'red').show();分解链式调用链式调用其实是两个部分:1.操作对象(也就是被操作的DOM元素,如上例的$(this))2.操作方法(具体要做什么事情,如上例的setStyle和show)如何生成操作对象与操作方法一般的$函数:function $(){ var elements = []; for(var i= 0,len=arguments.length; i<len; i++){ var element = arguments[i]; if(typeof. 阅读全文
posted @ 2014-03-21 00:07 JChen___ 阅读(4419) 评论(1) 推荐(5) 编辑