javascript - 如何定义结构并在不同的 JavaScript 文件中创建它的多个实例

标签 javascript html

我在同一个项目中有两个文件,one.js 和two.js。

文件one.js

var fruit = {
   name,
   color,
}

文件two.js

// Here I receive a JSON string with list of fruit objects.
// For each object in the list create a new fruit object in JavaScript

var received_list = JSON.parse(response);

fruit_1 = new fruit();
fruit_1.name = received_list.fruit[0].name;
fruit_1.color = received_list.fruit[0].color;

fruit_2 = new fruit();
fruit_2.name = received_list.fruit[1].name;
fruit_2.color = received_list.fruit[1].color;

语法可能不正确,但我希望它能解决我的问题。

这是我的index.html

<html>
    <head>
        <script src="one.js"></script>
        <script src="two.js"></script>
    </head>
    <body>
        // Some content
    </body>
</html>

PS - 我不想在 one.js 中初始化 apple 和 mango;我希望它们在two.js 中初始化。

最佳答案

我不太确定为什么要创建这样的实例,但可能会产生一些影响。

您可以使用 ES6 的 Class 属性;

one.js

class Fruit {
  constructor(name, color) {
    this.name = color;
    this.color = color;
  }
}

two.js

var fruit_1 = new Fruit("apple", "red");
var fruit_2 = new Fruit(data_name, data_fruit);

继续阅读:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes

<小时/>

还强烈建议您使用模块和 es6 预设,而不是将 javascript 文件一一包含到您的 HTML 文件中。

参见:https://babeljs.io/

关于javascript - 如何定义结构并在不同的 JavaScript 文件中创建它的多个实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41449975/

相关文章:

javascript - 在processing中编写与在processing.js中编写javascript

html - css3 媒体查询在 ie10 以下的 IE 中不起作用

java - HTML 标记的位置无效

javascript - 在 JavaScript 中动态添加多个事件监听器

javascript - RxJs - Ajax 错误 0 而不是 502 occurres

javascript - 了解 JavaScript 中的数字函数

javascript - 在背景中缩放图片,站点引用

javascript - 如何在 Angular UI typeahead 中正确使用 select 和 firebase 数据

javascript - 根据 Javascript 中的递归函数的父级和子级追加元素

html - html5 标签 "Contenteditable"的 css 选择器