xiaofan写WebQQ(2012.7.13更新1.2源码)

去年开始研究WEBQQ 从腾讯网站开始一点一点扒加理解自己捉摸 也有1年了 遇到问题就去找些案列。
也关注网上和论坛写的webos也很多。
iteye论坛里的各种大牛写的 都比较NB 。
但最开始茅塞顿开还是1kjs的作者写的webQQ 顿时开始膜拜。。。之后就一直研究
艺术人生的athene-ui 的webos 结合后台一整套 也很NB。还有很多不例举了。
后来模拟1kjs的webos写了个1.0个版本 当时觉得也是各种模仿 没什么原创东西 东拼拼西凑凑 分享下
当时只是在DWZ-jui2群分享了 后来再网上看到有人卖我写那套源码 ╮(╯▽╰)╭哎 无奈。
还是把自己学习到的技术分享下 写给那些看到大牛代码却不知道咋回事的人 陆续分享个人理解的技术点
希望对喜欢的朋友有帮助 代码就不放网上了。
首先说下 最近写的webos1.3
整体采用seajs + jquery+ jquery相关插件
seajs js模块化的高富帅..有兴趣的朋友可以关注下..
jquery不说了
相关插件
Jquery powerFloat 浮动层插件 http://www.zhangxinxu.com/wordpress/?p=1328
artDialog 4.1.2 个人修改版 加了最大最小化
smartMenu 右键
我先说说我研究到的层度 （不考虑IE系）
整体布局 拖拽 自适应 桌面切换 换背景图片 全局展示 好像也没啥了 O(∩_∩)O
其实WEBQQ 细扣里面很多东西 包括后台技术 前台整体架构 .. 感觉深扣也挺累 可能自己水平有限
陆续我会更新技术点 ：）






已上传源码.

先看WEBQQ的结构 firefox打开webqq 主体是<div id="desktop"></div>一个全屏的DIV
内部主要影响布局的是rightbar leftbar topbar bottombar 上下左右bar  和desktopWrapper
采用的决对定位 宽度都是sidebar 的宽 是73px.其实当你拖拽侧边栏时候 就是他们几个在变化style。
然后看下desktopWrapper 也就是主桌面 他里面是5个层 最外层desktopsContainer class 是一个left 0的DIV 其他尺寸其实是动态算出来的 内部desktopContainer是left 2000的决定定位的层 。
这就好理解他的桌面切换原理了  其实就是向左移动2000 然后再消失一个2000的层




再看下WEBQQ的图标 是什么东西 appButton class 是一个绝对定位
你查看那个应用市场 他后面加了2个class  appMarket not_deleteable 大概意思不让你动它
其样式 也是采用绝对定位的 js算出来的.
id="alloy_icon_app_2534_74" class="appButton " appid="2534" fileid="2534" type="app" uid="app_2534"
再看看他的属性 id 不解释了 appid 应用ID fileidID 其实跟ID一样 具体应该某个业务中用到 type 是这个图标的类型 还有dir 就是桌面那个文件夹类型 






然后看下 这2个东西 一个是导航上的搜索 一个是全局视图 他都是动态生成出来的 。




看下DOM 里面的方法 好多好多 可见 其实里面的细节东西有多少 我也就模拟下简单的效果


WEBQQ是JX写的嘛 这个东西 网上资料也不多 也是个模块化的东西 我们用seajs模拟它
先导入seajs

<script src="seajs/sea.js" type="text/javascript" charset="utf-8" data-main="./js/main"></script>

data-main是你要加载的主方法引用js下的main.js

/**
 * seajs 全局配置
 */
seajs.config({
    base:"./js" ,//这是跟路径 他是相对于main.js  
    alias: {     //alias 是一个命名缩写 这里把jqueryUI 和Jh.js引用 进来
        "jqueryUI": "jquery-ui-1.8.21.custom.min",
	"Jh" :"Jh.js"		
    },
    charset: "utf-8",
    debug :true
});

seajs全局配置

seajs.use([
	"./css/main.css", //主css
	"./css/themesetting.css",//主题css
	"./css/skins/black.css",//这个artdialog的样式
	"./css/powerFloat.css",//浮动层样式
	"./css/smartMenu.css",// 右键样式
]);

引用整个样式 这里我把整个需要的都引进来

/***
 * 初始化数据
 * @param {Object} require
 * @param {Object} exports
 */
define(function(require, exports){
    require("Jh");//加载js
    require("jqueryUI");//加载jqueryui
    	
    require.async("core/DeskTop",function(){//加载Desktop.js 
		 Jh.XF.DeskTop.init();	
    });
   
});

require的路径不用写.js 后缀 async 是一个异步加载 可以执行回调
先看下Jh.js

/****************************************************************************
 * ------------------------------------------------------------------------------------
 * Life missed Forever I wish happiness often accompanied I Love You JH 
 * ------------------------------------------------------------------------------------
 * WebOS
 * @author yelingfeng
 * @verson 1.3 seajs 版
 * @Email yelingfeng521@gmail.com
 * @date 2012.7
 */


	var Jh = window.Jh = {};
	
	Jh.dataCache = {};
	/**
	 * YUI命名空间
	 */
	Jh.namespace = function(str) {
		var a = arguments, o, i = 0, j, d, arg;
		for (; i < a.length; i++) {
			o = this;
			arg = a[i];
			if (arg.indexOf(".") > -1) {
				d = arg.split(".");
				for (j = (d[0] == 'Jh') ? 1 : 0; j < d.length; j++) {
					o[d[j]] = o[d[j]] || {};
					o = o[d[j]];
				}
			} else {
				o[arg] = o[arg] || {};
				o = o[arg];
			}
		}
		return o;
	};

	/**
	 * Der修正版 微型模板引擎 tmpl 方式：直接传入模板：(可以随心所欲的使用js原生语法) var demoTmpl = '<ol
	 * title="<#= name#>">' + '<# for (var i = 0, l = list.length; i < l; i
	 * ++) { #>' + '
	 * <li><#= list[i] #></li>' + '<# } #>' +'
	 * </ol>'; var render = tmpl(demoTmpl); render({name: 'demo data', list:
	 * [202, 96, 133, 134]});
	 * 
	 * 缓存交给外部对象控制，如例二中的 render 变量。
	 * 
	 * @blog http://www.planeart.cn/?p=1594
	 * @see http://ejohn.org/blog/javascript-micro-templating/
	 * @param {String}
	 *            模板内容或者装有模板内容的元素ID
	 * @param {Object}
	 *            附加的数据
	 * @return {String} 解析好的模板
	 */
	Jh.tmpl = (function(cache, $) {
		return function(str, data) {
			var fn = function(data) {
				var i, variable = [ $ ], value = [ [] ];
				for (i in data) {
					variable.push(i);
					value.push(data[i]);
				}
				;
				return (new Function(variable, fn.$)).apply(data, value).join("");
			};

			fn.$ = fn.$
					|| $
					+ ".push('"
					+ str.replace(/\\/g, "\\\\").replace(/[\r\t\n]/g, " ")
							.split("<#").join("\t").replace(/((^|#>)[^\t]*)'/g,
									"$1\r").replace(/\t=(.*?)#>/g, "',$1,'")
							.split("\t").join("');").split("#>").join(
									$ + ".push('").split("\r").join("\\'")
					+ "');return " + $;

			return data ? fn(data) : fn;
		}
	})({}, '$' + (+new Date));

	Jh.XF = {

		/**
		 * 默认配置参数 包括样式和一些基础变量 d 桌面 s 侧边栏 app 应用 n 导航
		 * 
		 * @name | options
		 */
		options : {
			id : "desktop", // 桌面ID			
			d_Wrp : "desktopWrapper", // 桌面Warpper Class
			d_Cts : "desktopsContainer", // 桌面外容器 Class
			d_Ct : "desktopContainer", // 桌面内容器 Class
			d_Apl : "appListContainer", // 桌面应用容器 Class
			d_Cur : "desktop_current" // 桌面当前层 Class
		},
		Func: {
			/** 
			 * 往BODY 添加html
			 * @param {Object} obj
			 */
			addBody: function(obj){
				$("body").append(obj);
			},
			
			/**
			 *  清除选中 
			 */
			unSelecte: function(){
				return window.getSelection ? function(){
					window.getSelection().removeAllRanges();
				} : function(){
					document.selection.empty();
				};
			}(),
			
			/**
			 * 格式化模板
			 * @param {string} str 要处理的字符串
			 * @param {object} model 要匹配的json对象
			 */
			format: function(str, model){
				var render = Jh.tmpl(str);
				return render(model);
			}
			
			
		}
	}

Jh.js 是一个小工具库 主要有命名空间 模板 和 简单的配置项
因为没用seajs之前我是用的命名空间模式写了一套了 所以没完全按seajs的风格写 保留原来的东西
有点不伦不类吧


core/Desktop

/**
 * 桌面
 * @name desktop
 *
 */
define(function(require){
 
 Jh.namespace("XF.DeskTop");
 Jh.XF.DeskTop =(function(){

	var _box = $( "<div id="+Jh.XF.options.id+"  style='position: static;' ></div>" ),
	    _zoom = '<div id="'+Jh.XF.options.z_Wall+'" class="'+Jh.XF.options.z_Wall+'"    style="position: absolute; z-index: -10; left: 0pt; top: 0pt; overflow: hidden;">'+
				  '<img id="'+Jh.XF.options.z_WallPaper+'" class="'+Jh.XF.options.z_WallPaper+'" style="position: absolute; top: 0pt; left: 0pt; " src="images/bg/midAutumn.jpg">'+
				'</div>',				
	    _addPanel  = function( obj ){
			_box.append( obj );
		},	
		_move = function(evt){
			window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
		},
		_up = function(evt){
			$(document).off('mousemove',move).off('mouseup',up);
		},
		_create = function(){		
			Jh.XF.Func.addBody(_box[0]);
			Jh.XF.Func.addBody(_zoom);
		},
		_bind = function(){
			$(document).on({
				'mousedown':_move	
			},function(){
				$(document).on({
				   'mousemove':_move,
				   'mouseup'  :_up
				});
			});
		
		};

	return  {
			init :function(){
			   _create();
			   _bind();	
			},	
			show : function(){
				_box.show();
			},
			hide : function(){
				_box.hide();
			},
			addPanel : function(obj){			
				_addPanel(obj);
			}
		};
	
	})();
});

Desktop是一个主体方法了 这个函数也是一个模板 其他的基本都是这个风格 就可以写一个主键了
首先他是一个闭包的写法 先定义一些变量和方法 然后return 对外的一些函数 函数执行完 就立刻执行了
把它存进Jh里
zoom 是背景图片切换层 在这里就先初始化了 。
先写到这里。。。

不传点东西 好像也没人回复 ╮(╯▽╰)╭
项目已打包 eclipse3.4 工程 有兴趣的 其实可以按此模式继续写 

既然是开源，为什么把内容删去呢？

支持楼主！支持开源！支持分享。如果人人都有一颗开源的心，中国的IT将更完美。

index.html几乎为空

开源这东西。。在天朝。。实现很难。而且。打着开源的旗号。是否会真的开源？

坑爹，一点效果都看不到！

我可以分享旧版 效果都一样 要源码的 可以留下邮箱 要不站内我也可以

一天更新点 请理解我 

22287775@qq.com
给我发一份，我研究很久了。

谢谢。

314956663@qq.com 给我发一份 谢谢