关于Web OS的一些探讨，顺便发一个例子。。。。。。

Question

WebQQ3.0发布了，很炫，很Windows.顺着JS找，发现都是压缩过了，看着头疼，正巧前段时间无聊的蛋疼做了一个类似的例子，发出来大家看下，拍砖的轻拍，我完全是兴趣所致，没深入研究过。。OK ,先说思路
//
先上地址：http://file.52sctrip.com
注意几个：一个是需要IE8浏览器，最好能F11全屏，第二，要想使用在线Office需要本地装Office，并且需要下载一个控件，很有名的NKTO,以信誉担保是无毒的。
//继续摆说到OS，那么大家第一个想到的应该就是进程和线程。没有进程的OS不是真正的OS...WEB OS我想应该也是应该有这个概念的，而不仅仅是几个浮动窗口的组合。那么我们就需要先建立一个系统进程管理器，它主要功能是启动应用和关闭应用。上代码吧还是var applactions = function (me) {
    // 系统进程管理
    me.tid = 0;
    //正在运行的进程
    me.runapplaction = new Array();
    // 应用程序组
    me.items = new Array();
    // 获取所有应用程序
    me.getitems = function (callback) {
        $.post("/ve_system_desk/getapplist/manager_desk_applactionlist", null, function (msg) {
            me.items = eval(msg);
            callback();
        });
    };
    // 添加一个进程
    me.addrunapplaction = function (applaction) {
        me.runapplaction.push({
            id: me.tid, applaction: applaction
        });
    };
    // 删除一个进程
    me.removerunapplaction = function (pid) {
        //删除进程
        $("#applaction" + pid).remove();
        $("#taskapplaction" + pid).remove();
        var proname = "";
        for (var i = 0; i < me.runapplaction.length; i++) {
            if (applactions.runapplaction[i].id == pid) {
                proname = applactions.runapplaction[i].applaction;
                try {
                    var commond = proname + ".dispose(" + pid + ");";
                    eval(commond);
                }
                catch(msg){}
                applactions.runapplaction.splice(i, 1);
                break;
            }
        }
        //删除引入文件
        //        for (var i = 0; i < me.runapplaction.length; i++) {
        //            if (applactions.runapplaction[i].applaction == proname) {
        //                return false;
        //            }
        //        }
        //        eval(proname + "=null;");
        //        $("#cssandscript>div[applaction='" + proname + "']").remove();
    };
    // 判断现是否已经运行了该实例，并且返回实例号，如果没有，则返回-1
    me.getrunappnum = function (applaction) {
        var pid = -1;
        for (var i = 0; i < me.runapplaction.length; i++) {
            if (me.runapplaction[i].applaction == applaction) {
                return i;
            }
        }
        return pid;
    };    // 执行函数
    me.run = function (applaction, para) {
        // 注意：在该处不进行进程管理，程序自己判断是否需要执行该实例
        if ($("#cssandscript>div[applaction='" + applaction + "']").length < 1) {
            var html = "<div applaction=\"" + applaction + "\"><script type=\"text/javascript\" src=\"/script/applaction/" + applaction + ".js\"></script>" + "<link type=\"text/css\" rel=\"stylesheet\" href=\"/style/applaction/" + applaction + ".css\" />" + "</div>";
            $("#cssandscript").append(html);
        }
        try {
            var commond = applaction + ".run(" + para + ");";
            eval(commond);
        } catch (msg) {
            alert('网络延时，数据没有加载！请确保您的网络畅通！具体错误为' + msg);
        }
    };    // 初始化程序
    me.init = function () {
        initaction();
    };
    var initaction = function () {
        $(".deskapp").live("dblclick", function () {
            me.run($(this).attr("applaction"), $(this).attr("para"));
        });
    };
    return me;
} (applactions || {});// 页面加载的时候执行
$(function () {
    applactions.init();
});

Answer 1

那么，什么意思呢？就是每一个应用都有两个方法至少，即:run方法和dispose方法，类似大家编程的main函数和析构函数这就是入口和出口，有了这个进程管理器，那么整个框架就是插件式的了，每个应用就是一个单独的一个程序，有入口，有出口。//
说到OS大家又想到Windows，对啊，大部分应用都是窗口式的，我们就建立一个msgbox管理器，类似什么呢，类似Winform。也就是带界面。不带界面的在Applaction里直接启动就OK了。那么继续上代码
var msgbox = function (pid, title, width, height) {
    // 获取屏幕大小
    var winh = $(window).height() - 30;
    var winw = $(window).width();
    // 设置参数
    this.pid = pid;
    this.id = "applaction" + pid;
    this.ico = "";
    this.title = title;
    this.content = "";
    this.width = width;
    this.height = height;
    // 状态使用表
    this.canmin = true;
    this.canmax = true;
    this.canclose = true;
    this.showintask = true;
    // 设置ajax的信息
    this.url = "";
    this.method = "ajax";
    this.para;
    // 事件
    this.afterload = function () { };
    // 计算Top,Left
    this.getpostion = function () {
        return {
            left: (winw - this.width) / 2, top: (winh - this.height - 40) / 2
        };
    };
    // 设置位置
    this.setpostion = function () {
        $("#" + this.id).width(width);
        $("#" + this.id).height(height);
        var postion = this.getpostion();
        $("#" + this.id).offset(postion);
        $("#" + this.id).attr("owidth", width);
        $("#" + this.id).attr("oheight", height);
        $("#" + this.id).attr("otop", postion.top);
        $("#" + this.id).attr("oleft", postion.left);
        msgboxmanager.resizecontent(this.id);
        msgboxmanager.retop(this.id);
    };    // 设置事件
    this.setevent = function () {
        // 绑定拖动事件
        $("#" + this.id).easydrag();
        $("#" + this.id).setHandler(this.id + "title");
        // 绑定到任务栏
        if (this.showintask) {
            var _html = "<div id=\"task" + this.id + "\" class=\"taskapp\" onclick=\"msgboxmanager.min('" + this.id + "')\"><img src=\"/images/ico/16/app" + this.ico + ".png\"><span>" + this.title + "</span></div>";
            $("#taskapp").append(_html);
        }
        // 帮定执行后事件
        if (this.afterload != null) {
            this.afterload();
        }
    };
    // 打开窗口
    this.open = function () {
        if (this.method == "ajax") {
            var msgbox = this;
            $.post(this.url, this.para, function (msg) {
                msgbox.content = msg;
                msgbox.createmsg();
            });
        } else {
            this.createmsg();
        }
    };
    // 除了AJAX方式的其他获取数据方式
    this.getdate = function () {
        this.create();
    };
    // 创建窗口
    this.createmsg = function () {
        var _control = "";
        var _maxcontrol = "";
        if (this.canmin) {
            _control += "<div class=\"msgmin\" onclick=\"msgboxmanager.min('" + this.id + "');\"></div>";
        }
        if (this.canmax) {
            _control += "<div class=\"msgmax\" onclick=\"msgboxmanager.max('" + this.id + "');\"></div>";
        }
        if (this.canclose) {
            _control += "<div class=\"msgclose\" onclick=\"msgboxmanager.close('" + this.id + "','" + this.pid + "');\"></div>";
        }
        var _html = "<div class=\"msgbox\" onclick=\"msgboxmanager.retop('" + this.id + "');\" id=\"" + this.id + "\" ismax=\"false\" canmax=\"" + this.canmax + "\" canmin=\"" + this.canmin + "\" canclose=\"" + this.canclose + "\" showintask=\"" + this.showintask + "\">" + "<div class=\"msgboxtitle\" ondblclick=\"msgboxmanager.max('" + this.id + "')\" id=\"" + this.id + "title\">" + "<div class=\"msgboxtitletext\" ><img src=\"/images/ico/16/app" + this.ico + ".png\"> <span>" + this.title + "</span></div>" + "<div class=\"msgboxcontrol\">" + _control + "</div>" + "</div>" + "<div class=\"msgboxcontent\" id=\"" + this.id + "content\">" + this.content + "</div></div>";
        $("body").append(_html);
        this.setpostion();
        this.setevent();
    };};//窗口管理器
var msgboxmanager = function (me) {    me.init = function () {    }
    //置顶
    me.retop = function (id) {
        $("#" + id).css("z-index", parseInt(new Date().getTime() / 1000));
    }
    // 重置大小
    me.resizecontent = function (id) {
        var height = $("#" + id).height();
        $("#" + id + "content").height(height - 32); 
        $("#" + id + "content>.msgboxcontent_t").height(height - 101);
        $("#" + id + "content>.msgboxcontent_m").height(height - 60);
    }
    // 关闭窗口
    me.close = function (id, pid) {
        applactions.removerunapplaction(pid);
    };
    // 最大化窗口
    me.max = function (id) {
        var canmax = $("#" + id).attr("canmax");
        if (canmax == "true") {
            var ismax = $("#" + id).attr("ismax");
            if (ismax == "false") {
                var height = $(window).height() - 37;
                var width = $(window).width() - 14;
                $("#" + id).attr("owidth", $("#" + id).width());
                $("#" + id).attr("oheight", $("#" + id).height());
                $("#" + id).attr("oleft", $("#" + id).offset().left);
                $("#" + id).attr("otop", $("#" + id).offset().top);
                $("#" + id).width(width);
                $("#" + id).height(height);
                $("#" + id).offset({
                    left: 0, top: 0
                });
                $("#" + id).attr("ismax", "true");
                $("#" + id + "title").unbind();
            } else {
                var height = $("#" + id).attr("oheight");
                var width = $("#" + id).attr("owidth");
                var top = $("#" + id).attr("otop");
                var left = $("#" + id).attr("oleft");
                $("#" + id).width(width);
                $("#" + id).height(height);
                $("#" + id).offset({ top: top, left: left });
                $("#" + id).attr("ismax", "false");
                $("#" + id).easydrag();
                $("#" + id).setHandler(id + "title");
            }
            me.resizecontent(id);
        }
    };
    //最小化窗口
    me.min = function (id) {
        
        var ismax = $("#" + id).attr("ismax");
        var ismin = $("#" + id).attr("ismin");
        var height = $(window).height() - 37;
        var width = $(window).width() - 14;
        $("#" + id).css("z-index", parseInt(new Date().getTime() / 1000));
        if (ismin != "true") {
            var nwidth = $("#" + id).width();
            var nheight = $("#" + id).height();
            $("#" + id).animate({ width: "0", height: "0", left: 0, top: height, opacity: 'hide' }, 500);
            $("#" + id).attr("ismin", "true");
            
        } else {
            var oheight = "";
            var owidth = "";
            var otop = "";
            var oleft = "";
            if (ismax != "true") {
                oheight = $("#" + id).attr("oheight");
                owidth = $("#" + id).attr("owidth");
                otop = $("#" + id).attr("otop");
                oleft = $("#" + id).attr("oleft");
            } else {
                oheight = height;
                owidth = width;
                otop = 0;
                oleft = 0;
            }
            $("#" + id).animate({ width: owidth, height: oheight, left: oleft, top: otop, opacity: 'show' }, 500);
            $("#" + id).height("");
            $("#" + id).attr("ismin", "false");
            me.retop(id);
        }
    };    return me;
} (msgboxmanager || {});
$(function(){
msgboxmanager.init();
});

Answer 2

一起探讨下
整个框架 
逻辑和形式上 是不是可以先构建 services层
他们没有ui 但是是运行和存在的 负责和实现系统的底层操作
每个service可以是独立 或者依赖的 service类似于插件的机制 可以在需要的时候在远程加载运行
比如 一个ajax的service 可以通过他来 实现和外部url的交互
系统开始可以提供一些 必须的service实现了 service了 然后整个基础上 实现 application runtime ui 
然后所有运行的application。。等 必须是依赖service的

Answer 3

我做的不是这个思路
--------------------
分前端和后端吧，前端主要是JS.通过进程管理器管理进程，插件管理器管理插件。
至于程序，我自己开发了一个MVC框架，支持自己开发的DLL文件加载。那么，任何人只要能够按照规范去写，也是可以做成插件式的
数据主要是靠AJAX来取。

Answer 4

...
tab(arr,"btn_1");function tab(arr,showBtId){
var  nowshow=null;
var handler=null;
for(var i=0;i<arr.length;i++){
var bt=arr[i][0];
var tab=arr[i][1];
$(bt).onmouseover=(function(showbt){
return function(){
handler=setTimeout(function(){ active(showbt );},500);
}
})(bt);
$(bt).onmouseout=function(){
if(null!=handler){
clearTimeout(handler);
}
};
} active(showBtId); function active(btid){
for(var i=0;i<arr.length;i++){
var bt=arr[i][0];
var tab=arr[i][1]; var display=bt==btid;
$(tab).style.display=display?'block':'none';
$(bt).className=display?'se':'';
}
}
}
...