serendipity的技术小宅

教主的ES5演讲

http://v.youku.com/v_playlist/f15769239o1p4.html

http://v.youku.com/v_playlist/f15769239o1p5.html

http://v.youku.com/v_playlist/f15769239o1p6.html

Real-Time Web实时信息流推送

http://www.docin.com/p-467150624.html

阿里巴巴adc http://adc.alibabatech.org/ 内有大量ppt

http://www.slideshare.net/dexter_yy/learning-javascript-in-three-web-apps 三个应用精通js

2012 年 6 月 11 日 5 条评论 Short URL

第三方内容开发最佳实践笔记（1）引入js篇

http://v.youku.com/v_show/id_XNDM5NDczNTIw.html
http://pan.baidu.com/share/link?shareid=467244&uk=2466379732&fid=2008641727 ppt 23页

可能出现的问题：

doctype，css权重

引入过程

引入脚本
调用jsapi-调用第三方服务器端api-记录信息
上报信息

引入脚本：

同步 document.write

var protocol = ('https:'==document.location.protocol)?'https://':'http://';

document.write('<script src="protocal + 'www.a.com/b.js" charset = "utf-8"><\/script>')

var protocol = ('https:'==document.location.protocol)?'https://':'http://';

document.write('<script src="protocal + 'www.a.com/b.js" charset = "utf-8"><\/script>')

不要使用//www.a.com/b.js
file协议调试会出现问题
严格加上charset属性，无法保证目标页面的编码
把</script>转义为<\/script>

异步脚本

document.createElement('script')

1	document.createElement('script')

不需要规定type
不需要async 因为js创建的script必定异步

插入脚本

不能用document.body.appendChild(script);
head元素解析过程中不存在body元素
不要随便删除script元素，运行中删除会存在ie6终止情况，过多的script元素会导致内存占用过大
可以用setTimeout来处理。

引入的几种方式

可以在第一个script标签后插入(insertBefore)，不会导致崩溃且不需要判断。缺点是必须有一个script元素，且无法控制元素在哪，不容易定位
head第一个子元素 insertBefore head[0]。需要判断head是否存在
人为插入script元素，脚本加载时间比较滞后，无其他缺点

嵌入第三方内容

使用iframe元素

可以隔离样式，避免全局变量污染
缺点是ie下权限问题，交互比较麻烦。
iframe样式需要reset width height，自适应，margin，border等

使用<ins>元素

语义正确，透明元素不会影响内容，
ie下p内放置div会导致崩溃

第三方样式

使用style.cssText 添加important声明，优先级最高
需要重置 float，margin等，overflow，position，display，text-align等，iecss.com

一些其他问题

尽量使用insertBefore，避免ie的终止操作问题
广告要在最顶端 z-index 2147483647，dom中比较靠后的元素会在最上面，因此可以使用domcontentload或者onload插入。但内容的延迟比较长。
可以从当前script向上查找至body的直接子代，在其前面插入
兼容怪异模式，测试文档模式即可document.compatMode

document.write讨论

不可异步执行，导致html解析过程回溯

必须用的情况：

与执行位置相关
其他第三方脚本
iframe

ie下时序问题

内联+外部脚本，比如

document.write hello.js <script>hello()</script>

hello内有hello函数时，hello会报未定义

解决方法

利用try catch执行hello()，catch中加载hello.js.

2013 年 11 月 24 日没有评论 Short URL

让手机站点像原生应用的四大途径(翻译稿)

谢谢莫哥整理 http://www.w3cplus.com/performance/beginners-guide-to-perceived-performance.html本文由99根据Kyle Peatt的《A Beginner’s Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.mobify.com/blog/beginners-guide-to-perceived-performance/，以及作者相关信息

作者：Kyle Peatt

译者：99

这篇文章大约3000字。它涵盖了移动网站“感知性能”的很多方面，以及加速你网站的切实可行的解决方案。TL;博士:这不是说你网站有多快，而是用户认为有多快。——Kyle Peatt

在移动设备上构建设计良好的网站慢慢变得越来越容易。不论使用什么方法(响应式设计、自适应等),如果你了解你所做的,创建一个美观的网站不是问题。

但你的用户可能仍然要求网站有原生app的体验。完成这样的体验是一个挑战。

大多数时候,当人们谈论“app”或“原生”的感觉,他们讲的的不是一个网站的视觉体验。他们所讨论的，是用户界面如何对他们的行为进行反馈，以及这种反馈是怎样呈现的。

原生应用很“快”。原生应用的动画渲染的很平滑，按钮及时响应用户的点击，当app加载数据时也不会有什么问题。

让你的网站像原生应用一样，意味着你需要尽可能的提高你网站响应及交互的速度

提高性能已经是一个很热门且很有价值的话题了。直到最近，web端还在朝着笨重与缓慢发展。业内一直有个争论：实现一个高性能的webapp是不可能的。

这也是facebook转移到原生应用的原因，至少在他们的开发资源下，无法完成需要的速度与交互。

即使facebook这么认为，构建一个高性能的web网站也不是不可能的。但这不在我们的掌控中。我们只需要努力使这一切变为现实。从技术上讲，我们有能力是我们的网站变得更加快速，更加时髦，带来更完美的体验。

感知性能与实际性能

实际性能的提升很重要，但如果不让用户感知到提升效果，就不意味着这些提升可以到达用户。

今年早些时候,在西雅图Luke Wroblewski 曾提到过他的mobile app-polar。他解释说,他的团队在努力提高加载投票的速度。

polar是一款很简洁的投票应用——99

同时,他们引入了一个小图标,来向用户表示投票正在加载。而之后，用户感觉投票加载很慢的反馈立即铺天盖地的涌来,尽管事实上。加载快得多。Polar迅速发布了一个补丁来移除这个加载图标,之后，投票的快速加载给用户留下了深刻的印象。

这是一个表达感知性能重要性的很好的例子。当人们“觉得”一个网站不快，那这个网站再快也没用。加载图标只是让用户注意这个事实：数据在加载，用户只能等待，而不能抽离注意力。

作为设计师和开发人员,我们的目标不应该通过一些数字的增长，建立最快的网站,同样应该创造最快的网站体验。

因此最重要的是用户如何感知你网站的速度。任何实际性能的提升只是一份锦上添花。我认为,感知性能的提升，相比实际性能更重要。但这并不意味着你需要忽略实际性能的提升。

Ok，解释足够了，如何可以马上提升网站的感知性能？

下面的四个技巧，你可以立即开始尝试

给按钮添加触摸状态

最简单的提高站点感知性能的方法，是给网站增加”active”状态。

你看,任何时候一个访问者点击网站上的一个按钮,她必须等待300毫秒才知道到底发生了啥。

浏览器设置了这个超时时间，之后可以确保用户不会进行一些其他操作（双击）。因此等待1/3秒后，浏览器知晓了用户的动作，并执行最初的点击。当这个动作发生后，按钮被一个灰色的东东覆盖。

这是很糟糕的用户体验。Nielsen组织进行了一项研究，发现任何高于100ms的延迟都会让用户认为他们在等待。他们可能只想进行一次跳转。

然而很多的移动网站，包括我做的那些，没有考虑这个感知问题。设计师通常的设计是触摸时按钮或者链接保持原样。

为了让你的网站感觉更快,你需要让你的按钮立即响应用户的触摸,给用户一个明显的视觉指示–有些事情正在发生。

有一个很赞的属性用在网站上的按钮或链接;它是:active伪类。我们在桌面端一直使用这个伪类。

不幸的是,无论是iOS还是android，当按钮或者链接被点击时都忽略了这个属性,为了激活这个状态,你需要添加一个简单的事件绑定到页面的JavaScript中:

document.addEventListener("touchstart", function(){}, true)

1	document.addEventListener("touchstart", function(){}, true)

之后你可以用css定义active状态的样式，之后去掉点击时的高亮：

-webkit-tap-highlight-color: rgba(0,0,0,0);

1	-webkit-tap-highlight-color: rgba(0,0,0,0);

对按钮设置这两个属性,用户会立即感觉到界面响应了用户的操作，即使最终的响应速度是一样的。你只是让你的界面即时反馈了用户的行动,而不会让用户傻等300 ms再看看到底干了啥。

没有触摸状态（代码）

有触状态（代码）

不过如果你想立即响应用户的操作，你可以使用另一种方案。

使用一个fasttap或fastclick这样的JavaScript函数,可以完全去除点击按钮后300毫秒的延迟。配合active状态，可以让网站快的亮瞎你的眼睛。

有关于fasttap更多的信息，可以阅读google搜索到的文章，这有一个现成的案例，你可以从github上导出。

使用弹性滚动

你试过创建一个可滚动的容器，然后被默认的慢悠悠且不响应的滚动折磨的疯掉么？

现在可以解放了，android3+与ios5+版本增加了一个新的属性：overflow-scrolling这个属性可以激活平滑滚动，而且效果也不错。

没有滚动条(代码)

有滚动条(代码)

这个弹性滚动感觉起来像原生应用，因为这个本来就是原生的滚动。你只需要向可滚动区域增加一行代码。

-webkit-overflow-scrolling: touch;

1	-webkit-overflow-scrolling: touch;

不过这个属性有个问题。这个属性会使点击iPhone头部状态栏让网页回到顶部的功能失效。这个bug已经存在了一段时间了，貌似也没有在新的ios7版本中修复。

有一种方法可以解决这个问题，为容器创建一个class并应用属性overflow-scrolling: touch。当且仅当容器显示时，使用javascript添加class到容器上。

Android4上你不需要使用这个属性。每个可滚动的容器均包含弹性滚动。

在老版本的Android上你有两种选择。我比较喜欢的解决方案是利用Modernizr检测弹性滚动，之后来控制布局中容器的显示。此外,有一些JavaScript库你可以试试，比如overthorw与iscroll。

创建高效的动画

App与网站最明显的差别之一就是动画效果。

现在的设备上，应用程序已经能够充分利用硬件图形加速。而在web端,开发商者使用基于javascript的动画,在移动端的cpu上跑是很慢的。

但现在,随着移动浏览器的不断支持,你可以在项目中使用基于硬件加速的CSS3动画。

这样，我们就可以添加一些视觉效果，这些效果已经被我们喜欢的一些app应用了很多年了。

事实上也没那么快，若使动画贴近原生体验，你需要避免动画的缓慢及抖动，而这都是很难处理的。Steamclock Software的Allen Pike写过一篇很赞的文章，文章里描述了动画所带给用户的快乐，也讲到低性能的动画将对用户在app上的体验产生很大的影响

有趣的是,他写的这篇是原生应用开发相关的。这使得这篇文章相当有用，我们可以跟随下列任务来创建web上的动画。

在文章中,他提出一个所谓的“时间轴感”:

动画要跑在60fps下。这意味着每一帧需要花费16ms来跑完(1000ms/60=16)。这是要达到原生应用般平滑体验的最基本要求。60 fps是所有的iOS的内置动画运行的速度;这就是为什么滚动在iPhone上比Android设备上感觉更好 (虽然谷歌已经取得了很大的进步)。你应该尝试让所有直接关系到用户的交互动画跑在这个速度上。
所有东西都要在100ms内渲染完毕。这是个心理感觉慢的界限。所有低于100ms的延迟都会让用户有瞬时响应的感觉。
如果它绝对得超过100毫秒,1000毫秒内绝对应该回应。艾伦表明任何需要这么长时间完成的操作，都应该给用户一些反应表明正在发生。比如一个旋转的图标或一个进度条。但是,正如我们之前研究过的那个投票app的例子,把用户的注意力聚焦到那个小菊花上，实际上可能弊大于利。我将介绍一种不同的方法来处理这个问题。
所有超过两秒的响应时间都是耍流氓。

好吧，你知道这些了，所以你估计要把键盘当作帽子然后去转行了。啥时候我们创建网站需要关心动画的时间了？

别担心,有一些很赞的资源让这些东西更容易实现!

第一个是HTML5 Boilerplate中的Effeckt.css。他们的目标是实现一些跑在60fps下的常见的转换和动画。虽然这个库并没完全完成，里面很多的效果已经跑得很好了。我极力推荐你在项目中使用这个库。

另一个很好的库是 Topcoat,Adobe网络团队编写的代码,这是一个建立在性能考虑下的CSS组件库。这个库里塞了满满的优秀的组件,运行平稳。因为性能是他们的主要目标,每一个组件都已经被跟踪性能,这样你就可以清楚地看到组件的性能。

以上两个库是齐头并进的，而且topcoat也向effeckt.css贡献代码，这两个库跑的都很赞。

然后，我要讨论之前提到的，尽可能去掉加载提示的方案。

我倾向的方案是，当等待时间大于100ms，小于250ms时，使用加载图标弊大于利，因此可以隐藏掉。

例如,如果你使用Ajax请求内容,可以对内容的容器应用动画,例如收缩起来再扩展从而适应新的内容。这样的短动画会分散用户等待时的注意力,而不是让用户盯着一个不断旋转的小菊花–他们只是等待一个短动画完成，以至于甚至没有意识到新内容没出现。

当然, 需要很长时间才能完成的重复的动画是非常令人讨厌的,所以我们要适当的使用这些动画。对于大多数动画而言都是这个道理。

提供自然的手势体验

App超过web端体验的一点，是可以在触控设备上提供很自然的手势。

Mailbox与Clear可以作为手势应用很好的例子。这些app使用简单的手势来利用了移动设备最大的特色—可以直接触摸屏幕上的物体。

然而大多数网站只使用了触摸对象。设计师对手势唯恐避之不及,结果用户感觉在web端受到了歧视一般。

我们需要考虑直接为设备开发网站。如果一个用户的设备允许手势操作,为什么不使用它们?

当然,还有一个小问题:移动操作系统有个可恶的特性,移动浏览器会劫持手势作为己用。

例如, 像Facebook一样的应用程序通过触摸屏幕的左边和右边来打开导航。然而,在浏览器段,这种交互是不可用的。对于Chrome，这种操作用来切换选项卡。iOS 7新版本的移动Safari使用这种操作前进,与后退。

好吧。这些手势在我们的可控范围之外。那么你们应该使用什么手势呢？下面有四个例子。

手势1:左右划动

即使存在边缘问题,左右划动仍然是一个很好用的手势。你只需要小心触发时不要太靠近屏幕的边缘。

这个手势最好的应用是用于移动一组对象,比如幻灯片或列表标签。

手势2:下拉刷新

下拉刷新也是用户接触到的手势。这里有一些很赞的js库可以很容易的实现这个特性，我使用hook.js来实现。

手势3:长按

有一个很有用的属性: -webkit-touch-callout: none。这将禁用移动Safari浏览器中默认的长按效果。在android禁用这个效果则需要费点劲。

长按手势可以用于拿起一个项目(如重新排序列表中的项)或显示更多选项(如社会共享)。

手势4:双指缩放

每个人都懂双指缩放。很多人当看到web端的图片后，都会尝试缩放图片来看清细节。

这里也存在浏览器劫持用户手势的情况，不过不是很难办。

当你锁定或不锁定viewport的时候，你有时不希望用户在双指缩放时缩放整个页面。为了代替这个多指手势，你可以使用这个小而精的harmmer.js库。这个库拥有一系列的手势可以为你使用，你也可以建立自己的手势。

一个很好的双指缩放例子是imgur.com 的手机站。你可以滑动两下看看会发生什么。

只需要记住,如果你正在使用一个手势,确保对于用户而言，要么感觉自然，要么有意义。

结论

我希望有一天，我们不会需要区分本地和网络。路漫漫其修远兮，我们的工作是让用户觉得网站是围绕他们设计的，这一天很快就会到来。

我认为，最近关注性能的趋势固然很棒,但必须记住,我们的用户不是机器。

他们不关心你的网站有多少请求，屏幕重绘有多快。但他们确实关心一些影响他们体验的东西——他们的感知性能。

专注于确保你网站的外观和行为像一个尽可能快的网站。如果用户不注意的话是没有资格称作“最快的网站”的。

如果你对于改善感知性能有任何建议,请贴在评论里。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

关于玖玖

某创业团队前端负责人，关注javascript应用与数据可视化。个人博客、新浪微博和Github，欢迎与同学一起共勉。

2013 年 10 月 29 日没有评论 Short URL

使用nodejs与grunt进行自动化构建

安装必要的东西 :nodejs,grunt-cli (0.4版本后)

npm install -g grunt-cli

1	npm install -g grunt-cli

每次运行grunt时，它都会使用node的require()系统查找本地已安装好的grunt。正因为如此，你可以从你项目的任意子目录运行grunt。

如果找到本地已经安好装的Grunt，CLI就会加载这个本地安装好的Grunt库，然后应用你项目中的Gruntfile中的配置(这个文件用于配置项目中使用的任务，Grunt也正是根据这个文件中的配置来处理相应的任务)，并执行你所指定的所有任务。

现在我们以一个nodejs+前端来开发的项目为例

1.准备一个新的项目

package.json

package.json放在项目的根目录中，并且应该与项目的源代码一起被提交。在package.json所在目录中运行npm install将依据package.json文件中所列出的依赖来自动安装适当版本的依赖库。可以在项目的根目录下使用

npm init

npm init

命令自动创建一个基本的package.json文件。他会以命令行交互的形式来输入你需要的东西.

Gruntfile.js

之后我们需要安装grunt工具，这个与grunt-cli是不同的.在项目的根目录下使用

npm install grunt --save-dev

1	npm install grunt --save-dev

就会安装好了,而且可以把grunt添加到package.json 的依赖中.

之后如果项目需要别的包，比如redis,mysql,express等也可以这么搞定.

注意，准备好这两个文件后，提交项目也应该提交这两个文件。

2.修改Gruntfile.js

直接参考http://www.gruntjs.org/article/sample_gruntfile.html 写得非常全面了.举个例子

module.exports = function(grunt){

    // 项目配置
	//<% %>模板字符串可以引用任意的配置属性
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
		concat: {
			options: {
				//定义一个用于插入合并输出文件之间的字符
				separator: ';'
			},
			dist: {
				src: ['src/*.js'],
				dest: 'dest/<%= pkg.name %>.js'
			}
		},
		//对于每个任务,包含option跟旗下的子任务
		//banner 文件头生成一个注释
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: '<%= concat.dist.dest %>',
                dest: 'build/<%= pkg.name %>.min.js'
            }               
        },
		jshint: {
			//定义用于检测的文件
			files: ['gruntfile.js', 'src/*.js','dest/*.js','build/*.js'],
			//配置JSHint (参考文档:http://www.jshint.com/docs)
			options: {
				//你可以在这里重写jshint的默认配置选项
				globals: {
					jQuery: true,
					console: true,
					module: true
				}
			}
		},
		watch: {
		  scripts: {
			files: ['**/*.js'],
			tasks: ['jshint'],
			options: {
			  spawn: false,
			},
		  },
		},

    });

//利用这个监听文件改变。之后执行jshint任务
		grunt.event.on('watch', function(action, filepath) {
		  grunt.config('jshint.files', filepath);
		});

    // 加载插件,注意第一次要用 npm install grunt --save-dev来存储依赖
    grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-jshint');
	grunt.loadNpmTasks('grunt-contrib-concat');
	grunt.loadNpmTasks('grunt-contrib-watch');

//注册一个叫做test的任务，作用是jshint
	grunt.registerTask('test', ['jshint']);
    // 默认任务
	//如果运行grunt，对于concat来说将会遍历所有的目标, 并按任务指定的顺序处理每个目标
    grunt.registerTask('default', ['concat','uglify']);
}

module.exports = function(grunt){

// 项目配置

//<% %>模板字符串可以引用任意的配置属性

grunt.initConfig({

pkg: grunt.file.readJSON('package.json'),

concat: {

options: {

//定义一个用于插入合并输出文件之间的字符

separator: ';'

dist: {

src: ['src/*.js'],

dest: 'dest/<%= pkg.name %>.js'

}

//对于每个任务,包含option跟旗下的子任务

//banner 文件头生成一个注释

uglify: {

options: {

banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'

build: {

src: '<%= concat.dist.dest %>',

dest: 'build/<%= pkg.name %>.min.js'

}

jshint: {

//定义用于检测的文件

files: ['gruntfile.js', 'src/*.js','dest/*.js','build/*.js'],

//配置JSHint (参考文档:http://www.jshint.com/docs)

options: {

//你可以在这里重写jshint的默认配置选项

globals: {

jQuery: true,

console: true,

module: true

}

watch: {

scripts: {

files: ['**/*.js'],

tasks: ['jshint'],

options: {

spawn: false,

});

//利用这个监听文件改变。之后执行jshint任务

grunt.event.on('watch', function(action, filepath) {

grunt.config('jshint.files', filepath);

});

// 加载插件,注意第一次要用 npm install grunt --save-dev来存储依赖

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.loadNpmTasks('grunt-contrib-jshint');

grunt.loadNpmTasks('grunt-contrib-concat');

grunt.loadNpmTasks('grunt-contrib-watch');

//注册一个叫做test的任务，作用是jshint

grunt.registerTask('test', ['jshint']);

// 默认任务

//如果运行grunt，对于concat来说将会遍历所有的目标, 并按任务指定的顺序处理每个目标

grunt.registerTask('default', ['concat','uglify']);

}

2013 年 9 月 28 日没有评论 Short URL

数据驱动的webapp开发经验

我们的app其实是一个在线查看数据的小app，主要由模板+数据+控制器组成。

现在不使用那些复杂的数据绑定框架，暂时用zepto实现一下。

思路

单页面应用-页面内包含多个部分页,利用data-name命名,初始隐藏-给特定的data-name绑定show事件
给页面的跳转区域绑定触发show事件的函数
监听data-name页面的show事件,传入数据并渲染模板.(要考虑传入单一数据源,不传数据跟传入多组数据)
暂时不考虑数据加载时的缓冲(后期会加上。。)

示例的代码都考虑的比较简单。

页面结构

<article class="pure-g content reverse" data-role = "page" data-pageName= "我的勋章">

1	<article class="pure-g content reverse" data-role = "page" data-pageName= "我的勋章">

reverse表示隐藏，样式如下:

.reverse {
-webkit-transform: translate3d(-100%, 0, 0);
    opacity: 0;
}

.reverse {

-webkit-transform: translate3d(-100%, 0, 0);

opacity: 0;

}

另外再定义一个current类

.current {
-webkit-transform: translate3d(0,0, 0);
    opacity: 1;
    z-index: 1;
}

.current {

-webkit-transform: translate3d(0,0, 0);

opacity: 1;

z-index: 1;

}

在实际应用的时候可以使用transition让过渡变得更加平滑。

之后封装一个调用ajax数据源跟调用现成数据源的函数。$ajaxRequest是一个封装好的ajax请求封装

function renderFromAjaxData(pageName, option, callback) {
	var box = 'article[data-pageName=' + pageName + ']';
	$(box).bind('show', function () {
		$ajaxRequest(option, function (msg) {
			callback.call(this, msg, pageName);
		}, function (jqXHR, textStatus) {
			throw new Error(textStatus)
		})
	})
}

function renderFromData(pageName, dataSource, callback) {
    var box = 'article[data-pageName=' + pageName + ']';
    $(box).bind('show', function () {
        callback.call(this,window[dataSource],pageName)
    })
}

function renderFromAjaxData(pageName, option, callback) {

var box = 'article[data-pageName=' + pageName + ']';

$(box).bind('show', function () {

$ajaxRequest(option, function (msg) {

callback.call(this, msg, pageName);

}, function (jqXHR, textStatus) {

throw new Error(textStatus)

})

}

function renderFromData(pageName, dataSource, callback) {

var box = 'article[data-pageName=' + pageName + ']';

$(box).bind('show', function () {

callback.call(this,window[dataSource],pageName)

})

}

第二个函数我们用window.dataSource通过引用来引用数据源，当然这里可以使用任何的存储方式。只是做个示范.

然后我们封装跳转页面的函数

function jumpAndRender(pageName, override,callback) {
	var sel = 'article[data-pageName=' + pageName + ']';
	var override = override || true; //若传入false，比如后退时，不需要计入访问队列。
	var showedClassList = document.querySelector('article[data-pageName=' + showed + ']').classList;
	showedClassList.remove('current');
	showedClassList.add('reverse');
	var choosedClassList = document.querySelector(sel).classList;
	choosedClassList.remove('reverse');
	choosedClassList.add('current');
	$('#title').text(pageName);
	if (override) {
		var k = 0,
		l = prev.length;
		for (; k < l; k++) {
			if (prev[k] == showed) {
				prev.splice(k, 1)
				break
			};
		}
		prev.push(showed); //维护一个访问记录队列，访问时计入队列。若队列中存在则不进入队列
	}
	showed = pageName;
    setTimeout(function(){
        callback&&callback.call(this);
    },200)

	$(sel).trigger('show')
}

function jumpAndRender(pageName, override,callback) {

var sel = 'article[data-pageName=' + pageName + ']';

var override = override || true; //若传入false，比如后退时，不需要计入访问队列。

var showedClassList = document.querySelector('article[data-pageName=' + showed + ']').classList;

showedClassList.remove('current');

showedClassList.add('reverse');

var choosedClassList = document.querySelector(sel).classList;

choosedClassList.remove('reverse');

choosedClassList.add('current');

$('#title').text(pageName);

if (override) {

var k = 0,

l = prev.length;

for (; k < l; k++) {

if (prev[k] == showed) {

prev.splice(k, 1)

break

};

}

prev.push(showed); //维护一个访问记录队列，访问时计入队列。若队列中存在则不进入队列

}

showed = pageName;

setTimeout(function(){

callback&&callback.call(this);

},200)

$(sel).trigger('show')

}

这个函数的作用是触发页面的跳转。为了让我们可以后退，使用了prev这个数组来存储切换的页面。

最后我们也要绑定触发跳转的部分，比如a连接，按钮之类

$doc.delegate('.jumper',activate, function () {
	var title = $(this).attr('data-target');
	jumpAndRender(title);
	return false
})

$doc.delegate('.jumper',activate, function () {

var title = $(this).attr('data-target');

jumpAndRender(title);

return false

})

activate表示onclick与ontap的兼容写法. 这样只需要简单的定义一个标签就可以跳转了

 <div id="changeInfo" class="icon9 jumper" data-target="详细资料"></div>

1	<div id="changeInfo" class="icon9 jumper" data-target="详细资料"></div>

点击后,触发跳转,跳转到详细资料类.之后我们就可以注册个页面了

renderFromData('详细信息','wholeData', function (data, pageName) {
    var box = 'article[data-pageName=' + pageName + ']';
    var tpl = document.querySelector(box).innerHTML;
    var makeData = {
        list:data[6]
    }
    var html = juicer(tpl,makeData);
    document.querySelector(box).innerHTML = html;
})

renderFromData('详细信息','wholeData', function (data, pageName) {

var box = 'article[data-pageName=' + pageName + ']';

var tpl = document.querySelector(box).innerHTML;

var makeData = {

list:data[6]

}

var html = juicer(tpl,makeData);

document.querySelector(box).innerHTML = html;

})

juicer是我使用的模板引擎。这个例子里模板我直接写到页面里了。window.wholeData存储的是数据。

这样就完成了点击div-触发详细资料的跳转-监听到详细资料显示,去wholeData取数据这个过程了。

在取数据的时候，经常遇到一个场景就是异步读取数据，通常有两种：

同时发起n个请求，去请求n个api，等到所有api返回后，对数据进行加工
依次发起n个请求，请求是按照顺序执行的。

我用async这个异步操作库来解决这个问题 https://github.com/caolan/async

var dataRequestSource = [getUserInfo,getMetalList,getAllOnlineUser,getPoints,getUserMetal,getAlluser,getMetalStatus,getUserOnlineTime,getUserMile]

async.parallel(dataRequestSource,//异步并发请求
// optional callback
    function(err, results){
        wholeData =results;
        console.log('getData!!!'+wholeData)
        jumpAndRender('道客数读');
    });

var dataRequestSource = [getUserInfo,getMetalList,getAllOnlineUser,getPoints,getUserMetal,getAlluser,getMetalStatus,getUserOnlineTime,getUserMile]

async.parallel(dataRequestSource,//异步并发请求

// optional callback

function(err, results){

wholeData =results;

console.log('getData!!!'+wholeData)

jumpAndRender('道客数读');

});

dataRequestSource是我要进行异步并发请求的n个api…我只需要使用async.parallel这个api就可以搞定了，方便至极。。。

对于第二种请求可以这么写

async.series(dataRequestSource,异步串行请求
// optional callback
function(err, results){
});

async.series(dataRequestSource,异步串行请求

// optional callback

function(err, results){

});

更多的api可以参考官网。

2013 年 9 月 11 日没有评论 Short URL

navigator.online属性检测用户是否在线

以前我写webapp时都是通过ajax的超市时间来测试用户是否在线的。

if (navigator.onLine) 
{ //在线} 
else { //离线状态}

if (navigator.onLine)

{ //在线}

else { //离线状态}

这个html5的 navigator的新特性可以搞定.navigator.onLine属性，值为true表示设备能上网，值为false表示设备离线。

同时我们还可以监听用户在线离线的动作

var el = document.body;
if (el.addEventListener) {
   window.addEventListener("online", function () {
     alert("online");}, true);
   window.addEventListener("offline", function () {
     alert("offline");}, true);
}
else if (el.attachEvent) {
   window.attachEvent("ononline", function () {
     alert("online");});
   window.attachEvent("onoffline", function () {
     alert("offline");});
}
else {
   window.ononline = function () {
     alert("online");};
   window.onoffline = function () {
     alert("offline");};
}

var el = document.body;

if (el.addEventListener) {

window.addEventListener("online", function () {

alert("online");}, true);

window.addEventListener("offline", function () {

alert("offline");}, true);

}

else if (el.attachEvent) {

window.attachEvent("ononline", function () {

alert("online");});

window.attachEvent("onoffline", function () {

alert("offline");});

}

else {

window.ononline = function () {

alert("online");};

window.onoffline = function () {

alert("offline");};

}

注意，检测ononline事件,要绑定在window对象上

截止到今天，最新的浏览器都能正确使用这个属性。

目前除了IE（IE只支持navigator.onLine属性）外，其他最新浏览器都支持这个事件。

http://www.w3.org/TR/2008/WD-html5-20080610/diff/offline.html#browser0

参考 http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/

github也有人封装了比较完备的方法 https://github.com/PixelsCommander/OnlineJS

参考 http://help.dottoro.com/ljnasgpu.php

2013 年 9 月 9 日没有评论 Short URL

增强对象的实现(字符串与数组)

我目前在写一个库 https://github.com/jtyjty99999/astral 目前堆砌了非常多的函数,也是我这一年多js的积累

但是我很迷茫。。这个库应该干什么呢。。

经过我一晚上的思考。。终于确立了一个方向-写一个工具库！用户可以加载工具库，像普通的函数库那样使用，同样也可以增强原生的对象！

比如我的工具库里提供了以下方法

E.trim : function (str) {
			return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
		}

E.trim : function (str) {

return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');

}

那么我可以直接使用

E.trim(‘ bbb ‘),也可以这样使用

E(‘ bbb ‘).trim();

这样有什么好处呢,他不需要去污染原型链,就可以使用我增强对象的方法，同时也可以使用本来就在原型上的方法，这个原型是由我决定的.

后来跟sunnylost一商量，发现underscore提供了chain方法，就可以增强原生对象，那太好了~直接参考

那么实现起来遇到了很多的问题。

首先是传参问题,注意第二个trim是没有参数的，而原函数接收一个参数。所以我们要对增强的对象做一个处理，使其存储需要的参数。

	var bigObj = function (obj) {
		return new wraped(obj)
	}

	bigObj.trim = function (str) {
			return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
		};

	function wraped(str) {
		this._s = str;
	}

var bigObj = function (obj) {

return new wraped(obj)

}

bigObj.trim = function (str) {

return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');

};

function wraped(str) {

this._s = str;

}

我们利用_s来存储要传的参数str

下面继续，我们给warped对象,增加bigObj的方法trim.

注意我们让warped对象继承string对象，这样就拥有了string对象的方法，但是注意使用时会调用对象的toString方法。
因此为了让toString方法返回正确的值，我们需要改写wraped的toString方法。

		wraped.prototype = new String; //让wrapper继承String
		wraped.prototype.toString = function () {//改写wrapper的toString方法,因为String上面的方法在被obj调用时,会调用toString方法,我们人为让toString方法返回需要的值
			return this._s
		}
			var name = 'test';//方法名
			wraped.prototype[name] = function () {//添加wrapper的原型
				var arg = Array.prototype.slice.call(arguments, 0);//在调用这个方法时,拿到所有参数
				arg.unshift(this._s);//给这个参数加上_s 来传参,这样就可以避免方法缺少参数了
				return bigObj[name].apply(bigObj, arg)//把bigObj上的这个方法扔过来并传参
			}

wraped.prototype = new String; //让wrapper继承String

wraped.prototype.toString = function () {//改写wrapper的toString方法,因为String上面的方法在被obj调用时,会调用toString方法,我们人为让toString方法返回需要的值

return this._s

}

var name = 'test';//方法名

wraped.prototype[name] = function () {//添加wrapper的原型

var arg = Array.prototype.slice.call(arguments, 0);//在调用这个方法时,拿到所有参数

arg.unshift(this._s);//给这个参数加上_s 来传参,这样就可以避免方法缺少参数了

return bigObj[name].apply(bigObj, arg)//把bigObj上的这个方法扔过来并传参

}

因为首先bigObj的方法不确定,其次bigObj的方法不一定要全部增强到wraped上，我封装了一个方法来处理这个

    	function addOn(wrapper, fnArray, fromObj, proto) {
    		wrapper.prototype = new proto;
			wrapper.prototype.toString = function () {
				return this._s
			}
    		var i = 0,
    		l = fnArray.length;

    		for (; i < l; i++) {

    			(function (j) {

    				var name = fnArray[j];
    				var fn = fromObj[name];
    				wrapper.prototype[name] = function () {
    					var arg = Array.prototype.slice.call(arguments, 0);
    					arg.unshift(this._s);
    					return fn.apply(fromObj, arg);
    				}

    			}
    				(i))

    		}
    	}

function addOn(wrapper, fnArray, fromObj, proto) {

wrapper.prototype = new proto;

wrapper.prototype.toString = function () {

return this._s

}

var i = 0,

l = fnArray.length;

for (; i < l; i++) {

(function (j) {

var name = fnArray[j];

var fn = fromObj[name];

wrapper.prototype[name] = function () {

var arg = Array.prototype.slice.call(arguments, 0);

arg.unshift(this._s);

return fn.apply(fromObj, arg);

}

(i))

}

demo见 http://jsbin.com/Eriyoxu/2/edit 这样就解决了文初的问题,也终于给我的库定位了一下..

那么注意Array不能像以上那么包装了。因为直接继承array后,array上的方法使用后会返回诡异的东西。。因此我们只能把需要的方法列上来，再增加了。

	var bigObj = function (obj) {
		return new wraped(obj)
	}

	bigObj.max = function (array) {//我们的自定义方法
		return Math.max.apply(null, array)
	};

	var arrayProto = Array.prototype//Array原型
	function wraped(arr) {
		this._s = arr;//仍然是存储,现在存的是数组了
	}

	function addOn(wrapper, fnArray, fromObj) {//开始绑定,注意不需要继承Array了
		var i = 0,
		l = fnArray.length;

		for (; i < l; i++) {

			(function (j) {//这个部分跟以前类似，绑定我们自定义增强对象上的方法

				var name = fnArray[j];
				var fn = fromObj[name];
				wrapper.prototype[name] = function () {
					var arg = Array.prototype.slice.call(arguments, 0);
					arg.unshift(this._s);
					return fn.apply(fromObj, arg);
				}

			}
				(i))

		}
		var addOnArrayProtoFn = ['pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift','concat','join']//列出我们需要绑定的方法

		var j = 0,
		k = addOnArrayProtoFn.length;
		for (; j < k; j++) {

			(function (i) {//遍历方法，从Array.prototype上取得方法，之后把存储的arr传入,我们需要的是执行结果,因此返回之

				var name = addOnArrayProtoFn[i];
				var protoFn = arrayProto[addOnArrayProtoFn[i]];
				wrapper.prototype[name] = function () {
					var ret = protoFn.apply(this._s, arguments);
					return ret
				}

			})(j)

		}

	}

	addOn(wraped, ['max'], bigObj)  //绑定
	alert(bigObj([1, 2, 3, 4]).max())//增强方法
	alert(bigObj([1, 2, 3, 4]).pop())//原生方法

var bigObj = function (obj) {

return new wraped(obj)

}

bigObj.max = function (array) {//我们的自定义方法

return Math.max.apply(null, array)

};

var arrayProto = Array.prototype//Array原型

function wraped(arr) {

this._s = arr;//仍然是存储,现在存的是数组了

}

function addOn(wrapper, fnArray, fromObj) {//开始绑定,注意不需要继承Array了

var i = 0,

l = fnArray.length;

for (; i < l; i++) {

(function (j) {//这个部分跟以前类似，绑定我们自定义增强对象上的方法

var name = fnArray[j];

var fn = fromObj[name];

wrapper.prototype[name] = function () {

var arg = Array.prototype.slice.call(arguments, 0);

arg.unshift(this._s);

return fn.apply(fromObj, arg);

}

(i))

}

var addOnArrayProtoFn = ['pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift','concat','join']//列出我们需要绑定的方法

var j = 0,

k = addOnArrayProtoFn.length;

for (; j < k; j++) {

(function (i) {//遍历方法，从Array.prototype上取得方法，之后把存储的arr传入,我们需要的是执行结果,因此返回之

var name = addOnArrayProtoFn[i];

var protoFn = arrayProto[addOnArrayProtoFn[i]];

wrapper.prototype[name] = function () {

var ret = protoFn.apply(this._s, arguments);

return ret

}

})(j)

}

addOn(wraped, ['max'], bigObj) //绑定

alert(bigObj([1, 2, 3, 4]).max())//增强方法

alert(bigObj([1, 2, 3, 4]).pop())//原生方法

增强的array方法可以参见 http://jsbin.com/eBafEhe/24/edit

2013 年 9 月 5 日没有评论 Short URL

mobileapp与后端调试处理跨域问题的记录

手机浏览器也是浏览器，在ajax调用外部api的时候也存在跨域问题。当然利用phonegap打包后，由于协议不一样就不存在跨域问题了。但页面通常是需要跟后端进行调试的。一般会报类似

XMLHttpRequest cannot load XXX Origin null is not allowed by Access-Control-Allow-Origin.

1	XMLHttpRequest cannot load XXX Origin null is not allowed by Access-Control-Allow-Origin.

那么可以让服务器端先设置以下的http头，

"Access-Control-Allow-Origin", "*"

1	"Access-Control-Allow-Origin", "*"

并在phonegap的白名单中加上相应的网址,参考http://docs.phonegap.com/en/3.0.0/guide_appdev_whitelist_index.md.html#Domain%20Whitelist%20Guide

注意，这样操作会产生两个http请求，options跟post。后端要对这两个请求进行相应的处理

OPTIONS请求方法的主要用途有两个：

1、获取服务器支持的HTTP请求方法；也是黑客经常使用的方法。

2、用来检查服务器的性能。例如：AJAX进行跨域请求时的预检，需要向另外一个域名的资源发送一个HTTP OPTIONS请求头，用以判断实际发送的请求是否安全。

(经过测试,nginx+lua,php的api没问题，C的server端会有问题)。

之后，当你要设置content-type时(比如服务器端要求你发送json)会报类似下面的错误

XMLHttpRequest cannot load http://. Request header field Content-Type is not allowed by Access-Control-Allow-Headers."

1	XMLHttpRequest cannot load http://. Request header field Content-Type is not allowed by Access-Control-Allow-Headers."

可以让服务器端设置如下的返回头

Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"

1	Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"

还有一个问题，因为我做mobileapp，暂时没有遇到，但是还需要提一句，IE8以上的版本跨域提交需要使用XDomainRequest 对象用法跟xhr对象基本没啥区别，注意一下就可以。参考 http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx

2013 年 9 月 2 日没有评论 Short URL

html5利用formdata,file,xhr2实现文件上传

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

var oMyForm = new FormData();

oMyForm.append("username", "Groucho");
oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"

// fileInputElement中已经包含了用户所选择的文件
oMyForm.append("userfile", fileInputElement.files[0]);

var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; // Blob对象包含的文件内容
var oBlob = new Blob([oFileBody], { type: "text/xml"});

oMyForm.append("webmasterfile", oBlob);

var oReq = new XMLHttpRequest();
oReq.open("POST", "http://foo.com/submitform.php");
oReq.send(oMyForm);

var oMyForm = new FormData();

oMyForm.append("username", "Groucho");

oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"

// fileInputElement中已经包含了用户所选择的文件

oMyForm.append("userfile", fileInputElement.files[0]);

var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; // Blob对象包含的文件内容

var oBlob = new Blob([oFileBody], { type: "text/xml"});

oMyForm.append("webmasterfile", oBlob);

var oReq = new XMLHttpRequest();

oReq.open("POST", "http://foo.com/submitform.php");

oReq.send(oMyForm);

字段”userfile”和”webmasterfile”的值都包含了一个文件.通过 FormData.append()方法赋给字段”accountnum”的数字被自动转换为字符(字段的值可以是一个Blob对象,一个File对象,或者一个字符串,剩下其他类型的值都会被自动转换成字符串).

我们配合xhr对象与拖拽上传，以及file api来写一个多文件上传的实例

<html>
<head>
    <title>dnd binary upload</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function sendFile(file) {
            var uri = "/index.php";
            var xhr = new XMLHttpRequest();
            var fd = new FormData();

            xhr.open("POST", uri, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // Handle response.
                    alert(xhr.responseText); // handle response.
                }
            };
            fd.append('myFile', file);
            // Initiate a multipart/form-data upload
            xhr.send(fd);
        }

        window.onload = function() {
            var dropzone = document.getElementById("dropzone");
            dropzone.ondragover = dropzone.ondragenter = function(event) {
                event.stopPropagation();
                event.preventDefault();
            }

            dropzone.ondrop = function(event) {
                event.stopPropagation();
                event.preventDefault();

                var filesArray = event.dataTransfer.files;
                for (var i=0; i<filesArray.length; i++) {
                    sendFile(filesArray[i]);
                }
            }
    </script>
</head>
<body>
    <div>
        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
    </div>
</body>
</html>

<html>

<head>

<title>dnd binary upload</title>

function sendFile(file) {

var uri = "/index.php";

var xhr = new XMLHttpRequest();

var fd = new FormData();

xhr.open("POST", uri, true);

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

// Handle response.

alert(xhr.responseText); // handle response.

}

};

fd.append('myFile', file);

// Initiate a multipart/form-data upload

xhr.send(fd);

}

window.onload = function() {

var dropzone = document.getElementById("dropzone");

dropzone.ondragover = dropzone.ondragenter = function(event) {

event.stopPropagation();

event.preventDefault();

}

dropzone.ondrop = function(event) {

event.stopPropagation();

event.preventDefault();

var filesArray = event.dataTransfer.files;

for (var i=0; i<filesArray.length; i++) {

sendFile(filesArray[i]);

}

</script>

</head>

<body>

<div>

</div>

</body>

</html>

我们也可以利用二进制上传文件

function FileUpload(img, file) {
	var reader = new FileReader();
	this.ctrl = createThrobber(img);
	var xhr = new XMLHttpRequest();
	this.xhr = xhr;
	var self = this;
	this.xhr.upload.addEventListener("progress", function (e) {
		if (e.lengthComputable) {
			var percentage = Math.round((e.loaded * 100) / e.total);
			self.ctrl.update(percentage);
		}
	}, false);
	xhr.upload.addEventListener("load", function (e) {
		self.ctrl.update(100);
		var canvas = self.ctrl.ctx.canvas;
		canvas.parentNode.removeChild(canvas);
	}, false);
	xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
	xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
	reader.onload = function (evt) {
		xhr.sendAsBinary(evt.target.result);
	};
	reader.readAsBinaryString(file);
}

function FileUpload(img, file) {

var reader = new FileReader();

this.ctrl = createThrobber(img);

var xhr = new XMLHttpRequest();

this.xhr = xhr;

var self = this;

this.xhr.upload.addEventListener("progress", function (e) {

if (e.lengthComputable) {

var percentage = Math.round((e.loaded * 100) / e.total);

self.ctrl.update(percentage);

}

}, false);

xhr.upload.addEventListener("load", function (e) {

self.ctrl.update(100);

var canvas = self.ctrl.ctx.canvas;

canvas.parentNode.removeChild(canvas);

}, false);

xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");

xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');

reader.onload = function (evt) {

xhr.sendAsBinary(evt.target.result);

};

reader.readAsBinaryString(file);

}

参考

https://developer.mozilla.org/zh-CN/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects

https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications

https://developer.mozilla.org/zh-CN/docs/DOM/File

https://developer.mozilla.org/zh-CN/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest

2013 年 8 月 29 日没有评论 Short URL

mac下配置phonegap(cordova)及一些开发坑

phonegap都出3.0了。。注意配置跟以前大不相同了，支持的设备特性需要再config中配置。

使用前先仔细阅读api

http://docs.phonegap.com/en/edge/guide_platforms_index.md.html 这里有各种平台的配法，不要去看官网的实例。

首先机器需要有nodejs环境。

之后在命令行执行

sudo npm install -g cordova

1	sudo npm install -g cordova

这里确实很恶心。。。官方自己首页上的demo都跑不通。。不要安装phonegap

之后使用命令

 cordova create hello  helloapp helloworld

1	cordova create hello helloapp helloworld

参数是干嘛的可以参考api。

要在xcode里安装ios5 6的模拟器。除此之外要安装一个叫做ios－sim的东东

先安装brew（homebrew）一般mac机器都有吧。。没有的话

ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

1	ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

之后

brew install ios－sim

1	brew install ios－sim

之后我们三步走即可。进入项目目录

cordova platform add ios

1	cordova platform add ios

cordova build

1	cordova build

cordova emulate ios

1	cordova emulate ios

就可以预览了。

这时候xcode里面也可以预览iosapp。

我的app采用的是静态页面加调用api渲染数据的方式，因此不可避免的会遇到跨域问题。解决方案在此：

http://stackoverflow.com/questions/10143093/origin-is-not-allowed-by-access-control-allow-origin

还有对iphone4与iphone5的media query

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */

    #loginBox{
        height: 480px;
    }
    .footer {
        top:382px;
    }
}
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */

    #loginBox{
        height: 568px;
    }
    .footer {
        top:470px;
    }
}

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */

#loginBox{

height: 480px;

}

.footer {

top:382px;

}

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */

#loginBox{

height: 568px;

}

.footer {

top:470px;

}

2013 年 8 月 3 日没有评论 Short URL

xpath与nodejs解析xml

工作需要研究了下nodejs解析xml，记录一下

测试xpath的工具

http://www.freeformatter.com/xpath-tester.html#ad-output

http://www.xpathtester.com/test

教程

http://www.w3school.com.cn/xpath/xpath_syntax.asp

解析xml可以安装这个包 https://github.com/yaronn/xpath.js 支持xpath。使用方法大致如下：

首先安装这个包

npm install xpath.js

1	npm install xpath.js

再安装下面这个

npm install xmldom

1	npm install xmldom

然后就可以使用牛逼的xpath查找xml了

    var select = require('xpath.js')
      , dom = require('xmldom').DOMParser

    var xml = "<book><title>Harry Potter</title></book>"
    var doc = new dom().parseFromString(xml)    
    var nodes = select(doc, "//title")
    console.log(nodes[0].localName + ": " + nodes[0].firstChild.data)
    console.log("node: " + nodes[0].toString())

var select = require('xpath.js')

, dom = require('xmldom').DOMParser

var xml = "<book><title>Harry Potter</title></book>"

var doc = new dom().parseFromString(xml)

var nodes = select(doc, "//title")

console.log(nodes[0].localName + ": " + nodes[0].firstChild.data)

console.log("node: " + nodes[0].toString())

xpath基本用法通过几个实例即可掌握

这里有一段xml

<root xmlns:foo="http://www.foo.org/" xmlns:bar="http://www.bar.org">
	<actors>
		<actor id="1">Christian Bale</actor>
		<actor id="2">Liam Neeson</actor>
		<actor id="3">Michael Caine</actor>
	</actors>
	<foo:singers>
		<foo:singer id="4">Tom Waits</foo:singer>
		<foo:singer id="5">B.B. King</foo:singer>
		<foo:singer id="6">Ray Charles</foo:singer>
	</foo:singers>
</root>

<actor id="1">Christian Bale</actor>

<actor id="2">Liam Neeson</actor>

<actor id="3">Michael Caine</actor>

</actors>

<foo:singers>

<foo:singer id="4">Tom Waits</foo:singer>

<foo:singer id="5">B.B. King</foo:singer>

<foo:singer id="6">Ray Charles</foo:singer>

</foo:singers>

</root>

1. 选择文档节点

2. 选择root节点

/root

3. 选择所有是actors节点的子节点的actor节点

/root/actors/actor

4. 选择所有singer节点，不管他们在文档的什么地方

//foo:singer

5. 选择所有singer元素的id节点，不管他们在文档的什么地方

//foo:singer/@id

6. 选择第一个actor节点的文本

//actor[1]/text()

7. 选择最后一个actor节点

//actor[last()]

8. 选择第一个和第二个actor节点

//actor[position() < 3]

9. 选择所有带有id属性的actor节点

//actor[@id]

10. 选择所有id属性为3的actor节点

//actor[@id='3']

11. 选择所有id属性小于3的actor节点

//actor[@id<=3]

12. 选择所有singers节点的子节点

/root/foo:singers/*

13. 选择文档中所有节点

//*

14. 选择所有actor节点与singer节点

//actor|//foo:singer

15. 得到文档中第一个节点的节点名

name(//*[1])

16.得到第一个actor节点的id属性的数量

number(//actor[1]/@id)

17. 得到第一个actor节点的id属性的字符串表示

string(//actor[1]/@id)

18. 得到第一个actor节点内文本的长度

string-length(//actor[1]/text())

19. Select the local name of the first ‘singer’ element, i.e. without the namespace.

local-name(//foo:singer[1])

20. 计算singer节点的数量

count(//foo:singer)

21. Select the sum of the ‘id’ attributes of the ‘singer’ elements.

sum(//foo:singer/@id)

2013 年 7 月 20 日没有评论 Short URL

近期文章

近期评论

文章归档

分类目录

标签

功能

链接表

感知性能与实际性能

给按钮添加触摸状态

使用弹性滚动

创建高效的动画

提供自然的手势体验

手势1:左右划动

手势2:下拉刷新

手势3:长按

手势4:双指缩放

结论

关于玖玖

package.json

Gruntfile.js

然后就可以使用牛逼的xpath查找xml了

1. 选择文档节点

2. 选择root节点

3. 选择所有是actors节点的子节点的actor节点

4. 选择所有singer节点，不管他们在文档的什么地方

5. 选择所有singer元素的id节点，不管他们在文档的什么地方

6. 选择第一个actor节点的文本

7. 选择最后一个actor节点

8. 选择第一个和第二个actor节点

9. 选择所有带有id属性的actor节点

10. 选择所有id属性为3的actor节点

11. 选择所有id属性小于3的actor节点

12. 选择所有singers节点的子节点

13. 选择文档中所有节点

14. 选择所有actor节点与singer节点

15. 得到文档中第一个节点的节点名

16.得到第一个actor节点的id属性的数量

17. 得到第一个actor节点的id属性的字符串表示

18. 得到第一个actor节点内文本的长度

19. Select the local name of the first ‘singer’ element, i.e. without the namespace.

20. 计算singer节点的数量

21. Select the sum of the ‘id’ attributes of the ‘singer’ elements.