当前位置:  编程技术>WEB前端
本页文章导读:
    ▪JS模拟自动点击      <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript模拟鼠标自动点击链接</title> <script type.........
    ▪Node.js高级编程:用Javascript构建可伸缩应用(2)1.2 介绍和安装-Node介绍      本系列文章列表和翻译进度,请移步:Node.js高级编程:用Javascript构建可伸缩应用(〇)本文对应原文第一部分第二章:Introduciton and Setup:Introducing Node文章是从Word复制到wordpress,版面有些不.........
    ▪JS中style.display和style.visibility的区别      在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示,在style.display=block和style.visibility=visible的时候,元素被显示,在style.display=none和style.visibility=hidden的时候,元素被隐藏.........

[1]JS模拟自动点击
    来源: 互联网  发布时间: 2013-10-22
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript模拟鼠标自动点击链接</title>
<script type="text/javascript">
var mytime = 1000;	
function myclick()
{
	window.location.reload();	
}

function autoclick(){
	setTimeout("myclick()",mytime);
}

</script>
</head>
<body onload="autoclick()">
<a href=/blog_article/"http_/people.rednet.cn/PeopleShow/ID/1391500/quot;.html id="auto" target="_blank">你也可以手动点击</a>
<iframe width = "300" height = "300" src = "http://people.rednet.cn/PeopleShow.asp?ID=1391500" id="targetFrame"></iframe>
</body>
</html>
利用autoclick初始化页面,再自动刷新iframe.
作者:a49688448 发表于2013-1-10 10:45:06 原文链接
阅读:37 评论:0 查看评论

    
[2]Node.js高级编程:用Javascript构建可伸缩应用(2)1.2 介绍和安装-Node介绍
    来源:    发布时间: 2013-10-22

本系列文章列表和翻译进度,请移步:Node.js高级编程:用Javascript构建可伸缩应用(〇)

本文对应原文第一部分第二章:Introduciton and Setup:Introducing Node

文章是从Word复制到wordpress,版面有些不一致,可以点这里下载本文的PDF版。

第二章:Node介绍

本章内容:

  • 什么是事件驱动编程,有什么优点
  • Node.js如何简化了事件驱动开发

在传统程编程模里,I/O操作就像一个普通的本地函数调用:在函数执行完之前程序被堵塞,无法继续运行。堵塞I/O起源于早先的时间片模型,这种模型下每个进程就像一个独立的人,目的是将每个人区分开,而且每个人在同一时刻通常只能做一件事,必须等待前面的事做完才能决定下一件事做什么。但是这种在计算机网络和Internet上被广泛使用的“一个用户,一个进程”的模型伸缩性很差。管理多个进程时,会耗费很多内存,上下文切换也会占用大量资源,这些对操作系统是个很大的负担,而且随着进程数的递增,会导致系统性能急剧衰减。

多线程是个替代方案,线程是一个轻量级的进程,它会和同一个进程内的其它线程共享内存,它更像传统模型的扩展,用来并发执行多个线程,当一个线程等待I/O操作时,其它线程可以接管CPU,当I/O操作完成,前面等待的线程会被唤醒。就是说,一个运行中的线程可以被中断,然后稍候再被恢复。此外,在一些系统下线程可以在多核CPU的不同核心下并行运行。

程序员并不知道线程会在什么具体时间运行,他们必须很小心的处理共享内存的并发访问,因此必须使用一些同步原语来同步访问某个数据结构,比如使用锁或信号量,以此来强制线程以特定的行为和计划执行。那些大量依赖线程间的共享状态的应用程序,很容易就会出现一些随机性很强,难以查找的奇怪问题。

还有一种方式是使用多线程协作,由你自己负责显式的释放CPU,并把CPU时间交给其他线程使用,因为由你亲自来控制线程的执行计划,因此减小了对同步的需求,但是也提高了程序的复杂度和出错的机会,而且并没有避免多线程的那些问题。

什么是事件驱动编程

事件驱动编程(Evnet-driven programming)是一种编程风格,由事件来决定程序的执行流程,事件由事件处理器(event handler)或事件回调(event callback)来处理,事件回调是当某个特定事件发生时被调用的函数,比如数据库返回了查询结果或者用户单击了一个按钮。

回想下,在传统的堵塞I/O编程模式里,数据库查询可能像这样:

result = query('SELECT * FROM posts WHERE id = 1');

do_something_with(result);

上面的query函数会让当前线程或进程一直处于等待状态,直到底层数据库完成查询操作并返回。

在事件驱动模型里,这个查询会变成这样:

query_finished = function(result) {

        do_something_with(result);

}

query('SELECT * FROM posts WHERE id = 1', query_finished);

         首先你定义了一个叫query_finished的函数,它包含了查询完成后要做的事。然后把这个函数当做参数传递给query函数,当query执行完毕会调用query_finished,而不是仅仅返回查询结果。

当你感兴趣的事件发生时会调用你定义的函数,而不是简单的返回结果值,这种编程模型就叫事件驱动编程或异步编程。这是Node一个最明显的特性,这种编程模型意味着当前进程在执行I/O操作时不会被阻塞,因此,多个I/O操作可以并行执行,当操作完成后相应的回调函数就会被调用。

事件驱动编程底层依赖于事件循环(event loop),事件循环基本上是事件检测和事件处理器触发这两种函数不断循环调用的一个结构。在每次循环里,事件循环机制需要检测发生了哪些事件,当事件发生时,它找到对应的回调函数并调用它。

事件循环只是运行在进程内的一个线程,当事件发生时,事件处理器可以单独运行并且不会被中断,也就是说:

  • 在某个特定时刻最多有一个事件回调函数运行
  • 任何事件处理器运行时都不会被中断

有了这个,开发人员就可以不再为线程同步和并发修改共享内存这些事头疼了。

 

一个众所周知的秘密:

很久以前,系统编程社区的人们就知道事件驱动编程是创建高并发服务最佳方式,因为它不用保存很多上下文,因此节省了大量内存,也没有那么多上下文切换,又节省了大量执行时间。

慢慢的,这种理念渗透到了其他的平台和社区,出现了一些有名的事件循环实现,比如Ruby的Event machine,Perl的AnyEvnet,以及Python的Twisted,除了这些还有很多其它的实现和语言。

用这些框架做开发,需要学习框架相关的特定知识以及框架特定的类库,比如,使用Event Machine时,为了享受非阻塞带来的好处,你得避免使用同步类库,只能用Event Machine的异步类库。如果你使用了任何阻塞类库(比如Ruby的大多数标准库),你的服务器就失去了最佳的伸缩性,因为事件循环依然会不断地被阻塞,时不时地阻碍了I/O事件的处理。

Node最初就被设计成一个非阻塞I/O服务器平台,因此一般情况下,你应该期望运行在它上面的所有代码都是非阻塞的。因为JavaScript非常小,而且它不强制使用任何I/O模型(因为它没有标准的I/O类库),因此Node建立在一个很纯净的环境里,不会有什么历史遗留问题。

 

Node和JavaScript如何简化了异步应用程序

Node的作者Ryan Dahl,最初使用C来开发这个项目,但是发现维护函数调用的上下文太复杂,导致代码复杂度很高。然后他转用Lua,但是Lua已经有个几个阻塞的I/O类库,阻塞和非阻塞混在一起可能会让开发人员很迷惑并因此阻碍了很多人构建可伸缩的应用,于是Lua也被Dahl抛弃了。最后他转向了JavaScript,JavaScript中的闭包及第一级对象的函数,这些特性使JavaScript非常适合用作事件驱动编程。JavaScript的魔力是让Node如此流行的一个主要原因。

什么是闭包

闭包可以理解为一个特殊的函数,但是它可以继承并访问它自身被定义的那个作用域里的变量。当你将一个回调函数作为参数传递给另外一个函数时,它稍候会被调用,神奇的是,这个回调函数被稍候调用时,它居然记住了它自身定义所在的那个上下文以及父上下文里的变量,而且还可以正常访问它们。这个强大的特性是Node成功的核心。

下面的例子将展示在Web浏览器里JavaScript闭包是如何工作的。假如,你要监听一个按钮的单机事件,你可以这样做:

var clickCount = 0;

document.getElementById('myButton').onclick = function() {

        clickCount += 1;

        alert("clicked " + clickCount + " times.");

};

使用jQuery时是这样:

var clickCount = 0;

$('button#mybutton').click(function() {

        clickedCount ++;

        alert('Clicked ' + clickCount + ' times.');

});

         JavaScript里,函数是第一类对象,就是说你可以把函数当作参数来传递给其他函数。上面的两个例子,前者把一个函数赋值给另一个函数,后者把函数作为参数传递给另一个函数,单击事件的处理函数(回调函数)可以访问函数定义所在代码块下的每个变量,在这个例子里,它可以访问在它父闭包内定义的clickCount变量。

clickCount变量处在全局作用域(JavaScript里最外层的作用域),它保存了用户点击按钮的次数,通常在全局作用域下存储变量是个坏习惯,因为那样很容易跟其他代码冲突,你应该把变量放在使用它们的本地作用域里。大多时候,只用把代码用一个函数包装起来,等于另外创建了闭包,这样就可以很容易避免污染全局环境,就像这样:

                  (function() {

               &n

    
[3]JS中style.display和style.visibility的区别
    来源: 互联网  发布时间: 2013-10-22

在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示,在style.display=block和style.visibility=visible的时候,元素被显示,在style.display=none和style.visibility=hidden的时候,元素被隐藏。它们之间最大的区别是通过style.display=none隐藏的时候,元素不占据原来的位置,从文档流中脱离,后续的元素填补其位置。通过style.visibility=hidden隐藏的时候,元素仍然占据原来的位置,只是被隐藏。

下面的例子说明了这种区别:在这个例子中,divContent1和divContent2隐藏的时候用的是style.display=none,这时候,后面的div会向上移动,占据已经隐藏的div的空间。divContent3和divContent4用的是style.visibility=hidden来隐藏,但是其隐藏后仍然占据原来的空间。

<html>
<head>
<title>test</title>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<style>
.titlediv{background-color:#eee;color:white;font-weight:bold;padding:10px;cursor:pointer }
.contentdiv{border:3px solid blue;height:100px;padding:10px; }
</style>
<script type="text/javascript">  
function toggle(divid){
	var odiv = document.getElementById(divid);
	odiv.style.display=(odiv.style.display=="none")?"block":"none";
}

function showhide(divid){
	var odiv = document.getElementById(divid);
	odiv.style.visibility=(odiv.style.visibility=="visible")?"hidden":"visible";
}
</script>    
</head>  
<body >  
	<div divContetn1')">click here</div> 
	<div class="contentdiv" id="divContetn1">this is some content to show and hide
	</div>
	<p> </p>
	<div divContetn2')">click here</div> 
	<div class="contentdiv" id="divContetn2">this is some content to show and hide
	</div> 
	<p> </p>
	<div divContetn3')">click here</div> 
	<div class="contentdiv" id="divContetn3">this is some content to show and hide
	</div>
	<p> </p>
	<div divContetn4')">click here</div> 
	<div class="contentdiv" id="divContetn4">this is some content to show and hide
	</div>		
</body>  
</html>

作者:kkdelta 发表于2013-1-10 14:08:45 原文链接
阅读:0 评论:0 查看评论

    
最新技术文章:
▪css white-space:nowrap属性用法(可以强制文字不...
▪IE里button设置border:none属性无效解决方法
▪border:none与border:0使用区别
▪html清除浮动的6种方法示例
▪三个不常见的 HTML5 实用新特性简介
▪css代码优化的12个技巧
▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
▪小技巧处理div内容溢出
▪html小技巧之td,div标签里内容不换行
▪纯CSS实现鼠标放上去改变文字内容
▪li中插入img图片间有空隙的解决方案
▪CSS3中Transition属性详解以及示例分享
▪父div高度不能自适应子div高度的解决方案
▪告别AJAX实现无刷新提交表单
▪从零学CSS系列之文本属性
▪HTML 标签
▪CSS3+Js实现响应式导航条
▪CSS3实例分享之多重背景的实现(Multiple background...
▪用css截取字符的几种方法详解(css排版隐藏溢...
▪页面遮罩层,并且阻止页面body滚动。bootstrap...
▪CSS可以做的几个令你叹为观止的实例分享
▪详细分析css float 属性以及position:absolute 的区...
▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
▪CSS小例子(只显示下划线的文本框,像文字一...
▪可以给img元素设置背景图
▪不通过JavaScript实现的自动滚动视差效果
▪div+CSS 兼容小摘
▪CSS的inherit与auto使用分析
 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3