review_js

段干帅

2023-12-01

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
变量	typeof	constructor
{an:"object"}	object	Object
["and","array"]	object	Array
function(){}	function	Function
"a string"	string	String
55	number	Number
true	boolean	Boolean
new User()	object	User

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'); //作为普通函数，函数上下文变成window
alert(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" οnclick="test()"></input>
DOM 0 级事件处理程序：
document.getElementById("btn").οnclick=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

节点处理方法汇总：

ECMA Script Language Binding：

DOM 0 级事件处理程序：

DOM 2 级事件处理程序：

相关阅读

相关文章

相关问答