正确的javascript应用程序结构

correct javascript app structure

本文关键字:应用程序 结构 javascript      更新时间:2023-09-26

为了可读性,我写了一个小例子。。我正试图弄清楚js应用程序的正确结构。

我刚开始写更大的js应用程序。现在,我有了一个构造函数和一大堆原型函数。我一直认为你不应该从一个函数调用(或返回)到另一个函数。但现在,在我的应用程序的底部,我正在实例化我的构造函数,然后必须调用一堆函数,以及内置的条件语句来处理执行,这似乎是完全错误的。

这就是我一直在做的想法:

function TodaysFood(b, l) 
{
    this.breakfast = b;
    this.lunch = l;
}
TodaysFood.prototype.firstMeal = function()
{
    return console.log(this.breakfast);
}
TodaysFood.prototype.secondMeal = function()
{
    return console.log(this.lunch);
}   
var app = new TodaysFood("eggs", "sandwich");
app.firstMeal();
app.secondMeal();

我想知道这个"链接"功能是否正确?

function TodaysFood(b, l) 
{
    this.breakfast = b;
    this.lunch = l;
}
TodaysFood.prototype.firstMeal = function()
{
    return this.secondMeal(this.breakfast);
}
TodaysFood.prototype.secondMeal = function(firstMeal)
{
    var twoMeals = [firstMeal, this.lunch];
    return this.whatIAte(twoMeals);
}
TodaysFood.prototype.whatIAte = function(twoMeals)
{
    return console.log(twoMeals);
}

var app = new TodaysFood("eggs", "sandwich");
app.firstMeal();

愚蠢的例子,但我正在努力理解一个应用程序应该如何流动。我是否应该能够在单独但链接的函数中编写整个应用程序,然后通过实例化构造函数,也许调用一个函数来启动整个程序。还是第一个例子更正确——编写独立的函数,然后在实例化构造函数后处理它们之间的交互?

谢谢你的帮助。

您可能希望将其模块化、Ala Node.js或在浏览器中使用RequireJS

这里是你可以考虑的第二个例子的一个细微变化,查看fiddle

var TodaysFood = function (b, l) {
    var self = this;
    this.breakfast = b;
    this.lunch = l;
    this.firstMeal = function () {
        console.log(this.breakfast);
        return self;
    };
    this.secondMeal = function () {
        console.log(this.lunch);
        return self;
    }
    this.allMeals = function () {
        return this.firstMeal().secondMeal();
    };
}
var food = new TodaysFood('eggs', 'sandwich');
food.firstMeal().secondMeal().allMeals();

如果您计划使用node.js或RequireJS,那么可以通过将最后两行代码替换为来模块化上面的代码

module.exports = TodaysFood;

如果这是模块化的,那么您将删除构造函数var TodaysFood = function(b, l) { ...,而接受b&CCD_ 4在像firstMeal&secondMeal。这将使它成为静态的,并防止与构造函数值发生冲突。