JavaScript Oluşturma ve Çalıştırma

Blockly uygulamaları, genellikle çıkış dili olarak JavaScript oluşturur. genellikle bir web sayfası içinde (büyük olasılıkla aynı veya yerleştirilmiş bir Web Görünümü) çalışacak şekilde ayarlayın. Herhangi bir oluşturucu gibi, ilk adım da JavaScript oluşturucuyu eklemektir.

import {javascriptGenerator} from 'blockly/javascript';

Çalışma alanından JavaScript oluşturmak için şunu çağırın:

javascriptGenerator.addReservedWords('code');
var code = javascriptGenerator.workspaceToCode(workspace);

Ortaya çıkan kod doğrudan hedef web sayfasında yürütülebilir:

try {
  eval(code);
} catch (e) {
  alert(e);
}

Yukarıdaki snippet, temel olarak kodu oluşturup değerlendirir. Ancak, birkaç iyileştirme var. İyileştirmelerden biri de evrimin başarısız olması yerine çalışma zamanı hatalarının görünür olması için try/catch rahatça söylenebilir. Diğer bir iyileştirme de code adlı kullanıcının ayrılanlar listesine eklenmesidir. kullanıcıların kodu bu ada sahip bir değişken içeriyorsa otomatik olarak yeniden adlandırıldı. Tüm yerel değişkenler bu şekilde ayırt edilecektir.

Blokları vurgula

Kod çalışırken şu anda yürütülen bloğun vurgulanması kullanıcıların ve programlarının davranışını anlayabiliyor. Vurgulama, ekranın öncesinde STATEMENT_PREFIX ayarlayarak ifadeye göre ifade düzeyinde oluşturma:

javascriptGenerator.STATEMENT_PREFIX = 'highlightBlock(%1);\n';
javascriptGenerator.addReservedWords('highlightBlock');

Çalışma alanındaki bloğu işaretlemek için highlightBlock öğesini tanımlayın.

function highlightBlock(id) {
  workspace.highlightBlock(id);
}

Bu, highlightBlock('123'); ifadesinin öncesine eklenmesine neden olur her ifade (burada 123, belirlenecek blokun seri numarasıdır) vurgulanıyor.

Sonsuz Döngüler

Elde edilen kodun her zaman söz dizimi açısından doğru olduğu garanti edilse de sonsuz döngüler içerebilir. Durdurma sorununu çözmek Blockly'nin kapsamı dışında olduğundan bu tür durumlarda en iyi yaklaşım, bir sayaç tutmak ve her iterasyonda sayacı azaltmaktır. Bunun için javascriptGenerator.INFINITE_LOOP_TRAP değerini bir kod olarak ayarlamanız yeterlidir her döngüye ve her işleve eklenecek bir snippet'i içerir. Aşağıda bir örnek verilmiştir:

window.LoopTrap = 1000;
javascriptGenerator.INFINITE_LOOP_TRAP = 'if(--window.LoopTrap == 0) throw "Infinite loop.";\n';
var code = javascriptGenerator.workspaceToCode(workspace);

Örnek

İşte canlı demo yürütmenin en iyi yoludur.

JS Çevirmeni

Kullanıcı bloklarını düzgün şekilde çalıştırma konusunda ciddiyseniz, Bunun için JS-Çevirmen projesi kullanabilirsiniz. Bu proje, Blockly'den ayrıdır ancak özellikle Blockly için yazılmıştır.

• Kodu istediğiniz hızda çalıştırın.
• Yürütmeyi duraklatma/devam ettirme/adım adım yönlendirme.
• Yürütülen blokları vurgulayın.
• Tarayıcının JavaScript'inden tamamen izoledir.

Çevirmeni çalıştırma

İlk olarak, GitHub'dan JS-Consulter'ı indirin:

Ardından sayfanıza ekleyin:

<script src="acorn_interpreter.js"></script>

Bunu çağırmanın en basit yöntemi JavaScript'i, JavaScript'i çevirmeye başlayın ve kodu çalıştırın:

var code = javascriptGenerator.workspaceToCode(workspace);
var myInterpreter = new Interpreter(code);
myInterpreter.run();

Çevirmene Adım Atma

Kodu daha yavaş veya daha kontrollü bir şekilde çalıştırmak için çağrısını run adımlarında tamamlayın (bu durumda, 10 ms'de bir adım):

function nextStep() {
  if (myInterpreter.step()) {
    setTimeout(nextStep, 10);
  }
}
nextStep();

Her adımın bir çizgi veya blok olmadığını, JavaScript'ten yararlanırsınız.

API ekleyin

JS-Yorumlayıcı, tarayıcıdan tamamen izole edilmiş bir korumalı alantır. Dış dünyayla işlem yapan tüm bloklara bir API eklenmesi gerekir. size yardımcı olur. Tam açıklama için JS-Interpreter belgelerine bakın. Ancak öncelikle uyarı ve istem bloklarını desteklemek için gereken API'yi burada bulabilirsiniz:

function initApi(interpreter, globalObject) {
  // Add an API function for the alert() block.
  var wrapper = function(text) {
    return alert(arguments.length ? text : '');
  };
  interpreter.setProperty(globalObject, 'alert',
      interpreter.createNativeFunction(wrapper));

  // Add an API function for the prompt() block.
  wrapper = function(text) {
    return prompt(text);
  };
  interpreter.setProperty(globalObject, 'prompt',
      interpreter.createNativeFunction(wrapper));
}

Ardından, çevirmen başlatma işleminizi initApi işlevini iletecek şekilde değiştirin:

var myInterpreter = new Interpreter(code, initApi);

Uyarı ve istem blokları, varsayılan engelleme grubundaki yalnızca iki bloktur gerekir.

highlightBlock() bağlanıyor

JS-Interpreter'da çalıştırıldığında highlightBlock(), kullanıcı programda ilerledikçe korumalı alan dışında hemen yürütülmelidir. Yapılacaklar işlevini yakalamak için highlightBlock() sarmalayıcı işlevi oluşturun bağımsız bir işlev olarak kaydedin ve bunu yerel bir işlev olarak kaydedin.

function initApi(interpreter, globalObject) {
  // Add an API function for highlighting blocks.
  var wrapper = function(id) {
    return workspace.highlightBlock(id);
  };
  interpreter.setProperty(globalObject, 'highlightBlock',
      interpreter.createNativeFunction(wrapper));
}

Daha sofistike uygulamalar, arka planda ya da soğutma dışında vurgulama komutuna ulaşılana kadar duraklatın, ardından duraklatın. Bu strateji, satır satır yürütmeyi öğreteceğim. Aşağıdaki örnekte bu yaklaşım kullanılmaktadır.

JS Çevirmen Örneği

İşte canlı demo en iyi uygulamaları görelim. Ve bu demo diğer eşzamansız davranışlar için kullanılacak iyi bir örnek olan bekleme bloğu içerir (ör. konuşma veya ses, kullanıcı girişi).