Object-Oriented JavaScript笔记(一)

Object-Oriented JavaScript 笔记
Object-Oriented JavaScript笔记(一)
Object-Oriented JavaScript笔记(二)
Object-Oriented JavaScript笔记(三)
Object-Oriented JavaScript笔记(四)
Object-Oriented JavaScript笔记(五)
Object-Oriented JavaScript笔记(六)
Object-Oriented JavaScript笔记(七)

第二章 基本数据类型、数组、循环和条件语句

变量是大小写敏感的

基本类型

基本类型(5类) Number、String、Boolean、Undefined、Null
除了基本类型外的,都是object,特例
>>> typeof null
“object”

Infinity是number类型的
>>> typeof Infinity
“number”

JS中最大的数是1.7976931348623157e+308 最小的分数是5e-324

非0数除以0得到Infinity,0除以0得到NaN
1/0 = Infinity
0/0 = NaN

Infinity 与非NaN运算值为Infinity
Infinity – 1 = Infinity

NaN 与任何number运算值为NaN

一个String与一个变量做除’+'(加)以外的运算,都会转换成做数学运算
>>> var s = ‘3’; s = 3 * s; typeof s;
“number”

>>> var s = ‘3’; s = 3 + s; typeof s;
“string”

两次逻辑非操作会做强制布尔转换。大部分情况都是为真,除非:
1.空字符串 ”
2.null
3.undefined
4.数 0
5.数 NaN
6.布尔值 false

利用惰性求值(Lazy Evaluation)做保护伞并不是处处受用
var mynumber = mynumber || 10;

如果预先定义的 mynumber =0 ,这里就不是我们所预料的了。

=== 值与类型比较
!== 不含类型转换的不等于比较

NaN不与任何值相等,包含其自身
>>> NaN == NaN
false

null值并不是由js环境给分配的,而是由代码给分配的
>>> var value = null;
>>> typeof value
“object”

undefined与null还是大差别虽然微小,但是不容忽视
>>> var i = 1 + undefined;
>>> i
NaN

>>> var i = 1 + null;
>>> i
1

这种差异发生在类型转换上
>>> var i = 1*undefined;
>>> i
NaN

>>> var i = 1*null;
>>> i
0

数组

数组新添加元素索引跟数组最大索引之间有空隙的话,会被undefined值填充
>>> var abc = [1];
>>> abc[3] = 5;
>>> abc
[1, undefined, undefined, 5]

删除数组中的元素并不会改变数组大小,仅将删除位置为undefined
>>> var a = [1, 2, 3];
>>> delete a[2];
>>> a
[1, 2, undefined]

可以使用数组下标的形式访问字符串
>>> var s = ‘one’;
>>> s[0]
“o”

循环和条件语句

通常情况下我们会把变量放if条件中做检查,但这样做并不一定妥当,变量可能存在但值为false
>>> var result = ”;>>> if (somevar){result = ‘yes’;}
somevar is not defined
>>> result;
“”
一种更好的方式
>>> if (typeof somevar !== “undefined”){result = ‘yes’;}
>>> result;
“”

default是可以放在switch里任意位置的,并不一定是最后

var a = 4;switch(a){
case 1:
console.log(1);
break;
default:
console.log('d');
break;
case 6:
console.log(5);
break;
};

-EOF-

JavaScript 模板存放方法小结

Web开发时常常需要在页面种存放JavaScript需要使用到的html模板片段,这里是我使用过的三种方式,欢迎补充。

1.使用隐藏的div存放
如放一段{{ mustache }}的模板:

<div style="display:none;">
{{#items}}
{{#first}}
<li><strong>{{name}}</strong></li>
{{/first}}
{{#link}}
<li><a href="{{url}}">{{name}}</a></li>
{{/link}}
{{/items}}	
</div>

刚做web开发那会常使用这种方法来放html模板片段,但这种情况下里面的内容会被页面解析,特别是当img标签在里面的时候,由于src还没有被赋具体的URL,浏览器就会向服务器发一条无意义的请求,导致服务器产生不必要的404日志。

2.使用隐藏的textarea存放
后来想了个办法,既然textarea里的内容不会被解析,那可以把模板内容放到隐藏的textarea里。

<textarea style="display:none;">
// template 	
</textarea>

3.使用script标签指定浏览器不认识的type来存放
再后来,了解到浏览器当遇到不认识的script类型时就不会解析里面的内容,就慢慢习惯将模板内容放在script标签里,赋上一个浏览器不认识的类型(如: text/tpl),这样连display:none的也省了。

<script type="text/tpl">
// template 	
</script>

当然,还有把模板压缩成JS字符串,使用一个js常量的来保存html模板。这种情况下一般需要借助外部工具来压缩成字符串,直接手工处理费时且容易出错。
-EOF-

给网站添加分享按钮

俗话说独乐乐不如众乐乐,在SNS,微薄火热的今天,看到有意思的东西当然是要分享的了。网络上也有很多公共的分享按钮可以拿来直接放在网站上,但是这些服务几乎都是需要在放置按钮的位置放JS代码,而这些提供的网站的速度又木又保证,大大打折了页面的加载速度。

于是,偶自己造轮子了,可以将JS放在页面最底部,等网页加载完成后再渲染分享按钮。
使用方法:
1.给网页需要放置分享按钮的位置放置分享标签

<ioio:share></ioio:share>

2.在页面底部载入JS资源文件

<script type="text/javascript" src="//ioio.name/tools/sharebutton.js"></script>

3.初始化页面的分享按钮

<script type="text/javascript"> 
var sb = new ShareButton({'loadcss':true});
sb.Render();
</script>

代码会自动去寻找页面上的分享标签,并添加分享按钮,目前支持分享到新浪微博和QQ空间,后续会添加其它按钮。

可配置的参数:

{
'loadcss': true,//是否载入默认css,自定义css将其设置为false
'button': ['qzone','sina'],//需初始化的按钮
'url': location.href,//页面url
'title': document.title.substring(0,70)//页面标题
}

演示 http://ioio.name/tools/sharebutton.html

如需使用,为避免我升级过程中的改动导致按钮不稳定,建议将相应的文件拷贝一份放置你自己的空间,欢迎使用,欢迎汇报bug。
-EOF-

String.prototype.split()兼容问题

IE的String.prototype.split()函数bug

脚本:

"a:b:c".split(/(:)/)

Firefox输出:

["a",":","b",":","c"]

IE7/8(含IE9兼容的模式)输出:

a,b,c

详细说明:
http://www.sitepoint.com/the-power-of-stringprototypesplit-almost/
http://blog.stevenlevithan.com/archives/cross-browser-split
http://blog.stchur.com/2007/03/28/split-broken-in-ie/

-EOF-