js扩展学习总结

最新推荐文章于 2021-01-09 19:00:58 发布

原创最新推荐文章于 2021-01-09 19:00:58 发布 · 5.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#扩展 #function #xhtml #encoding #html #java

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