baseUrl: "/",

require-config.paths 用來配置別名，用別名來代替模塊名，注意被替代的模塊名不需要.js后綴

paths: {
    //moduleID:路徑(注意moduleID后綴不需要.js)
    //建議一個moduleId對應一個多帶帶的文件夾，因為可能因為版本不同產生差異
    "jquery": "libs/core/jquery.min"
}

require-config.shim shim配置可簡單設置為依賴數組,設置shim本身不會觸發代碼的加載,想要實際加載shim指定的或涉及的模塊，仍然需要一個常規的require/define調用

shim: {
    "jquery": {
        //加載依賴關系數組
        deps: ["css!/libs/jquery/jquery.css"]
    }
},

require-config.deps 加載依賴關系數組

deps: [
    "app"
]        

define 利用它來編寫模塊，然后在相應的地方進行引入

define([
    "jquery",
    "text!module/config/task-config-applicant/tpl/task-config-tpl.html"
], function(jQuery, Tpl) {
    //coding...
}

require 通過它將寫好的模塊進行引入，并根據這些模塊編寫我們的主代碼

require(["jquery"], function ($) {
    //jQuery was loaded and can be used now
});

USAGE

主頁面引入JS文件

配置 require.js 文件

require.config({
    urlArgs: "v=" + (new Date()).getTime(),
    waitSeconds: 0,
    baseUrl: "/",
    paths: {
        "jquery": "libs/core/jquery.min",
        "multiselect": "libs/multiselect/bootstrap-multiselect"        
        },
    shim: {
        "multiselect": {
            deps: ["css!/libs/multiselect/bootstrap-multiselect.css"]
        },
        "echarts_theme": {
            deps: ["echarts"]
        }
    },
    deps: [
        "app"
    ]
});

相應頁面引入并使用

define([
    "jquery",
    "text!module/config/task-config-applicant/tpl/task-config-tpl.html"
], function(jQuery, Tpl) {
    //coding...
}

INTRODUCTION

可做獨立組件，一款優秀的彈出層組件

CONFIG

option.type

type:0 //信息框，默認
type:1 //頁面層
type:2 //iframe層
type:3 //加載層
type:4 //tips層

option.title String/Array/Boolean，默認："信息"

title :"我是標題"
title: ["文本", "font-size:18px;"]
title: false

option.content String/DOM/Array，默認：""

content: "傳入任意的文本或html"
content: $("#id")
content: html //可以結合 HandlebarJs 使用

option.skin String 目前layer內置的skin有：layui-layer-lanlayui-layer-molv

skin: "layui-layer-rim",

option.area String/Array，默認："auto"

area: "500px"http://只定義寬度，高度自適應
area: ["500px", "300px"]

option.btn

btn: ["確定", "取消"],
btn1: function(index, layero) {
    var num = $("#submitNum").val();
    _controller.updatePassNum(v1, num).done(function(res) {
        if (res.code == 0) {
            layer.close(index);
            layer.msg("提交成功！");
            scope.refreshGrid();
        }
    });
},
btn2: function(index, layero) {
    layer.close(index);
}

option.zIndex 默認：19891014 一般用于解決和其它組件的層疊沖突

option.success

success: function(layero, index){
    console.log(layero, index);
}

layer.open

layer.open({
    option...//上述配置
});

layer.msg

layer.msg("hello",function(){
    //do something or not 
    });

layer.close 一般結合 btn 回調函數進行使用

layer.close(index)

USAGE

直接引用 layer.js 即可

INTRODUCTION

Handlebars 是JavaScript一個語義模板庫，通過對 view 和 data 的分離來快速構建Web模板，意義在于讓你的 html 和 js 充分解耦，它在加載時被預編譯，而不是到了客戶端執行到代碼時再去編譯，這樣可以保證模板加載和運行的速度。

Handlebars.js 是一個由Javascript構建的編譯器，它接收任意HTML與Handlebars.js表達式并將它們編譯為Javascript函數。這個派生出來的Javascript函數接著接收一個參數或者一個對象（即你的數據 ），然后它返回一個包含HTML以及被插值在HTML中的對象屬性值的字符串。因此，你最終可以得到一個對象屬性值位于相應地方的字符串（HTML），你可以將這個字符串插入到頁面中。

路徑：../ 同CSS文件路徑選擇

Handlebar.js 模板的三個部分：

**a.** Handlebars.js表達式：{ { ... } }，內容可以是變量或者函數等。 

**b.** Date(上下文)：即你想要展示在頁面上的內容，你將你的數據作為一個對象（一個正常的Javascript對象）傳遞給Handlebars函數。這個數據對象叫做上下文。這個對象能夠由數組，字符串，數字，其他對象組成，或者是包含所有的東西。如果數據對象擁有一個對象數組，你可以使用Handlebars中的each輔助函數（稍后將討論輔助函數）去迭代數組，此時的上下文將被設定為數組中的每個對象。 

**c.** handlebars編譯函數：Handlebars編譯函數接收模板作為參數并返回一個Javascript函數。

CONFIG

option.expression 注意HandlebarJs的標簽是內閉合的，對 if 和 unless 只能判斷 true or false, ""、undefined、null、0、[]等都會被識別為false

{ { !注釋 } }

{ { content } }

{ { #if } } { { /if } }

{ { #if } } { { else } } { { /if } }

{ { #if } } { { else if } } { { else } } { { /if } }

{ { #unless } } { { /unless } } //用法同if，與if判斷條件相反

{ { #each } } { { /each } } 遍歷數組

{ { { richtext } } } 避免轉義

Handlebar.registerHelper 自定義一個 Handlebar 函數，可在html中作為標簽直接使用

//判斷是否為標注管理員
Handlebars.registerHelper("isTaskManger", function(options) {
    if (_currentUserRole === "ROLE_LABEL_MANAGER") {
        //滿足添加繼續執行
        return options.fn(this);
    } else {
        //不滿足條件執行{{else}}部分
        return options.inverse(this);
    }
});

//HTML內使用
{ { #isTaskManger } }
標注任務管理
提交日志管理
{ { /isTaskManger } }

Handlebar.compile 對 handlebars.expression 進行預編譯，生成一個JavaScript函數

var source = $("#template-user").html();//獲取到html結構
var template = Handlebars.compile(source);//編譯成模板
var html = template(data);//生成完成的html結構

USAGE

在頁面中引入 Handlebar.js

HTML內構建Handlerbar表達式

{ { #each infoList } }

    

        
{ { uname } }
        
{ { fname } }
        
{ { taskId } }
        
{ { fdesc } }
        
{ { machine } }
        
{ { update } } / {{sum}}
    

{ { /each } }

JS部分：獲取數據格式如下

{
    "code": 0,
    "data": [{
        "taskId": "22000001",
        "uname": "用戶1",
        "fname": "PD1",
        "fdesc": "行人檢測",
        "machine": "01",
        "update": 50,
        "sum": 100
    },
    {
        "taskId": "22000002",
        "uname": "用戶2",
        "fname": "PD2",
        "fdesc": "臉譜檢測",
        "machine": "02",
        "update": 20,
        "sum": 100
    }
]
}

JS部分：對HTML進行預編譯生成一個JavaScript函數，然后通過生成的函數對數據進行渲染，生成HTML

var _getLabelInfo = function() {
    _controller.getLabelInfo().done(function(res) {
        var data = {infoList: res.data},
        template = Handlebars.compile(rightTpl)(data);
        $("#right-content").empty();
        $("#right-content").html(template);
    });

};

INTRODUCTION

即時語言切換,無需重新加載頁面或向服務器發出請求

跨網頁的語言持久性和通過cookie重新加載（需要js-cookie.js插件）

自動翻譯頁面的動態部分（例如通過AJAX加載或通過jQuery添加）

增加了對正則表達式匹配的支持

CONFIG

en.json 配置語言包，包含短語部分和正則部分

{
    "token": {
        "搜索": "searchFor",
        "首頁": "first",
        "尾頁": "last"
    },
    "regex": [
        ["Budget", "????????"],
        ["^Something at start of text", ""],
        ["This will be case insensitive", "i", ""]
    ]
}

option.lang 放置在 HTML 文件中，用于標記需要翻譯的元素

翻譯 title、alt、href

翻譯內容

標注管理系統

翻譯 alert

alert(window.lang.translate("Some text to translate"));

option.data-lang-token 用于標記長文本，自定義令牌替換原文本內容

USAGE

JS部分

js-cookie

初始化

var lang = new Lang();
//初始化國際化模塊
_changeLang = function() {
    //定義語言包位置
    lang.dynamic("en", "../../libs/langpack/en.json");
    //定義默認語言
    lang.init({
        defaultLang: "cn"
    });
},

切換

lang.change("en");

INTRODUCTION

純javascript的圖表庫，支持豐富圖表類型，所以下面只對項目所用的圖表進行介紹

兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等）

底層依賴輕量級的 Canvas 類庫 ZRender

可定制，個性化

圖表父級DIV需要規定高度，否則顯示不出來

CONFIG

option.backgroundColor

backgroundColor: "#eee",    

option.title

title: {
        text: "主標題,
        subtext: "副標題",
        textStyle: {...},//設置標題樣式
        x: "center",
        y: "top"
    },  

option.tooltip

tooltip: {
    trigger: "item",//觸發類型{item/axis}
    formatter: "{a} 
 : {c} (jlpxdnb%)" //提示框浮層內容格式器，支持字符串模板和回調函數兩種形式，不同圖表類型各個標記代表含義不同
},

option.legend

legend: {
    orient: "vertical",//列表的布局朝向{vertical/horizontal}
    left: "left",//自適應左邊距
    data: [{
            name: "系列1",//展示數據["",...]
            icon: "circle",// 強制設置圖形為圓。
            textStyle: {
                color: "red"http:// 設置文本為紅色
            }
            }] 
    },

option.toolbox

toolbox: {
    orient: "vertical",//工具欄 icon 的布局朝向{vertical/horizontal}
    show: true,//默認不顯示
    feature: { //各工具配置項
        dataZoom: {yAxisIndex: "none"}, //區域縮放
        dataView: {readOnly: false}, //查看源數據，false時可更改
        magicType: {type: ["line", "bar"]}, //折線圖和柱狀圖切換
        restore: {}, //刷新
        saveAsImage: {} //保存圖像
    }
},

option.xAxis

xAxis: {
    position: "top", //X軸位置,default:bottom
    name: "evsion", //X坐標軸名稱
    type: "category", //坐標軸類型{value,category,time,log}
    boundaryGap: false, //坐標軸兩邊留白策略，類目軸和非類目軸的設置和表現不一樣
    data: Array//與"category"配合使用,例["2017-4-1", "2017-4-2", "2017-4-3", "2017-4-4", "2017-4-5", "2017-4-6", "2017-4-7"]
},

option.yAxis

yAxis: {
    type: "value",
    //坐標軸刻度的相關設置
    axisLabel: {
        formatter: "{value}~~~~"
    }
},

option.series 系列列表。每個系列通過 type 決定自己的圖表類型, 每個 type 對應不同的屬性

option.radar 雷達圖坐標系組件，只適用于雷達圖

indicator:  [
{ name: "銷售（sales）", max: 6500},
... 
]

option.visualMap

visualMap: {
    min: 0,
    max: 10,
    calculable: true,
    orient: "horizontal",
    left: "center",
    bottom: "15%"
},

option.calendar 日歷

calendar: {
    top: "middle",
    left: "center",
    orient: "vertical",
    cellSize: [60], //單元格大小，"auto"||["20","40"]
    //是否顯示年
    yearLabel: {
        show: true,
        textStyle: {
            fontSize: 30
        }
    },
    //是否顯示日
    dayLabel: {
        margin: 5, //星期標簽與軸線之間的距離
        firstDay: 1, //從周一開始
        nameMap: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
    },
    //是否顯示月
    monthLabel: {
        show: true
    },
    range: ["2017-01-02", "2017-02-23"] // "2017-02"||2017||["2017-01", "2017-02"]
},

line

series: [{
    name: "登陸量",
    type: "line",
    data: [11, 11, 15, 13, 12, 13, 10],//實際運用中用數組代替Array
    //描點
    markPoint: {
        data: [
        {
            type: "max",
            name: "最大值"
        }, {
            type: "min",
            name: "最小值"
        }]
    },
    //直線
    markLine: {
        data: [{
            type: "average",
            name: "平均值"
        }]
    }
},

pie

series: [{
    name: "XXX",//餅圖某部分激活時名稱
    type: "pie",
    radius: "55%",//規定餅圖大小
    center: ["50%", "60%"],
    data: [{
        //A部分的值和名稱
            value: {A},
            name: category[0]
        }, {
            value: {B},
            name: category[1]
        }, {
            value: {C},
            name: category[2]
        }, {
            value: {D},
            name: category[3]
        }],
        itemStyle: {//激活時樣式
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
            }
        }
    }]
}; 

radar

series: [{
    name: "系統商品數量統計",
    type: "radar",
    data : [
        {
            value : gnum,
            name : "庫存"
        }, {
            value : snum,
            name : "銷售"
        }, {
            value : cnum,
            name : "評論"
        }
    ]
}]

map 注意ECharts3不再支持內置地圖，需要到ECharts-Map按需下載

series: [
    {   
        name: "XXX",
        type: "map",
        mapType: "湖南",//這里與配置的地圖有關，注意省要用中文
        selectedMode : "multiple",//選中模式，表示是否支持多個選中，默認關閉{single/multiple}
        //圖形上的文本標簽，可用于說明圖形的一些數據信息
        label: {
            //是否在普通狀態下顯示標簽。
            normal: {
                show: true
            },
            //是否在高亮狀態下顯示標簽。
            emphasis: {
                show: true
            }
        },
        data:[
            {name:"A", value: 100}//注意A需要與mapType里面的值相對應
        ]
    },   
 

USAGE

init

var myChart = echarts.init(document.getElementById("X"));//JQuery需要($("#X")[0])

config.option

var Xoption = {
    code...//內容既為CONFIG部分
}

setOption

myChart.setOption(Xoption);

event.click
這里params顯示點擊塊的所有配置，然后自動跳轉到百度并搜索,params.name代表點擊事件觸發時的取值

myChart.on("click", function(params) {
    window.open("https://www.baidu.com/s?wd=" + encodeURIComponent(params.name));
});

INTRODUCTION

它能將任意頁面元素“釘”在某個容器頂部，而且在尺寸小的屏幕上能夠自動禁用這種效果

CONFIG

將某元素“釘”在容器內

    $(".pinned").pin({
          containerSelector: ".container"
    })

在小尺寸的屏幕上禁用Pin效果

    $(".pinned").pin({
          minWidth: 940
    })   
 

USAGE

直接引用 jquery.pin.js 即可

INTRODUCTION

reveal.js是一個能夠幫助我們很輕易地使用HTML來創建漂亮的PPT演示效果

reveal.js不依賴其他任何javascript庫，是一個獨立的javascript插件庫

CONFIG

options

// 是否在右下角展示控制條
controls: true,

// 是否顯示演示的進度條
progress: true,

// 是否顯示當前幻燈片的頁數
slideNumber: "c/t",

// 是否將每個幻燈片改變加入到瀏覽器的歷史記錄中去
history: false,

// 是否啟用鍵盤快捷鍵來導航
keyboard: true,

// 是否啟用幻燈片的概覽模式,開啟后，可以使用ESC鍵查看幻燈片概覽
overview: true,

// 是否將幻燈片垂直居中
center: true,

// 是否在觸屏設備上啟用觸摸導航
touch: true,

// 是否循環演示
loop: false,

// 是否將演示的方向變成 right to left
rtl: false,

// 全局開啟和關閉碎片
fragments: true,

// 標識演示文稿是否在嵌入模式中運行，即包含在屏幕的有限部分中的
embedded: false,

// 標識當問號鍵被點擊的時候是否應該顯示一個幫助的覆蓋層
help: true,

//  兩個幻燈片之間自動切換的時間間隔（毫秒），當設置成 0 的時候則禁止自動切換，該值可以被幻燈片上的 ` data-autoslide` 屬性覆蓋
autoSlide: 0,

// 當遇到用戶輸入的時候停止切換
autoSlideStoppable: true,

// 是否啟用通過鼠標滾輪來導航幻燈片
mouseWheel: true,

//  是否在移動設備上隱藏地址欄
hideAddressBar: true,

// 是否在一個彈出的 iframe 中打開幻燈片中的鏈接
previewLinks: false,

// 切換過渡效果
transition: "default", // none/fade/slide/convex/concave/zoom

// 過渡速度
transitionSpeed: "default", // default/fast/slow

// 全屏幻燈片背景的過渡效果
backgroundTransition: "default", // none/fade/slide/convex/concave/zoom

// 除當前可見的之外的幻燈片數量
viewDistance: 3,

// 視差背景圖片
parallaxBackgroundImage: "", // e.g. ""https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg""

// 視差背景尺寸
parallaxBackgroundSize: "", // CSS syntax, e.g. "2100px 900px"

// 移動視差背景（水平和垂直）滑動變化的數量, 例如100
parallaxBackgroundHorizontal: "",
parallaxBackgroundVertical: ""

options.transition None - Fade - Slide - Convex - Concave - Zoom

options.theme Black (default) - White - League - Sky - Beige - SimpleSerif - Blood - Night - Moon - Solarized

options.background #color||image.png(data-background-repeat="repeat" data-background-size="100px)||

option.data-background-video

keyboard

B||.  //pause
o   //preview
F11 // full screen                

USAGE

CSS

HTML

    

        

            
Reveal.js
            
HELLO WORLD!
           
        
    

JS

//初始化
Reveal.initialize({
    //options...    
})

INTRODUCTION

大方，美觀，跨平臺，易于使用

CONFIG

CSS配置，可根據需求自行調節樣式

@font-face {
    font-family: "Material Icons";
    font-style: normal;
    font-weight: 400;
    src: local("Material Icons"), local("MaterialIcons-Regular"), url(http://fonts.gstatic.com/s/materialicons/v21/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format("woff2");
}

.material-icons {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

USAGE

配置CSS文件即可

DEMO

event

INTRODUCTION

Bootstrap Multiselect 是一個基于JQuery的插件，用于提供直觀的用戶界面，用于使用具有多個屬性的選擇輸入。

CONFIG

option.multiple 添加在 中，啟用多選

option.maxHeight 下拉框最大高度

maxHeight: 300

buttonWidth: "400px"

includeSelectAllOption: true

enableFiltering: true

     1 
     2
     3 
     4
     5 
     6