代码预览
/**
* CommonUtil 0.0.1
* author 78**78657@qq.com
*/
;(function (win, doc, $) {
var CommonUtil = {
init: function () {
this.quickLink();
},
/**
* ajax封装
*
* @param url
* @param data
* @param sucFn
* @param isAsync
* @param errFn
*/
getJson: function (url, data, sucFn, isAsync, errFn) {
$.ajax({
url: url,
data: data,
async: isAsync ? isAsync : true,
success: function (res) {
if (typeof sucFn == 'function') sucFn(res);
},
error: function (err) {
if (typeof errFn == 'function') errFn(err);
}
})
},
/**
* 格式化时间戳
*
* @returns {{year: number, month: number, weeks: string, day: number, hours: number, minutes: number, seconds: number, milliseconds: number}}
*/
formatDate: function () {
var d = new Date();
var weeks = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
function addZero(val) {
if (val.length < 2) {
return '0'.concat(val);
}
return val;
}
return {
year: d.getFullYear(),
month: addZero((d.getMonth() + 1).toString()),
weeks: weeks[d.getDay()],
day: addZero(d.getDate().toString()),
hours: addZero(d.getHours().toString()),
minutes: addZero(d.getMinutes().toString()),
seconds: addZero(d.getSeconds().toString()),
milliseconds: d.getMilliseconds()
};
},
/**
* 快捷链接
*
* @returns {CommonUtil}
*/
quickLink: function () {
$('body').on('click', '*[data-link]', function () {
var _url = $(this).data('link');
if (_url) {
location.href = _url;
}
});
return this;
},
/**
* 获取地址栏后带参数
*
* @returns {*}
*/
getQueryString: function (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
},
/**
* 创建script标签
*
* @param src
* @param parent
*/
createScript: function (src, parent) {
var tag = doc.createElement('script');
tag.src = src;
parent.appendChild(tag);
},
/**
* 获取本地存储中的值
*
* @param name
* @returns {*}
*/
getLocalData: function (key) {
var result = localStorage.getItem(key);
try {
if ('object' == typeof JSON.parse(result)) return JSON.parse(result);
} catch (e) {
return result;
}
},
/**
* 设置本地存储值
*
* @param key
* @param value
* @param isObj
*/
setLocalData: function (key, value, isObj) {
if (isObj) {
return localStorage.setItem(key, JSON.stringify(value));
}
localStorage.setItem(key, value);
},
/**
* 移除本地存储中的值
*
* @param keyList 以数组格式传入字段名
*/
removeLocalData: function (keyList) {
$.each(keyList, function (index, obj) {
localStorage.removeItem(obj);
});
}
};
win.CommonUtil = CommonUtil;
}(window, document, jQuery));
jQuery(function () {
CommonUtil.init();
});
何为封装?
封装,即隐藏对象的属性和实现细节,仅对外公开接口。
与其解释封装晦涩的概念,我更想用大白话描述一下我理解的封装:
一、什么代码需要封装?
答:最常用的、代码量多的和逻辑复杂的。
最常用的当然要封装,比如 getJson
方法。虽说jQuery封装的ajax方法已经足够简洁,但是任谁写个十几遍 $.ajax
也会烦的,能少写一行是一行,也算秉承一下jQuery的核心思想之一 Write Less。
我认为代码量多的代码逻辑几乎都不简单。通观上述代码,仅 formatDate
方法行数多一点,逻辑算是比较简单的,真是 ?。虽然百度一下有很多格式化时间的方法,不过皆是不太好实现需求,自己实现下吧。
封装的好处除了write less do more,还有Complex to simple。写的少一点,做的多一点。还有将复杂的事物抽象成简单的东西,这就是我所理解的封装。
步骤
一、首先写一个壳子:
;(function(win, doc, $) {
}(window, document, jQuery));
咱们先写个自调用匿名函数壳子护体,主要防止全局变量污染,因为保不齐自己和同事心有灵犀取了一个相同的变量名,那就不好了。这是个好的代码习惯。
二、通过字面量式创建一个对象:
var CommonUtil = {};
写一个 init
方法用来调用一些直接执行的方法,比如 quickLink
方法。该方法是用来替代 a标签
的。 比如从商品列表跳转到商品详情页,按照传统的方式,a标签包裹div,内联元素嵌套块级元素,不符合语义化,并且多写一个标签多写几行样式,?。
quickLink
方法使用如下:
<div data-link='https://www.baidu.com'>百度一下?</div>
实现原理也很简单,通过事件委托给有 data-link
属性的元素绑定事件,然后点击该元素后通过 location.href
实现跳转。
其实 quickLink
有不足之处。比如只能在当前页跳转,不能跳转一个新窗口,所以我在原先代码基础上多加了一个判断,如下:
$('body').on('click', '*[data-link]', function () {
var _url = $(this).data('link').toString();
var _target = $(this).get(0).hasAttribute('target');
if (!!_url && _target) {
window.open(_url);
} else if (!!_url) {
location.href = _url;
}
});
像这样:
<div data-link="https://www.baidu.com" target>百度一下?</div>
通过js原生方法 hasAttribute
判断元素是否有该属性,返回布尔值来判断是否采用 window.open
还是 location.href
。
三、暴露给window对象
win.CommonUtil = CommonUtil;
通过暴露给 window
对象,我们才能在其他js中任意的调用自己封装的方法。这不又变成全局变量了吗,脱裤子放屁??不过这么写没有坏处。
jQuery(function () {
CommonUtil.init();
});
最后在DOM加载完毕后调用初始化方法。
总结
封装代码的初衷主要是我喜欢将代码写的简洁一点。代码是写给人看的,合理的间隔、通俗的命名,写的简洁优雅一点,看的人也愿意看。以上的封装是较为浅显的,其实还可以根据后台的接口规范实现更深度的封装,这里无需做赘述了。