可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm working on a project with Meteor. I've tried loading javascript files using script tags but of course that won't work. These same files I've tried loading using script tags, I've also just saved as files and placed them in the lib folder so they could be loaded last. There is also an internal script that has issues loading. I even tried removing the (function(){ part and closing part of the function because I know it'll already be placed into a function with Meteor. How can I get the code below and other js files/scripts to run properly with Meteor?

(function() {

// Base template
var base_tpl =
        "<!doctype html>\n" +
        "<html>\n\t" +
  "<head>\n\t\t" +
  "<meta charset=\"utf-8\">\n\t\t" +
  "<title>Test</title>\n\n\t\t\n\t" +
  "</head>\n\t" +
  "<body>\n\t\n\t" +
  "</body>\n" +
  "</html>";

var prepareSource = function() {
    var html = html_editor.getValue(),
            css = css_editor.getValue(),
            js = js_editor.getValue(),
            src = '';


    src = base_tpl.replace('</body>', html + '</body>');


     css = '<style>' + css + '</style>';
    src = src.replace('</head>', css + '</head>');


     js = '<script>' + js + '<\/script>';
    src = src.replace('</body>', js + '</body>');

    return src;
 };

 var render = function() {
     var source = prepareSource();

     var iframe = document.querySelector('#output iframe'),
            iframe_doc = iframe.contentDocument;

    iframe_doc.open();
    iframe_doc.write(source);
    iframe_doc.close();
};



var cm_opt = {
    mode: 'text/html',
    gutter: true,
    lineNumbers: true,
};


var html_box = document.querySelector('#html textarea');
var html_editor = CodeMirror.fromTextArea(html_box, cm_opt);

    html_editor.on('change', function (inst, changes) {
    render();
    });


cm_opt.mode = 'css';
var css_box = document.querySelector('#css textarea');
var css_editor = CodeMirror.fromTextArea(css_box, cm_opt);

    css_editor.on('change', function (inst, changes) {
    render();
    });


cm_opt.mode = 'javascript';
var js_box = document.querySelector('#js textarea');
var js_editor = CodeMirror.fromTextArea(js_box, cm_opt);

   js_editor.on('change', function (inst, changes) {
   render();
   });





/*
    Fixing the Height of CodeMirror.
    You might want to do this in CSS instead
    of JS and override the styles from the main
    codemirror.css
*/
var cms = document.querySelectorAll('.CodeMirror');
for (var i = 0; i < cms.length; i++) {

    cms[i].style.position = 'absolute';
    cms[i].style.top = '30px';
    cms[i].style.bottom = '0';
    cms[i].style.left = '0';
    cms[i].style.right = '0';
cms[i].style.height = '100%';
}
/*cms = document.querySelectorAll('.CodeMirror-scroll');
for (i = 0; i < cms.length; i++) {
    cms[i].style.height = '100%';
}*/

}());

回答1:

You can place it in the public folder and then whenever you need it, you can load it using jQuery's getScript as in:

jQuery.getScript( /yourscript.js)

EDIT: If you are using Iron-Router and the javascript is not always required to load (or it IS required to load before the template is rendered) I recommend this clever solution by Manuel Schoebel:

http://www.manuel-schoebel.com/blog/use-meteor-iron-router-waiton-to-load-external-javascript

回答2:

Firstly, code placed in the lib folder will be loaded first as opposed to last (as per the docs). For internal scripts, bear in mind that each file has its own scope, unless you put it in the client/compatability folder, in which case anything declared with var will be in global scope. To avoid polluting the global namespace, it's often better to put your modules in your own package, although the same thing can essentially be achieved without bothering with the smart package format, you just need to bear in mind the scoping rules (i.e. that anything declared with var will only be visible within that file, anything declared without var will be in global scope).

For loading external javascript, script tags placed in the head should work fine, but if you need to control the loading order then you have to be a bit more careful. You can either inject a script tag into your page using a rendered callback, which is the simplest option, but a nicer solution is to use iron-router and the waitOn, before or after hooks.