انتقال داده ها از پی اچ پی به جاوا اسکریپت

سلام دوستان وردپرسی؛
امروز میخوایم انتقال داده ها رو از زبان پی اچ پی به جاوا اسکریپت برای شما توضیح بدم! پس با من همراه بشید…

بهترین روش برای استایل دادن به داده ها ، قرار دادن اطلاعات رشته های ایستا در فایل های پی اچ پی است. اگر شما به یک سری اطلاعات در جاوا اسکریپت نیاز دارید، بسیار خوب است که اطلاعات خودتون رو به صورت ویژگی های موجود در *-data در اچ تی ام ال امتحان کنید.اما در سناریوهای خاص هیچ انتخابی ندارید! راه عبور از رشته ها مستقیماً به سمت کدهای جاوا اسکریپت بستگی دارد.
اگه یه کتابخانه ی جاوا اسکریپت ایجاد کردید و به آن داخل header.php  مقدار اختصاص دادید آن بخش به شما اختصاص داده می شود.

در اینجا این سوال مطرح میشه که اصلاً برای چی نیاز به چنین انتقالی داریم؟
به عنوان نمونه من برای نشان دادن موارد زیر به این موضوع احتیاج دارم  :
صفحه ی نخست ،مدیریت،افزونه،پوسته،آدرس های ایجکس
رشته های قابل ترجمه
پوسته یا تنظیمات وردپرس

راه رایج و معمول برای انتقال داده ها :
نحوه ی صدا زدن کدهای جی کوئری به صورت myLibrary.js می باشد که داخل سایت وردپرسی به صورت زیر قرار می گیرد :

<br />var myLibraryObject; (function($) { "use strict"; myLibraryObject = { home: '', // populate this later pleaseWaitLabel: '', // populate use this later someFunction: function() { // code which uses the properties above } } });<br />

پس از وارد کردن موارد بالا کد زیر را در فایل function.php طبق نمونه وارد نمایید :

<br />wp_enqueue_script( 'my_js_library', get_template_directory_uri() . '/js/myLibrary.js' );<br />

در اینجا این سوال مطرح میشه که چطور میشه مجموعه ی home و pleaseWaitLabel را اضافه نماییم، در اینصورت اطلاعاتی که مورد نیاز شما هست به صورت زیر می باشد :

<script>
(function( $ ) {
  "use strict";

  $(function() {

    myLibraryObject.home = '<?php echo get_stylesheet_directory_uri() ?>';
    myLibraryObject.pleaseWaitLabel = '<?php _e( 'Please wait...', 'default' ) ?>';

  });
}(jQuery));
</script>

این عملیات در نظر گرفته شده، هرچند وردپرس راه سریعتر و راحتری رو برای ا فراهم میکنه !

راه وردپرسی!

راهی که برای انتقال داده به جاوا اسکریپت پیشنهاد می شود استفاده از عملگر wp_localize_script می باشد .این عملگر به منظور استفاده در wp_enqueue_scripts قرار داده می شود.

wp_localize_script( $handle, $objectName, $arrayOfValues );

پارامترهایی که در کدهای بالا می بینید بسیار مهم و کاربردی هستند که در این قسمت توضیح مختصری درباره ی اونها داده میشه:

handle$ دسته ای از اسکریپت ها برای اتصال به مقادیر دارهی ارزش خاص استفاده می شود.
objectName$ اشتیا موجود در جاوا اسکریپت با آرایه ای به نام arrayOfValues $ شناسایی می شود.
arrayOfValues$ آرایه ای انجمنی که شامل نام و مقدار منتقل شده به اسکریپت می باشد.
بعد از فراخوانی این عملکرد، متغیر objectName$ در طول عملکرد اسکریپت های خاص وجود دارد و شرکت می کند.

پیاده سازی wp_localize_script :
حال بیاید با هم تنظیماتی رو برای استفاده از روش جدید انتقال اطلاعات انجام بدیم!

در مرحله ی اول؛ اسکریپت رو مرتب می کنیم و سپس شروع به فراخوانی wp_localize_script در فایل functions.php می کنیم :

 

wp_enqueue_script( 'my_js_library', get_template_directory_uri() . '/js/myLibrary.js' );

$dataToBePassed = array(
    'home'            => get_stylesheet_directory_uri(),
    'pleaseWaitLabel' => __( 'Please wait...', 'default' )
);
wp_localize_script( 'my_js_library', 'php_vars', $datatoBePassed );

حال صفحه ی اصلی و ارزش های pleaseWaitLabel می تونن به کتابخانه ی جی کوئری به وسیله ی متغیر php_vars دسترسی داشته باشند.
زمانیکه ما از wp_localize_script استفاده می کنیم، هیچ چیز دیگری در header.php قابل اجرا شدن نیست و ما با خیال راحت می تونیم محتویات برچسب <script> رو حذف کنیم.
در واقع می تونیم تنظیمات اضافی رو از اسکریپت جی کوئری حذف کنیم. این مورد به صورت بسیار ساده کد نویسی شده است :

var myLibraryObject;

(function($) {
    "use strict";

    myLibraryObject = {
        someFunction: function() {
            // code which uses php_vars.home and php_vars.pleaseWaitLabel
        }
    }
}(jQuery));