潘魏增 » JavaScript

javascript获取正则中的子匹配

Pan — Fri, 27 Mar 2009 13:54:23 +0000

昨天帮朋友处理一段文本正好用到了这个，记录一下。

var str = 'google123baiduabcemsnkkk';
var reg = /]*>([^<]*)</a>/i; // *? 非贪婪匹配
var arr = [];
while(reg.exec(str)){
arr.push({'link':RegExp.$1 , 'text':RegExp.$2});
str = RegExp.rightContext;//将str截断
reg.lastIndex = 0;//重置下次匹配开始的位置
}
console.info(arr);

另外两种正则表达式语法有一些不同，比如说转义。

#正则表达式语法 1
re = /pattern/[flags]
#正则表达式语法 2
re = new RegExp("pattern",["flags"])
#比如说要匹配"潘魏增(panweizeng)"，同时获取其中的子匹配panweizeng，对应的写法如下
var reg = /[^(]+(([^)]+))/g;
#这里需要对括号使用两个转义符号
var reg = new RegExp("[^$]+\(([^$]+)\)", "g");
var submatch;
if(reg.exec(str)){
submatch = RegExp.$1;
reg.lastIndex = 0;
}
console.info(submatch);

Firefox插件开发

Pan — Thu, 19 Feb 2009 14:57:22 +0000

今晚技术部交流主题，由于没有写helloworld，所以效果不是很好。Mozilla上面的例程很好，感兴趣可以看一看。

全屏地址（需要google帐号登录）：http://docs.google.com/Present?docid=ajj2j7mmgmtw_457jzbp2gt

YUI实现的Tab切换

Pan — Sat, 14 Feb 2009 16:19:20 +0000

YUI自带了一个TabView，虽然很简洁也很强大，但是常常不是想要的那种。Tab切换应该不依赖于HTML结构，能给设计人员和前端开发最大的灵活性。原理：一个tab对象分为控制部分(trigger)，内容部分(sheet)。当trigger被触发时，显示对应的sheet。

以前大树写过一个TabControl的代码，经过两年的使用依旧很考谱，说明当初这个思路还是比较符合实际需求的。我改成了基于YUI的版本，可能看起来更清晰一些。先访问测试页面查看效果，完整javascript代码在这里。

注意：改成实际代码时，请将Tab类放在某个命名空间下，不要直接暴露在全局空间中。

1：使用
以下是常用的html结构，但不限于此。

<ul id="t">
<li id="t1">t1li>
<li id="t2">t2li>
<li id="t3">t3li>
ul>
<div id="s">
<div id="s1">s1div>
<div id="s2">s2div>
<div id="s3">s3div>
div>

对应的javascript代码如下，四种初始化方法都是可以的。

var tab = new Tab($D.get('t').getElementsByTagName('li'), $D.get('s').getElementsByTagName('div'));//1
var tab = new Tab(['t1','t2', 't3'],['s1','s2', 's3']);//2
var tab = new Tab(['t1','t2','t3'],['s1','s2','s3'],{ triggerEvent:'mouseover',slideEnabled:true});//3
var tab = new Tab();//4
tab.add('t1', 's1');
tab.add('t2', 's2');
tab.add('t3', 's3');
tab.config['triggerEvent'] = 'mouseover';
tab.config['slideEnabled'] = true;
tab.onShow.subscribe(function(t, a){ ... });
tab.init();

2：扩展
已经实现自动切换功能(默认关闭)，另外可以通过onShow自定义事件扩展，也可以在原代码基础上添加更多的自定义事件。

Bespin: 开放式web开发平台

Pan — Fri, 13 Feb 2009 16:31:24 +0000

Bespin是Mozilla Labs中推出的一个开放、可扩展的web-based框架，旨在提高开发者生产力和用户体验，并促进开放标准的推广。框架中的代码编辑工具里面采用了HTML5的相关技术。同时，Mozilla的团队还释出一个实验性的原型版本，里面演示了Bespin的若干特性。

Bespin特点将会是简单易用、实时协作、集成命令行工具（是的，和vi/emacs一样）、可扩展和本地部署、快速编辑和随时随地接入。将来还可以直接导入代码库到项目中。

Bespin真正的目标是什么呢？会是基于web的加强版Dreamweaver吗？

前端工程师的救命稻草

Pan — Thu, 12 Feb 2009 16:18:41 +0000

1. css中的zoom:1。zoom:1在ie中会触发元素的hasLayout属性，能解决80%的ie布局bug。

.div_name { *zoom:1; }

在javascript操作DOM和调整布局时也可以使用reflow函数，如下：

function reflow(){
document.body.style.zoom = 1.1;
document.body.style.zoom = '';
}

hasLayout的介绍见《On having layout》。

2.javascript中的setTimeout大法。具体就是：

function dosomething(){...}
window.setTimeout(function(){ dosomething(); }, 0);

这个在Javascript对DOM节点操作时很有用，能解决一些奇怪的问题。具体解释见《认识延迟时间为 0 的 setTimeout》。

基于YUI的封装开发

Pan — Tue, 03 Feb 2009 15:32:47 +0000

这是去年我在一次公司内部讨论会上的交流主题，相关ppt和样例代码在这里下载。

YUI是Yahoo的前端开发框架，它的优点是代码清晰（尽管代码量不小），面向对象和组件，便于协同开发。另外，Yahoo对web开发社区的贡献一直都很积极。

在YUI上扩展开发，一般会采用两种方式，基于对象（object）和基于原型（prototype）。

1. 基于对象（object）
形如singleton单件模式，保证命名空间整洁，方便管理代码。

HN.app.Book = {
dialog:new HN.widget.Dialog(),
getDialog:function(){
return this.dialog;
},
paging:function(){......}
}

实例

/**
* @fileOverview 书架(book) app
*/
HN.namespace('app.Book');
HN.app.Book = (function(){
//YAHOO alias section
var $C = YAHOO.util.Connect,
$D = YAHOO.util.Dom,
$E = YAHOO.util.Event,
$CE = YAHOO.util.CustomEvent,
dialogId = 'abc';//private variable
function getBook(id){...}//private method
return {
dialog:null,
getDialog:function(){
var dg = this.dialog;
if(!dg) {
dg = new HN.widget.Dialog({id: dialogId});
this.dialog = dg;
}
return dg;
},
getComment:function(bookId,callback){
var dg = this.getDialog(),
bookItem = getBook(bookId);
}
}//return ends here
})();

2. 基于原型（prototype）
灵活度高，适合编写通用组件。

HN.widget.Dialog = function(config){
if(config && config.id)
this.id = config.id;
}
HN.widget.Dialog.prototype = {
setBody:function(html){…},
show:function(){…}
}

实例

/**
* @fileOverview 评星级(Rating) widget
*/
HN.namespace('widget.Rating');
(function(){
//YAHOO alias section
var $C = YAHOO.util.Connect,
$D = YAHOO.util.Dom,
$E = YAHOO.util.Event,
$CE = YAHOO.util.CustomEvent,
counter = 0;//private variable
function find(key,arr){...} //private method
HN.widget.Rating = function(el,config) {
this.isInProgress = false;
this.setConfig(config);
this.onComplete = new $CE('onComplete', this);
this.init();
}
HN.widget.Rating.prototype = {
setConfig:function(config){
if(!config) return;
for(var attr in config){
this.config[attr] = config[attr];
}
},
setState:function(){...},
post:function(id){...},
init:function(){...}
}//prototype ends here
})();

javascript变量作用域的几个例子

Pan — Mon, 02 Feb 2009 16:20:00 +0000

1. javascript无块级作用域，变量在函数内部可见。和php类似。

function func_scope(){
var x=1;
if (true) {
var x=2;
if (true) {
var x=3;
alert(x);
}
alert(x);
}
alert(x);
}
func_scope();

输出：
3
3
3
2. 对象初始化可以对自身的属性执行修改，可以修改全局变量的值。

function foo(){
foo.abc = function(){alert('def')};
this.abc = function(){alert('xyz')};
abc = function(){alert('@@@@@')};
var abc = function(){alert('$$$$$$')};
}
foo.prototype.abc = function(){alert('456');}
foo.abc = function(){alert('123');}
var f = new foo();
f.abc();
foo.abc();
abc();

输出：
xyz
def
错误： abc is not defined （相应解释在第3个例子中）
3. 函数内，只要变量名前面出现var则该变量为局部变量。

var myVar = "GLOBAL";
function foo() {
// myVar已经在下面声明，但是在此之前却没有定义
alert("myVar evaluates to '"+myVar+"'");
// 这个myVar其实是局部变量
myVar = "NEW_GLOBAL_VALUE";
alert("myVar evaluates to '"+myVar+"'");
// window.myVar指向全局的myVar
alert("myVar evaluates to '"+window.myVar+"'");
// 声明一个局部变量myVar，去掉这个则输出结果就完全不同
var myVar = "LOCAL";
alert("myVar evaluates to '"+myVar+"'");
}
foo();
alert("myVar evaluates to '"+myVar+"'");

输出：
myVar evaluates to ‘undefined’
myVar evaluates to ‘NEW_GLOBAL_VALUE’
myVar evaluates to ‘GLOBAL’
myVar evaluates to ‘LOCAL’
myVar evaluates to ‘GLOBAL’

对应第2个例子，foo中的abc（abc = function(){alert(‘@@@@@’)};）为局部变量，全局变量中没有定义过abc所以会报undefine的错误。

结论：
* 1.变量函数内可见；
* 2.只要在函数内部声明变量使用了var，则该变量在整个函数内部都是局部变量；
* 3.声明所有的变量都应该加上var，防止产生歧义；
* 4.尽量避免引入全局变量。

参考文档：
http://www.itmill.com/articles/Javascript_global_and_local_variable_scope.htm
http://birdshome.cnblogs.com/archive/2005/01/26/97885.html
http://www.planabc.net/2007/09/20/javascript_examination_questions/

视频网站播放列表的简单实现

Pan — Sun, 24 Aug 2008 15:35:47 +0000

以前写的代码，写得比较简单。这里贴一下，我觉得可以作为演示Javascript操作cookie用:)

效果看这里，完整代码（代码中的CookieManager抄袭自O’Reilly的《JavaScript & DHTML Cookbook》，Utility.each函数抄袭自JQuery中的each）在这里。

下面是关键的代码部分：

var PlayList = {
cookieName:'PlayListIds',
//保存要播放的视频id列表
ids:[],
//过期时间单位秒
expires:30,
//读取cookie保存的播放列表信息播放id保存格式为1232.1221.213.123 以.间隔
read:function(){
var cookieString = CookieManager.get(this.cookieName);
return cookieString != '' ? cookieString.split('.') : [];
},
//获取视频id在数组中的索引
indexOf:function(id){
for(var i =0 ; i < this.ids.length; i++)
if(this.ids[i] == id.toString())
return i;
return -1;
},
//更新cookie信息
update:function(){
CookieManager.set(
this.cookieName,
this.ids.join('.'),
CookieManager.getExpiresDate(0,0,this.expires),
'/',
'.panweizeng.com'
);
},
//增加视频
add:function(id){
if(typeof id != "number" || this.indexOf(id) != -1) return;
this.ids.push(id.toString());
this.update();
},
//移除视频
remove:function(id){
var index = -1;
if(typeof id != "number" || (index = this.indexOf(id)) == -1) return;
this.ids.splice(index,1);
this.update();
},
//清空列表
clear:function(){
CookieManager.clear();
var pItem = null,pItemSel = null;
for(var i = 0; i < this.ids.length; i++){
if( (pItemSel = $('playlist-item-sel-'+this.ids[i])) != null
&& (pItem = $('playlist-item-'+this.ids[i])) != null )
{
pItemSel.className = "unselected";
pItemSel.title = "添加到点播单";
pItem.getElementsByTagName("img")[0].style.border = "5px solid white";
}
}
},
//渲染
renderSelected:function(){
var pItem = null,pItemSel = null;
for(var i = 0; i < this.ids.length; i++){
if( (pItemSel = $('playlist-item-sel-'+this.ids[i])) != null
&& (pItem = $('playlist-item-'+this.ids[i])) != null )
{
pItemSel.className = "selected";
pItemSel.title = "从点播单移除";
pItem.getElementsByTagName("img")[0].style.border = "5px solid yellow";
}
}
},
//处理点击
toggle:function(el){
if(el.className == 'unselected'){
el.className = 'selected';
el.title = "从点播单移除";
el.parentNode.getElementsByTagName("img")[0].style.border = "5px solid yellow";
this.add(parseInt(el.getAttribute('sid')));
} else {
el.className = 'unselected';
el.title = "添加到点播单";
el.parentNode.getElementsByTagName("img")[0].style.border = "5px solid white";
this.remove(parseInt(el.getAttribute('sid')));
}
},
//绑定事件
attachEvent:function(){
var _ = this;
var els = Utility.getElementsByClassName("playlist","a","unselected");
els = els.concat(Utility.getElementsByClassName("playlist","a","selected"));
Utility.each(els,function(i,el){
Utility.bind(el,'click',_.toggle,_,el)
})
},
//初始化
init:function(){
this.ids = this.read();
this.renderSelected();
this.attachEvent();
}
}

近期学习成果

Pan — Sun, 24 Aug 2008 12:43:00 +0000

在上班休息时间断断续续看完了《ppk谈Javascript》和《精通Javascript》。这两本书都是不错的译作，前者主要面向初级开发者，后者则主要面向需要进阶的同学。从这两本书中学习了很多以前我忽略或者没掌握的基本知识。

Peter-Paul Koch主修古希腊罗马史，所以我觉得ppk一书写得最好的是Javascript历史部分，还有事件那一章也是非常精彩。ppk书中提出的一些观点还有待斟酌，淘宝UED团队的译者们都一一做了批注，所以强烈推荐大家去买中译本吧。

JQuery之父John Resig写的《精通Javascript》主要讲述现代Javascript程序设计，尤其是前面三章让人手不释卷。书中对于DOM、事件和CSS部分写得也非常好，绝对是专家级的讲解。原书中的校对错误不少，还好译者安安在网上准备了一份勘误表。

造成IE浏览器发生Stack Overflow错误的可能原因

Pan — Tue, 05 Aug 2008 15:54:12 +0000

1. IE缓存满了，无法写入。解决办法：清空缓存目录

2. 重复引用相同的Javascript文件。解决办法：去掉重复的文件

3. 无退出条件的递归和循环。解决办法：检查代码

4. 欢迎补充

参考网页http://www.webmasterworld.com/forum21/10213.htm