profilerviewer-beta-debug.js

这是YUI的源码及相关示例。里面有很多很炫的Javascript效果。

				Dom.removeClass(el, "yui-pv-minimized");
				this._toggleVisibleEl.innerHTML = PV.STRINGS.buttons.hideprofiler;
				
				//The Flash Charts component can't be set to display:none,
				//and even after positioning it offscreen the screen
				//may fail to repaint in some browsers.  Adding an empty
				//style rule to the console body can help force a repaint:
				Dom.addClass(el, "yui-pv-null");
				Dom.removeClass(el, "yui-pv-null");
				
				//Always refresh data when changing to visible:
				this.refreshData();
			}
		}
    };

    /**
     * Hides the viewer canvas.
     * @method hide
     * @return void
	 * @private
     */	
	proto._hide = function() {
		this._toggleVisibleEl.innerHTML = PV.STRINGS.buttons.viewprofiler;
		Dom.addClass(this.get("element"), "yui-pv-minimized");
    };
	
	/**
	 * Render the viewer canvas
	 * @method _render
	 * @return void
	 * @private
	 */
	proto._render = function() {
		YAHOO.log("Beginning to render ProfilerViewer canvas...", "info", "ProfilerViewer");
		
		Dom.removeClass(this.get("element"), "yui-pv-minimized");
		
		this._initViewerDOM();
		this._initDataTable();
		if(this.get("showChart")) {
			this._initChartDOM();
			this._initChart();
		}
		this._rendered = true;
		this._toggleVisibleEl.innerHTML = PV.STRINGS.buttons.hideprofiler;
		
		this.fireEvent("renderEvent");

		YAHOO.log("ProfilerViewer rendering complete...", "info", "ProfilerViewer");
	};
	
	/**
	 * Set up the DOM structure for the ProfilerViewer launcher.
	 * @method _initLauncherDOM
	 * @private
	 */
	proto._initLauncherDOM = function() {
		YAHOO.log("Creating the launcher...", "info", "ProfilerViewer");
		
		var el = this.get("element");
		Dom.addClass(el, PV.CLASS);
		Dom.addClass(el, "yui-pv-minimized");

		this._headEl = document.createElement("div");
		Dom.addClass(this._headEl, "hd");
		
		var s = PV.STRINGS.buttons;
		var b = (this.get("visible")) ? s.hideprofiler : s.viewprofiler;
		
		this._toggleVisibleEl = this._createButton(b, this._headEl);
		
		this._refreshEl = this._createButton(s.refreshdata, this._headEl);
		Dom.addClass(this._refreshEl, PV.CLASS_REFRESH);
		
		this._busyEl = document.createElement("span");
		this._headEl.appendChild(this._busyEl);

		var title = document.createElement("h4");
		title.innerHTML = PV.STRINGS.title;
		this._headEl.appendChild(title);
		
		el.appendChild(this._headEl);
		
		Event.on(this._toggleVisibleEl, "click", this._toggleVisible, this, true);
		Event.on(this._refreshEl, "click", function() {
			if(!this._busy) {
				this._setBusyState(true);
				this.fireEvent("dataRefreshEvent");
			}
		}, this, true);
	};

	/**
	 * Set up the DOM structure for the ProfilerViewer canvas,
	 * including the holder for the DataTable.
	 * @method _initViewerDOM
	 * @private
	 */
	proto._initViewerDOM = function() {
		YAHOO.log("Creating DOM structure for viewer...", "info", "ProfilerViewer");
		
		var el = this.get("element");
		this._bodyEl = document.createElement("div");
		Dom.addClass(this._bodyEl, "bd");
	 	this._tableEl = document.createElement("div");
		Dom.addClass(this._tableEl, PV.CLASS_TABLE);
		this._bodyEl.appendChild(this._tableEl);
		el.appendChild(this._bodyEl);
	};

	/**
	 * Set up the DOM structure for the ProfilerViewer canvas.
	 * @method _initChartDOM
	 * @private
	 */
	proto._initChartDOM = function() {
		YAHOO.log("Adding DOM structure for chart...", "info", "ProfilerViewer");
		
		this._chartContainer = document.createElement("div");
		Dom.addClass(this._chartContainer, PV.CLASS_CHART_CONTAINER);
		
		var chl = document.createElement("div");
		Dom.addClass(chl, PV.CLASS_CHART_LEGEND);
		
		var chw = document.createElement("div");

		this._chartLegendEl = document.createElement("dl");
		this._chartLegendEl.innerHTML = "<dd>" + PV.STRINGS.initMessage + "</dd>";
		
		this._chartEl = document.createElement("div");
		Dom.addClass(this._chartEl, PV.CLASS_CHART);
		
		var msg = document.createElement("p");
		msg.innerHTML = PV.STRINGS.installFlashMessage;
		this._chartEl.appendChild(msg);
		
		this._chartContainer.appendChild(chl);
		chl.appendChild(chw);
		chw.appendChild(this._chartLegendEl);
		this._chartContainer.appendChild(this._chartEl);
		this._bodyEl.insertBefore(this._chartContainer,this._tableEl);
	};


	/**
	 * Create anchor elements for use as buttons. Args: label
	 * is text to appear on the face of the button, parentEl
	 * is the el to which the anchor will be attached, position
	 * is true for inserting as the first node and false for
	 * inserting as the last node of the parentEl.
	 * @method _createButton
	 * @private
	 */	
	proto._createButton = function(label, parentEl, position) {
		var b = document.createElement("a");
		b.innerHTML = b.title = label;
		if(parentEl) {
			if(!position) {
				parentEl.appendChild(b);
			} else {
				parentEl.insertBefore(b, parentEl.firstChild);	
			}
		}
		return b;
	};
	
	/**
	 * Set's console busy state.
	 * @method _setBusyState
	 * @private
	 **/
	proto._setBusyState = function(b) {
		if(b) {
			Dom.addClass(this._busyEl, PV.CLASS_BUSY);
			this._busy = true;
		} else {
			Dom.removeClass(this._busyEl, PV.CLASS_BUSY);
			this._busy = false;
		}
	};

	/**
	 * Generages a sorting function based on current sortedBy
	 * values.
	 * @method _createProfilerViewerElement
	 * @private
	 **/
	proto._genSortFunction = function(key, dir) {
		var by = key;
		var direction = dir;
		return function(a, b) {
			if (direction == YAHOO.widget.DataTable.CLASS_ASC) {
				return a[by] - b[by];	
			} else {
				return ((a[by] - b[by]) * -1);
			}
		};
	};

	/**
	 * Utility function for array sums.
	 * @method _arraySum
	 * @private
	 **/	
	 var _arraySum = function(arr){
		var ct = 0;
		for(var i = 0; i < arr.length; ct+=arr[i++]){}
		return ct;
	};
	
	/**
	 * Retrieves data from Profiler, filtering and sorting as needed
	 * based on current widget state.  Adds calculated percentage
	 * column and function name to data returned by Profiler.
	 * @method _getProfilerData
	 * @private
	 **/
	proto._getProfilerData = function() {
		YAHOO.log("Profiler data requested from function DataSource.", "info", "ProfilerViewer");
		
		var obj = Profiler.getFullReport();
		var arr = [];
		var totalTime = 0;
		for (name in obj) {
    		if (YAHOO.lang.hasOwnProperty(obj, name)) {
				var r = obj[name];
				var o = {};
				o.fn = name; //add function name to record
				o.points = r.points.slice(); //copy live array
				o.calls = r.calls;
				o.min = r.min;
				o.max = r.max;
				o.avg = r.avg;
				o.total = _arraySum(o.points);
				o.points = r.points;
				var f = this.get("filter");
				if((!f) || (f(o))) {
					arr.push(o);
					totalTime += o.total;
				}
			}
		}
		
		//add calculated percentage column
		for (var i = 0, j = arr.length; i < j; i++) {
			arr[i].pct = (totalTime) ? (arr[i].total * 100) / totalTime : 0;	
		}

		var sortedBy = this.get("sortedBy");
		var key = sortedBy.key;
		var dir = sortedBy.dir;		

		arr.sort(this._genSortFunction(key, dir));
		
		YAHOO.log("Returning data from DataSource: " + YAHOO.lang.dump(arr), "info", "ProfilerViewer");
		
		return arr;
	};
	
	/**
	 * Set up the DataTable.
	 * @method _initDataTable
	 * @private
	 */
	proto._initDataTable = function() {
		YAHOO.log("Creating DataTable instance...", "info", "ProfilerViewer");
		
		var self = this;
		
		//Set up the JS Function DataSource, pulling data from
		//the Profiler.
		this._dataSource = new YAHOO.util.DataSource(
			function() {
				return self._getProfilerData.call(self);	
			},
			{
				responseType: YAHOO.util.DataSource.TYPE_JSARRAY,
				maxCacheEntries: 0
			}
		);
		var ds = this._dataSource;

		ds.responseSchema =
		{
			fields: [ "fn", "avg", "calls", "max", "min", "total", "pct", "points"]
		};
		
		//Set up the DataTable.
		var formatTimeValue = function(elCell, oRecord, oColumn, oData) {
			var a = (oData === Math.floor(oData)) ? oData : (Math.round(oData*1000))/1000;
			elCell.innerHTML = a + " " + PV.STRINGS.millisecondsAbbrev;
		};

		var formatPercent = function(elCell, oRecord, oColumn, oData) {
			var a = (oData === Math.floor(oData)) ? oData : (Math.round(oData*100))/100;
			elCell.innerHTML = a + "%";
		};
		
		var a = YAHOO.widget.DataTable.CLASS_ASC;
		var d = YAHOO.widget.DataTable.CLASS_DESC;
		var c = PV.STRINGS.colHeads;
		var f = formatTimeValue;
		
		var cols = [
			{key:"fn", sortable:true, label: c.fn[0],
				sortOptions: {defaultDir:a}, 
				resizeable: (YAHOO.util.DragDrop) ? true : false,
				minWidth:c.fn[1]},
			{key:"calls", sortable:true, label: c.calls[0],
				sortOptions: {defaultDir:d},
				width:c.calls[1]},
			{key:"avg", sortable:true, label: c.avg[0],
				sortOptions: {defaultDir:d},
				formatter:f,
				width:c.avg[1]},
			{key:"min", sortable:true, label: c.min[0],
				sortOptions: {defaultDir:a},
				formatter:f,
				width:c.min[1]}, 
			{key:"max", sortable:true, label: c.max[0],
				sortOptions: {defaultDir:d},
				formatter:f,
				width:c.max[1]},
			{key:"total", sortable:true, label: c.total[0],
				sortOptions: {defaultDir:d},
				formatter:f,
				width:c.total[1]},
			{key:"pct", sortable:true, label: c.pct[0],
				sortOptions: {defaultDir:d}, 
				formatter:formatPercent,
				width:c.pct[1]}
		];

		this._dataTable = new YAHOO.widget.DataTable(this._tableEl, cols, ds, {
			scrollable:true,
			height:this.get("tableHeight"),
			initialRequest:null,
			sortedBy: {
				key: "total",
				dir: YAHOO.widget.DataTable.CLASS_DESC
			}
		});
		var dt = this._dataTable;

		//Wire up DataTable events to drive the rest of the UI.
		dt.subscribe("sortedByChange", this._sortedByChange, this, true);
		dt.subscribe("renderEvent", this._dataTableRenderHandler, this, true);
		dt.subscribe("initEvent", this._dataTableRenderHandler, this, true);
		Event.on(this._tableEl.getElementsByTagName("th"), "click", this._thClickHandler, this, true);
		YAHOO.log("DataTable initialized.", "info", "ProfilerViewer");
	};
		
	/**
	 * Proxy the sort event in DataTable into the ProfilerViewer
	 * attribute.
	 * @method _sortedByChange
	 * @private
	 **/
	proto._sortedByChange = function(o) {
		YAHOO.log("Relaying DataTable sortedBy value change; new key: " + o.newValue.key + "; new direction: " + o.newValue.dir + ".", "info", "ProfilerViewer");
		this.set("sortedBy", {key: o.newValue.key, dir:o.newValue.dir});
	};

	/**
	 * Proxy the render event in DataTable into the ProfilerViewer
	 * attribute.
	 * @method _dataTableRenderHandler
	 * @private
	 **/
	proto._dataTableRenderHandler = function(o) {
		YAHOO.log("DataTable's render event has fired.", "info", "ProfilerViewer");
		this._setBusyState(false);
	};
	
	/**
	 * Event handler for clicks on the DataTable's sortable column
	 * heads.
	 * @method _thClickHandler
	 * @private
	 **/
	proto._thClickHandler = function(o) {
		YAHOO.log("DataTable's header row was clicked for sorting.", "info", "ProfilerViewer");
		this._setBusyState(true);
	};

	/**
	 * Refresh DataTable, getting new data from Profiler.
	 * @method _refreshDataTable
	 * @private
	 **/
	proto._refreshDataTable = function(args) {
		YAHOO.log("Beginning to refresh DataTable contents...", "info", "ProfilerViewer");
		var dt = this._dataTable;
		dt.getDataSource().sendRequest("", dt.onDataReturnInitializeTable, dt);
		YAHOO.log("DataTable refresh complete.", "info", "ProfilerViewer");
	};

	/**
	 * Refresh chart, getting new data from table.
	 * @method _refreshChart
	 * @private
	 **/
	proto._refreshChart = function() {
		YAHOO.log("Beginning to refresh Chart contents...", "info", "ProfilerViewer");
		
		switch (this.get("sortedBy").key) {
			case "fn":
				/*Keep the same data on the chart, but force update to 
				  reflect new sort order on function/method name: */