Гэр / Windows хичээлүүд / jQuery загвартай ажиллаж сурах. jQuery загвартай ажиллах jQuery дахь дижитал өгөгдлийн зохион байгуулалт

jQuery загвартай ажиллаж сурах. jQuery загвартай ажиллах jQuery дахь дижитал өгөгдлийн зохион байгуулалт

09.03.2024 Windows хичээлүүд

Эхэлцгээе Эхэлцгээе. Доорх жишээнд массиваар өгөгдсөн кинонуудын жагсаалтыг харуулав (жишээний бүрэн код файлд байна BasicSample1.htm):

Энгийн жишээ (1) $(гарчиг)

Захирал: $(захирал)
Жүжигчид: $(жүжигчид)
Он: $(жил)

$(функц () ( $("#movieTmpl").tmpl(dataItems).appendTo("#movieListBag"); )); Энгийн жишээ (1)
Энэ нь хөтөч дээр харагдах болно:

Энэ жишээг нарийвчлан авч үзье.

Тиймээс миний хийх хамгийн эхний зүйл бол холбогдох явдал юм jQuery үндсэн номын санТэгээд jQuery загварууд:


Үүнээс өмнө ч олон удаа хэлж байсан jQuery загварууд-д багтах болно jQuery үндсэн номын сан- гэхдээ 1-р сарын 24-нд гарсан jQuery 1.5 RC1-д загварууд байхгүй хэвээр байна.

Дараа нь би киноны жагсаалтыг ачаална:


Мэдээжийн хэрэг, та эх өгөгдлийг өөрт тохирсон ямар ч аргаар бэлтгэж болно - үүнийг AJAX хүсэлтийг ашиглан хүлээн авах, хэрэглэгчийн оруулсан мэдээлэлд үндэслэн үүсгэх гэх мэт, би зөвхөн статик скрипт ашиглаж байна.

Файл дотор DataItems.jsдараах байдлаар:

Var dataItems = [ ( гарчиг: "Дээрэмчид", өнгөц зураг: "Bandits.jpg", найруулагч: "Барри Левинсон", жүжигчид: ["Брюс Уиллис", "Билли Боб Торнтон", "Кейт Бланшетт"], он: 2001, төсөв: 95000000, нийт орлого: 67631903, үнэлгээ: 0, хүрээ: ["Дээрэмчид-1.jpg", "Дээрэмчид-2.jpg", "Дээрэмчид-3.jpg", "Дээрэмчид-4.jpg", "Дээрэмчид- 5.jpg"] ), ...
Дараагийн алхам бол загвар үүсгэх явдал юм.

$(гарчиг)

Захирал: $(захирал)
Жүжигчид: $(жүжигчид)
Он: $(жил)


Загварыг шошгон дээр байрлуулсан болохыг анхаарна уу SCRIPT, мөн MIME төрлөөр би зааж өгнө text/x-jquery-tmpl. Баримт бичгийг задлан шинжлэх үед танил бус MIME төрөлтэй тулгарах үед хөтөч шошгын агуулгыг тайлбарлахыг оролддоггүй. SCRIPT, энэ нь надад хэрэгтэй зүйл юм.

Ерөнхийдөө загварыг ямар ч шошгонд, жишээлбэл шошгонд байрлуулж болно DIV:

$(гарчиг)

Захирал: $(захирал)
Жүжигчид: $(жүжигчид)
Он: $(жил)


Гэсэн хэдий ч, энэ тохиолдолд гаж нөлөөнөөс зайлсхийх боломжгүй, учир нь хөтөч загвар кодыг тайлбарлахыг оролдох нь гарцаагүй.

Жишээлбэл, дээрх жишээ нь байхгүй зургийг ачаалахыг оролдох болно:

Гэхдээ хүснэгтийн хувьд бүх зүйл илүү сонирхолтой байж болно (энэ жишээнд зориулж TEHEK-д маш их баярлалаа!):

((өгөгдлийн зүйл тус бүр)) ((/ тус бүр))
$(гарчиг) $(захирал) $(жил)

Internet Explorer болон Opera энэ кодыг зөв боловсруулах болно:

Гэхдээ Chrome болон Fire Fox нь нэмэлт кодыг хүснэгтийн гадна талд "түлхэх" бөгөөд ингэснээр хоосон хүснэгт бий болно ... Дибаг хийхэд баяртай байна! ;-)

Шошгоны хувьд СОНГОХижил төстэй дүр зураг ажиглагдах болно.

Эцэст нь би дараах дуудлагын тусламжтайгаар загварыг эхлүүлж байна:

$("#movieTmpl").tmpl(dataItems).appendTo("#movieListBag");
Би доорх диаграммд юу болж байгааг дүрсэлсэн.

  • Арга .tmpl()загвар текстийг авдаг - i.e. дотоод текстдуудлагаар олж авсан элемент $("#movieTmpl").
  • Загварын текстийг эмхэтгэж, түүн дээр үндэслэн JavaScript функцийг үүсгэнэ.
  • "Загварын жишээ" үүсгэгдсэн - өгөгдлийн элементийн лавлагаа агуулсан объект (талбар өгөгдөл) аргын аргумент болгон дамжуулсан .tmpl(). Арга .tmpl()та массив, объектыг дамжуулж болно, nullэсвэл ямар ч маргаангүйгээр дууд. Хэрэв та массивыг дамжуулвал массивын элемент бүрийн хувьд энэ элементийг иш татсан тохиолдолд зөвхөн нэг жишээ үүсгэгдэх болно.
  • Эмхэтгэсэн загварын функцийг дуудаж, жишээ объект дамжуулдаг. Энэ функц нь бүх орлуулалт хийгдсэн загвар текстийг буцаана.
  • Өмнөх алхамд олж авсан текстийг HTML элементүүдийн цуглуулга болгон хувиргасан. Эдгээр элементүүдийн лавлагаа нь жишээ объектод (талбар зангилаа), энэ нь ирээдүйд эх өгөгдөл өөрчлөгдөх үед загварын "гаралтыг" хялбархан шинэчлэх боломжийг олгодог ("Динамик шинэчлэлт" хэсгийг үзнэ үү).
  • Тэгээд эцэст нь арга .tmpl()буцаж ирдэг jQuery-дуудлага ашиглан баримт бичигт нэмсэн HTML элементүүдийн цуглуулга appendTo("#movieListBag").
    • Илэрхийлэл Загварт утгыг орлуулахын тулд шошгыг ашиглана уу ${...} . Энэ таг дотор та аргад дамжуулагдсан объектын өмчийн нэрийг зааж өгч болно .tmpl(), түүнчлэн аливаа хүчинтэй JavaScript илэрхийлэл, үүнд функцийн дуудлага орно.

    Объектын шинж чанарыг ашиглах (массив элемент):

    $(гарчиг)
    JavaScript илэрхийлэл ашиглах:

    Төсөв: $$((төсөв / 1000000).Тогтмол(0)) сая.
    Нийт: $$((нийт орлого / 1000000).тогтсон(1)) сая.

    Загварын жишээний талбар ба аргууд Илэрхийлэл дотор та хувьсагчаар дамжуулан одоогийн загвар жишээнд хандах боломжтой. $ зүйл, мөн одоогийн өгөгдлийн элементэд хандахын тулд - хувьсагч $ өгөгдөл.

    Загварын жишээ бүр дараах талбаруудыг агуулна.

  • өгөгдөл- Загварын жишээтэй холбоотой өгөгдлийн элементийн холбоосыг агуулсан;
  • tmpl- дүрслэхэд ашигласан эмхэтгэсэн загварын холбоосыг агуулсан;
  • эцэг эх- хэрэв загварыг өөр загвараас шошго ашиглан дуудсан бол ((tmpl)), загварын "эцэг эх" жишээний холбоосыг агуулсан;
  • зангилаа- дүрслэсний дараа загварыг хэрэглэсний үр дүнд бий болсон HTML элементүүдийн холбоосыг агуулна.
    • Үүнээс гадна арга .tmpl()хоёр аргумент авдаг - өгөгдөлТэгээд сонголтууд. Маргаантай өгөгдөлТа аль хэдийн уулзсан бол өгөгдлийн элементийн холбоос түүгээр дамждаг. Мөн аргументыг ашиглан сонголтууд, та тухайн объектын бүх талбар болон аргуудыг тухайн аргад үүсгэсэн загварын жишээ бүрт шилжүүлэх боломжтой. .tmpl().

    Энэ параметрийг ашиглах жишээг доор харуулав.

    $(гарчиг)

    Захирал: $(захирал)
    Жүжигчид: $(жүжигчид)
    Он: $(жил)
    Төсөв: $$($item.formatBudget(budget)) сая.
    Нийт: $$($item.formatGrossRevenue(brossRevenue)) сая.


    $(функц () ( $("#movieTmpl") .tmpl(dataItems, (formatBudget: функц (утга)) (буцах (утга / 1000000). toFixed(0); ), форматGrossRevenue: функц (утга) ( ​​return (утга / 1000000).toFixed(1 )) .appendTo("#movieListBag");
    Энэ жишээнд би төсөв болон хураамжийн утгыг форматлахын тулд функцийн дуудлагуудыг ашигладаг боловч дэлхийн нэрийн орон зайг эмх замбараагүй болгохгүйн тулд тэдгээрийг параметрээр дамжуулсан. сонголтууд, үүний дараа эдгээр функцууд нь одоогийн загвар жишээний аргууд болох боломжтой болсон.

    Эцэст нь, загвар жишээ нь аргуудыг агуулдаг шинэчлэх()Тэгээд html(), хэрэглээг би доор харуулах болно.

    Эмхэтгэсэн загвар ямар харагддаг вэ? Уг аргыг ашиглан эмхэтгэсэн загвар ямар харагдахыг харж болно .template(), энэ нь зүгээр л загваруудыг эмхэтгэдэг. Энэ арга нь агуулгыг нь харахад хялбар функцийн объектыг буцаана:

    $("#compiledTemplateBag").text("" + $("#movieTmpl").template());
    Дээрх жишээнд ашигласан загвар эмхэтгэх үед дараах байдалтай харагдана (текстийг илүү сайн уншихын тулд форматласан):

    Нэргүй функц(jQuery, $item) ( var $ = jQuery, дуудлага, _ = , $data = $item.data; ($data) ( _.push(" "); хэрэв (төрөл (гарчиг) !== "тодорхойгүй" && (гарчиг) != null) ( _.push($.encode((төрлийн (гарчиг)) === "функц" ? (гарчиг) дуудлага( $ зүйл) : (гарчиг))) _.push(");

    Захирал: "); if (typeof (захирал) !== "тодорхойгүй" && (захирал) != null) ( _.push($.encode((typeof (захирал) === "функц" ? (захирал). call($item) : (захирал))) ) _.push(");
    Жүжигчид: "); if (typeof (жүжигчид) !== "тодорхойгүй" && (жүжигчид) != null) ( _.push($.encode((typeof (жүжигчид) === "function" ? (жүжигчид) . call($item): (жүжигчид))) _.push(");
    Он: "); if (typeof (жил) !== "тодорхойгүй" && (жил) != null) ( _.push($.encode((typeof (жил) === "function" ? (жил). call($item): (жил))) _.push(");

    "); ) буцах _;)
    Одоо та шошгонд заасан илэрхийллүүд хэрхэн боловсруулагдаж байгааг ойлгох хэрэгтэй гэж би бодож байна ${...} - мөн энэ ойлголт нь дибаг хийхэд тань ихээхэн тус болно! Бодит байдал ийм л байна jQuery загваруудзагвар текстийн харьцангуй энгийн хувиргалтыг гүйцэтгэдэг тул хэрэв та илэрхийлэлд алдаа гаргавал алдааны мэдэгдэл нь үүссэн функцын текстийг заах бөгөөд ихэвчлэн маш их төөрөгдүүлдэг.

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

    За, энэ бол ажлын тухай өгүүллэгийнх байх гэж бодож байна. jQuery загваруудҮүнийг дуусгаад практик хэрэглээ рүү шилжих нь зүйтэй.

    Хоёрдугаар хэсэг, практик нөхцөл Загварын хэсгүүдийг тодорхой нөхцлөөс хамааран хэрэглэхийн тулд jQuery загваруудхаягуудыг ашигладаг ((хэрэв))...((өөр))...((/хэрэв)).

    Доорх жишээнд эдгээр хаягуудын хэрэглээг харуулав (бүтэн жишээ код файлд байгаа IfElseTag.htm):

    Медиа: ((хэрэв $item.data.media == "dvd" бол)) ((өөрөөр бол $item.data.media == "цэнхэр туяа")) ((өөр)) ((/хэрэв))


    Таны таамаглаж байгаачлан энэ код нь киног байрлуулсан медиа дүрсийг харуулах зорилготой юм. Энэ нь хөтөч дээр хэрхэн харагдаж байна:

    Шошгонд байгаа нөхцөл байдлаар ((хэрэв))Тэгээд ((өөр))Та ямар ч хүчинтэй JavaScript илэрхийлэл ашиглаж болно.

    Цуглуулгыг боловсруулж байна Загвар дахь цуглуулгыг боловсруулахын тулд шошгыг ашиглана уу ((тус бүр))...((/тус бүр)). Доорх жишээ нь шошгоны хэрэглээг харуулж байна ((тус бүр))жүжигчдийн жагсаалтыг харуулах (бүтэн жишээ код файлд байна EveryTag1.htm):

    Жүжигчид: ((жүжигчин тус бүр)) $($ үнэ цэнэ) ((хэрэв $индекс< $data.actors.length - 1}} , {{/if}} {{/each}}

    Тэмдэглэх аргумент болгон ((тус бүр))та массив, объект, эсвэл дамжуулж болно jQuery- цуглуулга. Дотор шошго ((тус бүр))дуудлага ашигладаг jQuery.each()Иймээс баримт бичигт зан үйлийн талаар юу ч бичсэн байна jQuery.each()шошгоны хувьд ч бас үнэн ((тус бүр)). Доорх жишээ нь шошгоны хэрэглээг харуулж байна ((тус бүр))объектын бүх шинж чанарыг харуулах (бүтэн жишээ код файлд байна EveryTag2.htm):

    ((тус бүр $дата)) $($индекс) $($утга) ((/ тус бүр))
    Шошго дотор ((тус бүр))хоёр хувьсагч боломжтой: $ үнэ цэнэ, энэ нь одоогийн массив элементийн лавлагааг агуулсан ба $индекс, энэ нь одоогийн массив элементийн индекс эсвэл өмчийн нэрийг агуулдаг.

    Мэдээжийн хэрэг, шошгон дотор ((тус бүр))Та бусад шошго ашиглах боломжтой бөгөөд үүнээс гадна та хувьсагчдад хандах эрхтэй хэвээр байх болно $ зүйлТэгээд $ өгөгдөл. Өгөгдсөн жишээнд хувьсагчид $индексТэгээд $ өгөгдөлшошготой хамт ((хэрэв))нь жүжигчдийн нэрсийн хооронд таслал гаргахад хэрэглэгддэг - харамсалтай нь хувьсагч $ сүүлчийнЭнэ нь маш ашигтай байх байсан ч гэсэн өгөөгүй!

    Эцэст нь, хэрэв танд шаардлагатай бол анхдагч хувьсагчийн нэрийг өөрчилж болно. Доорх жишээнд эдгээр нэрсийг өөрчилсөн myIndexТэгээд myValue(бүтэн жишээ код файлд байна EveryTag3.htm):

    Жүжигчид: ((myIndex, myValue) жүжигчид тус бүр)) $(myValue) ((хэрэв myIndex бол)< $data.actors.length - 1}} , {{/if}} {{/each}}
    Дашрамд хэлэхэд зөвхөн хувьсагчийн нэрийг өөрчлөхийг оролдож байна $индексямар ч сайн зүйлд хүргэхгүй - ямар ч алдаа гарахгүй, гэхдээ та одоогийн үнэ цэнэд хандах боломжгүй болно!

    Суурилуулсан загварууд Загварууд нь маш том хэмжээтэй байж болох бөгөөд дараа нь тэдгээрийг хэд хэдэн жижиг хэсгүүдэд хуваах эсвэл тусдаа загвар болгон салгах логик давтагдах хэсгүүдийг оруулах нь зүйтэй юм. IN jQuery загваруудЭнэ нь үүрлэсэн загваруудыг ашиглан хийгддэг бөгөөд үүнийг таг ашиглан дууддаг ((tmpl)).

    Доорх жишээ нь загвар кодын нэг хэсгийг өөр загвар руу хэрхэн шилжүүлэхийг харуулж байна (бүтэн жишээ код нь файлд байгаа) NestedTemplates1.htm):

    ...

    Захирал: $(захирал)
    Жүжигчин: ((tmpl "#actorsTmpl"))
    Он: $(жил)

    ... ((жүжигчин тус бүр)) $($ үнэ цэнэ) ((хэрэв $индекс< $data.actors.length - 1}} , {{/if}} {{/each}}
    Шошгонд ((tmpl))заасан байх ёстой jQuery-дуудах загвар сонгогч эсвэл урьд нь кэшэд хадгалсан загварын нэр. Учир нь Энэ жишээн дээр шошгоны бусад аргументууд ((tmpl))Үгүй, үүрлэсэн загвар нь эцэг эхтэй ижил өгөгдлийн элементийг хүлээн авах болно - гэхдээ энэ нь өөрийн загвар болон талбартай байх болно. эцэг эхэнэ нь загварын эх жишээнд хамаарах болно.

    Дараах жишээ нь шинэ өгөгдлийн элементийг үүрлэсэн загвар руу дамжуулж, загварын эх жишээний лавлагааг ашиглаж байгааг харуулж байна. Энэ аргыг ашиглахтай адил .tmpl(), хэрэв та үүрлэсэн загварыг дуудахдаа массив зааж өгвөл уг загвар нь массивын элемент бүрт хэрэглэгдэх болно (бүтэн жишээ код нь файлд байгаа) NestedTemplates2.htm):

    ...

    Захирал: $(захирал)
    Жүжигчид: ((tmpl(жүжигчид) "# жүжигчдийн_загвар"))
    Он: $(жил)

    ... $($өгөгдөл) ((хэрэв $дата !== $item.parent.data.actors[$item.parent.data.actors.length - 1])) , ((/хэрэв))
    Эцэст нь, энэ хэсгийн сүүлчийн жишээ нь аргументыг үүрлэсэн загварт хэрхэн дамжуулахыг харуулж байна сонголтууд, мөн үүний зэрэгцээ аргумент болгон харуулж байна сонголтуудБоловсруулсан массивын сүүлчийн элементийг тодорхойлоход ашиглаж болно (бүтэн жишээ код файлд байна NestedTemplates3.htm):

    ...

    Захирал: $(захирал)
    Жүжигчид: ((tmpl(жүжигчид, (сүүлийн: жүжигчид)) "#жүжигчдийн_загвар"))
    Он: $(жил)

    ... $($өгөгдөл) ((хэрэв $өгөгдөл!== $item.last)) , ((/хэрэв))

    Өөрчлөлт Өөр нэг сонирхолтой боломж jQuery загварууднь HTML тэмдэглэгээний өөрчлөлттэй холбоотой бөгөөд үүнд шошгыг ашигладаг ((боодог))(Ерөнхийдөө боодол гэдэг нь "боодол" боловч "хувиргах" гэсэн нэр томъёо нь болж буй үйл явдлын мөн чанарыг илүү сайн тусгасан мэт санагдаж байна).

    Таг ашиглах сонгодог жишээ ((боодог))- энэ бол хавчуурга үүсгэх явдал юм:

    Дотор нь иймэрхүү харагдаж байна (бүтэн жишээ код нь файлд байгаа Transformation1.htm):

    ((wrap(null, (viewState: $item.viewState )) "#tabsTmpl")) Англи хэл The Ballad of East and West Rudyard Kipling

    Өө, Зүүн нь Зүүн, Баруун нь Баруун ...

    ((/боож))
    Өөрчлөлтийн анхны өгөгдлийг загварт байрлуулсан болно tabContent- Энэ бол миний цаашид хийх загвар юм.

    Миний хувиргах HTML тэмдэглэгээ нь шошго руу ордог ((боодог)). Шошгоны хувьд ((боодог))Тагийнхтай яг ижил дуудлагын тэмдэглэгээг ашигладаг {}}
    Хөтөч дээр энэ жишээ дараах байдалтай харагдана.

    Загваруудыг дуудлага болгонд хадгалдаг $("#...").tmpl(...)Энэхүү загварыг эмхэтгэсэн бөгөөд орчин үеийн хөтчүүдэд JavaScript-ийн хурд эрс нэмэгдсэн ч гүйцэтгэлд маш сөрөг нөлөө үзүүлж болзошгүй юм. Хөгжүүлэгчид jQuery загваруудэнэ илэрхий баримтыг үл тоомсорлож чадахгүй байсан тул in jQuery загваруудЗагваруудыг урьдчилан эмхэтгэх, кэш хийх механизмыг хангасан.

    Загварыг дараах байдлаар эмхэтгэж, кэшлэв.

    $("#movieTmpl").template("movieTmpl");
    Эмхэтгэсэн загвар нь дотоод кэшэд хадгалагдана jQuery загварууднэрийн дор movieTmpl. Кэштэй загварт хандахын тулд аргыг ашиглана уу jQuery.tmpl(), эхний параметр нь кэштэй загварын нэр юм:

    $.tmpl("movieTmpl", dataItems).appendTo("#movieListBag");
    Доорх жишээ нь киноны тухай мэдээллийг харуулахын тулд кэш загвар ашиглан кинонуудын жагсаалтыг харна.

    Загварын код нь миний өмнө ашиглаж байсан кодуудаас бараг ялгаатай биш бөгөөд цорын ганц ялгаа нь киноны тайлбарын доор навигацийн нэмэлт холбоосууд байдаг (бүтэн жишээ код нь файлд байгаа) CachedTemplates.htm):

    $(гарчиг)

    Захирал: $(захирал)
    Жүжигчид: $(жүжигчид)
    Он: $(жил)

    ((хэрэв $item.canMoveBack бол)) [Буцах]((/хэрэв)) ((хэрэв $item.canMoveFwd бол)) [Урагшаа]((/хэрэв))
    Дагалдах скрипт нь бас энгийн:

    Var movieIndex = 0; $(функц () ( $("#movieTmpl").template("movieTmpl"); updateMovie(); $("#movieBag").delegate(".nav-link", "click", функц () () movieIndex += parseInt($(энэ).attr("x-inc") updateMovie()); функц updateMovie() ( $("#movieBag").empty(); $("#movieBag").append($.tmpl("movieTmpl", dataItems, ( canMoveBack: movieIndex > 0, canMoveFwd: movieIndex)< dataItems.length - 1 })); }
    Навигацийн холбоосыг дарах зохицуулагч нь сонгосон киноны индексийг өөрчилж, дараа нь функцийг дууддаг updateMovie(), энэ нь эхлээд киноны тайлбарын савыг цэвэрлэж, дараа нь шинэ мэдээллээр дүүргэдэг.

    Энэ жишээ хөтөч дээр хэрхэн харагдаж байгааг энд харуулав.


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

    Гэхдээ загварыг тусдаа файлд байрлуулж болох бөгөөд энэ нь шууд утгаараа нэг нэмэлт мөр кодыг шаардах болно (бүтэн жишээ код нь файлд байгаа):

    $(функц () ( $.get("Templates/DynamicLoading.htm", (), функц (templateBody) ( $.tmpl(templateBody, dataItems).appendTo("#movieListBag"); )); ));
    Учир нь энэ тохиолдолд бид загварыг текст хэлбэрээр хүлээн авдаг jQuery.tmpl(), эхний аргумент нь хүлээн авсан загвар текст юм.

    Тийм ээ, арга jQuery.tmpl()нь кэшэд хадгалагдсан загваруудыг нэрээр нь болон текст (уламжлал!..) гэж тодорхойлсон загваруудыг хоёуланг нь үүсгэхэд ашиглагддаг - гэхдээ энэ нь тэдгээрийг бие биенээсээ ялгахад хангалттай "ухаалаг" юм.

    Хэрэв та олон холбогдох загваруудыг ачаалах шаардлагатай бол номын санг ашиглаж болно WaitSync("Асинхрон дуудлагыг синхрончлох. WaitSync" хэсгийг үзнэ үү) эсвэл өөрийн синхрончлогчийг бичнэ үү (бүтэн жишээ код файлд байгаа):

    $(функц () ( var ws = шинэ WaitSync(функц () ( $.tmpl("movieTmpl", dataItems).appendTo("#movieListBag"); )); $.ajax(( кэш: худал, url: " Templates/MovieTmpl.htm", амжилт: ws.wrap("MovieTmpl", функц (templateBody) ( $.template("movieTmpl", templateBody); )), алдаа: ws.wrap("MovieTmpl", функц () () alert("MovieTmpl.htm-г ачаалахад алдаа гарлаа!" )) )); ( $.template("actorsTmpl", templateBody); )), алдаа: ws.wrap("ActorsTmpl", функц () ( alert("ActorsTmpl.htm-г ачаалахад алдаа гарсан!"); )) ));
    Энэ тохиолдолд загвар гэдгийг анхаарна уу жүжигчидTmplнэрээр нь дууддаг (файл Templates\MovieTmpl.htm):

    Захирал: $(захирал)
    Жүжигчид: ((tmpl(жүжигчид, (сүүлийн: жүжигчид)) "actorsTmpl"))
    Он: $(жил)

    Динамик шинэчлэл Практик хэсгийн сүүлчийн хэсэгт би ажлын хоёр хувилбарыг харуулах болно jQuery загварууд- холбогдох өгөгдлийг өөрчлөх, холбогдох загварыг солих.

    Доорх жишээнд кино бүрийн үнэлгээг өөрчлөх боломжийг нэмсэн (бүтэн жишээ код нь файлд байгаа) DynamicUpdate1.htm):

    ...
    Холбоотой код:

    $(функц () ( $("#movieTmpl").tmpl(dataItems).appendTo("#movieListBag"); $("#movieListBag").delegate(".rating-button", "click", function ( ) ( var item = $.tmplItem(энэ); item.data.rating += parseInt($(энэ).attr("x-inc")); item.update(); ));
    Таны харж байгаагаар энэ код нь "Хувиргах" хэсгийн хавчуургын кодтой маш төстэй бөгөөд зөвхөн хавчуургатай ажиллах үед би хуваалцсан объект руу хандсан. харах төлөв, энд би загвар жишээтэй холбоотой өгөгдөлтэй ажиллаж байна.

    Хөтөч дээр энэ жишээ дараах байдалтай байна.

    Дараах жишээ нь холбосон загварыг орлуулахыг харуулж байна (бүтэн жишээ код нь файлд байна DynamicUpdate2.htm):

    ((tmpl "#movieMainTmpl"))

    [Дэлгэрэнгүй...]

    ((tmpl "#movieMainTmpl"))

    Киноны хэсгээс:

    ((хүрээ тус бүр)) ((/ тус бүр))

    [Бага...]


    Энд би хоёр загвар ашиглаж байна, movieShortTmplТэгээд movieFullTmpl, ерөнхий хэсгийг загварт оруулсан болно movieMainTmpl.

    Холбоотой код:

    $(функц () ( var shortTemplate = $("#movieShortTmpl").template("shortTemplate"); var fullTemplate = $("#movieFullTmpl").template(); $.tmpl("shortTemplate", dataItems). appendTo("#movieListBag"); $("#movieListBag").delegate(".more-details", "click", function () ( var item = $.tmplItem( this); item.tmpl = item.tmpl === shortTemplate fullTemplate item.update());
    Энэ код нь нэмэлт тайлбар шаарддаг гэж би бодож байна.

    Загварыг солихын тулд эмхэтгэсэн загвар руу линк хэрэгтэй. Би эдгээр холбоосыг дуудлага ашиглан авдаг .template(). Үүнээс гадна, учир нь дээж богино загварХуудсыг ачаалсны дараа киноны жагсаалтыг гаргахад ашигладаг бөгөөд би үүнийг кэшэд хадгалдаг тул нэрээр нь үүсгэж болно.

    Хөтөч дээр энэ жишээ дараах байдалтай байна.

    Дүгнэлт Нийтлэлд ашигласан жишээнүүдийн кодыг энэ холбоосоос татаж авах боломжтой.

    Татаж авах jQuery загваруудТа ASP.NET CDN вэб сайтаас эсвэл GitHub репозитороос шууд хийж болно:
    Брайан Ландау "Javascript Templating Libraries харьцуулалт".

    Төгсгөлд нь би нийтлэл дээр ажиллаж байхдаа үнэ цэнэтэй сэтгэгдэл үлдээсэн Виталий Дилмухаметов, Денис Гладких нарт талархаж байгаагаа хэлмээр байна.

    Шошго: шошго нэмэх

    2010 оны 10-р сарын 4-нд Microsoft-ын багийн дэмжлэгтэйгээр бүтээсэн jQuery-ийн гурван нэмэлт өргөтгөлийн зарлал хэвлэгдсэн. Эдгээр залгаасууд болох jQuery Templates залгаас, jQuery Data Link залгаас, jQuery даяаршлын залгаасууд нь "jQuery төслийн албан ёсны дэмжигдсэн залгаасууд" гэж томилогдсон.

    Загварын залгаасыг хуудасны тэмдэглэгээнд өгөгдлийн объект эсвэл массив объектыг харуулах шаардлагатай үед ашигладаг. Өгөгдөл холбох залгаас нь объектуудыг хуудасны элементүүдтэй холбож, утгыг синхроноор өөрчлөхөд шаардлагатай. Даяаршлын залгаас нь тоо, огноо, цаг, мөнгөний хэмжээ гэх мэт өгөгдлийг тухайн хэлний форматын дагуу хуудсан дээр харуулах боломжийг олгодог.

    Microsoft-ын баг jQuery төслийн багийн нэгэн адил эдгээр чиглэлээр ихээхэн туршлагаа ашигласан бөгөөд сайн харилцан үйлчлэлцсэнээр миний бодлоор хөгжүүлэгчдэд маш сайн хэрэгсэл болсон гэдгийг тэмдэглэх нь зүйтэй. Миний бодлоо батлахын тулд jQuery-ийн хөгжүүлэгчид 1.5 хувилбар дээр байгаа jQuery-ийн үндсэн номын санд загвар болон өгөгдөл холбох залгаасууд, мөн jQuery UI-ийн холбогдох хувилбарт даяаршлын залгаасууд орсон тухай зарласан гэдгийг нэмж хэлье. Плагинууд хувилбарын статусыг хараахан хүлээж аваагүй байгаа ч баримт бичгийг аль хэдийн сайт дээр идэвхтэй бичиж байна. Дашрамд хэлэхэд, Microsoft-ын баг jQuery хөгжүүлэлтийн уламжлалыг дагаж, залгаасын хөгжүүлэлтийн талаархи материалыг github.com дээр байрлуулсан бөгөөд залгаасын тайлбар, эх кодыг авах боломжтой.

    Энэ нийтлэлд би загвар залгаасын талаар бага зэрэг ярих болно.

    jQuery Templates залгаас

    Энгийн жишээгээр эхэлцгээе:

  • $(Нэр) ($(ReleaseYear))
    • var movies = [ (Нэр: "Улаан хийл", Гарсан жил: "1998"), (Нэр: "Нүдээ өргөн аниад", Гарсан жил: "1999"), (Нэр: "The Heritance", ReleaseYear: "1976") ]; $("#movieTemplate").tmpl(кино) .appendTo("#movieList");

    Тиймээс, жишээн дээр хуудас хөгжүүлэгч объектуудыг тэмдэглэгээ хэлбэрээр харуулах загварыг тайлбарласан (эхний элемент) скрипт), дараа нь би хаа нэгтээгээс олон объект авсан кинонуудЗагварын дагуу шаардлагатай тэмдэглэгээг үүсгэх зааврыг дуудаж, өгөгдсөн объектын массиваас өгөгдлийг авч, үр дүнг жагсаалтын төгсгөлд нэмэх #кино жагсаалт .
    Залгаасыг ажиллуулсны үр дүнд бид дараах тэмдэглэгээг авах болно.

    • Улаан хийл (1998)
    • Нүдээ өргөн аниад (1999)
    • Өв залгамжлал (1976)

    Тэгээд одоо асуултын мөн чанарт оръё.
    Plugin юу хийдэг вэ?
    Plugin нь форматтай мөр (эсвэл тэмдэглэгээ) руу гаргах шаардлагатай объектуудын багц (эсвэл нэг объект) загвар мөрийг оролт болгон хүлээн авдаг.
    Үүнийг хаана хэрэглэх вэ?
    Энэ залгаас нь ихэвчлэн JS объектуудыг хуудсан дээр динамикаар харуулахад тустай, жишээлбэл, тооцооллын явцад эсвэл хэрэглэгчийн зарим үйлдлийн үр дүнд олж авах боломжтой бөгөөд мэдээжийн хэрэг хамгийн их дурдагдсан жишээ нь: AJAX хүсэлтийн серверийн хариуд JSON хэлбэр .

    Plugin аргууд

    .tmpl([ өгөгдөл ], [ сонголт ])
    Эхний сонгосон элементийн агуулгыг авч, заасан өгөгдлийн форматтай гаралтын загвар болгон ашигладаг.
    өгөгдөл– загварт гаргах өгөгдөл (объект эсвэл объектын массив).
    сонголтууд– загвар дахь гаралтын объектын түлхүүр-утга хос хэлбэрээр хэрэглэгчийн тодорхойлсон нэмэлт өргөтгөл.
    jQuery.tmpl(загвар, [ өгөгдөл ], [ сонголт ])
    Заасан өгөгдлийн форматтай гаралтыг гаргахын тулд заасан загварыг ашигладаг.
    загвар– Өгөгдлийг форматлах загвар нь дараах төрлүүдийн аль нэг байж болно: тэмдэглэгээтэй мөр, HTML элемент (jQuery боодолд багтсан), өмнө нь эмхэтгэсэн загварын нэрэнд тохирох мөр.
    өгөгдөл, сонголтууд- дээрхтэй ижил утгатай
    .tmplItem()
    Загварын хөдөлгүүрийн үр дүнгийн хамт эхний сонгосон элементийн бүтцийг (объект) буцаана. Аргын дагуу буцаасан объект нь дараах хандалтыг олгодог:

    • Загварыг бүрдүүлдэг HTML хэсгүүд
    • холбогдох дамжуулагдсан өгөгдлийн нэгж
    • одоогийн загвар нь үүрлэсэн бол эх загвар руу
    • гаралтад ашигласан одоогийн загвар
    • tmpl() аргын сонголтуудын параметрт шилжсэн хэрэглэгчийн тодорхойлсон өргөтгөл (талбар ба аргууд)

    Энэ аргыг жишээлбэл, өгөгдлийг форматласны дараа тодорхой тэмдэглэгээ үүсгэх эсвэл шинэ өгөгдөл ашиглан тэмдэглэгээг шинэчлэхэд ямар өгөгдөл ашигласан болохыг олж мэдэх шаардлагатай үед ашигладаг.
    jQuery.tmplItem(элемент)
    .tmplItem аргатай адил зөвхөн загвар хөдөлгүүрийн үр дүн бүхий бүтцийг тухайн элементийг хайдаг. бүрэлдэхүүн(HTML элемент, үүнд jQuery ороосон).
    .template([ нэр ])
    Энэ арга нь эхний сонгосон элементийн агуулгаас форматлах загварын хөрвүүлсэн хувилбарыг гаргадаг.
    нэр- нэмэлт загварын нэр, хэрэв нэрийг нь зааж өгсөн бол та үүнийг ашиглан энэ загварт ямар нэгэн аргаар хандах боломжтой. jQuery.tmpl(нэр, өгөгдөл, сонголт)
    jQuery.template([нэр, ] загвар)
    Арга нь дээр дурдсантай төстэй бөгөөд зөвхөн энд загварыг параметр болгон дамжуулдаг загвар– энэ нь мөр, тэмдэглэгээтэй мөр, HTML элемент (jQuery боодолд багтсан) байж болно.

    Загварын синтакс

    Би загварын хэд хэдэн үндсэн элементүүдийг товч тайлбарлах болно (хэрэв энэ нийтлэлд эерэг хариулт байвал)
    $(fieldNameOrExpression) ба ((= fieldNameOrExpression))
    Загварт өгөгдлийн объектын талбарын утгыг оруулах боломжийг олгоно. Энэ нь мөн аргын үр дүн эсвэл js илэрхийлэлийг оруулахад ашиглагдана. Жишээлбэл, "$(Нэр)"– загварт obj.Name талбарын утгыг оруулах бөгөөд Languages ​​нь массив хуваарилагдсан объектын талбар гэдгийг харгалзан үзвэл, "$(Languages.length)"- энэ массивын уртыг загварт оруулах ба эцэст нь хэрэв объект нь хоёр параметр бүхий getLanguages ​​аргатай бол, дараа нь “$(getLanguages(Languages, ‘ – ‘))”– энэ аргын үр дүнг загварт оруулна.
    ((html талбарНэр эсвэл илэрхийлэл))
    Загварын элемент $(талбар) (эсвэл ((= талбар))) үр дүнд нь заасан талбарын утгыг текст хэлбэрээр оруулна. Хэрэв мөрөнд HTML шошго байгаа бол тэдгээрийг тэмдэглэгээ рүү хөрвүүлэхийн оронд кодчилно. Хэрэв та HTML тэмдэглэгээ хэлбэрээр загварт өгөгдөл оруулах шаардлагатай бол синтакс ашиглах хэрэгтэй. ((html)) .
    Plugin-ийг эхлүүлэхийн тулд би энэ талаар хангалттай хэлсэн, би зөвхөн загвар синтакс нь үүрлэсэн загвар, нөхцөлт зааврыг оруулах, JS болон jQuery объектуудад хандах болон бусад зүйл хийх боломжийг олгодог гэдгийг л нэмж хэлье... Үлдсэн хэсэг нь материаллаг юм. ирээдүйн нийтлэлийн хувьд.

    Эх сурвалжууд

    Нийтлэлийг World Wide Web-ээс олдсон материалд үндэслэн бичсэн. Энэ нь үндсэндээ албан ёсны баримт бичгийн орчуулга юм. Эх хувийг дараах холбоосоор үзэх боломжтой.

    • (жишээг тэндээс авсан)
    Зохиогчийн Тухай

    Намайг Андрей Зайцев гэдэг, zandroid форум дээрх профайл

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

    Жишээ

    Жишээ 1: Хэрэглэсэн загварыг динамикаар солих

    хүснэгт ( курсор: заагч; хилийн уналт: нурах; хүрээ: 2 пикселийн цул хөх; өргөн: 300 пиксел; зах: 8 пиксел; ) хүснэгт tr ( хүрээ: 1 пикселийн цул хөх; өнгө: цэнхэр; дэвсгэр өнгө: # f8f8f8; ) хүснэгт td ( padding:3px; ) table tr:hover ( өнгө:улаан; ) .movieDetail ( арын өнгө:шар; ) .movieDetail.row1 ( хүрээ-доод: байхгүй; ) .movieDetail.row2 ( хүрээ-дээд: байхгүй; ) $(Нэр) $(Нэр)$(ReleaseYear)Захирал: $(Захирал)Дэлгэрэнгүйг дарж үзнэ үү:

    var movies = [ (Нэр: "Улаан хийл", Гарсан жил: "1998", Найруулагч: "Франсуа Жирард" ), (Нэр: "Нүдээ аниад", Гарсан жил: "1999", Найруулагч: "Стэнли Кубрик" ), (Нэр: "Өв залгамжлал", ReleaseYear: "1976", Найруулагч: "Мауро Болонинини" ) ]; var selectedItem = null; /* Хураангуй Загварыг "кино" өгөгдлөөр үзүүлэх */ $("#summaryTemplate").tmpl(movies).appendTo("#movieList"); /* Дүгнэлт эсвэл дэлгэрэнгүй загварыг ашиглан киноны загвар зүйлсийн onclick зохицуулагчийг нэмнэ үү */ $("#movieList") .delegate(".movieSummary", "click", function () ( if (selectedItem) ( // Загвар тохируулах) өмнө нь сонгосон зүйл дээр // хураангуй загвар руу буцах selectedItem.tmpl = $("#summaryTemplate").template(); , мөн үүнийг сонгосон зүйл болгох */ selectedItem = $.tmplItem(энэ); (); )).delegate(".movieDetail", "click", function () ( /* Энэ зүйл дээрх загварыг хураангуй загварт тохируулна уу */ selectedItem.tmpl = $("#summaryTemplate").template () ; selectedItem.update();

    Нэлээд төвөгтэй бөгөөд том хэмжээтэй, энэ нь хэд хэдэн залгаасын аргыг нэгэн зэрэг ашигладаг.

    Жишээ 2: Загварт тэмдэглэгээтэй өгөгдөл оруулах

    .role (фонтын жин:bold;фонтын хэв маяг: налуу;) #movieContainer (зүүн талд дүүргэх: 8px;) $(Нэр)

    ((html товчлол))

    /* Synopsis өгөгдлийн талбар нь HTML тэмдэглэгээг агуулна. */ var movie = (Нэр: "Жо Блэктэй танилцаарай", Ерөнхий агуулга: "Харгис хэрцгий хүн (Брэд Питт) Билл Парриш (Энтони Хопкинс) дээр зочиллоо..." ); /* Загварыг киноны өгөгдөлтэй хамт буулгана. Загвар нь Synopsis HTML тэмдэглэгээний өгөгдлийг оруулахын тулд ((html)) загварын шошгыг ашигладаг. */ $("#movieTemplate").tmpl(кино) .appendTo("#movieContainer");

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

    P.S.

    Би жишээнүүдийг тайлбарлаагүй ч үзэгчид миний санаачилгыг дэмжвэл би юуг, яаж, яагаад алхам алхмаар тайлбарлаж, өөр хэдэн жишээ хэлье.

    Хэлэлцүүлэг дээрх залгаасын талаар асуулт асууна уу, хэрэв нийтлэлд тусгайлан бичсэн сэтгэгдэл байвал доор тайлбар бичнэ үү.

    Төрөл бүрийн хөдөлгөөнт эффект бүхий үгсийг өөрчлөхөд зориулсан залгаас. CSS эффект нь сурталчилгааны сайтууд болон хөдөлгөөнт баннеруудыг хэрэгжүүлэхэд тохиромжтой.

    Хөдөлгөөнт CSS3 эффект ашиглан хуудасны агуулгыг таб болгон хуваах хэрэгжилт. Загварын дөрвөн сонголт: янз бүрийн хөдөлгөөнт эффект бүхий хэвтээ ба босоо таб.

    3. IMPRESS.JS залгаас дээр суурилсан дасан зохицох jQuery гулсагч

    Слайдуудыг гүйлгэх үед 3D эффектийг дуурайдаг сэрүүн гулсагч. Дэлгэцийн хэмжээг нэмэгдүүлэх/багасгах үед фонтын хэмжээ, зураг болон слайд дээрх бүх элементүүд өөрчлөгддөг бөгөөд энэ нь ямар ч дэлгэцийн хэмжээгээр зөв харуулах баталгаа болдог. Автомат гүйлгэх боломжтой.

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

    Маягт дахь агуулгын навигацыг хэрэгжүүлэх Ангиллын жагсаалт → Хэсгийн жагсаалт → Хэсгийн агуулга. Навигац нь янз бүрийн JS эффектүүд дагалддаг.

    Слайдуудыг гүйлгэх нь Параллакс эффектээр хийгддэг (давхаргыг өөр өөр хурдтайгаар хөдөлгөж, хамтдаа 3D эффект үүсгэдэг). Слайдерын хэмжээ нь хөтчийн цонхны хэмжээтэй пропорциональ өөрчлөгддөг.

    Хөгжмийн дагалдан слайд шоу. Хөгжмийн зохиолыг түр зогсоох эсвэл алгасах боломжтой.

    11. jQuery болон CSS ашиглан өвөрмөц цэс

    Цэсийн зүйлийг сонгоход түүний агуулга бүхий хэсэг дээд талд нь өргөснө.

    Оруулсан зүйлсийн сонирхолтой jQuery эффект бүхий хэвтээ унждаг цэс.

    Гайхалтай jQuery CSS залгаас нь ямар ч вэб студи эсвэл фрилансерийн вэбсайтад маш хэрэгтэй нэмэлт хэрэгсэл болно. Үүний тусламжтайгаар та дууссан ажлын жишээг цаг хугацаагаар нь тодорхой харуулах боломжтой. Хугацаа нь өөрөө доод талд, дууссан ажил нь дээд талд харагдана. Ажлын хооронд шилжихийн тулд та масштаб болон зүүн/баруун сумыг хоёуланг нь ашиглаж болно.

    14. "TouchTouch" галерей, гар утасны төхөөрөмжөөс үзэхэд оновчтой 15. CSS3 зургийн гулсагч "Циклийн гулсагч"

    Нэр дээр дарахад тайлбар бүхий зураг гарч ирнэ. Зөвхөн CSS3 ашигладаг.
    Галерей үүсгэх хичээл.

    17. Сайхан, өнгөлөг jQuery болон CSS3 зөвлөмжүүд

    jQuery-н 7 загварын зөвлөмжүүд. Төсөлдөө холбогдох, ашиглахад хялбар.

    Хэрэв галерейд 5-аас дээш зураг байгаа бол зүүн/баруун сумнууд зурагнуудын дундуур шилжинэ.

    Слайд нь зөвхөн зураг төдийгүй бусад HTML контент байж болно.

    Фото бодит сүүдэр үүсгэх залгаас.

    Слайдерын шинэ хэрэгжилт.

    26. "Гахайн мах" гэсэн бичвэрийг боож өгнө.

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

    Plugin нь үг бүрийн үсгийн хэмжээг автоматаар тооцдог бөгөөд ингэснээр мөрөнд байгаа үгийн тооноос үл хамааран бүх текст ижил өргөнийг эзэлдэг.

    28. CSS3 ашиглан блок дэлгэцийн төрлийг сонгох

    Дөрвөн төрлийн блок дэлгэц: гурван баганад тайлбар бүхий зураг, нэг баганад тайлбар бүхий зураг, зөвхөн зураг, зөвхөн текстийн тайлбар. Блокуудын дэлгэцийн төрлийг өөрчлөхийн тулд та дээд талд байгаа дүрсүүдийг ашиглах хэрэгтэй.

    Өгөгдлийн хэв маягийн талаар сурч эхлэх хамгийн сайн арга бол тэдэнтэй шууд ажиллаж эхлэх явдал юм. Загваруудын үндсэн боломжуудыг харуулав. Бид скрипт элементийг ашиглан загваруудыг хэрхэн тохируулдаг учраас би энэ жагсаалтад бүрэн HTML баримт бичгийг оруулсан боловч дараагийн жишээнүүдэд холбогдох элементүүдийг харуулах болно.

    Жагсаалт 12-3: Өгөгдлийн загварын эхний жишээ Жишээ $(document).ready(function () ( var data = [ ( нэр: "Astor", бүтээгдэхүүн: "astor", stocklevel: "10", үнэ: 2.99 ) , (нэр: "Daffodil", бүтээгдэхүүн: "daffodil", нөөцийн түвшин: "12", үнэ: 1.99 ), (нэр: "Rose", бүтээгдэхүүн: "rose", нөөцийн түвшин: "2", үнэ: 4.99 ), ( нэр: "Цээнэ цэцэг", бүтээгдэхүүн: "цээнэ цэцэг", нөөцийн түвшин: "0", үнэ: 1.50 ), (нэр: "Примула", бүтээгдэхүүн: "примула", нөөцийн түвшин: "1", үнэ: 3.12 ), (нэр: "Цасан ширхгүүд ", бүтээгдэхүүн: "цасан ширхгүүд", нөөцийн түвшин: "15", үнэ: 0.99 ), ]); $(нэр): Жакигийн цэцгийн дэлгүүрт захиалга өгнө

    Дараах хэсгүүдэд би жишээг задалж, хэсэг бүрийг тайлбарлах болно. Хэрэв өгөгдөл нь баримт бичгийн нэг хэсэг бол үүнийг гэж нэрлэдэг суулгагдсан өгөгдөл. Альтернатив хувилбар нь устгасан өгөгдөл, энэ нь та серверээс өгөгдлийг баримтаас тусад нь хүлээн авах үед юм. Бид энэ бүлгийн дараа алсын мэдээллийн талаар ярих болно, гэхдээ энэ нь 14, 15-р бүлгийн сэдэв болох jQuery-ийн Ajax-д үзүүлэх дэмжлэгийн талаар хөндөх болно.

    Өгөгдлийн тодорхойлолт

    Жишээний эхлэлийн цэг нь өгөгдөл бөгөөд энэ тохиолдолд объектуудын массив бөгөөд тус бүр нь цэцгийн үйлдвэрлэлийн тусдаа нэгжийг тодорхойлдог. B нь баримтаас харгалзах илэрхийллийг харуулж байна.

    Жагсаалт 12-4: Өнгөний өгөгдлийг тодорхойлох нь var data = [ (нэр: "Astor", бүтээгдэхүүн: "astor", stocklevel: "10", үнэ: 2.99 ), (нэр: "Daffodil", бүтээгдэхүүн: "daffodil", stocklevel : "12", үнэ: 1.99 ), (нэр: "Сарнай", бүтээгдэхүүн: "сарнай", нөөцийн түвшин: "2", үнэ: 4.99 ), (нэр: "Цээнэ цэцэг", бүтээгдэхүүн: "Цээнэ цэцэг", нөөцийн түвшин: " 0", үнэ: 1.50 ), (нэр: "Примула", бүтээгдэхүүн: "примула", нөөцийн түвшин: "1", үнэ: 3.12 ), (нэр: "Цасан дусал", бүтээгдэхүүн: "цасан дусал", нөөцийн түвшин: "15 " , үнэ: 0.99 ), ];

    Та өгөгдлөө нэг буюу хэд хэдэн JavaScript объект хэлбэрээр илэрхийлдэг. jQuery загварын номын сан нь өгөгдөл болгон ашиглаж болох объектын төрлүүдийн хувьд маш уян хатан байдаг ч загварт үзүүлсэн формат нь JSON өгөгдлийн форматыг дагаж мөрддөг тул би үүнийг 14-р бүлэгт авч үзэх болно.

    Зөвлөгөө

    JSON нь ихэвчлэн Ajax-тай хэрэглэгддэг тул чухал бөгөөд үүнийг би 14, 15-р бүлэгт авч үзэх болно.

    Энэ жишээнд массив нь цэцгийн дэлгүүрийн бүтээгдэхүүнийг дүрсэлсэн шинж чанаруудтай зургаан объектыг агуулна: дэлгэцийн нэр, бүтээгдэхүүний нэр, бараа материалын хэмжээ (боломжтой тоо хэмжээ), үнэ.

    Загварын тодорхойлолт

    Таны төсөөлж байгаагаар өгөгдлийн загвар номын сангийн гол цөм нь өгөгдлийн загвар юм. Энэ нь өгөгдлийн объектын талуудтай тохирох орлуулагчийг агуулсан HTML элементүүдийн багц юм. B нь энэ жишээний загварыг харуулж байна.

    Жагсаалт 12-5: Өгөгдлийн загварыг тодорхойлох $(бүтээгдэхүүн).png" /> $(нэр) :

    Загварын талаар анхаарах хамгийн эхний зүйл бол энэ нь text/x-jquery-tmpl гэсэн төрлийн шинж чанарын утгатай скрипт элемент дотор агуулагдаж байгаа явдал юм. Хөтөч нь загварын агуулгыг ердийн HTML гэж тайлбарлахгүйн тулд бид үүнийг хийдэг. Энэ нь бүрэн шаардлагагүй, гэхдээ энэ нь сайн туршлага бөгөөд олон болзошгүй асуудлаас зайлсхийхэд тусална.

    Анхаарах хоёрдахь зүйл бол скрипт элементэд загвар тодорхойлохдоо id атрибутыг ашиглан загварт нэр өгөх болно. Манай тохиолдолд загварыг flowerTmpl гэж нэрлэдэг. Өгөгдөлдөө хэрэглэхдээ загварын нэрийг мэдэх шаардлагатай.

    Загварын агуулгыг өгөгдлийн массив дахь объектуудад тус тусад нь HTML элементийн багц үүсгэхийн тулд ашиглах болно. Загварын бүтэц нь өмнөх бүлгүүд дэх цэцгийн бүтээгдэхүүнд ашигласан элементүүдийн багцтай таарч байгааг харж болно. Гол ялгаа нь мэдээжийн хэрэг жагсаалтад миний онцолсон кодын хэсгүүдэд оршдог. Ийм л байна өгөгдөл орлуулагч.

    Загварын номын сан загварыг боловсруулахдаа аливаа өгөгдөл орлуулагчийг ажиллаж байгаа объектын өмчийн утгуудаар сольдог. Жишээлбэл, загвар номын сан нь массив дахь эхний объектыг $(бүтээгдэхүүн) гэсэн шошготой холбож, бүтээгдэхүүний нэгжийн шинж чанараар солих болно, өөрөөр хэлбэл энэ тохиолдолд astor . Энэ нь загварын хэсэг юм:

    $(бүтээгдэхүүн).png"/>

    энэ болгон хувиргав:

    astor .png"/>

    Өгөгдлийн утгыг оруулах нь загвар ашиглан хийж болох зүйлсийн нэг юм. Би энэ бүлгийн дараа бусад боломжуудын талаар тайлбарлах болно.

    Загвар хэрэглэж байна

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

    Жагсаалт 12-6: $("#flowerTmpl").tmpl(өгөгдөл).appendTo("#row1");

    Би jQuery $ функцийг ашиглан загвар агуулсан элементийг сонгоод үр дүнд нь tmpl аргыг дуудаж, боловсруулахыг хүссэн өгөгдлөө аргумент болгон дамжуулдаг.

    Tmpl арга нь загвараас олж авсан элементүүдийг агуулсан стандарт jQuery объектыг буцаана. Манай тохиолдолд би үүнийг өгөгдлийн массивын аль нэгэнд зориулж боловсруулсан img, шошго, оролтын элемент агуулсан олон тооны div элементүүдээр дуусгадаг. Би 1-р эгнээнд хүүхдийн бүрэн багцыг оруулахын тулд appendTo аргыг ашиглаж байна. Үр дүнг эндээс харж болно.

    Зураг 12-2: Өгөгдлийн загвар ашиглах Үр дүнг тохируулах

    Бүх бүтээгдэхүүн нэг мөрөнд байрладаг тул бид хүлээж байсан үр дүнгээ бүрэн авч чадаагүй. Гэхдээ бид jQuery объекттой ажиллаж байгаа тул элементүүдтэй өмнө нь хийж байсан зүйлээ хийж болно. Энэ нь tmpl аргын үр дүнг ашиглан үүнийг хэрхэн хийж болохыг харуулж байна.

    Жагсаалт 12-7: $("#flowerTmpl").tmpl(өгөгдөл) .slice(0, 3).appendTo("#row1").end().end().slice() загвараас олж авсан үр дүнг боловсруулж байна. 3 ).appendTo("#мөр2"); ))) $(нэр):

    Энэ жишээн дээр би зүсмэл болон төгсгөлийн аргуудыг ашиглан сонголтыг нарийсгаж, өргөжүүлэх, appendTo аргыг загвараас үүсгэсэн элементүүдийн дэд олонлогуудыг өөр эгнээнд нэмэхэд ашигладаг.

    Зүсмэл болон appendTo аргуудаас үүдэлтэй сонголтыг нарийсгах ажлыг хийхийн тулд би төгсгөлийн аргыг хоёр дараалан дуудах шаардлагатай болсон гэдгийг анхаарна уу. Энэ нь маш их ажиллагаатай бөгөөд би ерөнхийдөө нэг өгүүлбэрт команд үүсгэхийн тулд төгсгөлийн аргыг ашиглах дуртай боловч end().end() дараалалд үнэхээр дургүй. Үүний оронд би ихэвчлэн ийм дарааллыг -д үзүүлсэн шиг тусад нь команд болгон хуваадаг.

    Жагсаалт 12-8: Олон илэрхийлэл ашиглан элементүүдийг салгах var templResult = $("#flowerTmpl").tmpl(өгөгдөл); templResult.slice(0, 3).appendTo("#row1"); templResult.slice(3).appendTo("#row2");

    Ямар ч тохиолдолд та ижил үр дүнг авах болно, өөрөөр хэлбэл бүтээгдэхүүн нь зурагт үзүүлсэн шиг тус бүр нь гурван цэцэг агуулсан хоёр эгнээнд хуваагдана.

    Зураг 12-3: Байршилд тохируулан үр дүнг тохируулах
    Өгөгдөл оруулах залруулга

    tmpl арга руу дамжуулсан өгөгдлийг засах өөр аргыг ашиглаж болно. Үүнийг хэрхэн хийж болохыг харуулж байна.

    Жагсаалт 12-9: $(document).ready(function () ( var data = [ ( нэр: "Astor", бүтээгдэхүүн: "astor", stocklevel: "10", үнэ: 2.99 загвараас үр дүнг тохируулахын тулд өгөгдлийг ашиглах. ) , (нэр: "Daffodil", бүтээгдэхүүн: "daffodil", stocklevel: "12", үнэ: 1.99), (нэр: "Rose", бүтээгдэхүүн: "rose", stocklevel: "2", үнэ: 4.99), (нэр: "Цээнэ цэцэг", бүтээгдэхүүн: "цээнэ цэцэг", нөөцийн түвшин: "0", үнэ: 1.50 ), (нэр: "Примула", бүтээгдэхүүн: "примула", нөөцийн түвшин: "1", үнэ: 3.12 ), (нэр : "Цасан ширхгүүд", бүтээгдэхүүн: "цасан дусал", нөөцийн түвшин: "15", үнэ: 0.99 ), ]; var template = $("#flowerTmpl") template.tmpl(data.slice(0, 3)).appendTo ("#row1" template.tmpl(data.slice(3)).appendTo("#row2" )); $(нэр):

    Энэ скрипт дээр би загварыг хоёр удаа ашиглах замаар эгнээнд цэцэг байрлуулах асуудлыг шийдсэн: мөр бүрт нэг удаа. Би зүсмэлийн аргыг ашигласан бөгөөд ингэснээр би загвар руу өгөгдлийн объектуудын тодорхой багцыг дамжуулах боломжтой болсон. Техник нь өөр боловч үр дүн нь дээрхтэй ижил байна.

    Илэрхийлэлийг үнэлэх

    Бид зөвхөн өгөгдлийн объектуудын өмчийн үнэ цэнээр хязгаарлагдахгүй. Та буржгар хаалтны хооронд JavaScript илэрхийлэл байрлуулж болох ба загварын хөдөлгүүр тооцооллыг хийж, загварын гаралтыг HTML-д оруулна. Жишээ агуулсан.

    Жагсаалт 12-10: $(нэр):

    Энэ загварт би JavaScript гуравдагч операторыг ашиглан stocklevel шинж чанарт үндэслэн оролтын элементийн утгын шинж чанарыг тохируулдаг. Би энэ илэрхийлэлийг шууд өмчийн утгыг оруулсан шигээ буржгар хаалтны хооронд байрлуулдаг. Хэрэв stocklevel шинж чанар нь тэгээс их байвал утгын атрибутыг 1 болгож тохируулахгүй бол 0 болно. Үр дүнг эндээс харж болно. Цээнэ цэцгээс бусад бүх цэцгийн хувьд нөөцийн түвшин тэгээс их байна.

    Зураг 12-4: Загвар дахь илэрхийллийг үнэлэх

    Энэ жишээ нь загварын үндсэн функцийг товч харуулж байна: та өгөгдлийг загвартай нэгтгэж DOM объектуудыг үүсгэж, дараа нь үндсэн jQuery ашиглан баримт бичигт нэмнэ. Дараа нь өгөгдлийн утгыг агуулга үүсгэхийн тулд шууд болон шууд бус байдлаар илэрхийлэлд ашиглаж болно.

    jQuery-г гаргаснаар хөгжүүлэгчдийн амьдрал илүү хялбар болсон. Жишээлбэл, бид дараахь зүйлийг хялбархан хийж чадна.

    $("#someElement").children().each(function() ( $(энэ).wrap($("")); ));

    Энэ код нь #someElement id бүхий элементийн бүх удамшлыг шошгонд оруулах болно. Ийм үйл ажиллагаанд буруу зүйл байхгүй; Энэ илэрхийлэл нь туйлын зөв бөгөөд зарим тохиолдолд маш тохиромжтой байдаг. Гэхдээ манай скриптэд байрлуулсан HTML код нь кодын бүтцийн логикийг зөрчсөн үйлдэл юм. Энэ энгийн жишээнд энэ зөрчил нь тийм ч чухал биш боловч бодит төслүүдэд энэ нь маш түгээмэл байдаг. Ерөнхийдөө ийм код нь AJAX хүсэлтээс өгөгдлийг хүлээн авсны дараа DOM-д суулгасан олон HTML фрагментүүдийг агуулдаг. Энэ хэв маяг нь маш хурдан унших боломжгүй зүйл болж хувирдаг.

    Загваруудыг ашиглах нь HTML фрагментуудыг скриптээс салгах замаар энэ дутагдлыг арилгах, ингэснээр өөр өөр төрлийн кодын агуулгын логикийг салгах боломжийг олгоно. Замдаа би танд jQuery 1.5-ын танилцуулсан гайхалтай AJAX-ын шинэ боломжуудыг харуулахгүй байхын аргагүй.

    Эхлэх

    Энэ жишээнд бид Twitter-ийн виджетийг хөгжүүлж байгаа бөгөөд энэ нь зөвхөн бидний хамгийн сүүлийн нийтлэлүүд төдийгүй найз нөхөд, дагалдагчдын жагсаалтыг ачаалах болно. Энэ жишээн дээр би Twitter-ийг сонгосон, учир нь энэ нь ажиллахад хялбар, хөгжилтэй JSON өгөгдөлтэй харьцдаг.

    Эхэлцгээе; виджет нь өөрөө дараах HTML бүтцэд тулгуурлан бүтээгдэх болно.

    jQuery, AJAX болон Templating Дэн Велман

    Нөхөр, аав, урд талын хөгжүүлэгч, зохиолч. Nettuts болон Packt Publishing-д зориулж бичдэг. @designhaus |-д ажилладаг jQuery-н фанат

    • Жиргээ
    • Найзууд
    • Дагагчид
    Энэхүү виджет нь JavaScript ашиглахыг шаарддаг гайхалтай боломжуудтай. Интернетийг илүү сайн ашиглахын тулд үүнийг идэвхжүүлнэ үү

    Энэ жишээнд бид HTML5 ашиглаж байна. Үүнийг хийхийн тулд бид хялбаршуулсан DOCTYPE болон мета элементийг зааж өгсөн. Та мөн кодонд хэдэн минутын дараа тайлбарлах загварын хуудастай холболт байгааг анзаарч магадгүй юм. IE8 ба түүнээс доош хувилбарын одоогийн хувилбарыг дэмжихийн тулд бид тусгай html5shiv залгаас дээр нөхцөлт тайлбарыг ашигладаг.

    Хажуу талд нь ашиглаж байна

    Энэ виджет нь хажуугийн самбар шиг харагдах бөгөөд заасан Twitter хэрэглэгчийн агуулгыг харуулах болно. Үүнийг бодоод би агуулгыг . Энэ элементэд хялбар хандахын тулд бид ID-г тохируулах болно.

    Тэмдэглэгээний тухай ярьж байна. Твиттер хэрэглэгчийн бүх нийтлэлийн гарчиг шошгонд, зураг болон бусад бүх зүйл шошгонд багтах болно.

    Та энэ жишээг урвуу инженерчлэхдээ үүнийг өөрийн хүссэнээр өөрчилж болно. Бид шаардлагатай бүх өгөгдлийг JSON-ээр дамжуулан авах боломжтой бөгөөд үүнийг хийх боловч ачаалах явцад саатал гарсан тохиолдолд зочдод олон хоосон блок харагдах болно. Тиймээс татан авалт дуустал хүлээж, блокуудыг бөглөх нь дээр.

    Мөн манай хуудсан дээр мессеж, найз нөхөд, захиалагчдын жагсаалт хооронд шилжих табууд байх болно. Бүгдийг шошгонд хавсаргасан болно

    © Зохиогчийн эрх 2024, Компьютер эзэмших - Интернет. Skype. Олон нийтийн сүлжээ. Windows хичээлүүд