JS函数封装三个例子

最近太浮躁了。。。直接上代码。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>JS封装</title>
<!– 封装方法一 –>
<script>function ShapeBaseA(){this.show=function(){alert(“ShapeBaseA show”)};this.init=function(){alert(“ShapeBaseA init”)}}</script>
<!–封装方法一结束–>

<!– 封装方法二 –>
<script>
function ShapeBaseB(){};//如果此函数中给函数方法,那么下面的prototype就改变不了了
ShapeBaseB.prototype.show=function() { alert(“ShapeBaseB show”); }
ShapeBaseB.prototype.init=function() { alert(“ShapeBaseB init”); } </script>
<!–封装方法二结束–>

<!– 封装方法三 –>
<script>
function ShapeBaseC(){};
ShapeBaseC.prototype={ show:function() { alert(“ShapeBaseC show”); }, init:function() { alert(“ShapeBaseC init”); } }; </script>
<!–封装方三结束–>

</head>

<body >
<!– 方法一 –>
<script>function testA(){var s=new ShapeBaseA();s.show();s.init();}//按顺序执行函数的</script>
<!–方法一结束–>

<!– 方法二 –>
<script>function testB(){var s=new ShapeBaseB();s.init();s.show();}</script>
<!–方法二结束–>

<!– 方法三 –>
<script>function testC(){var s=new ShapeBaseC();s.init();s.show();}</script>
<!–方法三结束–>
<noscript>
<iframe src=”*.htm”></iframe>
</noscript>
<input type=”button” value=”testA” onclick=”testA()”/>
<input type=”button” value=”testB” onclick=”testB()”/>
<input type=”button” value=”testC” onclick=”testC()”/>
</body>
</html>

打赏

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注