前端开发 类目

前端开发技术,从狭义的定义来看,是指围绕HTML、JavaScript、CSS这样一套体系的开发技术,它的运行宿主是浏览器。本博客会分享一些前端开发相关的文章。

Javascript DOM 笔记

HTML文档可以看成由各种 DOM 节点组成的文档树,例如:整篇文档是一个文档节点;第个标签都是一个元素节点;文本内容可以看成文本节点;标签属性是属性节点,甚至注释也是注释节点。

nodeType

元素节点的类型可以通过node.nodeType访问,例如:

document.nodeType           # 9

主要的节点类型如下所示:

Element Type Node Type
Element 1
Attribute 2
Text 3
Comment 8
Document 9

查看全文

Browser detect 脚本分析

目前浏览器检测 (Browser detect) 一般有两种方法:

  • 基于userAgent的值的检测;
  • 基于对象的检测,即object detection;

而第一种方法,一般来说效果并不是非常理想,因为许多浏览器都允许用户更改userAgent的值,起因要追究于第一次浏览器大战(PPK on Javascript p57)。因此,这一类的检测都不是万能的,无论是基于navigator.userAgent还是navigator.vendor等,浏览器总有办法绕过这一层检测。

PPK 在他的一篇文章中提供的检测脚本其实也是基于navigator的,但是他在整个脚本的设计上非常细致,覆盖了许多细节,看了之后收获很大。首先使用了下ppk的检测脚本,博客首页右方检测浏览器的功能正是使用ppk的脚本。

例子

当时看脚本的时候还是有点迷糊,因为脑子里面对各个浏览器的userAgent内容非常模糊,其实自己就用过Firefox、Chrome、IE、Opera等几个浏览器,没试过Safari、Konqueror、iCab等等。回头看完了脚本,我就把自己电脑上有的浏览器的userAgent都看了一遍并列了出来:

Opera/9.80 (Windows NT 6.1; U; Edition IBIS; en) Presto/2.6.30 Version/10.60
Mozilla/5.0 (Windows NT 6.1; rv:2.0b8pre) Gecko/20101029 Firefox/4.0b8pre
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.7 (KHTML, like Gecko) Chrome/7.0.517.41 Safari/534.7
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Tablet PC 2.0; AskTB5.6)

然后是脚本检测的结果分别是:

You're using Opera 9.8 on Windows !
You're using Firefox 4 on Windows !
You're using Chrome 7 on Windows !
You're using Explorer 9 on Windows !

查看全文

JavaScript最佳实践

原文链接:http://www.javascripttoolbox.com/bestpractices/
翻译声明:非逐句逐字翻译,若有翻译不当,纯属搞笑。
翻译状态:未完成

介绍

这篇文档是一份清单,它罗列了一系列开发JavaScript代码的最佳的编程实践和首选的编程方法。文档中的每条内容都基于JavaScript社区中众多开发者的意见和经验总结而来。但是,这些条款仅仅是一些建议,而并非需要绝对遵守的原则,一些经验丰富的开发者对于以下描述的内容,可能会持有些许不同的意见。

始终使用var关键字

JavaScript中变量只有两种作用域范围:全局作用域和函数作用域, 使用var关键字对于保持变量作用域清晰是至关重要的。当声明一个变量作为全局变量或者函数级的变量(译者注:函数内部声明的变量,也就是在函数内部的局部变量), 始终在声明的最前面添加var关键字。下面的例子强调不使用var关键字会造成的潜在问题:

不使用var造成的问题

var i=0; // 正确:通过声明创建了一个全局变量
function test() {
   for (i=0; i<10; i++) {
      alert("Hello World!");
   }
}
test();
alert(i); // 警告:全局变量i的当前值为10

查看全文

JavaScript 面向对象编程一:类型系统

本系列均参考了大量网上相关的内容,并基于此总结并归纳,作为个人笔记,也供同样与我一样初涉JavaScript面向对象编程的同学一同学习讨论。

前言

网上有非常多的介绍JavaScript类型的内容,关于类型的分类众说纷纭,各执一词,一些矛盾的观点往往会让我们感到非常困惑。后来我仔细想了 想,与其在这种泥苦苦挣扎,还不如就近找一根救命稻草抓住。当然,这种观点可能比较激进,但是有时候确实需要做些取舍与选择。选择一种你觉得相对比较正 确,并且可以接受的答案。

类型系统

本文的类型分类依据来源于aimingoo的博客中关于JavaScript类型的几篇博客文章[1][2][3]

Javascript有两套类型系统:基础类型系统与对象类型系统。

查看全文

浅谈 JavaScript 刷新页面

本文的所有代码在Firefox 11 beta + Scriptish 0.1.7环境作为用户脚本执行,某些行为可能会与普通的页面脚本不一致。

问题引出

在写CC98 Reply Improved脚本的时候,遇到一个场景是在帖子回复成功后,页面自动刷新,并且当引用或者编辑回复时,希望可以返回到当前被引用或者编辑的帖子楼层。在98中每个楼层都有一个锚链接(anchor), 这些锚链接的名称为数字,从0~9,其中1表示第一楼,2表示第二楼……0表示第十楼。假设当前的帖子链接为:

/dispbbs.asp?boardID=39&ID=3841624&star=20&page=1

则要跳转到第5楼,则需要在浏览器输入地址

dispbbs.asp?boardID=39&ID=3841624&star=20&page=1#5

其中#5这部分称为hash(我不大清楚中文应该叫什么)。

查看全文