《JavaScript 语言精髓与编程实践》第二章笔记

第二章 Javascript 的语法

2.1 语法综述

标识符

• 语法关键字 ： 命名语法（以及类型）
• 变量/常量 ： 命名值（的存储位置）

绑定

• 语法关键字与语法（语义）逻辑的绑定 – 作用域的限定
• 变量与它所存储值的位置的绑定 – 变量生存周期的限定

2.1.1 标识符所绑定的语义

声明

• 约定变量的生存周期和逻辑的作用域
  -
• 纯粹陈述“值”的过程，被称为变量和类型声明
• 纯粹陈述“逻辑”的过程，被称为语句（含流程控制子句）
• 陈述“值与（算法的）逻辑”的关系的过程，被称为表达式

2.1.2 识别语法错误与运行错误

一般，Javascript 引擎会在代码装入时先进行语法分析，如果语法分析通不过，整个脚本代码块都不执行；
语法分析通过时，若执行过程中出错，那么在同一代码上下文中，出错点之后的代码将不再执行。 (more…)

Lightbox源码解析[二]

function showLightbox(objLink)
{
// prep objects
var objOverlay = document.getElementById(‘overlay’);
// overlay 为遮罩层
var objLightbox = document.getElementById(‘lightbox’);
var objCaption = document.getElementById(‘lightboxCaption’);
var objImage = document.getElementById(‘lightboxImage’);
var objLoadingImage = document.getElementById(‘loadingImage’);
// 加载图片
var objLightboxDetails = document.getElementById(‘lightboxDetails’);


var arrayPageSize = getPageSize();
var arrayPageScroll = getPageScroll();

// center loadingImage if it exists
if (objLoadingImage) {
// arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] – 35 – objLoadingImage.height) / 2) + ‘px’);
// top = 滚动条位置 ＋ [视口高度 － 35px(浏览器状态栏高度) - 加载图片的高度]/2
objLoadingImage.style.left = (((arrayPageSize[0] – 20 – objLoadingImage.width) / 2) + ‘px’);
objLoadingImage.style.display = ‘block’;
// 设置加载图片在页面中间，浏览器状态栏高度约为 35px，滚动条栏宽度约为 20px。
}

// set height of Overlay to take up whole page and show
// 设置遮罩层高度
objOverlay.style.height = (arrayPageSize[1] + ‘px’);
objOverlay.style.display = ‘block’;

// preload image
imgPreload = new Image();

imgPreload.onload=function(){
objImage.src = objLink.href;

// center lightbox and make sure that the top and left values are not negative
// and the image placed outside the viewport
var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] – 35 – imgPreload.height) / 2);
var lightboxLeft = ((arrayPageSize[0] – 20 – imgPreload.width) / 2);

objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px";
objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px";


objLightboxDetails.style.width = imgPreload.width + ‘px’;

if(objLink.getAttribute(‘title’)){
objCaption.style.display = ‘block’;
objCaption.innerHTML = objLink.getAttribute(‘title’);
} else {
objCaption.style.display = ‘none’;
}

// A small pause between the image loading and displaying is required with IE,
// this prevents the previous image displaying for a short burst causing flicker.
if (navigator.appVersion.indexOf(“MSIE”)!=-1){
pause(250);
}

if (objLoadingImage) { objLoadingImage.style.display = ‘none’; }
// 隐藏加载图

// Hide select boxes as they will ‘peek’ through the image in IE
selects = document.getElementsByTagName(“select”);
for (i = 0; i != selects.length; i++) {
selects[i].style.visibility = “hidden”;
}


objLightbox.style.display = ‘block’;

// After image is loaded, update the overlay height as the new image might have
// increased the overall page height.
arrayPageSize = getPageSize();
objOverlay.style.height = (arrayPageSize[1] + ‘px’);

// Check for ‘x’ keypress
listenKey();

return false;
}

imgPreload.src = objLink.href;

}

lightbox源码解析【一】

function getPageScroll(){

var yScroll;

if (self.pageYOffset) {
yScroll = self.pageYOffset; //NS
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
}

arrayPageScroll = new Array(”,yScroll)
return arrayPageScroll;
}

1. self
打开任何一个网页，浏览器会首先创建一个窗口，这个窗口就是一 个window 对象，也是 js 运行所依附的全局环境对象和全局作用域对象。
self 指窗口本身，它返回的对象 跟window 对象是一模一样的。也正因为如此，window 对象的常用方法和函数都可以用 self 代替 window。

2. 获得窗口的滚动偏移量
* OmniWeb 4.2-, NetFront 3.3- 下无法获得.
* Safari 和 OmniWeb 4.5+ 有 bug，但无影响.

有三种方法获取滚动条的位置。
1. window.pageXOffset/pageYOffset 大多数浏览器，非常可靠
2. document.documentElement.scrollLeft/Top Strict 模式下的 IE6 和其它很少一些浏览器
3. document.body.scrollLeft/Top IE6 和 其它一些浏览器

浏览器在支持 document.body 或者 document.documentElement 的情况下，如果提供了 scrollLeft/Top，那么除了 Safari 和 OmniWeb 4.5+ 外, 这些值都是
很可靠的。在 Safari and OmniWeb 4.5+ 中，当滚动条偏移量为 0 时，会返回 -8，其它情况下正常。当然了，因为它们提供了正确的 window.pageXOffset/pageYOffset,
这个 bug 不会造成什么影响。

function getPageSize(){

//整个页面的大小
var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac…would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

//可见窗口(view port)的大小
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}

// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}


arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}

文档加载完之前是无法获取窗口大小值的，而且还要对不同浏览器使用不同的方法。可用参数如下：
1. window.innerHeight/Width IE 除外的大多数浏览器
2. document.body.clientHeight/Width 包括 IE 在内的大多数浏览器
3. document.documentElement.clientHeight/Width 包括 IE 在内的大多 DOM 浏览器

关于 clientHeight/Width 会有点乱，因为在不同浏览器下，甚至在同一个浏览器下 clientHeight/Width 都可能不同，要看文档类型激发的是浏览器的
strict 模式还是 quirks 模式。有时，它们指的是窗口的尺寸，有时是文档内容的尺寸。下表展示了不同浏览器、不同模式中的属性：

如上所示，好歹还是有个值是确定的：innerHeight，不过 IE 却不支持这个属性。目前，几乎所有的浏览器都支持使用 window.innerHeight/Width 属性。

算法逻辑：
1. 如果存在 window.innerHeight/Width 属性, 是可以完全信赖的, 使用 window.innerHeight/Width 就可以了.
2. 否则如果存在 document.documentElement.clientHeight/Width 属性且值大于 0，就用 document.documentElement.clientHeight/Width.
3. 否则就用 document.body.clientHeight/Width.

此算法在 IE6+ “standards compliant mode” 下，当窗口所谓 0px × 0px 大小时，失效。

附图一张：


Reference：http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

Firefox和IE之间7个JavaScript的差异

Firefox和IE之间7个JavaScript的差异

以后发在 前端观察 上的文章就不全文发在这里了
我会直接给出链接，大家可以直接到 前端观察 去看
希望国内那些”乐于”分享别人东西的人，也会这么做，而不是全文转载，甚至去掉原文链接
我觉得国内创新环境这么差的原因，很大一部分是由版权问题造成的
一方面有人付出大量的时间和精力，结果却给别人做嫁衣，另一方面有人只是信手转来 copy－paste
有意识的放上原文版权还可以接受，那些堂而皇之去掉别人版权，加上自己版权的人就很恶心了
鄙视，无尽的鄙视

-over-

Javascript的私有成员

对象

Javascript 根本上是和对象相关的。数组是对象。函数是对象。对象是对象。那什么是对象呢？对象是名-值对的集合。名是字符串，值可以是字符串，数字，布尔值或者对象(包括数组和函数)。通常对象是像哈希表一样执行地，这样便于值地快速检索。

如果值是函数，我们可以认为这是一个方法。当一个对象地方法被调用的时候，this 变量就设置为这个对象。方法就可以通过 this 变量来访问实例变量。

对象可以由用来初始化对象的构造函数生成。构造函数提供了其他语言中类所提供的特性，包括静态变量和方法。
公共

对象的成员全部是公共成员。任何函数都可以访问、修改或者删除这些成员，或者增加新成员。有两种向新对象中添加成员的方法：
在构造函数中添加

这个技术通常用于初始化公共实例变量。使用构造函数的 this 变量向对象中添加成员。

function Container(param){<br />   this.member = param;<br /> }

这样，如果我们创建一个新对象：

var myContainer = new Container(‘abc’);

这样 myContainer.member 就包含 ‘abc’ 了。
在原型中添加

这个技术通常用于添加公共方法。当一个成员被检索并且没能在对象本身里面找到时，就要从对象的构造函数的原型成员里面寻找。原型机制是用于继承的。也用于节省内存。向一个构造函数生成的所有对象中添加一个方法，只需要向构造函数原型中添加一个函数：

Container.prototype.stamp = function(string){<br />     return this.member + string;<br />   }

因此，我们可以调用这个方法：

myContainer.stamp(‘def’)

结果为 ‘abcdef’。
私有

私有成员是由构造函数生成的。一般构造函数的变量和参数都是私有成员。

function Container(param){<br />     this.member = param;<br />     var secret = 3;<br />     var that = this;<br />   }

这个构造函数生成了3个私有实例变量：param,secret 和 that。它们和对象相关联，但是它们不仅在函数外边不可访问，而且对对象自身的公共方法来说也是不可访问的。它们只可以被私有方法访问。私有方法是构造函数的内部函数。

function Container(param) {<br />  <br />     function dec() {<br />         if (secret > 0) {<br />             secret -= 1;<br />             return true;<br />         } else {<br />             return false;<br />         }<br />     }<br />  <br />     this.member = param;<br />     var secret = 3;<br />     var that = this;<br /> }

私有方法 dec 检查 secret 实例变量。如果它大于零，将其减一并返回 true。否则返回 false。它可以用作限定对象使用3次。

按照习惯，我们设置了一个私有的 that 参数。它使得这个对象对于私有方法使可见的。在 ECMAScript 语言规范中，这是一个可行的错误，它使得 this 对于内部函数被不正确地设置。(This is a workaround for an error in the ECMAScript Language Specification which causes this to be set incorrectly for inner functions.)

私有方法不能被公共方法调用。要想使得私有方法有用，需要介绍一下特权方法。
特权

特权方法可以访问私有变量和方法，并且其自身对于公共方法和对象外部都是可访问地。可以删除或者替换一个特权方法，但是不能改变它，或者强迫它泄密。

特权方法是在构造函数内使用 this 指定地。

function Container(param) {<br />  <br />     function dec() {<br />         if (secret > 0) {<br />             secret -= 1;<br />             return true;<br />         } else {<br />             return false;<br />         }<br />     }<br />  <br />     this.member = param;<br />     var secret = 3;<br />     var that = this;<br />  <br />     this.service = function () {<br />         if (dec()) {<br />             return that.member;<br />         } else {<br />             return null;<br />         }<br />     };<br /> }

service 就是特权方法。前三次调用 myContainer.service() 时会返回 ‘abc’。之后返回空(null)。service 调用了可访问私有变量 secret 的私有方法 dec。service 对其他对象和方法都是可见的，但是不能直接访问私有成员。
闭包

由于 Javascript 有闭包，因此这种公共，私有和特权成员模型时可以的。这意味着内部函数总是可以访问它外部函数的变量和参数，甚至在外部函数返回后也可以。这是这个语言一个非常有用的特性。目前没有任何关于 Javascript 编程的书描述了如何利用它。大部分甚至都不提及它。(糖伴西红柿说，这是2001年的文章，当时估计还没有这方面的研究文章。现在来说，犀牛书等都有涉及，javascript 的难点之一啊。)

私有和特权成员只在对象被创建时生成。公共成员可以随时添加。
模式
公共

function Constructor(…) {<br />  <br />     this.membername = value;<br />  <br /> }<br /> Constructor.prototype.membername = value;

私有

function Constructor(…) {<br />  <br />         var that = this;<br />         var membername = value;<br />  <br />         function membername(…) {…}<br />  <br />     }

注意：函数语句
<br /> function membername(…) {…}

是
<br /> var membername = function membername(…) {…};

的缩写。
特权

function Constructor(…) {<br />  <br />         this.membername = function (…) {..<br /> .};<br />  <br />   &nb<br /> sp; }<br />
糖伴西红柿说：

好久没露面，本来就没人记得我，这次更无名了。最近从高丽迁移回了天朝，嗯。而且正在为了工作进行最后的充电活动。生活中同时也遭遇到电视剧情节，还是高丽电视剧。这两天在主攻 Javascript 中几个比较难的知识点，闭包算是其中之一。两天看了好多关于闭包的文章，才有点开窍，这篇文章属于其中之一。算是个额外的参考资料，主要的是另一篇英文文章，有打算全篇翻译。

原文地址：http://www.crockford.com/javascript/private.html
译文地址：http://www.qianduan.net/?p=6580