অ্যাঙ্গুলারজেএস-এ স্কোপ প্রোটোটাইপাল / প্রোটোটাইপিকাল উত্তরাধিকারের সংক্ষিপ্তসারগুলি কী কী?


1028

API উল্লেখ ব্যাপ্তি পৃষ্ঠা বলেছেন:

একটি সুযোগ পিতামাতার সুযোগ থেকে উত্তরাধিকারী হতে পারে

বিকাশকারী গাইড ব্যাপ্তি পৃষ্ঠা বলেছেন:

একটি সুযোগ (প্রোটোটাইপিকভাবে) এর প্যারেন্ট স্কোপ থেকে সম্পত্তি উত্তরাধিকার সূত্রে প্রাপ্ত।

  • সুতরাং, কোনও বাচ্চার সুযোগ সর্বদা প্রোটোটাইপিকভাবে তার পিতামাতার সুযোগ থেকে উত্তরাধিকারী হয়?
  • ব্যতিক্রম আছে?
  • যখন এটি উত্তরাধিকার সূত্রে আসে, এটি কি সর্বদা স্বাভাবিক জাভাস্ক্রিপ্ট প্রোটোটাইপাল উত্তরাধিকার?

উত্তর:


1740

তাত্ক্ষণিক উত্তর :
একটি শিশু স্কোপ সাধারণত প্রোটোটাইপিকভাবে তার পিতামাতার সুযোগ থেকে উত্তরাধিকার সূত্রে প্রাপ্ত হয়, তবে সবসময় নয়। এই নিয়মের একটি ব্যতিক্রম হ'ল নির্দেশনা scope: { ... }- এটি একটি "বিচ্ছিন্ন" সুযোগ তৈরি করে যা প্রোটোটাইপিকভাবে উত্তরাধিকারসূত্রে পায় না। এই কনস্ট্রাক্টটি প্রায়শই "পুনরায় ব্যবহারযোগ্য উপাদান" নির্দেশিকা তৈরি করার সময় ব্যবহৃত হয়।

সংক্ষিপ্তসার হিসাবে, স্কোপের উত্তরাধিকার সাধারণত সরলতর ... যতক্ষণ না আপনার সন্তানের সুযোগে দ্বি-উপায় ডেটা বাঁধাইয়ের (যেমন, ফর্ম উপাদানগুলি, এনজি-মডেল) প্রয়োজন হয়। এনজি-রিপিট, এনজি-স্যুইচ এবং এনজি-অন্তর্ভুক্ত আপনাকে সন্তানের সুযোগের ভিতরে থেকে প্যারেন্ট স্কোপে কোনও আদিম (উদাহরণস্বরূপ, সংখ্যা, স্ট্রিং, বুলিয়ান) বাঁধতে চেষ্টা করলে আপনাকে ট্রিপ করতে পারে । এটি বেশিরভাগ লোকেরা যেভাবে কাজ করে তা প্রত্যাশা করে না। সন্তানের সুযোগ তার নিজস্ব সম্পত্তি পায় যা একই নামের পিতামাতার সম্পত্তি লুকায়িত / ছায়া করে। আপনার কর্মক্ষেত্র হয়

  1. আপনার মডেলের জন্য পিতামাতার মধ্যে অবজেক্টগুলি সংজ্ঞায়িত করুন, তারপরে সন্তানের মধ্যে সেই বস্তুর একটি সম্পত্তি উল্লেখ করুন: প্যারেন্ট ওবজ.সোমপ্রপ
  2. $ প্যারেন্ট.প্যারেন্টসকোপ প্রোপার্টি ব্যবহার করুন (সর্বদা সম্ভব নয়, তবে 1. এর চেয়ে সহজ যেখানে সম্ভব)
  3. প্যারেন্ট স্কোপটিতে একটি ফাংশন সংজ্ঞায়িত করুন এবং এটি শিশু থেকে কল করুন (সর্বদা সম্ভব নয়)

নিউ AngularJS ডেভেলপারদের প্রায়ই যে বুঝতে পারছি না ng-repeat, ng-switch, ng-view, ng-includeএবং ng-ifসব নতুন শিশু সুযোগ তৈরি করেন, যাতে সমস্যা প্রায়ই দেখায় যখন এই নির্দেশনা যুক্ত। ( সমস্যার তাত্ক্ষণিক উদাহরণের জন্য এই উদাহরণটি দেখুন ))

আদিমদের সাথে এই সমস্যাটি সর্বদা একটি ' সেরা অনুশীলন "অনুসরণ করে সহজেই এড়ানো যায় ' ' আপনার এনজি-মডেলগুলিতে - 3 মিনিটের মূল্য দেখুন। মিসকো আদি বাঁধাইয়ের বিষয়টিটি প্রদর্শন করে ng-switch

হচ্ছে একটি '.' আপনার মডেলগুলিতে প্রোটোটাইপাল উত্তরাধিকার কার্যকর রয়েছে তা নিশ্চিত করবে। সুতরাং, ব্যবহার করুন

<input type="text" ng-model="someObj.prop1">

<!--rather than
<input type="text" ng-model="prop1">`
-->


দীর্ঘ উত্তর :

জাভাস্ক্রিপ্ট প্রোটোটাইপাল উত্তরাধিকার

অ্যাঙ্গুলারজেএস উইকিতেও রাখা হয়েছে: https://github.com/angular/angular.js/wiki/Unders સમજ- স্কোপস

প্রোটোটাইপাল উত্তরাধিকার সম্পর্কে প্রথমে দৃ understanding় বোঝা থাকা গুরুত্বপূর্ণ, বিশেষত যদি আপনি কোনও সার্ভার-সাইড ব্যাকগ্রাউন্ড থেকে এসে থাকেন এবং আপনি ক্লাস-ical উত্তরাধিকারের সাথে আরও পরিচিত হন। সুতরাং আসুন প্রথমে পর্যালোচনা করা যাক।

ধরা যাক প্যারেন্টস্কোপের বৈশিষ্ট্যগুলি রয়েছে স্ট্রিং, আংমার্ব, আনআরে, আনজেক্ট এবং এফংশন। যদি চাইল্ডস্কোপ প্রোটোটাইপিকভাবে প্যারেন্টস্কোপের উত্তরাধিকার সূত্রে আমাদের কাছে থাকে:

প্রোটোটাইপাল উত্তরাধিকার

(নোট করুন যে স্থানটি সংরক্ষণ করতে, আমি anArrayতিনটি পৃথক ধূসর আক্ষরিক সহ একটি নীল বস্তুর পরিবর্তে অবজেক্টটিকে তার তিনটি মান সহ একটি নীল বস্তু হিসাবে দেখাব ))

যদি আমরা সন্তানের সুযোগ থেকে প্যারেন্টস্কোপে সংজ্ঞায়িত কোনও সম্পত্তি অ্যাক্সেস করার চেষ্টা করি তবে জাভাস্ক্রিপ্ট প্রথমে সন্তানের সুযোগে সন্ধান করবে, সম্পত্তিটি খুঁজে পাবে না, পরে উত্তরাধিকার সূত্রে সুযোগ অনুসন্ধান করবে এবং সম্পত্তিটি খুঁজে পাবে। (যদি এটি প্যারেন্টস্কোপে সম্পত্তিটি না পেয়ে থাকে তবে এটি মূল প্রস্থান পর্যন্ত সমস্ত প্রোটোটাইপ চেইন অবিরত করবে)) সুতরাং, এগুলি সমস্ত সত্য:

childScope.aString === 'parent string'
childScope.anArray[1] === 20
childScope.anObject.property1 === 'parent prop1'
childScope.aFunction() === 'parent output'

ধরুন আমরা তখন এটি করি:

childScope.aString = 'child string'

প্রোটোটাইপ চেইনের সাথে পরামর্শ করা হয় না এবং চাইল্ডস্কোপে একটি নতুন স্ট্রিং সম্পত্তি যুক্ত করা হয়। এই নতুন সম্পত্তি একই নামের সাথে প্যারেন্টস্কোপের সম্পত্তিটি আড়াল করে / ছায়া দেয়। যখন আমরা নীচে এনজি-রিপিট এবং এনজি-অন্তর্ভুক্ত আলোচনা করব তখন এটি খুব গুরুত্বপূর্ণ হয়ে উঠবে।

সম্পত্তি গোপন

ধরুন আমরা তখন এটি করি:

childScope.anArray[1] = '22'
childScope.anObject.property1 = 'child prop1'

প্রোটোটাইপ চেইনের সাথে পরামর্শ করা হয়েছে কারণ অবজেক্টস (anArray এবং anObject) চাইল্ডস্কোপে পাওয়া যায় নি। বস্তুগুলি প্যারেন্টস্কোপে পাওয়া যায় এবং সম্পত্তির মানগুলি মূল বস্তুগুলিতে আপডেট হয়। চাইল্ডস্কোপে কোনও নতুন বৈশিষ্ট্য যুক্ত করা হয়নি; কোন নতুন অবজেক্ট তৈরি করা হয়। (নোট করুন যে জাভাস্ক্রিপ্টে অ্যারে এবং ফাংশনগুলিও বস্তু।

প্রোটোটাইপ চেইন অনুসরণ করুন

ধরুন আমরা তখন এটি করি:

childScope.anArray = [100, 555]
childScope.anObject = { name: 'Mark', country: 'USA' }

প্রোটোটাইপ চেইনের সাথে পরামর্শ করা হয় না, এবং শিশু স্কোপ দুটি নতুন অবজেক্ট বৈশিষ্ট্য লাভ করে যা প্যারেন্টস্কোপ অবজেক্ট বৈশিষ্ট্যগুলিকে একই নামের সাথে গোপন / ছায়া দেয়।

আরও সম্পত্তি গোপন

takeaways:

  • আমরা যদি চাইল্ডস্কোপ.প্রোপার্টিএক্স পড়ি এবং চাইল্ডস্কোপের প্রোপার্টি এক্স থাকে, তবে প্রোটোটাইপ চেইনের সাথে পরামর্শ করা হয় না।
  • যদি আমরা চাইল্ডস্কোপ.প্রোপার্টিএক্স সেট করি তবে প্রোটোটাইপ চেইনের সাথে পরামর্শ করা হয় না।

একটি শেষ দৃশ্য:

delete childScope.anArray
childScope.anArray[1] === 22  // true

আমরা প্রথমে চাইল্ডস্কোপ সম্পত্তি মুছে ফেলেছি, তারপরে যখন আমরা আবার সম্পত্তিটি অ্যাক্সেস করার চেষ্টা করি তখন প্রোটোটাইপ চেইনের সাথে পরামর্শ করা হয়।

একটি শিশু সম্পত্তি অপসারণ পরে


কৌণিক স্কোপ উত্তরাধিকার

প্রার্থীরা:

  • নিম্নলিখিতগুলি নতুন স্কোপগুলি তৈরি করে এবং প্রোটোটাইপিকভাবে উত্তরাধিকার সূত্রে: এনজি-রিপিট, এনজি-অন্তর্ভুক্ত, এনজি-স্যুইচ, এনজি-কন্ট্রোলার, ডাইরেক্টিভ উইথ scope: trueডাইরেক্টিভ transclude: true
  • নিম্নলিখিতটি একটি নতুন সুযোগ তৈরি করে যা প্রোটোটাইপিকভাবে উত্তরাধিকার সূত্রে প্রাপ্ত হয় না: সাথে নির্দেশনা scope: { ... }। এটি পরিবর্তে একটি "বিচ্ছিন্ন" সুযোগ তৈরি করে।

দ্রষ্টব্য, ডিফল্টরূপে, নির্দেশাবলী নতুন সুযোগ তৈরি করে না - যেমন, ডিফল্ট হয় scope: false

NG-অন্তর্ভুক্ত

ধরুন আমাদের নিয়ামকটিতে আমাদের রয়েছে:

$scope.myPrimitive = 50;
$scope.myObject    = {aNumber: 11};

এবং আমাদের এইচটিএমএল:

<script type="text/ng-template" id="/tpl1.html">
<input ng-model="myPrimitive">
</script>
<div ng-include src="'/tpl1.html'"></div>

<script type="text/ng-template" id="/tpl2.html">
<input ng-model="myObject.aNumber">
</script>
<div ng-include src="'/tpl2.html'"></div>

প্রতিটি এনজি-অন্তর্ভুক্ত একটি নতুন শিশু সুযোগ তৈরি করে, যা মূলত অভিভাবকের সুযোগ থেকে উত্তরাধিকার সূত্রে প্রাপ্ত হয়।

এনজি-চাইল্ড স্কোপগুলি অন্তর্ভুক্ত করুন

প্রথম ইনপুট পাঠ্যবাক্সে টাইপ করুন ("77" বলুন) বাচ্চার সুযোগকে একটি নতুন myPrimitiveস্কোপ সম্পত্তি পাওয়া যায় যা একই নামের প্যারেন্ট স্কোপ সম্পত্তিটি আড়াল করে / ছায়া করে। এটি সম্ভবত আপনি চান / প্রত্যাশা করেন না not

একটি আদিম সঙ্গে এনজি-অন্তর্ভুক্ত

দ্বিতীয় ইনপুট পাঠ্য বাক্সে টাইপ করুন ("99" বলুন) এর ফলে কোনও নতুন সন্তানের সম্পত্তি দেখা দেয় না। যেহেতু tpl2.html মডেলটিকে কোনও অবজেক্টের সম্পত্তিতে আবদ্ধ করে, প্রোটোটাইপাল উত্তরাধিকার কিক্স দেয় যখন এনজিমোডেল বস্তু মাইবজেক্টের সন্ধান করে - এটি এটি প্যারেন্ট স্কোপে খুঁজে পায়।

এনজি-কোনও বস্তুর সাথে অন্তর্ভুক্ত করুন

আমরা template পিতামাতার ব্যবহারের জন্য প্রথম টেমপ্লেটটি পুনরায় লিখতে পারি, যদি আমরা আমাদের মডেলটিকে আদিম থেকে কোনও বস্তুতে পরিবর্তন করতে না চাই:

<input ng-model="$parent.myPrimitive">

এই ইনপুট পাঠ্য বাক্সে টাইপ করুন ("22" বলুন) এর ফলে কোনও নতুন সন্তানের সম্পত্তি দেখা দেয় না। মডেলটি এখন পিতামাতার সুযোগের একটি সম্পত্তিতে আবদ্ধ (কারণ $ পিতামাতা একটি শিশু স্কোপ সম্পত্তি যা পিতামাতার সুযোগকে উল্লেখ করে)।

g পিতামাতার সাথে এনজি-অন্তর্ভুক্ত করুন

সমস্ত স্কোপের জন্য (প্রোটোটাইপাল বা না), কৌণিক সবসময় স্কোপ বৈশিষ্ট্যগুলি $ পিতামাতার, $$ চাইল্ডহিড এবং $$ চাইল্ড টেইলের মাধ্যমে একটি পিতামাতা-সন্তানের সম্পর্ককে (যেমন, একটি শ্রেণিবিন্যাস) সন্ধান করে। আমি সাধারণত চিত্রগুলির মধ্যে এই স্কোপ বৈশিষ্ট্যগুলি দেখাই না।

দৃশ্যের জন্য যেখানে ফর্ম উপাদানগুলি জড়িত নয়, অন্য সমাধান হ'ল আদিমটি সংশোধন করার জন্য প্যারেন্ট স্কোপের কোনও ফাংশনকে সংজ্ঞায়িত করা। তারপরে নিশ্চিত করুন যে শিশুটি সর্বদা এই ফাংশনটিকে কল করে, যা প্রোটোটাইপাল উত্তরাধিকারের কারণে সন্তানের সুযোগে উপলব্ধ। যেমন,

// in the parent scope
$scope.setMyPrimitive = function(value) {
     $scope.myPrimitive = value;
}

এখানে একটি নমুনা ফিডল যা এই "প্যারেন্ট ফাংশন" পদ্ধতির ব্যবহার করে। (এই উত্তরের অংশ হিসাবে এই পোড়াটি লেখা হয়েছিল: https://stackoverflow.com/a/14104318/215945 ।)

আরও দেখুন https://stackoverflow.com/a/13782671/215945 এবং https://github.com/angular/angular.js/issues/1267

NG-সুইচ

এনজি-সুইচ স্কোপ উত্তরাধিকার ঠিক এনজি-অন্তর্ভুক্তের মতো কাজ করে। সুতরাং আপনার যদি প্যারেন্ট স্কোপের কোনও আদিমকে বাধ্যতামূলক 2-উপায়ের ডেটা প্রয়োজন হয় তবে $ পিতা-মাতার ব্যবহার করুন বা মডেলটিকে একটি বস্তু হিসাবে পরিবর্তন করুন এবং তারপরে সেই বস্তুর কোনও বৈশিষ্ট্যের সাথে আবদ্ধ করুন। এটি সন্তানের স্কোপ গোপন / পিতামাতার স্কোপ বৈশিষ্ট্যের ছায়া এড়ানো এড়াবে।

এছাড়াও AngularJS দেখুন , একটি স্যুইচ-কেসের বাঁধাইয়ের সুযোগ?

NG-পুনরাবৃত্তি

এনজি-রিপিট কিছুটা আলাদাভাবে কাজ করে। ধরুন আমাদের নিয়ামকটিতে আমাদের রয়েছে:

$scope.myArrayOfPrimitives = [ 11, 22 ];
$scope.myArrayOfObjects    = [{num: 101}, {num: 202}]

এবং আমাদের এইচটিএমএল:

<ul><li ng-repeat="num in myArrayOfPrimitives">
       <input ng-model="num">
    </li>
<ul>
<ul><li ng-repeat="obj in myArrayOfObjects">
       <input ng-model="obj.num">
    </li>
<ul>

প্রতিটি আইটেম / পুনরাবৃত্তির জন্য, এনজি-রিপিট একটি নতুন সুযোগ তৈরি করে, যা মূলত অভিভাবকের সুযোগ থেকে উত্তরাধিকার সূত্রে প্রাপ্ত হয়, তবে এটি আইটেমটির মান নতুন সন্তানের সুযোগে একটি নতুন সম্পত্তিতেও বরাদ্দ করে । (নতুন সম্পত্তির নাম লুপ ভেরিয়েবলের নাম)) এখানে এনজি-রিপিটের অ্যাংুলার সোর্স কোডটি আসলে কী:

childScope = scope.$new();  // child scope prototypically inherits from parent scope
...
childScope[valueIdent] = value;  // creates a new childScope property

যদি আইটেমটি আদিম হয় (যেমন MyArrayOfPrimitives), মূলত একটি অনুলিপি নতুন শিশু স্কোপ সম্পত্তিকে বরাদ্দ করা হয়। চাইল্ড স্কোপ প্রোপার্টি এর মান (যেমন এনজি-মডেল ব্যবহার করে চাইল্ড স্কোপ num) পরিবর্তন করা প্যারেন্ট স্কোপ রেফারেন্সকে অ্যারে পরিবর্তন করে না । সুতরাং উপরের প্রথম এনজি- numরিপিটে প্রতিটি শিশুর স্কোপ এমন একটি সম্পত্তি পেয়ে যায় যা মাইআরএফ অফ প্রাইমিটাইভ অ্যারে থেকে স্বতন্ত্র:

আদিম সঙ্গে এনজি-পুনরাবৃত্তি

এই এনজি-রিপিট কাজ করবে না (যেমন আপনি চান / এটি আশা করেন)। পাঠ্য বাক্সগুলিতে টাইপ করা ধূসর বাক্সগুলিতে মানগুলি পরিবর্তন করে যা কেবলমাত্র শিশু স্কোপে প্রদর্শিত হয়। আমরা যা চাই তা হ'ল ইনপুটগুলি মাইআরআরএফপ্রিমিটিভ অ্যারেগুলিকে প্রভাবিত করে, কোনও শিশু সুযোগ আদি সম্পত্তিকে নয়। এটি সম্পাদন করার জন্য, আমাদের মডেলটিকে অবজেক্টের অ্যারে হিসাবে পরিবর্তন করতে হবে।

সুতরাং, আইটেমটি যদি কোনও বস্তু হয় তবে নতুন শিশু স্কোপ সম্পত্তিটিতে মূল বস্তুর (একটি অনুলিপি নয়) একটি রেফারেন্স বরাদ্দ করা হয়েছে। চাইল্ড স্কোপ প্রোপার্টি এর মান (অর্থাত্ এনজি-মডেল ব্যবহার করে obj.num) পরিবর্তন করা বস্তুটিকে পিতামাতার স্কোপ রেফারেন্স উল্লেখ করে does সুতরাং উপরের দ্বিতীয় এনজি-রিপিটে আমাদের রয়েছে:

বস্তুর সাথে এনজি-পুনরাবৃত্তি

(আমি এক লাইন ধূসর রঙে রঙ করেছি যাতে এটি স্পষ্ট হয় যে এটি কোথায় চলছে))

এটি প্রত্যাশার মতো কাজ করে। পাঠ্যবক্সগুলিতে টাইপ করা ধূসর বাক্সগুলিতে মানগুলি পরিবর্তন করে যা শিশু এবং পিতা বা মাতা উভয়েরই জন্য দৃশ্যমান।

আরও দেখুন NG-মডেল, NG-পুনরাবৃত্তি এবং ইনপুট সঙ্গে অসুবিধা এবং https://stackoverflow.com/a/13782671/215945

NG-নিয়ামক

এনজি-কন্ট্রোলার ব্যবহার করে নেস্টিং কন্ট্রোলাররা সাধারণ প্রোটোটাইপাল উত্তরাধিকারে যেমন এনজি-অন্তর্ভুক্ত এবং এনজি-স্যুইচ-এর ফলস্বরূপ ফলাফল দেয় তাই একই কৌশলগুলি প্রয়োগ হয়। তবে, "স্কোপ উত্তরাধিকারের মাধ্যমে তথ্য ভাগ করে নেওয়া দু'টি নিয়ন্ত্রকের পক্ষে এটি খারাপ ফর্ম হিসাবে বিবেচিত হয়" - http://onehungrymind.com/angularjs-sticky-notes-pt-1-architecture/ এর মধ্যে ডেটা ভাগ করার জন্য একটি পরিষেবা ব্যবহার করা উচিত পরিবর্তে নিয়ামক।

(আপনি যদি কন্ট্রোলার স্কোপের উত্তরাধিকারের মাধ্যমে সত্যিকার অর্থে ডেটা ভাগ করতে চান তবে আপনার যা করার দরকার নেই তেমন কিছু নেই child সন্তানের স্কোপটিতে প্যারেন্ট স্কোপের সমস্ত বৈশিষ্ট্যে অ্যাক্সেস থাকবে load লোডিং বা নেভিগেট করার সময় কন্ট্রোলার লোড অর্ডারও পৃথক হয় )

নির্দেশনা

  1. ডিফল্ট ( scope: false) - নির্দেশিকা একটি নতুন সুযোগ তৈরি করে না, সুতরাং এখানে কোনও উত্তরাধিকার নেই। এটি সহজ, তবে বিপজ্জনক কারণ, উদাহরণস্বরূপ, কোনও দিকনির্দেশক মনে করতে পারে যে এটি সুযোগে একটি নতুন সম্পত্তি তৈরি করছে, যখন বাস্তবে এটি কোনও বিদ্যমান সম্পত্তি আঁটসাঁট করছে। পুনরায় ব্যবহারযোগ্য উপাদান হিসাবে অভিপ্রায় নির্দেশিকা লেখার জন্য এটি একটি ভাল পছন্দ নয়।
  2. scope: true- নির্দেশনাটি একটি নতুন বাচ্চার সুযোগ তৈরি করে যা মূলত অভিভাবকের সুযোগ থেকে উত্তরাধিকার সূত্রে প্রাপ্ত হয়। যদি একাধিক নির্দেশিকা (একই ডিওএম উপাদানটিতে) কোনও নতুন সুযোগের জন্য অনুরোধ করে তবে কেবলমাত্র একটি নতুন বাচ্চার সুযোগ তৈরি হয়। যেহেতু আমাদের "স্বাভাবিক" প্রোটোটাইপাল উত্তরাধিকার রয়েছে তাই এটি এনজি-অন্তর্ভুক্ত এবং এনজি-স্যুইচের মতো, সুতরাং প্যারেন্ট স্কোপ আদিমগুলিতে আবশ্যক 2-উপায় ডেটা এবং পিতা-মাতার স্কোপ বৈশিষ্ট্যগুলি ছাপিয়ে / ছড়িয়ে দেওয়া শিশু স্কোপ সম্পর্কে সতর্ক থাকুন।
  3. scope: { ... }- নির্দেশনাটি একটি নতুন বিচ্ছিন্ন / বিচ্ছিন্ন সুযোগ তৈরি করে। এটি প্রোটোটাইপিকভাবে উত্তরাধিকারসূত্রে আসে না। পুনরায় ব্যবহারযোগ্য উপাদান তৈরি করার সময় এটি সাধারণত আপনার সেরা পছন্দ, যেহেতু নির্দেশটি দুর্ঘটনাক্রমে প্যারেন্ট স্কোপটি পড়তে বা সংশোধন করতে পারে না। যাইহোক, এই জাতীয় নির্দেশাবলী প্রায়শই কয়েকটি প্যারেন্ট স্কোপ বৈশিষ্ট্য অ্যাক্সেস প্রয়োজন। অভিভাবক স্কোপ এবং বিচ্ছিন্ন সুযোগের মধ্যে দ্বি-মুখী বাঁধাই ('=' ব্যবহার করে) বা একমুখী বাঁধাই ('@' ব্যবহার করে) সেট করতে অবজেক্ট হ্যাশ ব্যবহার করা হয়। প্যারেন্ট স্কোপ এক্সপ্রেশনগুলিতে বাঁধতে 'এবং' রয়েছে। সুতরাং, এগুলি সমস্ত স্থানীয় স্কোপ বৈশিষ্ট্য তৈরি করে যা পিতামাতার সুযোগ থেকে প্রাপ্ত। নোট করুন যে অ্যাট্রিবিউটিগুলি বন্ডিং সেট আপ করতে সহায়তা করার জন্য ব্যবহৃত হয় - আপনি কেবলমাত্র বস্তুর হ্যাশগুলিতে প্যারেন্ট স্কোপ সম্পত্তির নামগুলি উল্লেখ করতে পারবেন না, আপনাকে একটি অ্যাট্রিবিউট ব্যবহার করতে হবে। উদাহরণস্বরূপ, আপনি পিতামাতার সম্পত্তি বাঁধাই করতে চাইলে এটি কাজ করবে নাparentPropবিচ্ছিন্ন সুযোগে: <div my-directive>এবং scope: { localProp: '@parentProp' }। নির্দেশকটি: <div my-directive the-Parent-Prop=parentProp>এবং এর সাথে আবদ্ধ হতে চায় এমন প্রতিটি প্যারেন্ট সম্পত্তিকে নির্দিষ্ট করতে একটি বৈশিষ্ট্য অবশ্যই ব্যবহার করতে হবে scope: { localProp: '@theParentProp' }
    স্কোপ এর __proto__রেফারেন্স অবজেক্টকে বিচ্ছিন্ন করুন । বিচ্ছিন্ন স্কোপের $ পিতামাতারা পিতামাতাদের স্কোপগুলি উল্লেখ করে, সুতরাং যদিও এটি বিচ্ছিন্ন এবং প্যারেন্ট স্কোপ থেকে প্রোটোটাইপিকভাবে উত্তরাধিকার সূত্রে প্রাপ্ত হয় না, এটি এখনও একটি শিশু সুযোগ।
    নীচের চিত্রটির জন্য আমাদের
    <my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">এবং
    scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
    এছাড়াও, ধরে নিন যে নির্দেশিকাটি এটির লিঙ্কিংয়ের কাজ করে: scope.someIsolateProp = "I'm isolated"
    বিচ্ছিন্ন সুযোগ
    বিচ্ছিন্ন স্কোপগুলি সম্পর্কে আরও তথ্যের জন্য দেখুন http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/
  4. transclude: true- নির্দেশনাটি একটি নতুন "ট্রান্সক্লুডড" সন্তানের সুযোগ তৈরি করে, যা মূলত অভিভাবকের সুযোগ থেকে উত্তরাধিকার সূত্রে প্রাপ্ত হয়। স্থানান্তরিত এবং বিচ্ছিন্ন সুযোগ (যদি থাকে) ভাইবোন হয় - প্রতিটি সুযোগের পিতামাতার সম্পত্তি একই পিতামাতার সুযোগকে উল্লেখ করে। যখন একটি ট্রান্সকোসলেটেড এবং একটি বিচ্ছিন্ন সুযোগ উভয়ই উপস্থিত থাকে, স্কোপ সম্পত্তি বিচ্ছিন্ন করুন $$ পরের শিবলিং ট্রান্সকোলেটেড স্কোপটি উল্লেখ করবে। আমি ট্রান্সক্লোড স্কোপ সহ কোনও সূক্ষ্মতা সম্পর্কে অবগত নই।
    নীচের ছবির জন্য, এই সংযোজন সহ উপরের মতো একই নির্দেশনাটি ধরে নিন:transclude: true
    স্থানান্তরিত সুযোগ

এই ফ্রিডেলের একটি showScope()ফাংশন রয়েছে যা কোনও বিচ্ছিন্ন এবং ট্রান্সক্লুডড স্কোপ পরীক্ষা করতে ব্যবহার করা যেতে পারে। কম্পনের নির্দেশাবলীটি মূর্ছনায় দেখুন।


সারসংক্ষেপ

চার ধরণের স্কোপ রয়েছে:

  1. সাধারণ প্রোটোটাইপাল স্কোপ উত্তরাধিকার - এনজি-অন্তর্ভুক্ত, এনজি-সুইচ, এনজি-কন্ট্রোলার, নির্দেশ সহ scope: true
  2. অনুলিপি / অ্যাসাইনমেন্ট সহ সাধারণ প্রোটোটাইপাল স্কোপ উত্তরাধিকার - এনজি-পুনরাবৃত্তি। এনজি-রিপিটের প্রতিটি পুনরাবৃত্তি একটি নতুন বাচ্চার সুযোগ তৈরি করে এবং সেই নতুন সন্তানের সুযোগটি সর্বদা একটি নতুন সম্পত্তি পায়।
  3. বিচ্ছিন্ন সুযোগ - সাথে নির্দেশ scope: {...}। এটি প্রোটোটাইপাল নয়, তবে '=', '@', এবং '&' বৈশিষ্ট্যের মাধ্যমে প্যারেন্ট স্কোপ বৈশিষ্ট্যগুলিতে অ্যাক্সেসের জন্য একটি ব্যবস্থা সরবরাহ করে।
  4. স্থানান্তরিত সুযোগ - সাথে নির্দেশক transclude: true। এটি এক সাধারণ প্রোটোটাইপাল স্কোপ উত্তরাধিকার, তবে এটি কোনও বিচ্ছিন্ন সুযোগের ভাইবোনও।

সমস্ত স্কোপের জন্য (প্রোটোটাইপাল বা না), কৌণিক সবসময় একটি পিতা-সন্তানের সম্পর্ককে (যেমন একটি শ্রেণিবিন্যাস), সম্পত্তি via পিতামাতার এবং $$ চাইল্ডহিড এবং $$ চাইল্ড টেইলের মাধ্যমে সন্ধান করে।

চিত্রগুলি দিয়ে তৈরি করা হয়েছিল "* .dot" ফাইল, যা হয় GitHub । টিম ক্যাসওয়েলের " লার্নিং জাভাস্ক্রিপ্ট উইথ অবজেক্ট গ্রাফ " চিত্রগুলির জন্য গ্রাফভিজ ব্যবহারের অনুপ্রেরণা ছিল।


48
অসাধারণ নিবন্ধ, এসও উত্তরের পক্ষে অনেক দীর্ঘ, তবে যাইহোক খুব দরকারী। কোনও সম্পাদক এটি আকারে নামিয়ে দেওয়ার আগে দয়া করে এটি আপনার ব্লগে রেখে দিন।
iwein

43
আমি AngularJS উইকিতে একটি অনুলিপি রেখেছি ।
রাজকোক

3
সংশোধন: "স্কোপের __proto__রেফারেন্স অবজেক্টকে বিচ্ছিন্ন করুন " " পরিবর্তে "বিচ্ছিন্ন স্কোপের __proto__রেফারেন্সগুলি একটি স্কোপ অবজেক্ট " হওয়া উচিত । সুতরাং, শেষ দুটি ছবিতে কমলা "অবজেক্ট" বাক্সগুলির পরিবর্তে "ব্যাপ্তি" বাক্সগুলি হওয়া উচিত।
মার্ক রাজকোক

15
এই অ্যাসনওয়ারটি কৌণিক সংক্রান্ত নির্দেশিকায় অন্তর্ভুক্ত করা উচিত। এটি অনেক বেশি ডায়াটিক ...
মার্সেলো দে জেন

2
উইকি আমাকে বিস্মিত করে ফেলে, প্রথমে এটি পড়ে: "প্রোটোটাইপ চেইনের সাথে পরামর্শ করা হয়েছে কারণ চাইল্ডস্কোপে বস্তুটি পাওয়া যায় নি।" এবং তারপরে লেখা আছে: "আমরা যদি চাইল্ডস্কোপ.প্রোপার্টিএক্স সেট করি তবে প্রোটোটাইপ চেইনের সাথে পরামর্শ করা হয় না" " দ্বিতীয়টি একটি শর্ত বোঝায় যেখানে প্রথমটি দেয় না।
স্টিফেন

140

আমি কোনওভাবেই মার্কের উত্তরের সাথে প্রতিযোগিতা করতে চাই না, তবে জাভাস্ক্রিপ্টের উত্তরাধিকার এবং এর প্রোটোটাইপ শৃঙ্খলে নতুন হিসাবে নতুন কিছু হিসাবে ক্লিক করে এমন টুকরোটি হাইলাইট করতে চেয়েছিলাম ।

কেবল সম্পত্তি প্রোটোটাইপ চেইন অনুসন্ধান করে, লিখে না। সুতরাং আপনি সেট যখন

myObject.prop = '123';

এটি চেইনটি সন্ধান করে না, তবে আপনি যখন সেট করবেন

myObject.myThing.prop = '123';

সেই লেখার অপারেশনের মধ্যে একটি সূক্ষ্ম পঠন চলছে যা এর প্রোপগুলিতে লেখার আগে মাইথিংটিকে দেখার চেষ্টা করে। সুতরাং সেই কারণেই শিশুটির কাছ থেকে অবজেক্ট.প্রেটিটি লিখতে পিতামাতার অবজেক্টগুলিতে আসে।


12
যদিও এটি একটি খুব সাধারণ ধারণা, এটি সম্ভবত খুব সুস্পষ্ট নাও হতে পারে, আমার বিশ্বাস, অনেক লোক এটিকে মিস করে। ভাল করা.
moljac024

3
দুর্দান্ত মন্তব্য। আমি সরিয়ে নিই, কোনও অবজেক্ট প্রোপার্টি রেজোলিউশন কোনও রিডের সাথে জড়িত না যখন কোনও অবজেক্ট প্রোপার্টি রেজোলিউশন করে।
স্টিফেন

1
কেন? প্রোটোটাইপ চেইনে না গিয়ে সম্পত্তি লেখার অনুপ্রেরণা কী? এটাকে পাগল মনে হচ্ছে ...
জোনাথন

1
আপনি যদি সত্যিকারের সাধারণ উদাহরণ যোগ করেন তবে দুর্দান্ত হবে।
tylik

2
লক্ষ্য করুন যে করে সন্ধানের জন্য প্রোটোটাইপ শৃঙ্খল setters । যদি কিছু না পাওয়া যায় তবে এটি রিসিভারে একটি সম্পত্তি তৈরি করে।
বার্গি

21

আমি @ স্কট ড্রস্কল উত্তরে জাভাস্ক্রিপ্ট সহ প্রোটোটাইপিকাল উত্তরাধিকারের উদাহরণ যুক্ত করতে চাই। আমরা অবজেক্ট.ক্রিয়েট () সহ ধ্রুপদী উত্তরাধিকারের ধরণটি ব্যবহার করব যা ইকামাস্ক্রিপ্ট 5 স্পেসিফিকেশনের একটি অংশ।

প্রথমে আমরা "প্যারেন্ট" অবজেক্ট ফাংশন তৈরি করি

function Parent(){

}

তারপরে "অভিভাবক" অবজেক্ট ফাংশনে একটি প্রোটোটাইপ যুক্ত করুন

 Parent.prototype = {
 primitive : 1,
 object : {
    one : 1
   }
}

"শিশু" অবজেক্ট ফাংশন তৈরি করুন

function Child(){

}

চাইল্ড প্রোটোটাইপ বরাদ্দ করুন (চাইল্ড প্রোটোটাইপকে প্যারেন্ট প্রোটোটাইপের উত্তরাধিকারী করুন)

Child.prototype = Object.create(Parent.prototype);

যথাযথ "চাইল্ড" প্রোটোটাইপ কনস্ট্রাক্টর অর্পণ করুন

Child.prototype.constructor = Child;

একটি শিশু প্রোটোটাইপ পদ্ধতিতে "চেঞ্জপ্রপ্রোস" যুক্ত করুন, যা চাইল্ড অবজেক্টে "আদিম" সম্পত্তির মূল্য পুনরায় লিখবে এবং শিশু এবং পিতামাতার উভয় ক্ষেত্রে "অবজেক্ট.এন" মান পরিবর্তন করবে which

Child.prototype.changeProps = function(){
    this.primitive = 2;
    this.object.one = 2;
};

অভিভাবক (বাবা) এবং শিশু (পুত্র) অবজেক্টগুলি সূচনা করুন।

var dad = new Parent();
var son = new Child();

শিশু (পুত্র) চেঞ্জপ্রপস পদ্ধতিতে কল করুন

son.changeProps();

ফলাফলগুলি পরীক্ষা করুন।

মূল আদিম সম্পত্তি পরিবর্তন হয় নি

console.log(dad.primitive); /* 1 */

শিশু আদিম সম্পত্তি পরিবর্তিত (পুনর্লিখিত)

console.log(son.primitive); /* 2 */

পিতামাতা এবং শিশু অবজেক্ট.এর বৈশিষ্ট্যগুলি পরিবর্তিত হয়েছে

console.log(dad.object.one); /* 2 */
console.log(son.object.one); /* 2 */

এখানে কাজের উদাহরণ http://jsbin.com/xexurukiso/1/edit/

অবজেক্ট.ক্রিয়েট সম্পর্কিত আরও তথ্য এখানে https://developer.mozilla.org/en/docs/Web/ জাভা স্ক্রিপ্ট / রেফারেন্স / গ্লোবাল_অবজেক্টস / অবজেক্ট / ক্রিয়েট

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.