如何在 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 模板相关代码，而不是 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 将在模板助手中定义。

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

How to include raw JavaScript code in a Meteor app

html

javascript

jquery

meteor

meteor-blaze