Jquery ui 在更新代码时尝试理解requirejs、shim和依赖项
简短版本: 我正在更新一些旧的lib,试图将它们转换为AMD/requirejs格式进行管理,但其中一些lib依赖于旧代码 主要问题: 我基本上不知道该在以下列表中列出什么:Jquery ui 在更新代码时尝试理解requirejs、shim和依赖项,jquery-ui,jquery-plugins,requirejs,es5-shim,Jquery Ui,Jquery Plugins,Requirejs,Es5 Shim,简短版本: 我正在更新一些旧的lib,试图将它们转换为AMD/requirejs格式进行管理,但其中一些lib依赖于旧代码 主要问题: 我基本上不知道该在以下列表中列出什么: define(['what','goes','here'],function('what','needs','to','be','here'){}) 当处理AMD和非AMD工具的组合,以及诸如jQueryUI和jQueryPlugins之类的东西时,shim dependencies列表中会列出什么 附加信息 问题是:
define(['what','goes','here'],function('what','needs','to','be','here'){})
当处理AMD和非AMD工具的组合,以及诸如jQueryUI和jQueryPlugins之类的东西时,shim dependencies列表中会列出什么
附加信息
问题是:
其中一个较旧的库依赖于jquery ui(以及较旧版本)中的.draggable(),jquery插件的一些旧版本称为“屏幕上”,一个称为spin.js的微调器模式——所有这些都不友好。(我还实现了对AMD友好的dropzone新版本的更新)
两个较旧的库还使用一个名为vex的模式库,该模式库要求依赖于vex.dialog。现有的网站有一个丑陋的旧版本
我试图不完全修改这段代码,因为长期目标是完全删除这些依赖项,但我现在可能没有时间去弄清楚它们在做什么
我尝试了我能想到的define(['list'、'of'、'stuff'])的每一种组合,但是一些库,如spin(类微调器)、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代码,但我仍然不清楚如何配置它们
这是我所拥有的。。。我更新了三个库,创建了一个新库。其中一个名为“ImageSelector”的软件构建了一个web gui,允许使用dropzone上传文件。(我更新它的原因是我将其从使用本地文件系统转换为使用Amazon AWS S3存储。)第二个名为“ImageLayout”的文件处理创建用户所选照片的产品布局的业务逻辑。(ImageSelector分为两个框架,左侧用于上传用户文件并将其排序到文件夹中,右侧用于构建布局。因此ImageSelector依赖于ImageLayout)
第三个库是我创建的一个库,在整个网站上使用了大量重复使用的“实用”功能。在全局范围内有一个现有的结构化代码版本,其中只有一个函数列表,如roundPrecision()、sanitizeFilename()、escapeRegex()、baseName()等。我本来打算用静态方法构建它,但后来意识到,如果生成它的实例,我可以自定义它(例如,我可以为具有全局实例参数的不同应用程序更改字符“已消毒”)
新的是AwsHelper,这不是一个问题,因为它是全新的代码,处理与Amazon AWS和S3的所有交互。它是以define()AMD格式创建的,而其他我已转换为define()/export格式
无论如何,订单系统可以独立使用ImageLayout的某些功能,但在大多数情况下,它是ImageSelector的依赖项。AwsHelper主要由ImageSelector使用,但ImageLayout中有两个功能使用它。以上所有功能都使用实用程序库
我猜在配置中是这样的(以ImageSelector为例,但我想知道“jquery”和“dropzone”是否需要在其中,或者函数定义或者两者都需要?)
其他require.js语义问题:
(如果需要,我将分别发布这些内容,但它们可能是简短的回答和相关的)
是否有任何地方可以显示require.js是如何搜索文件的?例如,我了解r.js用于丑化的,但在某些情况下,我无法找到这些东西的原始代码。文件名是否可以在末尾包含.min.js或版本号,并且需要.js仍能找到它们,或者我应该重命名和/或符号链接文件?例如jquery.js vs j例如query-1.7.min.js
上面提到的spin.js实际上包含了一个名为“Spinner”的类定义。我如何在config/shim中表示它?好吧,我根据我过去3天的实验发布了这一点,失败百出,预计会有更多的麻烦。但显然,shim很简单,而且在多个地方都有所需的lib(垫片定义和定义([]))不是问题 我瞎猜了一下require.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"]
}
}
});
我还注意到一些版本命名是在路径中处理的,因此我只是在路径中命名了我的lib,并完全摆脱了我的“app/”目录引用
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"]
}
}
});