JavaScript猥琐队列机制

JavaScript里面没有一种控制事情,或者函数调用的队列机制。

存在这样一种可能,后面的逻辑需要前面生成的对象,或者加载完成一个iframe页面才能执行后面的东西。但是队往往前提条件还没执行,后面的就已经执行了。由于网速或者其它一些不确定的原因混和在一起,加载或者执行顺序不确定。这种Bug就间歇性的出现,非常猥琐,非常难查。

image

方法一:

(function(){

	if(...){

	} else {
		setTimeout(arguments.callee, 350);
	}

})()

 

方法二:

(function(){

	try {
	   ...
	} catch(e){
		console.info() && console.info("ManualEditor && CustomerEditor has a Bug");
		setTimeout(arguments.callee, 500);
	}
})()

我想了这两种办法,来确认先行条件已经具备。才执行后面的函数。

当然,这只是应急的方法,还有待完善。待我Code Review一下YUI 的async-queue

6 七 2011, 9:06上午
javascript:
by

2 点高见,马上去办~~

自定义事件(Custom Event) 一

这个东西早在YUI,jquery初始的版本里面已经包括了。

但是在Nodejs把它用得炉火纯青。

开始分析:事件机制是一套类似于这样的流程:

Event —-> Handler


在起初的应用,我们似乎已经习惯了原生的那些事件源。但是,当一个程序越来越复杂的时候,事件驱动成了一个项目设计流程中必不可少词眼的时候,这些原生的事件显得是如些的骨感,我们要让她丰满一些~~

幸运的是,js的原生机制中有这样一个方法

Arguments —-> Function


是不是太熟悉,以至忘了她的存在。这样一眼看上去,和事件的触发机制如此的相像,抛出一个argument和function绑定,然后执行就完美的模仿了Event的机制,但是更重要的是—-我们可以随意的定义事件源。

 

NodeJS的customer event设计了这样一套机制

Image(1)[4]

在一个我们将要操作元素上,绑定了一个_Events属性。在这个属性里存储key/value的字量面对象,这个字面量对象可以是一对一,多对一,多对多都是个可以。

这就实现了我们在自定义事件中的第一个逻辑:自定义事件的绑定

这个里面已经有了Object,Event(对应key),Handler(对应Value),很好的定义了自定义事情与回调函数的对应绑定关系。

这就是: EventEmitter.prototype.addListener所做的工作.维系一个自定义事件和回调函数的对应表。

然后就需要考虑怎么来触发自定义事件

我们来看 EventEmitter.prototype.emit

Image(2)

它是这样处理的,如果直接传入回调函数,根据其数量的不同分别用 Call 来绑定。对于传入的数组循环一下再绑定。

OK: 如此简单的代码就完成了一整套自定义事件

华丽的分割线:
___________________________________________________________________________________________

把arguments由Like-Array转变成真正的Array过程中,大量使用了Array.prototype.slice.call()这个方法,这个方法的输出很有意思

 

(function(){
    console.info(arguments);
    console.info(arguments.length);
    console.info(typeof(arguments));
    console.info(typeof([]));
    console.info(arguments.constructor);
    console.info([].constructor);
    console.info(Array.prototype.slice.call(arguments,1));
})("a","b","c","d")

输出结果是:

Image(3)

很有意思吧~

下一节带来,大量Custom Event的应用

16 四 2011, 10:15上午
javascript:
by

发表点儿看法吧

CNodejs聚会之nodejs初探(一)

 

image

今天nodejs在betacafe举行活动。

早就久闻其大名—-这玩意所渲染的和nosql的东西结合起来前后端通吃,统一逻辑一套代码前后端都可以跑的概念,让人口水真流啊。哈哈,真的那样的话多省事儿,可以少跟很多人打交道,直接去取key/value形式的数据然后我们直接实现展现就可以了,流程可以流畅起来~~YYYY~~,继续YY,嘿嘿。

 

下面是我的笔记。

 

首先,代替后端直接用事件驱动的脚本来写后端逻辑可以由抽象变得形象一些。容易理解,开发难度降低。

 

性能方面的优势。

  • 单线程(single-thread)
  • 非阻塞式IO(non-blocking)
  • V8(runtime)

 

  单线程:

    • 单线程:多个请求占用一个线程
    • 多线程:一个请求占用一个线程

image

Nginx(单线程)vs Apache(多线程)

单线程占用更少的内存让系统有更好的性能。但是同时要认识到,这个问题单线程的可靠性差,一个请求异常了一个线程全挂。这里就需要考虑一 下实时性的系统就不能用nodejs来玩了吧?

 

非阻塞:

    • 非阻塞:事件状态保留,等到事件响应以后再执行事件上绑定逻辑。同时执行一下个监听事件。
    • 阻塞:事件状态不保留,等到事件响应以后再执行事件上绑定逻辑。下一个监听事件被中断。

image

Nginx(非阻塞)vs Apache(阻塞)

非阻塞会带来了那些问题呢?这个我还在想.

 

V8:

google大神的东西,把动态脚本的执行效率提升到一个新的高度。这样才有nodejs,commonjs这种东西的产生,让js可以脱离浏览器实现更多的东西。

 

回来做了下功课把nodejs装得玩了玩。

  1. wget,下taz文件。
  2. tar xzf解压下文件。
  3. 我的EC2 instance上没装openssl,直接 ./configure –without ssl
    image
  4. 然后就make,这个时间之长让人发指,花了我25分钟。后来我在nodejs群里面请教了一下前辈。原来nodejs在编译的时候要把v8引擎也要编译一次。
    image
  5. make install安装,一排排的.py刷屏~
    image
  6. 接下来就可以写自己的nodejs程序了
    image

 

ps:

电信从业者 @flyinweb 分享了"一个基于物联网的实时监控项目实践""

他们这个项目用

  • socket.io
  • connection pool
  • bayeux implement
  • multi-node
  • websocket client
  • node-mysql
  • log4js-node

这些开源组件集成起来了,讲了很多干货。

这玩意对我感触很大,我们太多工作花在自己造轮子上了,自已写底层框架,写具体逻辑。这点要向传统软件业的前辈们学习,多做集成少开发。当然 web app在国内刚刚火起来,能给我们做集成的框架,中间件太少了,这也是一个矛盾~~

总之,好多新东西要学习啦,加油~~~

2 九 2010, 12:21上午
javascript:
by

1 条指导

localStorage的用法

使用localStorage最简单的方式就是像一个正常对象那样的使唤他:

image

 

如果喜欢使用函数的话,我们也有类似的API:

image

如果你希望有个localStorage数据库可以对应当前会话,你可以使用sessionStorage。他提供同localStorage一样的接口,但是sessionStorage的生命周期被限制在当前浏览器窗口。你可以在同一个浏览器窗口中点击链接浏览,sessionStorage一直会被保存(去不同的网站也可以),一旦该浏览器窗口被关闭,数据库就会被删除了。localStorage针对长期存储,像w3c中描述的,浏览器应该把这类数据当作是“潜在的用户关键”数据。

不过当我发现localStorage仅仅支持保存字符串时未免有些伤心,我希望能够保存一些结构化的数据。我们可以借助Firefox 3.5中原生的JSON支持,可以非常容易的利用localStorage保存结构化对象数据:

localStorage数据库作用域限定于HTML5源定义,基本上就是三元组(scheme, host, port)。换句话说,本地存储数据库在同样域名下的网页间是共享的,即便是在多个浏览器标签页中。不过,使用http://连接的页面是看不到使用https://连接会话中的数据库的。

image

localStoragesessionStorage都在Firefox 3.5、Safari 4和IE8中得到支持。你可以在quirksmode.org找到更详细的兼容性信息,尤其是在保存事件的一节中。

27 五 2010, 9:11下午
ExtJs javascript:
by

发表点儿看法吧

Ext模块布局

Ext的容器布局分成了11种

BorderLayout
AnchorLayout
ColumnLayout
FitLayout
TableLayout
AbsoluteLayout
FormLayout
AccordionLayout
FormLayout
AccordionLayout
CardLayout
vBoxLayout
HBoxLayout

十一种布局可以归为五大类

Border布局 (BorderLayout)
锚定位布局 (AnchorLayout,AbsoluteLayout,FormLayout)
自适应位置布局  (FitLayout,AccordionLayout,CardLayout)
表列布局 (ColumnLayout, TableLayout)
箱子布局 (vBoxLayout,HBoxLayout)

image

23 五 2010, 11:58下午
javascript
by

发表点儿看法吧

可变布局的封装

image

这样一个导航栏,里面有四个容器而且容器的大小可以自己调节.这个组件怎么封装呢?

研究下Ext的layout组件~

image

25 九 2009, 1:28上午
javascript:
by

发表点儿看法吧

用Javascript对图片进行像素级的操作

网页中的图片在非等比操作的时候变形和失真非常严重。Firefox3.5以后的Gecko 1.9.1引擎中在Canvas标签中加入了一个imageData方法,可以把image的数据信息全部存储起来,让脚本来操作。如同flash中的的BitmapData一样的东东。

这儿有一个实例,展示了JS对图片的imageData操作。这里用了索贝尔算法(Sobel operator),通过查找图像边缘来进行等高横向拉伸

image  原图
image  Half image, 1 pass algorithm
image Full image, 1 pass algorithm
image Full image, full iterative algorithm
image pure css

对比一下,显然比纯css操作的效果要好得多。不过这种图像学里面的算法怎么玩对我这样的小白还是开飞机,以后HTML5,WebGL用得广泛了。框架多了就自然好操作了,在等待中纠结吧~~~~

  • 我在说

  • 我在看

  • 新文章

  • 文章归档