تەخمىنەن 15 يىل ئىلگىرى ، مەن ساياھەت شىركىتى ، ئايرودروم ئىشچىلىرى ۋە ئاۋىئاتسىيە شىركەتلىرى ئۈچۈن ئەپ قۇرغان بىر شىركەتتە ئىشلەيتتىم. بىز UI زاپچاسلىرى ۋە يەككە بەتلىك ئەپ ئىقتىدارى ئۈچۈن ئۆزىمىزنىڭ ئىچكى رامكىسىنى قۇردۇق. بىزدە ھەممە نەرسىنىڭ زاپچاسلىرى بار: مەيدان ، كۇنۇپكا ، بەتكۈچ ، دائىرە ، سانلىق مەلۇمات جەدۋىلى ، تىزىملىك ، چېسلا تاللىغۇچ ، تاللاش ۋە كۆپ تاللاش. بىزدە ھەتتا بىر بۆلەك بار. بىزنىڭ div زاپچاسلىرىمىز ناھايىتى ياخشى ئىدى ، ئۇ بىزنىڭ بارلىق توركۆرگۈچلەردە يۇمىلاق بۇلۇڭ-پۇچقاقلارنى قىلىشىمىزغا يول قويدى ، ئىشىنىمىز ياكى ئىشەنمەيمىز ، ئۇ ۋاقىتتا قىلىش ئاسان ئىش ئەمەس ئىدى.
بىزنىڭ خىزمىتىمىز JS ، Ajax ۋە ھەرىكەتچان HTML بىزنى كەلگۈسىگە ئېلىپ كەلگەن ئىنقىلاب دەپ قارالغاندا ، تارىخىمىزدىكى بىر نۇقتىدا يۈز بەردى. تۇيۇقسىز ، بىز بىر بەتنى ھەرىكەتچان يېڭىلاپ ، مۇلازىمېتىردىن سانلىق مەلۇماتقا ئېرىشەلەيمىز ۋە باشقا بەتلەرگە يۆتكىلىشتىن ساقلىنالايمىز ، بۇ كۆرۈنۈشلەر ئاستا دەپ قارىلىپ ، ئېكراندا چوڭ ئاق تىك تۆت بۇلۇڭنى چاقنىدى. جېف ئاتۋۇد (StackOverflow نىڭ قۇرغۇچىسى) تەرىپىدىن مودا بولغان بىر جۈملە سۆز بار ، ئۇنىڭدا مۇنداق يېزىلغان: «JavaScript دا يېزىلىدىغان ھەر قانداق پروگرامما ئاخىرىدا JavaScript دا يېزىلىدۇ.» - جېف ئاتۋۇد
ئەينى ۋاقىتتا بىزگە نىسبەتەن ، بۇ بېرىپ شۇ ئەپلەرنى ئىجاد قىلىشقا جۈرئەت قىلغاندەك ھېس قىلدى. JS بىلەن ھەممە ئىشنى قىلىش ئەدىيال تەستىقتەك تۇيۇلدى. شۇڭا بىز JS بىلەن ھەممە ئىشنى قىلدۇق ، باشقا ئىشلارنى قىلىش ئۇسۇللىرىنى تەتقىق قىلىشقا ۋاقىت ئاجرىتالمىدۇق. بىز HTML ۋە CSS نىڭ نېمە قىلالايدىغانلىقىنى توغرا ئۆگىنىشتىكى رىغبەتنى ھەقىقىي ھېس قىلمىدۇق. بىز تورنى تەرەققىي قىلىۋاتقان ئەپ سۇپىسى دەپ ھەقىقىي ھېس قىلمىدۇق. بىز كۆپىنچە ئۇنى ئەتراپىمىزدا ئىشلەشكە تېگىشلىك ئىش دەپ قارىدۇق ، بولۇپمۇ توركۆرگۈچنىڭ قوللىشىغا كەلسەك. ئىشلارنى ئورۇنداش ئۈچۈن ئۇنىڭغا تېخىمۇ كۆپ JS تاشلىيالايمىز. تورنىڭ قانداق ئىشلەيدىغانلىقى ۋە سۇپىدا نېمىلەرنىڭ بارلىقىنى بىلىش ئۈچۈن ۋاقىت سەرپ قىلامسىز؟ ئەلۋەتتە ، مەن بەلكىم ھەقىقىي ئېھتىياجلىق بولمىغان بىر تۈركۈم كودلارنى چۈشۈرۈۋەتكەن بولاتتىم. ئەمما ، ئۇ ۋاقىتتا بەلكىم ئۇنچە كۆپ بولماسلىقى مۇمكىن. قاراڭ ، ئۇ ۋاقىتتا توركۆرگۈچ پەرقى خېلى كۆرۈنەرلىك ئىدى. بۇ ۋاقىت Internet Explorer يەنىلا ئاساسلىق توركۆرگۈ بولۇپ ، Firefox ئىككىنچى ئورۇنغا تىزىلغان ، ئەمما Chrome تېزلىكتە ئالقىشقا ئېرىشكەنلىكتىن بازار ئۈلۈشىنى يوقىتىشقا باشلىغان. گەرچە Chrome ۋە Firefox تور ئۆلچىمىگە قوشۇلۇشقا خېلى ئۇستا بولسىمۇ ، ئەپلىرىمىز ئىجرا بولۇۋاتقان مۇھىت بىزنىڭ IE6 نى ئۇزۇن مۇددەت قوللىشىمىز كېرەكلىكىدىن دېرەك بەردى. IE8 نى قوللاشقا رۇخسەت قىلىنغان تەقدىردىمۇ ، بىز يەنىلا توركۆرگۈچ ئوتتۇرىسىدىكى نۇرغۇن پەرقلەرنى بىر تەرەپ قىلىشىمىز كېرەك. شۇنداق بولۇپلا قالماي ، ئۇ ۋاقىتتىكى تورلاردا پەقەت نۇرغۇن ئىقتىدارلار سۇپىغا قۇرۇلمىغان.
بۈگۈنگە تېز. ئىشلار زور دەرىجىدە ئۆزگەردى. بىزدە بۇ ئىقتىدارلار ئىلگىرىكىگە قارىغاندا كۆپ بولۇپلا قالماي ، ئۇلارنىڭ ئىشلىتىش نىسبىتىمۇ ئاشتى. بۇ سوئالنى يەنە بىر قېتىم سوراپ باقاي ، ئۇنداقتا: ۋاقىت چىقىرىپ تورنىڭ قانداق ئىشلەيدىغانلىقى ۋە سۇپىدا نېمىلەرنىڭ بارلىقىنى بىلىش ئۈچۈن ۋاقىت سەرپ قىلامسىز؟ ئەلۋەتتە شۇنداق. بۈگۈن تور سۇپىسىنى چۈشىنىش ۋە ئىشلىتىشنى ئۆگىنىش سىزنى باشقا ئاچقۇچىلارغا قارىغاندا زور ئەۋزەللىككە ئىگە قىلىدۇ. مەيلى ئىقتىدار ، ئىشلىتىشچانلىقى ، ئىنكاسچانلىقى قاتارلىقلارنىڭ ھەممىسىدە بىللە ئىشلەڭ ، ياكى پەقەت UI ئىقتىدارلىرىنى توشۇڭ ، ئەگەر ئۇنى مەسئۇلىيەتچان ئىنژېنېر قىلماقچى بولسىڭىز ، قولىڭىزدىكى قوراللارنى بىلىش سىزنىڭ نىشانىڭىزغا تېخىمۇ تېز ۋە تېخىمۇ ياخشى يېتىشىڭىزگە ياردەم بېرىدۇ. سىز بەلكىم بەزى ئىشلار ئۈچۈن كۈتۈپخانىغا ئېھتىياجلىق بولماسلىقىڭىز مۇمكىن بۈگۈن توركۆرگۈچلەرنىڭ نېمىنى قوللايدىغانلىقىنى بىلىش ، ئۇنداقتا سوئال: بىز نېمىگە شۇڭغۇپ چىقالايمىز؟ 2025-يىلى يۇمىلاق بۇلۇڭ-پۇچقاقلارنى قىلىش ئۈچۈن بىزگە div زاپچاس لازىممۇ؟ ئەلۋەتتە ، بىز ئۇنداق قىلمايمىز. چېگرا رادىئو رادىئاتسىيىسى ھازىر ئىشلىتىلىۋاتقان بارلىق توركۆرگۈچلەرنىڭ قوللىشىغا ئېرىشتى. بۇلۇڭ شەكلىمۇ پات يېقىندا كېلىدۇ ، ھەتتا شامالدۇرغۇچ بۇلۇڭلار ئۈچۈنمۇ كېلىدۇ. قېنى بىز ھازىر بارلىق ئاساسلىق توركۆرگۈچلەردە بار بولغان ، كود يەشكۈچتىكى مەۋجۇت بېقىنىشلارنىڭ ئورنىنى ئالالايدىغان يېقىنقى ئىقتىدارلارنى كۆرۈپ باقايلى. مۇھىمى سىز ياخشى كۆرىدىغان بارلىق كۈتۈپخانىلارنى دەرھال تاشلاپ كود يەشكۈچنى قايتا يېزىش ئەمەس. باشقا ھەممە نەرسىگە كەلسەك ، سىز ئالدى بىلەن توركۆرگۈنىڭ قوللىشىنى ئويلىشىپ ، تۈرىڭىزگە مۇناسىۋەتلىك باشقا ئامىللارغا ئاساسەن قارار قىلىشىڭىز كېرەك. تۆۋەندىكى ئىقتىدارلار ئاساسلىق ئۈچ توركۆرگۈچ ماتورىدا (Chromium, WebKit ۋە Gecko) يولغا قويۇلغان ، ئەمما سىزدە ئوخشىمىغان توركۆرگۈچ قوللاش تەلىپى بولۇشى مۇمكىن ، ئۇلارنى دەرھال ئىشلىتىشىڭىزنىڭ ئالدىنى ئالىدۇ. ھازىر بۇ ئىقتىدارلارنى بىلىشنىڭ ياخشى پەيتى ، گەرچە ، ئۇلارنى مەلۇم ۋاقىتتا ئىشلىتىشنى پىلانلىشىڭىز مۇمكىن. پوپلار ۋە دىئالوگلار Popover API ،
ئەلۋەتتە ، تورغا ئۇلىنىش سۈرئىتىڭىزمۇ ئېشىپ كەتكەن بولۇشى مۇمكىن ، ئەمما ھەممە ئادەمدە ئۇنداق ئەمەس. ھەممەيلەننىڭ ئوخشاش ئۈسكۈنىنىڭ ئىقتىدارىمۇ بولمايدۇ. سىز سۇپىدا قىلالايدىغان ئىشلار ئۈچۈن ئۈچىنچى تەرەپ كودىغا تارتىش ، ئۇنىڭ ئورنىغا ، بەلكىم سىزنىڭ تېخىمۇ كۆپ كود ئەۋەتىشىڭىزدىن دېرەك بېرىدۇ ، شۇڭلاشقا خېرىدارلارغا ئادەتتىكىدىن ئاز. توردا ، ناچار يۈك قاچىلاش ئىقتىدارى زور دەرىجىدە ۋاز كېچىش نىسبىتىنى كەلتۈرۈپ چىقىرىدۇ ۋە ماركىنىڭ ئىناۋىتىگە زىيان سالىدۇ. ئۈسكۈنىلەردە ئازراق كود ئىجرا قىلىش ئۇندىن باشقا ، ئەگەر سىز سۇپىڭىزنىڭ ئۈستىدە JavaScript قىسقارتىلمىسىنى ئاز ئىشلەتسىڭىز ، خېرىدارلىرىڭىزنىڭ ئۈسكۈنىلىرىگە ئەۋەتكەن كود تېخىمۇ تېز ئىجرا بولىدۇ. سۈكۈتتىكى ھالەتتە تېخىمۇ ئىنكاسچان ۋە تېخىمۇ قولايلىق بولۇشى مۇمكىن. بۇلارنىڭ ھەممىسى تېخىمۇ كۆپ خېرىدارلارنى تېخىمۇ خۇشال قىلىدۇ. خىزمەتدىشىم ئالېكىس رۇسسېلنىڭ يىللىق ئىقتىدار تەڭسىزلىكى پەرقى بىلوگىنى تەكشۈرۈپ بېقىڭ ، ئۇنىڭدا كۆرسىتىلىشىچە ، بايلىق تەڭپۇڭسىزلىقى سەۋەبىدىن ئالىي دەرىجىلىك ئۈسكۈنىلەر مىلياردلىغان ئابونتلار بىلەن بازارلاردا ئاساسەن يوق ئىكەن. بۇ پەرق پەقەت ۋاقىتنىڭ ئۆتۈشىگە ئەگىشىپ كۈچىيىۋاتىدۇ.
ئىچىگە ماسون ئورۇنلاشتۇرۇلغان پات ئارىدا كېلىدىغان ۋە مەن بەك ھاياجانلاندۇرىدىغان بىر تور سۇپىسى ئىقتىدارى CSS Masonry.
مەن ماسوننىڭ نېمە ئىكەنلىكىنى چۈشەندۈرۈشتىن باشلايمەن. ماسون دېگەن نېمە ماسونرىي بىر نەچچە يىل ئىلگىرى Pinterest تەرىپىدىن مودا بولغان بىر خىل ئورۇنلاشتۇرۇش. ئۇ مۇستەقىل مەزمۇن ئىزلىرىنى ھاسىل قىلىدۇ ، بۇنىڭ ئىچىدە تۈرلەر ئامال بار ئىزنىڭ باشلىنىشىغا يېقىنلىشىدۇ.
نۇرغۇن كىشىلەر ماسونرىينى مەبلەغ سېلىش ۋە رەسىم ئامبىرىنىڭ ياخشى تاللىشى دەپ قارايدۇ ، بۇ ئەلۋەتتە قىلالايدۇ. ئەمما ماسونرىي «Pinterest» دا كۆرگەنگە قارىغاندا تېخىمۇ جانلىق ، ئۇ پەقەت شارقىراتمىغا ئوخشاش ئورۇنلاشتۇرۇش بىلەنلا چەكلىنىپ قالمايدۇ. ماسون لايىھىسىدە:
ئىزلار ستون ياكى قۇر بولىدۇ:
مەزمۇن ئىزلىرىنىڭ ھەممىسىنىڭ چوڭ-كىچىكلىكى ئوخشاش بولمايدۇ:
تۈرلەر بىر نەچچە يولنى ئۆز ئىچىگە ئالىدۇ:
تۈرلەرنى كونكرېت يوللارغا قويۇشقا بولىدۇ. ئۇلار ھەمىشە ئاپتوماتىك ئورۇنلاشتۇرۇش ئالگورىزىمغا ئەمەل قىلىشىنىڭ ھاجىتى يوق:
Demos بۇ يەردە مەن خىرومدا CSS Masonry نىڭ پات ئارىدا يولغا قويۇلۇشىدىن پايدىلىنىپ ياسىغان بىر قانچە ئاددىي كۆرسەتمىلەر بار. رەسىم كارىدورى كۆرگەزمىسى ، تۈرلەرنىڭ (بۇ ئەھۋالدا ماۋزۇ) قانداق قىلىپ بىر نەچچە يولنى بېسىپ ئۆتىدىغانلىقىنى كۆرسىتىپ بېرىدۇ:
ئوخشىمىغان چوڭلۇقتىكى ئىزلارنى كۆرسىتىدىغان يەنە بىر رەسىم كارىدورى:
بەزى ئىزلار بىلەن خەۋەر تور بېتىنىڭ ئورۇنلاشتۇرۇلۇشى باشقىلارغا قارىغاندا كەڭرەك ، بەزى تۈرلەر ئورۇنلاشتۇرۇشنىڭ پۈتكۈل كەڭلىكىنى ئۆز ئىچىگە ئالىدۇ:
تۈرلەرنى كونكرېت يوللارغا قويغىلى بولىدىغانلىقىنى كۆرسىتىدىغان كانبان تاختىسى:
ئەسكەرتىش :.ئالدىنقى كۆرسەتكۈچلەر Chromium نىڭ نەشىرى بىلەن ياسالغان بولۇپ ، كۆپىنچە تورداشلار تېخى ئىشلىتەلمەيدۇ ، چۈنكى CSS Masonry پەقەت توركۆرگۈچلەردە يولغا قويۇلۇشقا باشلىدى. قانداقلا بولمىسۇن ، تور ئاچقۇچىلار خۇشال ھالدا كۈتۈپخانىلاردىن پايدىلىنىپ Masonry ئورۇنلاشتۇرۇشىنى بارلىققا كەلتۈردى. بۈگۈن ماسوننى ئىشلىتىدىغان تور بېكەتلەر دەرۋەقە ، ماسونرىي بۈگۈن توردا ناھايىتى كۆپ ئۇچرايدۇ. بۇ يەردە مەن Pinterest دىن باشقا بىر قانچە مىسال تاپتىم:
يەنە بىر قانچە ، ئېنىق بولمىغان مىساللار:
ئۇنداقتا ، بۇ ئورۇنلاشتۇرۇشلار قانداق يارىتىلغان؟ Workarounds مەن ئىشلىتىپ باققان بىر ئامال ئۇنىڭ ئورنىغا Flexbox ئورۇنلاشتۇرۇشىنى ئىشلىتىش ، يۆنىلىشىنى ستونغا ئۆزگەرتىش ۋە ئوراپ تەڭشەش. بۇنداق بولغاندا ، ئوخشىمىغان ئېگىزلىكتىكى نەرسىلەرنى كۆپ ، مۇستەقىل ئىستونغا قويسىڭىز ، ماسون ئورۇنلاشتۇرۇشىنىڭ تەسىراتىنى بېرىدۇ:
بۇ خىزمەتنىڭ ئىككى خىل چەكلىمىسى بار:
تۈرلەرنىڭ تەرتىپى ئۇنىڭ ھەقىقىي ماسون ئورۇنلاشتۇرۇشى بىلەن ئوخشىمايدۇ. Flexbox ئارقىلىق تۈرلەر بىرىنچى ئىستوننى تولدۇرىدۇ ، تولۇق بولغاندا ئاندىن كېيىنكى ئىستونغا يۆتكىلىدۇ. ماسونرىي بىلەن ، قايسى يول (ياكى بۇ ئەھۋالدا ستون) تېخىمۇ كۆپ بوشلۇق بولسا ، تۈرلەر تىزىدۇ. ئەمما ، تېخىمۇ مۇھىمى ، بۇ خىزمەت لايىھىسى Flexbox قاچىسىغا مۇقىم ئېگىزلىك ئورنىتىشىڭىزنى تەلەپ قىلىدۇ. ئۇنداق بولمايدىكەن.
ئۈچىنچى تەرەپ ماسون كۈتۈپخانىلىرى تېخىمۇ ئىلغار ئەھۋاللارغا قارىتا ، پروگراممېرلار كۈتۈپخانىلارنى ئىشلىتىپ كېلىۋاتىدۇ. بۇنىڭ ئۈچۈن ئەڭ داڭلىق ۋە ئاممىباب كۇتۇپخانا پەقەت Masonry دەپ ئاتىلىدۇ ، NPM نىڭ خەۋىرىگە قارىغاندا ، ئۇ ھەر ھەپتىدە تەخمىنەن 200،000 قېتىم چۈشۈرۈلىدىكەن. Squarespace يەنە ماسون لايىھىسىنى تەمىنلەيدىغان ئورۇنلاشتۇرۇش زاپچاسلىرى بىلەن تەمىنلەيدۇ ، كودسىز تاللاش ئۈچۈن ، نۇرغۇن تور بېكەتلەر ئۇنى ئىشلىتىدۇ. بۇ ئىككى خىل تاللاش JavaScript كودىنى ئىشلىتىپ تۈرلەرنى ئورۇنلاشتۇرىدۇ. ماسوندا ياسالغان مەن Masonry نىڭ ھازىر تور كۆرگۈچلەردە CSS ئىقتىدارى سۈپىتىدە كۆرۈلۈشكە باشلىغانلىقىدىن تولىمۇ خۇشالمەن. ۋاقىتنىڭ ئۆتىشىگە ئەگىشىپ ، سىز ماسوننى Grid ياكى Flexbox غا ئوخشاش ئىشلىتەلەيسىز ، يەنى ھېچقانداق خىزمەت ياكى ئۈچىنچى تەرەپ كودىغا ئېھتىياجلىق بولمايسىز. مېنىڭ مىكروسوفتتىكى ئەترىتىم Edge ، Chrome ۋە باشقا نۇرغۇن توركۆرگۈچلەر ئاساس قىلغان خىروم ئوچۇق كود تۈرىدە Masonry نى قوللاشنى يولغا قويدى. Mozilla ئەمەلىيەتتە 2020-يىلى Masonry نى سىناق تەرىقىسىدە يولغا قويۇشنى ئوتتۇرىغا قويغان تۇنجى توركۆرگۈچ ساتقۇچى بولۇپ ، ئالما شىركىتىمۇ بۇ يېڭى تور ئورۇنلاشتۇرۇشىنى ئىپتىدائىي ئەمەلگە ئاشۇرۇشقا ئىنتايىن قىزىقىدۇ. بۇ ئىقتىدارنى قېلىپلاشتۇرۇش خىزمىتىمۇ ئالغا ئىلگىرىلەۋاتىدۇ ، CSS خىزمەت گۇرۇپپىسىنىڭ ئومۇمىي يۆنىلىشى ، ھەتتا يېڭى كۆرسىتىش تىپىدىكى كۆرسىتىش: تور يولى. ئەگەر Masonry توغرىسىدا تېخىمۇ كۆپ بىلىمگە ئېرىشىشنى ۋە ئىلگىرىلەشلەرنى ئىزدىمەكچى بولسىڭىز ، مېنىڭ CSS Masonry بايلىق بېتىنى تەكشۈرۈپ بېقىڭ. ۋاقتى كەلگەندە ، ماسونرى Grid ياكى Flexbox غا ئوخشاش ئاساسىي ئىقتىدارغا ئايلانغاندا ، بىز ئۇنى ئىشلىتىپ ، ئۇنىڭدىن پايدىلىنالايمىز:
تېخىمۇ ياخشى ئىقتىدار ، تېخىمۇ ياخشى ئىنكاسچانلىق ، ئىشلىتىش قۇلايلىق ۋە ئاددىي كود.
بۇلارنى تەپسىلىي كۆرۈپ باقايلى. تېخىمۇ ياخشى ئىقتىدار ئۆزىڭىزنىڭ Masonry غا ئوخشاش ئورۇنلاشتۇرۇش سىستېمىسىنى ياساش ياكى ئۇنىڭ ئورنىغا ئۈچىنچى تەرەپ كۈتۈپخانىسىنى ئىشلىتىش دېگەنلىك ، ئېكرانغا نەرسىلەرنى قويۇش ئۈچۈن JavaScript كودىنى ئىجرا قىلىشىڭىز كېرەكلىكىدىن دېرەك بېرىدۇ. بۇ يەنە بۇ كودنىڭ توسۇلۇپ قالىدىغانلىقىدىن دېرەك بېرىدۇ. دەرۋەقە ، ئۇ JavaScript كودى ئىجرا بولغۇچە ھېچ نەرسە كۆرۈنمەيدۇ ، ياكى ئىشلار مۇۋاپىق جايدا ياكى مۇۋاپىق چوڭلۇقتا بولمايدۇ. ماسون ئورۇنلاشتۇرۇشى كۆپىنچە تور بەتنىڭ ئاساسلىق قىسمىغا ئىشلىتىلىدۇ ، يەنى بۇ كود سىزنىڭ ئاساسلىق مەزمۇنلىرىڭىزنى باشقا ۋاقىتتىكىدىن كېيىن پەيدا قىلىدىغانلىقىدىن دېرەك بېرىدۇ ، LCP ياكى ئەڭ چوڭ مەزمۇنلۇق بوياق كۆرسەتكۈچىنى تۆۋەنلىتىدۇ ، بۇ ھېس قىلىنغان ئىقتىدار ۋە ئىزدەش ماتورىنى ئەلالاشتۇرۇشتا زور رول ئوينايدۇ. مەن Masonry JS كۈتۈپخانىسىنى ئاددىي ئورۇنلاشتۇرۇش ۋە DevTools دىكى ئاستا 4G ئۇلىنىشىنى تەقلىد قىلىش ئارقىلىق سىناق قىلدىم. كۇتۇپخانا ئانچە چوڭ ئەمەس (24KB ، 7.8KB gzip) ، ئەمما مېنىڭ سىناق شارائىتىمدا يۈكلەشكە 600ms ۋاقىت كەتتى. بۇ يەردە ماسون كۈتۈپخانىسىنىڭ ئۇزۇنلۇقى 600 مېتىر كېلىدىغان ۋاقىت خاتىرىلەنگەن ئىقتىدار خاتىرىسى بار ، ئۇ ئىش يۈز بەرگەندە باشقا رەسىم كۆرسىتىش پائالىيىتى يۈز بەرمىگەن:
ئۇنىڭدىن باشقا ، دەسلەپكى يۈك ۋاقتىدىن كېيىن ، چۈشۈرۈلگەن قوليازمىنى تەھلىل قىلىش ، تۈزۈش ، ئاندىن ئىجرا قىلىش كېرەك. بۇلارنىڭ ھەممىسى ، يۇقىرىدا دېيىلگەندەك ، بەتنىڭ كۆرسىتىلىشىنى توسۇۋاتاتتى. توركۆرگۈدە Masonry نىڭ ئىجرا قىلىنىشى بىلەن ، يۈكلەيدىغان ۋە ئىجرا قىلىدىغان قوليازما يوق. توركۆرگۈچ ماتورى دەسلەپكى بەتنى كۆرسىتىش باسقۇچىدا ئۆزىنىڭ ئىشىنى قىلىدۇ. تېخىمۇ ياخشى جاۋابكارلىق بىر بەت تۇنجى قېتىم يۈكلىگەنگە ئوخشاش ، توركۆرگۈچ كۆزنىكىنىڭ چوڭ-كىچىكلىكىنى تەڭشەش شۇ بەتتىكى ئورۇنلاشتۇرۇشنى يەنە بىر قېتىم كەلتۈرۈپ چىقىرىدۇ. بۇ ۋاقىتتا ، گەرچە بۇ بەت Masonry JS كۈتۈپخانىسىنى ئىشلىتىۋاتقان بولسا ، قوليازمىنى قايتا يۈكلەشنىڭ ھاجىتى يوق ، چۈنكى ئۇ ئاللىبۇرۇنبۇ يەردە. قانداقلا بولمىسۇن ، تۈرلەرنى مۇۋاپىق ئورۇنغا يۆتكەيدىغان كود ئىجرا بولۇشى كېرەك. ھازىر بۇ ئالاھىدە كۇتۇپخانا بەت يۈكلەنگەندە بۇنداق قىلىش ناھايىتى تېزدەك قىلىدۇ. قانداقلا بولمىسۇن ، ئۇ كۆزنەكنىڭ چوڭ-كىچىكلىكىدىكى باشقا ئورۇنغا كۆچۈشكە ئېھتىياجلىق بولغاندا ، ئۇ جانلىقلارنى جانلاندۇرىدۇ ، بۇ چوڭ ئۆزگىرىش پەيدا قىلىدۇ. ئەلۋەتتە ، ئىشلەتكۈچىلەر بىز ئاچقۇچىلارغا ئوخشاش توركۆرگۈ كۆزنىكىنى چوڭايتىشقا ۋاقىت سەرپ قىلمايدۇ. ئەمما بۇ جانلىقنىڭ چوڭ-كىچىكلىكىنى ئۆزگەرتىش تەجرىبىسى كىشىنى ھەيران قالدۇرىدۇ ھەمدە بۇ بەتنىڭ يېڭى چوڭ-كىچىكلىكىگە ماسلىشىش ئۈچۈن كېتىدىغان ۋاقىتنى قوشىدۇ. ئىشلىتىش قۇلايلىق ۋە ئاددىي كود تور ئىقتىدارىنى ئىشلىتىشنىڭ قانچىلىك ئاسانلىقى ۋە كودنىڭ نەقەدەر ئاددىي كۆرۈنۈشى گۇرۇپپىڭىزغا زور ئۆزگىرىش ئېلىپ كېلىدىغان مۇھىم ئامىللار. ئۇلار ھەرگىزمۇ ئاخىرقى ئىشلەتكۈچى تەجرىبىسىدەك مۇھىم بولالمايدۇ ، ئەمما ئاچقۇچىلارنىڭ تەجرىبىسى سىجىللىققا تەسىر كۆرسىتىدۇ. ئىچىگە ئورۇنلاشتۇرۇلغان تور ئىقتىدارىنى ئىشلىتىش بۇ تەرەپتە مۇھىم پايدىلارغا ئېرىشىدۇ:
HTML ، CSS ۋە JS نى ئاللىقاچان بىلىدىغان پروگراممېرلار بۇ ئىقتىدارنى ئاسانلا ئىشلىتەلەيدۇ ، چۈنكى ئۇ ياخشى بىرلەشتۈرۈش ۋە باشقا تور سۇپىسى بىلەن ماسلاشتۇرۇش ئۈچۈن لايىھەلەنگەن. بۇ ئىقتىدارنىڭ قانداق ئىشلىتىلىدىغانلىقى ئوتتۇرىغا قويۇلغان ئۆزگىرىشلەرنى بۇزۇش خەۋىپى يوق. بۇ ئىقتىدارنىڭ كونىراپ كېتىش ياكى كونترول قىلىنماسلىق خەۋىپى ئاساسەن يوق.
ماسونېرغا ئورۇنلاشتۇرۇلغان ئەھۋالدا ، ئۇ بىر خىل ئىپتىدائىي ئورۇنلاشتۇرۇلغان بولغاچقا ، سىز ئۇنى CSS دىن ئىشلىتىسىز ، خۇددى Grid ياكى Flexbox غا ئوخشاش ، JS ئارىلاشمايدۇ. ئۇنىڭدىن باشقا ، بوشلۇققا ئوخشاش باشقا ئورۇنلاشتۇرۇشقا مۇناسىۋەتلىك CSS خۇسۇسىيەتلىرى سىز ئويلىغاندەك ئىشلەيدۇ. بۇ يەردە بىلىشكە بولىدىغان ھىيلە-مىكىر ۋە خىزمەت يوق ، سىز ئۆگەنگەن ئىشلار MDN دا خاتىرىلەنگەن. Masonry JS lib غا نىسبەتەن ئېيتقاندا ، باشلاش بىر ئاز مۇرەككەپ: ئۇ مەلۇم بىر گرامماتىكىلىق سانلىق مەلۇمات خاسلىقىنى ، يوشۇرۇن HTML ئېلېمېنتلىرى بىلەن بىللە ستون ۋە بوشلۇقنىڭ چوڭ-كىچىكلىكىنى بەلگىلەيدۇ. ئۇنىڭدىن باشقا ، ئەگەر سىز ئىستوننى كېڭەيتمەكچى بولسىڭىز ، مەسىلىنىڭ ئالدىنى ئېلىش ئۈچۈن بوشلۇقنىڭ چوڭ-كىچىكلىكىنى ئۆز ئىچىگە ئېلىشىڭىز كېرەك:
بۇنى ماسونېرنىڭ يولغا قويۇلۇشىنىڭ قانداق بولىدىغانلىقىغا سېلىشتۇرۇپ باقايلى:
ئاددىيراق ، تېخىمۇ ئىخچام كود پەقەت بوشلۇققا ئوخشاش نەرسىلەرنى ئىشلىتەلەيدۇ ھەمدە تورغا ئوخشاش 2-نومۇرلۇق ئايلانما يول بىلەن ئىشلىنىدۇ ، ھەمدە بوشلۇقنىڭ چوڭ-كىچىكلىكىنى ئۆز ئىچىگە ئالغان توغرا كەڭلىكنى ھېسابلىشىڭىزنى تەلەپ قىلمايدۇ. نېمىنىڭ بارلىقىنى ۋە قاچان بولىدىغانلىقىنى قانداق بىلىش كېرەك؟ ئومۇمىي جەھەتتىن ئالغاندا ، مەسىلە ماسونېرنى JS كۈتۈپخانىسىنىڭ ئۈستىگە ئىشلىتىش كېرەكمۇ ئەمەس ، بەلكى قاچان. Masonry JS كۈتۈپخانىسى كىشىنى ھەيران قالدۇرىدىغان بولۇپ ، تور سۇپىسىدىكى بوشلۇقنى تولدۇرغىلى ئۇزۇن يىللار بولدى ، نۇرغۇنلىغان خۇشال ئاچقۇچىلار ۋە ئىشلەتكۈچىلەر ئۈچۈن. ئەگەر ئۇنى ماسوننى يولغا قويۇش بىلەن سېلىشتۇرسىڭىز ، ئۇنىڭ بىر قانچە كەمچىلىكى بار ، ئەلۋەتتە ، ئەمما بۇ يولغا قويۇش تەييار بولمىسا ، بۇ مۇھىم ئەمەس. بۇ قالتىس يېڭى تور سۇپىسىنىڭ ئىقتىدارلىرىنى تىزىشىم ئاسان ، چۈنكى مەن توركۆرگۈچ ساتقۇچىدا ئىشلەيمەن ، شۇڭا نېمە ئىشلارنىڭ يۈز بېرىدىغانلىقىنى بىلىشكە مايىل. ئەمما پروگراممېرلار دائىم ھەمبەھىرلىنىدۇ ، تەكشۈرۈشتىن كېيىن تەكشۈرۈش ئارقىلىق يېڭى ئىشلارنى خاتىرىلەشنىڭ قىيىنلىقىنى ئوتتۇرىغا قويدى. خەۋەردار بولۇش تەس ، شىركەتلەر بەرىبىر ئۆگىنىشنى ئالدىنقى ئورۇنغا قويمايدۇ. بۇنىڭغا ياردەم قىلىش ئۈچۈن ، بۇ يەردە ئاددىي ۋە ئىخچام ئۇسۇللار بىلەن يېڭىلاش بىلەن تەمىنلەيدىغان بىر قانچە مەنبەلەر بار ، شۇڭا ئېھتىياجلىق ئۇچۇرلارغا تېز ئېرىشەلەيسىز:
تور سۇپىسىدا ئىزدىنىش تور بېكىتى بار: ئۇنىڭ تارقىتىلىش خاتىرىلىرى بېتىگە قىزىقىشىڭىز مۇمكىن. ئەگەر RSS نى ياقتۇرسىڭىز ، تارقىتىلغان خاتىرە يەملىرىنى ، شۇنداقلا يېڭى ئىشلەتكىلى بولىدىغان ۋە كەڭ ئىشلەتكىلى بولىدىغان ئاساسىي لىنىيىلەرنى تەكشۈرۈپ بېقىڭ.
تورسۇپا ھالىتى باشقۇرۇش تاختىسى: ئۇنىڭ ھەرخىل ئاساسىي يىل بەتلىرىنى ياقتۇرۇشىڭىز مۇمكىن.
Chrome سۇپىسى ھالىتىنىڭ يول خەرىتىسى بېتى.
ئەگەر ئازراق ۋاقتىڭىز بولسا ، توركۆرگۈچ ساتقۇچىلارنىڭ ئېلان قىلىش خاتىرىسىگە قىزىقىشىڭىز مۇمكىن:
Chrome Edge Firefox Safari
تېخىمۇ كۆپ مەنبەلەر ئۈچۈن تور سۇپىسى Cheatsheet نى زىيارەت قىلىڭ. مېنىڭ ئىشىم تېخى ئەمەلگە ئاشمىدى بۇ مەسىلىنىڭ يەنە بىر تەرىپى. ۋاقىت ، كۈچ ۋە ئىز قوغلاش ئۇسۇللىرىنى تاپالىسىڭىزمۇ ، ئاۋازىڭىزنى ئاڭلاش ۋە سىز ياقتۇرىدىغان ئىقتىدارلارنى يولغا قويۇشتا يەنىلا ئۈمىدسىزلىك بار. بەلكىم سىز مەلۇم بىر خاتالىقنىڭ ھەل بولۇشىنى نەچچە يىل ساقلىغان بولۇشىڭىز مۇمكىن ، ياكى توركۆرگۈدە يەنىلا يوقاپ كەتكەن ئالاھىدە ئىقتىدار. مېنىڭ دېمەكچى بولغىنىم توركۆرگۈچ ساتقۇچىلار ئاڭلايدۇ. مەن بىر نەچچە تەشكىلات ھالقىغان گۇرۇپپىلارنىڭ بىر قىسمى ، مەن دائىم پروگرامما ئاچقۇچىلارنىڭ سىگنالى ۋە تەكلىپ-پىكىرلىرىنى مۇزاكىرە قىلىمىز. بىز ھەر بىر توركۆرگۈچ ساتقۇچىنىڭ ئىچى ۋە مۇنبەر ، ئوچۇق كودلۇق تۈر ، بىلوگ ۋە تەكشۈرۈشتىكى سىرتقى / ئاممىۋى نۇرغۇن ئوخشىمىغان ئىنكاس مەنبەلىرىگە قارايمىز. ھەمدە ، بىز ھەمىشە پروگراممېرلارنىڭ كونكرېت ئېھتىياجىنى ئورتاقلىشىش ۋە ئەھۋاللارنى ئىشلىتىش ئۈچۈن تېخىمۇ ياخشى ئۇسۇللارنى يارىتىشقا تىرىشىۋاتىمىز. شۇڭا ، ئەگەر قىلالىسىڭىز ، توركۆرگۈچ ساتقۇچىلاردىن تېخىمۇ كۆپ تەلەپ قىلىپ ، بىزگە لازىملىق ئىقتىدارلارنى ئەمەلىيلەشتۈرۈشىمىزنى تەلەپ قىلىڭ. مەن ئۇنىڭغا ۋاقىت كېتىدۇ ، شۇنداقلا قورقىتىۋېتىشى مۇمكىن (كىرىشتىكى يۇقىرى توساقنى دېمەيلا قويايلى) ، ئەمما ئۇمۇ ئىشلەيدۇ. بۇ يەردە (ياكى شىركىتىڭىزنىڭ) ئاۋازىنى ئاڭلايدىغان بىر قانچە خىل ئۇسۇل بار: ھەر يىلى JS ، CSS ۋە HTML ھالىتىنى تەكشۈرۈڭ. ئۇلار توركۆرگۈچ ساتقۇچىلارنىڭ خىزمىتىنى قانداق مۇھىم ئورۇنغا قويۇشىدا زور رول ئوينايدۇ. ئەگەر سىز توركۆرگۈدە ئىزچىل ئىجرا قىلىنىدىغان ئالاھىدە ئۆلچەملىك API غا ئېھتىياجلىق بولسىڭىز ، كېيىنكى Interop تۈر تەكرارلاشتا تەكلىپ سۇنۇشنى ئويلاڭ. ئۇ تېخىمۇ كۆپ ۋاقىت تەلەپ قىلىدۇ ، ئەمما Shopify ۋە RUMvision نىڭ Interop 2026 غا بولغان ئارزۇ تىزىملىكىنى قانداق ھەمبەھىرلىگەنلىكىنى ئويلاڭ. بۇنىڭغا ئوخشاش تەپسىلىي ئۇچۇرلار توركۆرگۈچ ساتقۇچىلارنىڭ ئالدىن ئويلىشىشىغا ئىنتايىن پايدىلىق. توركۆرگۈچ ساتقۇچىلارغا تەسىر كۆرسىتىش ئۈچۈن تېخىمۇ كۆپ پايدىلىق ئۇلىنىشلار ئۈچۈن مېنىڭ تور سۇپىسىدىكى Cheatsheet نى زىيارەت قىلىڭ. خۇلاسە تاقاش ئۈچۈن ، بۇ ماقالىنىڭ سىزگە ئويلىنىشقا تېگىشلىك بىر قانچە نەرسىنى قالدۇرۇپ قويۇشىنى ئۈمىد قىلىمەن:
ماسون ۋە باشقا كەلگۈسى تور ئىقتىدارلىرىغا بولغان ھاياجان. ئىشلىتىشنى باشلىماقچى بولغان بىر قانچە تور ئىقتىدارلىرى. بىر نەچچە پارچە ئىختىيارى ياكى 3-تەرەپ كودى قاچىلانغان ئىقتىدارلارنى ئۆچۈرۈۋەتسىڭىز بولىدۇ. نېمە ئىشلارنىڭ يۈز بېرىدىغانلىقىنى ئىز قوغلاش ۋە توركۆرگۈچ ساتقۇچىلارغا تەسىر كۆرسىتىشنىڭ بىر قانچە ئۇسۇلى.
تېخىمۇ مۇھىمى ، مەن سىزنىڭ تور سۇپىسىنى ئىشلىتىشنىڭ پايدىسىغا تولۇق ئىشىنىشىڭىزنى ئۈمىد قىلىمەن.
