`

JavaScript重构（二）：JS的动态加载

JavaScript重构 
阅读更多

前一节留下了一个问题，如果JS分门别类也清晰了，那我现在需要在必要的情况下才加载某一模块的JS，这个怎么实现呢？

 

方法一，最简单也是最容易被接受的方法，通过后台代码来控制，还是少些复杂的JS吧，通过一个标签、一个分支判断，就可以做到，何乐而不为呢？

 

方法二，如果要使用纯JS来控制，那么看看这样如何：

$.ajax(){ 
  url:"xxx/play.js"; 
  …… 
  success:function(res){ 
    eval(res.responseText); 
  } 
}

 

原理是很简单，不过有一个藏匿着的魔鬼：eval，js加载的生效就靠它了，那么执行的上下文就在它的里面，这就会带来一些潜在的问题，而且，调试也变得困难。

 

方法三，通过添加<script>标签的方式来动态引入脚本：

原理相信大家也马上能领悟个大概了，需要的时候动态地往页面的<head>里面写一对<script>标签，让浏览器自己去取需要的js，这样的就解决了方法二里面的魔鬼eval的问题，是一个比较好的方法：

<script src="xxx/play.js" ... />

 

这里啰嗦一句，<script>标签中的src——本质上不就是对src所表示的地址发送一个get请求吗？这虽然看起来有点歪门邪道，却恰恰是一个跨域问题的解决办法！因为浏览器对<script>引用js页面可没有同域的安全限制（以前转载过过一篇跨域问题的讨论，见此）。

 

方法四，很多JS框架都提供了易于使用的JS动态加载的方法，比如JQuery的loadScript方法，这里不讨论了。

 

另外，如果使用上pushlet的方法，对一个js文件无止境地读取，能否实现这样的效果呢？仅作设想，希望有人与我讨论。

 

文章系本人原创，转载请注明作者和出处

分享到：
| JavaScript重构（一）：模块划分和命名空间
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    import:惰性模块加载器

    加载插件依赖项（JS / CSS），将其存储到本地存储中等等。 一个重构和扩展版本 。 该插件使用了Addy Osmani的awesome 的自定义版本。 支持：IE9 + 为什么要使用另一个依赖加载程序？ 我开发的大多数前端模块均由...

    js-todo-list-step2

    JS Todo清单步骤2 使用JavaScript和AJAX实现的待办事项列表 :fire: 项目！ :bullseye: 要求 1.添加用户 2.加载用户的待办事项列表 3.删除用户 3.添加todoItem 4.加载todoItem 5.完成todoItem 6.删除todoItem 7.修改...

    maelstrom:OO JavaScript GameEngine 和示例游戏

    大漩涡 基于示例游戏的简单 OO JavaScript Canvas 游戏引擎 ... （方向键移动，空格键射击） 去做 在第一级负载上添加 invuln 从引擎中删除 .init，找出更好的方法来做到这一点，因为它很混乱 ... 动态 JS 脚本加载

    pathfinding-visualisation:快速的可视化工具，演示了一些实际的迷宫生成和寻路算法。 使用香草JavaScript编写的练习

    去做✓动态网格尺寸动态生成\遍历速度迷宫的产生和寻路分别没有路径处理✓减慢迷宫的产生✓碎片化的地图生成（在大型地图上加载速度更快） 更多遍历算法Mazerunner vs建筑师动态节点移动宽度手机全屏移动边框-颜色...

    利用jQuery的deferred对象实现异步按顺序加载JS文件

    对jQuery中的deferred的用法了一些了解，今天看到园子里的一篇文章：关于重构JS前端框架的失败经验（顺便怀念那些死去的代码），于是把我之前写的一个利用jQuery的deferred异步按顺序加载JS文件方案分享出来，欢迎...

    causesOfDeathNYC:WIP-显示模块JavaScript模式，松散增强和D3.js

    ####为D3.js应用程序实现了松散扩展的模块。 Javascript模式：松散扩充+显示模块模式。... 需要实现RequireJS进行模块加载进一步重构。 所有侦听器（即jQuery事件侦听器）都必须位于listeners.js文件中。

    LifeOn42:42你在首尔好吗？

    正在进行代码重构2020/12/30 修复支持共享的浏览器（不支持Naver应用）2021/01/09 “正在加载...”更正了文本掉下的部分修改结果计算条件2021/02/20 如果结果中未输入有效值，它将显示警告消息并返回到初始屏幕。

    Signal-Flow-Graph-Solver:完全用JavaScript制作的信号流图求解器

    用户可以添加或删除节点然后在节点之间添加分支用户可以清除所有图形并对其进行重构用户能够重命名节点名称并获得分支收益然后，用户应选择源和末端节点然后他可以用梅森法则求解图该程序允许用户将其图另存为JSON并...

    littlejs::grinning_face:自己写的一个Javascript基础库——littlejs，Little and basic

    littlejs -- Little and basic【重构开发中】本项目是基于环境重构littlejs, 工具式JavaScript库，类似于loadsh。功能功能库： 运动框架; 用ajax实现前后端分离； 设置、获取或者删除cookie； 支持异步方法之一...

    copylot:[实验性] Web应用程序，用于使用Python进行科学运算。 像ipynb一样，但是2D。 通过复制粘贴进行重构

    [实验] 像ipynb，但2D 通过复制粘贴重构代码:)了解代码该应用程序是使用构建的，该应用程序在状态更改时会为我们更新DOM。 如果您是React的新手，我建议他们在其文档的部分。 该应用程序是用 （JavaScript的类型化...

    【卷一/共两卷】AJAX实战pdf高清版90M

    第二部分 核心技术 第4章 作为应用的页面 4.1一种不同类型的MVC 4.1.1 以不同的规模重复MVC模式 4.1.2 在浏览器端应用MVC 4.2 Ajax应用中的视图 4.2.1 将逻辑从视图中分离 4.2.2 保持视图与逻辑的分离 4.3 Aiax应用...

    terrarium:Eloquent Javascript - 玻璃容器项目

    ##Unrealistic Life Simulator ###（扩展自 Eloquent Javascript 的“电子生活”项目） 我最喜欢的 javascript 项目！ （但是代码一团糟！！！） ＃＃＃＃去做： 清理、更好地组织代码、重构、可能拆分成更多文件...

    stati18n:静态页面的简单国际化

    没有繁重的javascript计算 消息 ： 单击时仅更改一个DOM行：CSS类始终相同，我们仅更改CSS包含行（性能更好） CSS自动加载的一般化 自动检测浏览器语言 添加标题标签管理 添加输入值管理 在XML文件中CSS before和...

    Ext Js权威指南(.zip.001

    4.4.4　实现动态加载：ext.loader / 151 4.4.5　管理类的类：ext.classmanager / 159 4.4.6　类创建的总结 / 161 4.5　动态加载的路径设置 / 163 4.6　综合实例：页面计算器 / 165 4.7　本章小结 / 169 第5章　ext ...

    misscat-react:使用 reactJs 重构 miscat.sinaapp.com

    Misscat-React (misscat-React) 重构 miscat运行你的项目生成的项目在端口8080上包含一个实时重新加载静态服务器（您可以在gulpfile.js配置中更改端口），只要您更改应用程序代码，它就会构建、启动和重建应用程序。...

    bomberman:JavaScript 中的炸弹人

    炸弹人这是一款的移植版。...去做 重构 新的授权艺术品（有人想在这里帮忙吗？）想法 更多游戏模式； 死亡竞赛、疯狂、快速等。 从被毁坏的砖块上掉落的电源可以改变炸弹的频率或加速等。 声音和音乐！变更日志添

    jobs-feed-refactor:在单独的页面上显示 xml 作业提要 - 重构 jobs-xml-feed

    这是使用第三次提交作为起点对 jobs-xml-feed 的重构。 首先，单个 javascript 文件被拆分为以下模块： 加载xml； 解析它并创建 javascript 对象； 格式化日期； 根据每个工作的类别和/或位置将数据推送到数组...

    refactoring-example-js：演示不具有类型系统如何使重构更加困难的示例

    如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产...

    Ajax-vue-apis.zip

    Ajax-vue-apis.zip,腋窝,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载网页的情况下更改。

    bumpy-road-to-universal-[removed]我的演讲“通用JavaScript的坎bump之路”的示例存储库

    坎y之路通向通用JavaScript 我的演讲“通用JavaScript的坎bump之路”的示例存储库。 故事 客户想要您的网站并向您发送要求 该网站的标题是“ Random Fox” 作为用户，我希望每次重新加载时都能看到随机的狐狸图像...

Magicbox
Global site tag (gtag.js) - Google Analytics