一种组件化思路

define(["jquery"],function($){
    function jifen_shuoming(htmlContent, title){
        var _html = '<div class="shadowLayout"><div class="shadowLayout-pointsManual animation fadeInDown"><div class="shadowLayout-pointsManual-title"><span>积分</span></div><div class="shadowLayout-pointsManual-content"><div><span class="shadowLayout-pointsManual-content-icon"></span><span class="shadowLayout-pointsManual-content-text">什么是积分</span><br><span class="shadowLayout-pointsManual-content-iconGreen"></span><span class="shadowLayout-pointsManual-content-text">什么是积分</span><br><br><span class="shadowLayout-pointsManual-content-icon"></span><span class="shadowLayout-pointsManual-content-text">什么是积分</span><br><span class="shadowLayout-pointsManual-content-iconGreen"></span><span class="shadowLayout-pointsManual-content-text">什么是积分</span></div></div><div class="shadowLayout-pointsManual-knowIt">我知道了</div></div></div>';
        var _css = '.shadowLayout { width: 100%; height: 100%; padding: 0 15px; background-color: rgba(0, 0, 0, 0.5); display: none; box-sizing: border-box; position: absolute; top: 0; left: 0; z-index: 99; } .shadowLayout-pointsManual-content{ padding-top: 16px; } .shadowLayoutOpen { display: block; } .shadowLayoutClose { display: none; } .shadowLayoutOpen .shadowLayout-pointsManual { } .shadowLayoutClose .shadowLayout-pointsManual { } .shadowLayout-pointsManual { width: 100%; padding: 0 5px 10px; margin-top: 20%; box-sizing: border-box; background-color: #ffffff; border-radius: 6px; } .shadowLayout-pointsManual-title { width: 100%; height: 33px; border-bottom: 1px solid #cacaca; line-height: 33px; font-size: 15px; color: #3e3e3e; text-align: center; } .shadowLayout-pointsManual-content-icon { width: 8px; height: 8px; display: inline-block; background-color: #3b7abf; margin-right: 6px; margin-left: -16px; } .shadowLayout-pointsManual-content-iconGreen { width: 8px; height: 8px; display: inline-block; background-color: #34cf95; margin-right: 6px; margin-left: -16px; } .shadowLayout-pointsManual-content-text { font-size: 12px; } .shadowLayout-pointsManual-knowIt { height: 36px; margin-top: 20px; border-radius: 4px; background-color: #34cf95; color: #fff; text-align: center; line-height: 36px; }';
        
        var $jifen_shuoming = $(_html);
        $jifen_shuoming.find(".shadowLayout-pointsManual-content").html(htmlContent);
        if(typeof(title) != "undefined"){
            $jifen_shuoming.find(".shadowLayout-pointsManual-title").html(title);
        }
        
        var _this = {},
        style_id = "";
        
        _this.open = function(){
            
            (function(){
                var time = new Date();
                style_id = "Loading51CSS"+ time.getTime();
                
                var $head = $("head");
                $style = $("<style id='"+ style_id +"'></style>");
                
                $style.text(_css);
                $head.append($style);
            })();
            $jifen_shuoming.appendTo('body');
            $jifen_shuoming.addClass("shadowLayoutOpen");
        };
        
        _this.remove = function(){
            $jifen_shuoming.remove();
            $("#"+style_id).remove();
        };
        
        $jifen_shuoming.find(".shadowLayout-pointsManual-knowIt").on("click",function(){
            _this.remove();
        });
        
        return _this;
    }
        
    return jifen_shuoming;
    
})

1.html和css都写在js中

2.js生成的style标签具有唯一值

3.移除组件dom时，同时把对应的style标签移除掉

4.自定义对外暴露的几个方法