مقالات طراحي سايت

DOM: موقعيتي براي حالت (State)
مفاهيم اساسي اكثري از كادر‌ورك‌هاي امروزي در جداسازي " state" از " DOM" جاي دارد. بدين ترتيب DOM تنها مانند كلاينتي اخلاق مي‌نمايد طراحي سايت در مشهد كه داده‌هاي آن در درحال حاضر اكران مي‌باشند.
Stimulus اين اخلاق را تغيير‌و تحول اعطا كرد و در قبال از DOM براي نگه داشتن state بهره مند شد.
در غايت اين بدان معناست كه Stimulus براي نرم افزار‌هايي كه HTML را به فعاليت ميگيرند مطلوب‌خيس ميباشد (به عنوان مثال يكپارچگي با JSON API).
با Stimulus، شما پوسته HTML را نمي بينيد.  راياپارس در قبال خصوصيت *-data را ميبينيد كه HTML را به نرم‌افزار جاوااسكريپت متصل مي‌نمايد.
همينطور بدان معناست كه مواقعي مثل each يا اين كه رينگ‌هاي map را كه ممكن ميباشد در Handlebars يا اين كه React مشاهده كنيد را ديگر مشاهده نمي كنيد.
Stimulus شغل رندرينگ HTML را اجرا نمي‌دهد ahrefs مگر اينكه خودتان به صراحت اين امكان را ا ساخت فرماييد.
پس... چه كاري اعمال مي دهد؟
Stimulus پوسته‌ها را رندر نمي‌نمايد. در ازاي، براي اتصال اقدامات و رويدادهاي front end نرم‌افزار براي در اختيار گرفتن روي back end تاسيس شده است.
Stimulus از اين سه معني براي جاري ساختن اين عمل استعمال مي‌نمايد: targetها، controllerها و actionها.
البته پيش از اينكه از اين مفاهيم به دور شويم، بياييد Stimulus را در كامپيوتر خويش ايفا كنيم.
فعال‌سازي
فرض مي كنيم كه واپسين ورژن NodeJS را روي كامپيوتر خويش نصب داريد. در‌صورتي‌كه از گذشته اين شغل را اعمال نداده‌ايد، به nodejs.org رجوع‌كنيد.
ما از يك فولدر index.html استاتيك اساس استعمال مي كنيم كه در بالا به طور امر پايين خواهد بود:










نكته: ما در واقع هيچ يك از استايل‌ها يا اين كه فرايند ايجاد كرد CSS را در‌اين فراگيري پوشش نمي‌دهيم.
آنگاه يك پوشه به اسم src ساخت نمائيد. درون src پوشه ديگري به اسم controllers توليد كرده و يك پوشه index.js بسازيد.
ما براي ايجاد كرد نرم افزار جاوااسكريپت از Webpack استعمال ميكنيم، چون Stimulus از برخي خصوصيت‌هاي توسعه يافته جاوا اسكريپت استعمال مي‌نمايد كه به صورت بدون واسطه در مرورگرها شغل نمي‌نمايد.
فايلي را در روت (ريشه) پروژه خويش به اسم package.json توليد نمائيد كه مشتمل بر محتواي تحت ميباشد:
{"name": "wdstimulus","version": "1.0.0","description": "Stimulus Introduction","scripts": {},"author": "Your Name","license": "ISC","devDependencies": {"@babel/core": "^7.0.0-beta.39","@babel/preset-env": "^7.0.0-beta.39","babel-loader": "^8.0.0-beta.0","babel-preset-stage-0": "^6.24.1","stimulus": "^1.0.0","webpack": "^3.10.0"}}نكته: اين ورژن‌ها در آجل تغيير‌و تحول خواهند كرد و پيشنهاد مي كنيم تا جايي كه ممكن ميباشد با واپسين ورژن ابزار شغل نمائيد.
همينطور ميتوانيد اين پوشه را با استعمال از npm init ساخت و ساز فرماييد و تعلق‌ها را يكي‌از بعداز ديگري با استعمال از npm install [package-name]نصب نماييد.
اين فولدر مشتمل بر آحاد چيزهايي ميباشد كه براي ساخت‌و‌ساز ساختاري سازگار با مرورگر نرم افزار Stimulus خويش نياز داريم. از روت نرم افزار npm install را اعمال فرمائيد. اين كار تعلق‌ها را در فايل node_modules جان دار در نرم‌افزار شما نصب خواهد كرد.
بعد از آن، يك فولدر تنظيمات را ساخت و ساز مي كنيم، براين اساس Webpack ميداند كه ما زماني فولدر‌ها را ذخيره مي كنيم چه كاري ميخواهيم با آنها اجرا دهيم. در به عبارتي فولدر روت جايي كه package.json آنجا قراردارد، فايلي به اسم webpack.config.js ساخت فرماييد، و اين محتوا را اضافه نماييد:
module.exports = {module: {rules: [{test: /.js$/,exclude: /(node_modules)/,use: {loader: 'babel-loader',options: {presets: ["@babel/env"],plugins: ["transform-class-properties"]}}}]}};