如何使用goog.provide和goog.require加载我自己的js模块? [英] How can I load my own js module with goog.provide and goog.require?

查看:3545
本文介绍了如何使用goog.provide和goog.require加载我自己的js模块?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我们正在尝试将我们的项目的包装从dojo切换到谷歌关闭,但到目前为止我们还没有运气。这是一个简单的例子,说明了我们正在努力完成的工作:

We are trying to switch the packaging for our project from dojo to google closure, but we haven't had any luck so far. Here is a simple example that illustrates what we are trying to accomplish:


<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="runtime/src/core/lib/goog-rev26/base.js"></script>
        <script>
            goog.require("foo.bar");
            function main() {foo.bar.echo("hello world")}
        </script>
    </head>
<body onload="main()">
</body>
</html>

然后在 /foo/bar.js 我有:


goog.provide("foo.bar");
foo.bar.echo = function(s) {console.debug(s);}

我在firebug中收到的错误如下:

The errors I receive in firebug are as follows:


goog.require could not find: foo.bar
foo is not defined

当我查看Net选项卡时,没有一个http请求来取出文件 - 我期待着关闭库生成一个脚本标签来获取 bar.js

When I look in the Net tab, there isn't an http request out to fetch a file - I was expecting the closure library to generate a script tag to fetch bar.js.

帮助! ;)

推荐答案

我想出来,这不是很难,但有一些疑虑。

I figured it out and it's not very hard, but there are a few gotchas.

基本上可以使用依赖生成脚本calcdeps.py(您应该阅读calcdeps.py文档)在以下几种模式之一:

Basically, you can use the dependency generating script calcdeps.py (you should read calcdeps.py docs) in one of several modes:


  1. 生成deps.js文件

  2. 将所有内容连接到单个文件中,可选择使用关闭编译器进行编译。

应该使用(1),因为它允许您在编辑JS源之后不运行calcdeps.py,除非您对依赖关系树进行更改。其余答案就是这样,我还没有尝试过另一个。

For development you should use (1), since it allows you to not run the calcdeps.py after editing the JS sources, unless you make changes to the dependency tree. The rest of the answer is about this way, I haven't tried the other one yet.

这是我做了什么来生成它:

Here's what I did to generate it:

#!/bin/bash
cd closure-library/closure/goog
python ../bin/calcdeps.py -p ../../../js -o deps > ../../../my-deps.js

...假设以下目录结构:

...assuming the following directory structure:

project/
  closure-library/ (as checked out from SVN)
  js/ (my JS code)
  app.html

-p 参数遍历指定目录中的所有js文件,并且文档说您可以指定多个目录来搜索,如果必须的话。)

(the -p parameter traverses all js files in the specified directory and the docs say you can specify multiple directories to search if you have to.)

以上调用在主app.html旁边创建一个my-deps.js文件,该文件用于运行应用程序。创建的文件包含有关 js / 中的JS文件的信息,如下所示:

The above call creates a my-deps.js file next to the main app.html, which I use to run the application. The created file contains information about my JS files in js/ and looks like this:

goog.addDependency('../../../js/controllers.js', ['proj.controllers'], []);
goog.addDependency('../../../js/ui.js', ['proj.ui'], ['proj.controllers']);

- 第一个字符串是我的JS文件的路径相对于封闭库/关闭/ goog / base.js (这很重要!),第二个数组是 goog.provide -d字符串的列表,最后一个数组是 c> -d字符串

- where the first string it the path to my JS file relative to closure-library/closure/goog/base.js (this is important!), the second array is the list of goog.provide-d strings, and the last array is the list of goog.require-d strings.

现在在app.html我有:

Now in app.html I have:

<script src="closure-library/closure/goog/base.js"></script>
<script src="my-deps.js"></script>
<script>
  goog.require("proj.ui");
</script>
<script>
  // here we can use the required objects
</script>

注意:


  1. 除了包含封闭的base.js之外,我还包括我生成的deps.js

  2. 正如教程 goog.require 调用必须在一个单独的脚本标签中,因为它附加一个脚本标签来加载所需的脚本,并在当前脚本标记完成处理之后加载脚本标签。

  1. In addition to including closure's base.js, I include my generated deps.js
  2. As mentioned in the tutorial the goog.require call has to be in a separate script tag, because it appends a script tag to load the required scripts and they are loaded after the current script tag finished processing.

Gotchas:


  1. 上面讨论的路径与base.js.相关的问题。 goog.require 通过连接base.js基本URL(即没有base.js leafname)和第一个参数来创建脚本URL来加载deps.js中的goog.addDependency 。

  2. calcdeps.py在Windows上不能正常工作,特别是在deps.js字符串文字中使用反斜杠

  3. 如果某些内容不正常,可能需要查看< a href =http://code.google.com/p/closure-library/issues/list?can=2&q=calcdeps&colspec=ID+Type+Status+Priority+Milestone+Owner+Summary&cells=瓷砖rel =noreferrer>所有问题提及calcdeps ,并确保您有最新的结帐。

  1. The described above issue with paths being relative to base.js. goog.require creates the script URL to load by concatenating the base.js base URL (i.e. without base.js leafname) and the first parameter to goog.addDependency in deps.js.
  2. calcdeps.py doesn't work well on Windows, in particular using the backslashes in the deps.js string literals
  3. If something doesn't work well, you may want to look through all issues mentioning calcdeps and make sure you have an up to date checkout.

这篇关于如何使用goog.provide和goog.require加载我自己的js模块?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆