连接几个 javascript 文件时出现问题

发布于 2025-01-07 01:49:33 字数 843 浏览 1 评论 0原文

这是一个完全菜鸟的问题，但无论如何我还是要问它，

几天前我开始玩backbone.js，我真的很着迷。当我克服了“待办事项”后，我开始做自己的一个项目。来自 Java 世界，我更喜欢将所有内容保存在尽可能多的单独文件中。因此，我将模型视图和路由器分成单独的文件和文件夹。

当我尝试将这些字段合并到一个 applciation.js 文件中时，问题就出现了。同样，来自 Java 世界的我喜欢能够实现自动化，更喜欢使用熟悉的工具（如 ant）为我的 javascript 项目设置构建流程。

我得到了一个示例 ant 构建模板，它以任意顺序连接并缩小所有文件。当它完成后，我尝试运行我的 JS 应用程序，毫不奇怪，它失败并出现一堆错误。我的许多模型和视图都试图相互扩展，其他模型和视图则依赖它们作为组件。如果它们没有以正确的顺序定义，应用程序就会到达尝试执行 undefined 的 extend 的程度，

我之前就知道对于 JavaScript，顺序是非常重要，但不知怎的，我留下的印象是，如果所有脚本都在一个文件中，那么 JS 解析器将首先加载所有内容，然后尝试执行要执行的任何内容。嗯，我的假设是错误的。

可以按照我想要的特定顺序列出所有文件，但我真的需要执行如此原始的步骤吗？不幸的是，经过几个小时的研究，我找不到更好的东西。

是否真的可以以任意顺序连接彼此依赖的 JS 文件而不发生冲突？我想，最大的问题是实际上调用了extend函数，而不是每个脚本简单地定义和对象文字

那么，解决方案是什么？

更新：我刚刚看到 Sproutcore 有自己的构建器。如果 SC 与 BB 在创建和扩展实体的方式上大致相似，那么 SC 构建器如何工作而不发生冲突？

原文

This is a complete noob question, but I gotta ask it anyway

I started playing with backbone.js a few days ago and I was really fascinated. As I got over the "ToDo", I started working on a project of my own. Coming from the world of Java, I prefer keeping everything in as many separate files as possible. Therefore, I split my models views, and routers into separate files, into separate folders.

The problem came when I tried to combine those fiels into one single applciation.js file. Again, coming from the Java world, I love when I can automate stuff, and even more, when I can use familiar tools like ant, to setup build processes for my javascript projects.

I got a sample ant build template which concatenates and minifies all the files in an arbitrary order. When it finished, I tried to run my JS app, and not surprisingly, it failed with a bunch of errors. Many of my models and views try to extend each other, others depende on them as components. If they are not defined in a proper order, the app just reaches a point where it is trying to execute extend of an undefined

I know from before that for JavaScript the order is very important, but somehow I was left with the impression that if all the scripts are in one single file, the JS parser will load all the stuff first and then will try to execute whatever is to be executed. Well, my assumption was wrong.

It is possible to list all the files in the specific order I want them, but do I really need to go for such a primitive step? Unfortunately after spending a few hours researching, I couldn't find anything better.

Is it really possible to concatenate JS files, which depend on each other, in an arbitrary order, without them clashing? I guess, the biggest problem is the fact that the extend function is actually being called, rather than each script simply defining and object literal

So, what's the solution?

UPDATE: I just saw that Sproutcore has its own builder. If SC is roughly similar to BB, in the way one creates and extends entities, how does the SC builder work without clashing?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

怪我入戏太深 2025-01-14 01:49:33

有很多方法可以做到这一点，但这是我的食谱。我在我的开发文件中添加了一个数字前缀，从没有依赖项的文件开始（基本“类”、将依赖于其他模型的模型、使用这些模型的视图、然后调用这些视图的路由器等）。

然后我使用 uglify-js （作为 node.js 库提供，您可以使用 npm install uglify-js 来安装）将我的所有 js 缩小到一个文件中（从您的问题中不知道您是否不过，请使用 Node.js 服务器端）。然后我cat *.js | uglifyjs -o min/myfile.min.js。这会将我所有 .js 文件的内容（由于我的前缀而尊重依赖关系的顺序）发送到 uglify，这将缩小它并将其保存到单个文件中。

因为我也喜欢自动化，所以我在 Makefile 中进行了设置，尽管我猜它可以使用 Ant 来完成（不太熟悉它）。 Makefile 的相关部分如下所示：

TARGET_MIN_FILE = public/js/min/myfile.min.js
JS = $(shell echo public/js/*.js)


public/js/min/myfile.min.js: $(JS)
    cat $(JS) | uglifyjs -o $(TARGET_MIN_FILE)


clean:
    rm -f $(TARGET_MIN_FILE)

.PHONY: clean

另一方面，如果您选择异步模块定义 (AMD) 格式，您可以 require() 您的模块，它会以正确的顺序为您管理依赖项加载（请参阅Require.js 了解更多信息），如 TheShelfishMeme 提到的。

There are many ways to do this, but here's my recipe. I prefix my development files with a number, starting from the one with no dependencies (base "classes", models that will be depended upon from other models, then views using these models, then routers calling those views, etc.).

Then I use uglify-js (available as a node.js library, that you install using npm install uglify-js) to minify all my js in one file (don't know from your question if you use node.js server-side, though). Then I cat *.js | uglifyjs -o min/myfile.min.js. This will send the content of all my .js files (respecting the order of dependencies because of my prefix) to uglify, which will minify it and save it to a single file.

Since I, too, like automation, I have this set up in a Makefile, though I guess it could be done using Ant (not too familiar with it). The relevant part of the Makefile look like this:

TARGET_MIN_FILE = public/js/min/myfile.min.js
JS = $(shell echo public/js/*.js)


public/js/min/myfile.min.js: $(JS)
    cat $(JS) | uglifyjs -o $(TARGET_MIN_FILE)


clean:
    rm -f $(TARGET_MIN_FILE)

.PHONY: clean

On the other hand, if you go for the asynchronous module definition (AMD) format, you can require() your modules and it will manage for you the dependency loading in the correct order (see Require.js for more info), as mentioned by TheShelfishMeme.

回复收藏 0 原文