js扩展学习总结

本文介绍了JavaScript扩展的基本原理和方法,展示了如何为内置对象和DOM元素添加自定义方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

                     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扩展做一个简单的介绍,提供一个基本的思路,以求抛砖引玉,错误之处欢迎指
正!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值