javascript - विरासत में मिली जावास्क्रिप्ट फ़ंक्शन को पुन: उपयोग और ओवरराइड करने के तरीके




3 Answers

जैसा कि "मुझे अपने स्वयं के अरेंज में फ़ंक्शन डालनी चाहिए और उन्हें क्रम में कॉल करना चाहिए" और "अपना स्वयं का इवेंट सिस्टम बनाने" के सुझावों के अनुसार, आप डोजोक्स.लैंगएस्पेर पुस्तकालय पर एक नज़र रखना चाहते हैं जो विस्तारित में बंडल होता है मानक पुस्तकालय यह मूल रूप से "डोजो.कनेक्ट" समाधान का एक और उन्नत संस्करण होना चाहिए।

dojo.require('dojox.lang.aspect');
var aop = dojox.lang.aspect;

function log(msg){ return function(){
    console.log(msg);
};}

var obj = {
   draw : log('draw circle');
};

obj.foo();
//prints
//  draw circle

aop.advise(obj, 'draw', [
    {before: log('draw triangle')},
    {after: log('draw a square')},
    {after: log('done!')}
]);

obj.foo();
//prints
//  draw a triangle
//  draw a circle
//  draw a square
//  done!

मेरे पास माउस इवेंट्स के लिए एक क्लास है मैं dojo बी / सी का उपयोग कर रहा हूँ मैं अपने ओ ओ दृष्टिकोण की तरह

dojo.declare("MouseObject", null, {
  constructor: function(){},
  onclick : function(){...},
  _onClick : function(){...}
});

_onClick() विंडो उत्पन्न माउस प्रेस / रिलीज़ इवेंट के लिए सुनता है और यह निर्धारित करता है कि कोई क्लिक हुई है या नहीं। यदि यह है, तो onClick() को कहा जाता है। onClick() सभी संभव क्लिकों के लिए सामान्य कार्यक्षमता प्रदान करता है, इसलिए इसे हर बार उपयोगकर्ता क्लिक करने की आवश्यकता होती है

कभी-कभी उपयोगकर्ता onClick() की कार्यक्षमता का विस्तार करना चाहते हैं onClick() क्या कोई चिपकाने के बिना मूल कार्यक्षमता को शामिल करने के लिए वैसे भी है? दो तरीकों से मैं सोच सकता हूं, न तो मुझे पसंद है, ये हैं

dojo.declare("MouseObjectChild", [MouseObject], {
  constructor: function(){},
  onclick : function(){this.inherited(arguments);...}
});

जिसकी कमियां है कि मुझे नई कक्षाएं बनानी पड़े हैं जिनकी वास्तव में जरूरत नहीं है, और दो एक मध्यवर्ती समारोह जोड़ते हैं

dojo.declare("MouseObject", null, {
      constructor: function(){},
      onclick : function(){this._onClick()...}, //child onClick
      _onClick : function(){...}, //parent onClick
      __onClick : function(){...} //listener
    });

लेकिन यह अच्छा कोड नहीं दिखता है

मुहैया कराते हुए, मैं विशेषज्ञ सलाह चाहता हूं कि कार्यक्रम-उपयोगकर्ता इंटरैक्शन को सबसे अच्छा कैसे संबोधित किया जाए। यदि कार्यक्रम कैनवास पर एक मंडल खींचना जैसे महत्वपूर्ण फ़ंक्शन प्रदान करता है, तो उपयोगकर्ता यह कैसे सबसे अच्छा इंटरैक्ट करता है। यदि उपयोगकर्ता सर्कल के पीछे एक त्रिकोण खींचना चाहता है तो क्या होगा? सर्कल के सामने एक वर्ग? इसके बाद प्रोग्राम को पूर्व और पोस्ट तरीके प्रदान करना होगा जैसे:

beforeDraw();
draw();
afterDraw();

क्या यह अच्छा डिजाइन माना जाता है? क्या मैं बजाय फ़ंक्शन पॉइंटर्स को एक सरणी में रखा और उन्हें क्रम में कॉल करना चाहिए?




क्यों नहीं अपने खुद के सरल घटना मॉडल बना?

// store our callbacks
var hooks = {};

// add a callback
var hook = function(name,fn){
  if(typeof hooks[name] === 'undefined'){
    hooks[name] = [];
  }
  hooks[name].push(fn);
  return true;
};

// remove a callback
var unhook = function(name,fn){
  if(typeof hooks[name] === 'undefined'){ return false }
  var i, u = hooks[name].length;
  for(i=0;i<u;i++){
    if(hooks[name][i] === fn){
      hooks[name].splice(i,1);
      return true;
    }
  }
};

// trigger a callback
var callHook = function(name, data){
   if(typeof hooks[name] === 'undefined'){ return false }
   var i, u = hooks[name].length;
   for(i=0;i<u;i++){
     hooks[name][i](data);
   }
};

फिर बाद में (उदाहरण के संदर्भ को गुजरता है):

hook('beforeDraw',function(ctx){ 
  console.log('I am called prior to drawing');
});

hook('afterDraw',function(ctx){
  console.log('I am called after drawing');
});

var drawCircle = function(){
  callHook('beforeDraw', ctx);
  // drawing code here
  callHook('afterDraw', ctx);
};

वैकल्पिक रूप से, यदि आप कॉलबैक के दायरे को पार करना चाहते थे तो आप callHook विधि को एक स्कोप तर्क स्वीकार करने के लिए बदल सकते हैं, और फिर call उपयोग call या apply call या this या किसी अन्य ऑब्जेक्ट में पास करें:

var callHook = function(name, scope, data){
   if(typeof hooks[name] === 'undefined'){ return false }
   var i, u = hooks[name].length;
   for(i=0;i<u;i++){
     hooks[name][i].call(scope, data);
   }
};

// later
var drawCircle = function(){
   callHook('beforeDraw', this, ctx);
   // or
   callHook('beforeDraw', someObject, ctx);
};

कैसे और कैसे आप ईवेंट मॉडल कार्यों को परिभाषित करते हैं, आप किसी ऑब्जेक्ट के विशिष्ट उदाहरणों, ऑब्जेक्ट के प्रत्येक उदाहरण, विश्व स्तर पर, और इसी तरह के आधार पर कार्यप्रणाली को कैसे परिभाषित कर सकते हैं, आप उन कॉलबैक को कैसे बदलना, बदलना और ट्रिगर करना चाहते हैं।




__fn को मेसियर और मैसियर मिलता है कि, मेरे दोस्त, नरक की राह है

यह मैजिक पुशबटन दृष्टिकोण का उपयोग करने का प्रतीक है ओओ जेएस पुस्तकालयों में से कई के आस-पास आप को वास्तविक विरासत आधारित क्लास मॉडल पर ले जाने पर विचार करना चाहिए। तब आप $ base.fn () या $ super.fn () को कॉल करने में सक्षम होंगे




Related