javascript - موقعك - كيفية فضح وظيفة معاودة الاتصال لخرائط جوجل عند استخدام بروزريفي؟




مميزات قوقل ماب (3)

إذا كنت ترغب في تحميل البرنامج النصي ثم القيام بشيء ما عندما تم تحميل البرنامج النصي، يمكنك تعيين السمات غير async و onload عند حقن script . عن طريق التفاف كافة التعليمات البرمجية في إيف سوف نبقي خاصة جميع الكائنات المعرفة داخل إيف ، وتجنب ملء window مساحة الاسم العالمية. انظر المثال التالي:

// IIFE (Immediately-Invoked Function Expression)
// Keeps all private
!function() {
/**
 * Injects the script asynchronously.
 *
 * @param {String} url: the URL from where the script will be loaded
 * @param {Function} callback: function executed after the script is loaded
 */
function inject(url, callback) {
  var tag = 'script',
    script = document.createElement(tag),
    first = document.getElementsByTagName(tag)[0];
  script.defer = script.async = 1; // true
  script.type = 'text/javascript';
  script.src = url;
  script.onload = callback;
  first.parentNode.insertBefore(script, first);
}

/**
 * Injects and initializes the google maps api script.
 */
function injectMapsApi() {
  var key = 'your-api-key';
  var query = '?key=' + key;
  var url = 'https://maps.googleapis.com/maps/api/js' + query;
  inject(url, initMapsApi);
}

/**
 * Callback that initializes the google maps api script.
 */
function initMapsApi() {
  var maps = window.google.maps;
  // ... code initializations
  console.log(maps);
}

injectMapsApi();

}(); // end IIFE

تحتاج إلى تسجيل والمطالبة لك مفتاح أبي من أجل استخدام خرائط جوجل أبي. مزيد من المعلومات هنا:

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

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

من ناحية أخرى، هل من الجيد أن تستبعد فقط معلمة callback وأن تفعل شيئا من هذا القبيل بدلا من ذلك؟

$.getScript('https://maps.googleapis.com/maps/api/js').done(function() {
  initMap();
});

أي مساعدة سيكون موضع تقدير كبير. لقد قضيت المزيد من الوقت الذي كنت أعترف من أي وقت مضى في الحصول على هذا للعمل.

gulpfile.js:

gulp.task('browserify', ['eslint'], function() {
  return browserify('/src/js/main.js')
    .bundle()
    .pipe(source('main.js'))
    .pipe(buffer())
    .pipe(gulp.dest('/dist/js'))
    .pipe(reload({ stream: true }));
});

main.js:

require('jquery');
require('./map');

map.js:

var map = (function() {
  'use strict';

  var mapElement = $('#map');

  function googleMapsAPI() {
    $.getScript('https://maps.googleapis.com/maps/api/js?callback=initMap');
  }

  function initMap() {
    var theMap = new google.maps.Map(mapElement);
    // functions...
  }

  function init() {
    googleMapsAPI();
  }
});

map.init();

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

var functionName = getRandomName();
window[functionName] = function() {
    window[functionName] = undefined;
    // call to your initialization functions
};

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


لقد واجهت مشكلات في هذا النهج الذي اتخذته غوغل أيضا. أنا لا أحب ذلك كثيرا نفسي.

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

function initMap(){
  $(document).ready(function(){
    $(window).on('GoogleMapsLoaded', myObj.init());
    $(window).trigger('GoogleMapsLoaded');
  });
};

مع ذلك أنا فقط تشمل callback=initMap في عنوان ورل البرنامج النصي.

أوبديت: خيار آخر هو مجرد تضمين ردك كدالة داخل الكائن الخاص بك. مثال: يمكن أن يكون الكائن الخاص بك شيئا من هذا القبيل

var app = app || {};

(function($){

   $(function(){
      $.extend(app, {
        initMap:function(yourMainWrapDiv){
           //Do whatever you need to do after the map has loaded
        },
        mapLoadFunction(){
           //Map API has loaded, run the init for my whole object
           this.initMap($('#mainWrapper'))
        },
        mainInit: function(){
           ///do all your JS that can or needs  
           // to be done before the map API loads
           this.maybeSetSomeBindings();
        },
        maybeSetSomeBindings: function(){
             //do things
        }
      });
      //On document ready trigger your mainInit
      //To do other things while maps API loads
      app.mainInit()
   });
})(jQuery);

ثم يمكنك فقط استخدام رد على القفز داخل كائن عالمي واحد وتشغيل ما تحتاج إلى تشغيل فقط للتعامل مع الخريطة. يمكن أن يكون عنوان ورل ل أبي مع callback=app.initMap

وهذا يمكن أن يبقيه أكثر نظافة أيضا

أوبديت 2: هناك خيار آخر (أنا اختبرته بشكل طفيف) هو عدم استخدام معلمة callback في عنوان ورل ل غوغل أبي، وربطها بأي شيء آخر، ومكتبة الحكمة، كنت في حاجة. (الأماكن، والبحث، وما إلى ذلك). https://maps.googleapis.com/maps/api/js?key=YOUR-KEY-HERE&libraries=places على سبيل المثال.

ثم في كائن إينيت وظيفة مجرد تعيين جهاز توقيت مع لمعرفة ما إذا كان الكائن google هو متاح! ربما شيء من هذا القبيل:

var app = app || {};

(function($){

   $(function(){
      $.extend(app, {
        init:function(){
          var self = this;
          var timer = setInterval(function(){
              if ($('.ex').length){ //but really check for google object
              console.log('things exist google, elements, etc..');
                  self.next();
                  clearInterval(timer);
              }
          });
        },
        next:function(){
          console.log('google object exists')
        }
      });
      app.init()
   });
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='ex'>as an example for something to trigger a flag (true/false) to clear the interval</div>

في أي حالة حيث كنت في محاولة للوصول إلى الكائن العالمي، في هذه الحالة app ، callback=app.yourFunctionToCall الاتصال في ورل قمت بتعيين callback=app.yourFunctionToCall لا callback=app.funtionToCall() يجب أن يكون لديك علامة script أيضا الخواص async defer يعزى إليها لتعزيز مزيد من تحليل هتمل (جس التطبيق الخاص بك يجب أن يكون مباشرة بعد السيناريو الخرائط)







browserify