Question

如何在html和JS中包含Javascript JS文件终极解决方案

Answer 1

现在常用的一种javascript的方法是在当前的html文档中插入一个script标签，在标签中引入script脚本Js代码var__includes__=newArray;Array.prototype.indexOf=function(obj){for(vari=0;i<this .length;i++){if(this[i]==obj)returni;}return-1;}Array.prototype.add=function(obj){this[this .length]=obj;}functioninclude_js(js){if(__includes__.indexOf(js)-1)return;__includes__.add(js);varhead=document.getElementsByTagName('head')[0];script=document.createElement('script');script.src=js; script.type= 'text/javascript';head.appendChild(script);} 当你只是在你的htmlw文档中使用这个方法的时候，一切OK，这其实是script的标签的一种快捷的写法而已。 但是，如果你在一个javascript使用这个方法，问题就来了，比如 我在test.js中使用include_js("test1.js"),在test1.js中有一个变量test1是在test.js中要使用 的，在webkit中尽然出现了test1变量未定义的错误，我不知道ie和firefox是否有这种问题，我想可能是include_js本身不是同步 执行导致的，所以我只好使用以下方法来完善inlcude_jsJs代码var__includes__=newArray;Array.prototype.indexOf=function(obj){for(vari=0;i<this .length;i++){if(this[i]==obj)returni;}return-1;}Array.prototype.add=function(obj){this[this .length]=obj;}functionxhttp(url,callback){varrequest=null;if(typeofXMLHttpRequest!= 'undefined'){request=newXMLHttpRequest();}elseif(typeofActiveXObject!= 'undefined'){request=newActiveXObject( 'Microsoft.XMLHTTP');}request.open('GET' ,url, true);request.onreadystatechange=function(){if(request.readyState==4){ callback(request.responseText);}};request.send(null);}functionadd_scripts(jss,callback){varfunc=function(jss,idx,callback){if(idx==jss.length){callback();return};add_script(jss[idx], function(){func(jss,++idx,callback);});}func(jss,0,callback);}functionadd_script(js,callback){if(__includes__.indexOf(js)-1){callback();return;}__includes__.add(js);xhttp(js, function(js_content){varhead=document.getElementsByTagName('head')[0];script=document.createElement('script');head.appendChild(script); // script.innerHTML=js_content; //原帖是这个...本人测试这行..无效 必须用text属性赋值 script.defer=true; script.type='text/javascript';script.language='javascript';//本人测试修正..添加 script.text=js_content;//本人测试修正..添加//zfrong 09.5.20 callback();});}functioninclude_js(js){if(__includes__.indexOf(js)-1)return;__includes__.add(js);varhead=document.getElementsByTagName('head')[0];script=document.createElement('script');script.src=js; script.type= 'text/javascript';head.appendChild(script);}当我在html文档中引入的时候，我用 include_js，当我在js文件中引入js时候，我使用add_scripts,add_scriptJs代码add_scripts(['test1.js', 'test2.js']), add_scripts方法使用了xmlhttp来读入js内容，并把读入的内容的写到一个新的script标签内，读入是异步执行的，当执行完毕后，会调用callback、

Answer 2

对于JS文件的加载控制，传统的方式是将JS直接编写到html文件中，或者通过script标记依次引入。这样的问题是页面难以维护，JS文件依赖关系不明确，需要手动保证依赖关系，而且不能实现灵活动态的加载。

目前业内主流的方法是使用JS加载器的方式实施。

常见的加载器有LABjs、RequireJS，国内的还有SeaJs。当然很多规模较大的公司会编写自己的模块加载框架，实现统一的版本控制、缓存、分发策略等等。

对于js文件的加载管理，不得不提到模块化。模块化的优点是可以在JS中确定文件之间的依赖关系，模块内部聚合度高，模块之间耦合度低。避免全局空间命名污染。

对于开发大型的网站来说，JS往往要实现模块化管理，常见的JS模块化规范有CMD、AMD。略有差异。