如何基于jQuery简单封装一下常用的工具类？

代码预览

/**
 * 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加载完毕后调用初始化方法。

总结

封装代码的初衷主要是我喜欢将代码写的简洁一点。代码是写给人看的，合理的间隔、通俗的命名，写的简洁优雅一点，看的人也愿意看。以上的封装是较为浅显的，其实还可以根据后台的接口规范实现更深度的封装，这里无需做赘述了。