帖子标记 ‘JavaScript’

优秀的Stoyan Stefanov在他的新书中(《 Patterns》)介绍了很多编写高质量代码的技巧,比如避免使用全局变量,使用单一的var关键字,循环式预存长度等等。

这篇文章不仅仅从代码本身来考虑如何优化编码,也从代码的设计阶段来考虑,包括书写API文档,同事的review,使用JSLint。这些习惯都 能帮助你编写更加高质量的、更易于理解的、可维护的代码(让你的代码在多年之后仍使你引以为傲)。

编写可维护的代码
软件的BUG修复需要花费大量的精力。尤其当代码已经发布之后,随着时间的增长,维护的成本愈发的高。当你一发现BUG的 时候,就立即去修复,这时候你的代码还是热乎的,你也不需要回忆,因为就是刚刚写好的。但是当你做了其他任务,几乎完全忘记了这份代码,这时候就需要:

重新学习和理解问题
理解代码是如何解决问题的
另外一个问题是,在大项目或者大公司里面,经常是解决BUG的人不是产生BUG的 人,而且也不是发现BUG的人。所以减少理解代码的时间就是最重要的问题,无论这个代码是你自己以前写的还是团队中的其他成员写的,因为我们都想去搞搞新 的有意思的东西,而不是去维护那些个陈旧的代码。
(全文 …)

在客户端编程语言中,如javascript和ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域,什么叫不同的域呢?

同源策略

在客户端编程语言中,如javascript和 ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的,一个域的脚 本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域,什么叫不同的域呢?当两个域具有相同的协议(如http), 相同的端口(如80),相同的host(如www.example.org),那么我们就可以认为它们是相同的域。比如 http://www.example.org/index.html和http://www.example.org/sub/index.html是同域,而http://www.example.org, https://www.example.org, http://www.example.org:8080, http://sub.example.org中的任何两个都将构成跨域。同源策略还应该对一些特殊情况做处理,比如限制file协议下脚本的访问权限。 本地的HTML文件在浏览器中是通过file协议打开的,如果脚本能通过file协议访问到硬盘上其它任意文件,就会出现安全隐患,目前IE8还有这样的 隐患。
(全文 …)

每种语言都有它特别的地方,对于JavaScript来说,使用var就可以 声明任意类型的变量,这门脚本语言看起来很简单,然而想要写出优雅的代码却是需要不断积累经验的。本文利列举了JavaScript初学者应该注意的七个 细节,与大家分享。

(1)简化代码


JavaScript定 义对象和数组非常简单,我们想要创建一个对象,一般是这样写的:

var car = new Object();
car.colour = 'red';
car.wheels = 4;
car.hubcaps = 'spinning';
car.age = 4;

下面的写法可以达到同样的效果:

var car = {
	colour:'red',
	wheels:4,
  hubcaps:'spinning',
  age:4
}

后面的写法要短得多,而且你不需要重复写对象名称。
(全文 …)

百度js库tangram开源

作者: seasun

百度js库tangram宣布开源,Tangram是一套简单可依赖的Javascript库,它的特点:
* 体积小巧,性能优良,使用简单。
* 模块化架构,方便定制与扩展。
* 适合团队开发,丰富的中文文档和本地技术优化,适合中国用户。 *多浏览器支持:
IE6、7、8+
Frfox3.x+
傲游2.x+
Opera 10.x
Chrome 4.x+
Safari 4.x+

* 经过专业QA团队的测试以及百度各大产品线的应用,质量有保障。
(全文 …)

  1. var Url = location.href;
  2. Url = Url.replace(/.*\?(.*?)/,”$1″);
  3. Variables = Url.split (“&”);
  4. for (i = 0; i < Variables.length; i++) {
  5. Separ = Variables[i].split(“=”);
  6. eval (‘var ‘+Separ[0]+’=”‘+Separ[1]+’”‘);
  7. }
  8. function getURLParam(strParamName){
  9. var strReturn = “”;
  10. var strHref = window.location.href;
  11. if ( strHref.indexOf(“?”) > -1 ){
  12. var strQueryString = strHref.substr(strHref.indexOf(“?”)).toLowerCase();
  13. var aQueryString = strQueryString.split(“&”);
  14. for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
  15. if (aQueryString[iParam].indexOf(strParamName + “=”) > -1 ){
  16. var aParam = aQueryString[iParam].split(“=”);
  17. strReturn = aParam[1];
  18. break;
  19. }
  20. }
  21. }
  22. return strReturn;
  23. }

, , 等等,这可不是你妈口中的AJAX

Web pages are written in HTML, the web programming language that tells browsers how to lay out and present content on a web page. In other words, HTML provides the basic building blocks for the web. For a long time, those building blocks were pretty simple and static: lines of text, links and images.

众所周知,网页是用超文本标记语言(HTML)编写的,这种网页编程语言告诉浏览器怎样在网页中输出并 展现内容。换句话说,HTML就是网页这个建筑的一砖一瓦。长期以来,这些“砖瓦“都相当简单而且是静态的:仅有几行文字,或一些链接,或几张图片。

Today, the web goes beyond just text, links, and images. We expect to be able to play online chess or seamlessly scroll around a map of our neighborhood, without waiting for the entire page to reload for every chess move or every map scroll.

而今,网页中远不止文本,链接 和图片了。我们期望能够在线下象棋时,每走一步不必等待网页重新加载,或者查看一下我们周边的地图时,每拖到一下网页也不用重新刷新。

The idea of such dynamic web pages began with the invention of the scripting language JavaScript. JavaScript support in major web browsers meant that web pages could incorporate more meaningful real- time interactions. For example, if you’ve filled out an online form and hit the “submit” button, the web page can use JavaScript to check your entries in real-time and alert you almost instantly if you had filled out the form wrongly.

这些动态网页的创意开始与于脚本语言JavaScript的出现。主要的 网页浏览器都支持JavaScript,这就意味着网页能够加入一些更有意义的实时互动。例如,当你在线填一些表格时,点击“提交“按钮,网页可以调用 JavaScript代码来实时检查表格是否填错,如果有错误,网页马上就能提示你。
(全文 …)

最近在用 Jasmine 给 KISSY 项目添加测试代码,遇到一个困惑:如何保证测试能完整覆盖到源码的所有分支?

用 Google 搜索了下 Coverage 工具,琳琅满目。有商业版的 JavaScript Coverage Validator, 还有 FireBug 的不少扩展 JavaScript Code Coverage Tool for Firebug. 美中不足是,这些要么要花钱,要么已停止更新,杯具。

最后将目标锁定到免费开源一直更新的:JSCoverage. 不用不知道,一用立刻相见恨晚。下面简单介绍下。

下载安装非常简单,到 这里 下载 window 版本。完成后,将压缩包里的 jscoverage.exe 复制到 C:\Windows\System32. 安装完毕。
(全文 …)

作者:断桥残雪

今天上网遇到有个网友在论坛问input的checkbox全选和反选的问题,顺手总结了一下,然后写了个简单 的jQuery checkbox全选反选插件,希望对大家有用。
如果是简单的实现checkbox的全选与反选可以使用下面的函数:

 function checkall(obj,cName)
 {
     var checkboxs = document.getElementsByName(cName);
     for(var i=checkboxs.length;i--;){
             checkboxs[i].checked = obj.checked;
     }
 }
//使用方法:给全选的按钮加onclick事件:onclick="checkall(this,'all[]');"

(全文 …)

一款基于JavaScript的网页版塔防游戏,虽然界面仅是由点线面组成,但它包含了正统塔防游戏的所有要素,反而显得更简单直接。由于是 JS打造,所以要使用IE9、Opera或Chrome浏览器才可以流畅运 行。游戏的动画效果很漂亮,自带三种模式:Arcade(默认地图,开局钱少)、Challenge(挑战模式,依次解锁 十张地图)、Perfection(完美自虐模式,金钱有限,用完为止)。

基于JavaScript的网页版塔防游戏 | iwanna.cn 我想网
(全文 …)

这里有一个人 脸识别的Javascript,感觉挺酷的。识别的还是很不错的,网友们在做了很多的测试,对于动画片里的人员很不准,而且,照片质量要好一点的会准一点。下面是一些识别结果:

一个人脸识别的Javascript
(全文 …)