在搞Painter时有涉及到HTML5离线缓存，最近想把其应用到其他项目中，发现自己已经忘得差不多了，所以写下本文，给自己做个记录。本文将介绍离线缓存的方方面面，并在最后会介绍一下关于自动化的问题。 - 起源 - 什么是Cache Manifest - Manifest的特点 - 浏览器支持情况 - 如何使用 - Manifest文件 - 如何更新缓存 - 注意事项 - 自动化工具 - 参考资料起源html5之前的网页，都是无连接，必须联网才能访问，这其实也是web的特色，这其实对于PC是时代问题并不大，但到了移动互联网时代，设备终端位置不再固定，依赖无线信号，网络的可靠性变得降低，比如坐在火车上，过了一个隧道（15分钟），便无法访问网站，这对于web的伤害是很大的，比如对于 《ecmascript合集》这样的为阅读而生的页面。html5便引入了cache manifest 文件。那么什么是cache manifest呢，接下来会讲到。什么是Cache Manifest首先manifest是一个后缀名为minifest的文件，在文件中定义那些需要缓存的文件，支持manifest的浏览器，会将按照manifest文件的规则，像文件保存在本地，从而在没有网络链接的情况下，也能访问页面。当我们第一次正确配置app cache后，当我们再次访问该应用时，浏览器会首先检查manifest文件 ...继续阅读 (29)

在搞Painter时有涉及到HTML5离线缓存，最近想把其应用到其他项目中，发现自己已经忘得差不多了，所以写下本文，给自己做个记录。本文将介绍离线缓存的方方面面，并在最后会介绍一下关于自动化的问题。 - 起源 - 什么是Cache Manifest - Manifest的特点 - 浏览器支持情况 - 如何使用 - Manifest文件 - 如何更新缓存 - 注意事项 - 自动化工具 - 参考资料##起源html5之前的网页，都是无连接，必须联网才能访问，这其实也是web的特色，这其实对于PC是时代问题并不大，但到了移动互联网时代，设备终端位置不再固定，依赖无线信号，网络的可靠性变得降低，比如坐在火车上，过了一个隧道（15分钟），便无法访问网站，这对于web的伤害是很大的，比如对于 《ecmascript合集》这样的为阅读而生的页面。html5便引入了cache manifest 文件。那么什么是cache manifest呢，接下来会讲到。##什么是Cache Manifest首先manifest是一个后缀名为minifest的文件，在文件中定义那些需要缓存的文件，支持manifest的浏览器，会将按照manifest文件的规则，像文件保存在本地，从而在没有网络链接的情况下，也能访问页面。当我们第一次正确配置app cache后，当我们再次访问该应用时，浏览器会首先检查manife ...继续阅读 (20)

今天遇到了一个奇怪的问题，两次ajax发送的同一个变量值，后端接收到的编码不一样……，一时间，我竟然发现自己对于编码的问题不能说的很清楚。lisp主张代码即数据，其实我们写的代码也是数据（信息），数据的存储和传播都要就要涉及到编码的问题。就像我们向对方传递信息之前，先要问对方：can you spreak in english。小贴士：嗨，你知道吗！windows的换行符是 \r\l，linux的是 \l，mac的是 \r，这是有意还是故意的呢……本文会试图说清web开发过程中，如下方面的编码问题：编码简史文件编码HTML编码CSS编码JavaScript编码ajax编码编码简史如果想把编码问题说清楚，那恐怕你看到这里就会把页面关掉了，所以这里仅简要介绍下国内web开发中常用的一些编码。如果你了解或不感兴趣，可以直接跳过本部分。ASCII/EASCII（ISO/IEC 646）GB2312/GBK/GB18030Unicode/UTF8/UTF16进入数字时代，整个世界都要数字化，最先数字化的就是文字，老外的自我中心论，以为世上仅有abcd…… 26个字母，便发明了ASCII（美国标准信息交换码）。ASCII使用一个字节的低7位的不同组合来表示字母数字和一些其他字符，2^7 = 1287位二进制共可以代表128个字母。后来为了表示更多的字符便将ASCII扩展为8位，称为EASCII ...继续阅读 (28)

今天遇到了一个奇怪的问题，两次ajax发送的同一个变量值，后端接收到的编码不一样……，一时间，我竟然发现自己对于编码的问题不能说的很清楚。lisp主张代码即数据，其实我们写的代码也是数据（信息），数据的存储和传播都要就要涉及到编码的问题。就像我们向对方传递信息之前，先要问对方：can you spreak in english。小贴士：嗨，你知道吗！windows的换行符是 \r\l，linux的是 \l，mac的是 \r，这是有意还是故意的呢……本文会试图说清web开发过程中，如下方面的编码问题：编码简史文件编码HTML编码CSS编码JavaScript编码ajax编码##编码简史如果想把编码问题说清楚，那恐怕你看到这里就会把页面关掉了，所以这里仅简要介绍下国内web开发中常用的一些编码。如果你了解或不感兴趣，可以直接跳过本部分。ASCII/EASCII（ISO/IEC 646）GB2312/GBK/GB18030Unicode/UTF8/UTF16进入数字时代，整个世界都要数字化，最先数字化的就是文字，老外的自我中心论，以为世上仅有abcd…… 26个字母，便发明了ASCII（美国标准信息交换码）。ASCII使用一个字节的低7位的不同组合来表示字母数字和一些其他字符，2^7 = 1287位二进制共可以代表128个字母。后来为了表示更多的字符便将ASCII扩展为8位，称为EASC ...继续阅读 (8)

本文将会介绍如何在真机上调试移动端的页面，和之前的《如何在电脑上测试手机网站》的不同之处在于真机环境。本会介绍的方法如下：UC浏览器开发版Chrome 远程调试Firefox 远程调试Opera 远程调试WeinreUC浏览器开发版感谢UC造出这么好用的浏览器，同时注重开发者，远好于国内其他厂商，UC浏览器有一个开发版非常赞。UC浏览器开发版网址下载地址UC开发版的网站上介绍的很清楚，也有很详细的文档，这里就不再赘述，简单记录下WIFI的调试方法，保证pc和手机在同一个网段，在PC上打开Chrome或Safari，在地址栏输入：手机IP + :9998，在手机端会弹出确认按钮，点击确认后，就可在pc上看到效果了，如此简单。Chrome浏览器要先使用Chrome浏览器的远程调试功能需要先翻墙才可以，还需做如下准备：PC Chrome最新版安卓 Chrome最新版数据线一根插上数据线，打开手机里的浏览器，然后PC浏览器-菜单-更多工具-检查设备，就会看到如下界面：点击inspect，稍等片刻即可打开调试界面：功能和PC一样，异常强大。更多信息请移步这里。Firefox浏览器首先，需要如下几个准备工作：PC Firefox 15+Android Firefox 15+一根数据线adb驱动上面三个就不多解释了，adb驱动我们安装个手机管家什么的，都可以自动安装上，打开命令行中断，输入adb ...继续阅读 (24)

本文将会介绍如何在真机上调试移动端的页面，和之前的《如何在电脑上测试手机网站》的不同之处在于真机环境。本会介绍的方法如下：UC浏览器开发版Chrome 远程调试Firefox 远程调试Opera 远程调试Weinre##UC浏览器开发版感谢UC造出这么好用的浏览器，同时注重开发者，远好于国内其他厂商，UC浏览器有一个开发版非常赞。UC浏览器开发版网址下载地址UC开发版的网站上介绍的很清楚，也有很详细的文档，这里就不再赘述，简单记录下WIFI的调试方法，保证pc和手机在同一个网段，在PC上打开Chrome或Safari，在地址栏输入：手机IP + :9998，在手机端会弹出确认按钮，点击确认后，就可在pc上看到效果了，如此简单。##Chrome浏览器要先使用Chrome浏览器的远程调试功能需要先翻墙才可以，还需做如下准备：PC Chrome最新版安卓 Chrome最新版数据线一根插上数据线，打开手机里的浏览器，然后PC浏览器-菜单-更多工具-检查设备，就会看到如下界面：点击inspect，稍等片刻即可打开调试界面：功能和PC一样，异常强大。更多信息请移步这里。##Firefox浏览器首先，需要如下几个准备工作：PC Firefox 15+Android Firefox 15+一根数据线adb驱动上面三个就不多解释了，adb驱动我们安装个手机管家什么的，都可以自动安装上，打开命令行中断 ...继续阅读 (10)

js创建之初，正值java大行其道，面向对象编程春风正盛，js借鉴了java的对象机制，但仅是看起来像，也就是js的构造函数，如下：function People(age) { this.age = age; this.getAge = function (){return this.age}; } var p1 = new People(20);//People的实例1 var p2 = new People(40);//People的实例2上面的代码很像java了，通过new constructor()的方式，可以创建多个实例。但上面代码问题是getAge方法会在每个People的实例中存在，如果实例多的话，会浪费很多空间，js采用了牺牲时间，获取空间的方法，js引入了原型理念，将方法放入原型中：function People(age) { this.age = age } People.prototype.getAge = function () {return this.age};本文就来总结下，如何使用构造函数来实现继承。场景我们假设我们有一个父构造函数People和子构造函数Student，People有一个属性age和一个方法getAge，Student有一个属性num和getNum。function People(age) { this.age = ag ...继续阅读 (25)

js创建之初，正值java大行其道，面向对象编程春风正盛，js借鉴了java的对象机制，但仅是看起来像，也就是js的构造函数，如下：function People(age) { this.age = age; this.getAge = function (){return this.age}; } var p1 = new People(20);//People的实例1 var p2 = new People(40);//People的实例2上面的代码很像java了，通过new constructor()的方式，可以创建多个实例。但上面代码问题是getAge方法会在每个People的实例中存在，如果实例多的话，会浪费很多空间，js采用了牺牲时间，获取空间的方法，js引入了原型理念，将方法放入原型中：function People(age) { this.age = age } People.prototype.getAge = function () {return this.age};本文就来总结下，如何使用构造函数来实现继承。##场景我们假设我们有一个父构造函数People和子构造函数Student，People有一个属性age和一个方法getAge，Student有一个属性num和getNum。function People(age) { this.age = ...继续阅读 (8)

本文仅先给使用console调试的FE同学，如果你还不知道console是什么，或者还停留在alert阶段，那就不要浪费时间了，say bye bye！你是否试程序的过程中用过console.log(***)，发现在现代浏览器里运行好好的，到了ie里却出现莫名其妙的错误，你完全不知道为什么。或者你知道在ie下console不能使用，每次上线前都要注释掉console的代码，一不小心漏掉了一个。如果有过上面类似的情况，和我有着同样的烦恼，那恭喜你，console.js就是为你准备的。（如果你用着非常牛逼的自动化工具，能自动过滤掉console的话，往下看下也是会有收获的）你还在写类似下面这样的代码吗？if (console && console.log) { console.log(***); }或者console.log = console.log || function () {}那么是时候做出改变了，console.js会帮你解决这些问题。console.js是什么console.js是一个微型js库，用来修复在不支持或部分支持console的浏览器下，调用console.***出错的问题。这其实有点类似reset.css或者html5shim的做法，console.js参考了MSDNMDNFirebug三个文档对console的介绍。是其中提到api的超集。console. ...继续阅读 (21)

本文仅先给使用console调试的FE同学，如果你还不知道console是什么，或者还停留在alert阶段，那就不要浪费时间了，say bye bye！你是否试程序的过程中用过console.log(***)，发现在现代浏览器里运行好好的，到了ie里却出现莫名其妙的错误，你完全不知道为什么。或者你知道在ie下console不能使用，每次上线前都要注释掉console的代码，一不小心漏掉了一个。如果有过上面类似的情况，和我有着同样的烦恼，那恭喜你，console.js就是为你准备的。（如果你用着非常牛逼的自动化工具，能自动过滤掉console的话，往下看下也是会有收获的）你还在写类似下面这样的代码吗？if (console && console.log) { console.log(***); }或者console.log = console.log || function () {}那么是时候做出改变了，console.js会帮你解决这些问题。##console.js是什么console.js是一个微型js库，用来修复在不支持或部分支持console的浏览器下，调用console.***出错的问题。这其实有点类似reset.css或者html5shim的做法，console.js参考了MSDNMDNFirebug三个文档对console的介绍。是其中提到api的超 ...继续阅读 (7)

转眼间加入git的阵营已经快两年了，结识git，缘起github，2年前在寻找代码托管网站，当时还是用svn，起初使用google code，可是google的服务虽好，在天朝你懂得，后来发现了github，多亏了蒋鑫老师的《GotGitHub》将我带入github的大门，如果你是个github新手，那我强烈建议你阅读这篇文章，里面讲了很多东西。起初的时候我是用github for windows这个客户端，在切换到多分支的时候被，自动转换换行符坑的不浅，后来越来阅读了《git详解》系列文章，对git的了解深入了一步，并开始转到命令行上来，如今我在github上开源了60几个库，借助git，可自由在这些项目之间穿梭，同时还维护了github家园的微博和Q群(193091696)，如果你想获取关于git和github的最新消息可以关注微博，如果你有什么疑问或者问题，欢迎加群一起讨论。这篇文章记录个人常用的一些命令，和记不住的一些命令。安装在 Windows 上安装 Git 同样轻松，有个叫做 msysGit 的项目提供了安装包：http://msysgit.github.io/完成安装之后，就可以使用命令行的 git 工具（已经自带了 ssh 客户端）了，另外还有一个图形界面的 Git 项目管理工具。配置首先是配置帐号信息git config --global user.name y ...继续阅读 (23)

转眼间加入git的阵营已经快两年了，结识git，缘起github，2年前在寻找代码托管网站，当时还是用svn，起初使用google code，可是google的服务虽好，在天朝你懂得，后来发现了github，多亏了蒋鑫老师的《GotGitHub》将我带入github的大门，如果你是个github新手，那我强烈建议你阅读这篇文章，里面讲了很多东西。起初的时候我是用github for windows这个客户端，在切换到多分支的时候被，自动转换换行符坑的不浅，后来越来阅读了《Pro Git》第一版，对git的了解深入了一步，并开始转到命令行上来，如今我在github上开源了70几个库，借助git，可自由在这些项目之间穿梭，同时还维护了github家园的微博和Q群(193091696)，如果你想获取关于git和github的最新消息可以关注微博，如果你有什么疑问或者问题，欢迎加群一起讨论。这篇文章记录个人常用的一些命令，和记不住的一些命令。##安装在 Windows 上安装 Git 同样轻松，有个叫做 msysGit 的项目提供了安装包：http://msysgit.github.io/完成安装之后，就可以使用命令行的 git 工具（已经自带了 ssh 客户端）了，另外还有一个图形界面的 Git 项目管理工具。##配置首先是配置帐号信息git config -e [--global] # ...继续阅读 (7)

作为aptana死忠粉的我，最近由于工作需要最近开始使用sublime，初次使用，就被其秒开的启动速度，简洁的界面设计，无干扰的信息提示所这幅。俗话说，工欲善其事必先利其器，作为码农，在开始编码之前，必须要对自己的工具熟悉，才能事半功倍，所以开始了一番折腾，下面记录下一些笔记。快捷键作为码农，很多时间都是在敲键盘的，所以快捷键是非常重要的，sublime的快捷键非常非常多，很难都记住，按照80/20原则，只有20%是常用的，下面是我常用的快捷键：快捷键功能ctrl+shift+p打开命令面板ctrl + p搜索项目中的文件ctrl+r前往Methodctrl+g跳转到第几行ctrl+k, ctrl+b切换侧边栏显示状态ctrl+shift+[backspace|del]左侧|右侧全部删除ctrl+y重做或重复shift+方向键移动并选择ctrl+[|]缩进|取消缩紧ctrl+shift+[|]折叠|展开(代码)ctrl+l选择行，重复可依次增加选择下一行ctrl+m跳转到对应括号ctrl+shift+m选中括号间的内容alt+.close tagctrl+/当前行注释状态切换ctrl+h替换ctrl+[shift]+f[全局]查找ctrl+tab, alt+num, ctrl+pageup切换tab面板ctrl+shift+y将光标处的表达式计算，对于数学不好的很有用ctrl+sh ...继续阅读 (34)

作为aptana死忠粉的我，最近由于工作需要最近开始使用sublime，初次使用，就被其秒开的启动速度，简洁的界面设计，无干扰的信息提示所这幅。俗话说，工欲善其事必先利其器，作为码农，在开始编码之前，必须要对自己的工具熟悉，才能事半功倍，所以开始了一番折腾，下面记录下一些笔记。初始化安装完编辑器后就可以使用了，但我一般会进行一些配置，希望你也按照自己的喜欢进行配置。下面的配置都是打开Preferences->Setting-Default，在那里面有很多默认配置选项，我们可以在这里改变默认值。修改显示字体大小，我一般习惯使用14号字"font_size": 14, // 默认10保存文件时自动在末尾添加空行（我们的项目有这样的要求）"ensure_newline_at_eof_on_save": true, // 默认是false默认使用Unix换行符，如果大家使用统一的换行符，会让事情变得简单"default_line_ending": "unix", // 默认是system使用空格填充tab键，没有好坏之分，统一就好"translate_tabs_to_spaces": true,// 默认是false上面的配置项，如果你是一个完美主义者，可以在用户配置文件中配置，不修改默认配置文件。##快捷键作为码农，很多时间都是在敲键盘的，所以快捷键是非常重要的，sublime的快 ...继续阅读 (13)

最近项目上要制作一个七巧板，脑子里瞬间闪现，什么。。。七巧板不是小时候玩的吗。。。七巧板的由来先来个科普吧，是我在查资料过程中看到的，感觉很有意思。宋朝有个叫黄伯思的人，对几何图形很有研究，他热情好客，发明了一种用6张小桌子组成的“宴几”——请客吃饭的小桌子。后来有人把它改进为7张桌组成的宴几，可以根据吃饭人数的不同，把桌子拼成不同的形状，比如3人拼成三角形，4人拼成四方形，6人拼成六方形……这样用餐时人人方便，气氛更好。后来，有人把宴几缩小改变到只有七块板，用它拼图，演变成一种玩具。因为它十分巧妙好玩，所以人们叫它“七巧板”。今天，在世界上几乎没有人不知道七巧板和七巧图，它在国外被称为“唐图”（Tangram），意思是来自中国的拼图（不是唐代发明的图）。纳尼，原来Tangram是咱们中国的，。。。方案看完了有趣的东西，该开始正题了，就是无论使用什么技术给我整出个七巧板来。。。（在前端页面里）结合自己的知识体系，思考了下大概的思路：Canvas，万能的Cavans一定可以解决问题，加上之前做过Painter。灵活性+扩展性满足。CSS3，每个版子是一个dom元素，然后使用css3搞定。灵活性 扩展性不如canvas。svg，这个应该也可以吧，但自己对这方面的知识匮乏。。。。暂时未想出。考虑到时间成本（太紧了）和其他。。。原因，决定使用css3的方案。开始想板子使用图片来做，但多亏自 ...继续阅读 (25)

最近项目上要制作一个七巧板，脑子里瞬间闪现，什么。。。七巧板不是小时候玩的吗。。。七巧板的由来先来个科普吧，是我在查资料过程中看到的，感觉很有意思。宋朝有个叫黄伯思的人，对几何图形很有研究，他热情好客，发明了一种用6张小桌子组成的“宴几”——请客吃饭的小桌子。后来有人把它改进为7张桌组成的宴几，可以根据吃饭人数的不同，把桌子拼成不同的形状，比如3人拼成三角形，4人拼成四方形，6人拼成六方形……这样用餐时人人方便，气氛更好。后来，有人把宴几缩小改变到只有七块板，用它拼图，演变成一种玩具。因为它十分巧妙好玩，所以人们叫它“七巧板”。今天，在世界上几乎没有人不知道七巧板和七巧图，它在国外被称为“唐图”（Tangram），意思是来自中国的拼图（不是唐代发明的图）。纳尼，原来Tangram是咱们中国的，。。。方案看完了有趣的东西，该开始正题了，就是无论使用什么技术给我整出个七巧板来。。。（在前端页面里）结合自己的知识体系，思考了下大概的思路：Canvas，万能的Cavans一定可以解决问题，加上之前做过Painter。灵活性+扩展性满足。CSS3，每个版子是一个dom元素，然后使用css3搞定。灵活性 扩展性不如canvas。svg，这个应该也可以吧，但自己对这方面的知识匮乏。。。。暂时未想出。考虑到时间成本（太紧了）和其他。。。原因，决定使用css3的方案。开始想板子使用图片来做，但多亏自 ...继续阅读 (8)

简介最近我在学习Frontend Masters 上的高级JavaScript系列教程，Kyle 带来了他的“OLOO”（对象链接其他对象）概念。这让我想起了Keith Peters 几年前发表的一篇博文，关于学习没有“new”的世界，其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。标准方法（The Standard Way）一直以来，我们学习的在 JavaScript 里创建对象的方法都是创建一个构造函数，然后为函数的原型对象添加方法。function Animal(name) { this.name = name; } Animal.prototype.getName = function() { return this.name; };对于子类的解决方案是，创建一个新的构造函数，并且设置其原型为其父类的原型。调用父类的构造函数，并将this设置为其上下文对象。function Dog(name) { Animal.call(this, name); } Dog.prototype = Object.create(Animal.prototype); Dog.prototype.speak = function() { return "woof"; }; var dog = new Dog("Scamp"); console.log(dog.get ...继续阅读 (16)

简介最近我在学习Frontend Masters 上的高级JavaScript系列教程，Kyle 带来了他的“OLOO”（对象链接其他对象）概念。这让我想起了Keith Peters 几年前发表的一篇博文，关于学习没有“new”的世界，其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。标准方法（The Standard Way）一直以来，我们学习的在 JavaScript 里创建对象的方法都是创建一个构造函数，然后为函数的原型对象添加方法。function Animal(name) { this.name = name; } Animal.prototype.getName = function() { return this.name; };对于子类的解决方案是，创建一个新的构造函数，并且设置其原型为其父类的原型。调用父类的构造函数，并将this设置为其上下文对象。function Dog(name) { Animal.call(this, name); } Dog.prototype = Object.create(Animal.prototype); Dog.prototype.speak = function() { return "woof"; }; var dog = new Dog("Scamp"); console.log(dog.get ...继续阅读 (8)

现在公认的JavaScript典型项目需要运行单元测试，合并压缩。有些还会使用代码生成器，代码样式检查或其他构建工具。Grunt.js是一个开源工具，可以帮助你完成上面的所有步骤。它非常容易扩展，并使用JavaScript书写，所以任何为JavaScript库或项目工作的人都可以按自己的需要扩展它。本文解释如何使用Grunt.js构建JavaScript库。Grunt.js依赖Node.js和npm，所以第一节解释其是什么，如何安装和使用。如果你对npm有了解，那你可以跳过这一节。第四和第五节讲述如何配置Grunt和一系列典型Grunt任务。本文讨论的代码例子可以在GitHub上访问。工具概述（Tool Chain Overview）开始之前，我们需要三个工具：Node.js,Npm,Grunt.js.Node.js是一个流行的服务器端JavaScript环境。它被用来编写和运行JavaScript服务和JavaScript命令行工具。如果你想进一步链接Node.js，你可以查看Stack Overflow上相关的资料。Npm是Node.js的包管理工具。它能从中心仓库下载依赖，解决大部分依赖冲突问题。Npm仓库仅仅存储Node.js服务器段和命令行项目。它不包含用于web和移动app相关的库。我们用它来下载Grunt.js。Grunt.js是一个任务运行工具，我们用起构建我们的项 ...继续阅读 (22)

现在公认的JavaScript典型项目需要运行单元测试，合并压缩。有些还会使用代码生成器，代码样式检查或其他构建工具。Grunt.js是一个开源工具，可以帮助你完成上面的所有步骤。它非常容易扩展，并使用JavaScript书写，所以任何为JavaScript库或项目工作的人都可以按自己的需要扩展它。本文解释如何使用Grunt.js构建JavaScript库。Grunt.js依赖Node.js和npm，所以第一节解释其是什么，如何安装和使用。如果你对npm有了解，那你可以跳过这一节。第四和第五节讲述如何配置Grunt和一系列典型Grunt任务。本文讨论的代码例子可以在GitHub上访问。工具概述（Tool Chain Overview）开始之前，我们需要三个工具：Node.js,Npm,Grunt.js.Node.js是一个流行的服务器端JavaScript环境。它被用来编写和运行JavaScript服务和JavaScript命令行工具。如果你想进一步链接Node.js，你可以查看Stack Overflow上相关的资料。Npm是Node.js的包管理工具。它能从中心仓库下载依赖，解决大部分依赖冲突问题。Npm仓库仅仅存储Node.js服务器段和命令行项目。它不包含用于web和移动app相关的库。我们用它来下载Grunt.js。Grunt.js是一个任务运行工具，我们用起构建我们的项 ...继续阅读 (16)

现在公认的JavaScript典型项目需要运行单元测试，合并压缩。有些还会使用代码生成器，代码样式检查或其他构建工具。Grunt.js是一个开源工具，可以帮助你完成上面的所有步骤。它非常容易扩展，并使用JavaScript书写，所以任何为JavaScript库或项目工作的人都可以按自己的需要扩展它。本文解释如何使用Grunt.js构建JavaScript库。Grunt.js依赖Node.js和npm，所以第一节解释其是什么，如何安装和使用。如果你对npm有了解，那你可以跳过这一节。第四和第五节讲述如何配置Grunt和一系列典型Grunt任务。本文讨论的代码例子可以在GitHub上访问。工具概述（Tool Chain Overview）开始之前，我们需要三个工具：Node.js,Npm,Grunt.js.Node.js是一个流行的服务器端JavaScript环境。它被用来编写和运行JavaScript服务和JavaScript命令行工具。如果你想进一步链接Node.js，你可以查看Stack Overflow上相关的资料。Npm是Node.js的包管理工具。它能从中心仓库下载依赖，解决大部分依赖冲突问题。Npm仓库仅仅存储Node.js服务器段和命令行项目。它不包含用于web和移动app相关的库。我们用它来下载Grunt.js。Grunt.js是一个任务运行工具，我们用起构建我们的项 ...继续阅读 (9)

今天整理CSS2.1的规范，发现这个，分享给大家。CSS2.1 作为 CSS2 和 CSS1 的后序版本，基于一下一组设计理念：向前和向后兼容。CSS2.1 的用户代理能够理解 CSS1 的样式表。 CSS1 的用户代理能够读取 CSS2.1 的样式表，并且丢弃他们不能理解的部分。同时，对于不支持 CSS 的用户代理可以显示样式增强的文档。当然通过 CSS 增强的样式将不被渲染，但所有的内容可以被表现。作为结构化文档的补充。样式表补充结构化文档（例如，HTML 和 XML应用程序），为标记文本提供样式信息。样式表应该非常容易修改，并对标记的影像甚微或没有。供应商，平台和设备无关。样式表使文档保持供应商，平台和设备无关。样式表本身也是供应商和平台无关的，但CSS2.1允许你为一组设备指定一个样式表（例如，打印机）。可维护性。通过在文档中指向样式表，网站管理员能简化站点的维护和保持整个站点的一致外观和感觉。例如，如果组织的背景色发生改变，仅需更改一个文件。简单。CSS 是一门简单的样式语言，是对人类读写友好的。CSS的属性保持最大程度上的相互独立，一般实现一个效果只有一种方法。网络性能。CSS为内容的呈现方式提供了紧凑的编码。图片或音频文件常被作者用来实现某种特定的渲染效果，样式表和其比起来体积要小的多。同时，减少网络链接的次数，进一步提高网络性能。灵活性。有几种方法可以将CSS应用到 ...继续阅读 (22)

今天整理CSS2.1的规范，发现这个，分享给大家。CSS2.1 作为 CSS2 和 CSS1 的后序版本，基于一下一组设计理念：向前和向后兼容。CSS2.1 的用户代理能够理解 CSS1 的样式表。 CSS1 的用户代理能够读取 CSS2.1 的样式表，并且丢弃他们不能理解的部分。同时，对于不支持 CSS 的用户代理可以显示样式增强的文档。当然通过 CSS 增强的样式将不被渲染，但所有的内容可以被表现。作为结构化文档的补充。样式表补充结构化文档（例如，HTML 和 XML应用程序），为标记文本提供样式信息。样式表应该非常容易修改，并对标记的影像甚微或没有。供应商，平台和设备无关。样式表使文档保持供应商，平台和设备无关。样式表本身也是供应商和平台无关的，但CSS2.1允许你为一组设备指定一个样式表（例如，打印机）。可维护性。通过在文档中指向样式表，网站管理员能简化站点的维护和保持整个站点的一致外观和感觉。例如，如果组织的背景色发生改变，仅需更改一个文件。简单。CSS 是一门简单的样式语言，是对人类读写友好的。CSS的属性保持最大程度上的相互独立，一般实现一个效果只有一种方法。网络性能。CSS为内容的呈现方式提供了紧凑的编码。图片或音频文件常被作者用来实现某种特定的渲染效果，样式表和其比起来体积要小的多。同时，减少网络链接的次数，进一步提高网络性能。灵活性。有几种方法可以将CSS应用到 ...继续阅读 (7)

最近做了一款小游戏，定位是移动端访问，思来想去最后选择了jQuery mobile最为框架，制作差不多以后，是否可以打包成App，恰好以前对PhoneGap有耳闻，便想用这个来做打包，可以其中艰辛曲折多次让我想放弃的心情，官方提供的例子，对我这种没用过的人而言，真是无语的很，所已将配置环境和打包过程写下做个记录。因为我只弄了Andriod的环境，所以在此只以Andriod为例。使用PhoneGap搭建Android开发的项目整体步骤如下：安装java环境。安装ant构建工具。安装android的开发环境并配置环境变量。安装Node.js环境并配置环境变量。安装git使用npm安装PhoneGap全局环境。使用PhoneGap命令创建PhoneGap项目。将PhoneGap编译为android项目。将上述项目导入ADT进行后续开发。安装.apk文件其实官网给出的安装过程忽略了很多步骤（因为这里是Andriod环境，所以才会比官网的例子多出不少步骤），像我这种前端开发人员，电脑里可是连java都没装的，下面就详细讲解这些步骤，并最终生成apk文件。安装Java环境这点不用我讲，网上一搜一大堆，而且很多程序员电脑里面都是有java环境的，需要强调的是安装java的环境要和后面下载andriod开发环境一致，不然会报错，要保证都是32位或64位，笔者就装了个64位jdk然后，安卓环境是32 ...继续阅读 (15)

最近做了一款小游戏，定位是移动端访问，思来想去最后选择了jQuery mobile最为框架，制作差不多以后，是否可以打包成App，恰好以前对PhoneGap有耳闻，便想用这个来做打包，可以其中艰辛曲折多次让我想放弃的心情，官方提供的例子，对我这种没用过的人而言，真是无语的很，所已将配置环境和打包过程写下做个记录。因为我只弄了Andriod的环境，所以在此只以Andriod为例。使用PhoneGap搭建Android开发的项目整体步骤如下：安装java环境。安装ant构建工具。安装android的开发环境并配置环境变量。安装Node.js环境并配置环境变量。安装git使用npm安装PhoneGap全局环境。使用PhoneGap命令创建PhoneGap项目。将PhoneGap编译为android项目。将上述项目导入ADT进行后续开发。安装.apk文件其实官网给出的安装过程忽略了很多步骤（因为这里是Andriod环境，所以才会比官网的例子多出不少步骤），像我这种前端开发人员，电脑里可是连java都没装的，下面就详细讲解这些步骤，并最终生成apk文件。安装Java环境这点不用我讲，网上一搜一大堆，而且很多程序员电脑里面都是有java环境的，需要强调的是安装java的环境要和后面下载andriod开发环境一致，不然会报错，要保证都是32位或64位，笔者就装了个64位jdk然后，安卓环境是32 ...继续阅读 (8)

CSS不是一门很复杂的语言，但是即使你已经写css很多年了，也很有可能遇到一些新玩意儿-某些属性从来没用过，某些值从来未曾考虑，或者某些规范细则你从来不知道。我经常会遇到一些css小细节，所以我想在这片文章中和大家分享，需要承认的是，这篇文章中的很多东西并不具有实操价值，但也许你可以留作后用。body上的color不只是应用于文字让我们从最简单的开始吧，color属性是被广泛运用的属性，某些人可能不曾注意，它并不仅仅只是定义文本的颜色。让我们看这个例子：请注意我们只是给body设定了color为yellow，但是你可以看到，页面里的元素都变成了黄色，他们包括:图片的alt文字的值，就是当图片源载入不了时显示的文字列表元素的边框无序列表的点有序列表的数字hr元素有趣的是，hr元素默认是不会继承color属性得，我需要强制他继承border-color: inherit，这对我来说有点怪异。W3c规范是这么定义的:这个属性用来描述元素的文本的前景颜色，附带被用来为其他接受颜色值的其他属性提供潜在的间接的值。我不是很明确地知道有哪些是被当做所谓的前景的，如果你知道的话，请在评论中告诉我。visibility还可以设置 “collapse”值你可能已经用过visibility上千遍了，最常用的是visible和hidden，用来使元素显示或者隐藏。还有第三个很少被用到的值是collapse ...继续阅读 (24)

CSS不是一门很复杂的语言，但是即使你已经写css很多年了，也很有可能遇到一些新玩意儿-某些属性从来没用过，某些值从来未曾考虑，或者某些规范细则你从来不知道。我经常会遇到一些css小细节，所以我想在这片文章中和大家分享，需要承认的是，这篇文章中的很多东西并不具有实操价值，但也许你可以留作后用。##body上的color不只是应用于文字让我们从最简单的开始吧，color属性是被广泛运用的属性，某些人可能不曾注意，它并不仅仅只是定义文本的颜色。让我们看这个例子：请注意我们只是给body设定了color为yellow，但是你可以看到，页面里的元素都变成了黄色，他们包括:图片的alt文字的值，就是当图片源载入不了时显示的文字列表元素的边框无序列表的点有序列表的数字hr元素有趣的是，hr元素默认是不会继承color属性得，我需要强制他继承border-color: inherit，这对我来说有点怪异。W3c规范是这么定义的:这个属性用来描述元素的文本的前景颜色，附带被用来为其他接受颜色值的其他属性提供潜在的间接的值。我不是很明确地知道有哪些是被当做所谓的前景的，如果你知道的话，请在评论中告诉我。##visibility还可以设置 “collapse”值你可能已经用过visibility上千遍了，最常用的是visible和hidden，用来使元素显示或者隐藏。还有第三个很少被用到的值是coll ...继续阅读 (7)

不解释(function(){ //私有静态成员 var user = ""; //私有静态方法 function privateStaticMethod(){ } Box = function(value){ //私有成员 privateStaticUser = value; //这个是私有方法 function privateMethod(){ } //公有方法，因为能访问私有成员，也可以说是特权函数，也可以说是实例方法 this.getUser = function(){ return user; }; //公有成员 this.user = 1; }; //公有共享访问 Box.prototype.sharedMethod = function () {}; //公有共享属性 Box.prototype.sharedProperty = function () {}; //公有静态方法 Box.staticMethod = function(){}; //公有静态成员 Box.staticProperty = 1; })(); ...继续阅读 (27)

不解释(function(){ //私有静态成员 var user = ""; //私有静态方法 function privateStaticMethod(){ } Box = function(value){ //私有成员 privateStaticUser = value; //这个是私有方法 function privateMethod(){ } //公有方法，因为能访问私有成员，也可以说是特权函数，也可以说是实例方法 this.getUser = function(){ return user; }; //公有成员 this.user = 1; }; //公有共享访问 Box.prototype.sharedMethod = function () {}; //公有共享属性 Box.prototype.sharedProperty = function () {}; //公有静态方法 Box.staticMethod = function(){}; //公有静态成员 Box.staticProperty = 1; })(); ...继续阅读 (8)

这是我所知道的最完整最简洁的JavaScript基础教程。这篇文章带你尽快走进JavaScript的世界——前提是你有一些编程经验的话。本文试图描述这门语言的最小子集。我给这个子集起名叫做“JavaScript简易教程”，并推荐准备深入阅读细节和高级技巧之前的新手阅读。心急吃不了热豆腐。文章的最后提出如何进一步学习。警告：下面是我所描述的规则集和最佳实践。我喜欢整洁清晰（例如，你可以随时通过下面的目录快速导航）。规则是无懈可击的，但不可避免——每个人的理解不同。目录本文约定语言的性质语法变量和赋值值布尔数字字符串语句函数异常处理严格模式变量作用域和闭包对象和继承数组正则表达式数学标准库的其他功能下一步学什么？本文约定（Conventions used in this blog post）命令行交互（Command line interaction）每当我介绍一个新概念，我都会尝试通过JavaScript命令行进行演示。像下面这样：> 3 + 4 7大于号后面的文本是用户输入内容。其他的都是JavaScript引擎的输出内容。此外，也可以使用console.log()来向控制台打印数据（这方法可以在大部分JavaScript引擎中工作，包括Node.js）.查找文档（Finding documentation）有时你看到一些函数或方法有超链接，你应该清楚他们的工作原理。如果没有， ...继续阅读 (15)