2019独角兽企业重金招聘Python工程师标准>>> 
插件
整理了一下比较常用的插件。
"jquery.js"
不解释。
"bootstrap"
不解释。
"require.js"
requireJS用于模块化开发。
（1）、define()定义模块，require()引用模块。
eg:
define(["jquery"],function($){
}
require(["assets/jquery"])
require的里面写模块名称，用中括号括起；
define中第一个参数为一个数组，数组里面写需要传入的其他模块的名称，
function()的形参与数组中模块的返回值一一对应；
（2）、配置模块的路径与名称
eg:
require.config({
baseUrl:"/views/public",
paths:{
"jquery":"assets/jquery/jquery.min",
"bootstrap":"assets/bootstrap/js/bootstrap.min",
"ckeditor": "assets/ckeditor/ckeditor",
},
shim:{
"bootstrap":{
deps:["jquery"]
}
"ckeditor":{
exports:"CKEDITOR"
},
}
})
baseUrl为基本路径；
paths为每个模块的名称和相对应的路径；
tips:一个模块的真实路径 = baseUrl + paths
shim为模块的垫片，
有些模块需要先加载另外一个模块才能正常使用，用deps给这个模块加上依赖；
一些模块没有返回值，在外部需要调用这个模块内部的变量，用exports引入这个变量。
tips：其实现在有了ES6，讲真require跟sea会慢慢过时...
"nprogress.js"
进度条插件。
NProgress.start(); 进度条开始。
NProgress.done(); 进度条结束。
tips：可以配合利用jquery的ajax全局对象给所有的ajax请求添加进度条事件。
eg：
$(document)
.ajaxStart(function(){
NProgress.start();
$("#shade").fadeIn();
})
.ajaxStop(function () {
NProgress.done();
$("#shade").fadeOut();
})
tips：ajax全局对象，触发ajax时的各个阶段，可以设置其回调函数。
ajax全局对象由$(document)调用。
执行顺序：
1.ajaxStart(全局事件)：当多个ajax存在时，在当前批次的所有ajax开始时调用；
2.beforeSend
3.ajaxSend(全局事件)：每一个ajax开始发送请求时都会被调用一次；
4.success
5.ajaxSuccess(全局事件)：每一个ajax请求成功时都会被调用一次；
6.error
7.ajaxError (全局事件)：每一个ajax请求出错时都会被调用一次；
8.complete
9.ajaxComplete(全局事件)：每一个ajax请求完成时都会被调用；
10.ajaxStop(全局事件)：在当前批次的所有ajax完成时会调用。
tips：全局对象的ajaxStart和ajaxStop指的是当前这一批的ajax请求全部开始或结束发送的时候调用的函数；
"jquery.cookie.js"
jquery.cookie是jquery的一个插件，提供了方便的操作cookie的方法。、
eg：
$.cookie("tcInfo");
$.cookie("tcInfo","xx");
artTemplate
artTemplate是一个模板插件，可以实现动态的数据生成指定的html代码。
分为简洁语法和普通语法。
（1）、以普通语法为例。
eg：
var html = template("list_info_tpl" , info);
tips：each result as v i，这里的result指代了info中的result对象；
（2）、template语法
基本语法：
eg：
{{ each list as value index }}
{{$value}}
{{/each}}
tips：list是一个对象数组，value指该数组的元素，index指索引；
在赋值时，写作{{$value}}、{{$index}}
判断语法：
eg：
{{if v==?}}
{{v}}{{xxx}}
{{else}}
{{v}}
{{/if}}
引用语法：在这个模板中引用另一个模板，即模板嵌套；
eg：
{{include "sub_tpl"}}
tips：sub_tpl为模板的id名；
字符串渲染方式添加模板：
当获取到了数据时，拼接字符串完成模板，将其输出到页面中；
方法：template.compile(source , options);
eg:
var render = template.compile(htmlStr);
var html = render(person);
xxx.innerHTML = html;
eg:
var htmlStr = "{{each result as v i}}"+
"{{/each}}";
var render = template.compile(htmlStr);
var html =render(data);
$("select[name=cs_cg_id]").html(html);
"echarts"
echarts是一个生成图表的插件。
eg：
//1、初始化图表
var myChart = echarts.init(document.getElementById('main'));
//2、指定图表的配置项和数据
var option = {
//2.0、图表标题
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
//2.1、x方向的数据
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
//2.2、y方向的数据
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 3、使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
"bootstrap-datepicker.min"
datepicker是bootstrap的一个日历插件。
eg：
$("[name='tc_birthday']").datepicker({
format:"yyyy-mm-dd",
language:"zh-CN",
startDate:"-3d",
endDate:"+3d"
});
"bootstrap-datepicker.zh-CN.min.js"
通过引入zh-CN，可以对日历插件进行汉化。
设置language："zh-CN"即可。
"jquery-validate.min.js"
validate是一个表单验证插件。
eg:
$("form").validate({
//1、清除表单默认的自动提交事件
sendForm:false,
//2、添加事件，当失去焦点的时候给元素进行表单验证
onBlur:true,
//3、添加键盘事件，当键盘弹起的时候进行表单验证，
并且点击了提交按钮的时候将提示信息显示出来
onKeyup:true,
//6、定义表单的提示信息
description:{
name:{
required:"请输入用户名",
valid:"√"
},
pwd:{
required:"请输入密码",
pattern:"密码长度请维持在6-15位",
valid:"√"
},
join_date:{
required:"请选择入职时间"
}
},
//4、当表单验证通过或者不通过的时候，
给表单元素赋予相应的class名称，并将之前的名称进行清除；
eachInvalidField: function () {
this.parent()
.removeClass("has-success")
.addClass("has-error")
},
eachValidField: function () {
this.parent()
.removeClass("has-error")
.addClass("has-success")
},
//5、当所有的表单都验证通过时，且点击了提交按钮，
这时候，给服务器发送ajax请求
valid:function(){
$("form").ajaxSubmit({
url:url,
type:"post",
success: function (data) {
if(data.code == 200){
alert("请求发送成功");
}
}
})
}
conditional:{
confirm:function(){
//自定义的方法名；
}
}
})
tips：为了作用到相对应的标签中，还需要给标签定义其属性；
data-pattern = "正则表达式"; 定义正则表达式验证规则；
data-description = "name"; 对应了description中相对应的描述；
data-describedby = "idxx"; 定义了decription中required需要插入的位置，其值和另一标签的id名对应；
提示信息
· description中的valid值，为验证通过时的提示信息，也插入到该标签中；
data-required 具备该属性的表单元素必须填写否则不得提交；
data-conditional="自定义的conditional方法名"
"jquery.form.js"
jquery.form是一个表单提交插件，可以自动生成表单数据提供给ajax发送给服务器；
eg：
$("form").ajaxSubmit({
url:"/api",
type:"post",
success: function (data) {
alert("创建成功！");
}
})
"jquery.region.js"
省市级三级联动插件。
"ckeditor"
ckeditor是一个富文本编辑框的插件。
eg：
CKEDITOR.replace("introduce",{
toolbarGroups:[
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'links' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
]
});
tips：这里的introduce，指的是页面中textarea标签的id名。
可以通过增删toolbarGroups中的元素，进行增删富文本框不同的模块。
"Jcrop"
Jcrop是一个截图插件。
eg：
$(".preview img").Jcrop({
aspectRatio:2, //宽高比例
setSelect:[x,y,w,h], //初始化选择框的位置和大小
boxWidth:300 //裁切的最大宽度
}, function () {
jcrop_Api = this;
//配置其裁切框
thumbnail = this.initComponent('Thumbnailer', {
width: 240,
height: 120,
thumb: '.thumb'
});
})
"jquery.uploadify"
uploadify是一个上传图片的插件。
eg：
$("#upload").uploadify({
//（1）、上传按钮是一个flash插件
swf:"/views/public/assets/uploadify.swf",
//（2）、上传的地址
upload:"/api/uploader/cover",
//（3）、按钮的文本内容
buttonText:"选择图片",
//（4）、按钮宽度
width:70,
height:"auto",
//（5）、文件对象名称
fileObjName:"cs_cover_original",
buttonClass:"btn btn-success btn-sm",
//（6）、需要提交的数据
formData:{cs_id:cs_id},
itemTemplate:"",
//（7）、上传成功后的回调函数
onUploadSuccess:function(file, data, response){
console.log(data);
//当上传图片成功之后，需要将图片加到img标签的src中
$(".preview img").attr("src",JSON.parse(data).result.path);
//同时，解锁裁切图片的按钮
$("#cropBtn").prop("disabled",false);
}
})