Sleuth.js - 想用啥就用啥

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

##一.Sleuth.js是什麼css

Sleuth是一個加載框架,它容許開發者只須要require相應的庫或者插件,不須要去下載,就能夠直接使用,而且容許開發者任意切換版本。java

##二.使用Sleuth.jsjquery

###1.引入Sleuth.js庫文件git

<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是庫的版本映射文件,定義了引用各個庫和插件的源地址。默認的引用的是一個公共的映射文件,固然開發者也能夠定義本身的映射文件。github

###2.使用方法ajax

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

####1-只加載一個庫框架

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

        //write your code 

    });

####2-加載多個庫ui

//加載多個庫
    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, https://github.com/AxeMea/Sleuth.js/blob/master/sleuth.js 這個地址是不行的,須要的是直接訪問文件系統的地址, https://rawgit.com/axemea/sleuth/master/sleuth.js

##六.支持AMD,CommonJS規範

#####AMD規範

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

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

			//write your code 

			});
  });

若是必須須要和require.js一塊兒用時,咱們推薦下面的用法,更能體現Sleuth.js和require.js的功能傾向

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

	        require(['App_module_1','App_module_2','App_module_3'], function (module1,module2,module3) {
    
    				//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

相關文章
相關標籤/搜索