尝试在更新代码时了解 requirejs、填充程序和依赖项



简短版本: 我正在更新一些旧库,以尝试以 AMD/requirejs 格式获取它们以进行管理,但其中一些依赖于旧代码。

主要问题: 我主要对在以下位置列出什么感到困惑:

define(['what','goes','here'],function('what','needs','to','be','here'){}) 

以及在处理AMD和非AMD工具的组合时,填充程序依赖项列表中的内容,以及jquery-ui和jquery插件之类的东西。

附加信息

问题:

其中一个较旧的库依赖于jquery-ui的.draggable()和旧版本,一些旧版本的jquery插件,称为"onScreen",称为spin的微调器模式.js - 所有这些都不是AMD友好的。(我还实现了对AMD友好的新版本dropzone的更新) 两个较旧的库也使用一个名为 vex 的模态库,它需要 vex.dialog 的依赖关系。现有站点有一个丑陋的旧版本。

我试图不完全修改此代码,因为长期目标是完全删除这些依赖项,但是我现在可能不必花时间弄清楚它们在做什么。

我已经尝试了我能想到的define(['list','of','stuff'])的所有组合,但是一些库,如spin(class Spinner),vex/vex.dialog和onScreen仍然不能总是正确加载。(有时我得到一个,但随后失去另一个)

我可以定义一个填充程序并在定义中包含 AMD 模块列表吗?如果是这样,我是否在require.config的填充程序中包含AMD依赖项列表?什么去哪里,为什么?

我的图书馆:

ImageSelector (requires AwsHelper, Utilities and ImageLayout below)
-- uses jquery (AMD), dropzone (AMD) and an old jquery plugin called jquery.onscreen.js (non-AMD)
-- depends on vex and vex.dialog (non-AMD)
-- uses .draggable() from old jquery-ui (non-AMD)
-- calls a global function 'loadSpinner' which uses spin.js (non-AMD -- see Utilities below)
ImageLayout (requires AwsHelper and Utilities - has attached instance of ImageSelector as a property .selector for methods that work in conjunction with the selector)
-- uses jquery (AMD)
-- also utilizes vex/vex.dialog (non-AMD)
Utilities
-- I'm trying to move the loadSpinner() function that requires spin.js (class Spinner, non-AMD) into this
-- I've managed thus far to avoid dependencies on things like jquery in this by refactoring code

长版本:

我正在尝试更新一些网站代码以使用 require.js 进行依赖项管理并使代码更具可移植性。但是我遇到了许多对旧代码的依赖,这些代码似乎没有准备好 AMD。在可能的情况下,我尝试用更新的代码替换它们和/或完全替换它们的功能,但在许多情况下,代码被缩小了,很难快速处理它正在做什么。 我没有陷入试图弄清楚并替换或更新这些东西的细节中,而是阅读了在某些情况下如何使用"填充码"来处理这些类型的非AMD代码,但我仍然不清楚如何配置它们。

这是我所拥有的... 我有三个库已经更新,一个是我创建的。一个名为"ImageSelector"构建了一个web-gui,以允许使用dropzone上传文件。(我更新它的原因是我将其从使用本地文件系统转换为使用 Amazon AWS S3 存储。 第二个称为"ImageLayout"处理创建用户选择的照片的产品布局的业务逻辑。(ImageSelector分为两个框架,左边一个用于将用户文件上传和分类到文件夹中,右边一个用于构建布局。因此,ImageSelector依赖于ImageLayout)

第三个库是我创建的,只是在网站上使用了许多重复使用的"实用程序"功能。在全局范围内有一个现有的结构化代码版本,只有一个函数列表,如roundPrecision(),sanitizeFilename(),escapeRegex(),baseName()等。 我打算用静态方法构建它,但后来意识到如果我生成它的实例,我可以自定义它(例如,我可以使用全局实例参数更改不同应用程序的字符"sanitized") 新的是AwsHelper,这不是问题,因为它是全新的代码,可以处理与Amazon AWS和S3的所有交互。它是以define()AMD格式创建的,而其他的我已经转换为define()/export格式。

无论如何,ImageLayout的某些函数可以由订单系统独立使用,但在大多数情况下,它被用作ImageSelector的依赖项。AwsHelper 主要由 ImageSelector 使用,但 ImageLayout 中有两个函数使用它。以上所有内容都使用实用程序库。

我的猜测在配置中是这样的(以 ImageSelector 为例,但我想知道是否需要"jquery"一个"dropzone"或函数定义或两者兼而有之?

shim: {
"ImageSelector": {
deps: ["jquery","dropzone","vex","vex.dialog","jquery-ui","jquery.onscreen"]
}
}

附加要求.js语义问题:

(如果需要,我会单独发布这些内容,但它们可能是简短的答案和相关)

有没有任何地方显示如何要求.js搜索文件? 例如,我了解 r.js 用于丑化,但在某些情况下我无法追踪这些东西的原始代码。文件名是否可以在末尾或版本号中包含 .min.js,并且仍然需要.js找到它们,或者我应该重命名和/或符号链接文件?例如jquery.js vs jquery-1.7.min.js例如。

上面引用的旋转.js实际上包括一个名为"微调器"的类定义。如何在配置/填充程序中表示它?

好吧,我根据过去 3 天的实验发布了它,这些实验充满了失败,预计会有更多的麻烦。但显然,填充码很简单,并且在多个地方拥有所需的库(填充码定义和定义([])不是问题。

我盲目猜测了需求上的示例.js并提出了这种配置,令人惊讶的是它第一次尝试就有效!(这让我很紧张,因为这是我第一次让这段代码工作而没有错误,因为它试图导入 require.js)

这是我想到的:

requirejs.config({
"baseUrl": "/js/lib",
"paths": {
"ImageSelector"  : "../awsS3/ImageSelector",
"ImageLayout"    : "../awsS3/ImageLayout",
"AwsHelper"      : "../awsS3/AwsHelper",
"Utilities"      : "../awsS3/Utilities"
},
"shim": {
"jquery.onscreen": {
"deps": ['jquery'],
"exports": 'jQuery.fn.onScreen'
},
"jquery-ui" : ['jquery'],
"vex.dialog" : ['jquery','vex'],
"vex" : ['jquery'],
"spin" : {
"exports": "Spinner"
},
"aws-sdk" : {
"exports" : "AWS"
},
"Utilities": ["spin"],
"AwsHelper": ["jquery","aws-sdk"],
"ImageSelector": {
"deps" : ["jquery","dropzone","vex","vex.dialog","jquery-ui","jquery.onscreen","ImageLayout","AwsHelper","Utilities"]
},
"ImageLayout": {
"deps" : ["jquery","vex","vex.dialog","Utilities"]
}
}
});

我还注意到一些版本命名是在路径中处理的,因此我只是在路径中命名我的库并完全摆脱了我的"app/"目录引用。

相关内容

  • 没有找到相关文章

最新更新