Js扩展学习总结
——谨以此文献给刚接触js,马山接到指示要做一个js扩展lib的朋友们
最近做了一个js扩展的lib,迷茫一阵,也有一点心得,写出来与大家分享!
为什么要扩展?
javascript(以下简称js)作为一种基于面向对象的脚本语言,本身有丰富的内建对象(build-in
object),内建对象也提供了非常丰富的方法。为了web开发者更方便,有更多的对象和方法可以使用,
js扩展就很有必要,比较好扩展库,象prototype.js ,Mootools.js等,已经有很多。
为什么能扩展?
js作为一种面向对象的语言,却与java , C++有着很大区别,对java,C++,他们是基于类的
面向对象的语言(Class-based object-oriented language) ,而js则是建立在prototypes上的基
于对象的语言(object-based language based on prototypes ),拽一下名词,呵呵,其实对于扩
展就是一句话,js的对象里面的方法和属性都可以动态的删减的,而java,C++在定义一个类时,
方法和属性都已确定,创建对象后是无法改变的。对于用惯了java,C++,而第一次做js扩展的
朋友来说,理解这一点非常重要(我也是苦恼了两天才明白这一点), 正是利用这一点,js的对象
才可以进行扩展。
怎么扩展呢?
比如Math是js内建的一个对象,它有很多方法,如abs()等,如果你想给它添一个方法
minus(a, b),实现两个数相减(估计这辈子你都不需要这么做,呵呵),你可以这样做:
// implementation in test_extend.js
//extend the build-in object----------
//merge method
if (typeof AAA=="undefined") AAA={};
AAA.merge=function(myElement, extended){
for (var property in extended){
if (typeof myElement[property]=="undefined"){
myElement[property]=extended[property];
}
}
}/
/extended object
function myMath(){
this.minus=function(A,B){
return (B-A)
}
}
var myMathObject= new myMath;
// merge the extend method
AAA.merge(Math,myMathObject);
写一个网页试一下,象这样:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:widget="http://www.netvibes.com/ns/">
<head>
<title>Hello, World!</title>
<script type="text/javascript" src="./test_extend.js" charset='utf-8'></script>
</head>
<body>
<div id="large-icon" >
<img id="firstOne" class="FirstOneClass" onclick=alert(Math.minus(3,6)) src="./Icon.png">Test
object extend</img>
</div>
</body>
</html>
弹出了3,哦了!
另外一个例子:
对于多数浏览器引擎(如IE 的Trident , 广泛使用的webkit),每个Dom element都有一个
parentNode的属性,即获得父节点,如果你觉得不爽,想添加一个新方法如getParent(),你可以
这样做:
//implementation in js
var ExtendObject={};
//new method to add
ExtendObject.getParent=function(){ return this.parentNode};
if (typeof AAA=="undefined") AAA={};
//merge the new method
AAA.extend=function(myElement){
for (var property in ExtendObject){
if (typeof myElement[property]=="undefined"){
myElement[property]=ExtendObject[property];
}
}
return myElement;
}
在html中,这样用:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:widget="http://www.netvibes.com/ns/">
<head>
<title>Hello, World!</title>
<script type="text/javascript" src="./test_extend.js" charset='utf-8'></script>
<script type="text/javascript">
function test() {
var el= AAA.extend(document.getElementById("firstOne"));
alert(el.getParent().id);
}
</script>
</head>
<body>
<div id="large-icon" >
<img id="firstOne" class="FirstOneClass" onclick=test() src="./Icon.png">Test object extend</img>
</div>
</body>
</html>
弹出large-icon ! 哦了!
本文只是对js扩展做一个简单的介绍,提供一个基本的思路,以求抛砖引玉,错误之处欢迎指
正!