JS插件的几种写法

2017-10-23 / 0 评论 / 287 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年10月27日,已超过911天没有更新,若内容或图片失效,请留言反馈。

做JS插件非常考验自己对代码封装以及整体控制和编程思想的理解,下面我们看下JS插件的几种通用写法

面向对象思想,类方式

//自定义类
function plugin(){}
//提供默认参数
plugin.prototype.str = "default param";
//提供方法(如果不传参,则使用默认参数)
plugin.prototype.firstFunc = function(str = this.str){
    alert(str);
}
//创建"对象"
var p = new plugin();
//调用方法
p.firstFunc("Hello ! I am firstFunc");//Hello ! I am firstFunc
p.firstFunc();//default param

闭包方式

var plugin =(function(){
    function _firstFunc(str){
        alert(str);
    };
    return{
        firstFunc: _firstFunc,
    };
})();

闭包方式2

(function(){
    //定义一些默认参数
    var _options={
        default_word:"default hello"
    }
    //定义一些api
    var _plugin_api = {
        function _config(opts) {
            if (!opts) return options;
            for (var key in opts) {
                options[key] = opts[key];
            }
            return this;
        },
        firstFunc:function(str = _options.default_word){
            alert(str);
            return this;//返回当前方法
        },
        secondFunc:function(){
            alert("secondFunc");
            return this;//返回当前方法
        }
    }
    //这里确定了插件的名称
    this.CJPlugin = _plugin_api;
})();
CJPlugin.firstFunc("hello");//hello
CJPlugin.firstFunc();//default hello
CJPlugin.secondFunc();//secondFunc

模块化

; !function (factory) {
    "use strict";
    if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') {
        var target = module['exports'] || exports;
        factory(target);
    } else if (typeof define === 'function' && define['amd']) {
        define(['exports'], factory);
    } else {
        factory(window['myjssdk'] = {});
    }
}(function (HExports) {
    var exports = typeof HExports !== 'undefined' ? HExports : {};
    exports.v = "2.0.0 alpha";
    // 基础方法
    exports.timeDifference = function (tmpTime) {
        var mm = 1000;
        var minute = mm * 60;
        var hour = minute * 60;
        var day = hour * 24;
        var month = day * 30;
        var ansTimeDifference = 0;
        var tmpTimeStamp = tmpTime ? Date.parse(tmpTime.replace(/-/gi, "/")) : new Date().getTime();
        var nowTime = new Date().getTime();
        var tmpTimeDifference = nowTime - tmpTimeStamp;
        if (tmpTimeDifference < 0) {
            console.warn("开始日期大于结束日期,计算失败!");
            return 0;
        }
        var DifferebceMonth = tmpTimeDifference / month;
        var DifferebceWeek = tmpTimeDifference / (7 * day);
        var DifferebceDay = tmpTimeDifference / day;
        var DifferebceHour = tmpTimeDifference / hour;
        var DifferebceMinute = tmpTimeDifference / minute;
        if (DifferebceMonth >= 1) {
            return tmpTime;
        } else if (DifferebceWeek >= 1) {
            ansTimeDifference = parseInt(DifferebceWeek) + "个星期前";
        } else if (DifferebceDay >= 1) {
            ansTimeDifference = parseInt(DifferebceDay) + "天前";
        } else if (DifferebceHour >= 1) {
            ansTimeDifference = parseInt(DifferebceHour) + "个小时前";
        } else if (DifferebceMinute >= 1) {
            ansTimeDifference = parseInt(DifferebceMinute) + "分钟前";
        } else {
            ansTimeDifference = "刚刚";
        }
        return ansTimeDifference;
    };
});

0

评论 (0)

取消