Pafupifupi zaka 15 zapitazo, ndinkagwira ntchito pakampani ina imene tinkapanga mapulogalamu a anthu ogwira ntchito paulendo, ogwira ntchito pabwalo la ndege komanso makampani a ndege. Tidapanganso dongosolo lathu lamkati la zida za UI komanso kuthekera kwa pulogalamu yatsamba limodzi. Tidali ndi zigawo za chilichonse: minda, mabatani, ma tabu, magawo, ma datatebulo, mindandanda yazakudya, zosankha masiku, zosankhidwa, ndi zosankha zambiri. Tinalinso ndi gawo la div. Chigawo chathu cha div chinali chabwino mwa njira, chimatilola kuchita ngodya zozungulira pa asakatuli onse, zomwe, khulupirirani kapena ayi, sichinali chinthu chophweka kuchita panthawiyo.
Ntchito yathu idachitika panthawi inayake m'mbiri yathu pomwe JS, Ajax, ndi HTML yamphamvu idawonedwa ngati kusintha komwe kunatibweretsa m'tsogolo. Mwadzidzidzi, titha kusintha tsamba mwachangu, kupeza deta kuchokera pa seva, ndikupewa kupita kumasamba ena, omwe amawonedwa ngati akuchedwa ndikuwunikira rectangle yayikulu yoyera pazenera pakati pamasamba awiriwo. Panali mawu, odziwika ndi Jeff Atwood (woyambitsa StackOverflow), omwe amawerenga: “Ntchito iliyonse yomwe ingalembedwe mu JavaScript pamapeto pake idzalembedwa mu JavaScript.”— Jeff Atwood
Kwa ife panthawiyo, izi zinkakhala ngati kuyesa kupita kukapanga mapulogalamuwa. Zinamveka ngati chivomerezo chabulangete kuchita chilichonse ndi JS. Choncho tinachita zonse ndi JS, ndipo sitinatenge nthawi yofufuza njira zina zochitira zinthu. Sitinamve kwenikweni chilimbikitso choti tiphunzire bwino zomwe HTML ndi CSS zingachite. Sitinawone kuti intaneti ndi nsanja yosinthira pulogalamu yonse. Nthawi zambiri tidawona ngati chinthu chomwe tidafunika kuchitapo kanthu, makamaka pankhani yothandizira osatsegula. Titha kungoponyera JS yochulukirapo kuti zinthu zitheke. Kodi kutenga nthawi yophunzira zambiri za momwe intaneti imagwirira ntchito komanso zomwe zinali papulatifomu zingandithandize? Zachidziwikire, ndikadatha kumeta mulu wa ma code omwe sanali ofunikira kwenikweni. Koma, pa nthawiyo, mwina osati kwambiri. Mukuwona, kusiyana kwa msakatuli kunali kofunikira nthawi imeneyo. Iyi inali nthawi yomwe Internet Explorer idakali msakatuli wamkulu, ndi Firefox kukhala yachiwiri yachiwiri, koma ikuyamba kutaya msika chifukwa cha Chrome ikupeza kutchuka. Ngakhale Chrome ndi Firefox zinali zabwino kwambiri kuvomereza pamiyezo yapaintaneti, malo omwe mapulogalamu athu amayendera amatanthauza kuti tiyenera kuthandizira IE6 kwa nthawi yayitali. Ngakhale pamene tinaloledwa kuthandizira IE8, tinkafunikabe kulimbana ndi kusiyana kwakukulu pakati pa asakatuli. Osati zokhazo, komanso ukonde wanthawiyo unalibe kuthekera kotere komwe kumapangidwira papulatifomu.
Mofulumira mpaka lero. Zinthu zasintha kwambiri. Sikuti tili ndi luso lochulukirapo kuposa kale lonse, koma kuchuluka komwe kumapezeka kwakulanso. Ndiroleni ndifunsenso funsoli: Kodi kutenga nthawi kuti mudziwe zambiri za momwe intaneti imagwirira ntchito komanso zomwe zilipo papulatifomu zingakuthandizeni lero? Inde, inde. Kuphunzira kumvetsetsa ndi kugwiritsa ntchito nsanja lero kumakupangitsani kukhala ndi mwayi waukulu kuposa opanga ena. Kaya mumagwira ntchito, kupezeka, kuyankha, zonsezi palimodzi, kapena kungotumiza mawonekedwe a UI, ngati mukufuna kuchita ngati injiniya wodalirika, kudziwa zida zomwe zilipo kwa inu kumakuthandizani kukwaniritsa zolinga zanu mwachangu komanso bwino. Zina Zomwe Simungafunenso Laibulale Podziwa zomwe asakatuli amathandizira masiku ano, funso ndilakuti: Kodi tingasiye chiyani? Kodi tikufuna gawo la div kuti tichite ngodya zozungulira mu 2025? Inde, sititero. Malo okhala m'malire athandizidwa ndi asakatuli onse omwe amagwiritsidwa ntchito pano kwa zaka zopitilira 15 pakadali pano. Ndipo mawonekedwe apangodya akubweranso posachedwa, ngakhale pamakona apamwamba. Tiyeni tiwone zaposachedwa kwambiri zomwe zikupezeka m'masakatuli onse akuluakulu, ndi zomwe mungagwiritse ntchito m'malo mwa zodalira zomwe zilipo mu codebase yanu. Chofunikira sikuti musiye nthawi yomweyo malaibulale anu onse okondedwa ndikulembanso codebase yanu. Pazina zilizonse, muyenera kuganizira kaye chithandizo cha asakatuli ndikusankha kutengera zinthu zina zomwe zikugwirizana ndi polojekiti yanu. Zotsatirazi zikugwiritsidwa ntchito m'mainjini atatu akuluakulu asakatuli (Chromium, WebKit, ndi Gecko), koma mutha kukhala ndi zofunikira zosiyanasiyana zomwe zimakulepheretsani kuzigwiritsa ntchito nthawi yomweyo. Ino ikali nthawi yabwino yophunzira za izi, komabe, ndipo mwinamwake kukonzekera kuzigwiritsa ntchito panthawi ina. Popovers Ndi Dialogs Popover API,
Zowonadi, liwiro la intaneti yanu lakula, nawonso, koma si choncho kwa aliyense. Ndipo si onse omwe ali ndi luso lofanana ndi chipangizo. Kukoka ma code a chipani chachitatu pazinthu zomwe mungathe kuchita ndi nsanja, m'malo mwake, kumatanthauza kuti mumatumiza ma code ambiri, motero mumafikira makasitomala ochepa kuposa momwe mungakhalire. Pa intaneti, kutsitsa koyipa kumabweretsa ziwopsezo zazikulu zosiyidwa ndikuwononga mbiri yamtundu. Kuthamanga Pang'ono Code Pazipangizo Kuphatikiza apo, manambala omwe mumatumiza pazida zamakasitomala anu amatha kuthamanga mwachangu ngati agwiritsa ntchito zochepa za JavaScript pamwamba pa nsanja. Mwinanso imakhala yomvera komanso yopezeka mosavuta. Zonsezi zimabweretsa makasitomala ambiri komanso osangalala. Yang'anani mnzanga Alex Russell's chaka ndi chaka kusalingana gap gap blog, zomwe zikuwonetsa kuti zida zamtengo wapatali sizipezeka m'misika yokhala ndi mabiliyoni ambiri ogwiritsa ntchito chifukwa cha kusalingana kwachuma. Ndipo kusiyana kumeneku kukukulirakulira pakapita nthawi.
Mapangidwe a Masonry Omangidwa Chimodzi mwazinthu zapaintaneti zomwe zikubwera posachedwa ndipo zomwe ndikusangalala nazo ndi CSS Masonry.
Ndiloleni ndiyambe ndikufotokozera zomwe Masonry ndi. Kodi Masonry N'chiyani Masonry ndi mtundu wamapangidwe omwe adadziwika ndi Pinterest zaka zapitazo. Zimapanga nyimbo zodziyimira pawokha zomwe zili mkati mwazinthu zomwe zimadzitengera okha pafupi ndi chiyambi cha nyimbo momwe angathere.
Anthu ambiri amawona Masonry ngati njira yabwino yopangira ma portfolio ndi zithunzi zazithunzi, zomwe zimatha kuchita. Koma Masonry ndi osinthika kwambiri kuposa zomwe mumawona pa Pinterest, ndipo sizimangotengera masanjidwe ngati mathithi. Mu dongosolo la Masonry:
Nyimbo zimatha kukhala mizati kapena mizere:
Zolemba zonse siziyenera kukhala zofanana:
Zinthu zimatha kukhala ndi mitundu ingapo:
Zinthu zimatha kuyikidwa pamakina apadera; sayenera nthawi zonse kutsatira ndondomeko yoyika yokha:
Mademo Nawa ma demo osavuta omwe ndidapanga pogwiritsa ntchito kukhazikitsidwa kwa CSS Masonry ku Chromium. Chiwonetsero chazithunzi, chowonetsa momwe zinthu (mutu womwe uli pano) ungayendere maulendo angapo:
Chipinda china chazithunzi chowonetsa mayendedwe amitundu yosiyanasiyana:
Masanjidwe atsamba lankhani okhala ndi ma track ena okulirapo kuposa ena, ndi zinthu zina m'lifupi mwake:
Bolodi la kanban lomwe likuwonetsa kuti zinthu zitha kuyikidwa pamayendedwe apadera:
Chidziwitso: Thema demo am'mbuyomu adapangidwa ndi mtundu wa Chromium womwe sunapezekebe kwa ogwiritsa ntchito ambiri pa intaneti, chifukwa CSS Masonry ikungoyamba kukhazikitsidwa msakatuli. Komabe, opanga mawebusayiti akhala akugwiritsa ntchito mosangalala malaibulale kuti apange masanjidwe a Masonry kwa zaka kale. Masamba Ogwiritsa Ntchito Masonry Masiku Ano Zowonadi, Masonry ndiwofala kwambiri pa intaneti masiku ano. Nazi zitsanzo zingapo zomwe ndapeza pambali pa Pinterest:
Ndipo zitsanzo zina zochepa, zosadziwika bwino:
Nanga masanjidwewa anapangidwa bwanji? Njira zogwirira ntchito Chinyengo chimodzi chomwe ndidachiwona chikugwiritsidwa ntchito ndikugwiritsa ntchito mawonekedwe a Flexbox m'malo mwake, kusintha momwe amalowera, ndikuyiyika kuti ikulungidwe. Mwanjira iyi, mutha kuyika zinthu zazitali mosiyanasiyana m'mizere ingapo, yodziyimira payokha, ndikuwonetsa mawonekedwe a Masonry:
Pali, komabe, zolepheretsa ziwiri ndi njira iyi:
Dongosolo la zinthu ndi losiyana ndi momwe zingakhalire ndi mawonekedwe enieni a Masonry. Ndi Flexbox, zinthu zimadzaza gawo loyamba, ndipo zikadzadza, pitani kugawo lotsatira. Ndi Masonry, zinthu zitha kusungika munjira iliyonse (kapena gawo ili) ili ndi malo ochulukirapo. Komanso, ndipo mwinamwake chofunika kwambiri, workaround iyi imafuna kuti muyike kutalika kwa chidebe cha Flexbox; apo ayi, palibe kuzimata kudzachitika.
Laibulale ya Masonry ya gulu lachitatu Pamilandu yapamwamba kwambiri, opanga akhala akugwiritsa ntchito malaibulale. Laibulale yodziwika bwino komanso yotchuka ya izi imangotchedwa Masonry, ndipo imatsitsidwa nthawi pafupifupi 200,000 pa sabata malinga ndi NPM. Squarespace imaperekanso gawo la masanjidwe omwe amapereka mawonekedwe a Masonry, m'malo opanda code, ndipo masamba ambiri amawagwiritsa ntchito. Zosankha zonse ziwirizi zimagwiritsa ntchito JavaScript code kuyika zinthu mu masanjidwewo. Masonry Omangidwa Ndine wokondwa kwambiri kuti Masonry tsopano yayamba kuwonekera mu asakatuli ngati mawonekedwe a CSS. M'kupita kwa nthawi, mudzatha kugwiritsa ntchito Masonry monga momwe mumachitira Grid kapena Flexbox, ndiye kuti, osafunikira ma workaround kapena nambala yachitatu. Gulu langa ku Microsoft lakhala likugwiritsa ntchito thandizo la Masonry mu Chromium open source project, yomwe Edge, Chrome, ndi asakatuli ena ambiri adakhazikitsidwa. Mozilla anali kwenikweni ogulitsa msakatuli woyamba kunena zoyeserera zoyeserera za Masonry mu 2020. Ndipo Apple yakhalanso ndi chidwi chopanga masanjidwe atsopanowa kuti ayambe kuchitika. Ntchito yokhazikitsira mawonekedwewo ikupitanso patsogolo, ndi mgwirizano mkati mwa gulu logwira ntchito la CSS pazambiri komanso mawonekedwe amtundu watsopano: njira za grid. Ngati mukufuna kudziwa zambiri za Masonry ndikuwona momwe zinthu zikuyendera, onani tsamba langa la CSS Masonry. M'kupita kwa nthawi, Masonry ikakhala gawo loyambira, monga Grid kapena Flexbox, titha kuyigwiritsa ntchito ndikupindula nayo:
Kuchita bwino, Kuyankha bwino, Kusavuta kugwiritsa ntchito komanso nambala yosavuta.
Tiyeni tiwone bwinobwino izi. Kuchita Bwino Kupanga dongosolo lanu lokhala ngati Masonry, kapena kugwiritsa ntchito laibulale ya chipani chachitatu m'malo mwake, zikutanthauza kuti muyenera kuyendetsa JavaScript code kuti muyike zinthu pazenera. Izi zikutanthauzanso kuti code iyi ipereka kutsekereza. Zowonadi, mwina palibe chomwe chidzawoneke, kapena zinthu sizikhala m'malo oyenera kapena kukula kwake, mpaka JavaScript code itatha. Masanjidwe amiyala nthawi zambiri amagwiritsidwa ntchito pagawo lalikulu latsamba lawebusayiti, zomwe zikutanthauza kuti nambalayo ipangitsa kuti zomwe zili zazikulu ziwoneke mochedwa kuposa momwe zikanakhalira, kunyozetsa LCP yanu, kapena metric Yaikulu Yokhutiritsa Paint, yomwe imatenga gawo lalikulu pakuzindikirika komanso kukhathamiritsa kwa injini zosakira. Ndinayesa laibulale ya Masonry JS ndi masanjidwe osavuta komanso potengera kulumikizana kwapang'onopang'ono kwa 4G mu DevTools. Laibulale si yayikulu kwambiri (24KB, 7.8KB gzipped), koma zidatenga 600ms kuti zitsegulidwe pansi pa mayeso anga. Nachi chojambulira chomwe chikuwonetsa kuti nthawi yayitali ya 600ms yodzaza laibulale ya Masonry, ndikuti palibe ntchito ina yowonetsera yomwe idachitika izi zikuchitika:
Kuphatikiza apo, itatha nthawi yoyambira, zolemba zomwe zidatsitsidwa zimafunikira kugawidwa, kuphatikizidwa, ndikuyendetsa. Zonse zomwe, monga tanenera kale, zinali kulepheretsa kumasulira kwa tsamba. Ndi kukhazikitsa kwa Masonry mu msakatuli, sitidzakhala ndi script yoti tiyike ndikuyendetsa. Injini ya msakatuli imangochita zomwe zili patsamba loyamba loperekera. Kuyankha Bwino Mofanana ndi pamene tsamba liyamba kudzaza, kukonzanso zenera la msakatuli kumabweretsanso kukonzanso tsambalo. Komabe, pakadali pano, ngati tsamba likugwiritsa ntchito laibulale ya Masonry JS, palibe chifukwa choyikanso script, chifukwa ili kale.Pano. Komabe, code yomwe imasuntha zinthu m'malo oyenera iyenera kuyendetsedwa. Tsopano laibulale iyi ikuwoneka kuti ikufulumira kwambiri pochita izi tsamba likadzaza. Komabe, imathandizira zinthuzo zikafunika kusamukira kumalo ena pakusintha kwazenera, ndipo izi zimapangitsa kusiyana kwakukulu. Inde, ogwiritsa ntchito samawononga nthawi yosintha mawindo awo asakatuli monga momwe timachitira opanga. Koma kusintha kosinthika kumeneku kumatha kukhala kosangalatsa kwambiri ndipo kumawonjezera nthawi yomwe tsambalo limatengera kuti ligwirizane ndi kukula kwake kwatsopano. Kusavuta Kugwiritsa Ntchito Ndi Ma Code Osavuta Ndikosavuta bwanji kugwiritsa ntchito mawonekedwe a intaneti komanso momwe kachidindo imawonekera ndizofunika zomwe zingapangitse kusiyana kwakukulu kwa gulu lanu. Iwo sangakhale ofunikira monga momwe amagwiritsidwira ntchito komaliza, inde, koma zokumana nazo zamapulogalamu zimakhudza kusamalidwa. Kugwiritsa ntchito mawonekedwe awebusayiti omwe amapangidwira kumabwera ndi zopindulitsa kwambiri kutsogoloku:
Madivelopa omwe amadziwa kale HTML, CSS, ndi JS azitha kugwiritsa ntchito mawonekedwewo mosavuta chifukwa adapangidwa kuti aphatikizire bwino komanso kuti azigwirizana ndi tsamba lonse lawebusayiti. Palibe chiwopsezo chophwanya zosintha zomwe zimayambitsidwa momwe gawolo limagwiritsidwira ntchito. Pali pafupifupi ziro chiwopsezo choti chinthucho chitha kuchotsedwa kapena kusamalidwa.
Pankhani ya Zomangamanga zomangidwa, chifukwa ndizoyambira, mumazigwiritsa ntchito kuchokera ku CSS, monga Grid kapena Flexbox, palibe JS yomwe ikukhudzidwa. Komanso, zinthu zina za CSS zokhudzana ndi masanjidwe, monga kusiyana, zimagwira ntchito momwe mungayembekezere. Palibe zidule kapena njira zogwirira ntchito zomwe muyenera kudziwa, ndipo zomwe mumaphunzira zimalembedwa pa MDN. Kwa Masonry JS lib, kuyambika ndikovuta pang'ono: kumafuna chidziwitso cha data ndi mawu enaake, pamodzi ndi zinthu zobisika za HTML kuti zikhazikitse magawo ndi kukula kwake. Komanso, ngati mukufuna kutambasula zipilala, muyenera kuphatikiza kukula kwake kuti mupewe mavuto: