search

Home  >  Q&A  >  body text

javascript - 我用jQ实现alert函数,希望对代码规范和写法提建议

代码主要实现一个alert函数的功能。能不能就代码的规范、写法等,给个意见和建议。(代码很短,但没加注释,应该不难看)
这里下载代码

;(function($, window, document,undefined){
var plugin = function(ele,opt){
    this.$p = $("

<

p>");
    this.pType = {
        "default" : {
            "background-color" : "#eee",
            "border" : "1px solid #aaa",
            "box-shadow" : "0 0 5px #aaa",
        },
        "success" : {
            "color" : "#3c763d",
            "background-color" : "#b2dba1",
            "background-image" : "linear-gradient(to bottom, #dff0d8 0px, #c8e5bc 100%)",
            "border" : "1px solid #b2dba1",
            "box-shadow" : "0 0 5px #b2dba1",
        },
        "error" : {
            "color" : "#a94442",
            "background-color" : "#f2dede",
            "background-image" : "linear-gradient(to bottom, #f2dede 0px, #e7c3c3 100%)",
            "border" : "1px solid #dca7a7",
            "box-shadow" : "0 0 5px #dca7a7",
        }
    };
    this.defaultpCss = {
        "display" : "block",
        "position" : "absolute",
        "z-index" : "9999",
        "width" : "300px",
        "min-height" : "80px",

        "font-weight" : "bold",
        "font-size" : "20px",
        "padding" : "10px",
        "border-radius" : "5px",
    };
    this.defaultMaskCss = {
        "display" : "block",
        "position" : "absolute",
        "z-index" : "9998",
        "background-color" : "black",
        "top" : "0",
        "left" : "0",

        "filter" : "alpha(opacity=50)",
        "-moz-opacity" : "0.5" ,
        "opacity": "0.5",
    };
    this.delay = "1500";
    this.options = opt==undefined ? {} : opt;
};
plugin.prototype = {


create : function(){
    this.$p.html(this.options.content);
    this.hide();

    var css = $.extend({}, this.defaultpCss, this.type(),this.options.css);
    this.$p.css(css).appendTo($("body"));
    this.mediate(css);
    this.mask();
},
type : function(){
    var type = this.options.type==undefined ? "default" : this.options.type;
    return this.pType[type];
},
mediate : function(css){
    css.left = css.left==undefined ? ($(window).width() - parseInt(css.width))/2 + "px" : css.left;
    css.top = css.top==undefined ? ($(window).height() - this.$p.height())/2 - 100 + "px" : css.top;
    if(this.$p.height() <= parseInt(css["min-height"])){
        css["line-height"] = css["min-height"];    
    }
    this.$p.css(css);
},
hide : function(){
    document.documentElement.style.overflow='hidden';
    var that = this;

    setTimeout(function(){
        that.$p.fadeOut(300,function(){
            that.$p.remove();
            document.documentElement.style.overflow='auto';
        });
    },this.options.delay==undefined ? this.delay : this.options.delay);

},
mask : function(){
    if(this.options.maskFlag==false){
        return false;
    }
    var css = this.defaultMaskCss;
    var maskp = $("

<

p>");
    css.width = $(window).width();
    css.height = $(window).height();
    maskp.css(css).appendTo($("body"));
    setTimeout(function(){
        maskp.fadeOut(300,function(){
            maskp.remove();
        });
    },this.options.delay==undefined ? this.delay : this.options.delay); 
    that = this;
    maskp.click(function(){
        this.remove();
        that.$p.remove();
    });
}

};

    $.fn.myAlert = function(options) {
        var myPlugin = new plugin(this, options);
        $(this).click(function(){
            myPlugin.create();
        });
        return this;
    };
})(jQuery, window, document);

怪我咯怪我咯2818 days ago367

reply all(1)I'll reply

  • PHP中文网

    PHP中文网2017-04-10 15:29:06

    几个基本的:

    1. 用“===”, 不要用“==”
    2. var Plugin = function(){..} 应该大写
    3. 用Plugin.prototype.fn = fn(), 不要直接对prototype进行赋值
    $.fn.myAlert = function(options) { 
      return this.each(function() {
        // your codes here...
      });
    }
    

    另外可以参考bootstrap alert的代码 https://github.com/twbs/bootstrap/blob/master/js/alert.js

    reply
    0
  • Cancelreply