拼装式页面中写javascript能用requirejs或其它的模块化草案吗

拼装式页面中写javascript能用requirejs或其它的模块化方案吗？
我们的系统大部分页面是拼装的，由不同人员开发的部件，组装在一起，类似于include吧，大家各自把js写在自己的片断中，统一采用jquery风格，所以都是把js的执行放在$.function(){}里面，当页面全部加载完成后再执行。

所有页面公用一个模板，里面引入了常用的js文件，所以大家各自写的片断中，只需要引入仅自己需要的js文件。但是这样，仍然有很多页面可能不需要js，但也被引入了许多js，如果由大家各自引入，可能还会引入不同版本。另一个问题，所有js基本都放在$(function(){ } 里面，页面的阻塞很明显，需要整个页面全部加载完成才能执行，而不是其依赖的js或资源下载完执行。

看到requeirjs等模块化方案，似乎能解决我的问题，结果试了一下，每个页面只引入requirejs，但同时要指定main.js一个主文件，所有的js都写到这个主文件中，我们这种拼装页面就没法用了。我们这种需求，有何解决方案吗？
------解决思路----------------------
這種情況主要是要定一個通用的標準，大家都按這個標準來就可以了

寫一個自己的require系統
下面的程序算是給LZ提供一點思路。



(function(w) {

	var files = [];

	//將需要加載的js添加到隊列

	function require(file) {//['/js/xxx.js', "function test(){alert('1')}"]

		var temp;

		if(file) {

			for(var i = 0; i < file.length; i++) {

				temp = file[i];

				if(files.indexOf(temp) < 0) {

					files.push(temp);

				}

			}

		}

	}

	//加載js

	function loadScript(src) {

		var script = document.createElement('script');

		var type = (/\.js(\?callback=\w+)*$/i).test(src);

		var callback;

		script.type = 'text/javascript';

		if(type) {

			script.src = src;

			callback = (/\.js\?callback=\w+$/i).test(src)? src.match(/\?callback=(\w+)/)[1] : null;

			if(callback) {

				script.onload = function() {

					window.eval(callback +'()');

				}

			}

		} else {

			script.text = src;

		}

		document.getElementsByTagName('body')[0].appendChild(script);

	}

	//添加onload事件以觸發加載js

	w.addEventListener('load', function() {

		var scripts, temp;

		if(files.length) {

			scripts = [];

			Array.prototype.push.apply(scripts, document.getElementsByTagName('script'));

			scripts.every(function(script, index, arr) {

				arr[index] = script.getAttribute('src') 
------解决思路----------------------
 script.text;

				return true;

			});

			for(var i = 0; i < files.length; i++) {

				temp = files[i];

				if(scripts.indexOf(temp) < 0) {//沒有加載過的js

					loadScript(temp);

				}

			}

		}

	});


	if(typeof window.require == 'undefined') {

		window.require = require;

	}

})(window);


//在需要的地方添加進去

require(['xxx.js?callback=test1', "function test(){alert('1')}"]);

------解决思路----------------------
可以
一个组件＝ html ＋ js

使用 requirejs 动态加载 js html文件自己ajax动态加载

2个到手了拼起来 renderer

拼装式页面中写javascript能用requirejs或其它的模块化草案吗

相关推荐