[1] js简洁的创建对象
function obj_test() {
//方法1
var car1 = new Object();
car1.color = "red";
car1.wheels = "4";
car1.hupcaps = "spinning"
car1.age = 4;
//方法2
var car2 = {color:'red', wheels:'4', hubcaps:'spinning', age:'4'};
var tmp = '';
for(value in car2) {
tmp += value +',';
}
alert(tmp);
}
[2] js简洁的创建数组
function arr_test() {
//方法1
var arr1 = new Array('a', 'b', 'c');
//方法二
var arr2 = ['a', 'b', 'c'];
var tmp = '';
for(var i=0; i<arr1.length; i++) {
tmp += arr2[i] + ',';
}
alert(tmp);
}
[3]js三元符号
function other_test() {
var sign = 1;
var value = sign ? 1 : 0;
alert(value);
}
[4]js使用json格式缓存复杂的数据
function json_test() {
//json解决了缓存复杂数据的困境
var band = {
"name":"liu86th",
"members":[
{"name":"liu", "role":"hero"},
{"name":"liu", "role":"hero"},
{"name":"liu", "role":"hero"},
{"name":"liu", "role":"hero"},
{"name":"liu", "role":"hero"}
],
"year":"2000"
};
var value = eval(band);
for(var j=0; j<value.members.length; j++) {
alert(value.members[j].name);
}
}
[5] js内置函数
function json_test() {
//json解决了缓存复杂数据的困境
var band = {
"name":"liu86th",
"members":[
{"name":"liu", "role":"hero"},
{"name":"liu", "role":"hero"},
{"name":"liu", "role":"hero"},
{"name":"liu", "role":"hero"},
{"name":"liu", "role":"hero"}
],
"year":"2000"
};
var value = eval(band);
for(var j=0; j<value.members.length; j++) {
alert(value.members[j].name);
}
}
function string_test() {
//方法一
function addclass(elm, newclass) {
var c = elm.className;
elm.className = (c == '') ? newclass : c+' '+newclass;
}
//方法二
function addclass2(elm , newclass) {
var classes = elm.className.split(' ');
classes.push(newclass);
elm.className = classes.join(' ');
}
}
[6] js事件
function event_test() {
//<h2> greate web resources </h2>
//<ul id="resources">
//<li> <a href="http://www.sina.com"> a </li>
//<li> <a href="http://www.sina.com"> b </li>
//<li> <a href="http://www.sina.com"> c </li>
//<li> <a href="http://www.sina.com"> d </li>
//<li> <a href="http://www.sina.com"> e </li>
//</ul>
//方法一
(function(){
var resources = document.getElementById('resources');
var links = resources.getElementsByTagName('a');
var length = links.length;
for(var i=0; i<length; i++) {
links[i].addEventListener('click', handler, false);
}
function handler(e) {
var x = e.target;
alert(x);
e.preventDefault();
}
})();
//方法二
(function(){
var resources = document.getElementById('resources');
resources.addEventListener('click', handler, false);
function handler(e) {
var x = e.target;
if(x.nodeName.toLowerCase() === 'a') {
alert('Event delegation ' + x);
x.preventDefault();
}
}
})();
}
[7] js单例模式
//1：方法1
var name = 'liu';
var age = 26;
var status = 1;
function create() {
//....
}
function getMemberDetails() {
//....
}
//2：为了避免上面成为全局变量，你可以使用匿名函数：
var myApplication = function() {
var name = 'liu';
var age = 26;
var status = 1;
function create() {
//....
}
function getMemberDetails() {
//....
}
};
//3:如果这个函数不被调用，你更可以这样
(function(){
var name = 'liu';
var age = 26;
var status = 1;
function create() {
//....
}
function getMemberDetails() {
//....
}
})();
//4:如果需要访问其中的函数或对象，可以这样
var myApplication = function() {
var name = 'liu';
var age = 26;
var status = 1;
return {
function create() {
//....
}
function getMemberDetails() {
//....
}
}
}();
//myApplication.create()
//myApplication.getMemberDetails();
//这就是所谓 Module模式或单例模式（Singleton），该模式为 Douglas Crockford 所推崇，并被大量应用在 Yahoo User Interface Library YUI。
//假如你想在别的地方调用里面的方法，又不想在调用前使用 myApplication 这个对象名，可以在匿名函数中返回这些方法，甚至用简称返回：
var myApplication = function() {
var name = 'liu';
var age = 6;
var status = 1;
function create() {
alert(name);
}
function getMemberDetails() {
alert(age);
}
return {
ch:create,
g:getMemberDetails
}
}();
//调用： myApplication:c() myApplication:g()
myApplication.ch(); [8] 定时执行传递参数