摘要: 目录1、我是谁,以及我为什么写这个主题2、可以用140个字概述这篇文章吗?3、究竟什么是“大型”JavaScript应用程序?4、让我们回顾一下当前的架构5、想得长远一些6、头脑风暴7、架构提议 7.1 模块化理论 7.2 CommonJS模块 7.3 外观模式 7.4 中介者模式 7.5...阅读全文
posted @ 2014-06-30 12:11 草根程序猿 阅读(1821) 评论(0) 编辑
摘要: 近年来由于移动设备对HTML5的较好支持,经常有活动用刮奖的效果,最近也在看H5方面的内容,就自己实现了一个,现分享出来跟大家交流。1、效果2、原理原理很简单,就是在刮奖区添加两个canvas,第一个canvas用于显示刮开后显示的内容,可以是一张图片或一个字符串,第二个canvas用于显示涂层,可以用一张图片或用纯色填充,第二个canvas覆盖在第一个canvas上面。当在第二个canvas上点击或涂抹(点击然后拖动鼠标)时,把点击区域变为透明,这样就可以看到第一个canvas上的内容,即实现了刮奖效果。3、实现(1)定义Lottery类function Lottery(id, cover,阅读全文
posted @ 2014-03-04 18:17 草根程序猿 阅读(39974) 评论(48) 编辑
摘要: 1、概述WebRTC是“网络实时通信”(Web Real Time Communication)的缩写,它主要用来让浏览器实时获取和交换视频、音频和数据。WebRTC共分三个API。MediaStream(又称getUserMedia)RTCPeerConnectionRTCDataChannelgetUserMedia主要用于获取视频和音频信息,后两个API用于浏览器之间的数据交换。2、getUserMedia2.1 简介首先,检查浏览器是否支持getUserMedia方法。navigator.getUserMedia || (navigator.getUserMedia = nav...阅读全文
posted @ 2014-01-15 09:06 草根程序猿 阅读(53415) 评论(4) 编辑
摘要: 1、概述Mutation Observer(变动观察器)是监视DOM变动的接口。当DOM对象树发生任何变动时,Mutation Observer会得到通知。要概念上,它很接近事件。可以理解为,当DOM发生变动会触发Mutation Observer事件。但是,它与事件有一个本质不同:事件是同步触发,也就是说DOM发生变动立刻会触发相应的事件;Mutation Observer则是异步触发,DOM发生变动以后,并不会马上触发,而是要等到当前所有DOM操作都结束后才触发。这样设计是为了应付DOM变动频繁的情况。举例来说,如果在文档中连续插入1000个段落(p元素),会连续触发1000个插入事件,执阅读全文
posted @ 2013-12-14 10:55 草根程序猿 阅读(26927) 评论(6) 编辑
摘要: 1、概述HTTP协议是一种无状态协议,服务端本身不具有识别客户端的能力,必须借助外部机制,比如session和cookie,才能与特定客户端保持对话。这多多少少带来一些不便,尤其在服务器端与客户端需要持续交换数据的场合(比如网络聊天),更是如此。为了解决这个问题,HTML5提出了浏览器的WebSocket API。WebSocket的主要作用是,允许服务器端与客户端进行全双工(full-duplex)的通信。举例来说,HTTP协议有点像发电子邮件,发出后要等待对方回信;WebSocket则是像打电话,服务器端和客户端可以同时向对方发送数据,它们之间存在着一条持续打开的数据通道。WebSocke阅读全文
posted @ 2013-11-11 10:09 草根程序猿 阅读(1914) 评论(0) 编辑
摘要: 为了更好地为移动设备服务,HTML5推出了一系列针对移动设备的API。1、Geolocation APIGeolocation接口用于获取用户的地理位置。它使用的方法基于GPS或者其他机制(比如IP地址、WIFI热点等)。下面的方法,可以检查浏览器是否支持这个接口。if (navigator.geolocation) { // 支持} else { //不支持}1.1 getCurrentPosition方法getCurrentPosition方法,用来获取用户的地理位置。使用它需要得到用户的授权,浏览器会跳出一个对话框,询问用户是否许可当前页面获取他的地理位置。必须考虑两种情况的...阅读全文
posted @ 2013-10-21 11:00 草根程序猿 阅读(923) 评论(0) 编辑
摘要: 1、概述JavaScript语言采用的是单线程模型,也就是说,所有任务排成一个队列,一次只能做一件事。随着电脑计算能力的增强,这一点带来很大的不便,无法充分发挥JavaScript的潜能。龙其考虑到,File API允许JavaScript读取本地文件,就更加如此了。Web Worker的目就,就是为JavaScript创造多线程环境,允许主线程将一些任务分配给子线程。在主线程运行的同时,子线程在后台运行,两者互不干扰。等到子线程完成计算任务,再把结果返回给主线程。因此,每一个子线程就好像一个“工人”(worker),默默地完成自己的工作。Web Worker有以下几个特点:同域限制:子线程加阅读全文
posted @ 2013-09-14 18:47 草根程序猿 阅读(2529) 评论(0) 编辑
摘要: 1、同域限制所谓“同域限制”是指,出于安全考虑,浏览器只允许脚本与同样协议、同样域名、同样端口的地址进行通信。2、window.postMessage方法浏览器限制不同窗口(包括iFrame窗口)之间的通信,除非两个窗口装载的是同一个域名下的网页。window.postMessage方法就是为了解决这个问题而特定的API,可以让不同域名的窗口互相通信。postMessage方法的格式如下:targetWindow.postMessage(message, targetURL[, transferObject]);上面代码的targetWindow是指向目标窗口的变量,message是要发送的消阅读全文
posted @ 2013-08-07 10:47 草根程序猿 阅读(1370) 评论(0) 编辑
摘要: 1、概述localStorage和sessionStorage统称为Web Storage,它使得网页可以在浏览器端储存数据。sessionStorage保存的数据用于浏览器的一次会话,当会话结束(通常是该窗口关闭),数据被清空;localStorage保存的数据长期存在,下一次访问该网站的时候,网页可以直接读取以前保存的数据。除了保存期限的长短不同,这两个对象的属性和方法完全一样。它们很像cookie机制的强化版,能够动用大得多的存储空间。目前,每个域名的存储上限视浏览器而定,Chrome是2.5MB,Firefox和Opera是5MB,IE是10MB。其中,Firefox的存储存空间由一级阅读全文
posted @ 2013-07-10 14:55 草根程序猿 阅读(8953) 评论(0) 编辑
摘要: 1、概述随着浏览器的处理能力不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少用户等待从服务器获取数据的时间。现有的浏览器端数据储存方案,都不适合储存大量数据:cookie不超过4KB,且每次请求都会发送回服务器端;Window.name属性缺乏安全性,且没有统一标准;localStorage在2.5MB到10MB之间(各家浏览器不同)。所以,需要一种新的解决方案,这就是IndexedDB诞生的背景。通俗地说,IndexedDB就是浏览器端数据库,可以被网页脚本程序创建和操作。它允许储存大量数据,提供查找接口,还能建立索引。这些都是localStorage所不具备的。就数据阅读全文
posted @ 2013-06-15 18:16 草根程序猿 阅读(734) 评论(1) 编辑
摘要: 1、拖放效果2、draggable属性如果网页元素的draggable元素为true,这个元素就是可以拖动的。Draggable Div在大多数浏览器中,a元素和img元素默认就是可以拖放的,但是为了保险起见,最好还是加上draggable属性。3、事件拖动过程会触发很多事件,主要有下面这些:dragstart:网页元素开始拖动时触发。drag:被拖动的元素在拖动过程中持续触发。dragenter:被拖动的元素进入目标元素时触发,应在目标元素监听该事件。dragleave:被拖动的元素离开目标元素时触发,应在目标元素监听该事件。dragover:被拖动元素停留在目标元素之中时持续触发,应在目标阅读全文
posted @ 2013-05-10 14:11 草根程序猿 阅读(7065) 评论(0) 编辑
摘要: 历史上,JavaScript无法处理二进制数据。如果一定要处理的话,只能使用charCodeAt()方法,一个个字节地从文字编码转成二进制数据,还有一种办法是将二进制数据转成Base64编码,再进行处理。这两种方法不仅速度慢,而且容易出错。ECMAScript5引入了Blob对象,允许直接操作二进制数据。Bolb对象是一个代表二进制数据的基本对象,在它的基础上,又衍生出一系列相关的API,用来操作文件。File对象:负责处理那些以文件形式存在的二进制数据,也就是操作本地文件FileList对象:File对象的网页表单接口FileReader对象:负责将二进制数据读入内存URL对象:用于对二进制阅读全文
posted @ 2013-04-27 19:27 草根程序猿 阅读(38483) 评论(3) 编辑
摘要: 1、效果2、代码解析(1)requestAnimationFramerequestAnimationFrame是浏览器用于定时循环操作的一个接口,类似于setTimeout,主要用途是按帧对网页进行重绘。设置这个API的目的是为了让各种网页动画效果(DOM动画、Canvas动画、SVG动画、WebGL动画)能够有一个统一的刷新机制,从而节省系统资源,提高系统性能,改善视觉效果。代码中使用这个API,就是告诉浏览器希望执行一个动画,让浏览器在下一个动画帧安排一次网页重绘。requestAnimationFrame的优势,在于充分利用显示器的刷新机制,比较节省系统资源。显示器有固定的刷新频率(60阅读全文
posted @ 2013-03-28 12:35 草根程序猿 阅读(2009) 评论(1) 编辑
摘要: 1、概述Canvas 用于在网页展示图像,并且可以定制内容,基本上它是一个可以用JavaScript操作的位图(bitmap)。Canvas API用于网页实时生成图像,JavaScript通过API来操作图像内容。这样做的优点是:减少HTTP请求数,减少下载的数据,加快网页载入时间,可以对图像进行实时处理。使用前,首先需要建一个Canvas网页元素。 您的浏览器不支持canvas!如果浏览器不支持canvas,则就会显示canvas标签中间的文字——“您的浏览器不支持canvas!”。然后,使用JavaScript获取canvas的DOM对象。var canvas = document...阅读全文
posted @ 2013-02-26 14:59 草根程序猿 阅读(7595) 评论(0) 编辑
摘要: HTML5介绍HTML5是继HTML4以后的下一代HTML标准规范,它提供了一些新的元素和属性。新型的标签有利于搜索引擎和语义分析,同时更好地帮助小屏幕装置和视障人士使用,除此之外,也提供了一些新的功能,总结而言,有如下几大特点:1、取消了一些HTML4里过时的元素和属性标记其中包括纯粹显示效果的标记,如和,它们已经被CSS取代。HTML5吸取了XHTML2的一些建议,包括一些用来改善文档结构的功能,比如,新的HTML标签header,footer,dialog,aside,figure等的使用,将使内容创作者更加语义地创建文档,之前的开发者在实现这些功能时一般都是使用div。2、内容与展式分阅读全文
posted @ 2013-01-25 14:06 草根程序猿 阅读(530) 评论(1) 编辑