javascript - class like
當物件導向的程式寫久了之後，會發現class的包裝方式真的是一種很棒的東西，把一些相關的東西包在一起，包括變數，包括程式(function、方法)，內部共享資源，對外則提供安全(簡單)的存取通道。
而我最近在寫 javascript，js沒有class這種東西，起初有點灰心，但後來網路上爬了一陣子發現，由於js架構的關係，可以弄出class like的程式架構，於是我就把它學起來了！以下弄一個範例分享給各位。
這一個範例，概念上是弄一個叫myRing的物件，它是一個RING資料容器，大小是10，存滿10筆資料之後，又重頭開始存。存資料進去的function為addData。而依照新舊順序將容器裡所有資料取出的function為getData，另外dataLength為此容器目前的資料筆數。總共三個對外的資源，而內部控制及存取資料的變數有三個，curIndex, upLimit, myData，為private，外部不能直接存取。
完整的程式碼如下：(js_class_like.html)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>javascript class like</title>
<style type="text/css">
#log { font-size:24px; color:blue; font-family:Tahoma; }
</style>
<script type="text/javascript">
var RoutineInt;
var ring = new myRing();
RoutineInt = self.setInterval('MyAction()', 1000);
function MyAction()
{
ring.addData(Math.floor(Math.random() * 100));
document.getElementById("log").innerHTML = '(' + ring.dataLength + ') ' + ring.getData().join();
}
function myRing()
{
// private variable
var curIndex = -1;
var upLimit = 10;
var myData = [];
// public variable
this.dataLength = myData.length;
// public function
this.addData = function(newValue)
{
curIndex = (curIndex + 1) % upLimit;
myData[curIndex] = newValue;
this.dataLength = myData.length;
}
this.getData = function()
{
var dataArray = new Array();
for (var i = 0; i < myData.length; i++) {
dataArray[i] = myData[(curIndex - i + upLimit) % upLimit];
}
return dataArray;
}
}
</script>
</head>
<body>
<div id="log" ></div>
</body>
</html>
程式檔案：https://docs.google.com/file/d/0B0kC-urN3g_jc09NdEpsZU52QWc/edit?usp=sharing
程式直接透過瀏覽器執行即可。
而我最近在寫 javascript，js沒有class這種東西，起初有點灰心，但後來網路上爬了一陣子發現，由於js架構的關係，可以弄出class like的程式架構，於是我就把它學起來了！以下弄一個範例分享給各位。
這一個範例，概念上是弄一個叫myRing的物件，它是一個RING資料容器，大小是10，存滿10筆資料之後，又重頭開始存。存資料進去的function為addData。而依照新舊順序將容器裡所有資料取出的function為getData，另外dataLength為此容器目前的資料筆數。總共三個對外的資源，而內部控制及存取資料的變數有三個，curIndex, upLimit, myData，為private，外部不能直接存取。
完整的程式碼如下：(js_class_like.html)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>javascript class like</title>
<style type="text/css">
#log { font-size:24px; color:blue; font-family:Tahoma; }
</style>
<script type="text/javascript">
var RoutineInt;
var ring = new myRing();
RoutineInt = self.setInterval('MyAction()', 1000);
function MyAction()
{
ring.addData(Math.floor(Math.random() * 100));
document.getElementById("log").innerHTML = '(' + ring.dataLength + ') ' + ring.getData().join();
}
function myRing()
{
// private variable
var curIndex = -1;
var upLimit = 10;
var myData = [];
// public variable
this.dataLength = myData.length;
// public function
this.addData = function(newValue)
{
curIndex = (curIndex + 1) % upLimit;
myData[curIndex] = newValue;
this.dataLength = myData.length;
}
this.getData = function()
{
var dataArray = new Array();
for (var i = 0; i < myData.length; i++) {
dataArray[i] = myData[(curIndex - i + upLimit) % upLimit];
}
return dataArray;
}
}
</script>
</head>
<body>
<div id="log" ></div>
</body>
</html>
程式檔案：https://docs.google.com/file/d/0B0kC-urN3g_jc09NdEpsZU52QWc/edit?usp=sharing
程式直接透過瀏覽器執行即可。
留言
張貼留言