如何将模块引入旧版JavaScript项目?

时间:2015-12-30 16:32:03

标签: javascript requirejs

我是一个非常庞大,多页的网页应用的开发者。我们正在努力提高我们的javascript的健全性,所以我想介绍一个模块加载器。目前,一切都是以老式的方式在页面上打了一堆脚本标签并希望最好。一些限制是:

  • 我们的html页面是模板化的,继承的和组合的,因此发送到客户端的最终页面汇集了来自许多不同源html文件的片段。这些给定文件中的任何一个都可能依赖于链上方引入的javascript资源。
  • 这必须是零碎的。代码库远远大于一次转换所有内容,因此我正在寻找新页面的良好解决方案,并根据需要在现有页面上进行迁移。
  • 此解决方案需要与现有的非模块javascript共存于同一页面上。每个页面上都存在一些东西(比如菜单和分析),例如,我无法删除全局jquery,因为它遍布整个地方。

基本上我想要一种方法来划分使用模块和现代依赖管理的安全空间。我读过的大多数教程和文章都针对新项目。

Requirejs看起来像个不错的选择,而且我玩了一下。它的完全异步性在某些情况下是一个障碍 - 我想使用requirejs来打包全局资源,但如果我无法控制执行顺序,我就不能这样做。此外,在分析调用之类的次要事情之后,让页面的主要功能(例如,呈现表格)发生是很糟糕的。

有什么建议吗?

1 个答案:

答案 0 :(得分:0)

这要求很多。 :-)所以这是我对此的想法:

通常,当您加载网页时 - 擦除所有正在显示的内容,以便新传入的信息不会干扰已存在的内容,因此您实际上只有几个选项(我知道)在哪里可以将所有内容保存在浏览器中,然后根据需要加载新页面。

第一种(也是最简单的)方法是使用FRAMES。这些不再用于我所看到的内容,但每个FRAME允许您显示不同的网页。所以你要做的是让一帧使用100%而第二帧使用" *"所以它没有被看到。然后,您可以使用看不见的帧来控制100%帧中发生的事情。

第二种方法是使用Javascript来控制一切。在这种情况下,您创建一个名称空间区域,然后使用jQuery的getscript()函数在您需要的时候加载每个页面。我通过生成HTML,通过bin2hex()将其转换为十六进制,将其作为javascript函数发送回来然后在浏览器中取消它并将其应用于网页来完成此操作。如果要完全替换您执行该操作的网页,并且如果它是对网页的更新,则只需将其插入到网页上已有的HTML中即可。任何新的javascript函数总是将自身附加到命名空间。如果不再需要某个函数,可以从命名空间中删除它以释放内存。

为什么要将HTML转换为十六进制然后发送?因为那时你可以使用你想要的任何字符(如单引号和双引号),它根本不会影响Javascript。 GitHub上有相当快的十六进制例程(请参阅我的toHex和fromHex例程)。

使用getScript()的一个额外好处是,它有时也使得任何人几乎不可能看到你的代码。关于getScript()如何工作的侥幸记录。