前言

想學(xué)cesium源碼，感覺(jué)自己基礎(chǔ)太薄弱于，于是想把基礎(chǔ)打牢，感覺(jué)自己動(dòng)力不足，就像試試每天寫(xiě)點(diǎn)博客，寫(xiě)博客的好處還有就是自己溫習(xí)使用，很多事時(shí)候當(dāng)時(shí)學(xué)會(huì)的東西很快就忘掉了，如果能看到自己的思路，很快就能重新掌握起來(lái)。這也是自己想寫(xiě)博客的一個(gè)原因，name就由H5 先開(kāi)始，慢慢進(jìn)入webGL，Cesium源碼的學(xué)習(xí)吧。

本文學(xué)習(xí)參考https://www.cnblogs.com/fuckgiser/p/5045234.html，更詳細(xì)的學(xué)習(xí)還要讀者自己摸索。

js 操作二進(jìn)制

二進(jìn)制數(shù)據(jù)的創(chuàng)建與讀取

創(chuàng)建、 如下代碼，自己寫(xiě)了個(gè)小例子進(jìn)行二進(jìn)制數(shù)據(jù)的創(chuàng)建與讀取，只用了int32類(lèi)型，其他類(lèi)型類(lèi)似。

js中開(kāi)辟一塊內(nèi)存空間采用ArrayBuffer對(duì)象，實(shí)例中開(kāi)辟了一個(gè)16字節(jié)的內(nèi)存空間，然后用32位整形來(lái)綁定，我們知道8位是一字節(jié)，所以綁定后是一個(gè)長(zhǎng)度為4的整形數(shù)組（目前我這么理解的）

讀取、js讀取二進(jìn)制數(shù)據(jù)有兩種方式，一是TypeArray的方式；還有DataView的方式，有的筆者說(shuō)著兩者一個(gè)是小家碧玉，一個(gè)是大家閨秀，我理解后發(fā)現(xiàn)形容的非常到位。

TypeArray，它的類(lèi)型有：Int8, Uint8, Int16, Uint16, Int32, Uint32, Float32, Float64

TypeArray的構(gòu)建方式如代碼中TypeArray（buffer，begin，length），其中buffer就是我們的內(nèi)存塊，begin是讀取內(nèi)存的起始位置，length是創(chuàng)建該類(lèi)型數(shù)組的長(zhǎng)度，代碼中長(zhǎng)度設(shè)置了4，就是從buffer內(nèi)存塊的0位置讀取int32類(lèi)型的數(shù)據(jù)，讀取4份，賦值給h變量，

DataVeiw

通過(guò)代碼可以看到，DataView的讀取方式，是傳入讀取位置，和類(lèi)型一個(gè)一個(gè)讀取數(shù)據(jù)
最后代碼中的例子是兩者結(jié)合使用的方式，感覺(jué)實(shí)際開(kāi)發(fā)中應(yīng)該是兩個(gè)結(jié)合使用公有效率

    // 創(chuàng)建16個(gè)字節(jié)的內(nèi)存
    var buffer = new ArrayBuffer(16); 
    // 用32位的類(lèi)型來(lái)綁定該內(nèi)存區(qū)域，32位，每個(gè)變量是4個(gè)字節(jié)
    var int32View = new Int32Array(buffer); 
    // 此時(shí)長(zhǎng)度為4：4個(gè)int32類(lèi)型，則4*4 = 16字節(jié)
    for (var i=1; i<int32View.length; i++) { 
        int32View[i-1] = i; // 對(duì)每一個(gè)int32的變量賦值
    }

    //使用TypeArray解析二進(jìn)制，它的類(lèi)型有：Int8, Uint8, Int16, Uint16, Int32, Uint32, Float32, Float64
    debugger
    var h = new Int32Array(buffer,0,4)[1];
    alert(h)

    //使用dataview解析二進(jìn)制
    var pos = 0;
    var view = new DataView(buffer);
    var res= view.getInt32(pos,true)
    alert(res)
    pos+=Int32Array.BYTES_PER_ELEMENT;
    var res2= view.getInt32(pos,true)
    alert(res2)
    debugger
    var h2 = new Int32Array(buffer,pos,2)[0];
    alert(h2)

上面代碼依次alert的值應(yīng)該是：2,1,2,2

js 執(zhí)行worker

worker算是js中的多線(xiàn)程技術(shù)，它的用法也很簡(jiǎn)單，只需向 Worker 構(gòu)造函數(shù)傳遞需要在worker中運(yùn)行的文件路徑作為參數(shù)，就可以使得對(duì)應(yīng)的文件運(yùn)行在worker線(xiàn)程。Worker線(xiàn)程中沒(méi)有 window 對(duì)象，沒(méi)有 document 對(duì)象。不能操作和創(chuàng)建 DOM。 worker 線(xiàn)程和主線(xiàn)程只能通過(guò)消息機(jī)制來(lái)通信。下面直接給實(shí)例代碼

主線(xiàn)程

    var worker = new Worker('doWork.js');
    worker.onmessage= function (event) { 
        console.log(event.data)
    }; 


    var worker2 = new Worker('doWork2.js');
    worker2.addEventListener('message', function(e) { //worker onmessage 事件  
        console.log('Worker said: ', e.data);
    }, false);

    worker2.postMessage('Hello World'); // 把數(shù)據(jù)傳給工作者線(xiàn)程.

    console.log('主線(xiàn)程')

doWork.js

var i = 0;

function timedCount() {
    for (var j = 0, sum = 0; j < 100; j++) {
        for (var i = 0; i < 10; i++) {
            sum += i;
        }
    }
    postMessage(sum);
}

postMessage("Before computing," + new Date());
timedCount();
postMessage("After computing," + new Date());

doWork2.js

self.addEventListener('message', function (e) {
    debugger
    self.postMessage(e.data);
}, false);

主線(xiàn)程中創(chuàng)建了2個(gè)work線(xiàn)程，主線(xiàn)程與work線(xiàn)程通過(guò)message事件進(jìn)行通信，注冊(cè)好message事件，通過(guò)postMessage方法即可互相傳遞信息。

無(wú)標(biāo)題.jpg

worker也可以導(dǎo)入外部腳本，如下

importScripts('script.js', 'script2.js'); 

關(guān)閉worker ，在主線(xiàn)程中用 terminate，在 worker 線(xiàn)程中用 close，使用完就應(yīng)該即使關(guān)閉

 worker.terminate(); // 在主線(xiàn)程中關(guān)閉當(dāng)前 worker
self.close(); // 在 worker 中關(guān)閉自己