Javascript导入另一个js文件导致程序失败

Posted 2023-02-22

【中文标题】Javascript导入另一个js文件导致程序失败

【英文标题】：Javascript importing another js file causes program to fail

【发布时间】：2022-01-19 18:16:18

【问题描述】：

这应该是一个快速回答的问题。

我正在尝试通过this website 的代码将一个 .js 文件包含在另一个文件中。

具体来说，我正在尝试包含一个链表函数（它位于主 js 文件之外，用于组织和简洁。

仅使用包含函数似乎不会导致任何问题。但是，当我实际尝试实例化一个链表时，程序崩溃了。

include 语句片段如下所示：

function include(file) 

    var script = document.createElement('script');
    script.src = file;
    script.type = 'text/javascript';
    script.defer = true;

    document.getElementsByTagName('head').item(0).appendChild(script);


include("~/js/LinkedList.js");

这些代码行本身不会导致任何问题。但是，当我尝试使用此行创建链接列表时：

var activeButtons = new LinkedList();

程序崩溃。

我的主要javascript代码如下：

//canvas elements
var canvas = document.getElementById("SnekGamCanvas");
var ctx = canvas.getContext("2d");
canvas.addEventListener('click', function ()  , false);

//importing some additional scripts
//import code taken from https://www.geeksforgeeks.org/how-to-include-a-javascript-file-in-another-javascript-file/



/*
//some code from stack overflow: (https://***.com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element)
var elem = document.getElementById('canvas'),
    elemLeft = elem.offsetLeft + elem.clientLeft,
    elemTop = elem.offsetTop + elem.clientTop,
    context = elem.getContext('2d'),
    elements = [];

// Add event listener for `click` events.
elem.addEventListener('click', function (event) 
    var x = event.pageX - elemLeft,
        y = event.pageY - elemTop;

    // Collision detection between clicked offset and element.
    elements.forEach(function (element) 
        if (y > element.top && y < element.top + element.height
            && x > element.left && x < element.left + element.width) 
            alert('clicked an element');
        
    );

, false);

// Add element.
elements.push(
    colour: '#05EFFF',
    width: 150,
    height: 100,
    top: 20,
    left: 15
);

// Render elements.
elements.forEach(function (element) 
    context.fillStyle = element.colour;
    context.fillRect(element.left, element.top, element.width, element.height);
);
*/
//End of code from stack overflow


//some important variables
var px = canvas.width / 2;
var py = canvas.height / 2;

var snekColor = "#EC942D";

var clock = 0;

var mouseX = 0.5;
var mouseY = 0.5;

/************************************************
 * 
 * THIS HERE IS THE PROBLEM AREA
 * 
 *************************************************/ 

//var activeButtons = new LinkedList();

//classes

class clickButton 
    constructor(text, color, altColor, width, height, radius, xpos, ypos) 
        this.text = text;
        this.color = color;
        this.altColor = altColor;
        this.width = width;
        this.height = height;
        this.radius = radius;
        this.xpos = xpos;
        this.ypos = ypos;
    

    isInside(datX, datY) 
        //usually, datX will be mouseX, and datY will be mouseY.
        if (datX > (this.xpos) && datX < (this.xpos + this.width)) 
            if ((datY > this.ypos) && datY < (this.ypos + this.height)) 
                return true;
            
        
        return false;
    

    drawButton() 
        ctx.strokeStyle = "#000000"
        if (this.isInside(mouseX, mouseY)) 
            ctx.fillStyle = this.altColor;

            roundRect(this.xpos, this.ypos, this.width, this.height, this.radius, true, true, this.altColor);

            ctx.fillStyle = "#000000";
            ctx.strokeStyle = "#000000";
            ctx.font = '40px san-serif';

            ctx.strokeText(this.text, this.xpos + 10, this.ypos + 40);
            ctx.fillText(this.text, this.xpos + 10, this.ypos + 40);
        
        else 
            ctx.fillStyle = this.color;

            roundRect(this.xpos, this.ypos, this.width, this.height, this.radius, true, true, this.color);

            ctx.fillStyle = "#000000";
            ctx.strokeStyle = "#000000";
            ctx.font = '40px san-serif';

            ctx.strokeText(this.text, this.xpos + 10, this.ypos + 40);
            ctx.fillText(this.text, this.xpos + 10, this.ypos + 40);
        
        

        //draw_Ball(303, 500, 50, snekColor);
    

    clickOnButton() 
        snekColor = "#2141DE";
    



//buttons

var startButton = new clickButton("Start Game", "#74B5ED", "#1824C7", 200, 50, 20, ((canvas.width / 2) - 100), (canvas.height * (4 / 5)));

//images
var seel = new Image();
seel.onload = function () 
    ctx.drawImage(seel, 0, 0, canvas.width, canvas.height);

seel.src = "https://assets.pokemon.com/assets/cms2/img/pokedex/full/086.png"

var snek_title = new Image();
snek_title.onload = function () 
    ctx.drawImage(snek_title, 0, 0, canvas.width, canvas.height);

snek_title.src = "https://globin347.com/images/Snake%20Title.png"

//stuff about mouse moving
//the relative mouse position code came from this *** page: https://***.com/questions/17130395/real-mouse-position-in-canvas

function getMousePosX(canvas, evt) 
    var rect = canvas.getBoundingClientRect(), // abs. size of element
        scaleX = canvas.width / rect.width;    // relationship bitmap vs. element for X

    return (evt.clientX - rect.left) * scaleX;   // scale mouse coordinates after they have


function getMousePosY(canvas, evt) 
    var rect = canvas.getBoundingClientRect(), // abs. size of element
        scaleY = canvas.height / rect.height;  // relationship bitmap vs. element for Y

    return (evt.clientY - rect.top) * scaleY;


document.addEventListener('mousemove', (event) => 
    //document.getElementById("fiddleText").innerhtml = (`Mouse X: $event.clientX, Mouse Y: $event.clientY`);

    
    mouseX = getMousePosX(canvas, event);
    mouseY = getMousePosY(canvas, event);
    //document.getElementById("fiddleText").innerHTML = ('mouseX: ' + mouseX + ', mouseY: ' + mouseY);

    //now convert total position to canvas position
    //mouseX, mouseY = getMousePos(canvas, event);

    //document.getElementById("fiddleText").innerHTML = ('mouseX: ' + mouseX + ', mouseY: ' + mouseY);
)

//begin
var gameState = 0;

function draw() 

    clock += 1;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    //document.getElementById("fiddleText").innerHTML = ("Clock: " + clock);

    if (gameState == 0) 
        //this hasn't been implemented yet
        startMenu();
    
    else if (gameState == 1) 
        //this hasn't been implemented yet either
        playGame();
    
    else if (gameState == 2) 
        //ditto
        gameOver();
    
    else 
        //something's wrong

        ctx.drawImage(seel, 0, 0, canvas.width, canvas.height);

        ctx.fillStyle = "#b30000";
        ctx.strokeStyle = "#000000";
        ctx.font = '140px san-serif';

        ctx.fillText('OH NO', 120, 120);
        ctx.strokeText('OH NO', 120, 120);

        ctx.fillText('IT BLOKE', 200, 630);
        ctx.strokeText('IT BLOKE', 200, 630);
    


setInterval(draw, 10);

function startMenu() 
    ctx.drawImage(snek_title, 0, 0, canvas.width, canvas.height);

    startButton.drawButton();

    //draw_Ball(mouseX, mouseY, 50, snekColor);


function playGame() 
    draw_Ball(200, 700, 50, snekColor);
    draw_Ball(400, 700, 50, snekColor);
    draw_Ball(300, 500, 50, snekColor);


function gameOver() 



//this function was stolen from stack overflow
function showImage(width, height, image_source, alt_text) 
    var img = document.createElement("img");
    img.src = image_source;
    img.width = width;
    img.height = height;
    img.alt = alt_text;



function draw_Ball(bx, by, size, ballColor) 
    ctx.beginPath();
    ctx.arc(bx, by, size, 0, (Math.PI * 2));
    ctx.fillStyle = ballColor;
    ctx.fill();
    ctx.strokeStyle = "#000000";
    ctx.stroke();
    ctx.closePath();


//This next function was taken from stack overflow

function roundRect(x, y, width, height, radius, stroke, fill, color) 
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + width - radius, y);
    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
    ctx.lineTo(x + width, y + height - radius);
    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
    ctx.lineTo(x + radius, y + height);
    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
    ctx.lineTo(x, y + radius);
    ctx.quadraticCurveTo(x, y, x + radius, y);
    if (stroke) 
        ctx.stroke();
    
    if (fill) 
        ctx.fill();
    
    ctx.closePath();
    return;

我试图包含的文件是这样的：

    "type": "module"


export class Node()
    return Node();


export class LinkedList()
    return LinkedList();



//this code shamelessly stolen from https://www.geeksforgeeks.org/implementation-linkedlist-javascript/

// User defined class node
class Node 
    // constructor
    constructor(element) 
        this.element = element;
        this.next = null
    


// linkedlist class
class LinkedList 
    constructor() 
        this.head = null;
        this.size = 0;
    

    // adds an element at the end
    // of list
    add(element) 
        // creates a new node
        var node = new Node(element);

        // to store current node
        var current;

        // if list is Empty add the
        // element and make it head
        if (this.head == null)
            this.head = node;
        else 
            current = this.head;

            // iterate to the end of the
            // list
            while (current.next) 
                current = current.next;
            

            // add node
            current.next = node;
        
        this.size++;
    

    // insert element at the position index
    // of the list
    insertAt(element, index) 
        if (index < 0 || index > this.size)
            return console.log("Please enter a valid index.");
        else 
            // creates a new node
            var node = new Node(element);
            var curr, prev;

            curr = this.head;

            // add the element to the
            // first index
            if (index == 0) 
                node.next = this.head;
                this.head = node;
             else 
                curr = this.head;
                var it = 0;

                // iterate over the list to find
                // the position to insert
                while (it < index) 
                    it++;
                    prev = curr;
                    curr = curr.next;
                

                // adding an element
                node.next = curr;
                prev.next = node;
            
            this.size++;
        
    

    // removes an element from the
    // specified location
    removeFrom(index) 
        if (index < 0 || index >= this.size)
            return console.log("Please Enter a valid index");
        else 
            var curr, prev, it = 0;
            curr = this.head;
            prev = curr;

            // deleting first element
            if (index === 0) 
                this.head = curr.next;
             else 
                // iterate over the list to the
                // position to removce an element
                while (it < index) 
                    it++;
                    prev = curr;
                    curr = curr.next;
                

                // remove the element
                prev.next = curr.next;
            
            this.size--;

            // return the remove element
            return curr.element;
        
    

    // removes a given element from the
    // list
    removeElement(element) 
        var current = this.head;
        var prev = null;

        // iterate over the list
        while (current != null) 
            // comparing element with current
            // element if found then remove the
            // and return true
            if (current.element === element) 
                if (prev == null) 
                    this.head = current.next;
                 else 
                    prev.next = current.next;
                
                this.size--;
                return current.element;
            
            prev = current;
            current = current.next;
        
        return -1;
    

    // finds the index of element
    indexOf(element) 
        var count = 0;
        var current = this.head;

        // iterate over the list
        while (current != null) 
            // compare each element of the list
            // with given element
            if (current.element === element)
                return count;
            count++;
            current = current.next;
        

        // not found
        return -1;
    

    // Helper Methods

    // checks the list for empty
    isEmpty() 
        return this.size == 0;
    

    // gives the size of the list
    size_of_list() 
        console.log(this.size);
    

    // prints the list items
    printList() 
        var curr = this.head;
        var str = "";
        while (curr) 
            str += curr.element + " ";
            curr = curr.next;
        
        console.log(str);
    

而且，以防万一，我的 HTML 文件和 css 文件如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Portfolio</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body class="background_gradient">
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark dark-bg border-bottom box_shadow mb-0">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Portfolio</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <!--
                        <li class="nav-item">
                            <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                        -->
                        <li class="nav-item">
                            <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Resume">Resume</a>
                        </li>
                        <!----
                        <li class="nav-item">
                            <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Art3D">3D Art</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Art2D">2D Art</a>
                        </li>
                        <!---->
                        <li class="nav-item">
                            <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Snake">Snake</a>
                        </li>
                        
                        <li class="nav-item">
                            <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="CodeExamples">Code Examples</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Ballad">Ballad of the Masked Bandits</a>
                        </li>
                        <!--
    <li class="nav-item">
        <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="DataBaseHub">Database Hub</a>
    </li>
    --->
                        <!--
    <li class="nav-item">
        <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Unavailable">???</a>
    </li>
        -->
                        <!--Temporary Links-->
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container-fluid" id="MainDiv">
        <main role="main" class="pb-0" style="width:100%">
            <!--Where the other code goes-->
            
                @
                    ViewData["Title"] = "Snake Game";
                
                
                <div class="container-fluid purple_gradient text-center">
                    <h1>Snake Game</h1>
                </div>
                <div class="buffer"></div>
                <div class="container">
                    <div class="fancy_text_box">
                        <div class="container buffer">
                            <div class="ghostly_text_box text-center">
                                <h1>By the power of Javascript, here is a playable snake game.</h1>
                                <div class="buffer"></div>
                                <h1 id="fiddleText">Give it a moment to load.</h1>
                            </div>
                
                            <div class="buffer"></div>
                
                            <div class="ghostly_text_box text-center">
                                <canvas onload="draw()" class="simple_text_box" id="SnekGamCanvas"  ></canvas>
                            </div>
                
                        </div>
                
                    </div>
                
                    <div class="text-center">
                        <div class="buffer"></div>
                
                        <a class="button glo_button big_r_button big_text" asp-area="" asp-controller="Home" asp-action="Index">Back to Home</a>
                
                        <div class="buffer"></div>
                    </div>
                
                    <!--The code be here but if you are reading this you probably already knew that-->
                    <script src="~/js/Snake.js"></script>
                
                </div>
                
        </main>
    </div>

    <footer class="border-top footer dark-bg text-light">
        <div class="container">
            &copy; 2021 - Portfolio - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <script src="../jsc3d-master/jsc3d/jsc3d.js"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

还有这个：

/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand 
  white-space: normal;
  text-align: center;
  word-break: break-all;


/* Provide sufficient contrast against white background */
a 
  color: #0366d6;


.btn-primary 
  color: #fff;
  background-image: linear-gradient(30deg, #b6e2dd, #2a5efe);
  border-color: #1861ac;


/*Link colors*/
.nav-pills .nav-link.active, .nav-pills .show > .nav-link 
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;


/* Sticky footer styles
-------------------------------------------------- */
html 
  font-size: 14px;

@media (min-width: 768px) 
  html 
    font-size: 16px;
  


.border-top 
  border-top: 1px solid #e5e5e5;

.border-bottom 
  border-bottom: 1px solid #e5e5e5;


.box-shadow 
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);


button.accept-policy 
  font-size: 1rem;
  line-height: inherit;


/* Sticky footer styles
-------------------------------------------------- */
html 
  position: relative;
  min-height: 100%;


body 
  /* Margin bottom by footer height */
  margin-bottom: 60px;

.footer 
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */


/* My Stuff
--------------------------------------------------------------------------
--------------------------------------------------------------------------
--------------------------------------------------------------------------
*/

/*This gives me more control over the exact dark background color*/
.dark-bg

    background-color: #161631;


.purple_gradient 

    /*The image used*/
    background-image: linear-gradient(#4b1ac4, #fff);

    height:100%;
    width:100%;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;


.test_box_blue

    /* A container with a solid color and an outline */
    background-color: #2d1eb2;

    width: 100%;
    height: 100%;
    margin: 0px;



.test_box

    border:solid #000000;


#MainDiv

    padding:0;
    margin:0;

    left:0;
    top:0;

    width:100%;
    height:100%;


.tundra_backround

    background-image: url('../images/Tundra_Fixed.png');
    width:100%;
    height:100%;


.white_space_box

    height:50 px;


.background_gradient

    background-image:linear-gradient(320deg, #fff, #96cbde);


.glo_button

    min-width: 30%;
    height: 20%;
    border-radius: 25px;
    padding: 20px;
    margin: 10px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    transition-duration: 0.4s;
    border: 4px solid #000;


.big_r_button 
    background-color: #a10000;
    color: #fff;


.big_r_button:hover 
    color: #fff;
    background-color: #4e0505;


.big_b_button 
    background-color: #080e9f;
    color: #fff;


.big_b_button:hover 
    color: #fff;
    background-color: #161631;


.big_g_button 
    background-color: #0a7727;
    color: #fff;


.big_g_button:hover 
    color: #fff;
    background-color: #07340e;


.big_p_button 
    background-color: #6f1cbf;
    color: #fff;


.big_p_button:hover 
   color: #fff;
   background-color: #2a073e;



.buffer

    padding: 20px;


.big_text

    font-size: 60px;
    font-family:'Times New Roman', Times, serif;
    text-shadow: 2px 2px rgb(12 14 39 / 0.67);


.fancy_text_box
    background-image: linear-gradient(300deg, #ece1c4, #c99e69);
    border-radius: 25px;
    border: 4px solid #5d3c08;


.simple_text_box
    background-color: #fff;

    border: 2px solid #000;


.ghostly_text_box
    background-color: rgb(255 255 255 / 0.60);
    border-radius: 25px;
    padding: 10px;
    border: 3px solid #000;


.thick_border
    border: 4px solid #000;


.black_and_white_gradient
    background-image: linear-gradient(310deg, #fff, #000);


.red_border
    padding: 0px;
    margin: 0px;
    border: 4px solid #8f0000;


.model_box
    border: 4px solid #000;
    background-color: #fff;
    border-radius: 25px;


.image_box
    border: 4px solid #000;
    background-color: #fff;


.chain_image_box 
    border-top: 4px solid #000;
    border-left: 4px solid #000;
    border-right: 4px solid #000;
    border-bottom: 0px;
    background-color: #fff;


.margin_setter 
    margin: 20px;
    padding: 20px;


#model_display_1

我在尝试将链表 js 文件包含在主文件中时做错了什么？

【问题讨论】：

而不是尝试document.head.appendChild()，您尝试过document.body.appendChild()吗？？

我还没有尝试过，但我想我找到了一个更简单的解决方案。我刚刚在 HTML 中包含了另一个 javascript 文件。

【参考方案1】：

我想我找到了一个简单的解决方案。我没有在第一个 .js 文件中包含第二个 .js 文件，而是将第二个 js 文件添加到 HTML 代码中。