js库

layer.js 弹窗插件

layer.open({
    //层的类型 0：信息框（默认），1：页面层，2：iframe层，3：加载层，4：tips层。
    type: 1,
    time: 0,//自动关闭等待秒数，整数值;0表示不自动关闭
    area: ['70%', '30%'],//控制层宽高
    maxmin: false, //是否输出窗口最小化/全屏/还原按钮
    title: '弹出框',// title: ['标题', 'background:#c00;'] 
    shade: 0.6,//遮罩透明度
    shadeClose:true,//点击遮罩关闭层
    moveType: 1,//拖拽风格，0是默认，1是传统拖动
    shift: 1,//0-6的动画形式，-1不开启
    fix:true,//不随滚动条滚动，一直在可视区域
    border:[0],//控制层的边框
    closeBtn:[1,true],
    btn:['确定','取消'],
    content: '<div style="padding:10px;">页面层</div>'
        });

其他属性

dialog: {
    type: 3,
    msg: ''
}
信息框层模式提供的私有参数。使用时，按需配置即可 
type: 图标类型，提供了0-16的选择，也许有你喜欢的。 设置-1不显示图标 
msg: 信息框内容，重要参数

page: {
    dom: '#id', 
    html: '',
    url: '',
    ok: function(datas){}
}                   
页面层模式私有参数。 
dom: 页面已存在的选择器 
html: 直接传入的html字符串。 
url: ajax请求地址。 
ok: ajax请求完毕后执行的回调，datas是异步传递过来的值。 
需要特别注意的是，dom、html、url只需设定其中一个就行，若配置html或url，你必须也配置宽高值。

iframe: {
    src: '',
    scrolling: 'auto'
}
iframe层模式私有参数。 
src: 要打开的网址。 
scrolling: 是否允许iframe出现滚动条，默认自动。允许：'yes'，不允许：'no'

loading: {
    type: 0
}
加载层私有属性。 
type: loading图标类型（提供了0-3的选择）。 一般配合ajax使用

tips : {
    msg: '',
    follow: '#id',
    guide: 0,
    isGuide: true,
    more: false,
    style: ['', '']
}          
tips提示层私有属性。 
msg: 提示内容。 
follow: 吸附目标选择器。 
guide: 指引方向（0：上，1：右，2：下，3：左）。 
isGuide: 是否显示默认三角形。 这个参数可配合msg帮助你自定义三角形icon 
more: 是否允许多个tips 
style: [' color:#000; border:1px solid #FF9900; /* 此处可用来自定义tips的css样式 */', '#FF9900']]。 数组第二个值，为三角形的颜色。

回调函数

success: function(layero){}
层弹出成功后的回调函数. 
layero是回调传过来的当前层容器的实例，这意味着你可以对当前弹层进行dom操作

yes: function(index){}
按钮一的回调函数 
index为当前层的索引，主要用来回调执行后，配合layer.close(index)来关闭层

no: function(index){}
按钮二的回调函数

close: function(index){}
层右上角关闭按钮的点击事件触发回调函数

end: function(){}
层被彻底关闭后执行的回调函数

moveEnd: function(){}
拖拽完毕触发的回调函数

min: function(layero){},
full: function(layero){},
restore: function(layero){}
分别为最小化、全屏、还原触发后的回调函数 
layero是当前层容器的实例，layer1.8开始新增

Underscore.js 精巧而强大实用功能库

集合（collection）
_.map([1, 2, 3], function(num){ return num * 3; });// [3, 6, 9]
_.map({one : 1, two : 2, three : 3}, function(num, key){ return num * 3; });// [3, 6, 9]
_.each([1, 2, 3], alert);
_.each({one : 1, two : 2, three : 3}, alert);
_.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0);// 6
_.shuffle([1, 2, 3, 4, 5, 6]);// [4, 1, 6, 3, 5, 2]
数组（array）
_.every([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });// false
_.some([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });// true
_.size({one : 1, two : 2, three : 3});// 3
_.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });// [2, 4, 6]
_.reject([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });// [1, 3, 5]
_.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });// 2
_.contains([1, 2, 3], 3);// true
_.countBy([1, 2, 3, 4, 5], function(num) {
return num % 2 == 0 ? 'even' : 'odd';
});// {odd: 3, even: 2}
对象（object）
_.toArray({a:0,b:1,c:2});// [0, 1, 2]
var stooges = [{name : 'moe', age : 40}, {name : 'larry', age : 50}, {name : 'curly', age : 60}];
_.pluck(stooges, 'name');// ["moe", "larry", "curly"]
函数（function）
工具（utility）
模板解析
<ul id="element"></ul>  
<!-- 定义模板，将模板内容放到一个script标签中 -->  
<script type="text/template" id="tpl">  
    <% for(var i = 0; i < list.length; i++) { %>  
        <% var item = list[i] %>  
        <li>  
            <span><%=item.firstName%> <%=item.lastName%></span>  
            <span><%-item.city%></span>  
        </li>  
    <% } %>  
</script>  
<script type="text/javascript" src="underscore/underscore-min.js"></script>  
<script type="text/javascript">  
    // 获取渲染元素和模板内容  
    var element = $('#element'),  
    tpl = $('#tpl').html();  
    // 创建数据, 这些数据可能是你从服务器获取的  
    var data = {  
        list: [  
            {firstName: 'Wang', lastName: 'Wu', city: 'Guangzhou'},  
            {firstName: 'Zhao', lastName: 'Liu', city: 'Shenzhen'}  
        ]  
    }  
    // 解析模板, 返回解析后的内容  
    var html = _.template(tpl, data);  
    // 将解析后的内容填充到渲染元素  
    element.html(html);  
</script>

swipe.js是一个轻量级的移动滑动组件，支持触摸移动，支持响应式页面。

window.mySwipe = new Swipe(document.getElementById('slider'), {
  startSlide: 2,
  speed: 400,
  auto: 3000,
  continuous: true,
  disableScroll: false,
  stopPropagation: false,
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
链接:http://caibaojian.com/swipe.html
来源:http://caibaojian.com

设置选项
startSlide Integer (default:0) - 开始滚动的位置
speed Integer (default:300) - 动画滚动的间隔（秒数）
auto Integer - 开始自动幻灯片（以毫秒为单位幻灯片之间的时间）
continuous Boolean (default:true) - 创建一个无限的循环（当滑动到所有动画结束时是否循环滑动）
disableScroll Boolean (default:false) - 当滚动滚动条时是否停止幻灯片滚动
stopPropagation Boolean (default:false) - 是否停止事件冒泡
callback Function - 幻灯片运行中的回调函数
transitionEnd Function - 动画运行结束的回调函数

修改当你用点击或者手势控制了之后，轮播图就不会自动滚动了。
function stop() {
    //delay = 0;
    delay = options.auto > 0 ? options.auto : 0;
    clearTimeout(interval);
  }

前端框架库
jQuery Mobile和Zepto是移动端的js库。
jQuery Mobile相当于PC端的jQuery UI，它提供了很多页面的UI库，能够很快的开发出漂亮的界面，适合公司没有UI设计师的前端开发人员来进行移动端的开发。
Zepto相当于PC端的jQuery，它提供了很多方法和功能，能够很快的实现各种需求和功能，适合公司有UI设计师的前端开发人员来进行移动端的开发。
jQuery Mobile性能上没有zepto好。

Angular.Js[MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入]
Vue.Js [以数据驱动和组件化的思想构建的]
React
Ionic
前端UI框架
EasyUI
Bootstrap
Foundation by ZURB
Pure (Yahoo)
Ant Design[蚂蚁金服开发和正在使用的一套企业级的前端设计语言和基于 React 的前端框架实现]
Kendo UI
可视化组件
Echarts
前端构建工具
gulp/grunt/bower/bable/yeoman/webpack/cli/fis3

udesk:云客服

第三方SDK : mob ShareSDK分享、Umeng统计、第三方登陆（QQ/WEIXIN/WEIBO）
即时通讯：openfire+spark、rongCloud