RequireJS实战-优化oschina前端JS(完)

本人文笔很烂请见谅，欢迎吐槽和各类拍砖！分享快乐！

关于RequireJS入门与好处，这里就直接略过了。（网上有不少），

咱们就以OSchina.net为例，看看应用RequireJS是如何模块与优化JS的。

首先咱们来看看OSchina.net的首页JS的加载状况与页面源代码。

从这个加载能够看出以下问题：

1. JS没有作任何的压缩与合并。

2. 页面与JS代码耦合在一块儿。

看看应用RequireJS是如何优化OSchina站点的。

第一步：将页面所须要的JS，在require.config()进行配置。如：

require.config({
   baseUrl : 'scripts/',
   paths : {
          'jquery':'vendor/jquery/1.7.1/jquery',
   },
   shim : {//配置依赖，关系到加载顺序
	'vendor/jquery.form':['jquery'],
	'vendor/jquery.fancybox-fixed':['jquery'],
        'vendor/jquery.poshytip.min':['jquery'],
   	'vendor/oschina':['jquery'],
   	'vendor/utils':['jquery'],
   	'vendor/channel':['jquery']
   }
 });

第二步：对首页进行，模块化封装。oschina/index.js 如：

define([
'vendor/utils',
'vendor/jquery.form',
'vendor/jquery.fancybox-fixed',
'vendor/jquery.poshytip.min',
'vendor/oschina',
'vendor/channel'
],function(utils) {	
	//在这里进行页面端，JS开发，不要再页面中直接编写JS代码了。
});

第三步：修改页面加载的JS代码：

  这是原来的加载代码

<script type="text/javascript" src="/js/2012/jquery-1.7.1.min.js"></script>    
<script type="text/javascript" src="/js/2012/jquery.form.js"></script>    
<script type="text/javascript" src="/js/2011/fancybox/jquery.fancybox-fixed.js?2014031702"></script>    
<link rel="stylesheet" href="/js/poshytip/tip-yellowsimple/tip-yellowsimple.css" type="text/css" />    
<script type="text/javascript" src="/js/poshytip/jquery.poshytip.min.js"></script>    
<script type="text/javascript">    
 	g_msg = {    
};    
g_user = {    
	id:183046,    
	name:'leeshx',    
	login:true};  </script>    
<script type="text/javascript" src="/js/2011/oschina.js?ver=20121007"></script>    
<script type="text/javascript" src="/js/utils.js"></script>    
<script type="text/javascript" src="/js/channel.js?2014022501"></script>

  修改成

<!--main.js里有require.config的配置-->
<script data-main="scripts/main.js"  src="scripts/require.js" ></script>
<script type="text/javascript">
    	require(['oschina/index']); 
</script>

第四步：到了这里，虽然代码进行了优化，可是JS加载仍是原来的JS。这时就要用到压缩与合并 <r.js>

运行命令

node r.js -o build.js

运行r.js须要使用node环境，下面是build.js

({  
    appDir: './',  
    baseUrl : '.',  
    dir: '../dist',  
    modules: [  
        {  
            name: 'application1' 
        }  
    ],  
    fileExclusionRegExp: /^(r|build)\.js$/,  
    //optimizeCss: 'standard.keepLines',  
    optimizeCss: "standard",
    removeCombined: true,
    paths: {  
    	'jquery':'vendor/jquery/1.7.1/jquery',
    },  
    shim: {
    	'vendor/jquery.form':['jquery'],
	'vendor/jquery.fancybox-fixed':['jquery'],
        'vendor/jquery.poshytip.min':['jquery'],
   	'vendor/oschina':['jquery'],
   	'vendor/utils':['jquery'],
   	'vendor/channel':['jquery']
    }  
})

运行命令成功后，dist/application1.js。（全部JS的合并压缩）

第五步：再次修改页面加载的JS代码

<!--main.js里有require.config的配置-->
<script data-main="scripts/main.js"  src="scripts/require.js" ></script>
<script type="text/javascript">
    	require(['oschina/index']); 
</script>

修改成

<script src="<c:url value="/resources/js/require.js" />"></script>
<script src="<c:url value="/resources/js/application1.js" />"></script>
<script type="text/javascript">
    	require(['oschina/index']); 
</script>

在看页面加载，就剩下（require.js，applicatioin1.js）了。

完.........