Designsor

根据昨天写的那篇文章，今天写了个例子来配合说明。没有列举超人起飞的例子，那个例子是给自定义的superman对象，添加了3个自定义事件，而我下面的例子是给大家最熟悉也最关心的Element对象添加自定义事件。

代码如下（需要引入publisher）：

var fuck=function(e){
this.e=e || ”;
alert(this.e+’ fuck off’);
}

Element.prototype.onfuck=new publisher;

fuck.subscriber(Element.prototype.onfuck);

var page=document.getElementById(’page’);

page.onfuck.deliver(); //alert(fuck off);

page.onfuck.deliver(1); //alert(1fuck off);

/* 你可以给你喜欢的事情随便添加自定义事件，在需要的时候就deliver触发。 */

page.onclick=function(){
this.onfuck.deliver(’ye~click my ‘+this.id+’ and’); //alert(ye~click my page and fuck off);
}

最后，关于自定义事件的触发条件，必须在这里说明，他的触发，比如click，比如mouseover等动作的实现
是需要自己来编写的，你可以借助click等动作触发，也可以自己模拟，比如重复轮询等，触发用deliver，触发条件必须自己实现。

所以最后的最后，自定义事件或者观察着模式的应用和作用，总结起来就是更彻底的包装了一些代码，实现js的高度解耦，让功能去做功能要做的事，分离开功能和被事件所绑定的对象，可能是Element对象，也可能是自己所创建的对象，任何对象。

希望我不要误导到一些人吧，更多关于自定义事件的文章google一下，仔细阅读，很多种实现方法，关键看适用场合适用场景了。这只是一种设计思想，而不是什么万能药，在需要实现很复杂的业务逻辑的时候用来解耦的一种很好方法。

首先说下标题，可能有点唬人，所以简单的解释一下，我是为了帮助自己理解才写的这篇文章。

个人认为观察者模式类似事件监听器，给任何一个你感兴趣的地方增加一个订阅点，然后在需要的时候触发它。

还是有点迷糊，看代码吧。

我们创建一个观察者类：

function publisher(){
this.subscribers=[];
}

这个构造器里有一个subscribers数组，用来保存订阅者列表。

增加投递方法：

publisher.prototype.deliver=function(data){
this.subscribers.forEach(function(fn){fn(data);})
return this;
}

里面用到了forEach这个js1.6的数组方法，array.forEach(fn)->参数是个函数，这个函数的参数会把这个数组的每个值都带入这个函数中当参数执行一次。

下面是增加订阅方法：

Function.prototype.subscriber=function(publisher){
var that=this;
var alreadyExists=publisher.subcribers.some(function(el){return el===that;});
if(!alreadyExists) publisher.subscribers.push(this);
return this;
}

解释一下，这里的some也是js1.6里的一个数组方法，以一个回调函数为参数，这个方法会依次访问数组每个元素，然后并把这个元素当作参数返回给这个回调函数，如果至少有一次回调函数的返回值是true，（其实就是如果有一个回调函数返回了true）则some返回true；否则返回false。

退订方法就不写了，其实就是在subscribers数组中检测，如果含有退订函数，则清空它。

OK。

现在理清一下思路。publisher和我们都做了什么。

publisher类，内部有一个数组，储存订阅清单。

外部方法deliver(data)，作为增加订阅者也就是投递订阅的接口，参数data为回调参数。

然后给function原型增加了一个subscriber方法，用途是给这个function添加到publisher.subscribers这个数组下。

OK。到这里估计就真相大白了。

我们其实就是给每个函数增加了一个往一个全局数组中push的方法，然后需要触发这个函数的时候，就循环这个数组，遇到注册过的这个函数，就立刻触发。

设计模式书上的例子是给一个superman创建一个起飞的订阅，一个飞行中的订阅，一个降落的订阅。其实我们可以给任何东西增加订阅，也就是监听，监听我们感兴趣的时刻，然后触发回调函数即可。

本来还想写写自定义事件，但是确实想不出容易的例子来，以后再说吧，但是道理其实都是一样的。

在twitter上看到一篇比较好的推荐文章，至少我感觉又学到了东西，特别拿出来翻译和分享一下。

原文地址：http://javascript.feederss.com/post/2442.html

如果你做过用户文本框提交确认的功能，比如用到了onkeypress，那么你是否想过要减少你的检测函数的执行次数？举个最简单的例子，比如你要确认一个用户名是否存在，那么你可能并不想每次keypress都执行ajax异步检测，因为大多数的时候输入一个单词需要10分之一秒或者更久，那么你就需要控制你的ajax请求的间隔，而不是每次press之后都立刻去进行ajax请求，至少要在那10份之一秒钟让你的文本框处于休眠状态。

所以就会产生这么一个神奇的类似closure的一种javascript方案，下面是创建这个方法的一个简单的例子：

function throttle(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

如果你是在用jquery来工作的话，如果你要写一个keypress的检测，你可以像下面这样使用：

$('input.username').keypress(throttle(function (event) {
  // do the Ajax request
}, 250));

这里的关键词是this和那个args，this其实就是你预期的那个input，而args是传入的event对象，通过这个方法你就可以准确的控制你的ajax请求是press一次的之后250毫秒过后再次触发了。

大概就是这么一篇文章，但是我承认以前确实没有注意到过，关于那个throttle函数，我在firebug里检测了下，里面最不明白的其实就是那个this和args。通过断点我检测出来了，虽然他文章最后也告诉了。

恩，最后如果你不用jquery的话，原始的js如何使用这个函数呢？

document.getElementById(’page’).onclick=throttle(function(e){
alert(e);
alert(’3000 later’);
},3000)

恩。。。就是这么简单……^_^

对了 这个文章的作者挺NB的，我也推荐订阅他的tw和rss……

头几天被一个人要求写个表单可以自己加减输入框的例子。

简单用纯的js实现了，其实，用jquery的话几行就搞定了，代码如下：

http://pastebin.com/iarf8GSs

没什么好说的了。。。在努力狂读设计模式ing…

截图：

代码比较简单，有部分基于YUI。其实就是其中的DOM里的一个get方法，一个getViewportHeight/Width方法，还有一个 getDocumentScrollTop方法，应该所有框架都有的，我就没有自己写了。

代码实现部分如下链接，注释应该也很清楚，比较好理解，做个记录，以后用到就都使它了。。

http://pastebin.com/2gYMiAmG

先把代码地址放上来：http://pastebin.com/egT0gADN

然后看下大概的效果，今天下午来公司，最后一次在这个电脑前面弄点东西，想去看电影，扫到了mtime里，看见了他们的图片全部都带了个小阴影，我想了想，先用css方法实现了，之后又写了段不伦不类的js代码又实现一遍。

主要是最近看了一些乱七八糟的东西，就想试验下效果。主要代码看上面的地址吧。

图片阴影的效果如下：

CSS的思路其实就是给图片和a标签做一个left和top的负值即可。

然后我用js重新写了下实现，里面包括一个简单的递归循环函数，一个查找元素函数，一个getclass函数，并且都自带回调方法，算模仿jquery吧，可以看下实现和使用。其他的就木有了，这个方法写的也比较奇怪，其实就是个字面量对象。

很久不更新什么内容了。其实还是因为不太知道该写点什么。

昨天晚上给一个同学讲了好久的javascript的基础知识，其实我基础也不好，没什么资本给别人说教什么。其中就讲到了DOM和BOM这2个东西。

到底它们是什么，我想每个人都会有自己心里自己的答案，我也不说这么基础的问题了。

但是不知道你们有没有想过这样一个问题，DOM对象和BOM对象在不同浏览器下的差异问题到底是为什么呢。如果没有文档总结你要怎么办呢，还有非常全的关于这2个对象的手册在哪里呢？

其实，答案都在浏览器自己内部留着。

代码很简单，可以在jstyrtime里跑一下:

for(var i in window){alert(i+’:'+window[i])};

for(var i in document){alert(i+’:'+document[i])};

查看当前浏览器的window或者document对象或者其他一些浏览器内置对象或者js原生对象等。

运行在不同浏览器下的不同结果，我跑了一下，总结了下面几个表格内容，针对DOM和BOM这2个对象，地址如下：

http://www.designsor.com/demo/dom/bom.html

可以方便大家查阅所有的对象方法名并区分了各种浏览器，仔细看一看，我只想对所有的浏览器说一句：艹你大爷的……。

首先地址如下：

http://www.designsor.com/jstime/

扔个示意图：

当然了，如果你不开firebug，禁用的话，结果会直接打到页面中，而且支持IE，chrome，意思是，有控制台的就用控制台，没控制台的就直接在页面中报出log信息。

显示控制分为3项，log信息，运行速度信息（MS单位），我自定义的警告信息，还有你输入代码的错误catch信息。

看看下面这张图：

这个工具不光可以跑原生js的代码，而且支持你加载不同的框架库，来运行你依赖的代码片段，目前支持4个核心js文件的选择，jquery，mootools，dojo，yui2 core。加载js 的方法是用的jquery里$.getscript()方法的源码。

再看下面的图，如果你的浏览器没有支持console对象，那么输出信息会变成如下：

页面底部直接log出了信息，输出的是我选择jquery中的$。

最后还有一些其他的小用处，比如中文转unicode编码……你可以直接在文本框中输入汉字。如下图：

那么输出的脚本错误信息的结果，我们可以看出小爝的unicode码就是……\u5cof \u721d啦……

其他功能有待大家自由发挥，其他功能有待以后慢慢扩展，这个工具还可以自动转换alert为console.log,量身为我自己设计打造…………-_-||

以后可能会推出新页面运行代码？临时保存代码片段地址？或者代码高亮？或者其他更NB的控制台功能？或者测速更加准确有对比性？还是未知= =||

最后的最后，如果你的浏览器有控制台，那么好，要不你在开始就把他开开，要不你就一直关着他。否则一会console对象存在，一会不存在的，丫不报错才怪呢。。

咳咳，当然大家都知道推特是被墙的。

那么，翻墙好了，咳咳。

还记得以前饭否么，恩，饭否可以有一个小的flash插件挂在自己的BLOG上，有段js调用，就可以实时更新自己的状态。那时候还觉得，我擦，真神奇，现在想想，其实也就是个内部的api。

今天逛别人blog，看到了一个小应用，就是类似以前饭否的那个东西，只不过数据是twitter的。我一看，哎呀，自己也做个吧。方便一些观众更加了解我，也方便自己更进一步的装X。

看下首页右下角，如图：

额，首先把实现思路和大家说下，由于最近做小偷程序做的太多了……（低头），我第一个实现方法就还是那些老套路。。

恩，那么继续，api是我自己的，由于我的WordPress服务器在美国，所以基本不存在翻墙的问题，访问下面的地址你就懂了。

http://www.designsor.com/demo/tw/curl.php?url=http://twitter.com/xiao_jue/

恩，简单的一个curl翻墙，php代码如下：

<?php
$url=$_GET['url'];
$ch = curl_init($url);
curl_exec($ch);
//echo $ch; 可以删掉了，具体为什么见4楼……
curl_close($ch);
?>

主要就是借助我国外的主机，抓取了一下被墙的页面……

之后嘛，嘿嘿，要制作这个twitter小玩意就好办多了。

js部分代码：

/*@author xiaojue*/
/*twitter prowed by jqueryAjax*/
$.ajax({
url:’http://www.designsor.com/demo/tw/curl.php?url=http://twitter.com/xiao_jue/’,
type:’get’,
success:function(html){
var reg=/.*?<\/span>/ig; //2条抓数据的正则
var reg2=/.*?<\/span>/ig;
var time=html.match(reg2); //获得时间
var tw=html.match(reg); //获得我说的话
time=time.slice(0,10); //取前10条
tw=tw.slice(0,10).join(”);
$(’#tw’).html(tw);

//把时间加入到说过的话的下面，并且添加hover效果事件。

$(’#tw span’).each(function(i){
$(this).after(time[i]);
$(’a',this).click(function(){return false;})
}).hover(function(){
$(this).css({’color’:'#336699′})
},function(){
$(this).css({’color’:'#666′})
});

//设置抓取来的时间部分的样式
$(’#tw span:odd’).each(function(i){
$(this).css({’border-bottom’:'#ccc dashed 1px’,'padding’:'5px 0px’,'font-size’:'9px’,'color’:'#666′});
});
},
error:function(){
$(’#tw’).text(’加载twitter数据失败’);
}
});

js部分应该很容易懂，其实就是分析了下twitter的页面html结构，然后写了2条正则，处理了下自己的blog页面的html，添加了几条样式。就齐活了。

主要提供一个抓取外加翻墙的思路，如果你也想做一个类似的东东而没有看懂上面的某个部分，欢迎留言交流或者gtalk我！

先上图吧~

扩展地址：
https://chrome.google.com/extensions/detail/bpnpaekhdjhmgodlllkkkohgbgadgjdl

如果你总是迷路，或者总是外出，我觉得你挺应该装一个的。。。 （其实主要还是我自己使用方便，上面的功能基本都是给自己定制的……）

支持：
1，你的IP地址定位。（腾讯api）
2，当日，次日天气预报（google weather api）
3，你的城市所在地定位（maxmind api）
4，你当前地理位置的定位—目前来说有点不太准……(google map api)
5，查询你想到的任何地方的地图查询（google map api）
6，查询你国内目前的火车票票价与车次。（trainInfo api）
7，查询手机归属地等手机卡信息。（shouji.com的api）

————————————————–可能以后扩展的功能—————————-

可能以后会做支持查询飞机票的……虽然组里有人说比较难实现了，没有API，只有爬虫抓了。

以后非常可能而且可能明天就会做的其他地区城市的天气预报查询。

暂时想到这么多，其实还想再连接一个淘宝的JavaScript api做本地网店实体店一览之类的功能。。。

具体想到这么多。BUG还比较多，源代码也比较乱，编程风格也比较肥猪流，以后慢慢修改……