xm-kit

v0.1.17

Published

3 years ago

xm develop tool kit

Downloads

0High
0Medium
0Low

10line

XmKit

前端页面工具集，js部分提供事件绑定、小工具（判空、获取url参数等）、网络请求、UI组件（toast、loading、dialog）、错误监控等辅助工具。页面性能及错误自动集成，也可主动上报错误（sendErrorLog）。css部分提供样式重置以及flex、垂直对齐、分割线等常用样式组件。

引入

从CDN引入，本框架依赖jQuery，需在js之前引入jQuery

http://img.xmiles.cn/xmkit/xmkit.0.1.2.css

http://img.xmiles.cn/xmkit/xmkit.0.1.2.js

初始化 `(init)`

在业务js中调用，需提供loaded（可选）及binded（可选）回调。loaded在页面onload事件后回调，binded在jsbridge初始化完成后回调。

参数

/**
 * 页面初始化
 * @param {*object} config 页面配置
 * {
 *      title: '', // 页面标题，统计用
 *      debug: true, // 是否开启调试
 *      loaded: function, // window onLoad回调
 *      binded: function, // jsbridge绑定成功回调
 *      phead: phead, // phead
 *      monitor: true, // 开启监控，默认true
 * }
 */

示例：

    xmkit.init({
        title: '积分墙',
        loaded: function(){},
        binded: function(){},
        phead: phead,
        debug: true
    })

网络请求 `(request)`

发起网络请求，使用ajax实现。

参数

/**
 * 发起请求
 * 
 * @param {*object} config 
 * {
 *      service     服务名
 *      path        路径，默认为common
 *      funid       接口号
 *      url         如果是特殊url，直接指定即可
 *      data        post的数据
 *      showLoading 是否展示loading浮层
 *      beforeSend  请求前回调
 *      callback    请求成功回调
 *      failCallback 请求成功但是服务器出错
 *      onError     请求发生错误回调
 *      complete    请求完成回调
 *      ignoreError 忽略服务器下发的错误状态
 * }
 */

示例：

xmkit.request({
    service: 'appdownload_service',
    funid: 2,
    callback: function(data) {
        // do something
    }
})

绑定事件 `(bindEvent)`

批量绑定事件

参数：

/**
 * 绑定事件
 * @param {*object} eventsMap 事件配置对象，属性key值表示事件类型和触发元素，以空格分隔
 */

示例：

let downloadBtnClick = function(){}

xmkit.bindEvent({
	'click #download_buttton': downloadBtnClick
}});

Toast `(toast)`

弹toast消息

参数：略

示例：

<div class="xm-toast">
    <div></div>
</div>

xmkit.toast('恭喜你中奖了！')

显示加载提示 `(showLoading)`

参数：无

示例：

<div class="xm-loading">
    <div class="xm-loading-wrapper">
        <img class="xm-loading-rotate" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAAAtFBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////oK74hAAAAPHRSTlMAEgQK/gcuGQ4dT/nyrdbM26JVJYOnfinRx5BnQzoh7nWVNrJwMvbq414W4L5iwrpKP0fni1mHnZlrebcrr0AtAAAE00lEQVRYw63Za3eaQBCA4VkoNysSQYWoEEVtvd+ixqT//391dnc2Uo9NUPYNybc8zpllTz4ESmYARH79x89FsG63ZrYBOjJkEL/8UP38WV92cqOia2GS9iVLNjYd7iq4JsLKrn+6KIt+/UrG7iOwZZpKVrSySf+F/T7N74dlF7qwEBqaV6//bpl3rcJ1LzTh8cv10GTXn47lZdPFrseG2K8rXEY05nsld+GKTIHT0CAzWJYeO/6iIMumYamRGWNucWxyi2U9v16QX7Cu9a3sMozGJvdm7mqt6Bdhb+bfnB+6ZBP8RXm7TlPzfgdRKZlx2oDvmmwI5vRLw/5KnjOVa0CZjos6ydhT/IWMSdmEkrGmlIWdOHC7+UW2oHy9V5Rlr8/s9uc7c4UbcE+TBs4s5NfX0a1fdR2M6yTfURYImNOvrRt30JEhDXc3X3JaNN3DVYZDofxAbC1nnk6nDe/6cz2PaAMeyUnkzIi34Z9MDxO4AY9lT7ksCqGY45FtwqOtptQiKCLMoxg83lnC08ViUDhDL8vk1FAhN+Eyr8EuQ2dEm1ClGsqyDqgymTeHarUl/LRI3M+hKasiPZHw09NTD2S46YjLDlStibJoQ+90xEPcrEznKMtyeREjmQfV8xXdAl5EuRroUNHPBt9HTDRoyGwg22jgM+H7iOM4Qt4BHQ0FjI35+xHLmBY6bFBNAIgpQwvtKDowwLLj2EY5Aj0tpZw0YmC2bXPb00R3JZwkNXBs2VwTPUY14fQYPKKZJrqWUCeIiDY10baimxATbWmivSQJEv49AnsywWdiG5poN0A3CJJgibQMNGUE1BommmkIVJzO8dE7NdE5hj/07Tp4Dvj3GuxcZmminWdq80lre68V3YY4T3P+ME10X9FniFKZp4leKboDHtGxJrq1Xj/zr+cZMKJzTbS/pnZgcneHWVrk+VqVAaArcrTQ2+VyKeSNAWATbetZNdKIL9ddAMh2lKFBNjdLasVv5m7XFzk69rFRtg1Y2pflGujhBuO6D7yoT7HKsi1lfMbAY8Ld7/eT6of4Z0M4vRSpkLGqY0d/MKE3QZYhLKq67RPCEg9BZgh6izmV5HQ0Its3gYqFjPWNCrLZHGFC74HKQphXq1U5yQG6EvcLhxZLGfMevy2+L+HRaAWXjL6UMfagnLV9tEVNEwp5NdXWfEhmZ5QJ78M/5cINa2G4tx6Q3UO7rezW9fFupR0+ZLunNibt5hyucsTMort3wg5ClvaNe2cTHB6Pd55l1m022yKUV3CjPsm8CMrXf2siTXOfDLiRtVXybDYr/VfY7HFZjT104WZujWReycHT7hvSyj47/z2OGsJEr1bb+bewNzif3y72mwfwlU0y1ts7Xx9fb3gWNNnDDL7IrRVkLIwtuJ2VDoZDpC921/nmVPYXGXt/f9/aLlzH8tWh2x1iF7rD4JuMVNJKHmO9Who7Lp/fZJ7dn30cECZa2NjKKHMDjqsreoB9fHx0sFardTodDtf2MIVSmXui3zGSiW4J+qRotZIBg7JFRw4rWsnXtLIPKdyRla/U0GrqIl0cu1sz4b7MdEX07amJ7oYu3J81mZH8X7rTN+HBvH5P2h9EF5fdCiOolJOGZAuZ6Nb7PgMdzeNdbdYbcPxj3Av3k1L/UfgLJ6HzH7DHA6cAAAAASUVORK5CYII=">
    </div>
</div>

xmkit.showLoading()

隐藏加载提示 `(hideLoading)`

参数：无

示例：

xmkit.hideLoading()

弹框 `(showDialog)`

显示弹框，默认有标题、内容、按钮、关闭按钮。

参数：

/**
 * 展示弹框，搭配jQuery使用
 * 
 * @param {string} selector 选择器
 * @param {object} config  配置，可选
 * {
 *      title: '', // 标准弹框标题文案
 *      content: '', // 正文html
 *      sureBtnText: '', // 按钮文本
 *      onSureBtnClick: function() {} // 确认按钮点击回调
 *      autoDismiss: true, // 触摸非弹框区域是否隐藏，默认true
 *      beforeShow: function() {} // 弹出前回调，用于特定弹框设定数据
 *      afterShow: function() {} // 弹出后回调
 *      beforeClose: function() {} // 关闭前回调
 *      afterClose: function() {} // 关闭后回调
 * }
 */

示例：

<div class="xm-dialog" id="JtipsDialog">
    <!--背景层-->
    <div class="xm-dialog-bg"></div>

    <!--弹框内容-->
    <div class="xm-dialog-cont">
        <div class="xm-title-cont relative text-center">
            <p class="xm-title">标题</p>
            <i class="xm-close xm-dialog-close"></i>
        </div>
        <div class="xm-title-divider divider divider-horizontal"></div>
        <!--正文-->
        <div class="xm-content"></div>
        <div class="xm-btn-cont">
            <button class="xm-btn xm-btn-blue sure xm-dialog-close">关闭</button>
        </div>
    </div>
</div>

xmkit.showDialog('#JtipsDialog', {
    title: '签到新手大礼包',
    content: '<p>1.新用户第二日签到可获得25金币的额外奖励；</p><p>2.新用户第五日签到可获得油卡奖励（金额随机）；</p><p>3.新用户第七日签到可获得55金币的额外奖励。</p>',
    sureBtnText: '我知道了'
});

异常上报 `(sendErrorLog)`

上报异常信息，记录到数据库，相同异常信息每10min超过40条会自动发送报警邮件

参数：略

示例：

xmkit.sendErrorLog('phead is null')

小工具

getQueryParam(name, url) // 从url中获取query属性值，默认使用当前页面地址

stopEvent(e) // 阻止事件传递

isNull(object) // 判空

isLogin() // 判断当前是否登录（通过phead中的access_token）

allowBodyMove(canMove) // 开启或禁止屏幕滚动

initLazyLoad() // 开始图片懒加载

样式集

主要提供了flex等比布局和水平、垂直居中工具。

示例：

<div class="flex-cont">
    <div class="flex-item relative" style="height:100px; border: 1px solid #333">
        <p>a</p>
    </div>
    <div class="flex-item relative" style="height:100px; border: 1px solid #333">
        <p class="abs-v-center">a</p>
    </div>
    <div class="flex-item relative" style="height:100px; border: 1px solid #333">
        <p class="abs-h-center">a</p>
    </div>
    <div class="flex-item relative" style="height:100px; border: 1px solid #333">
        <p class="abs-center">a</p>
    </div>
</div>

几个有用的样式

// 分割线
.divider {
    background-color: #dcdcdc;
}

.divider-vertical {
    width: 1px;
    height: 100%;
    transform: scaleX(.4);
    -webkit-transform: scaleX(.4);
}

.divider-horizontal {
    width: 100%;
    height: 1px;
    transform: scaleY(.4);
    -webkit-transform: scaleY(.4);
}

// 清除浮动
.clearfix:after {
    display: block;
    height: 0;
    content: "";
    clear: both;
}

.clearfix {
    zoom: 1;
}

// 文字前图标
i.icon {
    display: inline-block;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAbFBMVEUAAADKysrs7Oy8vLy9vb29vb2+vr69vb28vLy9vb2/v7+8vLy9vb29vb29vb3Dw8O8vLy8vLy+vr6+vr7AwMC9vb3BwcG9vb29vb29vb29vb2+vr6+vr6+vr68vLy+vr69vb29vb2+vr68vLz8yW/OAAAAI3RSTlMACQPnXvZP8uzbGfqvj3wRy7hmNivCHbOqgtNIP4prVpeWahiKqiIAAAGISURBVEjHlZbtdoMgDIZDEMRPqq1utl27jfu/x61y1kP4KOP55Ym8MSQxAAFMDlOjuk410yAZZNBVL4yD6CsNadhYm4B6TH0GZ26i8BkhQnswSQ4tBBy5eQE/gkclzEtE5a03WYjiKPIC4UTVcvMP+HPn6OXnfLuuyNbL1ni5QrDMxNxc4cmFSmZrZSSgRZPa9yQoW/PRC5SAi/t23PutjiRvlZfVPp1IX2m/BIrtbj8fzx9Wsfj+SJTvbpASHmzu+x6AiSBI4K76m1SPgTQuA0PEP9OyC25kgYTBJLGb+KIeYUquVzbDZ2KcoEmtr22z3am1AZVYv9g6tJ5DBV18/Ya2gGfP3sUF3R12rip4Q0OibYlb6E1FN632eFgsgQ1NK6lYtEITMdOOqmOCAWRsbp1+iQ8SSZovj2CkvfP04QzLTzNdh340Ip5io1/7Q8D91d5CwUjGTF7AGRlkecFMRmVecMDUMH5/fDrYNG9Lx33pgVJ+ZJUfiuXHbvnBXn51KL+cFF9/fgCRbNEkvCUT8gAAAABJRU5ErkJggg==');
    background-size: cover;
    vertical-align: middle;
}

发布历史

v0.1.11 2018-1-12

changelog:

解决Object.assign导致的config为空问题

v0.1.10 2018-1-12

changelog:

解决debug not defined问题

v0.1.9 2017-12-27

changelog:

监控默认关闭

v0.1.7 2017-11-14

changelog:

增加unBindEvent接口，可以解绑事件

v0.1.6 2017-11-8

changelog:

修改UI组件单位，统一使用px，兼容不同的页面缩放模式

v0.1.5 2017-09-28

changelog:

调整bind函数在load之后调用

v0.1.4 2017-09-21

changelog:

修复页面加载时长统计错误问题

v0.1.3 2017-09-19

changelog:

isNull判断增加判断是否为数字0
网络请求参数ignoreError为true时，所有异常均不弹出错误提示

v0.1.2 2017-09-04

changelog:

通用状态处理，包括数据空、网络异常、其他异常

v0.1.1 2017-7-28

changelog：

初始版本
提供网络、事件绑定、上传错误日志接口
UI组件：toast、loading、dialog
集成错误统计

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

XmKit

引入

初始化 (init)

网络请求 (request)

绑定事件 (bindEvent)

Toast (toast)

显示加载提示 (showLoading)

隐藏加载提示 (hideLoading)

弹框 (showDialog)

异常上报 (sendErrorLog)

小工具

样式集

发布历史

v0.1.11 2018-1-12

v0.1.10 2018-1-12

v0.1.9 2017-12-27

v0.1.7 2017-11-14

v0.1.6 2017-11-8

v0.1.5 2017-09-28

v0.1.4 2017-09-21

v0.1.3 2017-09-19

v0.1.2 2017-09-04

v0.1.1 2017-7-28

初始化 `(init)`

网络请求 `(request)`

绑定事件 `(bindEvent)`

Toast `(toast)`

显示加载提示 `(showLoading)`

隐藏加载提示 `(hideLoading)`

弹框 `(showDialog)`

异常上报 `(sendErrorLog)`