نحوه تبدیل جی کوئری یا پلاگین جاوا اسکریپت به دستورالعمل Angular
1397/07/08 16:54 , بهزاد ناظمی

نحوه تبدیل جی کوئری یا پلاگین جاوا اسکریپت به دستورالعمل Angular

پلاگین جی کوئری چیست؟

وقتی یک نمونه اولیه شیء جی کوئری باید گسترش یابد، ما یک پلاگین جی کوئری ایجاد می کنیم که متشکل از روش هایی است که یک شی جی کوئری می تواند به ارث ببرد.

 پلاگین جی کوئری می تواند با توجه به الزامات، ایجاد شده یا سفارشی شود، گرچه هنوز تعداد زیادی افزونه وجود دارد که برای استفاده آنلاین در دسترس هستند.

 از این رو، پلاگین جی کوئری را می توان به عنوان مجموعه ای از عناصر که روش ها / توابع نامیده می شود، در نظر گرفته شود. وقتی یک شی جی کوئری نامیده می شود، تمام روش های نمونه اولیه و همچنین روش های ارثی افزونه شده با هم نامیده می شوند.

 

دستورالعمل AngularJS چیست؟

 چندین عنصر در AngularJS تعریف شده است، هر چند ممکن است زمانیکه نیاز به گسترش HTML متناظر وجود داشته باشد، بوجود بیاید.

 دستورالعمل های سفارشی را از طریق یک تابع directive فعال می کنند که در عوض عنصر برای آن تعریف شده است. این اتفاق د تنها پس از اتصال (تابع لینک () از عنصر( و عملکرد دستورالعمل آن پس از تدوین (کامپایل () تابع) فرآیند می افتد. دستورالعمل های سفارشی در AngularJS می تواند برای عناصر زیر ایجاد شود:

  1. Element - هنگامی که عنصر تطبیق یافته پیدا می شود، دستورالعمل کار شروع می شود (محدود کردن E )
  2. - Attributeهنگامی که یک ویژگی تطبیق یافته پیدا می شود، دستور کار شروع می شود (محدود کردن A)
  3. CSS - هنگامی که یک سبک CSS تطابق یافته پیدا می شود، دستور کار شروع می شود (محدود کردن C)
  4. - Comment هنگامی که یک نظر تطابق یافته پیدا می شود ، دستور کار خود را آغاز می کند (محدود کردن (M

چندین مزیت برای یک دستورالعمل سفارشی وجود دارد. دستورالعمل ها به ایجاد کد تکرار شده که دارای قابلیت کار مستقل باشند کمک می کند.

بدون توجه به هر کدام از الزامات، تمام توابع و ویژگی های مرتبط با آن، با یکدیگر ادغام می شوند. به این ترتیب می توان دستورالعمل های متعددی را با یک دامنه و عملکرد متفاوت، که در صورت نیاز مورد تهیه قرار می گیرد را فراخوانی کرد.

 مقداردهی اولیه پلاگین معمولی جی کوئری

به طور مستقل، استفاده از یک پلاگین جی کوئری بسیار آسان است. هنگامی که شما در مورد مقداردهی اولیه آن فکر می کنید، فقط برای رویداد اولیه ی به فایل document.ready بروید.

<div  id="ng-slider"></div>  
<p>The slider's value is: <span  id="slider-value">0</span></p>  
$(document).ready(function() {  
// Initialize the slider  
$('#slider').slider({  
change: function(event, ui) {  
$('#slider-value').html(ui.value);  
}  
});  
});  

document.ready زمانی رخ می دهد که Model Object Document (DOM) بارگذاری شده باشد. این رویداد بعد از اینکه سند آماده اجراء است، اتفاق می افتد. این به این معنی است که تمام توابع و رویدادهای زیر را می توان در داخل این رویداد قرار داد تا شروع اجرا شود.

 

کد بالا در داخل رویداد آماده، یک تابع را فعال می کند که یک شیء اسلایدر را برای تغییر مقدار آن  زمانی که یک رویداد نوار بار آن رخ می دهد، فعال می کند. این بدان معنی است که وقتی نوار در اسلایدر حرکت می کند، مقدار مربوط به اسلایدر به این ترتیب تغییر می کند. بنابراین، تابع پلاگین جی کوئری در اینجا در مورد شیء متحرک با مقدار کشویی آن بر روی رویداد دیگری عمل می کند.

 

چگونه یک دستورالعمل سفارشی ایجاد کنیم؟

 هر پلاگین جی کوئری نیاز به یک دستورالعمل برای اطمینان از اینکه کد قابل استفاده تر از آنچه می توان برای ایجاد یک دستورالعمل سفارشی استفاده کرد باشد.

directive('directiveName', function() {  
return {  
restrict: 'A',  
link: function(scope, element, attrs) {  
$(element).pluginInitFunction(params);  
}  
};  
});  

این دستورالعمل به دنبال یک تطابق شاخصه (A) است. اگر چه، محدود کردن می تواند هر یک از 4 مقدار E، A، C یا M را بگیرد، همچنین می تواند ترکیب هایی مانند CA، EC، CM، و غیره را تشکیل دهد.

 به دنبال این، اگر اشیاء زیادی در دامنه وجود داشته باشد، تابع پیوند هر یک از عناصر با دامنه را بر اساس ویژگی های مرتبط مطابقت می دهد. علاوه بر این، هر شیء / عنصر فردی به یک پارامتر خاص مقدار دهی می شود.

 

پلاگین جی کوئری را با دستورالعمل سفارشی ترکیب کنید

 پس از ایجاد یک پلاگین جی کوئری و یک دستورالعمل سفارشی، در حال حاضر لازم است که این دو را ادغام کنیم. این را می توان با قرار دادن کد اولیه افزونه در داخل تابع link ()  دستورالعمل انجام داد.

 در کد ایجاد شده در دستورالعمل بالا، هنگامی که محدودیت اعمال می شود، یک قالب خاص بر روی کنسول ساخته می شود، که مقادیر افزونه جی کوئری را به این directive اضافه می کند. یک محدوده خاص براساس مقادیر به دست آمده سفارشی شده است. این به دنبال روند تلفیقی است که تمام داده های پلاگین جی کوئری را با داده های دستورالعمل سفارشی کامپایل می کند. پس از اتمام اتصال، تمام دستورالعمل درون HTML برای تکمیل دستور زبان قرار می گیرد.

 در نهایت، اتصال این دو با HTML و CSS، یک محیط کارآمد برای پلاگین جی کوئری با کمک دستورالعمل سفارشی AngularJS ایجاد می کند. در زیر نمونه ای ساده آمده است:

varapp = angular.module('myapp', []);  
controller('myController', ['$scope', function($scope) {  
$scope.sliderValue = 30;  
}]);  
directive('mySlider', function() {  
return {  
restrict: 'A',  
scope: {  
'model': '='  
},  
link: function(scope, elem, attrs) {  
$(elem).slider({  
value: +scope.model,  
slide: function(event, ui) {  
$apply(function() {  
model = ui.value;  
});  
}  
});  
}  
};  
});  

 

AngularJS در حال حاضر بسیار محبوب است. اما چیزی در آن وجود دارد که می تواند با استفاده از پلاگین های jQuery ساخته شود. اما با داشتن دو زبان مختلف، ارتباط آنها بسیار دشوار است. با استفاده از دستورالعمل AngularJS، پلاگین های jQuery را می توان به طور کامل در کد مورد استفاده قرار گیرد تا مطمئن شویم موتور اجرایی (کد دستورالعمل) قطعا قابل استفاده مجدد در آینده و نیز قابل تکرار باشد.

 دستورالعمل ها آماده و در دسترس هستند، اما همچنین می توانند طبق نیاز شما سفارشی سازی شوند. این نوع استفاده است که ماهیت دستورات را تعریف می کند.

       برگرفته از : https://www.c-sharpcorner.com

جالب است بخوانید

فعال کردن احراز هویت ویندوز در وب API و Angular

دریافت اطلاعات آب و هوا از یک API با استفاده از MVC و Angular

CoffeeScript همان JavaScript است،اما بدون سردرد!

Shell Scripting چیست و چرا باید از آن استفاده کرد؟

 

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات