three.js 场景编辑器源码解析（十五）

最新推荐文章于 2024-12-28 15:00:03 发布

原创

最新推荐文章于 2024-12-28 15:00:03 发布 · 999 阅读

2 ·

CC 4.0 BY-SA版权

本文深入讲解了一个UI封装库的设计与实现，包括基本元素构造、事件绑定、样式设置及多种UI组件如按钮、输入框、下拉菜单等的具体实现。

本章讲解编辑器的ui封装文件editor\js\libs\ui.js,这个文件主要是对dom节点进行了封装，dom的样式的封装，对dom的事件进行封装。

//ui库
var UI = {};

//element构造函数，所有ui的父类，共享父类的原型
//封装了整个的ui
UI.Element = function ( dom ) {
	this.dom = dom;
};

//原型
UI.Element.prototype = {
	//添加子节点
	add: function () {

		for ( var i = 0; i < arguments.length; i ++ ) {

			var argument = arguments[ i ];

			if ( argument instanceof UI.Element ) {
				//添加节点
				this.dom.appendChild( argument.dom );

			} else {

				console.error( 'UI.Element:', argument, 'is not an instance of UI.Element.' );

			}

		}

		return this;

	},
	//移除节点
	remove: function () {

		for ( var i = 0; i < arguments.length; i ++ ) {

			var argument = arguments[ i ];

			if ( argument instanceof UI.Element ) {
				//删除节点
				this.dom.removeChild( argument.dom );

			} else {

				console.error( 'UI.Element:', argument, 'is not an instance of UI.Element.' );

			}

		}

		return this;

	},
	//清空所有的子节点
	clear: function () {

		while ( this.dom.children.length ) {
			//清空节点
			this.dom.removeChild( this.dom.lastChild );

		}

	},
	//设置dom的id
	setId: function ( id ) {
		//设置节点id
		this.dom.id = id;

		return this;

	},

	//设置dom的class
	setClass: function ( name ) {
		this.dom.className = name;

		return this;

	},

	//设置样式
	setStyle: function ( style, array ) {

		for ( var i = 0; i < array.length; i ++ ) {
			//设置节点的样式
			this.dom.style[ style ] = array[ i ];

		}

		return this;

	},

	//设置禁用、启用状态
	setDisabled: function ( value ) {
		//节点的启用和禁用
		this.dom.disabled = value;

		return this;

	},

	//设置div内容
	setTextContent: function ( value ) {
		//设值节点的文本
		this.dom.textContent = value;

		return this;

	}

};

// properties
//定义ui所能改变的样式
var properties = [ 'position', 'left', 'top', 'right', 'bottom', 'width', 'height', 'border', 'borderLeft',
	'borderTop', 'borderRight', 'borderBottom', 'borderColor', 'display', 'overflow', 'margin', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'padding', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'color',
	'background', 'backgroundColor', 'opacity', 'fontSize', 'fontWeight', 'textAlign', 'textDecoration', 'textTransform', 'cursor', 'zIndex' ];

properties.forEach( function ( property ) {

	//setPosition
	var method = 'set' + property.substr( 0, 1 ).toUpperCase() + property.substr( 1, property.length );

	//原型中添加方法UI.Element.setPosition
	//设置样式
	UI.Element.prototype[ method ] = function () {
		//这个this应该是代表的element
		this.setStyle( property, arguments );

		return this;

	};

} );

// events
//定义ui所能触发的事件
var events = [ 'KeyUp', 'KeyDown', 'MouseOver', 'MouseOut', 'Click', 'DblClick', 'Change' ];

events.forEach( function ( event ) {

	var method = 'on' + event;

	//为以上事件添加处理函数
	UI.Element.prototype[ method ] = function ( callback ) {
		//在dom中添加事件
		//this指向UI.Element本身，callback.bind绑定callback中的this指向elememnt
		this.dom.addEventListener( event.toLowerCase(), callback.bind( this ), false );

		return this;

	};

} );

// Span

UI.Span = function () {

	UI.Element.call( this );

	this.dom = document.createElement( 'span' );

	return this;

};
//使用父类的原型构造自己的原型
UI.Span.prototype = Object.create( UI.Element.prototype );
//设置构造函数
UI.Span.prototype.constructor = UI.Span;

// Div

UI.Div = function () {

	UI.Element.call( this );

	this.dom = document.createElement( 'div' );

	return this;

};

UI.Div.prototype = Object.create( UI.Element.prototype );
UI.Div.prototype.constructor = UI.Div;

// Row
//row构造函数
UI.Row = func