如何在Meteor应用程序中包含原始JavaScript代码

我有一个javascript，可以在html页面上创建动画。在Meteor项目之外，动画非常完美，因为它只是html文件中包含的一个.js文件。我怎样才能让它在流星上工作呢？javascript文件似乎根本没有运行（它没有做任何事情）。Meteor可以包含原始脚本文件吗？如果是这样，怎么办？该文件是纯JavaScript文件，没有助手或任何定义Meteor结构的内容

missionPage.js

var TxtRotate = function(el, toRotate, period) {
    this.toRotate = toRotate;
    this.el = el;
    this.loopNum = 0;
    this.period = parseInt(period, 10) || 2000;
    this.txt = '';
    this.tick();
    this.isDeleting = false;
 };

 TxtRotate.prototype.tick = function() {
    var i = this.loopNum % this.toRotate.length;
    var fullTxt = this.toRotate[i];
    if (this.isDeleting) {
      this.txt = fullTxt.substring(0, this.txt.length - 1);
    } else {
      this.txt = fullTxt.substring(0, this.txt.length + 1);
    }
    this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
    var that = this;
    var delta = 300 - Math.random() * 100;
    if (this.isDeleting) { delta /= 2; }
    if (!this.isDeleting && this.txt === fullTxt) {
      delta = this.period;
      this.isDeleting = true;
    } else if (this.isDeleting && this.txt === '') {
      this.isDeleting = false;
      this.loopNum++;
      delta = 500;
    }

  setTimeout(function() {
  that.tick();
  }, delta);
  };

  window.onload= function() {
  console.log('I m here');
  var elements = document.getElementsByClassName('txt-rotate');
  console.log(elements);
      for (var i=0; i<elements.length; i++) {
      var toRotate = elements[i].getAttribute('data-rotate');
      var period = elements[i].getAttribute('data-period');
      if (toRotate) {
      new TxtRotate(elements[i], JSON.parse(toRotate), period);
    }
    }
// INJECT CSS
    var css = document.createElement("style");
    css.type = "text/css";
    css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 
  }";
    document.body.appendChild(css);
  };

var TxtRotate=函数（el、旋转、周期）{
this.toRotate=toRotate；
this.el=el；
this.loopNum=0；
this.period=parseInt（period，10）| 2000；
this.txt=“”；
这个。勾选（）；
this.isDeleting=false；
};
TxtRotate.prototype.tick=函数（）{
var i=this.loopNum%this.toRotate.length；
var fullTxt=this.toRotate[i]；
如果（这是删除）{
this.txt=fullTxt.substring（0，this.txt.length-1）；
}否则{
this.txt=fullTxt.substring（0，this.txt.length+1）；
}
this.el.innerHTML=''+this.txt+''；
var=这个；
var delta=300-Math.random（）*100；
如果（this.isDeleting）{delta/=2；}
如果（！this.isDeleting&&this.txt===fullTxt）{
delta=这个周期；
this.isDeleting=true；
}else if（this.isDeleting&&this.txt==''）{
this.isDeleting=false；
这个.loopNum++；
δ=500；
}
setTimeout（函数（）{
那。勾选（）；
}，三角洲）；
};
window.onload=function（）{
log（“我在这里”）；
var elements=document.getElementsByClassName（'txt-rotate'）；
控制台日志（元素）；
对于（var i=0；i你读过吗？如果没有，我就从这里开始

回答您的问题：

Meteor可以包含原始JavaScript文件吗

对

如果是这样，怎么办

多种方式。您可以直接导入：

import './txtRotate.js';

或者你可以把它放在目录中，它将在其他JS文件之前被加载和执行

最后，您的
missionPage.js
文件中应该只包含与missionPage模板相关的代码，而不是
TxtRotate
代码。将
TxtRotate
移动到它自己的文件（不包括
窗口.onload
部分），在
missionPage.js
中导入，并在呈现模板时初始化它：

import { Template } from 'meteor/templating';
import './txtRotate.js';

Template.missionPage.onRendered(function() {
  this.$('.txt-rotate').each(function(i, element) {
    var toRotate = $(element).data('rotate');
    var period = $(element).data('period');

    if (toRotate) {
      new TxtRotate(this.get(0), JSON.parse(toRotate), period);
    }
  });
});


另一个选项是将TxtRotate函数更改为独立函数，例如：

<template name="missionPage">
  <div class="ui center aligned container">
    <h3>Our story</h3>
    <h1>This website is {{> TxtRotate period="2000" rotate=words}}</h1>
  </div>
</template>


我们的故事
这个网站是{{>txtroate period=“2000”rotate=words}

其中
单词
将在模板助手中定义。
非常感谢！@chazsoli有一个问题。这里的//initialize txtRotate是什么意思？我必须在那里写什么？@chazsolo这将是您在
窗口中所做的。onload
函数是您最初编写的，或者类似的东西。@Roberto I为您添加了一些代码-请查看。请注意，未经测试。
<template name="missionPage">
  <div class="ui center aligned container">
    <h3>Our story</h3>
    <h1>This website is {{> TxtRotate period="2000" rotate=words}}</h1>
  </div>
</template>