Kod oluşturma

Kod oluşturma, bir çalışma alanındaki blokları belirli bir yürütülebilecek kod dizesidir.

Kod oluşturma son derece önemlidir çünkü bloklarınızın aritmetik ifadeleri değerlendirme, bir karakteri hareket ettirme gibi şeyler yapabilir yapabilir veya bir online mağaza yapılandırabilirsiniz.

"Koşu" yapamazsınız engelleyebilirsiniz. Bunun yerine kod dizeleri oluşturursunuz ve yürütür.

Kod oluşturucular

Kod oluşturmak için, kullanmak istediğiniz metin tabanlı dili seçmeniz gerekir. üretir.

Kod oluşturucu, aynı koda sahip kod oluşturma kurallarını işleyen bir sınıftır. belirli bir dile özgü olabilir, ancak belirli bir engele özgü değildir. Örneğin, bazı işlemleri gerçekleştirirken yorumları biçimlendirme, girintileme ifadeleri ve dizeleri alıntılamaktır.

// javascriptGenerator is a code generator that makes javascript strings.
import {javascriptGenerator} from 'blockly/javascript';

const code = javascriptGenerator.workspaceToCode(myWorkspace);

Blockly, 5 yerleşik kod oluşturma aracı sunar:

  • JavaScript ES5
  • Python 3
  • Lua 5.1
  • Dart 2
  • 7 PHP

Aşağıdaki yöntemlerden birini kullanarak oluşturucuları içe aktarabilir ve kullanabilirsiniz.

Modüller

import {javascriptGenerator} from 'blockly/javascript';
import {pythonGenerator} from 'blockly/python';
import {phpGenerator} from 'blockly/php';
import {luaGenerator} from 'blockly/lua';
import {dartGenerator} from 'blockly/dart';

const jsCode = javascriptGenerator.workspaceToCode(workspace);
const pythonCode = pythonGenerator.workspaceToCode(workspace);
const phpCode = phpGenerator.workspaceToCode(workspace);
const luaCode = luaGenerator.workspaceToCode(workspace);
const dartCode = dartGenerator.workspaceToCode(workspace);

Pkt'yi kaldır

Blockly'yi ekledikten sonra oluşturucuyu da eklemeniz gerekir.

<script src="https://unpkg.com/blockly"></script>
<script src="https://unpkg.com/blockly/javascript_compressed"></script>
<script src="https://unpkg.com/blockly/python_compressed"></script>
<script src="https://unpkg.com/blockly/php_compressed"></script>
<script src="https://unpkg.com/blockly/lua_compressed"></script>
<script src="https://unpkg.com/blockly/dart_compressed"></script>

const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);
const pythonCode = python.pythonGenerator.workspaceToCode(workspace);
const phpCode = php.phpGenerator.workspaceToCode(workspace);
const luaCode = lua.luaGenerator.workspaceToCode(workspace);
const dartCode = dart.dartGenerator.workspaceToCode(workspace);

Yerel komut dosyaları

Blockly'yi ekledikten sonra oluşturucuyu da eklemeniz gerekir.

<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>
<script src="python_compressed.js"></script>
<script src="php_compressed.js"></script>
<script src="lua_compressed.js"></script>
<script src="dart_compressed.js"></script>

const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);
const pythonCode = python.pythonGenerator.workspaceToCode(workspace);
const phpCode = php.phpGenerator.workspaceToCode(workspace);
const luaCode = lua.luaGenerator.workspaceToCode(workspace);
const dartCode = dart.dartGenerator.workspaceToCode(workspace);

Bu liste, kod oluşturmak istediğiniz dili içermiyorsa özel kod oluşturma aracı da oluşturun.

Blok kodu oluşturucular

Kod oluşturmanın ikinci bölümü, hangi kod için bağımsız blokların üretir. Bu işlem, kullandığınız her bir dil için ve her blok için yapılmalıdır. oluşturmak istediğinize karar verin.

javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ }

Kod oluşturucuların çalışma şekli farklı blok türleri için farklıdır:

Ancak hepsinin alanlardan değer toplanması gerekir. iç blokları topla’ kodu ve ardından, yardımcı olabilir.

Oluşturma

Oluşturma işlemi, son kullanıcı istekte bulunduğunda (örneğin, bir düğme) ya da bu işlem sürekli olarak yapılabilir.

Sürekli güncellemeler, kullanıcı bir işlem gerçekleştirdiğinde kodu göstermenize veya çalıştırmanıza olanak tanır. unutmayın. Kod oluşturmak hızlı bir işlemdir, bu yüzden performans azdır nasıl bir etki yarattığını irdeleyelim. Bu işlem, bir etkinlik işleyici kullanılarak gerçekleştirilir.

const supportedEvents = new Set([
  Blockly.Events.BLOCK_CHANGE,
  Blockly.Events.BLOCK_CREATE,
  Blockly.Events.BLOCK_DELETE,
  Blockly.Events.BLOCK_MOVE,
]);

function updateCode(event) {
  if (workspace.isDragging()) return; // Don't update while changes are happening.
  if (!supportedEvents.has(event.type)) return;

  const code = javascriptGenerator.workspaceToCode(workspace);
  document.getElementById('textarea').value = code;
}

workspace.addChangeListener(updateCode);

Başlangıç veya posta kodu kodu

Kodunuzu oluşturduktan sonra (isteğe bağlı) önsöz veya başlangıç kodunu ekleyin.

let code = javascriptGenerator.workspaceToCode(workspace);
// Add a preamble and a postscript to the code.
code = `const def = 'some value';\n${code}\nkickOffSomeFunction();\n`;

Önsöz kodu genellikle harici tanımları başa eklemek için kullanılır içerir. Postscript kodu genellikle başlangıçtaki fonksiyonları çağırmak için kullanılır davranışına işaret eder.

Oluşturulan kodunuz olduğu gibi çalıştırılabiliyorsa önsöz veya postscript kullanabilirsiniz.

Yürütme

Kodu oluşturduktan sonra, nasıl çalıştıracağınızı bulmanız gerekir. Projenin nasıl yürütüleceğine karar vermek tamamen uygulamaya özgüdür ve kapsam dışındadır kullanıma sunuyoruz.

Blockly ekibi, JavaScript kodu için JSInterpreter. Diğer diller için başka araçlar gerekir.