首先声明，我是一个菜鸟。一下文章中出现技术误导情况盖不负责
Fixjs分析
Fixjs是我打算在javascript技术范畴开始积聚的一个框架项目，这套框架主要为开发庞杂组件供给底层的框架支持。
框架的类与接口我会尽量参考flash框架的实现。同时，我也会开放Fixjs的源代码，欢送同仁一起学习、交流。
DisplayObject
在flash中，DisplayObject是最基础的显示基类，它定义了布局的基本属性和方法，在组件开发范畴，绝对定位布局是非常重要的。
我引入了jQuery停止DOM元素的操作，能够简化代码又能够处理浏览器的兼容问题，以下是Fixjs中DisplayObject的构造函数。
init: function (ele) {
fixjs.display.DisplayObject.base.init.call(this, this);
this.ele = ele;
this.ele.fixjsObj = this;
$(this.ele).css({ "padding": "0", "margin":"0", "border":"0", "width":"0", "height":"0",
"position":"absolute", "top": "0","left": "0","overflow": "visible"
});
this.stage = null; //to do...
this.parent = null; //to do...
this.name = null;
this.x = 0;
this.y = 0;
this.width = 0;
this.height = 0;
this.visible = true;
this.alpha = 1;
}
通过外部传入DOM节点ele，在DisplayObject内部停止封装，Displayobject通过ele能够拜访DOM节点，DOM节点通过ele的fixjsObj属性又能够拜访DisplayObject。
this.ele = ele;
this.ele.fixjsObj = this;
然后定义了x,y,width,height等重要的布局属性，属性的读取好办直接拜访即可。但是设置属性则庞杂些，要用function来实现属性设置。
setX: function (val) {
if (this.x == val)
return false;
this.x = val;
$(this.ele).css("left", val + "px");
return true;
}
上述代码是常见的属性处置，先判断属性值与新值是否相称，然后才赋值，许多场所还需要派发属性转变的事件、执行更多操作等。
DisplayObject要支持事件派发，所以，它继承于EventDispatcher，以下是DisplayObject的完全实现。
fixjs.display.DisplayObject = fixjs.events.EventDispatcher.extend({
init: function (ele) {
fixjs.display.DisplayObject.base.init.call(this, this);
this.ele = ele;
this.ele.fixjsObj = this;
$(this.ele).css({ "padding": "0", "margin":"0", "border":"0", "width":"0", "height":"0",
"position":"absolute", "top": "0","left": "0","overflow": "visible"
});
this.stage = null; //to do...
this.parent = null; //to do...
this.name = null;
this.x = 0;
this.y = 0;
this.width = 0;
this.height = 0;
this.visible = true;
this.alpha = 1;
},
disposing: function() {
this.ele.fixjsObj = null;
this.ele = null;
fixjs.display.DisplayObject.base.disposing.call(this);
},
clone: function() {
throw new Error("[fixjs.display.DisplayObject.clone] is not implements!");
},
getStyle: function (name) {
return $(this.ele).css(name);
},
setStyle: function (name, val) {
return $(this.ele).css(name, val);
},
setStyles: function (obj) {
return $(this.ele).css(obj);
},
setX: function (val) {
if (this.x == val)
return false;
this.x = val;
$(this.ele).css("left", val + "px");
return true;
},
setY: function (val) {
if (this.y == val)
return false;
this.y = val;
$(this.ele).css("top", val + "px");
return true;
},
move: function(x, y) {
this.setX(x);
this.setY(y);
},
setWidth: function (val) {
if (this.width == val)
return false;
this.width = val;
$(this.ele).css("width", val + "px");
return true;
},
setHeight: function (val) {
if (this.height == val)
return false;
this.height = val;
$(this.ele).css("height", val + "px");
return true;
},
resize: function(x, y) {
this.setWidth(x);
this.setHeight(y);
},
setAlpha: function (val) {
if (this.alpha == val)
return false;
this.alpha = val;
$(this.ele).css("opacity", val);
return true;
},
setVisible: function (val) {
if (this.visible == val)
return false;
this.visible = val;
if (val)
$(this.ele).css("visibility","visible");
else
$(this.ele).css("visibility","hidden");
return true;
},
hitTestPoint: function (x, y) {
var r = this.x + this.width;
var b = this.y + this.height;
return this.x <= x && x <= r &&this.y <= y&& y <= b;
},
hitTestObject: function (obj) {
var x1 = this.x;
var y1 = this.y;
var w1 = this.width;
var h1 = this.height;
var x2 = obj.x;
var y2 = obj.y;
var w2 = obj.width;
var h2 = obj.height;
var minX = x1 > x2 ? x1 : x2;
var minY = y1 > y2 ? y1 : y2;
var maxX = (x1 + w1) > (x2 + w2) ? (x2+ w2) : (x1 + w1);
var maxY = (y1 + h1) > (y2 + h2) ? (y2 + h2) : (y1 + h1);
return minX<= maxX && minY<= maxY;
},
localToGlobal: function (point) {
var p = $(this.ele).offset();
return new fixjs.geom.Point(p.left + point.x, p.top + point.y);
},
globalToLocal: function (point) {
var p = $(this.ele).offset();
return new fixjs.geom.Point(point.x - p.left, point.y - p.top);
}
});
相关文章
作者推荐
MyReport：一款非常适用的报表引擎插件，供给Web报表设计、展现、打印、导出等功能集，集成简略。
文章结束给大家分享下程序员的一些笑话语录：
人工智能今天的发展水平：8乘8的国际象棋盘其实是一个体现思维与创意的强大媒介。象棋里蕴含了天文数字般的变化。卡斯帕罗夫指出，国际象棋的合法棋步共有1040。在棋局里每算度八步棋，里面蕴含的变化就已经超过银河系里的繁星总数。而地球上很少有任何数量达到这个级别。在金融危机之前，全世界的财富总和大约是1014人民币，而地球人口只有1010。棋盘上，所有可能的棋局总数达到10120，这超过了宇宙里所有原子的总数！经典语录网