aframe
प्रणाली

परिचय

पैरामीटर

टिप्पणियों

एक प्रणाली का पंजीकरण

एक सिस्टम ए-फ्रेम घटक के समान पंजीकृत है।

यदि सिस्टम नाम एक घटक नाम से मेल खाता है, तो घटक में सिस्टम के लिए एक संदर्भ होगा। इस प्रणाली:

AFRAME.registerSystem('my-component', {
  schema: {},  // System schema. Parses into `this.data`.
  init: function () {
    // Called on scene initialization.
  },
  // Other handlers and methods.
});
AFRAME.registerComponent('my-component', {
  init: function () {
    console.log(this.system);
  }
});

एक सिस्टम तक पहुँचना

एक त्वरित प्रणाली दृश्य के माध्यम से पहुँचा जा सकता है:

document.querySelector('a-scene').systems[systemName];

पंजीकृत सिस्टम प्रोटोटाइप को AFRAME.systems माध्यम से एक्सेस किया जा सकता है।

तर्क और डेटा का पृथक्करण

सिस्टम वांछित होने पर डेटा से अलग तर्क और व्यवहार की मदद कर सकता है। हम सिस्टम को भारी उठाने को संभालने देते हैं, और घटक केवल इसके जीवन चक्र के तरीकों के माध्यम से इसके डेटा के प्रबंधन के बारे में चिंता करते हैं:

AFRAME.registerSystem('my-component', {
  createComplexObject: function (data) {
    // Do calculations and stuff with data.
    return new ComplexObject(data);
  }
});

AFRAME.registerComponent('my-component', {
  init: function () {
    this.myObject = null;
  },

  update: function () {
    // Do stuff with `this.data`.
    this.myObject = this.system.createComplexObject(this.data);
  }
});

एक प्रणाली के सभी घटकों को इकट्ठा करना

यह परिभाषित करने के लिए कोई सख्त एपीआई नहीं है कि सिस्टम घटकों का प्रबंधन कैसे करता है। एक सामान्य पैटर्न यह है कि घटक स्वयं सिस्टम की सदस्यता लेते हैं। सिस्टम में इसके सभी घटकों के संदर्भ हैं:

AFRAME.registerSystem('my-component', {
  init: function () {
    this.entities = [];
  },

  registerMe: function (el) {
    this.entities.push(el);
  },

  unregisterMe: function (el) {
    var index = this.entities.indexOf(el);
    this.entities.splice(index, 1);
  }
});

AFRAME.registerComponent('my-component', {
  init: function () {
    this.system.registerMe(this.el);
  },

  remove: function () {
    this.system.unregisterMe(this.el);
  }
});