pzling

给Link标签添加 onload 事件

pzling — Wed, 04 Apr 2012 14:51:39 +0000

下午回来后一直头疼，到现在还在敲代码，喵了个咪的。晚上遇到给link添加onload事件的兼容性问题。查了一些资料还有一些框架代码，发现IE与OPERA比较好处理，主要问题出在Gecko与WebKit内核的浏览器上。

其中一种方法是通过link['sheet']['cssRules']去验证加载情况，但这种方法有跨域报错的问题。本以为我也只能使用这种方法去实现，之后意外翻到了两遍”鸟语”资料，跨域下同样可以验证加载情况。简单的试了一下，Safari 5.0、Chromium 18.0 均通过，无论是404、500等状态，均会执行回调函数。

方法就是定时循环document.styleSheets里的ownerNode，看是否有你添加的node。头痛，就不写太多了，具体的自己浏览下面的文章吧

javascript练习题

pzling — Tue, 14 Feb 2012 12:08:03 +0000

1、找出数字数组中最大的元素（使用Match.max函数）
2、转化一个数字数组为function数组（每个function都弹出相应的数字）
3、给object数组进行排序（排序条件是每个元素对象的属性个数）
4、利用JavaScript打印出Fibonacci数（不使用全局变量）
5、实现如下语法的功能：var a = (5).plus(3).minus(6); //2
6、实现如下语法的功能：var a = add(2)(3)(4); //9

网上看到这几道题，马上动手试了一下，除了第六题需要点小知识，其它的有点JS基础的都可以写出来，代码质量问题而已，有兴趣的朋友不妨也试试。

第一题，基础题。

第二题，一开始自己实现了个简单的map功能，之后查资料发现map功能已经自带，可以点这里查看关于map函数说明。

第三题，此题主要问题在获取object属性个数上，读完题目后想到的是自己写个函数获取，后来查了一下找到了keys/Object.keys这个函数，可以把object自身的属性键名转为数组，然后直接length获取长度，可以点这里查看关于keys函数说明

第四题，基础题。

第五题，基础题。

第六题，此题完全写不出来只好查资料，看到valueOf、toString后茅塞顿开，立刻明白此题的关键。

今天冬至！

pzling — Thu, 22 Dec 2011 12:46:45 +0000

今天是冬至，在家里完全没这概念，出门在外有点概念了嘿嘿。昨晚花了一晚的时间把BLOG搬了一下，还有整理了一些文章的格式，在此感谢SS提供的空间。

2011即将过去，上半年给自己定下来的目标到现在还完成不到50%。其中有一部分也不算必须的，不过在技术和英语的学习上都没有太大的长进，真的很失败，明年得加把劲了，特别是在英语上。

再过20天左右就要离开这座城市了，之前和总监说后他让我再给我自己一段时间好好考虑一下。在这边除了在技术达不到我想要的程度，其实整体来说还是不错的，不过毕竟目前所有公司前端只是起步阶段肯定不能与其它大公司相提并论，能单独设立一个N人的前端组已经很不错了。在技术上自己也算是有点追求，想多见下世面，以及其它的一些因素，所以还是选择离开这里去下一个目的地（或许也是最终的目的地），增加自己的人生阅历。

另外话说某人元旦要领证了，恭喜咯~~~期待2012新的开始！！！

最后不忘再说说今天在群里讨论的一个小问题，就是数组随机排序的方法，我第一反应就是想到下面这种又差又烂的方法，因为我就这么菜了：

function rndSort(arr){
	var arrTmp = [] , len = 0 , rnd = 0;
	while(len = arr.length){
		rnd = 0+ Math.random()*(len-0);
		arrTmp.push(arr.splice(rnd,1).join(''));
	}
	return arrTmp;
}

后来群友自己用原生的sort写了一个，我还真忘了这个可以直接写随机排序的，下面是大概的代码：

function nativeSort(arr){
	return arr.sort(function(a,b){
		return Math.random()>0.5 ? (-1) : 1
	});
}

可想而知，原生这个肯定是又简洁、又快的，事实上也基本是这样。为什么说是“基本”呢，因为我用FF9测了一下，原生的写法比其它浏览器慢了，所以有时出现原生比我写的那个慢，哈哈。还发现另外一个问题，webkit（chromium 18、safari 5）处理我写的随机排序那是慢得113，比其它浏览器慢了至少7，8倍，真是杯催。

DEMO

jq插件 – TestingUI [用户调查、测试题插件]

pzling — Sat, 03 Dec 2011 13:19:13 +0000

前段时间根据需求做的功能，当时只需要单选就可以。我想把复选功能加上后再整理出来但一直都没什么时间。这星期同事说能不能加上复选功能，我马上就答应了，今天硬抽了时间把复选功能补上了。

简介：该功能适合做用户调查、测试题等类似的应用。界面与功能算分得比较清，所以界面可以自行设计，随便修改，一些元素的样式名与规定的一致就可以了。DEMO里代码也有做一些注释，IE6下会报脚本错误，把JS文件里的中文注释去掉就可以了，如果还有什么不清楚，欢迎给我留言或发邮件

DEMO

不常见的前端BUG收集

pzling — Tue, 29 Nov 2011 14:41:06 +0000

无聊~别人都发常见的，我就在这记录些平时比较少遇到的BUG吧(不定时更新)，以下提到的方法不是唯一解决办法或者一定有效。

IE6绝对定位层消失

当相邻标签有浮动可能出现该问题，对绝对定位的层加清除浮动
IE6下DD_belatedPNG背景位置偏移

有时会发现背景图偏移了1px，你+/-1px它还是老样子，+/-2px它就老实的动了2px，解决办法是修改一下背景图(sprite)的位置1px，好像纵横度坐标都是一样是双数或者单数的原因。
IE7下正负内外边距实现等高的方法，高度没有以最高列为准

可能是没有浮动导致。我遇到的就是一边左浮动，右边不浮动，结果高度总以右边的高度为准，加上浮动后问题解决。

NodeJS + expressJS + mongoDB环境搭建

pzling — Sat, 15 Oct 2011 09:22:10 +0000

呃…..标题应该是“Ubuntu下NodeJS + expressJS + mongodb环境搭建”，位置不够显示！！！

接触nodejs后才学了点linux的命令，所以在搭建过程中遇到不少问题，中间补了一些linux的基本常识。环境搭建不断的装删折腾了N多次了，现在算是配得比较熟练了（貌似这没什么用!!）。最近刚装了ubuntu 11.10正式版，环境再次重新搭建了一次，趁现在还安装步骤比较清晰，记录一下搭建过程。

特别注意！！

linux新手，不了解权限问题（例如我），请不要随便用超级用户去执行以下命令，除非你直接用超级用户登录的！！
有些安装过程可能会出现卡着不动(3-5分钟还是不动的话)，ctrl+c停掉再多执行几次直到成功就可以了
我使用的版本：nodejs 0.4.12，mongodb 2.0，express由npm自动安装

搭建前的准备工作

1：搭建过程需要的依赖包

sudo apt-get install g++ curl libssl-dev
2. 安装git工具（如果你从git上获取源码的话）：

sudo apt-get install git-core

获取源码

NodeJS : git://github.com/joyent/node.git
ExpressJS: git://github.com/visionmedia/express.git (像我这种不懂手动安装的，就直接用npm安装)
mongoDB：我从官网下的，github地址童鞋们自己挖吧！！

NodeJS安装

假设环境我搭建在当前用户work目录下，首先进入解压出来的nodejs目录下，然后执行下面的命令操作(目录自己替换)

mkdir ~/work
./configure –-prefix=$HOME/work/node
make
make install

上面等它执行完毕就算安装成功了，然后设置下环境变量，这样就不用每次开启终端都要进入到特定目录才能执行node命令。(PS:环境变量设置非必要步骤，只是方便之后的使用、操作)

echo ‘export PATH=$HOME/work/node/bin:$PATH’ >> ~/.profile
echo ‘export NODE_PATH=$HOME/work/node:$HOME/work/node/lib/node_modules’ >> ~/.profile
source ~/.profile

到这里最基础的nodejs环境就搞定了，你可以执行”node -v”看下node版本号（前提是你设置了环境变量且更新了，要不你就得到bin目录下去执行了）。

安装NPM,ExpressJS

NPM是nodejs的包管理，帮你下载、管理一些nodejs相关组件什么的。我们先回到work目录，然后执行下面命令

curl http://npmjs.org/install.sh | sh
npm install express -verbose

先是安装npm，然后用npm下载配置express，-verbose参数用于查看详细的安装信息，如果在某个地方卡太久不动，就停了重新执行。命令成功后，我们进入work/node_modules/express目录执行npm install -d安装一些相关的依赖项，同理，如果卡太久不动，就重新多执行几次。

接下来依然是设置环境变量，把$HOME/work/node_modules/express/bin加到$PATH里，执行express -v能看到版本号就顺利安装成功了。

安装mongoDB

首先必须在系统根目录创建/data/db目录，步骤如下

mkdir /data/db -p
chown ‘获取权限的用户名(一般是当前用户名)’ /data/db

然后解压mongodb压缩包到work目录下(假设解压后的目录名为mongodb-2.0)，把$HOME/work/mongodb-2.0/bin添加到环境变量$PATH下。

最后我们试运行一下，执行mongod命令开启服务，新开终端执行下面命令(注意环境变量的问题)

mongo
db.foo.save({a:’1′})
db.foo.findOne()

如果没报什么错，到这里就算“搞定”啦！！

测试代码我就不写了，参考下面给出的网址就可以了。以上步骤nodejs+express的代码我试运行都可以正常运行，MongoDB就还没试过，只是在终端下可以操作而已，可能还需要配置些什么才能在代码里引用吧，这等做了实验后我再补上吧。

Javascript微模板引擎

pzling — Wed, 03 Aug 2011 13:11:12 +0000

Javascript微模板引擎，好吧，叫得这么好听其实就一简陋的前端模板。

后端模板大家应该听得比较多吧（Smarty，Velocity等），而前端我们通常是直接在JS里拼接我们需要的html，这种混合写在一起的方式，导致html结构稍微复杂点就很难看清楚，对维护造成一定的不便。所以人们就“发明”了模板这东西，使用一些特殊标记来代表数据循环、值替换等功能，使内容格式尽可能清晰。

模板的核心就是模板解析，下面要展示的引擎也仅有这个功能，没有其它扩展，要求不高的可以拿去试试！！下面我们来看一下该引擎的程序：

// Javascript Micro Templating
// pzling - http://pzling.com/
var JSMT = JSMT || {};
(function(JSMT){
	var tmplCaches = {},
		dictDecode = { "quot": '"', "lt": "<", "gt": ">", "amp": "&", "nbsp": " " };
		dictEncode = { '"': "quot", "<": "lt", ">": "gt", "&": "amp", " ": "nbsp" };
 
	/**
	 * HTML解码
	 * @param {String} html
	 */
	function htmlDecode(html) {
		return String(html).replace(/&(quot|lt|gt|amp|nbsp);/ig, function(all, key) {
			return dictDecode[key];
		});
	}
 
	/**
	 * HTML编码
	 * @param {String} html 
	 */
	function htmlEncode(html) {
		return String(html).replace(/["<>& ]/g, function(all) {
			return "&" + dictEncode[all] + ";";
		});
	}
 
	/**
	 * 模板解析函数
	 * @param {String} templating 模板字符
	 */
	function analyze(templating){
		var _temp =templating.replace(/<#([\s\S]*?)#>/g,function(s){
			return s.replace(/(\'|\\)/g,'\\$1')
					.replace(/[\r\n]/g,' ')
					.replace('<#',"_s.push('")
					.replace('#>',"');")
					.replace(/{\$([\s\S]*?)\$}/g,'\',$1,\'');
		});
		return new Function('var _s=[];' + _temp + ';return _s');
 
	}
 
	/**
	 * 模板注册函数
	 * @param {String} id 模板字符
	 * @param {String} data 模板字符
	 */
	function register(id,data){
		var tar;
		if(!id) return '';
		if(typeof id === 'object' && id.tagName){
			tar = id ;
			id = tar.getAttribute('id');
		}else{
			tar = document.getElementById(id);
		}
		if(!tmplCaches[id]){
			tmplCaches[id] = analyze(tar.innerHTML);
		}
		return tmplCaches[id].apply(data).join('');
	}
 
	/**
	 * 功能主调方法
	 * @param {String / Object} id 字符或dom对象
	 * @param {ALL} json 模板主要数据,任何数据类型都可以,模板使用this获取数据
	 */
	JSMT.render = function(id,json){
		var output = register.apply(this,[id,json || '']);
		return output;
	}
	/**
	 * 辅助方法
	 */
	JSMT.htmlEncode = htmlEncode;
	JSMT.htmlDecode = htmlDecode;
})(JSMT);

程序对外提供三个方法，render是功能的主调方法，另外是两个辅助方法，用于html的编码与解码（防XSS）。下面再来看一下模板的定义方法（我拿DEMO里的模板来讲解）：

    <ul id="list">
        <script type="text/template" id="item_tmpl1">
            for(var i = 0 ,len = this.length ; i < len ; i++){
                <# 
                    <li>
                        <p><a href='{$ this[i].name $}'>{$ this[i].name $}</a></p>
                        {$ JSMT.render("item_tmpl2",this[i].detail) $}
                    </li> 
                #>
            }
        </script>
    </ul>
    <script type="text/template" id="item_tmpl2">
        <#
            <p style="margin-left:10px;">Age:{$ this.age $}</p>
            <p style="margin-left:10px;">Gender:{$ JSMT.htmlDecode(this.gender) $}</p>
            <p style="margin-left:10px;">Hobby:{$ this.hobby$}</p>
        #>
    </script>

<# #>：要输出的(html)内容；

{$ $}：要替换的变量，必须嵌套在<# #>标记内；

this：代替你传进来的数据；

PS：{$ $}只能是变量、函数调用，三元运算。

模板内容包含在