CustomWidget hayotiy sikli

AMD modul shartnomasi

script.js bajarilish jarayonida define()ni sinxron chaqirishi shart, fabrikasi esa konstruktor funksiyani qaytarishi kerak. Konstruktor new bilan chaqiriladi va hosil bo'lgan obyektdan callbacks obyekti kutiladi.

define(['jquery'], function ($) {
  return function CustomWidget() {
    this.callbacks = {
      render:       function (container) { return true },
      init:         function () { return true },
      bind_actions: function () { return true },
      initMenuPage: function (params) { return true },
      settings:     function ($modal) { return true },
      onSave:       function (settings) { return true },
      destroy:      function () { return true },
    }
  }
})

Yuklovchi ataylab minimal — bu to'liq qamrovli AMD implementatsiyasi emas:

• Faqat 'jquery' va '$' bog'liqlik nomlari hal qilinadi, ikkalasi ham Bito yetkazadigan jQuery 4 ga. Boshqa har qanday nom undefinedga aylanadi — na CDN'dan yuklash, na modullar reestri.
• Nomlangan modullar yo'q, ichma-ich require() yo'q, modul keshi yo'q.
• Agar skript yuklansa-yu define()ni hech chaqirmasa, yoki define() funksiya bo'lmagan narsani qaytarsa, ulanish xato kartochkasi bilan tugaydi.
• Vidjet skriptlari birma-bir yuklanadi. Yagona define qatlami bir vaqtda bitta yuklashga xizmat qiladi, shuning uchun bitta ekrandagi ikki vidjet ketma-ket, parallel emas, yuklanadi.

Bularning hech biri sandbox emas. Skript admin panelning origini ichida bajariladi; qarang: umumiy ma'lumot.

Callbacklar

Har bir callback ixtiyoriy. Yo'q callback shunchaki o'tkazib yuboriladi — bu xato emas.

Callback	Nima oladi	Qachon ishlaydi
render	Vidjet chizilishi kerak bo'lgan DOM element	Birinchi bo'lib, ulanishda
init	—	renderdan keyin
bind_actions	—	initdan keyin
initMenuPage	{ location, item_code, subitem_code }	Faqat chap menyu sahifalarida: bind_actionsdan keyin, so'ng har bir subbandga o'tishda — pastga qarang
settings	Sozlamalar modalining $ qatlami bilan o'ralgan tanasi	Foydalanuvchi vidjet sozlamalarini ochganda
onSave	Yig'ilgan sozlamalar obyekti	Foydalanuvchi o'sha oynada "Saqlash"ni bosganda
destroy	—	Uzilishda, hamisha

render → init → bind_actions har bir ulanishda aynan shu tartibda ishlaydi va vidjet yo'lda o'chirilsa, oldinroq to'xtaydi.

INFO

amoCRM'dagi kabi, Bito settingsga modal tanasini o'ralgan holda beradi: $modal — xom DOM tugun emas, kolleksiya obyekti, va bu modulingizning 'jquery' bog'liqligi hal qilinadigan o'sha $ning o'zi. Shuning uchun $modal.find('input[name=api_token]').val() yozilganidek ishlaydi — qarang: jQuery mosligi.

onSave nima oladi

Bito sozlamalar oynasi tanasidagi birinchi <form>ni topadi va uning FormData bandlarini oddiy obyekt sifatida beradi. Sozlamalar razmetkangizda <form> bo'lmasa, siz {} olasiz — formani nomlangan maydonlari bor haqiqiy <form> qilib yasang.

onSave: function (settings) {
  if (!settings.api_token) {
    bito.notify({ message: bito.i18n('token_required'), severity: 'error' })
    return false          // saqlashni to'sadi
  }
  return bito.settings.save(settings).then(function () { return true })
}

initMenuPage

Faqat chap menyu sahifalarida — widget_page nuqtasida ishlaydi. Ochiq sahifani oladi — bito.context.menu bilan bir xil obyektni:

initMenuPage: function (params) {
  // { location: "widget_page", item_code: "acme_crm", subitem_code: null }
  // { location: "saleMain", item_code: "acme_crm", subitem_code: "order_sync" }
  root.innerHTML = renderPage(params.subitem_code)   // root: render() olgan konteyner
}

• Birinchi marta bind_actionsdan so'ng darhol, bir marta chaqiriladi.
• Foydalanuvchi shu blokning (shu locationning) boshqa subbandini ochganda Bito vidjetni qayta ulamaydi: konteyner va holat saqlanadi, bito.context.menu yangilanadi va initMenuPage yangi obyekt bilan yana chaqiriladi. Yangi sahifani o'zingiz chizasiz.
• Vidjetda initMenuPage bo'lmasa, Bito uning o'rniga har bir subbandga o'tishda vidjetni qayta ulaydi — destroy, so'ng render → init → bind_actions — shuning uchun bito.context.menuni renderda o'qiydigan oddiy vidjet ham ishlayveradi.
• Boshqa blokka o'tish yoki vidjet sahifalaridan chiqish vidjetni uzadi va destroyni ishga tushiradi.
• Tashlangan xato yoki rad etilgan promise ushlanadi, logga yoziladi va boshqa callbacklar bilan umumiy xatolar byudjetiga (ikki xato) hisoblanadi. Qaytgan qiymat e'tiborga olinmaydi, u uchun xato kartochkasi ko'rsatilmaydi.

Nosozliklarni ushlab qolish

Har bir callback chaqiruvi o'ralgan. Vidjetingizning nosozligi ERP ekranini oqartirib yuborishi mumkin emas, shuning uchun:

1. Xato tashlagan callback ushlanadi va logga yoziladi, vidjet o'rniga esa xato kartochkasi chiziladi. Vidjet ishlashda davom etadi.
2. Ikkinchi xato — istalgan callbackniki, istalgan paytda — vidjetni shu ulanish oxirigacha o'chiradi. Undan keyin hech narsa chaqirilmaydi.
3. Bayroq ulangan nusxada yashaydi. Sahifadan chiqib qaytish vidjetni qaytadan ulaydi va hisobni nolga qaytaradi; u saqlanmaydi.

Rad etilgan promise sinxron xato bilan bir xil hisoblanadi: callbacklar await qilinadi.

onSave saqlashni to'sadi

onSave — qaytargan qiymati hostning xatti-harakatini o'zgartiradigan yagona callback.

Sizning onSave	Natija
false qaytardi	Saqlash tushunarli xabar bilan to'siladi. Bu xatolar byudjetiga kirmaydi — false qaytarish hujjatlashtirilgan API'ning ishlashi, nosozlik emas.
Xato tashladi yoki promise'ni rad etdi	Saqlash to'siladi, va bu xato deb hisoblanadi.
30 soniyadan uzoq ishladi	Saqlash taymaut xabari bilan to'siladi, va bu xato deb hisoblanadi.
Boshqa narsa yoki hech narsa qaytardi	Saqlash davom etadi.

Agar "Saqlash" bosilgan paytda vidjet allaqachon o'chirilgan bo'lsa, saqlash darhol to'siladi.

destroy hamisha ishlaydi

destroy uzilishda avvalroq boshqa callback xato tashlagan bo'lsa ham ishlaydi, vidjet o'chirilgan bo'lsa ham — u ataylab o'chirilganlik bayrog'iga bog'lanmagan. Uning o'z xatolari yutiladi va logga yoziladi: tozalash ishining o'zi tozalashni buzmasligi kerak.

Undan taymerlarni tozalash, tugallanmagan so'rovlarni bekor qilish va o'z konteyneringizdan tashqarida ulagan hamma narsani uzish uchun foydalaning. Sizdan keyin boshqa hech kim yig'ishtirmaydi: style.css uchun <link> va <script> tegi olib tashlanadi, lekin global tinglovchilar, intervallar va boshqa joyga qo'ygan DOM sizning zimmangizda.