computed -аар програмд оптимизац хийх

Програм ямар нэгэн алдаагүй зөв ажиллаж байх хэрэгтэйг бүгд мэднэ. Харин програм зохиогч өөрийн кодийг хурдтай ажилладаг, зохион байгуулалт сайтай, ойлгомжтой байлгахыг байнга эрмэлзэх ёстой. Програм зохиогч бүр програм боловсруулалтын DRY /do not repeat yourself/ дүрмийг ягштал биелүүлэн хэвшил болгосон байх хэрэгтэй. Хичээлээр Vue -гийн програмын ажиллагааг хэрхэн оновчтой /оптимизаци/ болгохыг доорх жишээгээр

        <div id="app">
            <h2>Тоолуур {{ counter}} </h2>
            <h3>{{ condition }}</h3>
            <button @click="add">Нэмэх</button>
            <button @click="sub">Хасах</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    counter: 0,
                    condition: 'Тоолуур 3-аас бага'
                },
                methods: {
                    add: function() {
                        this.counter ++
                        this.condition = this.counter > 3 ? 'Тоолуур 3-аас их' : 'Тоолуур 3-аас бага'
                    },
                    sub: function() {
                        this.counter --
                        this.condition = this.counter > 3 ? 'Тоолуур 3-аас их' : 'Тоолуур 3-аас бага'
                    }
                }
            })
        </script>        
    </body>

авч үзье. Хуудаст тоолуурын counter талбар, харьцуулалтын үр дүнгийн condition талбаруудыг үзүүлэх h2, h3 гарчигаас гадна тоолуурын утгыг нэмэх, хасах хоёр товч байгаа.

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

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

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

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

RxJs санг ашиглах хичээлд бид стримийг өөрсдөө үүсгэсэн бол энэ хичээлд Javascript -ийн бэлэн обьектоос буюу үйл явцаас стримийг /урсгал/ хэрхэн үүсгэх талаар үзье. Үүний тулд index.html файлд товчийг

...
<body>
    <button>Дарах</button>
<script src="node_modules/rxjs/bundles/rxjs.umd.min.js"></script>
<script src="index.js"></script>
</body>
...

үүсгэн өгөөд товч дээр дарах үйл явцаас стрим үүсгэхийн тулд index.js файлд

var button = document.querySelector('button');
var btn$ = Rx.Observable.fromEvent(button, 'click');

кодыг оруулан өгье.

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

react програм үүсгэх хичээлд create-react-app хэрэгслээр үүсгэсэн шинэ төслийг бүтэцтэй танилцая. Хичээлийн кодийн засварт би VSCode -ийг ашиглах бөгөөд D дискний projects хавтас дахь react хавтаст үүсгэсэн react-less хавтасыг код засварлагч дээр нээе.

Төслийн хавтас доторх үндсэн файлуудаас package.json бол маш чухал файл.

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

Директивийн амьдралын циклүүдийг /үе/ мэдэж байх хэрэгтэй. Өөрийн директив үүсгэх хичээлд директивийг үүсгэх шатанд ажиллах арга 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')
  }
}

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

Интернетэд суурилсан програм зохиоход олон төрлийн технологи, аргачлалыг хослуулан ашигладаг хэдий ч хэрэглэгч талын хуудаст javascript, css, html -ийг голлон хэрэглэдэг. Эдгээрээс javascript хэл их чухал үүргийг гүйцэтгэдэг тул сайтад энэхүү хэлний фреймворк, сангуудын хичээлүүдийг нийтэлж байгаа ба энэ удаад RxJs сангийн өгөгдлүүдэд шүүлт тавин боловсруулалт хийдэг операторуудын талаар авч үзэцгээе.

filter арга

Арга хэрхэн ажиллахыг шууд практик жишээн дээр харцгаая.

Rx.Observable.range(0, 10)
    .filter(x => x >3)
    .subscribe(createSubscribe('filter'));

Жишээнд стримийг RxJs сангийн Observable классын range аргаар үүсгэсэн. range арга 0 -ээс 10 хүртэлх тоон дарааллыг үүсгэнэ. filter аргад дарааллын урсгалд шүүлт тавих нөхцлийг дамжуулах ёстой. Аргад өгсөн нөхцлөөр тоон дарааллаас 0, 1, 3 элементүүдэд шүүлт /өөрөөр хэлбэл нөхцөлд тохирохгүй/ тавигдан 4 -өөс 10 хүртэлх тоонуудыг консолд үзүүлэх ёстой. Кодыг ажлуулбал

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

a ба b катеттай тэгш өнцөгт гурвалжин ерөнхий тэгш өнцөгтэй квадратыг багтаасан бол квадратын периметрийг ол.

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

 

функцийн графикийн (0,-1) цэгт татсан шүргэгч шулуун ба координатын тэнхлэгүүдээр хашигдсан мужийн талбайг ол.

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

 

тэнцэтгэл бишийн хамгийн их бүхэл шийдийг ол.

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