屬性 · NativeScript 中文文檔

# **屬性** 本文包括： * [概覽](http://docs.nativescript.org/core-concepts/properties#overview) * [依賴屬性](http://docs.nativescript.org/core-concepts/properties#dependency-properties) * [Introduction](http://docs.nativescript.org/core-concepts/properties#intro1) * [Declaring a dependency property](http://docs.nativescript.org/core-concepts/properties#declaring) * [Adding a changed callback](http://docs.nativescript.org/core-concepts/properties#changedCallback) * [Adding a validation callback](http://docs.nativescript.org/core-concepts/properties#validationCallback) * [Creating an inheritable dependency property](http://docs.nativescript.org/core-concepts/properties#inheritable) * [樣式屬性](http://docs.nativescript.org/core-concepts/properties#style-properties) * [Introduction](http://docs.nativescript.org/core-concepts/properties#intro2) * [Setting a style property](http://docs.nativescript.org/core-concepts/properties#setting) ## 概覽作為一個 TypeScript 框架， NativeScript 使用 TypeScript 屬性。轉譯之后，這些ES5格式的結果兼容JavaScript的setter和getter方法支持類成員的工作，從而保證可讀和可管理的代碼。示例1中的代碼演示了如何 TypeScript 轉換為JavaScript。 ### [**示例 1: TypeScript 如何轉換成JavaScript.**](http://docs.nativescript.org/core-concepts/properties#example-1-how-typescript-is-transformed-to-javascript) > ### TS > > --- > > `export class MyClass {` > > `private _myProperty: number;` > > `public get myProperty(): number { return this._myProperty; }` > > `public set myProperty(value: number) { this._myProperty = value; }` > > `}` > > ### JS > > --- > > `var MyClass = (function () {` > > `function MyClass() { }` > > `Object.defineProperty(MyClass.prototype, "myProperty", {` > > `get: function () { return this._myProperty; },` > > `set: function (value) { this._myProperty = value; },` > > `enumerable: true,` > > `configurable: true` > > `});` > > `return MyClass;` > > `})();` > > `exports.MyClass = MyClass;` TypeScript 轉譯器由一個grunt 腳本支持運行。 NativeScript有兩種類型的屬性： **dependency properties依賴屬性** 和 **style properties樣式屬性**.。每種類型都會在后面部分介紹。 ## [**依賴屬性**](http://docs.nativescript.org/core-concepts/properties#dependency-properties) ### **說明** 依賴屬性提供了有價值的功能，簡化了創建一個豐富的UI（用戶界面），包括： * **內存優化**：創建一個豐富的自定義用戶界面控件不免要創建數量眾多的屬性，其中大部分都使用默認值。用傳統的方法，你最終得到的每一個屬性都有一個**私域**。使用依賴屬性，你只需存儲你修改過的實例屬性。默認值存儲在依賴屬性中。此外，依賴屬性在類外部被聲明為靜態，這更有助于優化內存占用。 * **值驗證**：依賴屬性提供業務邏輯驗證。其實現是作為一個專門的驗證回調函數，以**新值**為參數，并根據值有效或者無效分別返回真和假。 * **變更通知**：當屬性值改變時，另一個回調函數被調用。它用一個 [EventData](http://docs.nativescript.org/api-reference/interfaces/_data_observable_.eventdata.html) 作為參數被調用。 * **繼承**：依賴屬性的一個最重要的特性就是繼承。它是通過一個專用的UI元素來實現的，該元素允許它從視覺樹中的父元素得到它的屬性。例如，一個按鈕可以從父窗口，布局，或其他容器繼承它的樣式（或主題）屬性值。這給了你一個選項，通過只改變一個單一的設置（ Window.theme ），戲劇性地改變你整個應用的外觀。 ### **聲明一個依賴屬性** 只有從 [DependencyObservable](http://docs.nativescript.org/api-reference/classes/_ui_core_dependency_observable_.dependencyobservable.html) 派生的類可以擁有一個依賴屬性。這個類有內置的方法，來支持依賴屬性的整個基礎結構。示例2中的代碼創建了一個基礎的屬性，該屬性參照標準屬性實現，添加了一個靜態部分。 ### [**示例2: 如何參照標準屬性創建添加l一個靜態部分的屬性.**](http://docs.nativescript.org/core-concepts/properties#example-2-how-to-create-property-that-adds-a-static-part-compared-to-a-standard-property) > ### JS > > --- > > `var dependencyObservable = require("ui/core/dependency-observable");` > > `exports.myPropertyProperty = new dependencyObservable.Property(` > > `"myProperty",` > > `"MyClass",` > > `new dependencyObservable.PropertyMetadata("", dependencyObservable.PropertyMetadataSettings.None)` > > `);` > > `var MyClass = (function (_super) {` > > `__extends(MyClass, _super);` > > `function MyClass() {` > > `_super.apply(this, arguments);` > > `}` > > `Object.defineProperty(` > > `MyClass.prototype,` > > `"myProperty",` > > `{` > > `get: function () {return this._getValue(exports.myPropertyProperty); },` > > `set: function (value) { this._setValue(exports.myPropertyProperty, value); },` > > `enumerable: true,` > > `configurable: true` > > `}` > > `);` > > `return MyClass;` > > `})(dependencyObservable.DependencyObservable);` > > `exports.MyClass = MyClass;` ### **增加一個變化了的回調** **示例 3** 演示了如何實現改變通知的功能。它添加一個回調函數， `onMyPropertyChanged` ，該函數對屬性的變更打印一個消息。 ### **[示例 3: 如何操作 onPropertyChange事件.](http://docs.nativescript.org/core-concepts/properties#example-3-how-to-handle-onpropertychange-event)** > ### JS > > --- > > `var dependencyObservable = require("ui/core/dependency-observable");` > > `function onMyPropertyChanged(eventData) {` > > `var myClassInstance = eventData.object;` > > `var value = eventData.newValue;` > > `console.log("myProperty of the object " + myClassInstance.toString() + " changed with " + value);` > > `}` > > `exports.myPropertyProperty = new dependencyObservable.Property(` > > `"myProperty",` > > `"MyClass",` > > `new dependencyObservable.PropertyMetadata("", dependencyObservable.PropertyMetadataSettings.None, onMyPropertyChanged)` > > `);` > > `var MyClass = (function (_super) {` > > `__extends(MyClass, _super);` > > `function MyClass() {` > > `_super.apply(this, arguments);` > > `}` > > `Object.defineProperty(` > > `MyClass.prototype,` > > `"myProperty",` > > `{` > > `get: function () { return this._getValue(exports.myPropertyProperty); },` > > `set: function (value) { this._setValue(exports.myPropertyProperty, value); },` > > `enumerable: true,` > > `configurable: true` > > `}` > > `);` > > `return MyClass;` > > `})(dependencyObservable.DependencyObservable);` > > `exports.MyClass = MyClass;` ### **添加一個驗證回調** **示例 4** 演示了如何實現值驗證。它添加了一個回調函數，`validateMyProperty`，該函數拿到新屬性值并用一個簡單的規則驗證它。 ### **[示例 4: 如何實現值驗證.](http://docs.nativescript.org/core-concepts/properties#example-4-how-to-implement-value-validation)** > ### JS > > --- > > `var dependencyObservable = require("ui/core/dependency-observable");` > > `function validateMyProperty(value) {` > > `if (value > 0) { return true; }` > > `return false;` > > `}` > > `exports.myPropertyProperty = new dependencyObservable.Property(` > > `"myProperty",` > > `"MyClass",` > > `new dependencyObservable.PropertyMetadata("", dependencyObservable.PropertyMetadataSettings.None, null, validateMyProperty)` > > `);` > > `var MyClass = (function (_super) { ...` ### **創建可繼承的依賴屬性** **示例 5** 演示如何創建一個可繼承的依賴屬性： ### **[示例 5: 如何創建可繼承的依賴屬性.](http://docs.nativescript.org/core-concepts/properties#example-5-how-to-create-inheritable-dependency-property)** > ### JS > > --- > > `var dependencyObservable = require("ui/core/dependency-observable");` > > `exports.myPropertyProperty = new dependencyObservable.Property(` > > `"myProperty",` > > `"MyClass",` > > `new dependencyObservable.PropertyMetadata("", dependencyObservable.PropertyMetadataSettings.Inheritable)` > > `);` > > `var MyClass = (function (_super) {` > > `__extends(MyClass, _super);` > > `function MyClass() { _super.apply(this, arguments); }` > > `Object.defineProperty(` > > `MyClass.prototype,` > > `"myProperty",` > > `{` > > `get: function () { return this._getValue(exports.myPropertyProperty); },` > > `set: function (value) { this._setValue(exports.myPropertyProperty, value); },` > > `enumerable: true, configurable: true` > > `}` > > `);` > > `return MyClass;` > > `})(dependencyObservable.DependencyObservable);` > > `exports.MyClass = MyClass;` > ### 創建一個可繼承的屬性相當簡單（正如示例5里看到的）。但是，請記住，繼承只發生在視覺樹上。對非視覺元素設置屬性不允許繼承。 ## [**樣式屬性**](http://docs.nativescript.org/core-concepts/properties#style-properties) ### **說明** 可能可繼承屬性最好的應用情景就是對UI組件使用不同的樣式和主題了。您只需要對最基本的容器設置一個屬性（主題或樣式），而每一個UI組件就可以通過視覺樹繼承它。 ### **設置一個樣式屬性** 設置一個樣式屬性類似于設置一個常規屬性，但你使用嵌套 `style` 對象（這是 View 類的屬性，這意味著每個UI組件都有樣式）。 #### **代碼里設置** 在代碼里設置樣式屬性： > ### JS > > --- > > `var color = require("color"); ` > > `someButton.style.backgroundColor = new color.Color("red"); ` #### **CSS里設置** 在CSS里設置樣式屬性： > ### JS > > --- > > `someButton.id = "someButton"; ` > > `someButton.css = "#someButtton {background-color: red}"; `