?

好久沒在首頁發點東西了,昨天在js上依照wpf中依賴屬性的思想嘗試寫了基本的功能.這里拿出來與大家分享

?

Demo1 注冊依賴屬性

step1 定義一個函數

function Person() {this.render = function () { } };

step2 注冊依賴屬性

第三個參數是屬性變更回調

dp.reg(Person, "name", "terry", function (obj) {obj.render();alert(obj.oldValue);alert(obj.newValue); });

setp3 修改依賴屬性值

上面的回調方法觸發了,至于具體這個功能用在什么場合,你懂的

dp.setValue(entity, "name", "zhang");

Demo2 注冊只讀依賴屬性

下面的回調方法將會觸發

dp.regReadOnly(Person, "sex", "boy", function (obj) {alert(obj.newValue); });

另外還可以添加一個屬性驗證回調,如下,因為年齡不可能小于0

dp.reg(Person, "age", 25, function (obj) { }, function (value) {if (value < 1)return 1;return value; });

Demo3 讀寫依賴屬性

用setValue和getValue方法

var entity = new Person();dp.getValue(entity, "age") dp.setValue(entity, "name", "xinghao");

Demo4 默認屬性值

在注冊依賴屬性時就有一個默認的值,可通過下面方法查看和恢復默認值

dp.getDefaultValue(entity, "name"); dp.clearValue(entity, "name");

Demo5 注銷依賴屬性

dp.unreg("Person", "name");

說明:以上通過依賴屬性注冊的屬性不會存在原有對象中,即注冊了Person,但不會影響Person本身對象.那么久是說依賴屬性是一個可插拔的功能.如果你還沒有過這種屬性定義的嘗試的話，那么來試一下吧。我將繼續完善其功能，并與大家分享(假設你還沒有依賴屬性的概念,也可以嘗嘗鮮)

最后奉上完整代碼,尚未完善,大家提意見吧

(function (container) {var ORIGINAL_TYPE = "originalType",PREFIX = "dp"//utilityfunction getPropName(obj) {return PREFIX + obj.originalType;}function getFnName(obj) {var fundoc = obj.prototype ? obj.toString() : obj.constructor.toString(),funcName = fundoc.split('(')[0].split(' ')[1];return funcName;}var dpos = [];container.dp = {};function propertyMetadata(propertyName, defaultValue, propertyChangedCallback) {this.PropertyName = propertyName;this.DefaultValue = defaultValue;this.PropertyChangedCallback = propertyChangedCallback;};propertyMetadata.prototype = {PropertyName: "",isReadOnly: false,Value: undefined,DefaultValue: undefined,CoerceValueCallback: undefined,PropertyChangedCallback: function () { }};function dpObject(entity) {this.objectType = entity;this.dmps = {};};dpObject.prototype = {addDmp: function (propertyName, defaultValue, propChanged, coerceValueCallback) {if (this.dmps[propertyName]) return;var dmp = new propertyMetadata(propertyName, defaultValue, propChanged);dmp.CoerceValueCallback = coerceValueCallback;this.dmps[propertyName] = dmp;return dmp;},getDmpCount: function () {return this.dmps.lenth;},getPropValue: function (propertyName,prop) {var dmp = this.dmps[propertyName];return dmp[prop];},getDmp: function (propertyName) {return this.dmps[propertyName];},clearDmp: function (propertyName) {this.dmps[propertyName] = undefined;delete this.dmps[propertyName];},setValue: function (obj, prop, newValue) {var dmp = this.dmps[prop];if (!dmp || dmp.isReadOnly) return;var oldValue = dmp.Value || dmp.DefaultValue;if (dmp.CoerceValueCallback)newValue = dmp.CoerceValueCallback(newValue);if (newValue !== oldValue)dmp.Value = newValue;if (dmp.PropertyChangedCallback) {var changedArgs = { obj: obj, prop: prop, oldValue: oldValue, newValue: newValue }dmp.PropertyChangedCallback(changedArgs);}},getValue: function (prop) {var dmp = this.dmps[prop];return dmp.Value ? dmp.Value : dmp.DefaultValue;},getDefaultValue: function (prop) {var dmp = this.dmps[prop];return dmp.DefaultValue;},clearValue: function (prop) {var dmp = this.dmps[prop];dmp.Value = undefined;}};dp.unReg = function (obj, prop) {var className = getFnName(obj),dpo = dpos[className];dpo.clearDmp(prop);};dp.isReged = function (obj, prop) {var className = getFnName(obj),dpo = dpos[className];if (!prop)return dpo.getDmpCount() > 0;return dpo.getDmp(prop) == undefined;};dp.isReadOnly=function(obj,prop) {var dpo = getDpo(obj);return dpo.getPropValue(prop, "isReadOnly");};dp.reg = function (obj, prop, value, propChanged, coerceValueCallback, isReadOnly) {var className = getFnName(obj),dpo = dpos[className] = dpos[className] || new dpObject(className);dpo.addDmp(prop, value, propChanged, coerceValueCallback);if (isReadOnly) {var dmp = dpo.getDmp(prop);dmp.isReadOnly = true;}};dp.regReadOnly = function (obj, prop, value, propChanged, coerceValueCallback) {dp.reg(obj, prop, value, null, null, true);};function getDpo(obj) {var className = getFnName(obj),dpo = dpos[className];return dpo;};dp.setValue = function (obj, prop, value) {var dpo = getDpo(obj);dpo.setValue(obj, prop, value);};dp.getValue = function (obj, prop) {var dpo = getDpo(obj);return dpo.getValue(prop, value);};dp.getDefaultValue = function (obj, prop) {var dpo = getDpo(obj);return dpo.getDefaultValue(prop);};dp.clearValue = function (obj, prop) {var dpo = getDpo(obj);dpo.clearValue(prop);};})(window);function Person() {this.render = function () { } };dp.reg(Person, "name", "terry", function (obj) {obj.render();alert(obj.oldValue);alert(obj.newValue); });dp.setValue(entity, "name", "zhang");dp.reg(Person, "age", 25, function (obj) { }, function (value) {if (value < 1)return 1;return value; });dp.regReadOnly(Person, "sex", "boy", function (obj) {alert(obj.newValue); });dp.setValue(entity, "age", -1);var entity = new Person();dp.getValue(entity, "age") dp.setValue(entity, "name", "xinghao"); alert(dp.isReged(entity); alert(dp.getValue(entity, "name")); dp.getDefaultValue(entity, "name"); dp.clearValue(entity, "name"); alert(dp.getValue(entity, "name")); dp.unreg("Person", "name"); dp.setValue(entity, "name", "zhang");

總結

以上是生活随笔為你收集整理的javascript中依赖属性(Dependency Property)的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。