Үйл явдлыг боловсруулах дараалал

Үйл явдлыг боловсруулах бол Javascript программын үндсэн үүрэг гэж үзэхэд бараг болно. Иймд хичээлийг сайн үзээд ойлгон авах хэрэгтэй. Нэг үйл явдал тухайн үйл явц болсон элементэд нөлөө үзүүлэхээс гадна түүний дээрх элементүүдэд бас үйлчилдэг. Энэ нь элементэд олон дараалсан HTML тег агуулагдаж байх тохиолдолд тег бүрд боловсруулагч тавихгүйгээр дээд түвшин буюу эцэг элементэд ганц боловсруулагч заагаад бүх үйл явцыг барихад их эвтэйхэн байдаг. Гурван элемент нэг нэгдээ орон байрласан тохиолдлыг авч үзье.

Материалыг тусгай эрхтэй хэрэглэгч үзнэ.

request_quoteТусгай эрх авах

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

Холбоотой материалууд
Стримүүдийг нэгтгэх I

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

Javascript хэл анхнаасаа обьект хандлагат технологиор зохиогдсон тул эхлэн суралцаж байгаа хүмүүс жаахан хүнд мэт санагдаж болох талтай. Ер нь ОХП хэлүүдийг сурахад обьект хандлагат технологийн суурийг их зөв ойлгосон байх хэрэгтэйг зөвлөе. Иймээс сайтын Програмчлал хэсгийн ОХП ухагдхууныг хөндсөн хичээлүүдийг үзэхийг зөвлөе. Хичээлийн материалыг бүрэн ойлгохын тулд Rxjs сан хичээлийн багцыг эхнээс нь бүгдийг судалбал илүү үр дүнтэй.

Энэ хичээлээр RxJs санг ашиглан өөр стримүүдийг нэг стримд нэгтгэх боломжийн талаар авч үзэх болно.

merge арга

Энгийн жишээнээс эхлэе. index.js файлд

const s1$ = Rx.Observable.of('Hello');
const s2$ = Rx.Observable.of('World');

RxJs сангийн Observable классын of аргаар мөрүүдээс s1, s2 хувьсагчид стримүүдийг үүсгээд эдгээрийг нэг стримд merge аргаар

const s1$ = Rx.Observable.of('Hello');
const s2$ = Rx.Observable.of('World');

s1$.merge(s2$).subscribe(createSubscribe('merge'));

гэж нэгтгэнэ.

Динамик атрибутууд

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

VueJs -ээр хуудас дээрээс өөр сайт руу шилжилт хийх техникийг авч үзье. Хуудас дээрээс e-surgalt.com сайт руу хандах холбоосыг байршуулаад түүгээр дамжин сайтад хандая гэвэл data талбарын обьектод url талбарыг зарлаад түүнд шилжих сайтын хаягаа өгөөд хуудасны кодод холбоосоор шилжих хаягаа {{ url }} гэж заасан

    <body>
        <div id="app">
            <h2>
                <a href="{{ url }}">E-surgalt</a>
            </h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    url: 'https:'
                }
            })
        </script>        
    </body>

дээрх агуулга бүхий кодыг бичэхэд болох мэт.

Директивүүдийн амьдралын цикл

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

Директивийн амьдралын циклүүдийг /үе/ мэдэж байх хэрэгтэй. Өөрийн директив үүсгэх хичээлд директивийг үүсгэх шатанд ажиллах арга bind -ийг мэдэн авсан. Аргаар директивийн инициализацийг хийн түүнийг виртуал DOM дахь элементэд холбох бөгөөд энэ үед тухайн директив бодит DOM -ийн модонд орж ирээгүй байдаг. Директивийн амьдралын циклүүдийг төслийн color.js файлд тодорхойлсон обьектын кодод нэмье.

export default {
  bind(el, bindings, vnode) {
    console.log('bind')
    el.style.color = 'green'
  },
  inserted(el, bindings, vnode) {
    console.log('inserted')
  },
  update(el, bindings, vnode, oldVnode) {
    console.log('update')
  },
  componentUpdated(el, bindings, vnode, oldVnode) {
    console.log('componentUpdated')
  },
  unbind() {
    console.log('unbind')
  }
}
Классууд

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

Програмын бүтээгдхүүнүүд интернетэд суурилсан буюу хөтөч дээр ажиллах хандлага улам дэлгэрсээр байгаа нь  javascript хэлийг судлан эзэмших шаардлагыг улам нэмэгдүүлсээр байгаа. Хэлний боловсруулагчид javascript хэлний бичлэгийн дүрмийг өргөн тархсан програмчлалын хэлүүдтэй улам төстэй болгож байгааг ES6 -д классууд хэрхэн өөрчлөгдсөн дээр авч үзье. ES5 -д классыг хэрхэн үүсгэж байсанг

function Car(name) {
    this.name = name;
}

Car.prototype.logName = function () {
    console.log(this.name);
};

let car = new Car('Toyota');
car.logName();

жишээнээс харцгаая.

Үйл явдал…

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

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

 
Холбоосын параметрүүд

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох…

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

 
Зочин (Visitor)

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

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

 
Лямбда

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

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

 
Outlet компонент

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

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

 
Хадгалагч (Memento)

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

 
Кодийн сайжруулалт

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

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

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

тэгшитгэлийн хувьд утгыг ол

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

 
Бодлого 12.061

тэгшитгэлийн хамгийн их сөрөг язгуурыг ол.

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

 
Бодлого 16.046

тэнцэтгэл b -ийн ямар утганд биелэх вэ?

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

 
© 2014 Зохиогчийн эрхээр хамгаалагдсан. Холбогдох - 96655195