تحديد الوظائف في JavaScript داخل jQuery

Question

أنا أعمل على موقع خاص ، وأواجه بعض المشكلات. أنا أستخدم jQuery مع النموذج الأولي ، وقد وضعت اسمه بشكل صحيح ، لذلك في هذا السؤال ، افترض أنه يمكنك استخدام $ أو JQ كمرجع مسمى إلى jQuery.

لذلك لدي مجموعة من الوظائف ، وبعض jQuery و JavaScript ، وبعض JavaScript العادي ، وبعض jQuery فقط. الآن ، يتم تعريف بعض الوظائف حاليًا داخل المستند

jQ(document.ready(function($) {

  if ( ifConfig ) {
    //page check, function calls here
    fnc1();
    fnc2();
    fnc3();
    fnc4();
  }

  function fnc1() {
    //fnc code in here
  }
  function fnc2() {
    //fnc code in here
  }
});  //end document.ready

function fnc3() {
}
function fnc4() {
}

الآن هذا هو كل رمز زائف ، يمكنك افتراض أن الوظائف صالحة ولديها رمز صالح فيها. في الآونة الأخيرة ، كنت أقوم ببعض تصحيح الأخطاء ، وأحد وظائفي التي تم الإعلان عنها واتصلت بها داخل المستند. لقد نقلته خارج المستند. جاهز ، وكل شيء نجح مرة أخرى.

أحاول بشكل أساسي فهم ترتيب كيفية بدء الوظائف/استدعاءها بشكل أفضل ، لذلك سؤالي هو متى تعلن الوظائف داخل المستند. جاهز ومتى تعلنها في الخارج؟ هل تعلن فقط في الداخل عندما يتم استدعاؤهم ضمن هذا المستند. جاهز فقط؟ أو هل يجب أن أعلنهم دائمًا خارج هذه الوثيقة.

شكرًا.

Answer 1

بشكل عام ، يجب أن تعلن وتحديد خاصتك namespace, ، حيث يوجد كل منطق التطبيق (بما في ذلك الوظائف/الأساليب). بهذه الطريقة تتجنب collision مع البرامج النصية الأخرى على موقعك + بهذه الطريقة يكون الكود أكثر نظافة وأسهل في الصيانة.

var myapp = function(){
    var foobar1 = null,
        foobar2 = null,
        foobar3 = null;

    return {
        getFoobar1:  function(){
           return foobar1;
        },
        getFoobar2:  function(){
           return foobar2;
        },
        setFoobar1:  function(foo){
           foobar1 = foo;
        },
        clickhandler: function(e){
           alert('I am an event handler, and I am not anonymous');
        }
        // etc.
    };
};

$(document).ready(function(){
    var Application = myapp();

    Application.getFoobar2();

    $(document).bind('click', Application.clickhandler);
});

هذا النمط (يطلق عليه البعض "نمط الطريقة") ينشئ دالة/كائن مغلق يضمن أيضًا متغيرات الأعضاء الخاصة داخل مساحة الاسم الخاصة بك ، لا يمكن الوصول إليها إلا من خلال getter وظائف من الخارج.

هذا هو في الحقيقة مجرد مثال أساسي للغاية ، يمكنك دفع هذه الفكرة والنمط إلى تمديدها ، وهو أمر رائع للغاية وشيء جيد (IMO).

كتاب رائع عن هذه الأشياء التي تم تسميتها وأوصى بها في كثير من الأحيان "JavaScript: The Good Parts" لـ Douglas Crockford.

Answer 2

إذا تم استخدام الوظيفة فقط داخل وظيفة جاهزة المستند ، فقم بإعلانها في الداخل حتى لا تلوث النطاق العالمي. خلاف ذلك ، أعلن ذلك في الخارج بحيث يكون بقية البرنامج النصي الخاص بك يمكنه الوصول إلى هذه الوظائف.

Answer 3

(المستند). READY يستخدم أكثر للأشياء التي تحتاج إلى تنفيذها في تحميل الصفحة ، وليس إعلانات الوظيفة. إذا أعلنتهم داخل (المستند). جاهز ، سيكون نطاقهم محليًا لتلك الكتلة - إذا كانت تستخدم محليًا فقط ، فلا بأس وينبغي إعلانها هناك. خلاف ذلك ، أعلن لهم في الخارج.

لذلك في مثالك ، إذا تم استخدام الوظائف فقط في تلك الكتلة ، فيجب إعلانها هناك. إذا استخدموا أماكن أخرى بالإضافة إلى ذلك ، فيجب إعلانها في الخارج.