JS加載框架：Sleuth.js

GitHub: https://github.com/AxeMea/Sleuth.js

一.Sleuth.js是什么

Sleuth是一個加載框架，它允許開發者只需要require相應的庫或者插件，不需要去下載，就可以直接使用，并且允許開發者任意切換版本。

二.使用Sleuth.js

1.引入Sleuth.js庫文件

<script type="text/javascript" src="https://rawgithub.com/axemea/sleuth/master/mappings/mapping-ch.min.js"></script>

    <script type="text/javascript" src="sleuth.js"></script>

先后引用mapping-ch.min.js,sleuth.min.js文件，注意順序。mapping-ch.min.js是庫的版本映射文件，定義了引用各個庫和插件的源地址。默認的引用的是一個公共的映射文件，當然開發者也可以定義自己的映射文件。

2.使用方法

Sleuth.js只向外提供了一個require方法

1-只加載一個庫

//加載一個庫
    Sleuth.require(['jquery'],function(){

        //write your code 

    });

2-加載多個庫

//加載多個庫
    Sleuth.require(['jquery','prototype','response'],function(){

        //write your code 

    });

3-選擇版本加載，格式為“庫|版本號”，如果沒有顯式定義版本，則選取映射文件中對應庫的第一個版本。

//選擇版本加載
    Sleuth.require(['jquery|1.8.3','prototype','response'],function(){

        //write your code 

    });

三.定義版本映射文件

初始的映射文件為：

var refMapping = {
        prototype:{
            '1.7.2':'http://cdn.bootcss.com/prototype/1.7.2/prototype.min.js'
        },
        jquery:{
            '1.8.3':'http://code.jquery.com/jquery-1.8.3.min.js',
            '1.8.2':'http://code.jquery.com/jquery-1.8.2.min.js'
        },
        ext:{
            '4.2.1':{
                u:'http://cdn.bootcss.com/extjs/4.2.1/ext-all.min.js',
                c:'http://cdn.bootcss.com/extjs/4.2.1/resources/ext-theme-classic/ext-theme-classic-all.css'
            }
        },
        backbone:{
            '1.1.2':'http://cdn.bootcss.com/backbone.js/1.1.2/backbone-min.js'
        },
        response:{
            '0.9.1+201410311050':'http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js'
        }

    };

};
開發者如果需要其它的庫或者插件可以Pull Request過來，我們將豐富到映射文件中去，當然開發者也可以編寫自己的本地映射配置文件。但我們真誠的希望，您能將您的需求提交給我們，你需要的，必然他人也需要，謝謝。

四.映射配置文件配置項說明

var refMapping = {
        //單版本配置
        prototype:{
            '1.7.2':'http://cdn.bootcss.com/prototype/1.7.2/prototype.min.js'
        },
        //多版本配置
        jquery:{
            '1.8.3':'http://code.jquery.com/jquery-1.8.3.min.js',
            '1.8.2':'http://code.jquery.com/jquery-1.8.2.min.js'
        },
        //帶一個css的庫的配置
        ext:{
            '4.2.1':{
                //url
                u:'http://cdn.bootcss.com/extjs/4.2.1/ext-all.min.js',
                //css
                c:'http://cdn.bootcss.com/extjs/4.2.1/resources/ext-theme-classic/ext-theme-classic-all.css'
            }
        },
        //帶多個css的庫的配置
        demo:{
            '1.0':{
                u:'demo.js',
                c:['demo1.css','demo2.css']
            }
        }

};
需要值得注意的是，在配置版本順序的時候，推薦最新版本的寫在前面，這樣默認的話，選擇的就是最新版本。

五.關于引用地址

可以是各個cdn點的資源如：

var refMapping = {
        ext:{
            '4.2.1':{
                //url
                u:'http://cdn.bootcss.com/extjs/4.2.1/ext-all.min.js',
                //css
                c:'http://cdn.bootcss.com/extjs/4.2.1/resources/ext-theme-classic/ext-theme-classic-all.css'
            }
        }

};

如果想引用github中開源庫的代碼，需要注意的是其引用地址，比如Sleuth.js, Sleuth.js 這個地址是不行的，需要的是直接訪問文件系統的地址， Sleuth.js

六.支持AMD,CommonJS規范

AMD規范

require(['sleuth'], function (Sleuth) {

　　　　Sleuth.require(['jquery|1.8.3','prototype','response'],function(){

        //write your code 

        });
　　});

CommonJS規范

七.公共映射配置文件庫以及插件列表[及時更新]

庫名 版本號 腳本引用地址 樣式引用地址
prototype 1.7.2 http://cdn.bootcss.com/prototype/1.7.2/prototype.min.js
jquery 1.8.3 http://code.jquery.com/jquery-1.8.3.min.js
1.8.2 http://code.jquery.com/jquery-1.8.2.min.js
ext 4.2.1 http://cdn.bootcss.com/extjs/4.2.1/ext-all.js http://cdn.bootcss.com/extjs/4.2.1/resources/ext-theme-classic/ext-theme-classic-all.css
backbone 1.1.2 http://cdn.bootcss.com/backbone.js/1.1.2/backbone-min.js
response 0.9.1+201410311050 http://cdnjs.cloudflare.com/ajax/libs

來自：http://my.oschina.net/u/1420701/blog/347360