DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> stream.js 一個很小、完全獨立的Javascript類庫
stream.js 一個很小、完全獨立的Javascript類庫
編輯:關於JavaScript     
<script src='stream-min.js'></script>
下載 stream.js
2Kb minified

streams是什麼?
Streams 是一個操作簡單的數據結構,很像數組或鏈接表,但附加了一些非凡的能力。

它們有什麼特別之處?
跟數組不一樣,streams是一個有魔法的數據結構。它可以裝載無窮多的元素。是的,你沒聽錯。他的這種魔力來自於具有延後(lazily)執行的能力。這簡單的術語完全能表明它們可以加載無窮多的元素。

入門
如果你願意花10分鐘的時間來閱讀這篇文章,你對編程的認識有可能會被完全的改變(除非你有函數式編程的經驗!)。請稍有耐心,讓我來先介紹一下streams支持的跟數組或鏈接表很類似的基本功能操作。然後我會像你介紹一些它具有的非常有趣的特性。

Stream 是一種容器。它能容納元素。你可以使用 Stream.make 來讓一個stream加載一些元素。只需要把想要的元素當成參數傳進去:

var s = Stream.make( 10, 20, 30 ); // s is now a stream containing 10, 20, and 30
足夠簡單吧,現在 s 是一個擁有3個元素的stream: 10, 20, and 30; 有順序的。我們可以使用 s.length() 來查看這個stream的長度,用 s.item( i ) 通過索引取出裡面的某個元素。你還可以通過調用 s.head() 來獲得這個stream 的第一個元素。讓我們實際操作一下:
復制代碼 代碼如下:
var s = Stream.make( 10, 20, 30 );
console.log( s.length() ); // outputs 3
console.log( s.head() ); // outputs 10
console.log( s.item( 0 ) ); // exactly equivalent to the line above
console.log( s.item( 1 ) ); // outputs 20
console.log( s.item( 2 ) ); // outputs 30

本頁面已經加載了這個 stream.js 類庫。如果你想運行這些例子或自己寫幾句,打開你的浏覽器的Javascript控制台直接運行就行了。

我們繼續,我們也可以使用 new Stream() 或 直接使用 Stream.make() 來構造一個空的stream。你可以使用 s.tail() 方法來獲取stream裡除了頭個元素外的余下所有元素。如果你在一個空stream上調用 s.head() 或 s.tail() 方法,會拋出一個異常。你可以使用 s.empty() 來檢查一個stream是否為空,它返回 true 或 false。
復制代碼 代碼如下:
var s = Stream.make( 10, 20, 30 );
var t = s.tail(); // returns the stream that contains two items: 20 and 30
console.log( t.head() ); // outputs 20
var u = t.tail(); // returns the stream that contains one item: 30
console.log( u.head() ); // outputs 30
var v = u.tail(); // returns the empty stream
console.log( v.empty() ); // prints true

這樣做可以打印出一個stream裡的所有元素:
復制代碼 代碼如下:
var s = Stream.make( 10, 20, 30 );
while ( !s.empty() ) {
console.log( s.head() );
s = s.tail();
}

我們有個簡單的方法來實現這個: s.print() 將會打印出stream裡的所有元素。

用它們還能做什麼?
另一個簡便的功能是 Stream.range( min, max ) 函數。它會返回一個包含有從 min 到 max 的自然數的stream。
復制代碼 代碼如下:
var s = Stream.range( 10, 20 );
s.print(); // prints the numbers from 10 to 20
在這個stream上,你可以使用 map, filter, 和 walk 等功能。 s.map( f ) 接受一個參數 f,它是一個函數, stream裡的所有元素都將會被f處理一遍;它的返回值是經過這個函數處理過的stream。所以,舉個例子,你可以用它來完成讓你的 stream 裡的數字翻倍的功能:

function doubleNumber( x ) {
return 2 * x;
}

var numbers = Stream.range( 10, 15 );
numbers.print(); // prints 10, 11, 12, 13, 14, 15
var doubles = numbers.map( doubleNumber );
doubles.print(); // prints 20, 22, 24, 26, 28, 30

很酷,不是嗎?相似的, s.filter( f ) 也接受一個參數f,是一個函數,stream裡的所有元素都將經過這個函數處理;它的返回值也是個stream,但只包含能讓f函數返回true的元素。所以,你可以用它來過濾到你的stream裡某些特定的元素。讓我們來用這個方法在之前的stream基礎上構建一個只包含奇數的新stream:
復制代碼 代碼如下:
function checkIfOdd( x ) {
if ( x % 2 == 0 ) {
// even number
return false;
}
else {
// odd number
return true;
}
}
var numbers = Stream.range( 10, 15 );
numbers.print(); // prints 10, 11, 12, 13, 14, 15
var onlyOdds = numbers.filter( checkIfOdd );
onlyOdds.print(); // prints 11, 13, 15

很有效,不是嗎?最後的一個s.walk( f )方法,也是接受一個參數f,是一個函數,stream裡的所有元素都要經過這個函數處理,但它並不會對這個stream做任何的影響。我們打印stream裡所有元素的想法有了新的實現方法:
復制代碼 代碼如下:
function printItem( x ) {
console.log( 'The element is: ' + x );
}
var numbers = Stream.range( 10, 12 );
// prints:
// The element is: 10
// The element is: 11
// The element is: 12
numbers.walk( printItem );

還有一個很有用的函數: s.take( n ),它返回的stream只包含原始stream裡第前n個元素。當用來截取stream時,這很有用:
復制代碼 代碼如下:
var numbers = Stream.range( 10, 100 ); // numbers 10...100
var fewerNumbers = numbers.take( 10 ); // numbers 10...19
fewerNumbers.print();

另外一些有用的東西:s.scale( factor ) 會用factor(因子)乘以stream裡的所有元素; s.add( t ) 會讓 stream s 每個元素和stream t裡對應的元素相加,返回的是相加後的結果。讓我們來看幾個例子:
復制代碼 代碼如下:
var numbers = Stream.range( 1, 3 );
var multiplesOfTen = numbers.scale( 10 );
multiplesOfTen.print(); // prints 10, 20, 30
numbers.add( multiplesOfTen ).print(); // prints 11, 22, 33

盡管我們目前看到的都是對數字進行操作,但stream裡可以裝載任何的東西:字符串,布爾值,函數,對象;甚至其它的數組或stream。然而,請注意一定,stream裡不能裝載一些特殊的值:null 和 undefined。

想我展示你的魔力!
現在,讓我們來處理無窮多。你不需要往stream添加無窮多的元素。例如,在Stream.range( low, high )這個方法中,你可以忽略掉它的第二個參數,寫成 Stream.range( low ), 這種情況下,數據沒有了上限,於是這個stream裡就裝載了所有從 low 到無窮大的自然數。你也可以把low參數也忽略掉,這個參數的缺省值是1。這種情況中,Stream.range()返回的是所有的自然數。

這需要用上你無窮多的內存/時間/處理能力嗎?
不,不會。這是最精彩的部分。你可以運行這些代碼,它們跑的非常快,就像一個普通的數組。下面是一個打印從 1 到 10 的例子:
復制代碼 代碼如下:
var naturalNumbers = Stream.range(); // returns the stream containing all natural numbers from 1 and up
var oneToTen = naturalNumbers.take( 10 ); // returns the stream containing the numbers 1...10
oneToTen.print();

你在騙人
是的,我在騙人。關鍵是你可以把這些結構想成無窮大,這就引入了一種新的編程范式,一種致力於簡潔的代碼,讓你的代碼比通常的命令式編程更容易理解、更貼近自然數學的編程范式。這個Javascript類庫本身就很短小;它是按照這種編程范式設計出來的。讓我們來多用一用它;我們構造兩個stream,分別裝載所有的奇數和所有的偶數。
復制代碼 代碼如下:
var naturalNumbers = Stream.range(); // naturalNumbers is now 1, 2, 3, ...
var evenNumbers = naturalNumbers.map( function ( x ) {
return 2 * x;
} ); // evenNumbers is now 2, 4, 6, ...
var oddNumbers = naturalNumbers.filter( function ( x ) {
return x % 2 != 0;
} ); // oddNumbers is now 1, 3, 5, ...
evenNumbers.take( 3 ).print(); // prints 2, 4, 6
oddNumbers.take( 3 ).print(); // prints 1, 3, 5

很酷,不是嗎?我沒說大話,stream比數組的功能更強大。現在,請容忍我幾分鐘,讓我來多介紹一點關於stream的事情。你可以使用 new Stream() 來創建一個空的stream,用 new Stream( head, functionReturningTail ) 來創建一個非空的stream。對於這個非空的stream,你傳入的第一個參數成為這個stream的頭元素,而第二個參數是一個函數,它返回stream的尾部(一個包含有余下所有元素的stream),很可能是一個空的stream。困惑嗎?讓我們來看一個例子:
復制代碼 代碼如下:
var s = new Stream( 10, function () {
return new Stream();
} );
// the head of the s stream is 10; the tail of the s stream is the empty stream
s.print(); // prints 10
var t = new Stream( 10, function () {
return new Stream( 20, function () {
return new Stream( 30, function () {
return new Stream();
} );
} );
} );
// the head of the t stream is 10; its tail has a head which is 20 and a tail which
// has a head which is 30 and a tail which is the empty stream.
t.print(); // prints 10, 20, 30

沒事找事嗎?直接用Stream.make( 10, 20, 30 )就可以做這個。但是,請注意,這種方式我們可以輕松的構建我們的無窮大stream。讓我們來做一個能夠無窮無盡的stream:
復制代碼 代碼如下:
function ones() {
return new Stream(
// the first element of the stream of ones is 1...
1,
// and the rest of the elements of this stream are given by calling the function ones() (this same function!)
ones
);
}

var s = ones(); // now s contains 1, 1, 1, 1, ...
s.take( 3 ).print(); // prints 1, 1, 1

請注意,如果你在一個無限大的stream上使用 s.print(),它會無休無止的打印下去,最終耗盡你的內存。所以,你最好在使用s.print()前先s.take( n )。在一個無窮大的stream上使用s.length()也是無意義的,所有,不要做這些操作;它會導致一個無盡的循環(試圖到達一個無盡的stream的盡頭)。但是對於無窮大stream,你可以使用s.map( f ) 和 s.filter( f )。然而,s.walk( f )對於無窮大stream也是不好用。所有,有些事情你要記住; 對於無窮大的stream,一定要使用s.take( n )取出有限的部分。

讓我們看看能不能做一些更有趣的事情。還有一個有趣的能創建包含自然數的stream方式:

復制代碼 代碼如下:
function ones() {
return new Stream( 1, ones );
}
function naturalNumbers() {
return new Stream(
// the natural numbers are the stream whose first element is 1...
1,
function () {
// and the rest are the natural numbers all incremented by one
// which is obtained by adding the stream of natural numbers...
// 1, 2, 3, 4, 5, ...
// to the infinite stream of ones...
// 1, 1, 1, 1, 1, ...
// yielding...
// 2, 3, 4, 5, 6, ...
// which indeed are the REST of the natural numbers after one
return ones().add( naturalNumbers() );
}
);
}
naturalNumbers().take( 5 ).print(); // prints 1, 2, 3, 4, 5

細心的讀者會發現為什麼新構造的stream的第二參數是一個返回尾部的函數、而不是尾部本身的原因了。這種方式可以通過延遲尾部截取的操作來防止進行進入無窮盡的執行周期。

讓我們來看一個更復雜的例子。下面的是給讀者留下的一個練習,請指出下面這段代碼是做什麼的?
復制代碼 代碼如下:
function sieve( s ) {
var h = s.head();
return new Stream( h, function () {
return sieve( s.tail().filter( function( x ) {
return x % h != 0;
} ) );
} );
}
sieve( Stream.range( 2 ) ).take( 10 ).print();

請一定要花些時間能清楚這段代碼的用途。除非有函數式編程經驗,大多數的程序員都會發現這段代碼很難理解,所以,如果你不能立刻看出來,不要覺得沮喪。給你一點提示:找出被打印的stream的頭元素是什麼。然後找出第二個元素是什麼(余下的元素的頭元素);然後第三個元素,然後第四個。這個函數的名稱也能給你一些提示。

如果你對這種難題感興趣,這兒還有一些。

如果你真的想不出這段代碼是做什麼的,你就運行一下它,自己看一看!這樣你就很容易理解它是怎麼做的了。

致敬
Streams 實際上不是一個新的想法。很多的函數式的編程語言都支持這種特征。所謂‘stream'是Scheme語言裡的叫法,Scheme是LISP語言的一種方言。Haskell語言也支持無限大列表(list)。這些'take', 'tail', 'head', 'map' 和 'filter' 名字都來自於Haskell語言。Python和其它很多中語言中也存在雖然不同但很相似的這種概念,它們都被稱作"發生器(generators)"。

這些思想來函數式編程社區裡已經流傳了很久了。然而,對於大多數的Javascript程序員來說卻是一個很新的概念,特別是那些沒有函數式編程經驗的人。

這裡很多的例子和創意都是來自 Structure and Interpretation of Computer Programs 這本書。如果你喜歡這些想法,我高度推薦你讀一讀它;這本書可以在網上免費獲得。它也是我開發這個Javascript類庫的創意來源。

如果你喜歡其它語法形式的stream,你可以試一下linq.js,或者,如果你使用 node.js, node-lazy 也許更適合你。

如果你要是喜歡 CoffeeScript 的話, Michael Blume 正在把 stream.js 移植到 CoffeeScript 上,創造出 coffeestream。

感謝你的閱讀!
我希望你能有所收獲,並喜歡上 stream.js。這個類庫是免費的,所以,如果你喜歡它,或它能在某方面提供了幫助,你可以考慮替我買一杯熱巧克力飲料 (我不喝咖啡) 或者 寫信給我。如果你打算這樣做,請寫清你是哪裡人,做什麼的。我很喜歡收集世界各地的圖片,所以,信中請附上你在你的城市裡拍的照片!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved