Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

آیا هنوز به چارچوب‌های جاوااسکریپت نیاز داریم؟

473 views

Published on

امروزه چارچوب‌های جاوااسکریپت چنان نقش پررنگی در پروژه‌های وب پیدا کرده‌اند که تقریبا تمام پروژه‌ها با این سوال شروع می‌شوند که از کدام چارچوب جاوااسکریپت استفاده کنیم؟ اما این رویه، تنها رویه‌ی ممکن برای شروع یک پروژه نیست. در حقیقت، این رویه باید خاتمه یابد.

Published in: Education
  • Be the first to comment

آیا هنوز به چارچوب‌های جاوااسکریپت نیاز داریم؟

  1. 1. ‫اﺑﻬﺮی‬ ‫اﺣﻤﺪی‬ ‫ﮐﺎوه‬ ‫ﺳﯿﺪ‬ ‫دارﯾﻢ؟‬ ‫ﻧﯿﺎز‬ ‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬ ‫ﻫﺎی‬‫ﭼﺎرﭼﻮب‬ ‫ﺑﻪ‬ ‫ﻫﻨﻮز‬ ‫آﯾﺎ‬
  2. 2. ‫ﯾﮏ‬ ‫اول‬ ‫ﻫﺎی‬‫ﺳﻮال‬ ‫از‬‫ﭘﺮوژه‬:
  3. 3. o‫ﮐﺪ‬ ‫ﮐﯿﻔﯿﺖ‬ o‫ﺗﻮﺳﻌﻪ‬ ‫ﺳﺮﻋﺖ‬ o‫اﺟﺮا‬ ‫ﺳﺮﻋﺖ‬ o‫ﻣﻔﺎﻫﯿﻢ‬‫ﻧﻮﻇﻬﻮر‬ ‫ﻫﺎی‬‫ﭼﺎرﭼﻮب‬JS
  4. 4. ‫ﻫﺎ‬‫ﺳﺎﯾﺖ‬‫وب‬ ‫از‬ ‫زﯾﺎدی‬ ‫اﻧﺘﻈﺎر‬ ‫ﮐﺴﯽ‬ ‫ﻧﺪاﺷﺖ‬: HTML ‫وب‬‫ﻇﻬﻮر‬
  5. 5. ‫اﯾﻨﺘﺮﻧﺖ‬ ‫رﺷﺪ‬: ‫ﻋﻼﻗﻪ‬ ‫ﮐﺎرﻫﺎ‬ ‫و‬ ‫ﮐﺴﺐ‬ ‫ی‬‫ﻧﺤﻮه‬ ‫ﺑﻪ‬ ‫ﺑﯿﺸﺘﺮی‬ ‫ﮐﺸﯿﺪه‬ ‫ﺗﺼﻮﯾﺮ‬ ‫ﺑﻪ‬ ‫ﻓﻀﺎی‬ ‫در‬ ‫ﺧﻮد‬ ‫ﺷﺪن‬ ‫ﮐﺮدﻧﺪ‬ ‫ﭘﯿﺪا‬ ‫ﻣﺠﺎزی‬ ‫ﻣﺮورﮔﺮﻫﺎ‬ ‫ﭘﺸﺘﯿﺒﺎﻧﯽ‬ ‫از‬CSS‫و‬JS ‫ﯾﺎﻓﺖ‬ ‫اﻓﺰاﯾﺶ‬ ‫ﻫﺎی‬‫ﺳﺎزی‬‫ﭘﯿﺎده‬ front-end ‫را‬ ‫ﺗﺮی‬‫ﭘﯿﭽﯿﺪه‬ ‫ﺑﻮدﯾﻢ‬ ‫ﺷﺎﻫﺪ‬
  6. 6. Web Platform = HTML + CSS + JavaScript
  7. 7. o‫ﻣﺮورﮔﺮﻫﺎ‬ ‫ﺑﯿﻦ‬ ‫ﻧﺎﺳﺎزﮔﺎری‬ o‫ﺟﺪﯾﺪ‬ ‫ﻣﻔﺎﻫﯿﻢ‬ ‫روز‬ ‫ﻫﺮ‬
  8. 8. http://www.tutorialspoint.com/html/html_layer_tag.htm <layer id="layer1" top="250" left="50" width="200" height="200" bgcolor="red"> <H1>Layer 1</H1> <P>Lots of content for this layer.</P> <P>More Content for layer 1.</P> </layer>
  9. 9. http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
  10. 10. http://en.wikipedia.org/wiki/DOM_events#Internet_Explorer-specific_model
  11. 11. http://www.w3.org/TR/CSS2/syndata.html#vendor-keywords
  12. 12. http://msdn.microsoft.com/en-us/library/ms537505(v=vs.85).aspx var xmlHttp = null; if (window.XMLHttpRequest) { // If IE7, Mozilla, Safari, and so on: Use native object. xmlHttp = new XMLHttpRequest(); } else { if (window.ActiveXObject) { // ...otherwise, use the ActiveX control for IE5.x and IE6. xmlHttp = new ActiveXObject('MSXML2.XMLHTTP.3.0'); } }
  13. 13. SEO AJAX RWD etc.
  14. 14. Snippet, GIST, etc. JavaScript Libraries ‫اوﻟﯿﻪ‬ ‫ﮐﺎرﮐﺮدﻫﺎی‬ ‫ﺑﺮﺧﯽ‬ ‫ﺳﺎزی‬ ‫ﭘﯿﺎده‬ ‫ﺷﮑﻞ‬ ‫ﺑﻪ‬ ‫و‬ ‫ﻣﺠﺪد‬ ‫اﺳﺘﻔﺎده‬ ‫ﻗﺎﺑﻠﯿﺖ‬ ‫ﺑﺎ‬cross-browser
  15. 15. ‫ﻫﺎی‬‫ﭘﯿﭽﯿﺪﮔﯽ‬ ‫از‬ ‫رﻫﺎﯾﯽ‬ DOM‫ﻋﻤﻠﯿﺎت‬ ‫اﻧﺠﺎم‬ ‫ﺑﺮای‬ ‫ﻣﺘﺪاول‬ ‫ﻫﺎی‬‫ﻧﺎﺳﺎزﮔﺎری‬ ‫ﮐﺮدن‬ ‫ﭘﻨﻬﺎن‬ ‫ﺗﻮﺳﻌﻪ‬ ‫ﭼﺸﻢ‬ ‫از‬ ‫ﻣﺮورﮔﺮﻫﺎ‬ ‫دﻫﻨﺪﮔﺎن‬ ‫ﺑﺎﻻﺗﺮ‬ ‫ﺗﻮﺳﻌﻪ‬ ‫ﺳﺮﻋﺖ‬ UI‫ﺗﺮ‬‫ﻫﺰﯾﻨﻪ‬‫ﮐﻢ‬ ‫ﻫﺎی‬AJAX
  16. 16. ‫ﺗﺮاﻓﯿﮏ‬ ‫اﻓﺰاﯾﺶ‬ ‫ﻫﺎ‬‫ﺳﺎﯾﺖ‬‫وب‬ crowd sourcing Client- side Binding
  17. 17. Model-driven Development(MDD) Event-driven Development
  18. 18. Single Page Applications World-Class Web UX
  19. 19. JavaScript Frameworks ‫در‬ ‫ﺣﺘﯽ‬ ‫ﻣﺮورﮔﺮﻫﺎ‬ ‫ﻧﯿﺰ‬ ‫ﭘﺎﯾﻪ‬ ‫ﻣﻔﺎﻫﯿﻢ‬ ‫ﻣﻮرد‬ ‫ﻧﺪارﻧﺪ‬ ‫ﺗﻮاﻓﻖ‬ ‫ﻫﻢ‬ ‫ﺑﺎ‬ ‫رﻓﻊ‬ ‫ﺑﺮای‬ ‫وب‬ ‫ﻓﺮم‬‫ﭘﻠﺖ‬ ‫ﺷﺪه‬ ‫ﻣﻄﺮح‬ ‫ﻧﯿﺎزﻫﺎی‬ ‫ﻧﺸﺪه‬ ‫داده‬ ‫ﺗﻮﺳﻌﻪ‬ ‫اﺳﺖ‬ ‫ﮐﺪﻫﺎی‬ ‫ﻧﻮﺷﺘﻪ‬ ‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬ ‫ﻧﺎﻣﺮﺗﺐ‬ ‫ﻋﻤﺪﺗﺎ‬ ‫ﺷﺪه‬ ‫ﺑﻮدﻧﺪ‬!
  20. 20. Snippet, GIST, etc. JavaScript Libraries JavaScript Frameworks
  21. 21. Martin Fowler http://martinfowler.com/bliki/InversionOfControl.html
  22. 22. ‫ﻓﺮاﺧﻮاﻧﯽ‬ ‫را‬ ‫آﻧﻬﺎ‬ ‫ﺗﻮاﻧﺪ‬‫ﻣﯽ‬ ‫ﮐﺎرﺑﺮ‬ ‫ﮐﻪ‬ ‫اﺳﺖ‬ ‫ﺗﻮاﺑﻊ‬ ‫از‬ ‫ﻣﺠﻤﻮﻋﻪ‬ ‫ﯾﮏ‬‫ﮐﻨﺪ‬. ‫ﮐﺎرﺑﺮ‬ ‫ﺑﻪ‬ ‫را‬ ‫ﮐﻨﺘﺮل‬ ‫و‬ ‫دﻫﺪ‬‫ﻣﯽ‬ ‫اﻧﺠﺎم‬ ‫را‬ ‫ﮐﺎری‬ ‫ﻓﺮاﺧﻮاﻧﯽ‬ ‫ﻫﺮ‬‫ﮔﺮداﻧﺪ‬‫ﺑﺎزﻣﯽ‬. ‫اﺳﺖ‬ ‫ﮐﺎرﺑﺮ‬ ‫دﺳﺖ‬ ‫ﮐﻨﺘﺮل‬!
  23. 23. ‫ﻗﺮار‬ ‫ﺑﺎﯾﺪ‬ ‫ﺷﮑﻞ‬ ‫ﭼﻪ‬ ‫ﺑﻪ‬ ‫و‬ ‫ﮐﺠﺎ‬ ‫را‬ ‫ﺧﻮد‬ ‫ﮐﺪﻫﺎی‬ ‫ﮐﺎرﺑﺮ‬ ‫ﮐﻪ‬ ‫ﮐﻨﺪ‬‫ﻣﯽ‬ ‫ﻣﺸﺨﺺ‬ ‫ﭼﺎرﭼﻮب‬‫دﻫﺪ‬. ‫در‬ ‫ﭼﺎرﭼﻮب‬‫ﻧﻈﺮ‬ ‫ﻣﻮرد‬ ‫ﻫﺎی‬‫زﻣﺎن‬‫ﮐﺎرﺑﺮ‬ ‫ﮐﺪﻫﺎی‬ ‫ﺧﻮد‬‫ﻓﺮاﺧﻮاﻧﯽ‬ ‫را‬‫ﮐﻨﺪ‬‫ﻣﯽ‬. ‫اﺳﺖ‬ ‫ﭼﺎرﭼﻮب‬ ‫دﺳﺖ‬ ‫ﮐﻨﺘﺮل‬!
  24. 24. ‫ﻫﺎ‬‫ﭼﺎرﭼﻮب‬ ‫از‬ ‫اﺳﺘﻔﺎده‬ ‫ﻣﺸﮑﻼت‬
  25. 25. o‫ﺳﻮال‬:‫ﭼﺮا‬‫اﯾﺠﺎد‬ ‫اﻧﺘﺰاﻋﯽ‬ ‫ﻫﺎی‬‫ﻻﯾﻪ‬‫ﮐﻨﯿﻢ؟‬‫ﻣﯽ‬ o‫ﮐﺮد‬ ‫اﺳﺘﻔﺎده‬ ‫آن‬ ‫از‬ ،‫ﭼﯿﺰ‬ ‫ﯾﮏ‬ ‫ﻫﺎی‬‫ﭘﯿﭽﯿﺪﮔﯽ‬ ‫ﺑﺎ‬ ‫ﺷﺪن‬ ‫درﮔﯿﺮ‬ ‫ﺑﺪون‬ ‫ﺑﺘﻮان‬ ‫ﺗﺎ‬. o‫ﻫﺎی‬‫ﭼﺎرﭼﻮب‬‫ﻫﺴﺘﻨﺪ‬ ‫وب‬ ‫ﭘﻠﺘﻔﺮم‬ ‫روی‬ ‫اﻧﺘﺰاﻋﯽ‬ ‫ﻫﺎی‬‫ﻻﯾﻪ‬ ‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬! oDirective‫در‬ ‫ﻫﺎ‬AngularJS oVirtual DOM‫در‬React
  26. 26. o‫اﻣﺎ‬‫دارﻧﺪ‬ ‫ﻧﺸﺘﯽ‬ ‫ﻫﺎ‬‫اﻧﺘﺰاع‬! o‫ﻗﺮار‬ ‫ﺧﻮد‬ ‫ی‬‫زﻣﯿﻨﻪ‬ ‫ﺳﺎزی‬‫ﭘﯿﺎده‬ ‫ﻣﻌﺮض‬ ‫در‬ ‫را‬ ‫ﺷﻤﺎ‬‫دﻫﺪ‬‫ﻣﯽ‬.
  27. 27. ‫ﺳﺘﻮﻧﯽ‬ ‫ﯾﺎ‬ ‫ﺳﻄﺮی‬ ‫ﭘﯿﻤﺎﯾﺶ‬ ‫ﺑﻌﺪی‬ ‫دو‬ ‫آراﯾﻪ‬ ‫ﯾﮏ‬ ‫ﻣﺘﻔﺎوﺗﯽ‬ ‫ﮐﺎراﯾﯽ‬ ‫ﺗﻮاﻧﺪ‬‫ﻣﯽ‬ ‫ﺑﺎﺷﺪ‬ ‫داﺷﺘﻪ‬. ‫ﭘﺮﺳﺠﻮی‬ ‫دو‬ ‫اﺟﺮای‬ ‫ﻣﺘﻔﺎوت‬SQL‫ﺧﺮوﺟﯽ‬ ‫ﮐﻪ‬ ‫ﮔﺮداﻧﻨﺪ‬‫ﻣﯽ‬ ‫ﺑﺎز‬ ‫ﻣﺸﺎﺑﻬﯽ‬ ‫ﺳﺮﻋﺖ‬ ‫ﻧﻈﺮ‬ ‫از‬ ‫اﺳﺖ‬ ‫ﻣﻤﮑﻦ‬ ‫ﻫﻢ‬ ‫ﺑﺎ‬ ‫ﻓﺎﺣﺸﯽ‬ ‫ﻫﺎی‬‫ﺗﻔﺎوت‬ ‫ﺑﺎﺷﻨﺪ‬ ‫داﺷﺘﻪ‬.
  28. 28. $timeout(function() { $scope.status.isSearching = false; $scope.status.searchResults = ... setTimeout(function() { $scope.status.isSearching = false; $scope.status.searchResults = ... $scope.$digest(); http://blog.500tech.com/is-reactjs-fast/
  29. 29. ‫ﻫﺎ‬‫ﭼﺎرﭼﻮب‬ ‫از‬ ‫اﺳﺘﻔﺎده‬ ‫ﻣﺸﮑﻼت‬
  30. 30. http://github.com/angular/angular.js/issues/1202
  31. 31. ‫ﻫﺎ‬‫ﭼﺎرﭼﻮب‬ ‫از‬ ‫اﺳﺘﻔﺎده‬ ‫ﻣﺸﮑﻼت‬
  32. 32. ‫ﮐﺪ‬ ‫ﺑﺰرگ‬ ‫و‬ ‫ﯾﮑﭙﺎرﭼﻪ‬ ‫ﻫﺎی‬‫ﺑﺨﺶ‬ ‫ﺷﮑﺎﻧﺪن‬‫ﺑﻪ‬ ‫ﺗﺮﮐﯿﺒﯽ‬ ‫ﻫﺮ‬ ‫در‬ ‫ﺗﻮاﻧﻨﺪ‬‫ﻣﯽ‬ ‫ﮐﻪ‬ ‫ﻣﺘﻌﺎﻣﺪ‬ ‫اﺟﺰای‬‫در‬ ‫ﻣﻮرد‬ ‫ﯾﮑﺪﯾﮕﺮ‬ ‫ﮐﻨﺎر‬‫ﻗﺮار‬ ‫اﺳﺘﻔﺎده‬‫ﮔﯿﺮﻧﺪ‬.
  33. 33. Web Components
  34. 34. ‫ﺗﻮﺳﻂ‬ ‫ﮐﻪ‬ ‫ﻫﺎ‬‫وﯾﮋﮔﯽ‬ ‫از‬ ‫ای‬‫ﻣﺠﻤﻮﻋﻪ‬W3C‫ﺑﻪ‬HTML‫ﻣﺸﺨﺼﺎت‬ ‫و‬DOM‫اﻧﺪ‬‫ﺷﺪه‬ ‫اﺿﺎﻓﻪ‬. ‫ﻫﺎی‬‫ﺑﺮﻧﺎﻣﻪ‬ ‫در‬ ‫ﻣﺠﺪد‬ ‫اﺳﺘﻔﺎده‬ ‫ﻗﺎﺑﻠﯿﺖ‬ ‫ﺑﺎ‬ ‫ﻫﺎی‬‫ﮐﺎﻣﭙﻮﻧﻨﺖ‬ ‫ﯾﺎ‬ ‫ﻫﺎ‬‫وﯾﺠﺖ‬ ‫دﻫﺪ‬‫ﻣﯽ‬ ‫اﻣﮑﺎن‬ ‫ﻣﺎ‬ ‫ﺑﻪ‬ ‫ﮐﻨﯿﻢ‬ ‫اﯾﺠﺎد‬ ‫وب‬. ‫ﮐﺎﻣﭙﻮﻧﻨﺖ‬ ‫ﺑﺮ‬ ‫ﻣﺒﺘﻨﯽ‬ ‫ﮐﺎﻣﭙﯿﻮﺗﺮ‬ ‫ﻣﻬﻨﺪﺳﯽ‬ ‫آن‬ ‫ﺑﺎ‬ ‫ﺗﻮاﻧﯿﻢ‬‫ﻣﯽ‬)CBSE(‫ﺑﯿﺎورﯾﻢ‬ ‫وب‬ ‫ﺑﻪ‬ ‫را‬. ‫ﻣﺤﺼﻮرﺳﺎزی‬ ‫اﻣﮑﺎن‬ ‫ﻣﺎ‬ ‫ﺑﺮای‬-‫ﮐﻨﺶ‬ ‫ﻫﻢ‬ ‫ﺑﺮ‬ ‫ﺣﺎل‬ ‫ﻋﯿﻦ‬ ‫در‬ ‫و‬-‫ﻫﺎی‬‫اﻟﻤﺎن‬ ‫ﺑﺮای‬ ‫را‬HTML ‫ﺳﺎزﻧﺪ‬‫ﻣﯽ‬ ‫ﭘﺬﯾﺮ‬‫اﻣﮑﺎن‬.
  35. 35. http://webcomponents.org/
  36. 36. JavaScript Frameworks Polyfill Web Components
  37. 37. o‫ﺑﻪ‬ ‫ﺷﻮد‬‫ﻣﯽ‬ ‫دﯾﺪه‬ ‫ﻣﺪرن‬ ‫ﻣﺮورﮔﺮﻫﺎی‬ ‫در‬ ‫ﮐﻪ‬ ‫ﺧﺎﺻﯽ‬ ‫ﮐﺎرﮐﺮدﻫﺎی‬ ‫ﮐﺮدن‬ ‫اﺿﺎﻓﻪ‬ ‫ﮐﻨﻨﺪ‬‫ﻧﻤﯽ‬ ‫ﭘﺸﺘﯿﺒﺎﻧﯽ‬ ‫ﺗﻮﮐﺎر‬ ‫ﺷﮑﻞ‬ ‫ﺑﻪ‬ ‫را‬ ‫ﮐﺎرﮐﺮدﻫﺎ‬ ‫آن‬ ‫از‬ ‫ﮐﻪ‬ ‫ﻣﺮورﮔﺮﻫﺎﯾﯽ‬. o‫ﺷﻮﻧﺪ‬‫ﻧﻤﯽ‬ ‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬ ‫ﺑﻪ‬ ‫ﻣﺤﺪود‬ ‫و‬ ‫ﻧﯿﺴﺘﻨﺪ‬ ‫وب‬ ‫ﭘﻠﺘﻔﺮم‬ ‫از‬ ‫ﺑﺨﺸﯽ‬. o‫ﻫﺎی‬‫روش‬ ‫ﮐﻪ‬ ‫ﻧﯿﺴﺘﻨﺪ‬ ‫ﻫﺎﯾﯽ‬‫ﭼﺎرﭼﻮب‬ ‫دﯾﮕﺮ‬ ‫ﻋﺒﺎرت‬ ‫ﺑﻪ‬ ‫ﮔﯿﺮﻧﺪ‬‫ﻧﻤﯽ‬ ‫دﺳﺖ‬ ‫در‬ ‫را‬ ‫ﮐﻨﺘﺮل‬ ‫ﺑﮕﯿﺮﻧﺪ‬ ‫ﭘﯿﺶ‬ ‫را‬ ‫وب‬ ‫روی‬ ‫ﺗﻮﺳﻌﻪ‬ ‫ﺑﺮای‬ ‫ﺧﻮد‬.
  38. 38. var fruits = { banana: "yellow", strawberry: "red", pumpkin: "orange", apple: "red" }; var isRedFruit = function (name) { return this[name] === "red"; }; ["pumpkin", "strawberry", "apple", "banana", "strawberry"].filter(isRedFruit, fruits); // returns ["strawberry", "apple", "strawberry"] ES5
  39. 39. if (typeof Array.prototype.filter !== "function") { Array.prototype.filter = function (fn, thisp) { if (this === null) throw new TypeError; if (typeof fn !== "function") throw new TypeError; var result = []; for (var i = 0; i < this.length; i++) { if (i in this) { var val = this[i]; if (fn.call(thisp, val, i, this)) { result.push(val); } } } return result; }; };
  40. 40. Polyfill VS Shim
  41. 41. o‫ﻫﺎی‬‫ﻗﻄﻌﻪ‬ ‫ﺗﻌﺮﯾﻒ‬HTML‫ﮐﻪ‬‫اﺿـﺎﻓﻪ‬ ‫ﺳـﻨﺪ‬ ‫ﯾـﮏ‬ ‫ﺑـﻪ‬ ‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬ ‫ﺗﻮﺳﻂ‬ ‫ﺗﻮاﻧﻨﺪ‬‫ﻣﯽ‬ ‫ﺷﻮﻧﺪ‬. o‫اﻣـﺎ‬ ‫ﺷـﻮد‬‫ﻧﻤﯽ‬ ‫رﻧـﺪر‬ ‫ﺻـﻔﺤﻪ‬ ‫ﺑﺎرﮔـﺬاری‬ ‫زﻣﺎن‬ ‫ﮐﻪ‬ ‫ﮐﻨﯿﻢ‬ ‫ﻧﮕﻬﺪاری‬ ‫را‬ ‫ﻣﺤﺘﻮاﯾﯽ‬ ‫ﺗﻮاﻧﯿﻢ‬‫ﻣﯽ‬ ‫ﺷﻮد‬ ‫ﺳﺎزی‬‫ﻧﻤﻮﻧﻪ‬ ‫آن‬ ‫از‬ ‫ﺟﺎوااﺳﮑﺮﯾﭙﺖ‬ ‫ﺗﻮﺳﻂ‬ ‫ﺻﻔﺤﻪ‬ ‫ﺑﺎرﮔﺬاری‬ ‫از‬ ‫ﺑﻌﺪ‬ ‫ﺗﻮاﻧﺪ‬‫ﻣﯽ‬. o‫ﮐﺪ‬ ‫ﻫﺎی‬‫ﻗﻄﻌﻪ‬ ‫از‬ ‫ﻣﺠﺪد‬ ‫اﺳﺘﻔﺎده‬ ‫اﯾﻨﮑﻪ‬HTML. o‫ﺳﻤﺖ‬ ‫در‬ ‫ﮐﺎرﺑﺮ‬ ‫ﻧﯿﺎز‬ ‫ﻓﺮاﺧﻮر‬ ‫ﺑﻪ‬ ‫را‬ ‫ﺻﻔﺤﻪ‬ ‫درون‬ ‫ﻫﺎی‬‫اﻟﻤﺎن‬ ‫ﻣﺪﯾﺮﯾﺖ‬‫ﮐﻼﯾﻨﺖ‬.
  42. 42. o‫از‬ ‫ﻣﺠﺪد‬ ‫اﺳﺘﻔﺎده‬ ‫و‬ ‫اﻟﺤﺎق‬ ‫ﺑﺮای‬ ‫روﺷﯽ‬‫ﺳﻨﺪﻫﺎی‬HTML‫ﺳﻨﺪﻫﺎی‬ ‫در‬HTML‫دﯾﮕﺮ‬‫اﺳﺖ‬. o‫آن‬ ‫ﺑﺮای‬ ‫ﺗﻮان‬‫ﻣﯽ‬polyfill‫ﻧﻮﺷﺖ‬. o‫ﻧﻪ‬‫اﺳﻨﺎد‬ ‫ﺗﻨﻬﺎ‬HTML‫ﺑﻠﮑﻪ‬CSS‫و‬JS‫را‬‫ﺳـﻨﺪ‬ ‫ﯾـﮏ‬ ‫ﺑﻪ‬ ‫ﺗﻮاﻧﯿﻢ‬‫ﻣﯽ‬ ‫ﻧﯿﺰ‬ ‫ﮐﻨﯿﻢ‬ ‫وارد‬. o‫ﻫﺎ‬‫اﺳﮑﺮﯾﭙﺖ‬‫ﺻﻔﺤﻪ‬ ‫ﺑﻪ‬ ‫ﻣﺤﺘﻮا‬ ‫ﺷﺪن‬ ‫وارد‬ ‫از‬ ‫ﭘﺲ‬‫اﺟﺮا‬‫ﺷﻮﻧﺪ‬‫ﻣﯽ‬.‫ﭘـﺲ‬ ‫ﻣﺤﻞ‬‫اﺳﺖ‬ ‫ردﯾﺎﺑﯽ‬ ‫ﻗﺎﺑﻞ‬ ‫ﻫﺎ‬‫اﺳﮑﺮﯾﭙﺖ‬ ‫اﺟﺮای‬ ‫ی‬‫ﻧﺤﻮه‬ ‫و‬.
  43. 43. o‫ﺑﺮای‬‫ﻧﮕﻬﺪاری‬ ‫و‬ ‫ﮐﺪﻫﺎ‬ ‫ﺳﺎﻣﺎﻧﺪﻫﯽ‬HTML،CSS‫و‬JS‫ﺑـﻪ‬ ‫ﻣـﺮﺗﺒﻂ‬ ‫ﻫﺎی‬ ‫ﻣﻨﺎﺳﺐ‬ ‫ﯾﮑﺠﺎ‬ ‫در‬ ‫ﻫﻢ‬‫اﺳﺖ‬. o‫داد‬ ‫ﮐﺎﻫﺶ‬ ‫را‬ ‫ﻣﺨﺘﻠﻒ‬ ‫اﺟﺰای‬ ‫ﺑﯿﻦ‬ ‫ﭼﺴﺒﻨﺪﮔﯽ‬ ‫ﺗﻮان‬‫ﻣﯽ‬ ‫روش‬ ‫اﯾﻦ‬ ‫ﺑﻪ‬.
  44. 44. o‫ﺗﻮاﻧﯿﺪ‬‫ﻣﯽ‬ ‫دﯾﮕﺮ‬‫ﮐﻨﯿﺪ‬ ‫اﯾﺠﺎد‬ ‫را‬ ‫ﺧﻮد‬ ‫ﻫﺎی‬‫ﺗﮓ‬. o‫ﺑﺎﺷﯿﺪ‬ ‫داﺷﺘﻪ‬ ‫را‬ ‫ﺧﻮد‬ ‫ﻫﺎی‬‫ﺗﮓ‬ ‫ﺗﻮاﻧﺴﺘﯿﺪ‬‫ﻣﯽ‬ ‫ﻫﻤﯿﺸﻪ‬ ‫ﺷﻤﺎ‬ o‫از‬ ‫اﺳﺘﻔﺎده‬ ‫ﺑﺎ‬ ‫اﻣﺎ‬Custom Elements‫ﺗﻮاﺑـﻊ‬ ‫ﺗﻮان‬‫ﻣﯽ‬Callback ‫ﮐﺮد‬ ‫ﻣﻨﺴﻮب‬ ‫ﺷﺪه‬ ‫ﺗﻌﺮﯾﻒ‬ ‫اﻟﻤﺎن‬ ‫ﺑﻪ‬ ‫را‬ ‫ﻣﺘﻔﺎوﺗﯽ‬. o‫ﺧﺼﻮﺻﯿﺎت‬ ‫ﯾﺎ‬‫را‬ ‫دﯾﮕﺮی‬ ‫ﺗﻮاﺑﻊ‬ ‫و‬‫ﻧﻤﻮد‬ ‫ﺗﻌﺮﯾﻒ‬ ‫آن‬ ‫ﺑﺮای‬.
  45. 45. o‫ﻣﺮورﮔﺮ‬ ‫ﺑﻪ‬‫ﯾﮏ‬ ‫دﻫﺪ‬‫ﻣﯽ‬ ‫اﻣﮑﺎن‬‫از‬ ‫زﯾﺮدرﺧﺖ‬‫ﻫـﺎی‬‫اﻟﻤﺎن‬DOM‫را‬‫ﯾـﮏ‬ ‫ﺑـﻪ‬ ‫ﮐﻨﺪ‬ ‫ﺗﺰرﯾﻖ‬ ‫اﺳﺖ‬ ‫ﻧﻤﺎﯾﺶ‬ ‫ﺣﺎل‬ ‫در‬ ‫ﺻﻔﺤﻪ‬ ‫روی‬ ‫ﮐﻪ‬ ‫ﺷﺪه‬ ‫رﻧﺪر‬ ‫ﺳﻨﺪ‬. o‫درﺧﺖ‬ ‫روی‬ ‫اﺛﺮﮔﺬاری‬ ‫ﺑﺪون‬DOM‫اﺻﻠﯽ‬ ‫ﺳﻨﺪ‬. o‫ﺟﺪا‬ ‫ﻣﺤﺘﻮا‬ ‫ی‬‫ﻻﯾﻪ‬ ‫از‬ ‫را‬ ‫ﺳﻨﺪ‬ ‫ﻧﻤﺎﯾﺶ‬ ‫ی‬‫ﻻﯾﻪ‬ ‫ﮐﻨﺪ‬‫ﻣﯽ‬ ‫ﮐﻤﮏ‬ ‫ﺷﻤﺎ‬ ‫ﺑﻪ‬‫ﮐﻨﯿﺪ‬.

×