baseUrl: "/",

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

paths: {
    //moduleID:路徑(注意moduleID后綴不需要.js)
    //建議一個(gè)moduleId對(duì)應(yīng)一個(gè)多帶帶的文件夾，因?yàn)榭赡芤驗(yàn)榘姹静煌a(chǎn)生差異
    "jquery": "libs/core/jquery.min"
}

require-config.shim shim配置可簡(jiǎn)單設(shè)置為依賴數(shù)組,設(shè)置shim本身不會(huì)觸發(fā)代碼的加載,想要實(shí)際加載shim指定的或涉及的模塊，仍然需要一個(gè)常規(guī)的require/define調(diào)用

shim: {
    "jquery": {
        //加載依賴關(guān)系數(shù)組
        deps: ["css!/libs/jquery/jquery.css"]
    }
},

require-config.deps 加載依賴關(guān)系數(shù)組

deps: [
    "app"
]        

define 利用它來編寫模塊，然后在相應(yīng)的地方進(jìn)行引入

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

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

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"
    ]
});

相應(yīng)頁面引入并使用

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

INTRODUCTION

可做獨(dú)立組件，一款優(yōu)秀的彈出層組件

CONFIG

option.type

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

option.title String/Array/Boolean，默認(rèn)："信息"

title :"我是標(biāo)題"
title: ["文本", "font-size:18px;"]
title: false

option.content String/DOM/Array，默認(rèn)：""

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

option.skin String 目前l(fā)ayer內(nèi)置的skin有：layui-layer-lanlayui-layer-molv

skin: "layui-layer-rim",

option.area String/Array，默認(rèn)："auto"

area: "500px"http://只定義寬度，高度自適應(yīng)
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 默認(rèn)：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 一般結(jié)合 btn 回調(diào)函數(shù)進(jìn)行使用

layer.close(index)

USAGE

直接引用 layer.js 即可

INTRODUCTION

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

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

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

Handlebar.js 模板的三個(gè)部分：

**a.** Handlebars.js表達(dá)式：{ { ... } }，內(nèi)容可以是變量或者函數(shù)等。 

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

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

CONFIG

option.expression 注意HandlebarJs的標(biāo)簽是內(nèi)閉合的，對(duì) if 和 unless 只能判斷 true or false, ""、undefined、null、0、[]等都會(huì)被識(shí)別為false

{ { !注釋 } }

{ { content } }

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

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

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

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

{ { #each } } { { /each } } 遍歷數(shù)組

{ { { richtext } } } 避免轉(zhuǎn)義

Handlebar.registerHelper 自定義一個(gè) Handlebar 函數(shù)，可在html中作為標(biāo)簽直接使用

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

//HTML內(nèi)使用
{ { #isTaskManger } }
標(biāo)注任務(wù)管理
提交日志管理
{ { /isTaskManger } }

Handlebar.compile 對(duì) handlebars.expression 進(jìn)行預(yù)編譯，生成一個(gè)JavaScript函數(shù)

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

USAGE

在頁面中引入 Handlebar.js

HTML內(nèi)構(gòu)建Handlerbar表達(dá)式

{ { #each infoList } }

    

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

{ { /each } }

JS部分：獲取數(shù)據(jù)格式如下

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

JS部分：對(duì)HTML進(jìn)行預(yù)編譯生成一個(gè)JavaScript函數(shù)，然后通過生成的函數(shù)對(duì)數(shù)據(jù)進(jìn)行渲染，生成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

即時(shí)語言切換,無需重新加載頁面或向服務(wù)器發(fā)出請(qǐng)求

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

自動(dòng)翻譯頁面的動(dòng)態(tài)部分（例如通過AJAX加載或通過jQuery添加）

增加了對(duì)正則表達(dá)式匹配的支持

CONFIG

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

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

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

翻譯 title、alt、href

翻譯內(nèi)容

標(biāo)注管理系統(tǒng)

翻譯 alert

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

option.data-lang-token 用于標(biāo)記長文本，自定義令牌替換原文本內(nèi)容

USAGE

JS部分

js-cookie

初始化

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

切換

lang.change("en");

INTRODUCTION

純javascript的圖表庫，支持豐富圖表類型，所以下面只對(duì)項(xiàng)目所用的圖表進(jìn)行介紹

兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等）

底層依賴輕量級(jí)的 Canvas 類庫 ZRender

可定制，個(gè)性化

圖表父級(jí)DIV需要規(guī)定高度，否則顯示不出來

CONFIG

option.backgroundColor

backgroundColor: "#eee",    

option.title

title: {
        text: "主標(biāo)題,
        subtext: "副標(biāo)題",
        textStyle: {...},//設(shè)置標(biāo)題樣式
        x: "center",
        y: "top"
    },  

option.tooltip

tooltip: {
    trigger: "item",//觸發(fā)類型{item/axis}
    formatter: "{a} 
{b} : {c} (zb7j7lv%)" //提示框浮層內(nèi)容格式器，支持字符串模板和回調(diào)函數(shù)兩種形式，不同圖表類型各個(gè)標(biāo)記代表含義不同
},

option.legend

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

option.toolbox

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

option.xAxis

xAxis: {
    position: "top", //X軸位置,default:bottom
    name: "evsion", //X坐標(biāo)軸名稱
    type: "category", //坐標(biāo)軸類型{value,category,time,log}
    boundaryGap: false, //坐標(biāo)軸兩邊留白策略，類目軸和非類目軸的設(shè)置和表現(xiàn)不一樣
    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",
    //坐標(biāo)軸刻度的相關(guān)設(shè)置
    axisLabel: {
        formatter: "{value}~~~~"
    }
},

option.series 系列列表。每個(gè)系列通過 type 決定自己的圖表類型, 每個(gè) type 對(duì)應(yīng)不同的屬性

option.radar 雷達(dá)圖坐標(biāo)系組件，只適用于雷達(dá)圖

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, //星期標(biāo)簽與軸線之間的距離
        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],//實(shí)際運(yùn)用中用數(shù)組代替Array
    //描點(diǎn)
    markPoint: {
        data: [
        {
            type: "max",
            name: "最大值"
        }, {
            type: "min",
            name: "最小值"
        }]
    },
    //直線
    markLine: {
        data: [{
            type: "average",
            name: "平均值"
        }]
    }
},

pie

series: [{
    name: "XXX",//餅圖某部分激活時(shí)名稱
    type: "pie",
    radius: "55%",//規(guī)定餅圖大小
    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: {//激活時(shí)樣式
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
            }
        }
    }]
}; 

radar

series: [{
    name: "系統(tǒng)商品數(shù)量統(tǒng)計(jì)",
    type: "radar",
    data : [
        {
            value : gnum,
            name : "庫存"
        }, {
            value : snum,
            name : "銷售"
        }, {
            value : cnum,
            name : "評(píng)論"
        }
    ]
}]

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

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

USAGE

init

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

config.option

var Xoption = {
    code...//內(nèi)容既為CONFIG部分
}

setOption

myChart.setOption(Xoption);

event.click
這里params顯示點(diǎn)擊塊的所有配置，然后自動(dòng)跳轉(zhuǎn)到百度并搜索,params.name代表點(diǎn)擊事件觸發(fā)時(shí)的取值

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

INTRODUCTION

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

CONFIG

將某元素“釘”在容器內(nèi)

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

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

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

USAGE

直接引用 jquery.pin.js 即可

INTRODUCTION

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

reveal.js不依賴其他任何javascript庫，是一個(gè)獨(dú)立的javascript插件庫

CONFIG

options

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

// 是否顯示演示的進(jìn)度條
progress: true,

// 是否顯示當(dāng)前幻燈片的頁數(shù)
slideNumber: "c/t",

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

// 是否啟用鍵盤快捷鍵來導(dǎo)航
keyboard: true,

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

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

// 是否在觸屏設(shè)備上啟用觸摸導(dǎo)航
touch: true,

// 是否循環(huán)演示
loop: false,

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

// 全局開啟和關(guān)閉碎片
fragments: true,

// 標(biāo)識(shí)演示文稿是否在嵌入模式中運(yùn)行，即包含在屏幕的有限部分中的
embedded: false,

// 標(biāo)識(shí)當(dāng)問號(hào)鍵被點(diǎn)擊的時(shí)候是否應(yīng)該顯示一個(gè)幫助的覆蓋層
help: true,

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

// 當(dāng)遇到用戶輸入的時(shí)候停止切換
autoSlideStoppable: true,

// 是否啟用通過鼠標(biāo)滾輪來導(dǎo)航幻燈片
mouseWheel: true,

//  是否在移動(dòng)設(shè)備上隱藏地址欄
hideAddressBar: true,

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

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

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

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

// 除當(dāng)前可見的之外的幻燈片數(shù)量
viewDistance: 3,

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

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

// 移動(dòng)視差背景（水平和垂直）滑動(dòng)變化的數(shù)量, 例如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

大方，美觀，跨平臺(tái)，易于使用

CONFIG

CSS配置，可根據(jù)需求自行調(diào)節(jié)樣式

@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 是一個(gè)基于JQuery的插件，用于提供直觀的用戶界面，用于使用具有多個(gè)屬性的選擇輸入。

CONFIG

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

option.maxHeight 下拉框最大高度

maxHeight: 300

buttonWidth: "400px"

includeSelectAllOption: true

enableFiltering: true

     1 
     2
     3 
     4
     5 
     6