نوشته های عارفه حمیدی

You Don't Know JS (Get Started-ch3 - part1)

عارفه حمیدی — Tue, 17 Mar 2020 21:07:49 +0330

Digging to the Roots of JSدر فصل 2 به بررسی ویژگی های زبان js و برخی از الگو ها و رفتارهای زبان در سطح بالا (high level) پرداختیم در این فصل به بررسی برخی از ویژگی های سطح پایین تری (lower-level) از js میپردازیم . Iterationبرنامه ها اساسا برای پردازش داده ها و تصمیم گیری درباره داده ها ساخته میشن . الگو ها و روش هایی که برای نوشتن برنامه ها استفاده میکنیم تاثیر خیلی زیادی در خوانایی کد داره. الگو های iterator یک روش استاندارد برای پردازش داده ها هستش. ایده این هستش که منبع داده تکرار بشه یعنی به تدریج پردازش داده انجام بشه و به جای اینکه کل داده یکباره پردازش روش انجام بشه، ابتدا قسمت اول پردازش بشه و سپس بخش بعدی و غیره.ساختار داده ای رو تصور کنید که در پایگاه داده رابطه ای از کوئری SELECT برای نمایش داده استفاده میکنه ، به طور معمول نتایج به صورت row هایی سازماندهی میشن. اگه تعداد نتایج ما کم باشه میتونیم به طور همزمان کنترل کنیم و عملیات رو انجام بدیم ولی اگه تعداد نتایج ما مثلا 100 یا 1000 یا حتی بیشتر row باشه چطور ؟؟! اینجاست که باید از الگوهای تکرار کمک بگیریم و پردازش داده ها رو انجام بدیم.از اونجایی که معمولا ما نمی دونیم تعداد داده ها ما چند تا هستش بنابراین استفاده از الگوهای تکرار تا رسیدن به انتهای مجموعه داده یا رسیدن به شرطی که برای پایان حلقه تکرار میذاریم منطقی تر هستش . از طرفی استفاده از این الگو باعث تمیزتر شدن کد و درک آسان تر کد هم میشه . در ES6 پروتکل خاصی برای الگوهای تکرار به طور مستقیم تعریف شده . پروتکل متد next() رو تعریف میکنه که بعد از هربار فرخوانی iterator تا زمانی که شرط برقرار باشه نتیجه رو برمیگردونه.Consuming Iteratorsعلاوه بر next() در ES6 مکانیسم های دیگه ای هم برای انجام عمل تکرار وجود داره. یکی از این مکانیسم ها حلقه for ... of هستش. به کد زیر توجه کنین :// given an iterator of some data source: var it = /* .. */; // loop over its results one at a time for (let val of it) { console.log(`Iterator value: ${ val }`); } // Iterator value: .. // Iterator value: .. // ..مکانیسم دیگری که برای تکرار استفاده میشه ، عملگر ... هستش. این عملگر دو فرم داره : spread و rest که فرم spread یک iterator-consumer هستش. برای spread یک تکرار باید چیزی برای spread وجود داشته باشه. در js برای اینکار می تونیم از آرایه ها یا لیست آرگومان ها برای function call استفاده کنیم.به کد زیر که یک array spread هست توجه کنین :// spread an iterator into an array, // with each iterated value occupying // an array element position. var vals = [ ...it ];و همچنین به function call spread :// spread an iterator into a function, // call with each iterated value // occupying an argument position. doSomethingUseful( ...it ); در هر دو حالت فرم spread از ... برای تکرار استفاده کرده که مانند همون حلقه for ... of عمل میکنه.Iterablesپروتکل به طور خودکار یک نمونه تکرار شونده از یک تکرار کننده ایجاد میکنه و ازش استفاده میکنه یعنی یه تکرار میتونه بیشتر از یک بار استفاده شه و هربار یک نمونه تکرار شونده جدید ایجاد و مورد استفاده قرار میگیره.در ES6 ساختار ها و مجموعه داده ها از جمله strings , arrays , maps , sets و موارد دیگر به عنوان iterables تعریف کرده.در نظر بگیرین :// an array is an iterable var arr = [ 10, 20, 30 ]; for (let val of arr) { console.log(`Array value: ${ val }`); } // Array value: 10 // Array value: 20 // Array value: 30چون ارایه ها تکرار پذیر هستند میتونیم با استفاده از اپراتور ... spread کپی کنیم :var arrCopy = [ ...arr ];همچنین میتونیم کاراکتر ها رو به صورت یه رشته تکرار کنیم:var greeting = "Hello world!" var chars = [ ...greeting ]; chars; // [ "H", "e", "l", "l", "o", " ", // "w", "o", "r", "l", "d", "!" ]یک ساختار داده map از objects به عنوان key استفاده میکنه و یک value رو به اون object مرتبط میکنه. map تکرار متفاوتی با آنچه تا این جا بررسی کردیم داره چون این تکرار فقط از مقادیر نیست و به ورودی ها هم بستگی داره . یک ورودی که یه آرایه 2 بعدی که شامل یک key و یک value میشه هستش . به کد زیر توجه کنین :// given two DOM elements, `btn1` and `btn2` var buttonNames = new Map(); buttonNames.set(btn1,"Button 1"); buttonNames.set(btn2,"Button 2"); for (let [btn,btnName] of buttonNames) { btn.addEventListener("click",function (){ console.log(`Clicked ${ btnName }`); }); }در حلقه for ... of برای تکرار map از[btn,btnName] برای تجزیه هر جفت key/value استفاده میشه. (btn1 / "Button 1" و btn2 / "Button 2")و اگه نیاز به index و value های یه آرایه در iteration داریم میتونیم از متد entries() استفاده کنیم. به کد زیر توجه کنین:var arr = [ 10, 20, 30 ]; for (let [idx,val] of arr.entries()) { console.log(`[${ idx }]: ${ val }`); } // [0]: 10 // [1]: 20 // [2]: 30همین طور که دیدین built-in iterables در js دارای سه شکل iterator هستند :1- keys-only (keys())2- values-only (values())3- entries (entries())Closureتعریفی که خود کتاب از closure میگه رو دقیقا براتون میذارم :Closure is when a function remembers and continues to access variables from outside its scope, even when the function is executed in a different scope.اینجا دو ویژگی هستش که اهمیت داره ، اول اینکه closure بخشی از ماهیت یک function هستش . دوم اینکه برای مشاهده یک closure باید یه function رو داخل یه scope متفاوت نسبت به جایی که در ابتدا اون function تعریف شده بود قرار بدین و کد رو اجرا کنین .کد زیر رو در نظر بگیرین:function greeting(msg) { return function who(name) { console.log(`${ msg }, ${ name }!`); }; } var hello = greeting("Hello"); var howdy = greeting("Howdy"); hello("Kyle"); // Hello, Kyle! hello("Sarah"); // Hello, Sarah! howdy("Grant"); // Howdy, Grant!ابتدا یه function خارجی greeting() داریم که داخلش function who() تعریف شده. function داخلی امکان دسترسی به variable msg رو داره . وقتی function داخلی return میشه reference داده میشه به hello() که در خارج از scope قرار داره. سپس بار دوم greeting() فراخوانی میشه و یک نمونه function جدید ازش ساخته میشه و که بعد از return function داخلی reference داده میشه به howdy.زمانی که اجرای greeting () به پایان رسید تمام مقدار های اون به جز msg از بین میرن . پس فقط مقدار های hell و howdy و msg میمونن که خارج از scope بهشون امکان دسترسی وجود داره .هنگام کار با asynchronous code مثل callback ها Closure رایج هستش . در نظر بگیرین:function getSomeData(url) { ajax(url,function onResponse(resp){ console.log( `Response (from ${ url }): ${ resp }` ); }); } getSomeData("https://some.url/wherever"); // Response (from https://some.url/wherever): ...عملگر داخلی onResponse روی url بسته شده است و تا زمانی که Ajax فراخوانی بشه و اجرا بشه اون رو حفظ میکنه. حتی اگه getSomeData بلافاصله تموم بشه متغیر پارامتر url رو تا زمانی که نیاز داره در closure حفظ میکنه.به نکته ای که باید توجه کرد اینکه همیشه نیاز نیست scope بیرونی یه function باشه. چیزی که اهمیت داره اینکه در scope بیرونی حداقل یه variable وجود داره که از یک function داخلی قابل دسترس هستش. توجه کنین :for (let [idx,btn] of buttons.entries()) { btn.addEventListener("click",function (){ console.log(`Clicked on button (${ idx })!`); }); }چون این loop داره از let استفاده میکنه هر تکرار یه idx و btn ایجاد میکنه همچنین هربار یک تابع جدید هم ایجاد میکنه. چون مقدار idx رو در function داخلی حفظ میشه تا زمانی که عمل کلیک انجام بشه مقدار index رو پرینت میکنه.مبحث Closure یکی از مباحث مهم در الگوهای برنامه نویسی در هر زبانی هستش به همین دلیل برای درک بهتر مفهوم در جلد 2 کتاب ( Scope & Closures) به این مبحث بیشتر پرداخته میشه و مورد بررسی قرار میگیره .در پست بعدی درباره ادامه فصل که مباحث this Keyword و Prototypes رو شامل میشه رو مورد بررسی قرار میدیم.

You Don't Know JS (Get Started-ch2 - part2)

عارفه حمیدی — Wed, 04 Mar 2020 03:25:20 +0330

در ادامه طبق روند فصل دوم کتاب جلو میریم و دیگر زمینه های اصلی زبان که باعث میشه بهتر بشناسیمش رو مورد بررسی قرار میدیم .Functionsکلمه function در برنامه نویسی معنی های متنوعی داره. مثلا در دنیای Functional Programming ، شامل مجموعه ای از قوانین هستش که باید رعایت شه. در js ما باید برای function ها معنی وسیع تری رو در نظر بگیریم که بهش procedure میگن. یک procedure مجموعه ای از عبارات هستش که میتونه یک یا چندبار فراخوانی بشه همچنین ممکنه یک چند ورودی و یا یک یا چند خروجی هم داشته باشه.تعریف function ها اینطور هستش:function awesomeFunction(coolThings) { // .. return amazingStuff; }به این function declaration میگیم . ارتباط بین شناسه awesomeFunction و مقدار function در مرحله کامپایل کد اتفاق میفته . در مقابل function declaration باید به function expression توجه کنیم که اینطور تعریف میشه:// let awesomeFunction = .. // const awesomeFunction = .. var awesomeFunction = function(coolThings) { // .. return amazingStuff; };این تابع یک expression هستش که به متغییر awesomeFunction اختصاص داده شده. برخلاف فرم function declaration در فرم function expression با identifier تا زمان runtime در ارتباط نیست.ذکر این نکته اهمیت داره که در js توابع مقادیری هستند که میتونن اختصاص داده بشن یعنی توابع js نوعی خاصی از object value هستند .توابع js میتونن ورودی پارامتر قبول کنند و همچنین باکلمه کلیدی return مقداری رو برگردونن. به کد زیر توجه کنین :function greeting(myName) { return `Hello, ${ myName }!`; } var msg = greeting("Kyle"); console.log(msg); // Hello, Kyle! در اینجا myName به عنوان پارامتر ورودی هستش که یک local variable هستش که داخل تابع عمل میکنه. همچنین با استفاده از return هم میتونیم یه مقدار رو برگردونیم و اگه نیازه مقدار بیشتری برگردونیم میتونیم از array یا object ها استفاده کنیم .همچنین چون function ها value هستند بنابراین میتونیم به عنوان properties به object هم اختصاصشون بدیم . به کد زیر توجه کنین :var whatToSay = { greeting() { console.log("Hello!"); }, question() { console.log("What's your name?"); }, answer() { console.log("My name is Kyle."); } }; whatToSay.greeting(); // Hello!در این کد سه تابع (greeting, question, answer) داریم که به عنوان properties شی whatToSay هستند. Comparisonsتصمیم گیری در برنامه ها نیاز به مقایسه value ها برای تعیین هویت و رابطه آنها با هم داره. js چندین مکانیسم برای امکان مقایسه داره، که با هم بررسیشون میکنیم.Equal...ishگاهی اوقات مقایسه برابری قصد تطابق دقیق رو داره اما در بعضی موارد هدف گسترده تر هستش و مقایسه در حد تطابق نزدیک یا مشابه هستش. بنابراین باید به تفاوت بین مقایسه برابری و مقایسه هم ارزی توجه کنیم.حتما در کد js اپراتور === که بهش "triple-equals" میگن رو دیدین که برای "strict equality" تعریف شده. به این نکته کتاب توجه کنین:"strict" means strict, as in narrow and exact.Not exactly.به مثال های زیر دقت کنید تا بهتر متوجه عملکرد این مقایسه بشین :3 === 3.0; // true "yes" === "yes" // true null === null; // true false === false; // true 42 === "42" // false "hello" === "Hello" // false true === 1; // false 0 === null; // false "" === null; // false null === undefined; // falseهمونطوری که میبنین مقایسه برابری با توجه به مقدار (value) و نوع (type) انجام شده . مثلا در خط 6 مقدار number 6 با مقدار string 6 رو مساوی در نظر نگرفته و مقدار false رو برگردونده.دو مورد اشتباه هم برای === وجود داره که مقادیر NaN و -0 هستش:NaN === NaN; // false 0 === -0; // trueدر مورد مقدار NaN عملگر === به اشتباه میگه که دو مقدار NaN با هم برابر نیستن همچنین برای مقادیر 0 و -0 ولی نکته مهمی که وجود داره اینکه از مقدار -0 میتونین تو برنامه هاتون برای اینکه یه مقدار متمایز برای بررسی شرط داشته باشین استفاده کنین.بهتر هستش برای جلوگیری از این اشتباه برای مقایسه NaN از Number.isNaN(..) و برای مقایسه -0 از Object.is(..) استفاده کنید که مقایسه دقیق تری هستش.اما داستان وقتی پیچیده تر میشه که بخواییم object value ها رو مقایسه کنیم . توجه کنین :[ 1, 2, 3 ] === [ 1, 2, 3 ]; // false { a: 42 } === { a: 42 } // false (x => x * 2) === (x => x * 2) // falseدر js از === برای structural equality نمی تونیم استفاده کنیم پس می تونیم نتیجه بگیریم که === برای object تعریف نشده. ولی میتونیم برای هرobject یه refrence یا value تعریف کنیم و بهش ارجاع بدیم. کد زیر رو در نظر بگیرین :var x = [ 1, 2, 3 ]; // assignment is by reference-copy, so // y references the *same* array as x, // not another copy of it. var y = x; y === x; // true y === [ 1, 2, 3 ]; // false x === [ 1, 2, 3 ]; // falseمقایسه مقدار x===y مقدار true رو برمیگردونه چون هردو یه مقدار بهشون reference شده اما در دوتا مقایسه بعدی چون بررسی ساختار وجود داره شکست میخوره.Coercive Comparisonsاکثر نوشتار ها و گفتمان ها درباره js استفاده از == که بهش "loose equality" گفته میشه رو به دلیل طراحی و خطرناک بودنش از نظر رفع اشکال محکوم میکنن. حتی خود Brendan Eich از نحوه طراحی این به عنوان یه اشتباه بزرگ ابراز تاسف میکنه.یک مشکل بزرگی که اکثرا فک میکنن وجود داره این هستش که تصور میکنن == بدون در نظر گرفتن type مقایسه رو انجام میده در حالی که هر دو اپراتور == و === ابتدا نوع رو بررسی میکنن اما == اجازه میده ابتدا تبدیل نوع انجام بشه و وقتی تبدیل شد و هر دو طرف مقایسه از نظر نوع یکسان شدند سپس همون کاری رو میکنه که === انجام میداد . بهتر اینکه به جای عبارت "loose equality" از عبارت "coercive equality" استفاده بشه. کد زیر رو در نظر بگیرین:42 == "42" // true 1 == true; // trueهمونطور که توجه کردین == باعث میشه مقدار های غیر عددی "42" و true ابتدا به مقدار عددی تبدیل بشن و سپس مقایسه انجام بشه و در نتیجه true بهمون برگردونه.همچنین از مقایسه های رابطه ای مثل < ، > ، =< و => می تونیم استفاده کنیم. این اپراتور ها هم مثل == اول نوع رو مقایسه میکنن و در صورت متفاوت بودن اجازه تبدیل نوع معمولا به اعداد رو میدن . توجه کنین :var arr = [ "1", "10", "100", "1000" ]; for (let i = 0; i < arr.length && arr[i] < 500; i++) { // will run 3 times }مقایسه این جا اینطور انجام میشه :1 < 500, 10 < 500, 100 < 500, and 1000 < 500بعد از بررسی شرط چهارم false هستش بنابراین حلقه بعد از شرط سوم متوقف میشه.ذکر این نکته اهمیت داره که در حالتی که یه طرف مقایسه ما عدد باشه نوع طرف دیگه به عدد تبدیل میشه وگرنه در نوع خودش باقی میمونه . توجه کنین :var x = "10" var y = "9" x < y; // true, watch out!مقایسه اینجا بین دو str هستش و بنابراین بر اساس حروف الفبا و ترتیب اعداد باید انجام بشه .How We Organize in JSدو الگوی اصلی سازمندهی کد که بطور گسترده در js استفاده میشه class ها و module ها هستن. از بعضی جهات این دو الگو بسیار از هم متفاوت هستن و از بعضی جهات هم فقط طرف های مختلف یک سکه هستن. برای اینکه مهارت بهتری در js بدست بیاریم نیازه که هر دو الگو رو کاملا درک کنیم و بدونیم در کجا نیازه از کدوم الگو استفاده کنیم.Classesکلاس ها چگونگی عملکرد ساختار داده ها رو تعریف میکنن. مکانیسم کلاس ها باعث میشه که داده ها به همراه رفتارها (methods) سازماندهی بشن. نکته قابل اهمیت این هستش که برنامه ای رو که با استفاده از کلاس ها پیاده سازی میشن رو بدون کلاس هم میشه پیاده سازی کرد ولی سازماندهی و خواندن و استدلال کد سخت تر میشه و احتمال وجود اشکال و خطا هم درش بیشتر میشه.کد زیر رو در نظر بگیرین :class Page { constructor(text) { this.text = text; } print() { console.log(this.text); } } class Notebook { constructor() { this.pages = []; } addPage(text) { var page = new Page(text); this.pages.push(page); } print() { for (let page of this.pages) { page.print(); } } } var mathNotes = new Notebook(); mathNotes.addPage("Arithmetic: + - * / ..."); mathNotes.addPage("Trigonometry: sin cos tan ..."); mathNotes.print(); // ..در کلاس Page داده ورودی که به عنوان یک property هستش در this.text ذخیره شده و متد print() مقدار text رو در console نشون میده.برای کلاس NoteBook هم داده ها array از Page ها هستند. متد addPage برای هر text یک new Page ایجاد میکنه و به ارایه pages اضافه میکنه. متد print هم همه صفحات موجود noteBook رو چاپ میکنه.دستور mathNotes = new Notebook() یه نمونه جدید از کلاس NoteBook ایجاد میکنه و داخل کلاس NoteBook دستور page = new Page(text) یه نمونه جدید از کلاس Page رو ایجاد میکنه . متد های یک کلاس هم میتونیم اینطوری فراخوانی کنیم : mathNotes.addPage(..)Class Inheritanceیکی از ویژگی های طراحی "class-oriented" ، وراثت (inheritance) و چند ریختی (polymorphism) هستش .کد زیر رو در نظر بگیرین:class Publication { constructor(title,author,pubDate) { this.title = title; this.author = author; this.pubDate = pubDate; } print() { console.log(` Title: ${ this.title } By: ${ this.author } ${ this.pubDate } `); } } class Book extends Publication { constructor(bookDetails) { super( bookDetails.title, bookDetails.author, bookDetails.publishedOn ); this.publisher = bookDetails.publisher; this.ISBN = bookDetails.ISBN; } print() { super.print(); console.log(` Publisher: ${ this.publisher } ISBN: ${ this.ISBN } `); } } class BlogPost extends Publication { constructor(title,author,pubDate,URL) { super(title,author,pubDate); this.URL = URL; } print() { super.print(); console.log(this.URL); } }کلاس Publication مجموعه ای از رفتارهای متداول رو که ممکن هستش یه Publication داشته باشه رو تعریف میکنه . دو کلاس Book و BlogPost هر دو extend شده از کلاس Publication هستن تا شامل ویژگی های Publication بشن . هر دو فراخوانی super(...) در هر constructor به کارهای کلاس پدر خودش میپردازه و سپس کارهای خاص تری رو بنا به نوع خودش انجام میده. به استفاده از کلاس های فرزند توجه کنین :var YDKJS = new Book({ title: "You Don't Know JS", author: "Kyle Simpson", publishedOn: "June 2014", publisher: "O'Reilly", ISBN: "123456-789" }); YDKJS.print(); // Title: You Don't Know JS // By: Kyle Simpson // June 2014 // Publisher: O'Reilly // ISBN: 123456-789 var forAgainstLet = new BlogPost( "For and against let", "Kyle Simpson", "October 27, 2014", "https://davidwalsh.name/for-and-against-let" ); forAgainstLet.print(); // Title: For and against let // By: Kyle Simpson // October 27, 2014 // https://davidwalsh.name/for-and-against-letتوجه کنید که هر دوتا فراخوانی از متد print() کلاس های فرزند استفاده کردن و سپس هر کدوم به دستور super.print() رسیدن و با استفاده از وراثت print رو انجام دادن.بنابراین میتونیم بگیم که وراثت یه ابزار قدرتمند برای سازماندهی دادها و رفتارها در کلاس ها هستش که اجازه میده کلاس های فرزند امکان دسترسی و استفاده از داده ها و رفتارهای کلاس های پدر رو داشته باشن .Modulesالگو های module هم در واقع همون هدف class ها رو داره ، یعنی گروه بندی داده ها و رفتار ها با هم در واحد های منطقی. همچنین مانند کلاس ها به دلیل همکاری ماژول ها با هم می تونن به داده ها یا رفتارهای یکدیگر دسترسی داشته باشن. اما با هم تفاوت هایی هم دارند که از همه مهم تر syntax کاملا متفاوتشون هستش.Classic Modules از نشانه های یک classic module یک function خارجی هستش که instance ماژول رو با یک یا چند کار کرد در معرض استفاده قرار میده و میشه با استفاده ازش روی داده های داخلی ماژول کار کرد. بنابراین چون ماژول ها در این فرم عملا یک function هستند و فراخوانی اونها به عنوان instance تولید میشه توضیحات دیگر روی module factories هستش .به فرم کلاسیک ماژول کدی که برای کلاس ها بررسی کردیم توجه کنین :function Publication(title,author,pubDate) { var publicAPI = { print() { console.log(` Title: ${ title } By: ${ author } ${ pubDate } `); } }; return publicAPI; } function Book(bookDetails) { var pub = Publication( bookDetails.title, bookDetails.author, bookDetails.publishedOn ); var publicAPI = { print() { pub.print(); console.log(` Publisher: ${ bookDetails.publisher } ISBN: ${ bookDetails.ISBN } `); } }; return publicAPI; } function BlogPost(title,author,pubDate,URL) { var pub = Publication(title,author,pubDate); var publicAPI = { print() { pub.print(); console.log(URL); } }; return publicAPI; }با مقایسه این کد و کد قبل که برای فرم کلاس ها بود میبینیم که شباهت ها بیشتر از تفاوت ها هستند.در فرم کلاس ها داده ها و متد ها به عنوان یه object ذخیره میشیدن که با this. میتونستیم بهشون دسترسی داشته باشیم ولی در ماژول ها داده ها و متدها به عنوان identifier variables هستن که می تونیم ازشون استفاده کنیم و نیازی به this. نیستش. نحوه استفاده ازش رو ببینین :var YDKJS = Book({ title: "You Don't Know JS", author: "Kyle Simpson", publishedOn: "June 2014", publisher: "O'Reilly", ISBN: "123456-789" }); YDKJS.print(); // Title: You Don't Know JS // By: Kyle Simpson // June 2014 // Publisher: O'Reilly // ISBN: 123456-789 var forAgainstLet = BlogPost( "For and against let", "Kyle Simpson", "October 27, 2014", "https://davidwalsh.name/for-and-against-let" ); forAgainstLet.print(); // Title: For and against let // By: Kyle Simpson // October 27, 2014 // https://davidwalsh.name/for-and-against-letهمونطور که میبینین تنها تفاوت قابل توجه اینجا عدم استفاده از new هستش .ES Modulesاین ماژول ها در ES6 معرفی شدن و از نظر هدف مثل ماژول های کلاسیک هستند ولی در اجرا تفاوت زیادی دارند.اول اینکه در این نوع ماژول function برای تعریف modules وجود نداره و هر file یک module هستش.دوم اینکه شما به طور صریح با api ماژول ها تعامل ندارین بلکه از کلمه کلیدی export برای اضافه کردن داده یا متد به api عمومی استفاده میکنین . یعنی اگر چیزی در یک ماژول ایجاد شده ولی export نشده در داخل ماژول پنهان میمونه.سوم اینکه می تونین یه ماژول رو داخل یه ماژول دیگه import کنین و از نمونه اون استفاده کنین. اگر ماژول شما نیاز به پشتیبانی از multiple instantiations داره ابتدا باید یه module-style factory function تعریف کنین و سپس روی اون ESM رو تعریف کنین . به مثال زیر توجه کنین تا نحوه استفاده براتون واضح تر بشه . ابتدا فایل publication.js رو در نظر بگیرین :function printDetails(title,author,pubDate) { console.log(` Title: ${ title } By: ${ author } ${ pubDate } `); } export function create(title,author,pubDate) { var publicAPI = { print() { printDetails(title,author,pubDate); } }; return publicAPI; }برای import کردن و استفاده از این ماژول از ماژول blogpost.js استفاده میکنیم :import { create as createPub } from "publication.js" function printDetails(pub,URL) { pub.print(); console.log(URL); } export function create(title,author,pubDate,URL) { var pub = createPub(title,author,pubDate); var publicAPI = { print() { printDetails(pub,URL); } }; return publicAPI; }و در نهایت برای استفاده از این ماژول import ش میکنیم داخل یه ESM دیگه ای مثل main.js: import { create as newBlogPost } from "blogpost.js" var forAgainstLet = newBlogPost( "For and against let", "Kyle Simpson", "October 27, 2014", "https://davidwalsh.name/for-and-against-let" ); forAgainstLet.print(); // Title: For and against let // By: Kyle Simpson // October 27, 2014 // https://davidwalsh.name/for-and-against-letهمانطور که دیدین در صورت نیاز برای پشتیبانی از multiple-instantiation می تونین از ESM داخل classic modules استفاده کنین .من تلاشم رو کردم که کدهایی که تو این فصل بود رو براتون بیارم و تا جایی که می تونم توضیح بدم ولی حتما حتما حتما کل فصل رو دقیق و کامل از خود کتاب بخونین ، چندین بار ...خوشحال میشم نکته ای بود که به بهتر شدن مبحث کمک کنه رو بگین تا با هم ازش استفاده کنیم و بهتر یاد بگیریم .

You Don't Know JS (Get Started-ch2 - part1)

عارفه حمیدی — Thu, 27 Feb 2020 03:47:25 +0330

Surveying JSتمرکز فصل دوم کتاب بر چگونه کار کردن زبان js هستش و برخی از زمینه های اصلی زبان رو مورد بررسی قرار میده تا زبان رو بهتر بشناسیم و بتونیم با اعتماد به نفس بیشتری برنامه هامون رو بنویسیم.این فصل جزیئات زیادی داره و برای هر بخش نیازه که وقت کافی در نظر گرفته شه و با دقت تمرین شه. همونطوری که خود کتاب هم میگه : The best way to learn JS is to start writing JS.Each File is a Programمعمولا هر website یا web application شامل چند فایل js مختلف هستش (معمولا با پسوند .js ). به طور معمول کل برنامه رو به عنوان یک برنامه در نظر میگیرن که این در js درست نیست. در js هر فایل برنامه مستقل خودش رو داره . دلیل این امر در درجه اول مربوط به error handling هستش این ویژگی باعث میشه اگه یک فایل در زمان تجزیه یا اجرا به مشکلی بر خورد و fail شد کل برنامه دچار مشکل نشه و بقیه ی فایل ها اگه مشکلی نداشته باشن اجرا بشن . بنابراین خیلی مهم هستش که مطمئن بشیم همه فایل ها دارن به درستی اجرا میشن.شاید در نظر گرفتن هر فایل js به عنوان برنامه ای جدا عجیب باشه در واقع فایل های js به عنوان فایل های همکار در کنار هم عمل میکنن و یه app بزرگ رو میسازن.در بسیاری از پروژه ها هم از ابزار build process استفاده میکنن که باعث میشه همه ی فایل های js موجود با هم ترکیب بشن و نهایتا یه فایل js برای ارسال به صفحه وب استفاده بشه که با این فایل ترکیبی منفرد به عنوان کل برنامه برخورد میشه.تنها راهی که چندین فایل .js به عنوان یک برنامه واحد عمل کنن اشتراک گذاری وضعیت آنها از طریق "global scope" هستش.از زمان ES6 علاوه بر قالب برنامه استاندارد js از یک قالب module هم پشتیبانی شده که اگه یک فایل از مکانیسم module-loading مانند import یا استفاده از