Blockly 기반 시각적 프로그래밍 엔트리급 인스턴스(3, VUE 환경에서 비동기적으로 Blockly 코드를 처리하는 예)

6051 단어 JavaScriptasyncawaitBlocklyVue.js
이 장은 Blockly의 Block에서 코드를 비동기적으로 생성하는 방법을 설명하는 VUE의 간단한 예입니다.
Blockly 코드를 실행할 때마다 Interpreter 라이브러리를 자주 사용하지만, Interpreter 라이브러리를 사용하지 않으려면 JavaScript의 eval 함수로 Blockly 코드를 실행할 수도 있습니다.
eval은 보통 동기화에서 원본 코드를 실행합니다. 다음 예는 비동기적으로 실행하려면 어떻게 해야 하는지 설명합니다.

사전 준비


Blockly


공식 홈페이지:https://developers.google.com/blockly/
웹 버전 자료:https://developers.google.com/blockly/guides/get-started/web#get_the_code

VUE


견본


testblock.js


이 파일에서 화면 표시에 사용할 블록 만들기
Blockly의 DevelopTool에서 생성할 수 있습니다.
Blockly.Blocks['block_asyncplay'] = {
  init: function() {
    this.appendStatementInput("MUSIC")
        .setCheck(null)
        .setAlign(Blockly.ALIGN_RIGHT)
        .appendField("play");
    this.setInputsInline(true);
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(120);
 this.setTooltip("");
 this.setHelpUrl("");
  }
};
Blockly.JavaScript['block_asyncplay'] = function(block) {
  var statements_music = Blockly.JavaScript.statementToCode(block, 'MUSIC');
  var code = "async function asyncplay() {\n" + statements_music + "\n}\n";
  return code;
};

Blockly.Blocks['block_play'] = {
  init: function() {
    this.appendDummyInput()
        .setAlign(Blockly.ALIGN_RIGHT)
        .appendField("play");
    this.setInputsInline(true);
    this.setPreviousStatement(true, "String");
    this.setNextStatement(true, "String");
    this.setColour(120);
    this.setTooltip("");
    this.setHelpUrl("");
  }
};
Blockly.JavaScript['block_play'] = function(block) {
    var code = "await play(1000);\n";
    return code;
};

test01.html


화면에 블록을 표시하는 데 사용되는 HTML 파일입니다.
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js'></script><!-- 2019-01-25 https://cdnjs.com/libraries/vue -->

    <script src="../blockly-master/blockly_compressed.js"></script>
    <script src="../blockly-master/blocks_compressed.js"></script>
    <script src="../blockly-master/javascript_compressed.js"></script>
    <script src="../blockly-master/msg/js/en.js"></script>
    <script src="./testblock.js"></script>
<body>

<div id="vue_example"></div>

<script>
var vue_example = new Vue({
  el: '#vue_example',

  template: `<div>
        <div width="600px" height="50px">
            <button v-on:click="test()">test</button>
        </div>
        <div width="600px" height="600px">
              <div id="blocklyDiv" style="height: 100%; width: 100%;"></div>
              <xml id="toolbox" ref="toolbox" style="display: none">
                <block type="block_asyncplay"></block>
                <block type="block_play"></block>
              </xml>
              <xml id="workbox" ref="workbox">
                <block type="block_asyncplay" id="id_block_asyncplay" x="10" y="30">
                    <statement name="MUSIC">
                        <block type="block_play" id="id_block_play_01">
                            <next>
                                <block type="block_play" id="id_block_play_02">
                                    <next>
                                        <block type="block_play" id="id_block_play_03"></block>
                                    </next>
                                </block>
                            </next>
                        </block>
                    </statement>
                </block>
              </xml>
        </div>
    </div>`,

  data: {
    message: 'Hello Vue.js!',
  },
  mounted() {
      var workbox = this.$refs["workbox"];
      var options = {
        toolbox: toolbox,
        collapse: true,
        comments: true,
        disable: true,
        maxBlocks: Infinity,
        trashcan: true,
        horizontalLayout: false,
        toolboxPosition: 'start',
        css: true,
        rtl: false,
        scrollbars: true,
        sounds: true,
        oneBasedIndex: true,
        grid: {
          spacing: 20,
          length: 1,
          colour: '#888',
          snap: true
        }
      }

      /* Inject your workspace */
      this.workspace = Blockly.inject('blocklyDiv', options)
      //Workspaceに書かれたBlocksを表示
      Blockly.Xml.domToWorkspace(workbox, this.workspace);

  },
  methods: {
    test: function () {

      var dom = Blockly.Xml.workspaceToDom(this.workspace);
      console.log( Blockly.Xml.domToText(dom));

      var code = Blockly.JavaScript.workspaceToCode(this.workspace);
      console.log( code );

      eval(code);
      asyncplay();

        async function play(waittime) {
            return new Promise((resolve, reject) => {
                console.log("play waittime:" + waittime);
                setTimeout(resolve, waittime, 'time signature');
            });

        }
    },

  },
})
</script>
</body>
</html>

실행 결과


ssh 흔한 연결 문제 총결산
그 시절 우리가 밟았던 구덩이의 TIME_WAIT의 과도한 처리

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage