עידן יצחקיבמדריך זה נעבור על צורת הכתיבה הבסיסית ובמקביל נראה את תצורת הכתיבה שאני ממליץ ומעדיף.
מה שאני ממש אוהב בשפה הזו, זה את הגמישות שלה. אם אתם לא ממש מכירים או חדשים לשפה אז אני יכול להגיד לכם שזו השפה הכי גמישה שיצא לי לכתוב בה.
כל משתנה יכול להיות כל דבר ללא הגדרה מראש, אלא בזמן עבודה.
הינה פונקציה בסיסית פשוטה כדי להדגים עד כמה ג'ווה-סקריפט גמיש (הוא אפילו עוד יותר גמיש מזה)
function go() {
console.log('HI');
var a = 10;
console.log(a);
a = "hi again";
console.log(a);
a = ["hi", "again"];
console.log(a);
a = [0, 0, 0];
console.log(a);
}
go();התוצאות הם:
HI 10 hi again ["hi","again"] [0,0,0]
נפרק את הפונקציה ונראה מה קרה:
תחילה הגדרנו פונקציה בשם GO שלא מקבלת ערכים מבחוץ.
בכניסה לפונקציה הוצאנו הודעה HI.
אחרי זה, הגדרנו משתנה בשם a והגדרנו לו שהוא שווה ל-10, שימו לב ש-10 ו-"10" זה לא אותו דבר.
אם הייתי עושה a=10+1 זה היה עובד והיינו מקבלים 11 אבל אם הייתי שם אותו בגרשיים זה לא היה עובד והתוצאה הייתה אחרת.
כך שאנחנו יכולים להגיד ש-a הוא number, אחרי זה הגדרנו לו משפט כך שהוא שינה את ההגדרה שלו ל-string, אחרי זה למערך של מילים ולבסוף למערך של מספרים גדול יותר ואין שגיאות הכל בסדר ותקין.
בגלל שהוא כל כך גמיש אין סיבה שאני לא אגדיר אותו כאוביקט שיכול להכיל עוד אוביקטים ופונקציות.
מה היתרון? אני מיד אסביר ואדגם.
כאשר אנחנו מגדירים פונקציה, היא חשופה לעולם, אפשר לקרוא לה גם אחרי שהיא רצה דרך F12 באיזור ה-console.
אם היא חשופה, זה אומר שבמידה שרצים מספר קבצים של JS ששיכים למפתחים שונים או לפלאג-אין כלשהו, הפונקציה שבנינו עלולה להידרס. אם כך מה ניתן לעשות?
אמרנו שניתן להגדיר משתנה כאוביקט שיכול לאכלס כל דבר, אז בואו נראה איך עושים את זה.
var mySuperObj = new Object();
מרגע זה רק mySuperObj יהיה חשוף לעולם ורק אם סקריפט אחר יקים משתנה בדיוק באותו שם, תהיה דריסה…. זה מוריד את הסיכויים לדריסה בהרבה (בעיקר אם השם ארוך ומוזר).
ועכשיו לצרף לו את הפונקציה שבנינו:
mySuperObj.go = function() {
console.log('hello');
}
mySuperObj.go();הגדרנו ל-mySuperObj פרופרטי שניקרא go והוא פונקציה, לאחר מכן הפעלנו אותה.
הפונקציות שהם בעצם מאפיינים של האוביקט שלנו חשופות אחת לשניה וכך אנחנו יכולים לעשות את זה:
mySuperObj.logger = function() {
console.log('inside logger');
}
mySuperObj.go = function() {
console.log('hello');
mySuperObj.logger();
}
mySuperObj.go();הפעלנו את פונקצית go שהדפיסה log ולאחר מכן הפעילה את פונקצית logger.
אם אתם מפתחים אם נסיון אז אתם יודעים שהרבה יותר נוח לנו לעבוד בתצורת קופסאות והיררכיה מאשר שטוח (אם אתם ללא נסיון אז מיד תבינו).
נגיד שאני רוצה ליצר איזור שיטפל באוטנטיקציה (אימות) של משתמש, כדי שלא כל הפונקציות ישבו לי מיד תחת mySuperObj אפשר לעשות את הדבר הבא (מעולה לשימוש ב-intellisense):
mySuperObj.auth = new Object();
mySuperObj.auth.getUserInfo = function(){
// משיכת המידע מהשדות בדף
}
mySuperObj.auth.sendToServer = function(userInfo){
// שליחת המידע לשרת
// הפעלה של פונקצית שגיאה או הצלחה בהתאם לתשובה מהשרת
}
mySuperObj.auth.response = new Object();
mySuperObj.auth.response.error = function(errorInfo){
// הפעלה של הפונקציה במידה שיש שגיאה
}
mySuperObj.auth.response.success = function(successInfo){
// הפעלת הפונקציה במידה ותקין
}אפשר לראות שאיגדנו את כולם תחת auth ואת הצלחה או שגיאה תחת שיכבה נוספת בשם response.
ככה אנחנו יכולים לטפל בסקריפט מאוד גדול ומסורבל ביותר קלות.
כמובן שלא הכל חייב להיות פונקציה או אוביקט, הינה דוגמה לשימוש נוסף:
mySuperObj.title = 'Hi, welcome to the object'; mySuperObj.showTitle = false;
קבלנו מאפיין נוסף שהוא string ועוד אחד שהוא bool, הם זמינים לכל הסקריפט כמו משתנים גלובאלים ואפשר להשתמש ולשנות אותם בקלות.
מה אם היינו רוצים שבסוף כל הסקריפט שכתבנו תהיה הפעלה אוטומטית ?
נכון שאפשר לקרוא לפונקציה כמו שעשינו בהתחלה והיא תתניעה את הקריאה לכל שאר הפונקצויות, אבל ברוח השיטה אנחנו נעשה את זה קצת אחרת.
mySuperObj.activator = (function() {
mySuperObj.go();
})();יצרנו פונקציה שמפעילה את עצמה ובתוכה היא מפעילה את פונקצית GO.
אני ממליץ מאוד להשתמש בתחילת הסקריפט (בשורה הראשונה) במלל הבא:
"use strict";
זה ימנע ממכם לעשות טעויות מסויימות בכתיבה, להרחבה בנושא ניתן לקרוא כאן – https://www.w3schools.com/js/js_strict.asp
סיכום כל הקוד שדיברנו עליו:
"use strict";
var mySuperObj = new Object();
mySuperObj.logger = function() {
console.log('inside logger');
}
mySuperObj.go = function() {
ad = 'gogo';
console.log('hello');
mySuperObj.logger();
}
mySuperObj.auth = new Object();
mySuperObj.auth.getUserInfo = function() {
// משיכת המידע מהשדות בדף
}
mySuperObj.auth.sendToServer = function(userInfo) {
// שליחת המידע לשרת
// הפעלה של פונקצית שגיאה או הצלחה בהתאם לתשובה מהשרת
}
mySuperObj.auth.response = new Object();
mySuperObj.auth.response.error = function(errorInfo) {
// הפעלה של הפונקציה במידה שיש שגיאה
}
mySuperObj.auth.response.success = function(successInfo) {
// הפעלת הפונקציה במידה ותקין
}
mySuperObj.title = 'Hi, welcome to the object';
mySuperObj.showTitle = false;
mySuperObj.activator = (function() {
mySuperObj.go();
})();מקווה שלא העמסתי יותר מידי ושנהנתם מהפוסט……..
