javascript 组件开发 js组件封装

define(['jquery'],function($){
	function Window(){
		this.cfg = {
			width:400,
			height:200,
			content:'我是默认文本内容',
			handle:null,
			title:'系统消息',
			skinClassName:null,
			hasCloseBtn:false,
			hasMask:false
		}
	}
	Window.prototype = {
		alert:function(cfg){
			var CFG = $.extend(this.cfg,cfg);
			//var boundingBox = $('<div class="window_boundingBox"></div>');
			var boundingBox = $('<div class="window_boundingBox">'+
				'<div class="window_header">'+CFG.title+'</div>'+	
				'<div class="window_body">'+CFG.content+'</div>'+
				'<div class="window_footer"><input type="button" value="确定"></div>'+
				'</div>');

			boundingBox.appendTo('body')			var btn = $('.window_footer input');
			if(CFG.hasMask){
				mask = $('<div class="window_mask"></div>');
				mask.appendTo('body');			}
			btn.appendTo(boundingBox);
			btn.click(function(){
				CFG.handle && CFG.handle();
				boundingBox.remove();
				mask && mask.remove();
			})

			boundingBox.css({
				width:this.cfg.width + 'px',
				height:this.cfg.height + 'px',
				left:(CFG.x || (window.innerWidth - CFG.width)/2)+'px',
				top:(CFG.y || (window.innerHeight - CFG.height)/2)+'px',
			})			//右上角关闭按钮
			if(CFG.hasCloseBtn){
				var closeBtn = $('<span class="window_closeBtn">X</span>');
				closeBtn.appendTo(boundingBox);
				closeBtn.click(function(){
					boundingBox.remove();
					mask && mask.remove();
				})
			}			//定制样式
			if(CFG.skinClassName){
				boundingBox.addClass(CFG.skinClassName);
			}
		}
	}
	return {
		Window:Window
	}
}) 
main.js调用
require(['jquery','window'],function($,w){
  new w.Window().alert({
  	width:500,
  	height:300,
  	content:'新年快乐',
  	title:'我是正确标题',
  	hasCloseBtn:true,
  	hasMask:true
  })
})