【学习点滴-js】js学习总结。
1.dialog 成功对话框调用
/*
//活动成功的对话框显示
var appid = Gip_JS_Config.gipAppId;
var snsAppName = Apps[appid] || 'default';
var snsClassName = snsAppName+'_ok';
if(PM_config.notifyOnlyAfterCoin!="true"){
new Dialog({
left : left+200,
top:top + 120,
icon:'06',
snsAppName:snsClassName,
type : "confirm",
tabClass:'CP_ok',
content :'<div class="content_txt">'+PM_config.successTips+'</div>',
textOk:'去玩游戏',
height:188,
width:388,
confirmFunc : function() {
fm.reLoadGame();
},
isDestory : true
}).show();
//setTimeout(function(){fm.reLoadGame();},5000);
}
*/
2.innerText可以过滤元素内部的HTML标签，方法是将innerText设置等于innerText：
div.innerText = div.innerText;
执行代码的结果就是用文本替换容器元素中的所有内容。
3.contains()方法用于检测某个节点是否是参考节点的后继。但是不是所有的浏览器都支持contains()方法。（IE,chrome,safari 3+ opera 4+等支持，firefox不支持），为此，编写的通用的contain函数如下：
4.js中对所有的配置的判断示例：。
PM_config.activitys && PM_config.activitys.length > 0 && priceLevel === parseInt(PM_config.activitys[0].activityLevel) && PM_config.activitys[0].avail ===true
判断变量（类型，是否存在，是否bool是一个难点！！！需要多积累经验）
5.选择一个能够检测js错误的SDK（eclipse webstorm等等。）
6.innerHTML的几点总结：
(a).多数浏览器中，通过innerHTML插入的<script>元素不会被执行（IE支持，但是必须添加defer特征），插入script标签内容示例：
div.innerHTML = "<input type=\"hidden\"><script defer> alert('hello');<scr" + "ipt>";
(b).页面中插入style标签示例：
div.innerHTML = "_<style type=\"text/css\">body{background-colo：red;}</style>";
div.removeChild(div.firstChild);
document.getElementsByTagName("head")[0],appendChild(div.firstChild);
(c).并不是所有的元素都支持innerHTML属性 。不支持innerHTML的元素有<col><>colgroup><frameset><head><html><style><table><tbody><thead><tfoot><title><tr>
(d).在IE中，如果在行级元素中插入块级的元素，会导致错误。
7.DOM操作技术：
在IE中，script节点被当成一个特殊的节点，不允许DOM访问其子节点(style节点与之类似)，因此，如果要动态加载javascript代码，可以用下面的方式实现（考虑到浏览器的兼容性，这里用了两个方法）
8.元素指定事件处理程序的几个方式：
a.HTML事件，缺点是时差问题和代码紧密耦合问题。
b.DOM0级事件处理程序:例如 var btn = document.getElementByID("myBtn");
btn.onclick = function(){
alert(this.id);
};
c.DOM2级事件处理程序：addEventListener()和removeEventListener();所有的DOM节点都包含这两个方法。第三个参数bool值若是true表示在事件捕获阶段响应事件。如果是false则表示是在冒泡阶段调用事件处理程序。
这种处理方式的好处是可以添加多个事件处理程序，通过addEventListener添加的事件只能通过removeEventListener移除，通过addEventListener添加的匿名函数无法移除（！！注意）
通常将事件处理程序添加到事件流的冒泡阶段。
d.在IE中事件处理程序是attachEvent() 和 detachEvent() 。与DOM0级事件处理程序的主要区别在于事件处理程序的作用域：在使用DOM0级事件处理程序时，作用域是在其所属元素的作用域内运行。IE的attach()处理程序的作用域是在全局作用域内运行。
跨浏览器的事件处理程序：
9.鼠标事件的几个总结：
a.可以通过键盘上的enter键触发click事件。但是其他的鼠标事件却无法通过键盘触发。
b.使用click事件执行代码，而不是用mouseover或者mousedown代替。
c.不要使用dbclick执行重要的操作。
10.跨浏览器获取键盘中字符的编码，首先检测按键的charCode属性是否可用，如果不可用则要检测keyCode属性。
var EventUtil = {
getCharCode : function(event){
if(typeof event.charCode == "number"){
return event.charCode;
}else{
return event.keyCode;
}
}
};
或者简写为：
var EventUtil = {
getCharCode : function(event){
return (typeof event.charCode == "number")?event.charCode:event.keyCode;
}
};
11.iframe相关总结。
a.iframe属性大全：
b.iframe自适应高度。
12.模拟事件：
模拟鼠标事件：
var btn = document.getElementById("mybtn");
var event = document.createEvent("MouseEvents");
event.initMouseEvent('click',true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
tbn.dispatchEvent(event);
模拟键盘事件（通用）：(虽然可以触发键盘事件，但是无法写入文本，这是由于无法精确模拟键盘事件造成的)
var textbox = document.getElementById("mytextbox");
var event = document.createEvent("Events");
//初始化事件对象
event.initEvent('keyPress',true,true);
event.view = document.defaultView;
event.altKey = false;
event.ctrlKey = false;
event.shiftKey = false;
event.metaKey = false;
event.keyCode = 65;
event.charCode = 65;
text.dispatchEvent(event);
13.表单：
a.禁用表单。
EventUtil.addHandler(form,"submit",function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//获取提交按钮并禁用
var btn = target.elements["submit-btn"];
btn.disabled = true;
});
需要注意的是，不要通过submit按钮的onclick事件处理
b.阻止非法输入：
EventUtil.addHandler(text,"keypress",function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharCode(event);
var value = String.fromCharCode(charCode);
if(!(/[^\d]/.test(value)) && charCode > 9 && !event.ctrlKey){
EventUtil.preventDefault(event);
}
});
c.自动切换焦点
//
<input type = "text" name = "tel1" id = "txtTel1" maxLength = "3"/>
<input type = "text" name = "tel2" id = "txtTel2" maxLength = "3"/>
<input type = "text" name = "tel3" id = "txtTel3" maxLength = "3"/>
(function(){
function tabForward(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if(target.value.length = target.maxLength){
var form = target.form;
}
for(var i = 0,len = form.elements.length;i < len;i++){
if(form.elements[i] == target){
form.elements[i+1].focus();
return;
}
}
}
}
var text1 = document.getElementById("txtTel1");
var text2 = document.getElementById("txtTel2");
var text3 = document.getElementById("txtTel3");
EventUtil.addHandler(text1,"keyup",tabForward);
EventUtil.addHandler(text2,"keyup",tabForward);
EventUtil.addHandler(text3,"keyup",tabForward);
)();
d.表单序列化的代码：
function serilize(form){
var parts = new Array();
var fields = null;
for(var i = 0,len = form.elements.length;i<len;i++){
field = form.elements[i];
switch(field.type){
case "select-one":
case "select-multiple" :
for(var j = 0;j < field.options.length;j++){
var option = field.options[j];
if(option.selected){
var optValue = "";
if(option.hasAttribute){
optValue = (option.hasAttribute("value"))?option.value:option.text;
}else{
optValue = (option.attributes["value"].specified)?option.value:option.text;
}
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
}
}
break;
case undefined:
case "file" :
case "submit" :
case "button":
break;
case "radio":
case "checkbox":
if(!field.checked){
break;
}
default :
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
}
}
return parts.join("&");
}
14.js小知识点总结：
a.switch ..case 块中。进行的全等比较，而不是普通的==比较
b.值得检测问题：通常来说，基本类型的值用typeof检测。对象的值用instanceOf检测。
c.在js中，空字符串和其他字符串一样可以用作对象成员：例如
obj = {
'':100
}
alert(obj['']);//100
d. || 和 &&运算符总结：
|| 和&&运算符既不改变运算元的数据类型，也不会强制运算结果的数据类型。除此之外，还有两条性质：
<1>运算符将运算元理解为布尔值，以进行布尔运算。
<2>运算过程也会发生短路效应。
e. setTimeout()函数中用到的函数环境总是window。即在setTimeout函数中，this == window.这一点要注意。
15.ajax:
创建XHR对象：
function createXHR(){
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
if(typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
for(var i = 0,len = versions.length;i<len;i++){
try{
var xhr = new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
return xhr;
}catch(ex){
alert(ex.message);
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Exception("No XHR Object available");
}
}
16.作用域安全的构造函数
function Person(name,age,job){
if(this instanceof Person){
this.name = name;
this.age = age;
this.job = job;
}else{
return new Person(name,age,job);
}
}
17.函数绑定,数组分块，函数节流：
函数绑定：
function bind(fn,context){
return function(){
return fn.apply(context,arguments);
};
}
var btn = document.getElementById("mybtn");
EventUtil.addHandler(btn,"click",bind(handler.handclick,handler));
数组分块：
function chunk(array,process,context){
setTimeout(function(){
var item = array.shift();
process.callee(context,item);
if(item.length > 0){
setTimeout(arguments.callee,100);
}
},100);
}
函数节流：
function throttle(method,context){
clearTimeout(method.tId);
method.tId = setTimeout(function(){
method.call(context);
},100);
}
18.自定义事件：
观察者设计模式。
本质是创建一个管理事件的对象，让其他对象监听那些事件。基本模式如下：
function EventTarget(){
this.handlers = {};
}
EventTarget.prototype = {
constructor : EventTarget,
addHandler : function(type,handler){
if(typeof this.handlers[type] == "undefined"){
this.handlers[type] = [];
}
this.handlers[type].push(handler);
},
fire : function(event){
if(!event.target){
event.target = this;
}
if(this.handlers[event.type] instanceof Array){
var handlers = this.handlers[event.type];
for(var i = 0,len = handlers.length;i < len;i++){
handlers[i](event);
}
}
},
removeHandler : function(type,handler){
if(this.handlers[type] instanceof Array){
var handlers = this.handlers[type];
for(var i = 0,len = handlers.length;i < len;i++){
if(handlers[i] == handler){
break;
}
}
handlers.splice(i,1);
}
}
};
function handleMessage(event){
alert("Message received: " +event.message);
}
var target = new EventTarget();
target.addHandler("message",handleMessage);
target.fire({type:"message",message:"Hello world"});
target.removeHandler("message",handleMessage);
target.fire({type:"message",message:"Hello You"});
19.js cookie操作封装
var CookieUtil = {
get : function(name){
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null;
if(cookieStart > -1){
var cookieEnd = document.cookie.indexOf(";",cookieStart);
if(cookieEnd == -1){
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length,cookieEnd));
}
return cookieValue;
},
set : function(name,value,expires,path,domain,secure){
var cookieText = encodeURIComponent(name) + "=" +encodeURIComponent(value);
if(expires instanceof Date){
cookieText += "; expires=" + expires.toGMTString();
}
if(path){
cookieText += "; path=" +path;
}
if(domain){
cookieText += "; domain=" + domain;
}
if(secure){
cookieText += "; secure";
}
document.cookie = cookieText;
},
unset : function(name,path,domain,secure){
this.set(name,"",new Data(0) , path,domain,secure);
}
};
CookieUtil.set("name","Xiaoqing.huo");
CookieUtil.set("book","javascript");
alert(CookieUtil.get("name"));
alert(CookieUtil.get("book"));
CookieUtil.set("name","xiaoqing","/books/js","www.xiaonei.com",new Date("April 15,2012"));
CookieUtil.unset("name","/books/js","www.xiaonei.com");
/*
//活动成功的对话框显示
var appid = Gip_JS_Config.gipAppId;
var snsAppName = Apps[appid] || 'default';
var snsClassName = snsAppName+'_ok';
if(PM_config.notifyOnlyAfterCoin!="true"){
new Dialog({
left : left+200,
top:top + 120,
icon:'06',
snsAppName:snsClassName,
type : "confirm",
tabClass:'CP_ok',
content :'<div class="content_txt">'+PM_config.successTips+'</div>',
textOk:'去玩游戏',
height:188,
width:388,
confirmFunc : function() {
fm.reLoadGame();
},
isDestory : true
}).show();
//setTimeout(function(){fm.reLoadGame();},5000);
}
*/
2.innerText可以过滤元素内部的HTML标签，方法是将innerText设置等于innerText：
div.innerText = div.innerText;
执行代码的结果就是用文本替换容器元素中的所有内容。
3.contains()方法用于检测某个节点是否是参考节点的后继。但是不是所有的浏览器都支持contains()方法。（IE,chrome,safari 3+ opera 4+等支持，firefox不支持），为此，编写的通用的contain函数如下：
function contains(refNode,otherNode){
if(typeof refNode.contains == "function" && (!client.engine.webkit || client.engine.webkit >=522) ){
return refNode.contains(otherNode);
}else if(typeof refNode.compareDocumentPosition == "function"){
return !!(refNode.compareDocumentPosition(otherNode) & 16);
}else{
var node = otherNode.parentNode;
do{
if(node == refNode){
return true;
}else{
node = node.parentNode;
}
}while(node!=null);
return false;
}
}
4.js中对所有的配置的判断示例：。
PM_config.activitys && PM_config.activitys.length > 0 && priceLevel === parseInt(PM_config.activitys[0].activityLevel) && PM_config.activitys[0].avail ===true
判断变量（类型，是否存在，是否bool是一个难点！！！需要多积累经验）
5.选择一个能够检测js错误的SDK（eclipse webstorm等等。）
6.innerHTML的几点总结：
(a).多数浏览器中，通过innerHTML插入的<script>元素不会被执行（IE支持，但是必须添加defer特征），插入script标签内容示例：
div.innerHTML = "<input type=\"hidden\"><script defer> alert('hello');<scr" + "ipt>";
(b).页面中插入style标签示例：
div.innerHTML = "_<style type=\"text/css\">body{background-colo：red;}</style>";
div.removeChild(div.firstChild);
document.getElementsByTagName("head")[0],appendChild(div.firstChild);
(c).并不是所有的元素都支持innerHTML属性 。不支持innerHTML的元素有<col><>colgroup><frameset><head><html><style><table><tbody><thead><tfoot><title><tr>
(d).在IE中，如果在行级元素中插入块级的元素，会导致错误。
7.DOM操作技术：
在IE中，script节点被当成一个特殊的节点，不允许DOM访问其子节点(style节点与之类似)，因此，如果要动态加载javascript代码，可以用下面的方式实现（考虑到浏览器的兼容性，这里用了两个方法）
var script = document.createElement('script');
script.type = "text/javascript";
var jsNode = "function sayHi(){alert('hi');}";
try{
script.appendChild(document.createTextNode(jsNode));
}catch(ex){
script.text = jsNode;
}
document.body.appendChild(script);
8.元素指定事件处理程序的几个方式：
a.HTML事件，缺点是时差问题和代码紧密耦合问题。
b.DOM0级事件处理程序:例如 var btn = document.getElementByID("myBtn");
btn.onclick = function(){
alert(this.id);
};
c.DOM2级事件处理程序：addEventListener()和removeEventListener();所有的DOM节点都包含这两个方法。第三个参数bool值若是true表示在事件捕获阶段响应事件。如果是false则表示是在冒泡阶段调用事件处理程序。
这种处理方式的好处是可以添加多个事件处理程序，通过addEventListener添加的事件只能通过removeEventListener移除，通过addEventListener添加的匿名函数无法移除（！！注意）
通常将事件处理程序添加到事件流的冒泡阶段。
d.在IE中事件处理程序是attachEvent() 和 detachEvent() 。与DOM0级事件处理程序的主要区别在于事件处理程序的作用域：在使用DOM0级事件处理程序时，作用域是在其所属元素的作用域内运行。IE的attach()处理程序的作用域是在全局作用域内运行。
跨浏览器的事件处理程序：
var EventUtil = {
/* 添加时间处理程序 */
addHandler : function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type] = handler;
}
},
/* 获取event对象的引用 */
getEvent: function(event){
return event? event : window.event;
},
/* 获取事件的目标 */
getTarget:function(event){
return event.target || event.srcElement;
},
/* 取消事件的默认函数 */
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
/* 移除时间处理程序 */
removeHandler : function(){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type] = null;
}
},
/* 阻止事件流继续传播 */
stopPropagation : function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
},
/* 获取相关元素 */
getRelatedTarget : function(event){
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.toElement){
return event.toElement;
}else if(event.fromElement){
return event.fromElement;
}else{
return null;
}
},
/*获取按键编码*/
getCharCode : function(event){
return (typeof event.charCode == "number")?event.charCode:event.keyCode;
},
//获取剪切板数据
getClipboardText:function(event){
var clipboardData = window.clipboardData || event.clipboardData;
return clipboardData.getData("text");
}
};
调用方式示例：
var div = document.getElementById("mydiv");
EventUtil.addHandler(div,"mouseout",function(event){
var event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var relatedTarget = EventUtil.getRelatedTarget(event);
alert("move mouse from "+target+"to"+relatedTarget);
});
9.鼠标事件的几个总结：
a.可以通过键盘上的enter键触发click事件。但是其他的鼠标事件却无法通过键盘触发。
b.使用click事件执行代码，而不是用mouseover或者mousedown代替。
c.不要使用dbclick执行重要的操作。
10.跨浏览器获取键盘中字符的编码，首先检测按键的charCode属性是否可用，如果不可用则要检测keyCode属性。
var EventUtil = {
getCharCode : function(event){
if(typeof event.charCode == "number"){
return event.charCode;
}else{
return event.keyCode;
}
}
};
或者简写为：
var EventUtil = {
getCharCode : function(event){
return (typeof event.charCode == "number")?event.charCode:event.keyCode;
}
};
11.iframe相关总结。
a.iframe属性大全：
b.iframe自适应高度。
12.模拟事件：
模拟鼠标事件：
var btn = document.getElementById("mybtn");
var event = document.createEvent("MouseEvents");
event.initMouseEvent('click',true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
tbn.dispatchEvent(event);
模拟键盘事件（通用）：(虽然可以触发键盘事件，但是无法写入文本，这是由于无法精确模拟键盘事件造成的)
var textbox = document.getElementById("mytextbox");
var event = document.createEvent("Events");
//初始化事件对象
event.initEvent('keyPress',true,true);
event.view = document.defaultView;
event.altKey = false;
event.ctrlKey = false;
event.shiftKey = false;
event.metaKey = false;
event.keyCode = 65;
event.charCode = 65;
text.dispatchEvent(event);
13.表单：
a.禁用表单。
EventUtil.addHandler(form,"submit",function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//获取提交按钮并禁用
var btn = target.elements["submit-btn"];
btn.disabled = true;
});
需要注意的是，不要通过submit按钮的onclick事件处理
b.阻止非法输入：
EventUtil.addHandler(text,"keypress",function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharCode(event);
var value = String.fromCharCode(charCode);
if(!(/[^\d]/.test(value)) && charCode > 9 && !event.ctrlKey){
EventUtil.preventDefault(event);
}
});
c.自动切换焦点
//
<input type = "text" name = "tel1" id = "txtTel1" maxLength = "3"/>
<input type = "text" name = "tel2" id = "txtTel2" maxLength = "3"/>
<input type = "text" name = "tel3" id = "txtTel3" maxLength = "3"/>
(function(){
function tabForward(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if(target.value.length = target.maxLength){
var form = target.form;
}
for(var i = 0,len = form.elements.length;i < len;i++){
if(form.elements[i] == target){
form.elements[i+1].focus();
return;
}
}
}
}
var text1 = document.getElementById("txtTel1");
var text2 = document.getElementById("txtTel2");
var text3 = document.getElementById("txtTel3");
EventUtil.addHandler(text1,"keyup",tabForward);
EventUtil.addHandler(text2,"keyup",tabForward);
EventUtil.addHandler(text3,"keyup",tabForward);
)();
d.表单序列化的代码：
function serilize(form){
var parts = new Array();
var fields = null;
for(var i = 0,len = form.elements.length;i<len;i++){
field = form.elements[i];
switch(field.type){
case "select-one":
case "select-multiple" :
for(var j = 0;j < field.options.length;j++){
var option = field.options[j];
if(option.selected){
var optValue = "";
if(option.hasAttribute){
optValue = (option.hasAttribute("value"))?option.value:option.text;
}else{
optValue = (option.attributes["value"].specified)?option.value:option.text;
}
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
}
}
break;
case undefined:
case "file" :
case "submit" :
case "button":
break;
case "radio":
case "checkbox":
if(!field.checked){
break;
}
default :
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
}
}
return parts.join("&");
}
14.js小知识点总结：
a.switch ..case 块中。进行的全等比较，而不是普通的==比较
b.值得检测问题：通常来说，基本类型的值用typeof检测。对象的值用instanceOf检测。
c.在js中，空字符串和其他字符串一样可以用作对象成员：例如
obj = {
'':100
}
alert(obj['']);//100
d. || 和 &&运算符总结：
|| 和&&运算符既不改变运算元的数据类型，也不会强制运算结果的数据类型。除此之外，还有两条性质：
<1>运算符将运算元理解为布尔值，以进行布尔运算。
<2>运算过程也会发生短路效应。
e. setTimeout()函数中用到的函数环境总是window。即在setTimeout函数中，this == window.这一点要注意。
15.ajax:
创建XHR对象：
function createXHR(){
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
if(typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
for(var i = 0,len = versions.length;i<len;i++){
try{
var xhr = new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
return xhr;
}catch(ex){
alert(ex.message);
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Exception("No XHR Object available");
}
}
16.作用域安全的构造函数
function Person(name,age,job){
if(this instanceof Person){
this.name = name;
this.age = age;
this.job = job;
}else{
return new Person(name,age,job);
}
}
17.函数绑定,数组分块，函数节流：
函数绑定：
function bind(fn,context){
return function(){
return fn.apply(context,arguments);
};
}
var btn = document.getElementById("mybtn");
EventUtil.addHandler(btn,"click",bind(handler.handclick,handler));
数组分块：
function chunk(array,process,context){
setTimeout(function(){
var item = array.shift();
process.callee(context,item);
if(item.length > 0){
setTimeout(arguments.callee,100);
}
},100);
}
函数节流：
function throttle(method,context){
clearTimeout(method.tId);
method.tId = setTimeout(function(){
method.call(context);
},100);
}
18.自定义事件：
观察者设计模式。
本质是创建一个管理事件的对象，让其他对象监听那些事件。基本模式如下：
function EventTarget(){
this.handlers = {};
}
EventTarget.prototype = {
constructor : EventTarget,
addHandler : function(type,handler){
if(typeof this.handlers[type] == "undefined"){
this.handlers[type] = [];
}
this.handlers[type].push(handler);
},
fire : function(event){
if(!event.target){
event.target = this;
}
if(this.handlers[event.type] instanceof Array){
var handlers = this.handlers[event.type];
for(var i = 0,len = handlers.length;i < len;i++){
handlers[i](event);
}
}
},
removeHandler : function(type,handler){
if(this.handlers[type] instanceof Array){
var handlers = this.handlers[type];
for(var i = 0,len = handlers.length;i < len;i++){
if(handlers[i] == handler){
break;
}
}
handlers.splice(i,1);
}
}
};
function handleMessage(event){
alert("Message received: " +event.message);
}
var target = new EventTarget();
target.addHandler("message",handleMessage);
target.fire({type:"message",message:"Hello world"});
target.removeHandler("message",handleMessage);
target.fire({type:"message",message:"Hello You"});
19.js cookie操作封装
var CookieUtil = {
get : function(name){
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null;
if(cookieStart > -1){
var cookieEnd = document.cookie.indexOf(";",cookieStart);
if(cookieEnd == -1){
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length,cookieEnd));
}
return cookieValue;
},
set : function(name,value,expires,path,domain,secure){
var cookieText = encodeURIComponent(name) + "=" +encodeURIComponent(value);
if(expires instanceof Date){
cookieText += "; expires=" + expires.toGMTString();
}
if(path){
cookieText += "; path=" +path;
}
if(domain){
cookieText += "; domain=" + domain;
}
if(secure){
cookieText += "; secure";
}
document.cookie = cookieText;
},
unset : function(name,path,domain,secure){
this.set(name,"",new Data(0) , path,domain,secure);
}
};
CookieUtil.set("name","Xiaoqing.huo");
CookieUtil.set("book","javascript");
alert(CookieUtil.get("name"));
alert(CookieUtil.get("book"));
CookieUtil.set("name","xiaoqing","/books/js","www.xiaonei.com",new Date("April 15,2012"));
CookieUtil.unset("name","/books/js","www.xiaonei.com");