开源桌面系统，极简单的mvc设计、数据绑定实现、微事件实现等等。
下载地址：http://git.oschina.net/eternal_rider/sapling/attach_files
设计如下图：
Controller.js
var DtController={ cache:{}, pubevt:function (topic,args,context) { var evtcontext = context || window, subs = evtcontext.DtController.cache[topic], len = subs ? subs.length : 0; while (len--) { subs[len].apply(evtcontext, args || []); } }, subevt:function (topic,callback) { if (!DtController.cache[topic]) { DtController.cache[topic] = []; } DtController.cache[topic].push(callback); return [topic, callback]; }, unsubevt:function (handle,callback) { var subs = DtController.cache[callback ? handle : handle[0]], callback = callback || handle[1], len = subs ? subs.length : 0; while (len--) { if (subs[len] === callback) { subs.splice(len, 1); } } }, bindmodel:function(model,callback){ Object.observe(model, callback); }, init:function(){ DtController.subevt('/dtname/set',DtModel.setDtname); DtController.subevt('/alias/set',DtModel.setAlias); DtController.subevt('/theme/set',DtModel.setTheme); DtController.subevt('/wallpaper/set',DtModel.setWallpaper); DtController.subevt('/mm/load',DtModel.loadMenu); DtController.subevt('/mm/app/set',DtModel.setApp); DtController.subevt('/app/xy/set',DtModel.setAppXY); DtController.bindmodel(DtModel,function(data){ data.forEach(function(item, i){ switch(item.name){ case 'theme': DtView.setTheme(item.object[item.name]); break; case 'wallpaper': DtView.setWallpaper(item.object[item.name]); break; case 'alias': DtView.setAlias(item.object[item.name]); break; case 'dtname': DtView.setDtname(item.object[item.name]); break; case 'menus': DtView.setMenus(item.object[item.name]); break; case 'apps': DtView.setApps(item.object[item.name].list); break; }; //console.log(change.type, change.name, change.oldValue); DtView.setNotifications('监听到DtModel中' + item.name+',触发'+ item.type+'事件'); }); }); DtController.pubevt('/mm/load',[]); var urlstr=window.location.href, username=urlstr.substr(urlstr.indexOf("?")+1); DtModel.setUserName(username); DtView.init(); }};
model.js
var DtModel = { dtname:"", username:"", alias:"", theme:"", wallpaper:{}, menus:{}, apps:{}, storage:window.localStorage, loadMenu:function(){ //初始化开始菜单和邮件菜单 $.getJSON("assets/menu.json", function(data) { if (data) { var mm_tmp = [],app_tmp = []; $(data.menu).each(function(i, item) { mm_tmp.push(item); }); $(data.app).each(function(i, item) { app_tmp.push(item); }); var obj = {mm:mm_tmp,app:app_tmp}; DtModel.menus = obj; DtModel.load(); } }); //初始化桌面布局菜单 }, setDtname:function(name){ DtModel.dtname = name; DtModel.save(); }, setUserName:function(username){ DtModel.username = username; }, setAlias:function(alias){ DtModel.alias = alias; DtModel.save(); }, setTheme:function(theme){ DtModel.theme = theme.colors; DtModel.save(); }, setWallpaper:function(data){ DtModel.wallpaper = data; DtModel.save(); }, setApp:function(id){ var list = $.extend([],DtModel.apps.list || []); $.each(list, function(i,data){ if(data.id == id){ list[i].state = list[i].state ==0?1:0; id = "-1"; return false; } }); if(id != "-1"){ $.each(DtModel.menus.app, function(i,data){ if(data.id == id){ data.state = 1; list.push(data); return false; } }); } DtModel.apps = {list:list}; DtModel.save(); }, setAppXY:function(id,x,y){ $.each(DtModel.apps.list, function(i,data){ if(data.id == id){ DtModel.apps.list[i].x=x,DtModel.apps.list[i].y=y; return false; } }); DtModel.apps = {list:DtModel.apps.list}; DtModel.save(); }, save:function(){ if(DtModel.storage) { var data = {}; data.dtname = DtModel.dtname; data.username = DtModel.username; data.alias = DtModel.alias; data.theme=DtModel.theme; data.wallpaper = DtModel.wallpaper; data.apps=DtModel.apps; DtModel.storage.sapling = JSON.stringify(data); //通过websocket保存到服务器 }else{ alert('不支持LocalStorage'); } }, load:function(){ if(DtModel.storage) { if(DtModel.storage.sapling){ var data = JSON.parse(DtModel.storage.sapling); DtModel.dtname = data.dtname; DtModel.username = data.username; DtModel.alias = data.alias ? data.alias:data.username; DtModel.theme = data.theme; DtModel.wallpaper = data.wallpaper; DtModel.apps = data.apps; }else{ DtModel.alias = DtModel.username; } }else{ alert('不支持LocalStorage'); } }}
view.js
var DtView = { "init":function(){ setInterval(function() { var time = new Date(); $("#time").html(time.toLocaleTimeString()); }, 1000); using('calendar',function(){ $('#calendar').calendar({ firstDay:1, width:250, height:250 }); }); using('textbox',function(){ $('#dt_name').textbox({ onClickButton:function(){ var text = $('#dt_name').textbox('getText'); if(text){ DtController.pubevt('/dtname/set',[text]); } } }); $('#alias').textbox({ onClickButton:function(){ var text = $('#alias').textbox('getText'); if(text){ DtController.pubevt('/alias/set',[text]); } } }); }); $("#start").mouseenter(function(e) { e.preventDefault(); $(this).attr("src", "assets/ima/2.jpg"); using("menu", function() { $('#startmm').menu('show', { left : 0, top : 40 }); }); }).mouseleave(function() { $(this).attr("src", "assets/ima/1.jpg"); }); $('#dock').on('click','li',function(ev){ var target = $(this).find('a').attr('href'); if($(target).dialog('options').minimized){ $(target).dialog('open'); }else{ $(target).dialog('minimize'); } ev.preventDefault(); ev.stopPropagation(); }); $('#user').mouseenter(function(ev){ ev.preventDefault(); ev.stopPropagation(); $('#calendar').hide(); $('#user_panel').fadeIn(); }); $('#user_panel').mouseleave(function() { $('#user_panel').fadeOut(); }); $('#time').mouseenter(function(ev){ ev.preventDefault(); ev.stopPropagation(); $('#user_panel').hide(); $('#calendar').fadeIn(); }); $('#calendar').mouseleave(function() { $('#calendar').fadeOut(); }); $('#desktop,#task_bar').on('contextmenu',function(e){ e.preventDefault(); var target=e.target||e.srcElement; var tid = $(target).attr('id'); if(tid == 'desktop'){ using("menu", function() { $('#mm-setup').menu('show', { left: e.pageX, top: e.pageY }); }); }else if(tid == 'task_bar'){ alert('任务栏的右键事件'); }else{ return false; } }); $('#setup_app').on('click','li',function(ev){ DtController.pubevt('/mm/app/set',[$(this).attr('id')]); ev.preventDefault(); ev.stopPropagation(); }); $('#user_blog').on('click',function(ev){ ev.preventDefault(); ev.stopPropagation(); DtView.dialogHandler({ "id":"myblog", "title":"作者博客", "link":"http://my.oschina.net/eternal/blog", "load":"iframe", "icon":"world", "width":1280, "height":685 }); }); $('#user_about').on('click',function(ev){ ev.preventDefault(); ev.stopPropagation(); DtView.dialogHandler({ "id":"aboutme", "title":"关于作者", "link":"apps/about/index.html", "load":"iframe", "icon":"user", "maximized":true }); }); $('#help_user').on('click',function(ev){ ev.preventDefault(); ev.stopPropagation(); DtView.dialogHandler({ "id":"helpme", "title":"随便给点吧", "link":"apps/helpme/index.html", "load":"iframe", "icon":"heart", "maximized":true }); }); $('#wallpapers_mm').on('click',function(ev){ ev.preventDefault(); ev.stopPropagation(); DtView.dialogHandler({ "id":"wallpapers", "title":"桌面壁纸", "link":"apps/wallpaper/index.html", "load":"iframe", "icon":"customization", "width":1280, "height":685 }); }); $('#logout').on('click',function(ev){ ev.preventDefault(); ev.stopPropagation(); if (confirm("确认退出系统吗？")==true){ window.location.href="index.html"; } }); }, setDtname:function(name){ document.title = name; using('textbox',function(){ $('#dt_name').textbox('setText',name); }); }, setAlias:function(name){ $('#user').text(name); using('textbox',function(){ $('#alias').textbox('setText',name); }); }, setApps:function(list){ if(!list){ return false; } $.each(list, function(i,data){ var hasapp = $("#desktop").children("#dt_"+data.id).html(); if(!hasapp){ var app = {id:data.id,width:data.width,height:data.height,title:data.title,x:data.x,y:data.y}; $("#dtapp_tmpl").tmpl(app).appendTo("#desktop"); var $appi = $(""); $("#dt_body_"+data.id).html($appi); using("draggable",function(){ $("#dt_"+data.id).draggable({onStopDrag:function(e){ var x = $(this).offset().left,y = $(this).offset().top-41; DtController.pubevt('/app/xy/set',[data.id,x,y]); }}); }); }else{ if(data.state == 0){ $("#desktop").children("#dt_"+data.id).remove(); } } }); }, setMenus:function(menus){ $("#startmm_tmpl").tmpl(menus.mm).appendTo("#startmm"); using('menu',function(){ $('#startmm').menu({ onClick:function(item){ DtView.menuHandler(item); } }); }); $("#app_tmpl").tmpl(menus.app).appendTo("#setup_app"); }, setTheme:function(theme){ var colors = theme.split(','); $('#task_bar').css('background-color',colors[0]).css('border-bottom','1px solid '+colors[1]); $('body').css('background-color',colors[2]); }, setWallpaper:function(data){ if(data.type == 'rgb'){ $('body').css('background',data.name); }else{ $('body').css('background','#777777 url(assets/ima/'+data.name+')'); } }, setNotifications:function(content){ var $lists = $("#user_panel_news").children(".notifications"); if($lists.length >= 3){ $lists[2].remove(); } $("#notifications_tmpl").tmpl({content:content}).prependTo("#user_panel_news"); }, menuHandler:function(item) { var menumodel = {}; $.each(DtModel.menus.mm, function(i,data){ if(data.id == item.id){ menumodel = data; return false; } }); if(menumodel.id){ DtView.dialogHandler(menumodel); } }, dialogHandler:function(menumodel) { if ($("#mm_"+menumodel.id).length > 0) { $("#mm_"+menumodel.id).html(""); } else { $("#desktop").append(" "); } using('dialog', function() { var dlgconfig = { title:' '+menumodel.title, width:menumodel.width, height:menumodel.height, iconCls:'icon-'+menumodel.icon, collapsible:menumodel.collapsible||true, minimizable:menumodel.minimizable||true, maximizable:menumodel.maximizable||true, resizable:menumodel.resizable||true, draggable:menumodel.draggable||true, inline:true, shadow:true, maximized:menumodel.maximized||false, onBeforeClose:function(){ $('#dock_'+menumodel.id).remove(); $(this).parent().next().remove(); $(this).parent().remove(); }, content : "" }; menumodel.load == "ajax"?dlgconfig.href=menumodel.link:""; $("#mm_"+menumodel.id).dialog(dlgconfig); }); $('
'+menumodel.title+'