2013年5月14日
JavaScript Event Loop 浅析
摘要： 最近在学习Nodejs的过程中深入的了解了异步编程这个概念，为了更好的使用Nodejs，这些概念不可不知。在以前作为一个JavaScript用户的时候，完全是不知道它是怎么运行的，对好些概念也是“知其然不知其所以然”。对于客户端的JavaScript和Nodejs来说其实差距不是很大，这回就从客户端方面来说说Event Loop这个概念吧，算是异步编程的一个切入点吧。其实jQuery的作者John Resig在几年前就写了一篇好文章How JavaScript Timers Work，来讲述timer和事件在浏览器中是怎样工作的，我也是通过这篇文章才“知其所以然”。问题场景先来看看一段代码：1 阅读全文
posted @ 2013-05-14 03:24 zhepama 阅读(351) 评论(2) 推荐(1) 编辑
说说 JavaScript 计时器的工作原理
摘要： 原文：John Resighttp://ejohn.org/blog/how-javascript-timers-work/How JavaScript Timers Work从基础的层面来讲，理解JavaScript的定时器是如何工作的是非常重要的。计时器的执行常常和我们的直观想象不同，那是因为JavaScript引擎是单线程的。我们先来认识一下下面三个函数是如何控制计时器的。var id = setTimeout(fn, delay);- 初始化一个计时器，然后在指定的时间间隔后执行。该函数返回一个唯一的标志ID（Number类型），我们可以使用它来取消计时器。var id = setIn 阅读全文
posted @ 2013-05-14 03:00 zhepama 阅读(326) 评论(0) 推荐(0) 编辑
2013年5月13日
Javascript 垃圾收集机制
摘要： 经常使用 Javascript 的人会琢磨其垃圾收集机制，Javascript 并不像 C，C++ 那样需要开发者手动去清除垃圾，在编写 Javascript 程序是，开发者无需关心内存使用问题，所需内存分配以及无用内存（垃圾）的回收完全实现了自动管理。究其根源，主要是程序收集那些不再使用的变量，并且释放其占用的内存。因此，垃圾收集机制会按照固定时间间隔，周期性反复的执行这一操作。举例来说，局部变量只存在于函数内部，程序会为局部变量在栈内存或堆内存中分配对应的存储空间，当函数运行结束，局部变量所占用的内存就没有存在的必要了，这时程序会释放局部变量所占用的内存供其他变量使用。这是程序最简单释放内 阅读全文
posted @ 2013-05-13 22:28 zhepama 阅读(148) 评论(0) 推荐(0) 编辑
元素和语义化
摘要： 简单了解了HTML和CSS之后，是时候深入学习如何组合使用这两个语言了。在开始创建一个网页之前你不但需要学习不同的类型的内容需要哪个HTML元素来显示，而且需要了解这些元素有什么样的表现，这样你才能得到想要的结果。另外，一旦开始写代码你需做到尽可能的语义化。语义化的书写代码包括确保代码有组织性，并做出明确的决定。语义化概述在此之前语义化已经被提到过很多次了，究竟什么才是语义化？HTML中的语义化是一种赋予页面内容意义和结构的做法。语义化扮演了页面内容的价值，语义化不仅仅只是为了样式的考虑。使用语义化的代码有很多的好处，包括能够让电脑、屏幕阅读器、搜索引擎、以及其他的设备更加充分的阅读和理解网页 阅读全文
posted @ 2013-05-13 01:46 zhepama 阅读(357) 评论(0) 推荐(0) 编辑
jQ.Mobi框架介绍
摘要： jQ.Mobi是基于HTML5重写的jQuery框架，由appMobi开发并且开源托管于github，在此有简易的在线文档提供查阅。 jQ.Mobi相比于其他方案具有体积小速度快的优势。jQ.Mobi由三个组件组成：查询（query）程序库jQ.ui——为webkit内核浏览器提供的用户界面程序库jQ.Plugin——针对webkit浏览器的插件支持下面主要讲解下框架的UI部分。1 基本页面布局上图即为jQ.mobi提供的基本布局，从视觉上分为三个部分头部、内容区域、底部，如下图。依照苹果App界面设计规则：header头部属于导航栏固定于整个应用的顶部，主要是“你在这里”的标志（也可承载按钮 阅读全文
posted @ 2013-05-13 01:43 zhepama 阅读(1055) 评论(0) 推荐(0) 编辑
HTML5开发手机项目-个人总结
摘要： 网页打开方式：<a href="#" target="_blank">链接</a>target的值：_self(相同窗口，浏览器默认)、_top(整页窗口)和_parent(父窗口)相同、_blank(在新建的窗口打开)<head><base target="_blank" ></head>表示页面中的所有链接都在新窗口打开<a href="" rel="external">madinc.co</a>//auto 阅读全文
posted @ 2013-05-13 01:39 zhepama 阅读(1008) 评论(0) 推荐(0) 编辑
2013年5月11日
RequireJS 2.0 API之配置项
摘要： 技术性细节§ 2RequireJS 把每一个依赖项当做一个script标签，使用 head.appendChild()来加载。RequireJS 会计算好依赖关系，按照正确的顺序依次加载所有依赖项。然后才调用模块的构造函数。在能同步加载模块的服务端JS中使用 RequireJS也很容易，只需要重定义require.load()。可以用构建系统来做这个，服务端的require.load 方法在build/jslib/requirePatch.js 中。未来，这个代码可能会被当作一个可选的模块放到 require/目录中。这样你就可以在基于主机环境来使用正确的加载模式。配置项§ 阅读全文
posted @ 2013-05-11 21:24 zhepama 阅读(502) 评论(0) 推荐(0) 编辑
RequireJS 2.0 API之用法
摘要： 用法§ 1加载 JavaScript 文件§ 1.1相比于传统的用<script>标签来加载js，RequireJS 采用了不同的方式。 它的目标是促进JS编程模块化。 虽然它也能优化我们JS程序的性能, 但是它的主要目的还是促进JS编程模块化。其中, 它鼓励使用module IDs来加载JS文件，而不是 用<script>标签直接引入JS文件的URLs的方式。RequireJS 基于baseUrl配置的地址来加载所有JS文件. baseUrl 默认被设置成通过data-main属性引入的脚本的相同目录. data-main 属性是require.j 阅读全文
posted @ 2013-05-11 21:19 zhepama 阅读(1331) 评论(0) 推荐(0) 编辑
2013年5月10日
使用ajax和history.pushState无刷新改变页面URL
摘要： 表现如果你使用chrome或者firefox等浏览器访问本博客、github.com、plus.google.com等网站时，细心的你会发现页面之间的点击是通过ajax异步请求的，同时页面的URL发生了了改变。并且能够很好的支持浏览器前进和后退。是什么有这么强大的功能呢？HTML5里引用了新的API，history.pushState和history.replaceState，就是通过这个接口做到无刷新改变页面URL的。与传统的AJAX的区别传统的ajax有如下的问题：1、可以无刷新改变页面内容，但无法改变页面URL2、为了更好的可访问性，内容发生改变后，通常改变URL的hash3、hash的 阅读全文
posted @ 2013-05-10 18:01 zhepama 阅读(446) 评论(0) 推荐(1) 编辑
2013年5月8日
Web前端/辅助工具
摘要： JavaScriptCodePen- a community of front end folks focused on inspiration and education.与jsfiddle类似，但更强大。支持GitHub登入，支持LESS、SCSS、SASS、CoffeeScript……jsfiddle功能强大。可用来分享代码片段，调试。JS Bin跟jsfiddle相似，但没那么多功能jsPerfJS测试用例，比较几个不同的写法的性能，很有用的工具受欢迎的测试：http://jsperf.com/popularOnline JavaScript Beautifier展开压缩代码，也支持h 阅读全文
posted @ 2013-05-08 12:19 zhepama 阅读(265) 评论(0) 推荐(0) 编辑