二分之一 - Just Jason's Blog

2012年3月1日 on NodeJs

windows下NodeJs npm安装express及安装失败的问题

一、什么是npm

npm，即nodejs Package management的缩写，nodejs包管理工具。

node.js的npm命令是node.js的包管理工具，安装外部模块时只需npm install packagname即可，但是对于上网时使用代理的却安装不了。

新版的windows版的nodejs，安装完后会自带npm，早期版本nodejs需自行安装npm。

二、什么是express

详情见官网：http://expressjs.com/

三、具体步聚：

1、访问官方网站下载nodejs windows版并安装，http://nodejs.org/#download

2、windows下，nodejs默认安装目录为：C:\Program Files\nodejs\

3、建议将nodejs目录复制到其它盘的根目录，因为目录中包含的“Program Files”，有空格且较长，在CMD中运行麻烦，需加引号。

比如：我将nodejs目录移至F盘根目录，并重命名为node，目录更新为：F:\node\

4、进入nodejs安装目录

运行 – cmd – F:(切换到F盘) – cd node(切换到node目录)；

5、安装express

执行：npm install express -g

转载请注明：转自二分之一博客http://www.2fz1.com/?p=150

2012年2月29日 on opera

Opera下web前端开发两点小结

1、新版的opera安全机制

“公共因特网上的网页请求了内网的数据。处于安全方面的考虑，自动访问被阻止。” 如果你在开发过程中，部份资源是外网的，部份资源是内网的（通过HOSTS配置），可能出现意想不到的BUG，让你头疼。

比如： res.a.com/style.css (外网)

img.a.com/a.gif (配置内网IP的hosts);

style.css引用了a.gif，在opera下会引起a.gif显示不了的情况；

解决办法：

菜单 – 设置 – 首选项（ctrl+F12） – 高级 – 安全性 – 信任的网站 – 安全的内部主机 -将域名“img.a.com”添加到安全的内部主机列表中

重启浏览器，清除缓存，再次访问。

2、Opera下的开发调试

使用自带的工具：Dragonfly（蜻蜓），当前版本为1.1；

新版的opera已自带该工具，启动方法：ctrl+shift+I

Dragonfly下载：http://www.opera.com/dragonfly/

体验如下：

1、文档功能；

亮点功能是可以将当前DOM树导出，但iframe不能通过树节点一级级的展开，DOM树只显示一个HTML文档结构。

选择HTML元素，需在页面上右键“检查元素”，这点和Chrome类似，但firebug的箭头选择更加易用。

2、脚本功能；

只显示JS，不显示HTML，且可以将内联的JS分块显示，并能显示浏览器自带的脚本。

Firebug和Chrome，不能单独显示内联JS，会显示整页的HTML和JS。

两者各有优缺点。

3、网络功能；

亮点是可以自己组装HTTP协议，模拟HTTP协议包的发送，

抓包功能非常难用。

2012年2月28日 on phpStorm

phpStorm 3.0 用作JS IDE体验

开发PHP时，Zend Studio作为IDE的首选，已让众多PHPer们不再陌生。PhpStorm顾名思义，是一款PHP开发的IDE，作为一名前端及轻度PHP开发人员，在朋友的推荐下使用PhpStorm开发JS，本文将介绍使用PhpStorm来开发JS的体验。

题外话，上次在blueidea上看到有很多人在讨论JS开发所使用的IDE，甚至有人认为使用记事本或Notepad++才显示大牛或上流。所谓工欲善其事，必先利其器，工具的目的是提高开发效率，而对于jser来说，什么工具自己熟悉、易调试，易检错等就决定了开发的效率。所有没有最好的IDE，只有最顺手的IDE。我一直使用DW，是因为刚接触页面开发时就在使用，严重依赖DW的一个很细小的功能。

例举DW的一个细小而优秀的功能：

1、页面编码一键转换

2、新建HTML文件时，自动生成最标准的HTML头。

3、快速插入HTML标签（主要是表单中的HTML元素）

4、快速插入script代码块

5、……等等，不一一例举。

2012年2月24日 on css

CSS垂直居中布局的两个常用方法

1、绝对定位 + margin-top;

容器绝对定位，设置top值为50%，margin-top的值为容器高度一半的负数。

前提：必须知道DIV的高度

<div class=”content”></div>

.content {
    position:absolute;
    top:50%;
    height:200px;
    margin-top:-100px; /* 容器高度的一半 */
}

优点：适用于所有浏览器，不需要嵌套标签

2、将display设为table;

利用table的vertical-align属性实现。

<div id="wrapper">
    <div id="cell">
    <div class="content"></div>
    </div>
</div>

#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}

优点：content容器的高度不需要预先知道，高度可随意变化

实现容器垂直居中布局的方法还有很多，本文只介绍笔者常用的两个方法。

2012年2月23日 on javascript , html5

原生javascript API实现HTML5浏览器全屏

众说周知，html5的<video>标签是一个激动人心的技术革新，但同时因不能全屏而被诟病。

这一现状已经被改变，并将被越来越多的浏览器所支持。Firefox 10 的发布就开始支持全屏API，除FireFox 10外，Chrome 15与Safari 5.1或更高版本的浏览器也已经支持原生全屏API。

值得一提的差异，全屏退出，FireFox和Safari都是使用“ESC”键退出，而Chrome 15却采用“F11”退出全屏，这些微小的差别，却会给用户带来困扰，愿Chrome能改回“ESC”退出。

在2011年10月15日，W3C发布了一份全屏API草案（由Opera团队的一名成员编写），它跟Mozilla的草案有两个主要的不同点：

1、Mozilla/Webkit使用大写字母’S'（FullScreen），但W3C则不是（Fullscreen）；
2、Mozilla/Webkit使用cancelFullScreen，W3C使用exitFullscreen。

一、自定义API对象，以便兼容使用

var fullScreenApi = {
    supportsFullScreen: false, //是否支持全屏
    isFullScreen: function() { return false; }, //是否全屏状态
    requestFullScreen: function() {}, //触发全屏
    cancelFullScreen: function() {}, //取消全屏
    fullScreenEventName: '', //全屏事件名
    prefix: '' //浏览器前缀
}
var browserPrefixes = 'webkit moz o ms khtml'.split(' '); //浏览器前缀列表

2012年2月20日 on javascript , css

页面js和css加载顺序优化建议

body里dom渲染取决于head里的外联js加载完。

根据此原理，建议如下：

1、head里出现外联js，无论如何放，css文件都不能和body里的请求并行。

2、head里面内联js要在所有外联css文件前面，才能使css文件和body里面的请求并行，不然会堵塞。

因为内联js要等head里面所有外联css加载完后才会执行。

3、外联js放在页面最后，高级浏览器会自动做优化。

一般是放在body里面的最后几行。

4、长执行的内联js无论放在页面任何位置都会影响页面渲染。

长执行的js，比如监听事件的代码：

document.getElementById('bn').onclick = function() { alert(1); }

但这行代码写到外联JS中就不影响。

2012年2月20日 on javascript , html5

浏览器本地存储兼容方案（html5、userData）

一、本地存储概况

目前支持以下方法，实现浏览器端的本地存储：

每个cookie的大小不能超过4K。

Cookie数：

IE7跟IE8限制为50个。
Firefox限制为50个。
Opera限制30个
Safari/Chrome/WebKit没有限制

每次的http请求，cookie都会包含在包头里发送给服务器，cookie在http请求中是明文传递的。

2、flash LSO ;

local shared objects (LSOs).

Flash的LSOs 就如同Web浏览器中的cookies，它们被一些开发者称为“超级cookies”，因为LSOs可以存储大量数据，且存储和读取的都是原生的ActionScript数据类型。LSOs 默认的空间大小100 KB，用户可以通过Flash Player’s Settings Manager控制LSOs的使用空间大小，来严格限制被使用的空间。

3、userData ；

是微软为IE专门在系统中开辟的一块存储空间，所以说只支持Windows+IE的组合，实际测试在2000（IE5.5）、XP（IE6、IE7），Vista（IE7）下都是可以正常使用的。

单个文件的大小限制是128KB，一个域名下总共可以保存1024KB的文件，文件个数应该没有限制。在受限站点里这两个值分别是64KB和640KB，所以如果考虑到各种情况的话，单个文件最好能控制64KB以下。

2012年2月20日 on javascript , soundmanager2

javascript音频管理方案：SoundManager2

在看下HTML5游戏源码时，看到这个JS库，查找了相关资料和大家分享一下：

SoundManager2提供一套在javascript中用来控制声音的API。使用HTML5和Flash，为Javascript提供跨平台的音频控制功能（支持PC、手机、PAD等其它移动终端）。

一、使用入门

1、引用压缩无调试版的soundmanager库(只有33Kb);

<script type=”text/javascript” src=”script/soundmanager2-nodebug-jsmin.js”></script>

2、配置flash文件的路径（soundmanager提供的相应flash文件，并且会根据设备配置进行自动选择相应版本）的地址，并进行初始化。

soundManager.url = 'swf';
soundManager.onready(function(){
    //初始化完毕，准备播放
});

2012年2月19日 on http

web前端工程师需了解的基本Http协议

http是一个简单的协议。客户进程建立一条同服务器进程的tcp连接，然后发出请求并读取服务器进程的响应。服务器进程关闭连接表示本次响应结束。

以上概述是对http协议的简单概括。

作为web前端工程师看似不需要了解http协议，其实我们每天都在和http协议打交道。了解http协议有助于我们更好的优化页面性能，方便调试和发现错误。

说到http协议，不得不提到抓包工具，IE下一般使用“fiddler”，fierfox和chrome一般分别使用firebug和开发者工具。相信大部份同学了解这些工具的使用，这是web开发中几大调试利器。本文对几大软件的使用方法暂且不表，只关心抓包后如何分析http包信息。

2012年2月4日 on html5

CasualJs中文在线文档 – HTML5 Canvas开发框架

CasualJS Framework是根据ActionScript3.0的架构开发的一套适用于HTML5 Canvas的面向对象的开发框架。虽然Canvas提供了强大的绘图功能，但满足不了高级开发的需要。利用CasualJS的显示对象架构及渲染机制，你可以轻松的在Canvas中操控各种位图、图形、影片剪辑等显示对象，愉快开发。

方便flash开发人员迅速上手HTML5开发。

框架特性：

类似AS3的显示对象列表结构封装
基于帧的显示对象渲染机制
基于帧的MovieClip动画片段实现
内置简单的事件模型

源码下载：http://code.google.com/p/casualjs/

由于原文档是英文的，Jason(2fz1.com)简单的译了一下中文文档。

CasualJs中文在线文档：http://www.2fz1.com/casualjs/

一、什么是npm

二、什么是express

三、具体步聚：

1、新版的opera安全机制

2、Opera下的开发调试

1、绝对定位 + margin-top;

2、将display设为table;

一、自定义API对象，以便兼容使用

一、本地存储概况

1、cookie ;

2、flash LSO ;

3、userData ；

相关链接

一、使用入门