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Тусгай эрх авах

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

Холбоотой материалууд
Өөрчлөлтийн амьдралын цикл

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

Төслийн Car компонентийг Stateful буюу Component классаас удамшсан класс байдлаар тодорхойлсноор react компонентийн амьдралын циклүүдэд хандах боломжийг авсан. Car компонентод дээр компонентийн төлвийн өөрчлөлтүүдийн циклүүдийг харцгаая. Үүний тулд Car компонентийн кодийг

class Car extends React.Component {

  shouldComponentUpdate(nextProps, nextState) {
    console.log('Car shouldComponentUpdate', nextProps, nextState)
    return true
  }

  componentDidUpdate() {
    console.log('Car componentDidUpdate')
  }

  render() {
    console.log('Car render')
    const inputClasses = [styles.input]

    ...

    return (
      <div className={styles.Car} style={style}>
        <h3>Машиний нэр: {this.props.name}</h3>
        <p>Он: <strong>{this.props.year}</strong></p>
        <input
          type="text"
          onChange={this.props.onChangeName}
          value={this.props.name}
          className={inputClasses.join(' ')}
        />
        <button className={styles.btn} onClick={this.props.onDelete}>Устгах</button>
      </div>
    )
  }
}

export default Car

гэж өөрчилье.

Компонент үүсгэх

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

Өмнөх хичээлүүдэд бид create-react-app хэрэгслээр үүсгэсэн төслийн суурь код дээр жишээнүүдийг судласан. Одоо react төсөлд өөр компонентууд үүсгэн тэдгээрийг өөр хооронд нь холбон ашиглахыг сурцгаая. react -ийн компонентийг голдуу тусд нь хавтас үүсгэн байршуулдаг тул бид төслийн src хавтаст Car нэртэй хавтасыг үүсгээд түүн дотор Car.js файлыг үүсгээрэй.

react -д компонентийг үүсгэх хоёр үндсэн арга байдаг талаар JSX хичээлд дурдсан.

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

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

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

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

VueJs -ийн хуудсанд үйл явц нэмэх ажиллагааны дараагийн боломж бол үйл явцын модификатор буюу тохируулагч юм. Орчуулга сайнгүй болсон байх талтай тул модификатор гэдгээр нь ойлговол зүгээр. Хичээлээр модификаторууд ямар хэрэгтэй, юу хийдэг талаар авч үзье. Жишээ нь E-surgalt сайтад шилжих холбоосыг агуулсан

    <body>
        <div id="app">
            <h2>
                <a href="https:" target="_blank">E-surgalt</a>
            </h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            ...
        </script>
    </body>

хуудас байлаа гэж бодъё. Хөтөч дээр хуудсыг нээгээд холбоос дээр дарвал E-surgalt сайтыг шинэ цонхонд нээнэ.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

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

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

 
Бодлого 15.055

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

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

 
Бодлого 5.078

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

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

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