0

问题

我允许用户在文本代码编辑器中编写一些代码，例如：

var Player = function(){ 

    this.x = 0;
    this.y = 0;
    this.width = 32;
    this.height = 64;

}

Player.prototype.run = function(){
    this.x++;
}

问题

我想使用执行此代码（任何 javascript）eval()？将它存储在变量或其他东西中，这样我就可以遍历它并创建 html 实体。一些示例伪代码：

loop through varables // loop through the entities that the user created.
    print varable_name // print the name of varable ("Player")
    print varable.width  // Print the varable entitiy ("32");

一些示例代码：

for (var name in this) {
    variables[name] = name;
    variables[name]=this[name]
}

function maskedEval(scr){
    var mask = {};
    for (p in this)
        mask[p] = undefined;

    // execute script in private context
    (new Function( "with(this) { " + scr + "}")).call(mask);
}

反正有动态地做到这一点吗？还是有更好的方法来做到这一点？我希望你明白我想要做什么。希望可以有人帮帮我。

谢谢 ;）

4

1 回答 1

1

这是通过将代码放入临时散列 JavaScript 文件来处理代码的好方法；

演示：http ://so.ghostsofthesun.com/user_965921/

索引.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .floatClear {
            clear: both;
        }

        #userScript, #result {
            float: left;
            font-family: monospace;
            box-sizing: border-box;
            padding: 20px 15px;
            width: 500px;
            min-height: 300px;
            background-color: #333;
            color: #eee;
            border-radius: 10px;
            border: 5px solid orange;
            box-shadow: 0px 3px 5px #444;
            outline: none;
        }

        #result {
            margin-left: 20px;
        }

        #submitCode {
            margin: 20px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#submitCode').click(function() {
                var input = {'code' : JSON.stringify($('#userScript').val().trim())};

                $.post('process_code.php', input, function(data) {
                    $('#result').html('YES');
                    data = jQuery.parseJSON(data);
                    js_file_path = data.js_file_path;
                    $('script[data^=tmp_js]').remove();
                    $('head').append('<script data="tmp_js" src="' + js_file_path + '"><\/script>');
                });
            });
        });
    </script>
</head>
<body>
    <textarea id="userScript">var test = 21; console.log(test);</textarea>
    <div id="result">Result will be here</div>
    <div class="floatClear"></div>
    <button id="submitCode">Execute code!</button> (The left panel is editable)
</body>
</html>

process_code.php

<?php
    if (isset($_POST['code'])) {
        $code = json_decode($_POST['code']);

        // Create new JS file
        $js_file = 'tmp_'.md5(microtime()).'.js';
        $handle = fopen($js_file, 'w') or die('can\'t open file');
        fwrite($handle, $code);
        fclose($handle);

        $full_path = 'http://localhost:8888/'.$js_file;

        echo json_encode(array('js_file_path' => $full_path));
    }
    else {
        echo json_encode(array('error' => 'Code wasn\'t recieved correctly.'));
    }

    // Do someting to remove the created JS-file after a certain time (cache/buffer empty)
?>

..并替换；

$full_path = 'http://so.ghostsofthesun.com/user_965921/'.$js_file;

$_.. 使用您的主机路径（或使用超级全局变量自动检测它。

当然，您可以直接将代码重新路由到脚本标签中，但是当我手头有这个时，我想我会立即分享完整的 shebang :)

现代浏览器会注意到添加的脚本标签并立即执行它。IE 可能无法很好地处理它；您可能想在不同的平台上对其进行测试。否则，您可以在 Internet 上搜索在实时嵌入脚本后调用 JavaScript 的方法。

输入到左侧字段的其他示例；

$('#result').css({
    'font-size' : '60px',
    'color' : 'blue',
    'background' : '#aaa'
});

额外说明；

您可能想要使用$.getScript()（正如我刚刚发现的那样）而不是重新绑定动态脚本标签；

$.post('process_code.php', input, function(data) {
    $('#result').html('YES');
    data = jQuery.parseJSON(data);
    js_file_path = data.js_file_path;
    $.getScript(js_file_path);
    //$('script[data^=tmp_js]').remove();
    //$('head').append('<script data="tmp_js" src="' + js_file_path + '"><\/script>');
});
于 2013-05-26T16:31:45.803 回答