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

Question

我有一个 javascript，可以在 html 页面上创建动画。在 Meteor 项目之外，动画效果完美，因为它只是 html 文件中包含的 .js 文件。我怎样才能让它在 Meteor 上工作呢？ javascript 文件似乎根本没有运行(它没有执行任何操作)。 Meteor 可以包含原始 javscript 文件吗？如果是的话怎么办？该文件是纯 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);
  };

missionPage.html

<template name="missionPage">
  <div class="ui center aligned container">
    <h3>Our story</h3>
    <h1>This website is
      <span
     class="txt-rotate"
     data-period="2000"
     data-rotate='[ "not just the website", "simple.", "pure JS.", 
 "pretty.", "fun!" ]'></span>
    </h1>
  </div>
</template>

Answer 1

您读过Guide to Meteor, specifically the section on app structure吗？ ？如果没有，我会从这里开始。

回答您的问题:

Can Meteor include raw JavaScript files?

是的。

And if so how?

有多种方式。您可以直接导入它:

import './txtRotate.js';

或者您可以将其放入 client/compatibility目录，它将在其他 JS 文件之前加载并执行。

最后，您的 missionPage.js 文件中应该只包含与 MissionPage Template 相关的代码，而不是 TxtRotate 代码。将 TxtRotate 移至其自己的文件(不包括 window.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 函数更改为 reusable Blaze Component而不是一个独立的功能。类似于:

<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>

其中 words 将在模板助手中定义。