آشنایی با فریمورک های جاوا اسکریپت

سعید هابطیمهر ۲۸, ۱۳۹۹

0 1,108 خواندن این مطلب 8 دقیقه زمان میبرد

بهترین فریمورک های جاوا اسکریپت

جاوا اسکریپت محبوب‌ترین زبان برنامه نویسی جهان است. این زبان برنامه نویسی برای وب نویسی مورد استفاده قرار می‌گیرد. از مزایای آن این است که به راحتی می‌توان آن را آموخت. دلایل زیادی دارد که برنامه نویسان از جاوا اسکریپت استفاده می‌نمایند. تمام توسعه‌دهندگان وب باید تا حد زیادی با ۳ زبان برنامه نویسی آشنا باشند و بر آنها تسلط داشته باشند. در ادامه در مورد فریمورک های جاوا اسکریپت صحبت می‌کنیم.

بهترین فریمورک های جاوا اسکریپت

سوال‌های ابتدایی که در خصوص جاوا اسکریپت مطرح شده همگی در خصوص چگونگی دریافت جاوا اسکریپت و محتوای دریافت فضای برنامه نویسی آن و در نهایت کارکردها و مزایای این زبان برنامه نویسی است. برنامه جاوا اسکریپت به راحتی قابل دسترسی و رایگان است و یکی از زبانهای مهم برنامه نویسی به شمار می‌رود. در این متن به دنبال آن هستیم تا فریمورک های جاوا اسکریپت را با هم مرور نماییم. با ما همراه باشید.

فریم ورک angular.js

در ساده‌ترین تعریف می‌توان بیان نمود که angular.js ، HTML را با ویژگی‌های جدید گسترش داده است. این فریمورک یکی از فریمورک های جاوا اسکریپت است که با برچسب <script> به یک صفحه HTML متصل می‌شود. فریم ورک angular.js برای برنامه‌های تک صفحه (SPA) مناسب است.

این فریمورک با زبان برنامه نویسی جاوا اسکریپت نیز نوشته می‌شود. یادگیری این فریمورک بسیار راحت می‌باشد. فریم ورک انگولار شامل دستورالعمل‌ها، عبارات، فیلترها، ماژولها و کنترل کننده‌هاست. با یادگیری این موارد همه چیز در خصوص فریمورک angular آموخته شده است. زیرا این موارد پایه‌ای برای آموختن این فریم ورک است. سپس سایر موارد به راحتی یاد گرفته می‌شوند.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">

<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>

</div>

</body>
</html>

خروجی این برنامه است از فضایی که در آن نام فرم را دریافت می‌نماید و سپس به نام او سلام می‌کند. قبل از این که این فریم ورک را مطالعه کنید باید درک واقعی از زبانهای برنامه نویسی HTML، CSS و جاوا اسکریپت داشته باشید. لذا اهمیت دانستن جاوا اسکریپت از اینجا مشخص شده است.

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

ویدیو پییشنهادی: آموزش انگولار

اولین نسخه angular.js

اولین نسخه angular.js در سال ۲۰۱۲ منتشر شد. البته باید اشاره نمود که یکی از کارمندان گوگل در این خصوص از سال ۲۰۰۹ اقداماتی را انجام داده بود و ایده‌های خوبی ارائه کرد و در حال حاضر نیز گوگل این پروژه را پشتیبانی کرده است.

با استفاده از ng-directive، HTML گسترشیافته است. کاربردها در angular.js با ng-app تعریف میشوند. en-model مقدار کنترلهای HTML (ورودی، انتخاب و متن) را به داده‌های برنامه متصل می‌گرداند. در نهایت با استفاده از ng-bind داده‌های برنامه به نمای HTML متصل می‌شود.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">

<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>

</div>

</body>
</html>

عبارات توضیحی در angular.js در داخل دو آکولاد نوشته شده است: {{عبارات}}.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

با استفاده از برنامه زیر اسم و فامیل شخصی را دریافت نمایید و در انتها به صورت به متصل شده، اسم و فامیل شخص نمایش داده می‌شود.
در این میان فریم ورک مشابه دیگری نیز به چشم می‌خورد. فریمورک angular 2. این فریم ورک همان angular.js است که در بروزرسانی‌ها تغییر نام داد و پسوند انتهایی آن به فراموشی سپرده شد. در نتیجه تمام آنچه باید در این دو نام بیاموزیم همه مشترک و یکی است.

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

مقاله پییشنهادی: React js چیست و چه کاربردی دارد ؟

فریم ورک react.js

React یک کتابخانه جاوا اسکریپت است که برای ایجاد رابط های کاربری استفاده شده و به تولید برنامه‌های تک صفحه‌ای می‌انجامد. همچنین با استفاده از آن می‌توان مولفه‌های UI قابل استفاده مجدد را طراحی کرد. در زیر مثالی ارائه شده است که کدنویسی در فریمورک های جاوا اسکریپت و HTML را نشان می‌دهد. در کدنویسی HTML فریمورک react فراخوانی شده است.

کدنویسی فریمورک ری اکت جاوا اسکریپت

import React from 'react';
import ReactDOM from 'react-dom';

class Test extends React.Component {
render() {
return <h1>Hello World!</h1>;
}
}

ReactDOM.render(<Test />, document.getElementById('root'));

کدنویسی HTML :


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>

<div id="root"></div>

</body>
</html>

برای کار با فریمورک react باید محیط کدنویسی آن در رایانه شما فعال باشد. این موضوع می‌تواند از طریق create-react-app انجام شود که روش برای پشتیبانی برنامه react است. همچنین باید NPM و Node.js نیز نصب شده باشد که این موارد در مقاله مربوط به react توضیح داده شده است. با انجام اقدامات مرتبط و ورود به فضای کدنویسی، همه چیز آماده خواهد بود.

در اصل می‌توان گفت که react یک کتابخانه جاوا اسکریپت است که توسط فیس بوک ایجاد شده است و ابزاری برای ساخت UI می‌باشد. این فریم‌ورک یک دامنه مجازی در حافظه ایجاد می‌نماید. به این صورت می‌توان بدون دستکاری دامنه مرورگر به راحتی اقدامات خود را در دامنه مجازی پیش ببرید. این نرم افزار به صورت هوشمند فقط تغییرات را بارگذاری می‌کند.

نسخه‌های متعدد و به‌روزی از react وجود دارد اما نسخه ابتدایی آن در سال ۲۰۱۳ برای عموم منتشر شد. بسیار جالب است که فریمورک react.js اولین بار در سال ۲۰۱۱ برای ویژگی newsfeed در فیس بوک مورد استفاده قرار گرفت. جردن والک، مهندس نرم افزار فیس بوک این اقدام را انجام داد. اپلیکیشن ساز react نیز در سال ۲۰۱۸ با به‌روز‌رسانی‌ها منتشر گردید. در زیر مثالی از کدنویسی در فضای react را با هم مشاهده می‌نماییم:

کدنویسی در فضای react

<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>

<div id="mydiv"></div>

<script type="text/babel">
class Hello extends React.Component {
render() {
return <h1>Hello World!</h1>
}
}

ReactDOM.render(<Hello />, document.getElementById('mydiv'))
</script>

</body>
</html>

خروجی این برنامه در زیر مشاهده می‌شود:

Hello World!

مقاله پییشنهادی: معرفی بهترین ویرایشگرها برای react js

فریمورک ember.js و فریمورک backbone.js

برای این که با این فریمورک آشنا شویم باید بیان نمود که یک عبارت مشهور در زمینه جاوا اسکریپت وجود دارد و آن «full stack JavaScript» است. زبان برنامه نویسی جاوا اسکریپت بیش از ۲۰ سال است که وجود داشته و عموما در زمینه توسعه وب به کار رفته است. توانایی استفاده از آن در وب سرور نیز با استفاده از Node.js فراهم شده است.

فریمورک ember.js و فریمورک backbone.js

ایده full stack JavaScript این است که تمام نرم افزارهای یک برنامه وب چه سمت مشتری و چه سمت سرور فقط باید با استفاده از جاوا اسکریپت نوشته شود. نرم افزارهای سمت مشتری با استفاده از front end در وب بارگذاری شده که یکی از فریمورک‌های لازم برای تولید آن، فریم‌ورک embsr.js و فریم‌ورک backbone.js می‌باشند. این فریم‌ورک نیز یکی از فریمورک های جاوا اسکریپت است.

فریم ورک vue.js

این فریم ورک به شما این امکان را می‌دهد که با استفاده از ویژگی directive به توسعه HTML بپردازید. یعنی قابلیت کاربردی به برنامه‌های HTML داده می‌شود. این فریم ورک دستورالعمل‌های داخلی و تعریف شده توسط کاربر را فراهم می‌آورد. در فریم ورک vue.js از دو {{}} برای داده‌ها استفاده می‌شود. به منظور کدنویسی در این فریم ورک، صفات HTML با پیشوند V- نوشته می‌شوند. به مثالی در این رابطه دقت نمایید:

<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>

<div id="app">
<h1>{{ message }}</h1>
</div>

<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>

</body>
</html>

خروجی به صورت زیر نمایش داده می‌شود:

Hello Vue!

کاربرد فریمورک vue

یکی از کارکردهای فریم ورک vue تغییر در عنصر HTML است زمانی که یک شیء از vue به یک عنصر HTML متصل می‌شود. به مثال زیر توجه نمایید.

<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>

<h2>Vue.js</h2>

<div id="app">
{{ message }}
</div>

<p>
<button onclick="myFunction()">Click Me!</button>
</p>

<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})

function myFunction() {
myObject.message = "John Doe";
}
</script>

</body>
</html>

خروجی این برنامه زمانی که بر روی آیکون کلیک زده می‌شود، به John Doe تغییر می‌یابد.

فریم ورک vue.js

در مثال پایانی این بخش نیز در خصوص کدنویسی حلقه اشاره‌ای خواهد شد. با استفاده از دستور v-for برای اتصال آرایه‌ای از اشیاء vue به آرایه از عناصر HTML این امکان حاصل خواهد شد.

<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>

<h2>Vue.js</h2>

<div id="app">
<ul>
<li v-for="x in todos">
{{ x.text }}
</li>
</ul>
</div>

<script>
myObject = new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
}
})
</script>

</body>
</html>

فریم ورک polymer.js

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

منبع باز بودن آن جهت توسعه
کارآمد، رسا و قابل گسترش
استفاده مجدد از عناصر HTML برای ساخت برنامه ها با مولفه‌های امکان پذیر
ترکیب JS، CSS و HTML به عنوان عناصر سفارشی
اتصال داده و الگوسازی داده‌ها

فریم ورک meteor.js

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

فریم ورک meteor.js

با استفاده از فریمورک meteor.js می‌توان کدهای چند پلتفرمی ایجاد کرد. فریمورک meteor.js می‌تواند با هر فریم‌ورک دیگر در جاوا اسکریپت ادغام شده و جلوه جدیدی ایجاد می‌کند. meteor توسط meteor software توسعه یافته است. قابلیت‌های این فریمورک های جاوا اسکریپت به حدی بالاست که شاید بدون آنها کار در وب انجام نخواهد شد.

نکات پایانی در خصوص جاوا اسکریپت

نکاتی خاص که در جاوا اسکریپت مورد استفاده قرار می‌گیرد به یقین در فریمورک های جاوا اسکریپت نیز جاری خواهد شد. لذا نکات پایانی را در خصوص جاوا اسکریپت با هم مرور می‌نماییم.

برچسب<script>

در HTML کد JavaScript بین برچسب <script> و <script/> قرار می‌گیرد.

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

یک تابع در جاوا اسکریپت بلوکی از کدهای جاوا اسکریپت است که می تواند در صورت فراخوانی اجرا شود. به عنوان مثال هنگامی که یک رویداد رخ می‌دهد، می توان یک عملکرد را فراخوانی کرد. همچنین می شود هر تعداد اسکریپت را در یک سند HTML قرار داد.

بدنه جاوا اسکریپت در <body> قرار دارد. مثال زیر:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript in Body</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

جاوا اسکریپت اکسترنال

نوشتن کدها در اسکریپت‌های اکسترنال دارای مزایایی است. یکی از آنها عبارت است از آن که HTML و کد را از هم جدا می‌کند. خواند کدها را آسان‌تر می‌کند. بارگذاری صفحات را تسریع می‌کند و برای افزودن چندین فایل اسکریپت به یک صفحه، از چندین برچسب اسکریپت استفاده می‌کند.

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

سعید هابطیمهر ۲۸, ۱۳۹۹

0 1,108 خواندن این مطلب 8 دقیقه زمان میبرد