amd

以前，开发中我们通常使用整套框架（easyui，bootstrap）,不得不说，easyui的自定义打包下载，让我很困惑，因为那个时候，需要手动跟踪组件依赖，也就是说，你需要自己手动下载相关文件，并注意在页面的引入顺序（好吧，有点耐心，细致点，总能解决的）。 现在，项目规模的增长，业务复杂度的增加，以及客户对交互与ui的要求不断提高。我们基本不再使用整套框架，都是选择开源的单一组件，各种组合，来实现相关业务。我们需要引入大量的插件文件，页面引入时，如何避免组件的彼此冲突，相互干扰，成为了很尖锐的问题。（曾经被select.js重写$坑过的朋友应该有感触）。 为了解决这个问题，两种竞争关系的模块规范AMD和CommonJS问世了，它们允许开发者遵照一种约定的沙箱化和模块化的方式来写代码，这样就能避免“污染生态系统”。 一 AMD( Asynchronous Module Definition ) 异步模块加载--主要适用在web客户端 以require.js为主力，在社区推进规范发展。 下面是只依赖jquery的模块foo的代码： // 文件名: foo.js define(['jquery'], function ($) { // 方法 function myFunc(){}; // 暴露公共方法 return myFunc; }); 还有稍微复杂点的例子

JavaSript模块化 在了解AMD，CMD规范前，还是需要先来简单地了解下什么是模块化，模块化开发？ 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时，依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方式。可以想象一个巨大的系统代码，被整合优化分割成逻辑性很强的模块时，对于软件是一种何等意义的存在。对于软件行业来说：解耦软件系统的复杂性，使得不管多么大的系统，也可以将管理，开发，维护变得“有理可循”。 还有一些对于模块化一些专业的定义为：模块化是软件系统的属性，这个系统被分解为一组高内聚，低耦合的模块。那么在理想状态下我们只需要完成自己部分的核心业务逻辑代码，其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可。 首先，既然是模块化设计，那么作为一个模块化系统所必须的能力： 1. 定义封装的模块。 2. 定义新模块对其他模块的依赖。 3. 可对其他模块的引入支持。 好了，思想有了，那么总要有点什么来建立一个模块化的规范制度吧，不然各式各样的模块加载方式只会将局搅得更为混乱。那么在JavaScript中出现了一些非传统模块开发方式的规范 CommonJS的模块规范，AMD（Asynchronous Module Definition），CMD（Common Module Definition）等

So if i have some module like: //test1.js define([], function() { var counter = 0; return { increment: function() { counter++ } }; }); Requirejs will load this module once(to be aware of local variables of this module) and never again? Variable counter will be alive through closure from returning object(through increment function)? What about next example? //test2.js define([], function() { var value = 10; document.getElementById('asd').addEventListener('mousedown', function(e) { value = Math.random(); }); return value; }); With this structure of code this event never get triggered because

Here's the scenario. I am doing a $.getScript() function call to get a script in my javascript file. The script that I'm downloading from the $.getScript() tries to download some other scripts that it's dependent on. In my script I'm using done() to check if the script loaded completely or not. And if it did, then I try calling the function that's not on the script that I just loaded form $.getScript but the script that was loaded in it. It's getting confusing so let me demonstrate with some code:- //my script.js $.getScript("http://myexternaljs.com/first.js").done(function(){ doSecond(); //<-