online - تحميل مكتبة jquery




أفضل طريقة لاستخدام jQuery المستضاف من Google ، ولكن الرجوع إلى المكتبة المستضافة على Google تفشل (14)

ما هي الطريقة الجيدة لمحاولة تحميل jQuery المستضاف في Google (أو غيرها من libs المستضافة من Google) ، ولكن تحميل نسختك من jQuery إذا فشلت محاولة Google؟

أنا لا أقول جوجل هو قشاري. هناك حالات تم فيها حظر نسخة Google (على ما يبدو في إيران ، على سبيل المثال).

هل يمكنني إعداد جهاز ضبط الوقت والتحقق من كائن jQuery؟

ما هو خطر كلتا النسختين من خلال؟

لا تبحث حقًا عن إجابات مثل "ما عليك سوى استخدام Google واحد" أو "ما عليك سوى استخدام تطبيقك الخاص". أنا أفهم تلك الحجج. أفهم أيضًا أنه من المحتمل أن يكون لدى المستخدم نسخة Google مخزنة مؤقتًا. أنا أفكر في العودة إلى السحابة بشكل عام.

تحرير: وأضاف هذا الجزء ...

نظرًا لأن Google تقترح استخدام google.load لتحميل مكتبات ajax ، وتؤدي وظيفة رد اتصال عند الانتهاء ، فأنا أتساءل عما إذا كان هذا هو مفتاح تسلسل هذه المشكلة.

أعلم أنها تبدو مجنونة بعض الشيء. أنا فقط أحاول معرفة ما إذا كان يمكن القيام به بطريقة موثوق بها أم لا.

تحديث: jQuery مستضاف الآن على CDN Microsoft.

http://www.asp.net/ajax/cdn/


أسهل وأنظف طريقة للقيام بذلك إلى حد بعيد:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/your/jquery"><\/script>')</script>

إذا كان لديك modernizr.js جزءا لا يتجزأ من موقعك ، يمكنك استخدام yepnope.js المدمج في تحميل البرامج النصية الخاصة بك بشكل غير متزامن - من بين آخرين jQuery (مع العودة).

Modernizr.load([{
    load : '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'
},{
    test : window.jQuery,
    nope : 'path/to/local/jquery-1.7.2.min.js',
    both : ['myscript.js', 'another-script.js'],
    complete : function () {
        MyApp.init();
    }
}]);

يؤدي هذا إلى تحميل jQuery من Google-cdn. بعد ذلك يتم فحصه ، إذا تم تحميل jQuery بنجاح. إذا لم يكن ("كلا") ، يتم تحميل الإصدار المحلي. كما يتم تحميل النصوص الشخصية الخاصة بك - يشير "كلاهما" إلى أن عملية التحميل تدور بشكل مستقل عن نتيجة الاختبار.

عند اكتمال جميع عمليات التحميل ، يتم تنفيذ وظيفة ، في حالة "MyApp.init".

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



بعد الاستعادة الأخرى التي تحل محل ajax.googleapis.com مع cdnjs.cloudflare.com :

(function (doc, $)
{
    'use strict';

    if (typeof $ === 'undefined')
    {
        var script = doc.querySelector('script[src*="jquery.min.js"]'),
            src = script.src.replace('ajax.googleapis.com', 'cdnjs.cloudflare.com');

        script.parentNode.removeChild(script);
        doc.write('<script src="' + src + '"></script>');
    }
})(document, window.jQuery || window.Zepto);
  • ليس عليك الاهتمام بنسخة jQuery
  • مثالي لإدارة الأصول التي لا تعمل مع قصاصات HTML
  • اختبارها في البرية - تعمل مثالية للمستخدمين من الصين

صعوبة تحميل المورد من مخزن بيانات خارجي خارج عنصر التحكم الخاص بك صعبة. البحث عن الوظائف المفقودة هو كاذب تماما كوسيلة لتجنب معاناة انتهاء المهلة ، كما هو موضح هنا: http://www.tech-101.com/support/topic/4499-issues-using-a-cdn/


على الرغم من أن كتابة document.write("<script></script>") يبدو أسهل للتراجع عن jQuery ، فإن Chrome يعطي خطأ في التحقق من صحة هذه الحالة. لذلك أنا أفضل كسر كلمة "النصي". لذلك يصبح أكثر أمنا مثل أعلاه.

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script>if (typeof jQuery === "undefined") {
   window.jqFallback = true;
   document.write("<scr"+"ipt src='http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js'></scr"+"ipt>");
} </script>

بالنسبة لقضايا المدى الطويل ، سيكون من الأفضل تسجيل الأخطاء الاحتياطية JQuery. في الكود السابق ، إذا كان CDN الأول غير متاح ، يتم تحميل JQuery من CDN آخر. ولكن قد ترغب في معرفة أن CDN الخاطئة وإزالتها بشكل دائم. (هذه الحالة حالة استثنائية جداً) كما أنه من الأفضل تسجيل مشاكل الاحتياطي. لذلك يمكنك إرسال الحالات الخاطئة باستخدام AJAX. نظرًا لعدم تعريف JQuery ، يجب استخدام javascript الفانيلا لطلب AJAX.

<script type="text/javascript">
    if (typeof jQuery === 'undefined' || window.jqFallback == true) {
        // XMLHttpRequest for IE7+, Firefox, Chrome, Opera, Safari
        // ActiveXObject for IE6, IE5
        var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        var url = window.jqFallback == true ? "/yourUrl/" : "/yourUrl2/";
        xmlhttp.open("POST", url, true);
        xmlhttp.send();
    }
</script>

لأولئك الناس الذين يستخدمون ASP.NET MVC 5 ، أضف هذا الرمز في BundleConfig.cs الخاص بك لتمكين CDN لـ jquery:

bundles.UseCdn = true;
Bundle jqueryBundle = new ScriptBundle("~/bundles/jquery", "//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js").Include("~/Scripts/jquery-{version}.js");
jqueryBundle.CdnFallbackExpression = "window.jQuery";
bundles.Add(jqueryBundle);

لقد قمت بإنشاء Gist الذي يجب أن يقوم بتحميل jQuery بشكل ديناميكي إذا لم يكن قد تم تحميله بالفعل ، وإذا فشل المصدر ، فإنه يتقدم إلى fallbacks (مخيط من عدة إجابات): https://gist.github.com/tigerhawkvok/9673154

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

/* See https://gist.github.com/tigerhawkvok/9673154 for the latest version */
function cascadeJQLoad(i) { // Use alternate CDNs where appropriate to load jQuery
    if (typeof(i) != "number") i = 0;
    // the actual paths to your jQuery CDNs
    var jq_paths = [
        "ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js",
        "ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.min.js"
    ];
    // Paths to your libraries that require jQuery
    var dependent_libraries = [
        "js/c.js"
    ];
    if (window.jQuery === undefined && i < jq_paths.length) {
        i++;
        loadJQ(jq_paths[i], i, dependent_libraries);
    }
    if (window.jQuery === undefined && i == jq_paths.length) {
        // jQuery failed to load
        // Insert your handler here
    }
}

/***
 * You shouldn't have to modify anything below here
 ***/

function loadJQ(jq_path, i, libs) { //load jQuery if it isn't already
    if (typeof(jq_path) == "undefined") return false;
    if (typeof(i) != "number") i = 1;
    var loadNextJQ = function() {
        var src = 'https:' == location.protocol ? 'https' : 'http';
        var script_url = src + '://' + jq_path;
        loadJS(script_url, function() {
            if (window.jQuery === undefined) cascadeJQLoad(i);
        });
    }
    window.onload = function() {
        if (window.jQuery === undefined) loadNextJQ();
        else {
            // Load libraries that rely on jQuery
            if (typeof(libs) == "object") {
                $.each(libs, function() {
                    loadJS(this.toString());
                });
            }
        }
    }
    if (i > 0) loadNextJQ();
}

function loadJS(src, callback) {
    var s = document.createElement('script');
    s.src = src;
    s.async = true;
    s.onreadystatechange = s.onload = function() {
        var state = s.readyState;
        try {
            if (!callback.done && (!state || /loaded|complete/.test(state))) {
                callback.done = true;
                callback();
            }
        } catch (e) {
            // do nothing, no callback function passed
        }
    };
    s.onerror = function() {
        try {
            if (!callback.done) {
                callback.done = true;
                callback();
            }
        } catch (e) {
            // do nothing, no callback function passed
        }
    }
    document.getElementsByTagName('head')[0].appendChild(s);
}

/*
 * The part that actually calls above
 */

if (window.readyState) { //older microsoft browsers
    window.onreadystatechange = function() {
        if (this.readyState == 'complete' || this.readyState == 'loaded') {
            cascadeJQLoad();
        }
    }
} else { //modern browsers
    cascadeJQLoad();
}

هناك بعض الحلول الرائعة هنا ، لكني أرغب في اتخاذها خطوة أخرى فيما يتعلق بالملف المحلي.

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

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

هذا هو الحل المقترح الذي يجب أن يعمل نظريًا:

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

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

ماذا يفكر الجميع؟ ربما يكون هذا مبالغة ، ولكن قد يكون طريقة أنيقة للحفاظ على مكتبات AJAX.

شجرة البلوط


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

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.0.0.min.js">\x3C/script>')</script>

يمكنك تحقيق ذلك على النحو التالي:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>
   window.jQuery || document.write('<script src="/path/to/your/jquery"><\/script>');
</script>

يجب أن يكون هذا في <head> بصفحتك ويجب أن يكون أي من معالجات أحداث جاهزة jQuery في <body> لتجنب الأخطاء (على الرغم من أنها ليست خدعة!).

أحد الأسباب الأخرى لعدم استخدام jQuery الذي تستضيفه Google هو أنه في بعض البلدان ، يتم حظر اسم نطاق Google.


تحديث:
تبين أن هذه الإجابة خاطئة. يرجى الاطلاع على التعليقات على الشرح الحقيقي.

لقد تمت الإجابة عن معظم الأسئلة ، ولكن بالنسبة للجزء الأخير:

ما هو خطر كلتا النسختين من خلال؟

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


if (typeof jQuery == 'undefined') {
// or if ( ! window.jQuery)
// or if ( ! 'jQuery' in window)
// or if ( ! window.hasOwnProperty('jQuery'))    

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = '/libs/jquery.js';

  var scriptHook = document.getElementsByTagName('script')[0];
  scriptHook.parentNode.insertBefore(script, scriptHook);

}

بعد محاولة تضمين نسخة Google من CDN.

في HTML5 ، لن تحتاج إلى تعيين سمة type .

تستطيع ايضا استخذام...

window.jQuery || document.write('<script src="/libs/jquery.js"><\/script>');

if (typeof jQuery == 'undefined')) { ...

أو

if(!window.jQuery){

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

    <script src="http://WRONGPATH.code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script><!--  WRONGPATH for test-->
  <script type="text/javascript">
  function loadCDN_or_local(){
    if(!window.jQuery){//jQuery not loaded, take a local copy of jQuery and then my scripts
      var scripts=['local_copy_jquery.js','my_javascripts.js'];
      for(var i=0;i<scripts.length;i++){
      scri=document.getElementsByTagName('head')[0].appendChild(document.createElement('script'));
      scri.type='text/javascript';
      scri.src=scripts[i];
    }
  }
  else{// jQuery loaded can load my scripts
    var s=document.getElementsByTagName('head')[0].appendChild(document.createElement('script'));
    s.type='text/javascript';
    s.src='my_javascripts.js';
  }
  }
  window.onload=function(){loadCDN_or_local();};
  </script>




google-ajax-libraries