افشای کامل: من DOMmy.js را توسعه دادم. و در این آموزش می خواهم نشان دهم که چگونه می توان از آن برای زیبا و سبک نگه داشتن صفحات وب خود استفاده کرد.

DOMmy.js منحنی یادگیری بسیار کم عمقی دارد. اگر تا به حال از یک فریمورک سبک نسل قدیمی مانند jQuery یا Prototype استفاده کرده باشید، حتی سطحی تر است.

DOMmy.js یک چارچوب نسل بعدی مانند Vue.js، React یا Angular نیست. اینها ابزارهایی هستند که از فناوری های جدیدی مانند DOM مجازی، قالب بندی پویا و اتصال داده استفاده می کنند. شما از ابزارهای نسل بعدی برای ساخت برنامه های ناهمزمان استفاده می کنید.

DOMmy.js یک چارچوب جاوا اسکریپت برای نوشتن کد جاوا اسکریپت “کلاسیک” است که با DOM در سطح هسته کار می کند. یک چارچوب جاوا اسکریپت مانند jQuery کار مشابهی را با سه تفاوت بزرگ انجام می دهد:

• جی کوئری از یک موتور داخلی اختصاصی برای کار با انتخابگرها و تولید انیمیشن استفاده می کند. این موتور کاملاً مبتنی بر جاوا اسکریپت است. برعکس، DOMmy.js به شما این امکان را می دهد تا با استفاده از ویژگی های مدرن و فوق العاده قدرتمند جاوا اسکریپت و CSS3، هر عنصری را در DOM انتخاب کنید و انیمیشن های قدرتمندی ایجاد کنید. برای کار با DOM و انیمیشن ها نیازی به نوشتن موتور جاوا اسکریپت نداشتم. ابزارهای متقابل مرورگر، منعطف و قدرتمندی که به شما امکان انجام این کار را می‌دهند، از قبل در دسترس هستند. من فقط یک ساختار جاوا اسکریپت می خواستم که به توسعه دهندگان در نوشتن کنترل های DOM و انیمیشن های CSS3 با استفاده از زبان جاوا اسکریپت کمک کند.
• DOMmy.js یک ساختار جاوا اسکریپت است که به آینده می نگرد. این نوشته شده است که با برخی از آخرین نسخه های مرورگرهای اصلی سازگار باشد، اما من نمی خواهم کد من با نرم افزارهای بسیار قدیمی مانند IE6/7 و موارد مشابه سازگار باشد.
• jQuery و Prototype هر دو دارای APIهای کاملی هستند روی یک موتور داخلی، DOMmy.js کنترل‌هایی را فقط برای دو چیز اصلی فراهم می‌کند: عملیات DOM و انیمیشن‌ها. سایر وظایف را می توان به راحتی با جاوا اسکریپت وانیلی یا با گسترش ساختار مرکزی DOMmy.js انجام داد.

بنابراین، DOMmy.js یک کتابخانه متقابل مرورگر، بسیار سبک وزن (وزن نسخه کوچک شده تنها 4 کیلوبایت)، یادگیری فوق العاده آسان، اجرای فوق العاده سریع، کتابخانه جاوا اسکریپت است. به طور خلاصه، با DOMmy.js می توانید:

• با انتخاب و کار با عناصر HTML و مجموعه ای از عناصر، در سراسر DOM حرکت کنید.
• ایجاد انیمیشن های قدرتمند CSS3 و مجموعه ای از انیمیشن ها.
• اضافه کردن (چندین) رویدادها، ویژگی های CSS و ویژگی ها به عناصر.
• استفاده از ذخیره سازی عنصر برای ذخیره و بازیابی محتوای خاص؛
• با یک منسجم کار کنید این ساختار؛
• دارای یک مرورگر متقابل DOMReady مد، که برای کار با DOM نیازی نیست منتظر بمانید تا منابع (مانند تصاویر و ویدیوها) به طور کامل بارگذاری شوند.

در حال نصب DOMmy.js

پیاده سازی DOMmy.js در وب شما page ساده است. شما فقط باید اسکریپت را از طریق وارد کنید اسکریپت تگ کنید، و برای شروع آماده خواهید بود. تو می توانی اسکریپت را دانلود کنید و از آن به صورت محلی استفاده کنید یا از طریق وب سایت پروژه بارگیری کنید:

<script src="https://www.riccardodegni.com/projects/dommy/dommy-min.js"></script>
<script>
 // use dommy.js
 $$$(function() {
 // ...
 });
</script>

DOM آماده است!

همانطور که گفتم روی قبل از این، با DOMmy.js نیازی نیست منتظر منابع آن باشیم page برای کار با DOM بارگیری کنید. برای این کار از $$$ تابع. محتوای قرار داده شده در داخل این تابع مفید زمانی اجرا می شود که ساختار DOM (و نه “page”) آماده است. نوشتن کد با DOMmy.js بسیار سریع است. من می‌خواستم قطعه‌ای ایجاد کنم که به من امکان می‌دهد تا حد امکان کد کمتری بنویسم، بنابراین حدس می‌زنم هیچ چیز سریع‌تر از نوشتن نیست:

$$$(function() {
 // when DOM is ready do this
});

… به صورت مستقل. البته می توانید به همان تعداد استفاده کنید DOMReady بلوک هایی که می خواهید یا نیاز دارید:

// block 1 
$$$(function() {
 // when DOM is ready do this
});

// block 2
$$$(function() {
 // when DOM is ready do this
});

// block 3
$$$(function() {
 // when DOM is ready do this
});

عناصر DOM را انتخاب کنید

بنابراین اکنون می توانیم با ساختار DOM خود کار کنیم. شما می توانید عنصر مورد نظر خود را با استفاده از “id” HTML انتخاب کنید. این کار با $ تابع:

// select an element by ID. 
// In this case you select the element with ID "myElement"
$('myElement');

و می توانید مجموعه/لیست عناصر مورد نظر خود را با استفاده از انتخابگر CSS انتخاب کنید. این کار با $$ تابع:

// select a collection of elements by CSS selector
$$('#myid div.myclass p')

البته می توانید چندین عنصر را با استفاده از چندین انتخابگر نیز انتخاب کنید:

// a selection of HTML elements
$$('#myfirstelement, #mysecondelement')

// another selection of HTML elements
$$('#myfirstelement div.myclass a, #mysecondelement span')

هیچ محدودیتی برای انتخاب DOM وجود ندارد. عناصر در مجموعه نهایی قرار خواهند گرفت که می توانید با متدهای DOMmy.js کار کنید.

افزودن رویدادها

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

// add an event to an element that fires when you click the element
$('myElement').روی('click', function() {
 log('Hey! You clicked روی me!');
});

توجه: تابع ورود به سیستم یک تابع داخلی است که به عنوان یک میانبر بین مرورگر جهانی کار می کند consoleورود اگر مرورگر از console نتیجه در یک جعبه هشدار جهانی چاپ خواهد شد.

البته می توانید چندین رویداد را همزمان اضافه کنید:

// add a events to an element
$$('#myElement p').روی({
 // CLICK event
 'click': function() {
 log('Hey, you clicked here!');
 },
 
 // MOUSEOUT event
 'mouseout': function() {
 log('Hey you mouseovered here!');
 }
});

همانطور که می بینید، نیازی به اعمال متدهای DOMmy.js برای هر عنصر ندارید. شما روش ها را مستقیماً روی نتیجه انتخاب DOM اعمال می کنید و موتور داخلی به درستی از طریق عناصر HTML تکرار می شود.

شما می توانید با استفاده از عبارت “current” در iteration simpy به عنصر “current” دسترسی پیدا کنید این کلمه کلیدی:

 $('demo').روی({
 'click': function() {
 this.css({'width': '300px'})
 .html('Done!');
 } 
 });

کار با ویژگی ها

به همین ترتیب، می توانید مقادیر ویژگی های HTML را اضافه، ویرایش و بازیابی کنید:

// get an attribute
var title = $('myElement').attr('title');

// set an attribute
$('myElement').attr('title', 'my title');

// set multiple attributes
$('myElement').attr({'title': 'my title', 'alt': 'alternate text'});

را attr روش به سه روش مختلف کار می کند:

• اگر آرگومان ارائه شده یک رشته باشد، مقدار مشخصه مشخص شده را برمی گرداند.
• اگر دو آرگومان ارسال کنید، یک ویژگی HTML را به یک مقدار جدید تنظیم می کند.
• اگر یک شی از جفت های کلید/مقدار را که نشان دهنده ویژگی های عنصر است، ارسال کنید، مجموعه ای از ویژگی های HTML را تنظیم می کند.

تنظیم سبک های CSS

درست مانند ویژگی های HTML، می توانید مقادیر CSS را با استفاده از آن تنظیم و دریافت کنید css روش:

// set single CSS
$('myElement').css('display', 'block');

// set multiple CSS
$('myElement').css({'display': 'block', 'color': 'white'});

// get single CSS
$('myElement').css('display');

// get multiple CSS
$('myElement').css(('display', 'color'));

همانطور که می بینید، با قدرتمندان css روش شما می توانید:

• اگر دو رشته را ارسال کنید، یک ویژگی CSS را به یک مقدار جدید تنظیم کنید.
• اگر یک رشته را ارسال کنید، مقدار یک ویژگی CSS را دریافت کنید.
• اگر یک شی از جفت کلید/مقدار را ارسال کنید، چندین ویژگی CSS را تنظیم کنید.
• اگر آرایه‌ای از رشته‌ها را ارسال کنید که ویژگی‌های CSS را نشان می‌دهند، آرایه‌ای از مقادیر را دریافت کنید.

دریافت و تنظیم محتوای HTML

با html روشی که می توانید مقدار HTML عنصر را تنظیم و دریافت کنید:

// set html
$('myElement').html('new content');

// get html
var content = $('myElement').html();

// logs 'new content'
log ( content );
 

تکرار

اگر بیش از یک عنصر را انتخاب کنید، می توانید یک متد DOMmy.js را برای هر عنصر فقط در یک فراخوانی اعمال کنید.

با این حال، زمانی که می خواهید با هر عنصر به صورت دستی کار کنید، مانند زمانی که در حال دریافت محتوا هستید (مثلاً محتوای HTML یا محتوای ذخیره شده). در این صورت می توانید از دستی استفاده کنید برای هر به روش زیر عمل کنید:

// get all divs
var myels = $$('div');

// set a stored content
myels.set('val', 10); 

// ITERATE through each single div and print its attributes
myels.forEach(function(el, i) {
 log(el.attr('id') + el.get('val') + ' n');
});

را برای هر funtion روش ترجیحی برای تکرار از طریق مجموعه های HTML از عناصر با استفاده از DOMmy.js است. هنگامی که اعمال می شود روی یک عنصر DOMmy.js، از دو پارامتر استفاده می کند:

• عنصر: عنصر DOMmy.js که انتخاب می کنید. می توانید هر متد DOMmy.js را روی آن اعمال کنید.
• index: شاخصی که موقعیت عنصر را در مجموعه عناصر نشان می دهد.

ذخیره سازی

ذخیره سازی مکانی است که متعلق به عناصر است که می توانید هر تعداد که می خواهید در آن ذخیره کنید و در لحظه دلخواه آنها را بازیابی کنید. شما می توانید با استفاده از ذخیره سازی کار کنید تنظیم و گرفتن مواد و روش ها:

// set storage
var myVal = "hello";
$('myElement').set('myVal', myVal);

// multiple storage
var mySecondVal = "everybody";
$('myElement').set({'myVal': myVal, 'mySecondVal': mySecondVal});

// get 
$('myElement').get('myVal') + $('myel').get('mySecondVal'); 
// "hello everybody"

همانطور که می بینید، می توانید یک مورد یا چند مورد را به طور همزمان ذخیره کنید. مواردی که ذخیره می کنید متعلق به عنصری است که انتخاب می کنید.

توجه: به یاد داشته باشید که اگر چندین عنصر را انتخاب می کنید، مورد در هر یک از این عناصر ذخیره می شود، حتی اگر CSS کمی متفاوت باشد، زیرا DOMmy.js هر عنصر خاص را می شناسد:

// set an item to div#a and div#b
$$('div#a, div#b').set('myStoredValue', 10);

// get from #a, that of course is the same as div#a
$('a').get('myStoredValue'); // 10

البته مکانیک داخلی DOMmy.js “div#a” و “a” / “#a” را به عنوان یک اشاره گر به یک عنصر شناسایی می کند، بنابراین می توانید با خیال راحت با روش های ذخیره سازی و سایر روش های DOMmy.js به روشی منسجم کار کنید.

اگر عنصر DOM را در یک متغیر ذخیره کنید، که بهترین راه برای کار با عناصر HTML است، می توانید تماس های همزمان را دور زده و فضای حافظه را به دست آورید:

const myEl = $("div#a div");

// store data
myEl.set('myStoredValue', 10);

// get data
myEl.get('myStoredValue'); // 10

انیمیشن های CSS3

جواهر تاج DOMmy.js موتور انیمیشن آن است. این مبتنی است روی موتور انیمیشن CSS3، بنابراین با تمام مرورگرهای اصلی کار می کند. انیمیشن ها از طریق ایجاد می شوند fx متد، که آرگومان های زیر را می پذیرد:

• یک شی که نشان دهنده ویژگی CSS برای متحرک سازی است.
• عددی که مدت زمان انیمیشن را بر حسب ثانیه نشان می دهد. مقدار پیش فرض 5 ثانیه است.
• یک تابع، نشان دهنده یک فراخوانی است که پس از انجام انیمیشن فراخوانی می شود.
• یک بولی، که نشان می‌دهد که انیمیشن‌های همزمان زنجیره‌ای شوند یا نه. پیش فرض نادرست است.

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

// simple animation
$('myel').fx({'width': '300px', 'height': '300px'}, 2);

در اینجا ما به سادگی عرض و ارتفاع ویژگی های CSS را تغییر می دهیم #میل در 2 ثانیه در مثال زیر ما همان انیمیشن را با مدت زمان 1 ثانیه و با یک تابع callback ایجاد می کنیم که محتوای HTML عنصر را با “کامل شده!” ویرایش می کند. رشته

با استفاده از عبارت می توانید به عنصر فعلی دسترسی پیدا کنید این کلمه کلیدی:

// simple animation with callback
$('myel').fx({'width': '300px', 'height': '300px'}, 1, function() {
 this.html('Completed!');
});

زنجیر زدن

شما می توانید با “زنجیره سازی انیمیشن” جادو ایجاد کنید: با استفاده از درست است، واقعی به عنوان مقدار پارامتر چهارم، می توانید هر تعداد انیمیشن را که می خواهید زنجیره بزنید. برای این کار ساده از روش fx بیش از یک بار استفاده کنید روی یک انتخابگر خاص در مثال زیر عرض همه عناصر HTML را که با انتخابگر “.myel” مطابقت دارند تغییر می دهیم روی چندین بار:

var callBack = function() {
 // do something cool
};

// queue animations
$$('.myel').fx({'width': '400px'}, 2, callBack, true);
 .fx({'width': '100px'}, 4, callBack, true);
 .fx({'width': '50px'}, 6, callBack, true);
 .fx({'width': '600px'}, 8, callBack, true);

البته شما می توانید همه چیز را به زنجیر بکشید. ساختار DOMmy.js به شما اجازه می دهد تا تماس های همزمان را با عناصر تنظیم کنید:

// multiple calls
$$('div#e, #d')
 .fx({'font-size': '40px', 'color': 'yellow'}, 1)
 .fx({'font-size': '10px', 'color': 'red'}, 1)
 .attr('title', 'thediv')
 .attr('class', 'thediv')
 .attr({'lang': 'en', 'dir': 'ltr'});

به یاد داشته باشید که تماس های زنجیره ای بلافاصله اجرا می شوند. اگر می‌خواهید چیزی را در انتهای یک انیمیشن خاص زنجیره‌ای کنید، باید یک callback برای آن انیمیشن تنظیم کنید.

یک رویداد Handler که انیمیشن ها را فعال می کند ایجاد کنید

اکنون، می‌خواهیم قطعه‌ای را تنظیم کنیم که یک انیمیشن تولید می‌کند روی یک عنصر خاص این انیمیشن زمانی که کاربر ماوس را روی خود عنصر حرکت می‌دهد و هنگامی که ماوس را به عقب برمی‌گرداند فعال می‌شود. در پایان هر مرحله، یک محتوای HTML مناسب تنظیم می شود:

$('myElement').روی({
 'mouseover': function() {
 this.fx({'width': '300px'}, 1, function() {
 this.html('Completed!');
 });
 },
 'mouseout': function() {
 this.fx({'width': '100px'}, 1, function() {
 this.html('Back again!');
 });
 } 
});

همانطور که می بینید، با DOMmy.js کار با انیمیشن های CSS3 بسیار آسان است. همیشه این را به خاطر بسپار این به عنصر فعلی اشاره دارد.

اکنون، می‌خواهیم یک انیمیشن زنجیره‌ای تولید کنیم که سبک CSS یک عنصر را در چهار مرحله مختلف، با استفاده از چهار callback مختلف تغییر می‌دهد و زمانی که کاربر روی عنصر کلیک می‌کند، این انیمیشن را فعال می‌کند:

 var clicked = false;
 
 $('myElement').روی({
 'click': function() {
 if( !clicked ) {
 clicked = true;
 this.fx({'width': '300px', 'height': '300px', 'background-color': 'red', 'border-width': '10px'}, 1, function() {
 this.html('1');
 }, true)
 .fx({'height': '50px', 'background-color': 'yellow', 'border-width': '4px'}, 1, function() {
 this.html('2');
 }, true)
 .fx({'width': '100px', 'background-color': 'blue', 'border-width': '10px'}, 1, function() {
 this.html('3');
 }, true)
 .fx({'height': '100px', 'background-color': '#3dac5f', 'border-width': '2px'}, 1, function() {
 this.html('4');
 clicked = false;
 }, true); 
 }
 } 
 });

می‌توانید این قطعه‌ها را مستقیماً در عمل مشاهده کنید بخش نمایشی پروژه DOMmy.js