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）了。

完.........