动态加载脚本改变其行为(Dynamically loading a script changes i

我想paperjs按下按钮，打开动画之后加载，但它似乎如果纸张页面加载后加载的paperscript不起作用。

如果您注释掉setTimeout并取消直接$.getScript - paperjs将触发alert('hi') 我不明白这一点。

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(document).ready(function () {
                var paperUrl = 'http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js';
                $("#jq").text("jQuery is now loaded.")
                var lateLoad = function() {
                    $.getScript(paperUrl, function() {
                        $("#pp").text("Paperjs is now loaded.");
                    });
                };
                //setTimeout(lateLoad, 100);
                $.getScript(paperUrl, function() {
                    $("#pp").text("Paperjs is now loaded.");
                });
            });
        </script>
    </head>
    <body>
        <script type="text/paperscript" canvas="myCanvas">
            $('body').css({"background-color": "#999"});
            alert('hi!');
        </script>
        <p id="jq">jQuery NOT loaded yet.</p>
        <p id="pp">Paperjs NOT loaded yet.</p>
    </body>
</html>

我使用的Windows 7 64位的Chrome 23.0.1271.97米任何人有一个想法，这是怎么回事呢？

Answer 1:

我想，我想出了一个解决办法，以及- paper.PaperScript.load()或阐述：

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(document).ready(function () {
                $("#jq").text("jQuery is now loaded.")
                var paperUrl = 'http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js';
                var lateLoad = function() {
                    $.getScript(paper_url, function() { 
                        $("#pp").text("Paperjs is now loaded.");
                        paper.PaperScript.load(); // <-- The fix!
                    });
                };
                setTimeout(lateLoad, 1000);
                //$.getScript(paperUrl, function() {
                //    $("#pp").text("Paperjs is now loaded.");
                //});
            });
        </script>
    </head>
    <body>
        <script type="text/paperscript" canvas="myCanvas">
            $('body').css({"background-color": "#999"});
            alert('hi!');
        </script>
        <p id="jq">jQuery NOT loaded yet.</p>
        <p id="pp">Paperjs NOT loaded yet.</p>
    </body>
</html>

这导致paperscript扫描所有paperscripts。我发现它在https://github.com/paperjs/paper.js/blob/master/src/core/PaperScript.js#L270而谷歌搜索在GitHub库“paperscript”。虽然它仍然没有解释为什么纸没有做负载（）自身时动态加载。

编辑 -我知道哪里出了问题。它涉及到https://github.com/jquery/jquery/blob/master/src/core.js#L768因为paperjs不检查窗口中加载事件已经解雇即document.readyState === "complete" 。我提交了一个拉请求paperjs https://github.com/paperjs/paper.js/pull/156

Answer 2:

我认为这是很容易通过加载它require.js 。所有你需要的是一个require.config对象，在如main.js定义：

requirejs.config({
    paths : {   
        'jquery' : "path/to/jquery"
        'paper' : "path/to/paper"
    },
    shim: {
        'jquery' : {
            exports: 'jQuery'
        },
        'paper' : {
            exports: 'paper'
        }
    }
});

您将需要加载require.js与通过上述配置data-main属性：

<script data-main="scripts/main.js" src="scripts/require.js"></script>

然后，你定义一个模块（例如“paperStuff”）在您的论文的逻辑是：

define(['jquery', 'paper'], function($, paper) {
   // do some cool stuff
});

当你想加载paperStuff，你只是做

var paperStuff = require('paperStuff');
...

Answer 3:

将您的paperscript代码到外部文件（即pstest.js）和修改lateLoad到：

var lateLoad = function() {
    $.getScript('http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js',
    function() {
      $("#pp").text("Paperjs is now loaded.");
      $.getScript("pstest.js");
    } )
}

文章来源: Dynamically loading a script changes its behaviour