review_js

来源：互联网发布：如何卖图片知乎编辑：程序博客网时间：2024/06/11 08:46

js的面向对象写法

function Lecture(name,teacher){this.name = name;this.teacher = teacher;}Lecture.prototype.display = function(){return (this.teacher + " is teaching " + this.name);}function Schedule(lectures){this.lectures = lectures;}Schedule.prototype.display = function(){var str = "";for(var i =0; i < this.lectures.length; i++){str += this.lectures[i].display();}return str;}var mySchedule = new Schedule([new Lecture("zhangsan","zhanglaoshi"),new Lecture("lisi","lilaoshi")]);alert(mySchedule.display());

js array赋值的是引用类型

var arr = new Array("one","two");var arrRef = arr;arr.push("three");alert(arr.length == arrRef.length);

js 字符串赋值是值类型

var str = "str";var strCopy = str;str+="again";alert(str == strCopy);

函数重载在js中并没有直接支持，只能通过特定的方法来模拟

function sendMessage(o1, o2) {if (arguments.length == 2) {o2.handleMsg("param 2");} else {alert(o1);}}sendMessage("o1");sendMessage("o1", {handleMsg: function(msg) {alert(msg);}});

可以使用typeof 和 Constructor 分别来判断类型和构造函数

typeof&Constructor变量typeofconstructor{an:"object"}objectObject["and","array"]objectArrayfunction(){}functionFunction"a string"stringString55numberNumbertruebooleanBooleannew User()objectUser

js的作用域和PHP一样，作用域由函数划分

var foo = "test";if(true){ var foo = "new test";}alert(foo=="new test");function test(){ var foo = "test again";}test();alert(foo == "new test");

//隐式定义全局变量function test(){foo = "test again";}test();alert(window.foo);

js的闭包：内层的函数可以引用存在于包围他的函数内的变量，即使外层函数的执行已经终止(个人理解).

还有人理解为：闭包就是定义在一个函数内部的函数，用这个子函数来获取父函数的内部变量。闭包就是一个把函数内部和函数外部连接起来的桥梁。

比较好的解释：当内部函数在定义它的作用域的外部被引用时,就创建了该内部函数的闭包 ,如果内部函数引用了位于外部函数的变量,当外部函数调用完毕后,这些变量在内存不会被释放,因为闭包需要它们.

function delayAlert(msg,time){ setTimeout(function(){   alert(msg);},time);}delayAlert("alert",2000);//这个时候delayAlert函数已经执行结束了，但是2秒后在执行的那个匿名函数还是会记得那个msg，这就是闭包

//但是，函数的上下文不会被闭包

function delayAlert2(msg,time){this.msg = msg; setTimeout(function(){this.msg = "inner msg";alert(this.msg);},time);}
函数声明和函数表达式的区别：解析器会先读取函数声明，使其在执行任何代码之前可用；而函数表达式，必须等到解释器执行到所在的行时，才会被解释执行。
foo();function foo(){alert("sssss");}//正常执行
foo();var foo = function(){alert("ssss");};//会报错

call & apply :
点击打开链接
js 任何函数都可以实例化为一个对象：
function user(name){this.name = name;}//var me = new user('my name'); //作为构造函数//alert(me.name);user('another name'); //作为普通函数，函数上下文变成windowalert(window.name);

理解js的prototype需要理解设计模式的原型模式。

谨记函数内的变量/函数仅仅存在于函数内。
function test(){function test2(){alert('test2');}alert('test1');}test();test2();//test2未定义

function test(){function test2(){alert('test2');}alert('test1');this.test3 = function (){alert('test3');}}//test();var t = new test();t.test2(); //私有方法，访问不到（这一行要注释，不然js执行遇到错误就会终止）t.test3(); //特权方法，可以访问//test2();

5种基本数据类型：
undefined ：未定义，未声明，派生自null （null == undefined）true
null ：空对象
boolean
number
string
1种复杂数据类型：object

对XHTML兼容：
<script type="text/javascript">//<![CDATA[ function add(n1,n2){ return n1+n2;}//]]></script>

应付不支持js或者js被禁用：
<noscript><p>sssssssssssssssssssss</p></noscript>

把script都放到head里有好处：好管理，方便缓存。

DOM操作四大金刚：
getElementById：获取一个元素节点
getElementsByTagName：获取一个元素节点的数组
getAttribute
setAttribute
元素节点 = 文本节点+属性节点
childNodes
nodeType
innerHTML：外号 斧头，元素节点内所有东东
节点处理方法汇总：
createElement(tagName):创建一个元素节点
createTextNode(string):创建一个文本节点
createAttribute(name):创建name属性
createComment(string):创建文本注释

parent.appendChild(newChild):放到父节点的末尾
parent.insertBefore(newChild,targetChild):插入到指定节点的前面

cloneNode(bool) : 克隆自身，true复制子节点, false不复制子节点

removeChild(childName)
replaceChild(newChild,oldChild)

文本节点操作：
insertData(offset,string) : 从指定offset位置插入string
appendData(string) : 将string插入文本节点的末尾
deleteData(offset,count) : 从offset处开始删除count个文本
replaceData(offset,count,string) : 从offset处用string替换count个文本
splitText(offset) : 左边的更新为原始节点，右边的返回到新节点
substringData(offset,count) : 从offset开始count文本

parent.appendChild(child):父节点appendChild子节点
createTextNode:创建一个文本节点
parent.insertBefore(new,target)

ECMA Script Language Binding：
DOM CORE LEVEL 1:这里是基本的，公有的特性
DOM HTML LEVEL 1：html特有的属性，在继承自DOM CORE的基础上
比如: Object.previousSibling() 是DOM CORE定义的，因为HTML DOM 是继承自DOM CORE，所以html dom可以直接用

在XHTML上面DOM HTML LEVEL 1是不好用的，只能用DOM CORE LEVEL 1

javascript Array:

toString()
toLocaleString()
valueOf()
join() //可以用任意字符来拼接数组元素，而其他几个方法只能默认以逗号来拼接

push(); //从尾巴推入
pop(); // 取尾巴 ，堆栈型，后进先出
shift(); //取头，队列型，先进先出
unshift();// 从头推入

reverse();
sort(function(){}); //sort是根据数组元素的字符串进行比较的，
  var arr = [0,1,5,10,15];arr.sort(function(a,b){return b-a;});

concat(array1,array2);// 相当于数组的加
slice(start,end=null);// 开始位置 到 结束位置 ，但是不包括结束位置。如果结束为空，就到最后。 
splice(start,delete number,新值1=null，。。。）；//start,end,都是数组的index

Date:
Date.prototype.format = function(format) {var o = {"M+" : this.getMonth()+1,"d+" : this.getDate(),"h+" : this.getHours(),"m+" : this.getMinutes(),"s+" : this.getSeconds(),"q+" : Math.floor((this.getMonth()+3)/3),"S"  : this.getMilliseconds()}if(/(y+)/.test(format)) format = format.replace(RegExp.$1,(this.getFullYear()+"").substr(4 - RegExp.$1.length));for(var k in o)if(new RegExp("("+ k +")").test(format)) format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k] :("00"+ o[k]).substr((""+ o[k]).length));return format;}

(new Date()).format('yyyy-MM-dd hh:mm:ss S')
正则表达式的元字符有：
() [] {} \ ^ $ | ? * + .


var expression = /pattern/flags ; 
flag:
g : 全局匹配
i: 不区分大小写
m: 表示多行模式

String类型：
charAt(offset): 返回单字符
charCodeAt(offset): 返回字符的编码值
slice(offset,end+1)
substring(offset,end+1)
substr(offset,count)

indexOf(string，offset) //从头开始,offset not null=从offset开始，返回的是整个string的offset
lastIndexOf(string,offset) //从尾开始,offset not null=从offset开始，返回的是整个string的offset

toUpperCase()
toLowerCase()

string.match(pattern)
string.search(pattern)
string.replace(pattern/string,string); //如果是pattern，替换所有，如果是string，只替换第一个

encodeURI() //对不属于URI本身的字符不做操作
encodeURIComponent()//对整个URI进行转义
decodeURI()
decodeURIComponent()

HTML 事件处理：
<input type="button" onclick="test()"></input>
DOM 0 级事件处理程序：
document.getElementById("btn").onclick=function(){alert("test")};
DOM 2 级事件处理程序：
IE:只支持冒泡， attachEvent / detachEvent
除了IE，其他： addEventListener(type,handler, capture/bubble) / removeEventListener
 <div style="width:500px;height:500px;"><p style="width:200px;height:200px;border:1px solid red;"><a href="#" id="a">sssssssssssss</a></p><p style="width:200px;height:200px;border:1px solid red;"><a href="#" id="b">sssssssssss</a></p>  </div>  <script type="text/javascript">  <!--var ps = document.getElementsByTagName("p");for(var i = 0; i< ps.length; i++){if(ps[i].attachEvent){ps[i].attachEvent("onclick",function(){alert("this is p");});}else{ps[i].addEventListener("click",function(event){alert("this is p");});}}  var a = document.getElementsByTagName("a");if(a != undefined){if(a[0].attachEvent){a[0].attachEvent('onclick',function(event){alert("this is a");alert(event.type);event.cancelBubble = true;});}else{a[0].addEventListener("click",function(event){alert("this is p");event.stopPropagation();});}}  //-->  </script>


attachEvent addEventListener是DOM 2 原生方法，所以才会有jquery出现。

$.xx 的扩展应用于非DOM对象。
 
(function(){$.say = function(what){ alert("say "+ what)};})(Jquery)

$.fn.xx 是用来扩展DOM元素操作的方法
(function(){$.fn.someNewMethod = function(data){return this.each(function(){alert($(this).attr("id"));})}})(Jquery)


	
					
					   review_js
	     		  
	  	   深入理解缓冲区（一）
	  	   Windows/Linux下使用Emacs+Slime+SBCL/SCHEME搭建LISP开发环境
	  	   购物网第一阶段总结笔记6：新闻管理模块之添加新闻（kindeditor在线编辑器的使用）
	  	   使用 rundll32.exe
	  	   可空枚举的实现方法
	  	   review_js
	  	   Python 中使用 pyrex 生成 Linux 可执行文件
	  	   莫陷入点击和评论陷阱
	  	   网站意见反馈（限输入字数）
	  	   TI CC2530  IAR设置 （附带IAR for8051 V7.6 KeyGen ,IAR for 8051 V8.10 Keygen下载）
	  	   java的几种对象(PO,VO,DAO,BO,POJO)解释
	  	   iphone开发——保存图片到相册及容错处理
	  	   POJ  2187 Beauty Contest
	  	   JSP防注入代码