Орчны тохиргоо

Хичээлээр ES6 -гийн кодыг ES5 кодоор компиляц хийх талаар авч үзье. Юуны түрүүнд үүнийг ямар учраас хийх хэрэгтэй вэ? гэдгийг тайлбарлая. ES бол EcmaScript -ийн хураангуйлсан бичлэг бөгөөд 6 нь Javascript -ийн хувилбарын дугаар. ES6 гараад удаагүй байгаа ч түүнийг олон хөтөчүүд дэмжин ажилладаг болоод байгаа. Жишээ нь Chrome хөтөч ES6 дээр бичигдсэн кодыг шууд ажиллуулна. Гэвч олон хэрэглэгчид ES6 -г шууд дэмждэггүй хуучин хөтөчүүдийг жишээ нь Internet Explorer, Firefox -ийн хуучин хувилбарыг хэрэглэсээр байгаа. Харин эдгээр хуучин хөтөчүүд ES5 -ийг бүрэн дэмжин ажилладаг тул програмыг бүх хэрэглэгчид ямар нэгэн асуудалгүйгээр ашиглах боломжийг бүрдүүлэх зорилгоор ES6 -гийн кодыг ES5 кодоор компиляц хийх хэрэгцээ бий.

Энэ ажлыг гүйцэтгэх хамгийн энгийн болоод ихээр ашигладаг нэг арга бол ES6 -гийн кодыг Webpack -аар ES5 кодод хөрвүүлэх бөгөөд хичээлд бид Webpack -ийн тохиргоог шууд хийгээд явна. Хэрвээ та Webpack -ийг мэдэхгүй бол холбогдох хичээлүүдийг үзээрэй. Ингээд WebStorm

шинэ төсөл нээе. Та өөрийн дуртай код засварлагчийг ашиглаж болно. Webpack -ийг ашиглахын тулд эхлээд түүнийг компьютертаа суулгах хэрэгтэй. Хэрэгслийг суулгахын өмнө таны компьютерт node.js сан болон пакетын менежер npm суусан байх ёстойг сануулъя. Node.js -ийг суулгах хичээлийг эргэн харахыг зөвлөе. Webpack -ийг компьютертаа глобал хэлбэрээр суулгах хэрэгтэй. Үүний тулд npm i -g webpack командыг WebStorm -ийн терминалаас эхсүл командын консолоос өгнө. Дараа нь хэрэгцээт бүх хамааралууд зөв бичигдэн төслийн ажиллагааг хэвийн хангахын тулд package.json файлын инициализацийг хийх хэрэгтэй. Иймээс WebStorm -ийн терминалыг нээгээд npm init өгөхөд пакетын менежер npm төслийн package.json тохиргооны файлын мэдээллийг оруулахыг хүсэх ба

name талбарт өөр пакетуудын нэртэй давхцахгүйгээр нэрийг жишээ нь es6-theory-course өгөөд бусадыг анхдагч утгаар нь үлдээвэл төслийн бүх хамааарлуудыг бичин өгөх төсөлд package.json нэртэй файл үүснэ. Webpack -ийг төсөлд цаашид локал байдлаар ашиглахын тулд WebStorm -ийн терминалыг нээгээд npm i --save-dev webpack@3.8.1 командыг өгнө. Командыг өгөхдөө өөрийн компьютерт глобал байдлаар суугдсан webpack -ийн хувилбарыг локалаар суулган өгөөрэй. Миний компьютерт webpack -ийн 3.8.1 хувилбар глобалаар суугдсан байгаа.
Webpack -ийн тохиргоог хийхээс өмнө төсөлтэй ажиллахад илүү эвтэйхэн болгох бас нэгэн пакетыг суулгая. Үүний тулд WebStorm -ийн терминалыг нээгээд npm i -D html-webpack-plugin командыг өгнө. -D параметр нь --save-dev -ийн адил пакетыг боловсруулалтын хамаарал гэдгийг заана. html-webpack-plugin төсөлд html файлын автомат генерацийг хийн өгдөг. Одоо төслийн package.json файлыг нээн харвал

{
  "name": "es6-theory-course",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^3.8.1"
  },
}

болсон байх ёстой. devDependencies талбарт бидний суулгасан html-webpack-plugin, webpack пакетууд бичигдсэн байгаа. Төслийн файлуудын нэгтгэлийг node.js дээр хийхийн тулд webpack -ийн тохиргооны webpack.config.js файлд дараах агуулгыг

var webpack = require('webpack');
var path = require('path');
var HtmlPlugin = require('html-webpack-plugin');

module.exports = {

    entry: './index.js',

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },

    plugins: [
        new HtmlPlugin()
    ]
};

оруулан өгье. Эхлээд бид require командаар төсөлд шаардлагатай webpack, path, html-webpack-plugin пакетуудын импортыг хийнэ. path нь node.js -ийн өөрийнх үндсэн модул тул түүнийг суулгах шаардлагагүй шууд импортолж болно. webpack, html-webpack-plugin пакетуудыг бид төсөлдөө локал байдлаар суулган өгсөн. webpack.config.js файлаас webpack -ийн тохирогоог module.exports -оор обьект байдлаар хийдэг. Оролтын цэгийг entry талбарт index.js гэж заасан. Төсөлд index.js одоохондоо байхгүй байгаа ч бид удахгүй түүнийг үүсгэн өгнө. output талбарт гаралтын файлын зам, нэрийг обьектоор заан өгдөг. plugins талбарын массивт төсөлд ашиглах плагинуудыг заана. Эцэст нь ES6 -гийн кодыг ES5 код руу хөрвүүлэх тусгай loader -ыг заан өгөх хэрэгтэй. Үүний тулд Babel -д зориулагдсан Webpack плагиныг github -ийн https://github.com/babel/babel-loader/tree/master хаягаас суулгана. Төсөлд webpack -ийг суулгасан болохоор Babel Loader -ийг npm -ээр суулгах командаас webpack -ийг хасаад

npm install -D babel-loader@7 babel-core babel-preset-env командыг терминалаас өгөн пакетуудыг суулгаад package.json файлыг нээн харвал

{
  "name": "es6-theory-course",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "babel-loader": "^8.0.4",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^3.8.1"
  }
}

агуулгатай болсон байна. Одоо Babel Loader -ийг ашиглах хэсэгт тодорхойлсон module талбарыг

хуулан аваад webpack.config.js файлын plugins талбарын ард тавин өгвөл файл

var webpack = require('webpack');
var path = require('path');
var HtmlPlugin = require('html-webpack-plugin');

module.exports = {

    entry: './index.js',

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },

    plugins: [
        new HtmlPlugin()
    ],

    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
};

агуулгатай болно. Төсөлд хэрэгтэй пакетуудыг суулган webpack -ийн тохиргоог хийн өгсөн тул компиляторын боломжийг шалгах зорилгоор index.js файлыг үүсгээд түүнд ES6 гийн const түлхүүр үгийг ашиглан

const APP = 1;

энгийн кодыг оруулан өгье. webpack бидэнд ES6 гийн const түлхүүр үгийг ES5 -ын var -аар солин компиляц хийхийг харахын тулд терминалыг нээгээд webpack командыг өгөхөд төсөлд

bundle.js файлыг агуулсан dist хавтас үүснэ. bundle.js файлыг нээн харвал const түлхүүр үг var -аар солигдсон нь харагдана. Үүнээс гадна html-webpack-plugin төслийн гаралтын хавтаст index.html файлыг үүсгэсэн байгаа. Иймээс компиляторын тохиргоо бүгд зөв хийгдэн ажиллаж байгаа нь батлагдлаа.

Хөтөч дээр ES6 гийн бичлэгийг шалгах      

Chrome хөтөчийг нээгээд F12 товч дээр дарахад консолийн цонх нээгдэх бөгөөд сүүлийн хувилбаруудад энд ES6 гийн дүрмээр командуудыг бичиж болдог. Жишээ нь

const APP = () => 1+1; гэж бичээд APP -ийг дуудахад функц ажиллана. Chrome хөтөчийн сүүлийн хувилбарууд ийм бичилтийг шууд дэмжинэ. Хэрвээ та Chrome -ийн арай хуучин хувилбарыг ашиглаж байвал Scratch JS гэдэг сонирхолтой плагин бий. Плагиныг хөтөчийн хаягийн мөрөнд https://chrome.google.com/webstore/category/extensions?hl=en-US хаягийг бичэх эсхүл

гэж ороод дараа нь

Open Chrome Web Store сонголтоор ороод Scratch JS нэрээр хайлт хийн олоод суулгавал DevTools хэсэгт Scratch JS таб нэмэгдэнэ. Одоо Scratch JS табыг нээгээд

Toggle output товчийг дараад

зүүн цонхонд ES6 -гийн дүрмээр код бичихэд кодыг баруун цонхонд шууд ES5 дүрмээр хөрвүүлнэ.

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

  Нээгдсэн тоо: 202 Төлбөртэй

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас хооронд динамик буюу дахин ачаалахгүйгээр шилжилт хийх боломжийг бүрдүүлсэн. App компонентийн кодод бүртгүүлсэн

function App() {
  return (
    <div>
      <nav className="nav">
        <ul>
          <li>
            <Link to="/">Нүүр</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <hr />
      <Routes>
        <Route path="/" element={<Cars />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

export default App;

/ чиглүүлэгч манай нүүр хуудас буюу http://localhost:3000/ хаягийг зааж байгаа ч Cars компонентод шилжиж байгаа нь логикийн талаасаа ойлгомж муутай болсон. Иймээс кодийг / чиглүүлэгчээр нүүр хуудаст шилждэг болгоё.

  Нээгдсэн тоо: 767 Төлбөртэй

Хэрэглэгч програмын өгөгдөлтэй харьцах ажиллагаа бол ямарч програмыг хувьд чухал хэсэг байдаг. Үүнийг голдуу формоор дамжин хийдэг. Иймээс энэ удаа VueJs -ээр төрөл бүрийн input элементүүдтэй хэрхэн ажиллахыг

    <body>
        <div id="app">
            <input type="text">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {

                }
            })
        </script>
    </body>

кодоор авч үзье. Кодод хэрэглэгчээс өгөгдөл авах input элемент div id="app" элементэд Vue -гийн хувийн инициализац хийсэн байгаа. Хуудсыг нээвэл ердийн input талбар л үзэгдэнэ. Тэгвэл input элементэд ямар нэгэн зүйлийг оруулахад түүнийг хуудасны шаблонд шууд харуулах асуудлыг шийдье.

  Нээгдсэн тоо: 969 Бүртгүүлэх

Сүүлийн жилүүдэд React, Angular, Vue зэрэг javascript фреймворкууд веб програмчлалд хүчтэй түрэн орж ирсэн. Javascript хэлийг бүх хөтөчүүд дэмжин ажилладаг тул хэрэглэгч талын хуудас дангаараа бие даан ажиллах нэг хуудаст аппликашн буюу SPA болсноор сервер болон сүлжээний ачааллыг бууруулах, хэрэглэгчийн ажиллах орчинг маш эвтэйхэн болгох боломжийг бүрдүүлэн өгдөг. Энэ удаад жагсаалтыг шүүх шүүлтүүрийг хэрхэн хэрэгжүүлэхийг

<template>
  <div>
      <h2>{{ title }}</h2>
      <input type="text" v-model="searchName">
      <ul>
        <li v-for="(name, index) of names" :key="index">{{ name }}</li>
      </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: 'Hello I am Vue!',
      searchName: '',
      names: ['Баатар', 'Болд', 'Цэцгээ', 'Алимаа']
    }
  }
}
</script>

кодоор авч үзье.

Сайтад тавигдаж буй Vue фреймворкийн хичээлүүд -ийг бүгдийг нь үзвэл фреймворкийн талаар илүү гүнзгий ойлголтыг авна гэдгийг зөвлөе.

  Нээгдсэн тоо: 337 Нийтийн

react компонентийн амьдралын циклийн талаар судлая. react компонентийн амьдралын цикл гэдэг нь компонентийн тодорхойлолтын тодорхой үе шатууд юм. Суурь Component класст амьдралын циклийн аргууд тодорхойлогдсон байдаг тул түүнээс удамшсан компонентуудад амьдралын цикл байдагийг сануулъя. Хичээлээр компонентийн инициализац хийгдэх үед түүнд үүсэх амьдралын суурь циклүүдийн талаар авч үзье. Амьдралын циклүүд бүгд react компонентийн инициализацийн тодорхой үеүдэд ашиглаж болох ердийн функцууд байдаг.

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 86

 

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

Нээгдсэн тоо : 117

 

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

Нээгдсэн тоо : 125

 

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 145

 

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 140

 

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 202

 

Хуваах нь нэг тоо нөгөө тоонд хэдэн удаа агуулагдаж буй тодорхойлох арифметикийн үйлдэл.
Хуваалтыг нэг бус удаа…

Нээгдсэн тоо : 144

 

Зуучлагч (Mediator) нь олон тооны обьектууд бие биетэйгээ холбоос үүсгэхгүйгээр харилцан ажиллах боломжийг хангах загварчлалын хэв юм. Ингэснээр…

Нээгдсэн тоо : 139

 

Делегатууд хичээлд ухагдхууны талаар дэлгэрэнгүй үзсэн ч жишээнүүд делегатийн хүчийг бүрэн харуулж чадахааргүй байсан.…

Нээгдсэн тоо : 144

 
Энэ долоо хоногт

илэрхийллийг хялбарчил.

Нээгдсэн тоо : 1586

 

Нээгдсэн тоо : 635

 

prob09_163_01Зурагт өгсөн ABC гурвалжны AN=9, BM=12 байх медианууд перпендикуляр ба O цэгт огтлолцох бол ONCM дөрвөн өнцөгтийн талбайг ол.

Нээгдсэн тоо : 69