Javascript文件依赖项未通过清单顺序解决

Javascript File Dependencies Not Being Resolved With Manifest Order

本文关键字：单顺序 顺序 解决 依赖 文件 Javascript      更新时间：2023-09-26

我目前正在使用本教程重新组织Rails4应用程序中的Javascript/Coffeescript文件。在此之前，由于我对资产管道一无所知，我们的大部分代码都在一个巨大的coffescript文件中。目标是将这个巨大的文件分解成逻辑的、可管理的部分。

我们的应用程序使用一些通用类来定义程序结构，如双链表。我想把它放在一个单独的文件中，app/assets/javascripts/misc_classes.coffee:

### ***********************************###
### ******* General Classes ***********###
### ***********************************###
#single node for doubly linked list
class Node
  constructor: (data) ->
    @data = data
    prev = null
    next = null
#Doubly-linked list class, to be used for front-end destinations
#Details: https://en.wikipedia.org/wiki/Doubly_linked_list
class DoublyList
  constructor: () ->
    @length = 0 #length of the current list
    @head = null #first node of the list
    @tail = null #last node of the list
...

我们的其余应用程序代码驻留在app/assets/javascripts/custom/trips.coffee中。trips.coffee中的代码使用来自上述另一个javascript文件的Doubly链表类：

### ***********************************###
### ****** Custom Site Classes ********###
### ***********************************###
class Trip
  constructor: (id, editable) ->
    @id = id #trip_id
    @title = 'New Trip'
    @cities = 0 #number of citites in trip
    @countries = 0 #number of countries in trip
    @distance = 0 #distance in KM
    @days = 0 #duration of trip in days
    @destinations = new DoublyList()
...

在Rails资产管道指南中，处理这种依赖关系的方法是通过application.js清单文件。

如果您需要确保某些特定的JavaScript最终在连接文件中高于其他JavaScript，则需要先在清单中使用必备文件。请注意，require指令家族可防止文件在输出中包含两次。

所以我们的application.js文件看起来像这样：

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui/sortable
//= require jquery-ui/datepicker
//= require colorbox-rails
//= require jquery.readyselector
//= require turbolinks
//= require jquery.externalscript
//= require misc_classes
//= require_tree ./custom/.

然而，当我运行代码时，我在控制台中收到以下错误：Uncaught ReferenceError: DoublyList is not defined

为什么会发生这种情况？根据这里的其他帖子，我似乎写对了清单文件。我可以验证这两个文件也以正确的顺序包含在站点<header>部分中。

谢谢！

对于任何感兴趣的人来说，这个问题都是因为作用域。在生产过程中，所有的文件都会合并到application.js中，但在开发过程中，它们仍然是单独的文件。我必须将类添加到全局名称空间中才能工作：

### ***********************************###
### ******* General Classes ***********###
### ***********************************###
#single node for doubly linked list
class this.Node
  constructor: (data) ->
    @data = data
    prev = null
    next = null
#Doubly-linked list class, to be used for front-end destinations
#Details: https://en.wikipedia.org/wiki/Doubly_linked_list
class this.DoublyList
  constructor: () ->
    @length = 0 #length of the current list
    @head = null #first node of the list
    @tail = null #last node of the list

此答案的学分

相关文章：