מידע מורחב

  • תאריך
  • שעה 23:56
  • ע"י
  • צפיות 2276
  • תגובות 3
  • דירוג 0 /5

ג'אווה סקיפט - המדריך לאובייקטים

Feb05
אוקי חברים היום אני אסביר על שימוש מתקדם בנושא שאפשר להגדיר אותו אחד הכואבים בתחום הוואב.
אני הולך לתת לכם טיפה הסברים על אופן השימוש באוביקטים, למה צריך אותם ואסביר גם על סוגי האוביקטים השוניים הקיימים. בנוסף נראה צורות מימוש רלוונטיות וכמו כן צורות של הזרקה בON THE FLY לאובייקטים קיימים ומתוודאות ולסיכום אדבר על צורת DEBUG מומלצת.

לפני שנתחיל מעט על עצמי: בעברי פיתחתי פלטפורמה ענקית כ web application javascript בתחום ההימורים.

למה להשתמש באוביקטים בג'אווה סקיפט

אוקי זה שאלה שאני נתקל בה המון מידידים שלי שמתכנתים בגוואה סקריפט.
ברובם המוחלט של האתרים שבהם אני נתקל ישנו איזור ג'אווה סקיפט מבולגן. למה ב php זה צריך להיות מונחה עצמים ומסודר ובג'אווה סקריפט הכל מבולגן ? בוא נעשה רשימה כדי לדעת למה:
  1. סדר הקוד
  2. קריאות הקוד
  3. שימוש מחדש בקוד במגזרים שונים
  4. אפשרות לביצוע תהליכים מורכבים במינימום קוד

אני בטוח שזו רשימה חלקית אז אשמח שתגיבו לי ואני אראה איך אני אוסיף, אבל לנושא כמו ש php נדרש אוביקט אורינט ככה גם ג'אווה סקריפט חשוב לי לציין שעוד מעט עם כניסת ה html5 דברים הולכים להשתנות לחלוטין.

אוקי מה עכשיו?

אוקי אנשים אני בטוח שעכשיו שהבנתם לאיזה מטרות אתם זקוקים לסוג כזה של פונקציונליות אתם בטח שואלים עצמכם איך להשתמש בזה, האם זה יוכל להשתלב עם jquery או סוג אחר של פלטפורמה ליצירת אפקטים והרחבת יכולות שלכם לביצוע מונפולצית על אלמנטים, ובכן ידידיי אני שמח לבשר לכם שכן והסיבה לזה מאוד פשוטה, מה שיפה בנושא הזה זה שהאוביקטים של ג'אווה סקיפט הם דבר ניטיב (מובנה - זה אומר שזה חלק מהג'אווה סקיפט).
כמו כן הוא מכיל בתוכו עוצמה מאוד גדולה ומאוד רצינית לאפליקציה שלכם, סתם לדוגמה בוא נגיד ויש לכם אפליקציה של גלריות תמונות המונחות אלמנטים שזה אומר:
התמונה הנ"ל נלקחה מסקריפט גלריות שמצאתי ברשת פה
להלן הגלריה:



נניח והבוס שלכם בא אליכם ואומר: שמע אני צריך גלריה כזו ללא שימוש בפרימווארק בגלל שיקולים שלי אני צריך שיראה ככה בסיגנון הזה ללא יותר מדי אפקטים.

אתם בטח אומרים לעצמכם אמאלה מה הוא רוצה ממני פתאום, לא עשיתי לו שום דבר רע...
בואו נבצע פירוק של המשימה לחלקיה השונים ועל הדרך אסביר לכם איך מתמודדים עם משימות כאלו

אוקי אז איך מתחילים?

לאחר שנגמר ההלם הראשוני בואו נראה בדיוק מול מה אנחנו מתמודדים ונפרק אותו לגורמים ומה זה אומר כלפינו והכי חשוב איך אנחנו נבנה הכול נכון באוביקטים.
מה שיש לנו בתמונה זה 5 איזורים: חץ שמאלי, חץ ימני, איזור כותרת שזה קישור, תת כותרת ואיזור התמונה.
זה אומר מבחינתינו כי הקוד מורכב 3 גורמים מרכזיים:
  • הגדרות
  • איזור מידע
  • איזור אירועים

נשמע כמו קצת סינית, מה זה כל שלושת האיזורים שאני מזכיר ?! אני שמח ששאלתם
בעצם מה שזה אומר זה דבר מאוד פשוט והוא שישנו איזור שיכיל רק הגדרות פשוטות כמו מאיזה תמונה נתחיל אם יש לנו גורם זה זמן כל כמה זמן התמונה תתחלף ועוד הגדרות שנראה לנכון לשים שם.
איזור מידע זה אומר איזור שבו יוכלו להזין את התמונות הרלוונטיות למערכת.
איזור אירועים זה לא באמת איזורים כמו ספורט או דברים כאלה אלה יותר חיווט אירועים onthefly והגדרת הפונקציות שהם משתמשים callback (שזה פונקציה שאליה המערכת חוזרת כאשר אירוע זה קורה) אירועים נקרא בשמם המקצועי באנגלית events.
אוקי חברים בוא נתחיל להבין מה זה אוביקטים ב ג'אווה סקריפט.

מה זה אוביקטים

לרוב כמעט כל דבר בג'אווה סקיפט הוא סוג של אוביקט החל מסטרינג, מספרים ועד לאלמנטים.
אתם בטח שואלים עצמכם אז מה אוביקטים של גוואה סקריפט זה ואיך זה שונה ??
ובכן זה שונה בכך שהאוביקטים שאלמד אתכם במאמר זה הינם מאוחסנים בזיכרון עצמו של הדפדפן בניגוד לאוביקטים של סטרינג או DOM אשר יוכלים לבצע פעולות בשבילכם כי זה class לכל דבר.

דוגמאות לאוביקטים שקיימים בג'אווה סקריפט:
alert(document);
alert(window);
alert(Object);
alert(Date);

כמובן זוהי רשימה חלקית ובטוח ישנן עוד אז סלחו לי

איך עובדים אם אובקטים

אוקי 2 מצבים שניתן לעבוד אם אוביקטים:
  • לא קיימים
  • קיימים

בוא נתחיל בלא קיימים.

אוקי ישנם 3 צורות של עבודה אם אוביקטים (3 צורות יצירה):

דרך ראשונה

הדרך הראשונה דרכה תוכלו ליצור אוביקטים היא דרך prototype זה אינו הפריימווארק של האתר הזה אלה זה מגיע נייטיב שזה אומר מובנה עם הג'אווה סקיפט הרגיל.
הדרך ליצירת האוביקט היא בצורה הזאת:

var Myclass =  function () {};
Myclass.prototype.sayHi = function (){ 
  alert('hi'); 
}
var test = new Myclass();
test.sayHi();


אז מה בעצם קרה פה.
בשורה הראשונה הכרזנו על שמשתנה Myclass אשר מכיל פונציה ריקה שזה בעצם אובייקט הרי אמרנו בתחילת המאמר שכל דבר בגוואה סקריפט הינו אוביקטים וזה תקף גם על פונקציות.
בשורה השניה אני דרך הפרטוטיפ אמרתי שמתודה שאני קורה לה sayHi היא פונקציה וזה דרך המימוש שלי.
זהו בגדול כל היתר רגיל מה php.

דרך שניה

כמו שאמרתי לכם ישנה עוד דרך לבצע אותו הדבר רק במימוש שונה:
var Myclass =  function () {
  var based = this;
  based.sayHi = function() {
    alert('hi');
  }
};
var test = new Myclass();
test.sayHi();

אני רק אוסיף שבגלל שפונקציה זה אוביקט אז אפשר להכניס לאינסטנס שלו גם פונקציות וכן אפשר כמה שרוצים רק זכרו שאתם חייבים לתחזק את זה בהתאמה.

הדרך השלישית

אוקי הדרך השלישית שונה כי זה כמו קלאס סטטי לא קלאס שצריך לאתחל אותו זה טוב ורע תלוי במיקום וצורך. להלן אופן המימוש שלנו:
var Myclass = {
  sayHi: function () {
    alert('hi');
  }
}
Myclass.sayHi();


זה פשוט אני מקווה שגם מובן גם פה אפשר לעשות כמה רמות שרוצים כמובן צריכים לזכור כי רמות תחזוקת קוד יכולה לעשות בעיות אם עשיתם יותר מדי.

עכשיו שאנחנו יודעים איך אנחנו עושים את התרגיל

אוקי חברים לאחר שאנחנו מבינים את היתרונות של אוביקטים ואופן השימוש בהם בוא נחזור רגע קט לתרגיל שלנו איך שם אנחנו יוכלים לעשות אותו עם הכלים שיש לנו. ובכן אני אנסה לתת אותו בשלמותו הזדמנות שתיהיה לי בכל מקרה הנה כיוון איך עושים את זה בעזרת אוביקט אחד פשוט:


var Mygalley = function (ops) {
    var based= this;
    based.options = ops;
    based.init();
}
Mygalley.prototype.init = function () {
    var based = this;
    based.cotiner = based.options.context;
    based.cotinerLArrow = based.options.contextLA;
    based.cotinerRArrow = based.options.contextRA;
    based.cotinerImg = based.options.contextImg;
    based.cotinerTitle = based.options.contextTitle;
    based.h = based.options.heg;
    based.w = based.options.width;
    based.numberStartImg = based.options.start;
    based.timerActive = based.options.hasTimer;
}



Mygalley.prototype.ShowGallery = function (dataArray) {
    var based = this;
    if (dataArray == null) {
        return;
    }
    else {
        based.currentIDX = based.numberStartImg;
        based.totalImages = dataArray.
        based.feed = dataArray.length;
        based.context = document.getElementById(based.cotiner);
        based.contextLA = document.getElementById(based.cotinerLArrow);
        based.contextRA = document.getElementById(based.cotinerRArrow);
        based.contextImg = document.getElementById(based.cotinerImg);
        based.contextTitle = document.getElementById(based.cotinerTitle);
        //define the settings
        //display image
        //wire events
        based.contextRA.onclick = based.doActionOnClickRA;
        based.contextLA.onclick = based.doActionOnClickLA;
        based.contextImg.onclick = based.doActionOnClickImg;
        based.contextTitle.onclick = based.doActionOnClickTitle;
    }
}
Mygalley.prototype.doActionOnClickRA = function () {
    //swap image
}

Mygalley.prototype.doActionOnClickLA = function () {
    //swap image
}

Mygalley.prototype.doActionOnClickImg = function () {
    //on title click
}

Mygalley.prototype.doActionOnClickImg = function () {
    //on image click
}



בכל מקרה הרעיון הוא שאני בהגדרות מכוון הכול לאן ולאיפה
ולפונקצית התצוגה אני מעביר את תזרים המידע הכולל הצגת כותרת ולאן התמונה או הכותרת אמורים לגשת
וזהו.

מקווה שעזרתי לכם עם ג'אווה סקריפט טיפה יותר
עדיין לא נרשמת לאתר ? לחץ כאן להרשמה מהירה
נא המתן...
דירוג
  1. אהבתי
  2. תודה...קיף ללמוד בעיברית סוף סוף...
  3. מאמר נחמד מאוד , אני אישית חושב שאין טעם להשתמש פה לאחר הגדרת האובייקט ב prototype ולהוסיף לא מתודות משתנים שונים.
    אני מציע ישר שאתה יוצר אותו , בפנים להכניס מה שאתה צריך.

    בהצלחה


עליך להתחבר כדי להגיב. לחץ כאן להתחברות.