AngularJSරාමුව තුළ දත්ත බන්ධන ක්‍රියා කරන්නේ කෙසේද ?

මම ඔවුන්ගේ වෙබ් අඩවියේ තාක්ෂණික තොරතුරු සොයාගෙන නැත . දෘෂ්ටි කෝණයෙන් ආකෘතිය දක්වා දත්ත ප්‍රචාරය කරන විට එය ක්‍රියා කරන ආකාරය වැඩි වශයෙන් හෝ අඩු වශයෙන් පැහැදිලි ය. නමුත් AngularJS විසින් සැකසුම්කරුවන් සහ ලබා ගන්නන් නොමැතිව ආදර්ශ ගුණාංග වෙනස් කරන්නේ කෙසේද?

මෙම කාර්යය කළ හැකි ජාවාස්ක්‍රිප්ට් මුරකරුවන් සිටින බව මට පෙනී ගියේය . නමුත් ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 6 සහ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 7 හි ඒවාට සහය නොදක්වයි . ඉතින් මම පහත සඳහන් දේ වෙනස් කර දෘෂ්ටියක මෙම වෙනස පිළිබිඹු කළ බව AngularJS දැන ගන්නේ කෙසේද?

myobject.myproperty="new value";

AngularJS අගය මතක තබා එය පෙර අගයකට සංසන්දනය කරයි. මෙය මූලික අපිරිසිදු පරීක්ෂාවකි. වටිනාකමෙහි වෙනසක් තිබේ නම්, එය වෙනස් කිරීමේ සිදුවීමට වෙඩි තබයි.

මෙම $apply()ඔබ ඇමතුම්, ක AngularJS ලෝකයට-AngularJS නොවන ලෝකයේ සිට සංක්රමණය වූ විට ඔබ හඳුන්වන දේ වන ක්රමය, $digest(). ඩයිජෙස්ට් යනු පැරණි අපිරිසිදු පරීක්ෂාවකි. එය සියලුම බ්‍රව්සර්වල ක්‍රියාත්මක වන අතර එය සම්පූර්ණයෙන්ම පුරෝකථනය කළ හැකිය.

අපිරිසිදු පරීක්ෂාවට (AngularJS) එදිරිව වෙනස්වන සවන්දෙන්නන්ට ( KnockoutJS සහ Backbone.js ) වෙනස් කිරීම සඳහා: අපිරිසිදු පරීක්ෂාව සරල බවක් පෙනෙන්නට තිබුණත්, අකාර්යක්ෂම වුවත් (මම පසුව එය අමතන්නෙමි), එය සෑම විටම අර්ථාන්විතව නිවැරදි බව පෙනේ, වෙනස්වන සවන්දෙන්නන්ට අමුතු කොන අවස්ථා රාශියක් ඇති අතර එය වඩාත් අර්ථාන්විතව නිවැරදි කිරීම සඳහා පරායත්ත ලුහුබැඳීම වැනි දේවල් අවශ්‍ය වේ. KnockoutJS පරායත්ත ලුහුබැඳීම යනු AngularJS සතුව නොමැති ගැටළුවක් සඳහා දක්ෂ ලක්ෂණයකි.

වෙනස්වන සවන්දෙන්නන් සමඟ ගැටළු:

• බ්‍රව්සර් එයට ස්වදේශීයව සහාය නොදක්වන බැවින් සින්ටැක්ස් කුරිරු ය. ඔව්, ප්‍රොක්සි ඇත, නමුත් ඒවා සෑම අවස්ථාවකම අර්ථ නිරූපණය නොවේ, ඇත්ත වශයෙන්ම පැරණි බ්‍රව්සර්වල ප්‍රොක්සි නොමැත. අවසාන කරුණ නම් , අපිරිසිදු පරීක්ෂාව මඟින් ඔබට POJO කිරීමට ඉඩ ලබා දෙන අතර, KnockoutJS සහ Backbone.js ඔවුන්ගේ පන්ති වලින් උරුම කර ගැනීමට ඔබට බල කරන අතර ඔබේ දත්ත ප්‍රවේශ කරන්නන් හරහා ලබා ගත හැකිය.
• සහජීවනය වෙනස් කරන්න. ඔබට අයිතම රාශියක් ඇතැයි සිතමු. ඔබ එකතු කිරීමට ලූපයක් ලෙස, අරාවකට අයිතම එකතු කිරීමට ඔබට අවශ්‍ය යැයි පවසන්න, ඔබ එක් කරන සෑම අවස්ථාවකම ඔබ වෙනස්වීම් මත සිදුවීම් වෙඩි තබයි, එය UI විදැහුම් කරයි. කාර්ය සාධනය සඳහා මෙය ඉතා නරක ය. ඔබට අවශ්‍ය වන්නේ UI යාවත්කාලීන කිරීම එක් වරක් පමණි, අවසානයේ. වෙනස් කිරීමේ සිදුවීම් ඉතා සියුම් ය.
• වෙනස්වන සවන්දෙන්නන්ට දත්ත තවදුරටත් වෙනස් කළ හැකි බැවින්, වෙනස්වන සිදුවීම් වලට වෙඩි තබන බැවින්, සවන්දෙන්නන් වහාම සෙටරයකට වෙඩි තබන්න. මෙය නරක ය, මන්දයත් ඔබට එකවර සිදුවීම් කිහිපයක් සිදුවිය හැකි බැවිනි. ඔබට කුමන හේතුවක් නිසා සමමුහුර්තව තබා ගත යුතු අරා දෙකක් ඇතැයි සිතමු. ඔබට එක් හෝ තවත් දෙයකට පමණක් එකතු කළ හැකිය, නමුත් ඔබ එක් කරන සෑම අවස්ථාවකම වෙනස්වන සිදුවීමක් ගිනි තබයි, එය දැන් ලෝකය පිළිබඳ නොගැලපෙන දැක්මක් ඇත. මෙය නූල් අගුලු දැමීමට බෙහෙවින් සමාන ගැටළුවක් වන අතර, සෑම ඇමතුමක්ම තනිකරම සහ සම්පූර්ණ කිරීම නිසා ජාවාස්ක්‍රිප්ට් වළක්වයි. වෙනස් කිරීමේ සිදුවීම් මෙය බිඳ දමන්නේ, සැකසෙන්නන්ට දුරදිග යන ප්‍රතිවිපාක ඇති විය හැකි අතර ඒවා අපේක්ෂිත හා පැහැදිලි නොවන අතර එමඟින් නූල් ගැටළුව නැවත නැවතත් නිර්මාණය වේ. ඔබට කිරීමට අවශ්‍ය වන්නේ සවන්දෙන්නන්ගේ ution ාතනය ප්‍රමාද කිරීම සහ සහතික කිරීම,

කාර්ය සාධනය ගැන කුමක් කිව හැකිද?

එබැවින් අපිරිසිදු පරීක්ෂාව අකාර්යක්ෂම බැවින් අප මන්දගාමී බව පෙනේ. න්‍යායාත්මක තර්ක වලට වඩා තාත්වික සංඛ්‍යා දෙස බැලිය යුතු ස්ථානය මෙයයි, නමුත් පළමුව අපි යම් සීමාවන් නිර්වචනය කරමු.

මිනිසුන් නම්:

• මන්දගාමී - එම්එස් 50 ට වඩා වේගවත් ඕනෑම දෙයක් මිනිසුන්ට නොපෙනෙන අතර එබැවින් එය "ක්ෂණික" ලෙස සැලකිය හැකිය.

• සීමිතයි - ඔබට එක් පිටුවක තොරතුරු 2000 කට වඩා වැඩි ප්‍රමාණයක් මිනිසෙකුට පෙන්විය නොහැක. ඊට වඩා වැඩි යමක් ඇත්තෙන්ම නරක UI වන අතර මිනිසුන්ට මෙය කෙසේ හෝ සැකසිය නොහැක.

ඉතින් ඇත්ත ප්‍රශ්නය මෙයයි: බ්‍රව්සරයක ඔබට එම්එස් 50 කින් සැසඳීම් කීයක් කළ හැකිද? බොහෝ සාධක ක්‍රියාත්මක වන බැවින් මෙය පිළිතුරු දීමට අසීරු ප්‍රශ්නයකි, නමුත් මෙන්න පරීක්ෂණ අවස්ථාවකි: http://jsperf.com/angularjs-digest/6 එය මුරකරුවන් 10,000 ක් නිර්මාණය කරයි. නවීන බ්‍රව්සරයක මෙය එම්එස් 6 ට අඩු වේ. මත Internet Explorer 8 එය ms 40 ක් පමණ ගත වේ. ඔබට පෙනෙන පරිදි, මේ දිනවල මන්දගාමී බ්‍රව්සර්වල පවා මෙය ගැටළුවක් නොවේ. අවවාදයක් තිබේ: සැසඳීම් කාල සීමාවට සරිලන සේ සරල විය යුතුය ... අවාසනාවකට AngularJS සමඟ මන්දගාමී සංසන්දනයක් එක් කිරීම පහසු නැත, එබැවින් ඔබ කුමක් දැයි නොදන්නා විට මන්දගාමී යෙදුම් තැනීම පහසුය. කරනවා. නමුත් මන්දගාමී සැසඳීම් මොනවාදැයි ඔබට පෙන්වන මෙවලම් මොඩියුලයක් ලබා දීමෙන් පිළිතුරක් ලබා ගැනීමට අපි බලාපොරොත්තු වෙමු.

වීඩියෝ ක්‍රීඩා සහ GPUs අපිරිසිදු පිරික්සුම් ප්‍රවේශය භාවිතා කරන බව පෙනේ, විශේෂයෙන් එය අනුකූල බැවින්. මොනිටරයේ නැවුම් නැවුම් අනුපාතය (සාමාන්‍යයෙන් 50-60 Hz, හෝ සෑම 16.6-20 ms) ඉක්මවා යන තාක් කල්, ඊට වඩා වැඩි කාර්ය සාධනයක් නාස්තියකි, එබැවින් ඔබ FPS ඉහළ මට්ටමකට ගෙන ඒමට වඩා වැඩි දේවල් ඇඳීමට වඩා හොඳය.

මිස්කෝ දැනටමත් දත්ත බන්ධන ක්‍රියා කරන ආකාරය පිළිබඳ විශිෂ්ට විස්තරයක් ලබා දී ඇත, නමුත් දත්ත බන්ධනය සමඟ කාර්ය සාධනය පිළිබඳ මගේ දැක්ම එක් කිරීමට මම කැමතියි.

මිස්කෝ ප්‍රකාශ කළ පරිදි, බන්ධන 2000 ක් පමණ ඔබ ගැටළු දැකීමට පටන් ගනී, නමුත් ඔබට කෙසේ හෝ පිටුවක තොරතුරු කෑලි 2000 කට වඩා නොතිබිය යුතුය. මෙය සත්‍ය විය හැකි නමුත් සෑම දත්ත බන්ධනයක්ම පරිශීලකයාට නොපෙනේ. ඔබ ද්වි-මාර්ග බන්ධනයකින් ඕනෑම ආකාරයක විජට් හෝ දත්ත ජාලයක් තැනීමට පටන් ගත් පසු නරක යූඑක්ස් නොමැතිව ඔබට පහසුවෙන් බන්ධන 2000 ක් පහර දිය හැකිය .

නිදසුනක් ලෙස, පවතින විකල්ප පෙරීමට ඔබට පෙළ ටයිප් කළ හැකි කොම්බෝ කොටුවක් සලකා බලන්න. මෙම වර්ගයේ පාලනයට ඩොලර් 150 ක අයිතම තිබිය හැකි අතර එය තවමත් බෙහෙවින් භාවිතා කළ හැකිය. එයට අමතර අංගයක් තිබේ නම් (නිදසුනක් ලෙස දැනට තෝරාගෙන ඇති විකල්පය පිළිබඳ විශේෂිත පංතියක්) ඔබ එක් විකල්පයකට 3-5 බැඳුම්කර ලබා ගැනීමට පටන් ගනී. මෙම විජට් තුනක් පිටුවක තබන්න (උදා: රටක් තෝරා ගැනීමට, අනෙක එම රටේ නගරයක් තෝරා ගැනීමට, සහ තුන්වැන්න හෝටලයක් තෝරා ගැනීමට) සහ ඔබ දැනටමත් බන්ධන 1000 ත් 2000 ත් අතර වේ.

නැතහොත් ආයතනික වෙබ් යෙදුමක දත්ත ජාලයක් සලකා බලන්න. පිටුවකට පේළි 50 ක් අසාධාරණ නොවේ, ඒ සෑම තීරුවකටම තීරු 10-20 ක් තිබිය හැකිය. ඔබ මෙය ng- පුනරාවර්තනයන් සමඟ ගොඩනඟන්නේ නම් සහ / හෝ සමහර බන්ධන භාවිතා කරන සමහර සෛලවල තොරතුරු තිබේ නම්, ඔබට මෙම ජාලකය සමඟ පමණක් බන්ධන 2000 ක් වෙත ළඟා විය හැකිය.

AngularJS සමඟ වැඩ කිරීමේදී මෙය විශාල ගැටළුවක් බව මට පෙනී යන අතර, මෙතෙක් මට සොයාගත හැකි එකම විසඳුම වන්නේ ngOnce භාවිතා කිරීම වෙනුවට, ද්වි-මාර්ග බන්ධන භාවිතා නොකර විජට් සෑදීම, නරඹන්නන් සහ ඒ හා සමාන උපක්‍රම ඉවත් කිරීම හෝ ඉදිකිරීම ය. jQuery සහ DOM හැසිරවීම සමඟ DOM ගොඩනඟන නියෝග. මට හැඟෙන්නේ මෙය මුලින් කෝණික භාවිතා කිරීමේ අරමුණ පරාජය කරන බවයි.

මෙය හැසිරවිය හැකි වෙනත් ක්‍රම පිළිබඳ යෝජනා ඇසීමට මා කැමතිය, නමුත් සමහර විට මම මගේම ප්‍රශ්නයක් ලිවිය යුතුය. මට මෙය අදහස් දැක්වීමට අවශ්‍ය විය, නමුත් එය ඒ සඳහා බොහෝ කාලයක් ගත විය ...

TL; DR
දත්ත බන්ධනය සංකීර්ණ පිටුවල කාර්ය සාධන ගැටළු ඇති කළ හැකිය.

අපිරිසිදු $scopeවස්තුව පරීක්ෂා කිරීමෙන්

කෝණික arrayමඟින් $scopeවස්තූන්හි මුරකරුවන් සරල ලෙස පවත්වා ගනී . ඔබ කිසියම් දෙයක් පරීක්ෂා කළහොත් $scopeඑහි arrayඇමතුමක් ඇති බව ඔබට පෙනී යනු $$watchersඇත.

සෑම මුරකරුවෙකුම objectවෙනත් දේ අතර අඩංගු වේ

1. මුරකරු නිරීක්ෂණය කරන ප්‍රකාශනයකි. මෙය attributeනමක් හෝ වඩාත් සංකීර්ණ දෙයක් විය හැකිය.
2. ප්‍රකාශනයේ අවසාන දන්නා වටිනාකම. ප්‍රකාශනයේ වත්මන් ගණනය කළ අගයට සාපේක්ෂව මෙය පරීක්ෂා කළ හැකිය. අගයන් වෙනස් නම් මුරකරු ශ්‍රිතය අවුලුවන අතර එය $scopeඅපිරිසිදු ලෙස සලකුණු කරයි .
3. මුරකරු අපිරිසිදු නම් එය ක්‍රියාත්මක කරනු ඇත.

මුරකරුවන් නිර්වචනය කරන්නේ කෙසේද

AngularJS හි මුරකරුවෙකු අර්ථ දැක්වීමට විවිධ ක්‍රම තිබේ.

• ඔබ සුවිශේෂව හැකි $watchවූ attributeමත $scope.

    $scope.$watch('person.username', validateUnique);

• {{}}ඔබේ අච්චුව තුළ ඔබට අන්තර් සම්බන්ධතාවයක් තැබිය හැකිය (ධාරාව මත ඔබ වෙනුවෙන් මුරකරුවෙකු නිර්මාණය වනු ඇත $scope).

    <p>username: {{person.username}}</p>

• ඔබ ng-modelවෙනුවෙන් මුරකරු නිර්වචනය කිරීම වැනි නියෝගයක් ඉල්ලා සිටිය හැකිය .

    <input ng-model="person.username" />

මෙම $digestචක්රය ඔවුන්ගේ අවසන් අගය එරෙහි සියලු නිරීක්ෂකයෝ පරික්ෂා

අපි සාමාන්‍ය නාලිකා (ng-model, ng-පුනරාවර්තනය, ආදිය) හරහා AngularJS සමඟ අන්තර්ක්‍රියා කරන විට, ඩයිජෙස්ට් චක්‍රයක් නියෝගයෙන් අවුලුවනු ඇත.

ඩයිජෙස්ට් චක්‍රයක් යනු එහි පළමු $scopeහා එහි සියලු දරුවන්ගේ ගැඹුරට ගමන් කිරීමයි . එක් එක් සඳහා $scope object, අපි එය ඉක්මවා නැවත $$watchers arrayසියලු ප්‍රකාශන ඇගයීමට ලක් කරමු. නව ප්‍රකාශන අගය අවසන් වරට දන්නා අගයට වඩා වෙනස් නම්, මුරකරුගේ ශ්‍රිතය හැඳින්වේ. මෙම ශ්‍රිතය DOM හි කොටසක් නැවත සකස් කිරීම, වටිනාකමක් නැවත ගණනය කිරීම $scope, AJAX requestඔබට අවශ්‍ය ඕනෑම දෙයක් අවුලුවාලීම .

සෑම විෂය පථයක්ම ගමන් කරන අතර සෑම ඔරලෝසු ප්‍රකාශනයක්ම අවසාන අගයට සාපේක්ෂව ඇගයීමට ලක් කරනු ලැබේ.

මුරකරුවෙකු අවුලුවනු ලැබුවහොත් $scopeඑය අපිරිසිදු ය

මුරකරුවෙකු අවුලුවනු ලැබුවහොත්, යමක් වෙනස් වී ඇති බව යෙදුම දනී, $scopeඑය අපිරිසිදු ලෙස සලකුණු කර ඇත.

මුරකරුගේ ක්‍රියාකාරිත්වයන් $scopeදෙමව්පියන් මත හෝ වෙනත් ගුණාංග වෙනස් කළ හැකිය $scope. එක් $watcherශ්‍රිතයක් අවුලුවනු ලැබුවහොත් , අපගේ අනෙක් $scopeඒවා තවමත් පිරිසිදු බව අපට සහතික කළ නොහැක , එබැවින් අපි සම්පූර්ණ ඩයිජස්ට් චක්‍රය නැවත ක්‍රියාත්මක කරමු.

මෙයට හේතුව AngularJS සතුව ද්වි-මාර්ග බන්ධනයක් ඇති බැවින් දත්ත නැවත $scopeගස වෙත යැවිය හැකිය . $scopeදැනටමත් ජීර්ණය කර ඇති ඉහළ අගයක් අපි වෙනස් කළ හැකිය . සමහර විට අපි එහි අගය වෙනස් කරමු $rootScope.

නම් $digestඅපිරිසිදු වන අතර, අපි මුළු ක්රියාත්මක $digestනැවත චක්රය

$digestඩයිජෙස්ට් චක්‍රය පිරිසිදුව පැමිණෙන තෙක් අපි නොකඩවා චක්‍රය හරහා ගමන් කරන්නෙමු (සියලුම $watchප්‍රකාශනවල පෙර චක්‍රයේ තිබූ අගයට සමාන අගයක් ඇත), නැතහොත් අපි ජීර්ණ සීමාවට ළඟා වෙමු. පෙරනිමියෙන්, මෙම සීමාව 10 ලෙස සකසා ඇත.

අප ජීර්ණ සීමාවට ළඟා වුවහොත් AngularJS කොන්සෝලය තුළ දෝෂයක් මතු කරයි:

10 $digest() iterations reached. Aborting!

ඩයිජෙස්ට් යන්ත්‍රය අමාරු නමුත් සංවර්ධකයාට පහසුය

ඔබට පෙනෙන පරිදි, AngularJS යෙදුමක යම් දෙයක් වෙනස් වන සෑම අවස්ථාවකම, AngularJS විසින් $scopeධූරාවලියේ සෑම මුරකරුවෙකුම පරීක්ෂා කර ප්‍රතිචාර දක්වන්නේ කෙසේදැයි බැලීමට. සංවර්ධකයෙකු සඳහා මෙය දැවැන්ත tivity ලදායිතා වරප්‍රසාදයක් වන අතර, ඔබට දැන් රැහැන් කේතයක් ලිවීමට අවශ්‍ය නොවන බැවින්, අගයක් වෙනස් වී ඇත්දැයි AngularJS විසින් දකිනු ඇති අතර ඉතිරි යෙදුම වෙනස්වීමට අනුකූල වේ.

යන්ත්‍රයේ දෘෂ්ටි කෝණයෙන් බැලූ විට මෙය එතරම් අකාර්යක්ෂම වන අතර අප ඕනෑවට වඩා මුරකරුවන් නිර්මාණය කළහොත් අපගේ යෙදුම මන්දගාමී වනු ඇත. ඔබගේ යෙදුම පැරණි බ්‍රව්සර්වල මන්දගාමී බවක් දැනීමට පෙර මිස්කෝ මුරකරුවන් 4000 ක් පමණ උපුටා දක්වා ඇත.

උදාහරණයක් ලෙස ඔබ ng-repeatවිශාල ප්‍රමාණයක් ඉක්මවා ගියහොත් මෙම සීමාව ළඟා වීම පහසුය JSON array. මුරකරුවන් නිර්මාණය නොකර අච්චුවක් සම්පාදනය කිරීම සඳහා එක් වරක් බැඳීම වැනි අංග භාවිතා කරමින් ඔබට මෙය අවම කර ගත හැකිය.

ඕනෑවට වඩා මුරකරුවන් ඇතිවීම වළක්වා ගන්නේ කෙසේද

ඔබගේ පරිශීලකයා ඔබගේ යෙදුම සමඟ අන්තර්ක්‍රියා කරන සෑම අවස්ථාවකම, ඔබගේ යෙදුමේ සෑම මුරකරුවෙකුම අවම වශයෙන් එක් වරක්වත් ඇගයීමට ලක් කරනු ඇත. AngularJS යෙදුමක් ප්‍රශස්තිකරණය කිරීමේ විශාල කොටසක් වන්නේ ඔබේ $scopeගසෙහි මුරකරුවන්ගේ සංඛ්‍යාව අඩු කිරීමයි . මෙය කිරීමට එක් පහසු ක්‍රමයක් වන්නේ එක් වරක් බැඳීමයි .

ඔබට කලාතුරකින් වෙනස් වන දත්ත තිබේ නම්, ඔබට එය බැඳ තැබිය හැක්කේ :: සින්ටැක්ස් භාවිතා කිරීමෙන් එක් වරක් පමණි:

<p>{{::person.username}}</p>

හෝ

<p ng-bind="::person.username"></p>

බන්ධනය අවුලුවනු ලබන්නේ අඩංගු අච්චුව විදැහුම් කර දත්ත පටවන විට පමණි $scope.

ඔබට ng-repeatබොහෝ අයිතම ඇති විට මෙය විශේෂයෙන් වැදගත් වේ.

<div ng-repeat="person in people track by username">
  {{::person.username}}
</div>

මෙය මගේ මූලික අවබෝධයයි. එය වැරදියි!

1. ශ්‍රිතයක් (නැරඹිය යුතු දේ නැවත ලබා දීම) $watchක්‍රමයට යොමු කිරීමෙන් අයිතම නැරඹිය හැකිය .
2. නරඹන ලද අයිතමවල වෙනස්කම් $applyක්‍රමවේදය මගින් ඔතා ඇති කේතයක් තුළ කළ යුතුය .
3. මෙම අවසානයේ $applyඇති $digestක්රමය ඔවුන් පසුගිය කාලය සිට වෙනස් කියා බැලීමට ඔරෙලෝසු සහ චෙක්පත් එක් එක් හරහා යයි කරන ආයාචනා කරයි $digestදිව ගියේය.
4. කිසියම් වෙනස්කමක් හමු වුවහොත්, සියලු වෙනස්වීම් ස්ථාවර වන තෙක් නැවත ජීර්ණය කැඳවනු ලැබේ.

සාමාන්‍ය සංවර්ධනයේදී, HTML හි දත්ත බන්ධන සින්ටැක්ස් ඔබ සඳහා ඔරලෝසු නිර්මාණය කරන ලෙස AngularJS සම්පාදකයාට පවසන අතර පාලක ක්‍රම $applyදැනටමත් ක්‍රියාත්මක වේ. එබැවින් යෙදුම් සංවර්ධකයාට එය සියල්ලම විනිවිද පෙනෙන ය.

මම මේ ගැන ටික වේලාවක් කල්පනා කළෙමි. සැකසුම් නොමැතිව වස්තුවෙහි AngularJSදැනුම් දීම් වෙනස් වන්නේ $scopeකෙසේද? එය ඔවුන්ව ඡන්දය ප්‍රකාශ කරයිද?

එය සැබවින්ම කරන්නේ මෙයයි: ඔබ ආකෘතිය වෙනස් කරන ඕනෑම "සාමාන්‍ය" ස්ථානයක් දැනටමත් ධෛර්යයෙන් කැඳවා ඇත AngularJS, එබැවින් $applyඔබේ කේතය ක්‍රියාත්මක වූ පසු එය ස්වයංක්‍රීයව ඔබෙන් ඉල්ලා සිටී . ඔබේ පාලකයට ng-clickකිසියම් මූලද්‍රව්‍යයක් සමඟ සම්බන්ධ වී ඇති ක්‍රමයක් ඇති බව පවසන්න . නිසා AngularJSඑම ඔබට එකට බව ක්රමය ඉල්ලා වයර්, එය ඉටු කර ගත හැකි අවස්ථාවක් තිබේ $applyසුදුසු ස්ථානයක. ඒ හා සමානව, අදහස්වල නිවැරදිව පෙනෙන ප්‍රකාශන සඳහා, ඒවා ක්‍රියාත්මක වන්නේ AngularJSඑමඟින් එය සිදු වේ $apply.

ප්‍රලේඛනය පිටත$apply කේත සඳහා අතින් ඇමතීම ගැන කතා කරන විට, එය කතා කරන්නේ කේතය ගැන වන අතර එය ක්‍රියාත්මක වන විට ඇමතුම් තොගයේම පැන නගින්නේ නැත.AngularJSAngularJS

පින්තූර සමඟ පැහැදිලි කිරීම:

දත්ත බන්ධනයට සිතියම් ගත කිරීම අවශ්‍ය වේ

විෂය පථයේ සඳහන හරියටම අච්චුවේ සඳහන නොවේ. ඔබ වස්තු දෙකක් දත්ත බන්ධනය කරන විට, ඔබට පළමුවැන්නාට සවන් දී අනෙක වෙනස් කරන තුන්වන එකක් අවශ්‍ය වේ.

මෙන්න, ඔබ වෙනස් කරන විට <input>, ඔබ දත්ත- ref3 ස්පර්ශ කරන්න . සම්භාව්‍ය දත්ත බන්ධන මෙකනිස්වාදය දත්ත-රී 4 වෙනස් කරයි . ඉතින් කොහොමද අනෙකා{{data}} ප්‍රකාශන චලනය වන්නේ කෙසේද?

සිදුවීම් $ ඩයිජෙස්ට් () වෙත යොමු කරයි

කෝණික සෑම බන්ධනයක්ම a oldValueසහ පවත්වා ගනී newValue. සෑම කෝණික සිදුවීමකටම පසුව , ප්‍රසිද්ධ $digest()ලූපය යමක් වෙනස් වී ඇත්දැයි බැලීමට මුර-ලැයිස්තුව පරීක්ෂා කරයි. මෙම ෙකෝණික සිද්ධීන් වේ ng-click, ng-change, $httpඅවසන් ... මේ $digest()ඕනෑම තාක් කල් කැමැත්ත පුඩුවක් oldValueවඩා වෙනස්newValue .

පෙර පින්තූරයේ, දත්ත- ref1 සහ දත්ත-ref2 වෙනස් වී ඇති බව පෙනෙනු ඇත.

නිගමන

එය බිත්තර හා කුකුල් මස් වගේ. ආරම්භ කරන්නේ කවුරුන්දැයි ඔබ කවදාවත් නොදනී, නමුත් බලාපොරොත්තු වන පරිදි එය බොහෝ විට ක්‍රියාත්මක වේ.

අනෙක් කරුණ නම්, මතකය හා CPU මත සරල බන්ධනයක ගැඹුර ඔබට පහසුවෙන් තේරුම් ගත හැකි වීමයි. මෙය හැසිරවීමට තරම් ඩෙස්ක්ටොප් මේදය ප්‍රමාණවත් යැයි සිතමු. ජංගම දුරකථන එතරම් ශක්තිමත් නැත.

නිසැකවම එයට Scopeඅනුයුක්ත වස්තූන්ගේ වෙනසක් තිබේදැයි වරින් වර පරීක්ෂා කිරීමක් සිදු නොවේ. විෂය පථයට අමුණා ඇති සියලුම වස්තූන් නරඹන්නේ නැත. විෂය පථය මූලාකෘතිමය වශයෙන් $$ මුරකරුවන් නඩත්තු කරයි . Scopeමෙය සිදු $$watchersවන්නේ කවදාද?$digestකැඳවූ ක්‍රියාත්මක වේ.

කෝණික මේ සෑම එකක් සඳහාම $$ මුරකරුවන්ට මුරකරුවෙකු එක් කරයි

1. temp {ප්‍රකාශනය}} - ඔබගේ සැකිලි වල (සහ ප්‍රකාශනයක් ඇති වෙනත් ඕනෑම තැනක) හෝ අපි ng- ආකෘතිය නිර්වචනය කරන විට.
   
2. $ විෂය පථය.

$ ඔරලෝසු ශ්‍රිතය පරාමිති තුනකින් ගනී:

1. පළමුවැන්න මුරකරුගේ ශ්‍රිතයක් වන අතර එය වස්තුව නැවත ලබා දෙයි, නැතහොත් අපට ප්‍රකාශනයක් එක් කළ හැකිය.
   

2. දෙවැන්න සවන්දීමේ ශ්‍රිතයක් වන අතර එය වස්තුවෙහි වෙනසක් සිදු වූ විට හැඳින්වේ. DOM වෙනස්කම් වැනි සියලු දේ මෙම ශ්‍රිතය තුළ ක්‍රියාත්මක වේ.
   

3. තෙවැන්න බූලියන් එකක් ගන්නා විකල්ප පරාමිතියකි. එහි සත්‍ය නම්, කෝණික ගැඹුර වස්තුව දෙස බලා සිටී නම් සහ එහි ව්‍යාජ කෝණික මඟින් වස්තුව දෙස බැලීමක් කරයි. $ ඔරලෝසුව දළ වශයෙන් ක්‍රියාත්මක කිරීම මේ වගේ ය

Scope.prototype.$watch = function(watchFn, listenerFn) {
   var watcher = {
       watchFn: watchFn,
       listenerFn: listenerFn || function() { },
       last: initWatchVal  // initWatchVal is typically undefined
   };
   this.$$watchers.push(watcher); // pushing the Watcher Object to Watchers  
};

කෝණිකයේ ඩයිජෙස්ට් සයිකල් නමින් රසවත් දෙයක් තිබේ. $ ඩයිජෙස්ට් චක්‍රය ආරම්භ වන්නේ $ විෂය පථයට ඇමතුමක ප්‍රති as ලයක් වශයෙනි. Ng-click විධානය හරහා ඔබ හසුරුවන ශ්‍රිතයක $ විෂය පථය වෙනස් කරයි යැයි උපකල්පනය කරන්න. එවැනි අවස්ථාවකදී AngularJS ස්වයංක්‍රීයව $ ඩයිජෙස්ට් චක්‍රයක් අවුලුවයි $ ඩයිජෙස්ට් () ඇමතීමෙන්. ස්වයංක්‍රීයව $ ජීර්ණ චක්‍රයක් අවුලුවයි. $ ඩයිජෙස්ට් දළ වශයෙන් ක්‍රියාත්මක කිරීම මේ වගේ ය.

Scope.prototype.$digest = function() {
      var dirty;
      do {
          dirty = this.$$digestOnce();
      } while (dirty);
}
Scope.prototype.$$digestOnce = function() {
   var self = this;
   var newValue, oldValue, dirty;
   _.forEach(this.$$watchers, function(watcher) {
          newValue = watcher.watchFn(self);
          oldValue = watcher.last;   // It just remembers the last value for dirty checking
          if (newValue !== oldValue) { //Dirty checking of References 
   // For Deep checking the object , code of Value     
   // based checking of Object should be implemented here
             watcher.last = newValue;
             watcher.listenerFn(newValue,
                  (oldValue === initWatchVal ? newValue : oldValue),
                   self);
          dirty = true;
          }
     });
   return dirty;
 };

විෂය පථ ආකෘතියක් යාවත්කාලීන කිරීම සඳහා අපි ජාවාස්ක්‍රිප්ට් හි සෙට් ටයිමූට් () ශ්‍රිතය භාවිතා කරන්නේ නම් , ඔබට වෙනස් විය හැකි දේ දැන ගැනීමට කෝණිකයට ක්‍රමයක් නොමැත. මෙම අවස්ථාවේ දී $ අයදුම් කිරීමේ () අතින් ඇමතීම අපගේ වගකීම වන අතර එය $ ජීර්ණ චක්‍රයක් අවුලුවයි. ඒ හා සමානව, ඔබට DOM සිදුවීම් සවන්දෙන්නෙකු සැකසීමට සහ හසුරුවන්නාගේ ක්‍රියාකාරිත්වය තුළ සමහර මාදිලි වෙනස් කිරීමට නියෝගයක් තිබේ නම්, වෙනස්කම් ක්‍රියාත්මක වන බව සහතික කිරීම සඳහා ඔබ $ apply () අමතන්න. $ අයදුම් කිරීමේ විශාල අදහස නම්, අපට කෝණික නොදන්නා කේත කිහිපයක් ක්‍රියාත්මක කළ හැකිය, එම කේතය තවමත් විෂය පථයේ දේවල් වෙනස් කළ හැකිය. අපි එම කේතය $ අයදුම් කරන්නේ නම්, එය call ඩයිජෙස්ට් () ඇමතීමට වගබලා ගනී. දළ වශයෙන් ක්‍රියාත්මක කිරීම $ apply ().

Scope.prototype.$apply = function(expr) {
       try {
         return this.$eval(expr); //Evaluating code in the context of Scope
       } finally {
         this.$digest();
       }
};

AngularJS ප්‍රබල කාර්යයන් තුනක ආධාරයෙන් දත්ත බන්ධන යාන්ත්‍රණය හසුරුවයි: $ watch () , $ digest () සහ $ apply () . බොහෝ විට AngularJS විසින් $ විෂය පථය. $ ඔරලෝසුව () සහ $ විෂය පථය. $ ඩයිජෙස්ට් () ලෙස හඳුන්වනු ඇත, නමුත් සමහර අවස්ථාවලදී නව අගයන් සමඟ යාවත්කාලීන කිරීම සඳහා ඔබට මෙම කාර්යයන් අතින් ඇමතිය යුතුය.

$ ඔරලෝසුව () : -

Function විෂය පථයේ විචල්‍යයක වෙනස්කම් නිරීක්ෂණය කිරීමට මෙම ශ්‍රිතය භාවිතා කරයි. එය පරාමිති තුනක් පිළිගනී: ප්‍රකාශනය, සවන්දෙන්නන් සහ සමානාත්මතා වස්තුව, එහිදී සවන්දෙන්නන් සහ සමානාත්මතා වස්තුව විකල්ප පරාමිතීන් වේ.

$ ජීර්ණය () -

මෙම ශ්‍රිතය $ විෂය පථයේ ඇති සියලුම ඔරලෝසු සහ එහි ළමා $ විෂය පථ වස්තු
(එය තිබේ නම්) හරහා නැවත ක්‍රියාත්මක වේ. $ ඩයිජෙස්ට් () ඔරලෝසු හරහා නැවත යෙදෙන විට, ප්‍රකාශනයේ වටිනාකම වෙනස් වී ඇත්දැයි පරීක්ෂා කරයි. අගය වෙනස් වී ඇත්නම්, AngularJS අසන්නාට නව වටිනාකමක් සහ පැරණි වටිනාකමක් ලබා දෙයි. AngularJS අවශ්‍ය යැයි සිතන සෑම විටම $ digest () ශ්‍රිතය හැඳින්වේ. උදාහරණයක් ලෙස, බොත්තමක් ක්ලික් කිරීමෙන් පසුව හෝ AJAX ඇමතුමකින් පසුව. AngularJS ඔබ වෙනුවෙන් $ digest () ශ්‍රිතය නොකියන සමහර අවස්ථා ඔබට තිබිය හැක. එවැනි අවස්ථාවක ඔබ එය ඔබම කැඳවිය යුතුය.

$ අයදුම් කරන්න () -

කෝණික ස්වයංක්‍රීයව යාවත්කාලීන කරන්නේ AngularJS සන්දර්භය තුළ ඇති ආකෘති වෙනස්වීම් පමණි. ඔබ කෝණික සන්දර්භයෙන් පිටත (බ්‍රව්සර් DOM සිදුවීම්, setTimeout, XHR හෝ තෙවන පාර්ශවීය පුස්තකාල වැනි) ඕනෑම ආකෘතියක වෙනසක් සිදු කළ විට, ඔබ $ apply () අතින් ඇමතීමෙන් වෙනස්කම් කෝණික වෙත දැනුම් දිය යුතුය. $ Apply () ශ්‍රිත ඇමතුම AngularJS ඇමතුම් $ ඩයිජෙස්ට් () අභ්‍යන්තරව අවසන් වූ විට, සියලු දත්ත බන්ධන යාවත්කාලීන වේ.

පෝරමයක් සමඟ පුද්ගලයෙකුගේ දත්ත ආකෘතියක් සම්බන්ධ කිරීමට මට අවශ්‍ය වූ අතර, මා කළේ දත්ත සමඟ සෘජුවම සිතියම් ගත කිරීමයි.

උදාහරණයක් ලෙස ආකෘතියට එවැනි දෙයක් තිබේ නම්:

$scope.model.people.name

පෝරමයේ පාලන ආදානය:

<input type="text" name="namePeople" model="model.people.name">

ඒ ආකාරයෙන් ඔබ වස්තු පාලකයේ අගය වෙනස් කරන්නේ නම්, මෙය දර්ශනය තුළ ස්වයංක්‍රීයව පිළිබිඹු වේ.

මා විසින් සම්මත කරන ලද උදාහරණය සේවාදායක දත්ත වලින් යාවත්කාලීන වන අතර ඔබ ලිඛිත පැටවීම් මත පදනම්ව සිප් කේතයක් සහ සිප් කේතයක් ඉල්ලා සිටින විට එම දර්ශනයට සම්බන්ධ ජනපද සහ නගර ලැයිස්තුවක් වන අතර පෙරනිමියෙන් පරිශීලකයා සමඟ පළමු අගය සකසන්න. මෙය මම ඉතා හොඳින් වැඩ කළෙමි, කුමක් සිදුවේද, angularJSසමහර විට ආකෘතිය නැවුම් කිරීමට තත්පර කිහිපයක් ගත වේ , මෙය සිදු කිරීම සඳහා දත්ත ප්‍රදර්ශනය කරන අතරතුර දඟ පන්දු යවන්නෙකු තැබිය හැකිය.

1. එක්-මාර්ග දත්ත බන්ධනය යනු දත්ත ආකෘතියෙන් අගයක් ගෙන HTML මූලද්‍රව්‍යයකට ඇතුළත් කරන ප්‍රවේශයකි. ආකෘතිය දර්ශනයෙන් යාවත්කාලීන කිරීමට ක්‍රමයක් නොමැත. එය සම්භාව්‍ය අච්චු පද්ධතිවල භාවිතා වේ. මෙම පද්ධති දත්ත එක් දිශාවකට පමණක් බන්ධනය කරයි.

2. කෝණික යෙදුම්වල දත්ත බන්ධනය යනු ආකෘතිය සහ දර්ශන සංරචක අතර දත්ත ස්වයංක්‍රීයව සමමුහුර්ත කිරීමයි.

ඔබගේ යෙදුමේ සත්‍යතාවයේ තනි ප්‍රභවයක් ලෙස ආකෘතිය සැලකීමට දත්ත බන්ධනය ඔබට ඉඩ දෙයි. දර්ශනය සෑම විටම ආකෘතියේ ප්රක්ෂේපණයකි. ආකෘතිය වෙනස් කර ඇත්නම්, දර්ශනය වෙනස පිළිබිඹු කරන අතර අනෙක් අතට.

ආදාන ක්ෂේත්‍රයක් භාවිතා කරමින් AngularJS සමඟ දත්ත බන්ධනය පිළිබඳ උදාහරණයක් මෙන්න. මම පසුව පැහැදිලි කරන්නම්

HTML කේතය

<div ng-app="myApp" ng-controller="myCtrl" class="formInput">
     <input type="text" ng-model="watchInput" Placeholder="type something"/>
     <p>{{watchInput}}</p> 
</div>

AngularJS කේතය

myApp = angular.module ("myApp", []);
myApp.controller("myCtrl", ["$scope", function($scope){
  //Your Controller code goes here
}]);

ඉහත උදාහරණයෙන් ඔබට දැකිය හැකි පරිදි, HTML මූලද්‍රව්‍යවල, විශේෂයෙන් ක්ෂේත්‍රවල සිදු වන දේ සවන් දීමට සහ නැරඹීමට AngularJS භාවිතා කරයි . යමක් සිදු වූ විට, යමක් කරන්න. අපගේ නඩුවේදී, උඩු රැවුල අංකනය භාවිතා කරමින් අපගේ දෘෂ්ටියට බැඳී ඇතng-modelinputng-model{{}} . ආදාන ක්ෂේත්‍රය තුළ ටයිප් කළ ඕනෑම දෙයක් ක්ෂණිකව තිරය මත දිස් වේ. AngularJS එහි සරලම ස්වරූපයෙන් භාවිතා කරමින් දත්ත බන්ධනයේ සුන්දරත්වය එයයි.

මෙය උපකාරී වේ යැයි සිතමි.

කෝඩපෙන් හි වැඩ කරන උදාහරණයක් බලන්න

AngularJs ද්වි-මාර්ග දත්ත බන්ධනයට සහය දක්වයි .
ඔබට දත්ත වෙත පිවිසිය හැකි ක්‍රම -> පාලකය සහ පාලකය -> බලන්න

නික්.

1)

// If $scope have some value in Controller. 
$scope.name = "Peter";

// HTML
<div> {{ name }} </div>

ඕ / පී

Peter

ඔබට කැමති ආකාරයට දත්ත බන්ධනය කළ හැකිය ng-model: -
2)

<input ng-model="name" />

<div> {{ name }} </div>

මෙන්න ඉහත උදාහරණයේ දී ආදාන පරිශීලකයා ලබා දෙන ඕනෑම දෙයක්, එය <div>ටැගයෙන් පෙනෙනු ඇත .

Html සිට පාලකය වෙත ආදානය බැඳීමට අවශ්‍ය නම්: -
3)

<form name="myForm" ng-submit="registration()">
   <label> Name </lbel>
   <input ng-model="name" />
</form>

මෙන්න ඔබට nameපාලකයේ ආදානය භාවිතා කිරීමට අවශ්‍ය නම්,

$scope.name = {};

$scope.registration = function() {
   console.log("You will get the name here ", $scope.name);
};

ng-modelඅපගේ දෘෂ්ටිය බැඳ එය ප්‍රකාශනයෙන් ඉදිරිපත් කරන්න {{ }}.
ng-modelදර්ශනය තුළ පරිශීලකයාට පෙන්වන සහ පරිශීලකයා අන්තර්ක්‍රියා කරන දත්ත වේ.
එබැවින් AngularJs හි දත්ත බැඳීම පහසුය.

Angular.js අප විසින් නිර්මාණය කරන සෑම ආකෘතියක් සඳහාම මුරකරුවෙකු නිර්මාණය කරයි. ආකෘතියක් වෙනස් කළ විට, "එන්ජී-අපිරිසිදු" පංතියක් ආකෘතියට අනුකූල වේ, එබැවින් මුරකරු විසින් "එන්ජී-අපිරිසිදු" පන්තිය ඇති සියලුම මාදිලි නිරීක්ෂණය කර පාලකයේ ඒවායේ අගයන් යාවත්කාලීන කරනු ඇත.

දත්ත බන්ධනය:

දත්ත බන්ධනය යනු කුමක්ද?

පරිශීලකයා දර්ශනයේ දත්ත වෙනස් කරන සෑම විටම, විෂය පථයේ ආකෘතියේ වෙනස්වීමක් සහ වයිස්වර්සා සිදු වේ.

එය කළ හැක්කේ කෙසේද?

කෙටි පිළිතුර: ඩයිජෙස්ට් චක්‍රයේ ආධාරයෙන්.

විස්තරය: කෝණික js විසින් මුරකරු විෂය පථයේ ආකෘතිය සකසයි, එමඟින් ආකෘතියේ වෙනසක් තිබේ නම් සවන්දෙන්නන්ගේ ක්‍රියාකාරිත්වය ඉවත් කරයි.

$scope.$watch('modelVar' , function(newValue,oldValue){

// නව අගයක් සහිත ඩොම් යාවත්කාලීන කේතය

});

ඉතින් මුරකරුගේ ක්‍රියාකාරිත්වය හැඳින්වෙන්නේ කවදාද සහ කෙසේද?

මුරකරුගේ ක්‍රියාකාරිත්වය ඩයිජෙස්ට් චක්‍රයේ කොටසක් ලෙස හැඳින්වේ.

ඩයිජෙස්ට් චක්‍රය ස්වයංක්‍රීයව අවුලුවන ලෙස හැඳින්වෙන්නේ ng-model, ng-bind, $ timeout, ng-click සහ වෙනත් වැනි විධානයන් / සේවාවන් තුළ ගොඩනගා ඇති කෝණික js වල කොටසක් ලෙසය.

ඩයිජෙස්ට් චක්‍ර ක්‍රියාකාරිත්වය:

$scope.$digest() -> digest cycle against the current scope.
$scope.$apply() -> digest cycle against the parent scope 

එනම්$rootScope.$apply()

සටහන: $ apply () $ rootScope ට සමාන වේ. $ Digest () මෙයින් අදහස් කරන්නේ අපිරිසිදු පරීක්ෂාව ආරම්භ වන්නේ මුල හෝ ඉහළ සිට හෝ මවුපියන්ගේ විෂය පථය සියලුම ළමයින්ටය the කෝණික js යෙදුමේ විෂය පථයන් ය.

ඉහත සඳහන් අංගයන් බ්‍රව්සර් IE හි සඳහන් අනුවාදයන් සඳහා ක්‍රියා කරයි, ඔබේ යෙදුම කෝණික js යෙදුම බව තහවුරු කර ගැනීමෙන් පමණක් ඔබ අදහස් කරන්නේ ස්ක්‍රිප්ට් ටැගයේ සඳහන් කර ඇති angularjs රාමු ස්ක්‍රිප්ට් ගොනුව භාවිතා කරන බවයි.

ඔබට ස්තුතියි.