requirejs模塊化編程：前端模塊化編程指南

序言

• -# 公司大了，業務多了，前端代碼量也逐漸增大，咱們漸漸的依賴js實現的交互愈來愈多，長期以來會致使咱們的代碼維護愈來愈困難，因此依賴的插件也愈來愈多。。
  好比這樣頁面中有大量的js外鏈引入。。

這麼多的js 佔用這麼多的請求。。雖然放在頁面底部不影響頁面的正常顯示，可是過多的請求會給服務器帶來不小的壓力，一樣後期攻城師維護也不知道到底哪一個js纔是須要修改的那個了。。。。

那麼下面引入正文 、、、、

如此多的js請求 。。。以及徹底不相干的代碼、插件 咱們所但願的是能有個東西將這些全部的js整理到1個js中 ，而後把一些較大的插件、較多代碼的js再分別作正常的引入。而這些文件的引入不在頁面裏體現，以一個像配置文件的方式配置好引入這個配置文件到瀏覽器中執行，以減小服務器的請求次數，減小服務器壓力。
好吧，目前我所瞭解到的可以實現咱們的需求的工具備2個分別是：
一、Requirejs
二、Seajs

額。。。那麼下面咱們來說一下這個requirejs的基本使用。。。（至於爲何不說sea。。。據說sea比require要難 ，因此。。出於對公司的項目可以更加快捷的開發，我只好捨己爲公司了。。。好吧。，我認可實際上是我怕本身學不會。。。。）
咳咳。。。

接下來咱們開始一塊兒來學習requirejs。。。。。
首先打開百度！ 搜索requirejs官網 。。。好吧我告訴大家
requirejs官網是：http://requirejs.org/
打開以後是這樣子的：

左側是導航 介紹requirejs 應該怎麼調用等等。。。先看右邊 介紹的是require能夠兼容的瀏覽器有 。。。。等等。。。
(還能夠兼容到ie6 。。好棒，應該能夠知足絕大部分公司的變態需求了)

額。。若是你們打不開官網或者以爲官網網速慢，能夠下載咱們公司的服務器地址下的require。。
地址是：http://static.js.xywy.com/common/js/require.min.js

到15年8月21日我這使用的2.1.11版本

接下來咱們須要作的是將require引入咱們的頁面中。。

<script data-main="config" type="text/javascript" src="http://static.js.xywy.com/common/js/require.min.js"></script>

如此這般。。。咱們來分析一下正常引入了個js文件 沒錯 那麼問題來了。。
標籤中 data-main="config" 是？？？？咱們先把這個放在瀏覽器裏執行一下 看看這段代碼都作了什麼。，。

到此 。。咱們能夠看到 config 原來是個js 那麼 data-main="config" 引入了一個文件
是的 沒錯 這就是require 幫咱們作的 。。config 我打算把這個js叫作咱們這個網頁的配置文件用它來控制其餘文件的引用。。。並且在require的項目中，全部須要引入的文件都不要寫.js的後綴名哦。。由於requirejs 已經幫咱們自動添加了.js後綴名 ，咱們再本身添加會報錯(致使找不到文件)。

require配置：

require.config({
    path:{
        'jquery':'http://static.js.xywy.com/common/js/jqueryMin',
        'test':'./test',
        'banner':'/banner'
    }
});

require.config 就是配置require須要引進的文件
path 參數爲對象 表明須要引進來的js 能夠是相對路徑，也能夠是絕對路徑

require執行：

require(['jquery','test','banner'],function(){
    console.log($('h1').css('color','#f00'));
});

執行requirejs的require方法 他接受2個參數
第一個參數爲數組 數組裏的每個值分別對應着上面require配置下path參數對應的鍵值
第二個參數爲引入所須要的js的回調函數。

若是要引入的是一個框架或者是本身封裝的功能組件等。。能夠在回調函數中調用其方法！。。
好吧 require 基本的使用就告一段落了。。。。。纔剛剛開始！

總結

到目前爲止 咱們已經實現了一半咱們的需求。。如今頁面中全部請求數量沒有發生改變(其實還增長了2個請求，一個配置文件，一個require。。不要怕。。等下會大幅度減小滴。。)。。可是咱們已經能夠作到將全部的js統一由一個配置文件(config.js)控制頁面中全部js模塊的引入！

下面咱們解決最大的一個問題，就是將js合併減小服務器請求的問題 。。。
我這邊是用的grunt來一步到位，完成壓縮與合併！ (經過gulp也能夠哦)

好吧 咱們先安裝grunt的運行環境nodejs ，大概敘述一下nodejs的安裝過程吧。。百度搜索nodejs到官網點擊download下載對應着本身電腦的版本。。而後點擊安裝包直接一路next安裝完成便可。。(友情提示：最好不要更改nodejs的安裝目錄，如更改安裝目錄聽說須要手動設置環境變量了) ，而後打開cmd命令行程序 輸入node -v 測試是否安裝成功 出現如下畫面輸出nodejs的版本號證實安裝成功：

好的，接下來咱們來安裝grunt，首先在全局環境安裝grunt （在任何目錄下均可以）執行如下命令：

npm install -g  grunt   -cli

接下來進入到項目目錄下載grunt 以及下載grunt所須要用的壓縮、合併、等等插件，npm install xxxxxx便可
具體插件看本身需求吧，下面我把我本身的grunt的pakeage.json文件貢獻出來你們僅供參考：

{
  "name": "szy",
  "file": "file",
  "version": "0.0.1",
  "description": "szy",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",    //grunt主程序
    "grunt-contrib-uglify": "~0.2.1",   //爲壓縮js插件
    "grunt-contrib-requirejs": "~0.4.1",  //requirejs合併插件
  },
  "dependencies": {
    "express": "3.x",
    "grunt-css":  ">0.0.0",
    "grunt-contrib-cssmin":">0.0.0"    //壓縮css插件
  }
}

若是使用鄙人的pakeage.json的話 直接將此文件拷貝到你的項目目錄而後在命令行執行 npm install 便可
出現如下畫面證實下載成功可使用咯！

下載完成後個人項目目錄是這樣的：

node_modules是剛剛下載的一些插件。
接下來們來建立grunt要執行的 Gruntfile.js文件

module.exports = function (grunt) {
    // 項目配置
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        requirejs:{
            compile:{
                options:{
                    name:'config',    //主文件名字
                    optimize:'uglify',   //指定壓縮工具類型  使用uglify工具壓縮
                    mainConfigFile:'./js/config.js',    //require 的主文件
                    out:'./src/all.js'            //壓縮後的文件
                    //其餘無需指定  本插件會自動尋找require引進的全部文件
                }
            }
        }
    });
    // 加載提供"uglify"任務的插件
    grunt.loadNpmTasks('grunt-contrib-requirejs');

    // 默認任務
    grunt.registerTask('compile', ['requirejs']);

}

以上是我根據以前的項目目錄所作的配置，已經親測過，無問題，合併以後的文件會生成到我所設置的src文件夾中。。叫all.js 若是對應的src目錄不存在 grunt會親自建立該目錄，因此小夥伴們不用擔憂哦。。另外提醒你們一下。。 如上面的例子，我引入了jquery插件用的http方式引入的。可最後的請求是這樣的：

因而可知 ，。合併後的請求 jquery 並無合併到一塊兒！ 請你們注意哦！ 另外你們有什麼問題，歡迎評論。。第一次發這種文章。。有說錯的地方，歡迎指正！。。你們一塊兒交流！關於grunt的基本使用方法和gulp來實現合併壓縮requirejs的方法。。敬請關注個人下一篇文章。。。嘻嘻。。。