`

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重构（一）：模块划分和命名空间
评论
发表评论

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

相关推荐

    Javascript重构.pdf

    2. 使用JavaScript（例如jQuery的`$.ajax()`）异步加载：请求JS文件，然后使用`eval()`执行返回的内容。这种方法需要谨慎，因为`eval()`可能带来安全风险和调试难题。 3. 动态添加`&lt;script&gt;`标签：在需要时创建并...

    Javascript重构.docx

    首先，模块划分和命名空间是JavaScript重构的关键部分。模块化允许我们将代码分解成独立、可复用的单元，每个单元专注于特定的功能。这样做可以减少代码间的耦合，使得定位和修复问题变得更加容易。例如，我们可以...

    CSS重构：样式表性能调优_前端学习_

    9. **使用CSS-in-JS**：将CSS与JavaScript结合，实现动态样式，提供更好的组件化和复用性，但也需注意增加JS的负担。 10. **代码整洁与注释**：良好的编码规范和详细的注释能提高代码可读性，方便团队协作和后期...

    《网站重构：应用Web标准进行设计(第3版)》PDF

    JavaScript是动态网页的关键，它处理用户交互、数据交换和动画效果。在重构时，应考虑使用模块系统（如CommonJS或ES6模块）来组织代码，避免全局变量污染，提高代码的封装性。同时，利用现代JavaScript特性，如箭头...

    CSS重构：样式表性能调优

    10. **优化动画性能**：避免使用JavaScript进行大量样式更改，而应利用CSS3的`transform`和`opacity`属性，它们通常在GPU上执行，提供更好的性能。 11. **减少重绘和回流**：理解浏览器渲染机制，尽量减少元素的重...

    OpenSC2K基于HTML5CanvasAPI和SQLite使用JavaScript重构SimCity2000

    在当今数字化时代，经典游戏的重制与重构成为了一种趋势，旨在为现代用户带来怀旧体验的同时，利用新技术提升游戏性能和交互性。OpenSC2K项目就是这样一个例子，它通过JavaScript编程语言，结合HTML5 Canvas API和...

    seajs培训 重构代码

    Sea.js是一款轻量级的JavaScript模块加载器，它旨在帮助开发者实现模块化的JavaScript开发，提高代码的可维护性和可复用性。 **1. JavaScript面向对象设计** 面向对象设计是编程中的一种重要范式，它基于类和对象...

    vuejs社区手机端重构

    Vue.js 是一款轻量级的前端JavaScript框架，以其易学易用、高性能和组件化的特点在Web开发领域受到广泛欢迎。"Vuejs社区手机端重构"项目，旨在利用Vue.js技术栈来优化和重构移动端应用，提升用户体验和性能。在这个...

    WEB标准和网站重构

    - **JavaScript**：负责网页的动态交互，如表单验证、页面滚动效果等。ECMAScript（ES）是其标准化版本，新版本如ES6、ES7等持续增加新功能。 2. **网站重构**：网站重构是对现有网站的代码和结构进行改进，以提高...

    重构HTML改善Web应用的设计pdf

    1. **HTML重构的必要性**：随着Web技术的发展，HTML已经不再仅仅是文本的容器，而是承载着丰富的交互性和动态内容。重构HTML旨在提高代码质量，使其更符合语义化标准，便于搜索引擎优化（SEO），同时提升用户体验...

    网站重构 pdg格式

    4. **JavaScript重构**：优化脚本性能，减少DOM操作，使用事件委托，以及合理利用缓存策略。同时，讲解如何将JavaScript与HTML和CSS解耦，实现更好的可维护性。 5. **性能优化**：探讨页面加载速度的重要性，提供...

    java源码：Eclipse的JavaScript插件 JSEditor.zip

    8. **性能优化**：为了确保编辑器在处理大型JavaScript项目时仍能保持流畅，JSEditor可能采用了各种性能优化策略，如延迟加载、内存管理等。 9. **用户界面**：编辑器的用户界面设计，包括布局、菜单、快捷键等，都...

    javascript

    在JavaScript中，我们可能用到CSS来改变元素的样式，或者通过JavaScript操作DOM来动态加载或修改CSS样式，以实现动态效果，比如日期选择器的视觉样式。 2. label_input.htc：HTC（行为集）文件是Internet Explorer...

    js+xml省市县三级联动实现【完成重构】

    在IT行业中，"js+xml省市县三级联动实现【完成重构】...以上就是"js+xml省市县三级联动实现【完成重构】"所涵盖的关键知识点，包括JavaScript、XML的使用，以及前端开发中的数据绑定、事件处理和页面动态更新等技术。

    加载提示框（自己做的很粗糙，可完善）

    3. **动画效果**：动态的加载图标，如旋转的圆圈或波纹效果，可以使用户感觉等待过程不那么漫长。 4. **取消按钮**：在某些情况下，提供取消操作的选项可以让用户有更多的控制感。 5. **适配性**：加载提示框应该...

    Javascript导航菜单13则(含部分代码)

    13. **模块化与重构**: 高级的JavaScript技术如模块化（如ES6的import/export，CommonJS的require等）和面向对象编程，可以帮助我们更好地组织和重用菜单代码，提高代码的可维护性。 这些实例涵盖了基础到进阶的...

    Javascript 51Job项目源码下载

    4. **JavaScript框架或库**：虽然标题没有明确指出，但鉴于项目的复杂性，可能使用了React、Vue.js或Angular等JavaScript框架。每个框架都有自己的组件系统、状态管理机制和生命周期方法，理解这些概念将有助于解析...

    基于JavaScript的返利优惠券小程序模板

    1. **JavaScript基础**：JavaScript是一种解释型的、面向对象的、动态类型的脚本语言，主要用于网页和网络应用的开发。在这个模板中，JavaScript将作为主要的编程工具，处理用户交互、数据管理以及与服务器的通信。 ...

    javascript编译工具

    "JavaScript.exe"可能是一个简单的JavaScript编译器或运行环境，用于执行.js文件；而"fJSE.exe"可能是一个专门的JavaScript编辑器或者IDE，提供更丰富的代码编辑和调试功能。这些工具通常会包含代码格式化、压缩、...

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