ეს არის ჩემი ფორმულა Node.js-ში მარტივი მცოცავის შესაქმნელად. ეს არის სერვერის მხარეს DOM-ით მანიპულირების სურვილის მთავარი მიზეზი და ალბათ ეს არის მიზეზი, რის გამოც თქვენ ხართ აქ.

ჯერ გამოიყენეთ მოთხოვნა გასაანალიზებელი გვერდის ჩასატვირთად. ჩატვირთვის დასრულების შემდეგ, გაუმკლავდით მას cheerio-თ და დაიწყეთ DOM-ით მანიპულირება ისევე, როგორც jQuery-სთან ერთად.

სამუშაო მაგალითი:

Var მოთხოვნა = მოითხოვს ("მოთხოვნა"), cheerio = მოითხოვს ("cheerio"); ფუნქცია parse(url) ( მოთხოვნა(url, ფუნქცია (შეცდომა, პასუხი, ტექსტი) ( var $ = cheerio.load(body); $(".question-summary .question-hyperlink").each(function () ( კონსოლი .info($(this).text()); )); )) ) გარჩევა ("http://stackoverflow.com/");

ეს მაგალითი კონსოლში აჩვენებს ყველა მთავარ კითხვას, რომლებიც ნაჩვენებია SO-ს მთავარ გვერდზე. ამიტომ მიყვარს Node.js და მისი საზოგადოება. უფრო ადვილი არ შეიძლება :-)

დამოკიდებულებების დაყენება:

npm მოთხოვნა cheerio-ს ინსტალაციისთვის

და გაუშვით (თუ სკრიპტი ზემოთ არის crawler.js ფაილში):

კოდირება

ზოგიერთ გვერდს ექნება არაინგლისური შინაარსი გარკვეული კოდირებით და მოგიწევთ მისი გაშიფვრა UTF-8-ზე. მაგალითად, ბრაზილიურ პორტუგალიურ ენაზე (ან ლათინური წარმოშობის ნებისმიერ სხვა ენაზე) გვერდი, სავარაუდოდ, კოდირებული იქნება ISO-8859-1-ში (ა.კ. "ლათინური1"). როდესაც საჭიროა დეკოდირება, მე ვთავაზობ, რომ მოთხოვნა არ მოხდეს შინაარსის ინტერპრეტაცია და ამის ნაცვლად, გამოიყენოთ iconv-lite სამუშაოს შესასრულებლად.

სამუშაო მაგალითი:

Var მოთხოვნა = მოითხოვს ("მოთხოვნა"), iconv = მოითხოვს ("iconv-lite"), cheerio = მოითხოვს ("cheerio"); var PAGE_ENCODING = "utf-8"; // შეცვლა გვერდის კოდირების ფუნქციის შესატყვისად parse(url) ( მოთხოვნა(( url: url, კოდირება: null // შინაარსი ჯერ არ არის ინტერპრეტირებული), ფუნქცია (შეცდომა, პასუხი, ტექსტი) ( var $ = cheerio.load(iconv. decode(body, PAGE_ENCODING)); $(".question-summary .question-hyperlink").each(function () ( console.info($(this).text()); )) ) parse( "http://stackoverflow.com/");

დაწყებამდე დააინსტალირეთ დამოკიდებულებები:

npm მოთხოვნა, დააინსტალიროთ iconv-lite cheerio

Და ბოლოს:

მიჰყვება ბმულებს

შემდეგი ნაბიჯი არის ბმულების მიყოლა. ვთქვათ, რომ გსურთ ჩამოთვალოთ ყველა პოსტერი SO-ს ყველა მთავარი კითხვისგან. თქვენ ჯერ უნდა ჩამოთვალოთ ყველა მთავარი შეკითხვა (მაგალითი ზემოთ) და შემდეგ შეიყვანოთ თითოეული ბმული, გაანალიზოთ კითხვების თითოეული გვერდი, რომ მიიღოთ ჩართული მომხმარებლების სია.

როდესაც დაიწყებთ ბმულების მიყოლას, გამოძახების ჯოჯოხეთი დაიწყება. ამის თავიდან ასაცილებლად თქვენ უნდა გამოიყენოთ რაიმე სახის დაპირებები, ფიუჩერსები ან სხვა. მე ყოველთვის ვინახავ ასინქრონს ჩემს ხელსაწყოთა ყუთში. ასე რომ, აქ არის სრული მცოცავი მაგალითი ასინქრონიზაციის გამოყენებით:

Var url = მოითხოვს ("url"), მოთხოვნა = მოითხოვს ("მოთხოვნა"), async = მოითხოვს ("async"), cheerio = მოითხოვს ("cheerio"); var baseUrl = "http://stackoverflow.com/"; // იღებს გვერდს და უბრუნებს გამოძახებას $ ობიექტის ფუნქციით getPage(url, parseFn) ( request(( url: url ), ფუნქცია (error, response, body) ( parseFn(cheerio.load(body)) )); ) getPage(baseUrl, ფუნქცია ($) ( var კითხვები; // კითხვების ჩამონათვალის მიღება = $(".question-summary .question-hyperlink").map(function () ( return ( title: $(this). text(), url: url.resolve(baseUrl, $(this).attr("href"))); )).get().slice(0, 5); // შეზღუდვა ტოპ 5 კითხვამდე // ყოველი შეკითხვისთვის async.map(კითხვები, ფუნქცია (კითხვა, შეკითხვა შესრულებულია) ( getPage(question.url, ფუნქცია ($$) ( // მომხმარებელთა სიის მიღება question.users = $$(".post-signature .user-details a").map(function () ( return $$(this).text(); )).get(); questionDone(null, question); )); ), ფუნქცია (შეცდომა, კითხვებითპოსტერებით) ( // ეს ფუნქცია გამოიძახება async-ით, როდესაც ყველა კითხვა გაანალიზებულია კითხვებიWithPosters.forEach(function (question) ( // ბეჭდავს თითოეულ კითხვას მომხმარებლის სიასთან ერთად console.info(question.title); question.users.forEach (ფუნქცია (მომხმარებელი) ( console.info ("\t%s", მომხმარებელი); )); )); )); ));

jQuery UI არის jQuery დანამატების ჯგუფი, რომელიც აადვილებს ვებ აპლიკაციის ინტერფეისების შექმნას.

$(დოკუმენტი).ready(function())($("#drag").draggable(); $("#sortable").sortable(); $("#sortable").disableSelection(); $( " #datepicker").datepicker(( თვის სახელები: ["იანვარი", "თებერვალი", "მარტი", "აპრილი", "მაისი", "ივნისი", "ივლისი", "აგვისტო", "სექტემბერი", "ოქტომბერი" " ,"ნოემბერი", "დეკემბერი"], დღისსახელებიმინ: ["ორშაბათი", "სამშაბათი", "ოთხ", "ხუთ", "პარ", "შაბათი", "მზე"])); ));

jQuery UI-ის დაკავშირება

იმისათვის, რომ ისარგებლოთ jQuery UI დანამატების სიმძლავრით, ისინი ჯერ უნდა იყოს დაკავშირებული იმ გვერდზე, რომელზეც გამოყენებული იქნება.

jQuery UI-ის დასაკავშირებლად ორი ვარიანტია:

ლოკალური კავშირი jQuery UI

ოფიციალურ ვებსაიტზე შეგიძლიათ ჩამოტვირთოთ სტანდარტული jQuery UI პაკეტი ან შექმნათ საკუთარი.

სტანდარტული jQuery UI მოიცავს ყველა არსებულ დანამატს და აქვს სტანდარტული თემა. სტანდარტული პაკეტის ჩამოსატვირთად, უბრალოდ გადადით jQuery UI ვებსაიტზე და დააჭირეთ ღილაკს ჩამოტვირთვა.

თუ გსურთ შექმნათ თქვენი საკუთარი jQuery UI პაკეტი, უნდა გადახვიდეთ jQuery UI ვებსაიტზე და მიჰყევით ქვემოთ ჩამოთვლილ ნაბიჯებს ( გამოტოვეთ ეს ნაბიჯები, თუ ჩამოტვირთეთ სტანდარტული პაკეტი):

ნაბიჯი 1: აირჩიეთ საჭირო კომპონენტები

ნაგულისხმევად, ყველა არსებული დანამატი ჩართულია ჩამოტვირთვის ფაილში. თუ ზოგიერთი მათგანი არ არის საჭირო, შეგიძლიათ მოხსნათ მათი სახელები და ამით შეამციროთ საბოლოო ფაილის ზომა ( სტანდარტული jQuery UI პაკეტი აქვს ~1MB ზომა).

გთხოვთ გაითვალისწინოთ: ბიბლიოთეკის ფაილის ზომა გავლენას ახდენს გვერდის ჩატვირთვის სიჩქარეზე, ამიტომ უფრო მცირე ზომა ყოველთვის სასურველია.

ნაბიჯი 2: აირჩიეთ დიზაინი

აირჩიეთ ერთ-ერთი სტანდარტული jQuery UI მოდულის თემა თემის ველში ან შექმენით თქვენი საკუთარი თემა themeroller-ის გამოყენებით.

ნაბიჯი 3: აირჩიეთ ვერსია

აირჩიეთ თქვენი jQuery UI ვერსია Version ველში.

ნაბიჯი 4: ჩამოტვირთეთ jQuery UI

დააჭირეთ ჩამოტვირთვა ღილაკს და შეინახეთ ფაილი თქვენს მყარ დისკზე მოსახერხებელ ადგილას.

ახლა ( განურჩევლად იმისა, ჩამოტვირთეთ სტანდარტული პაკეტი თუ შეიკრიბეთ საკუთარი) თქვენ უნდა დააკავშიროთ jQuery UI სკრიპტთან. ამისათვის თქვენ უნდა ამოშალოთ გადმოწერილი ფაილი და მიუთითოთ ფაილებისკენ მიმავალი გზები jquery-ui-version.custom.cssდა jquery-ui-version.custom.min.jsსცენარის თავში.

Სინტაქსი:

jQuery UI დისტანციური კავშირი

ამ კავშირის ვარიანტში, თქვენ არ შეგიძლიათ jQuery UI პაკეტის მორგება და შეგიძლიათ გამოიყენოთ მხოლოდ მისი სტანდარტული ვერსია.

ბიბლიოთეკის დისტანციურად დასაკავშირებლად, თქვენ უნდა დაამატოთ შემდეგი ხაზები თქვენი გვერდის თავში:

Სინტაქსი:

Თავად გააკეთე

დავალება 1: დააკავშირეთ jQuery UI ბიბლიოთეკა დისტანციურად, რათა სავარჯიშოს კოდი იმუშაოს.

პირველი კითხვა, რომელიც ჩნდება jQuery ბიბლიოთეკასთან მუშაობის დაწყებისას, არის ის, თუ როგორ დავაკავშიროთ იგი? უცნაურია, რომ ამაზე ადრე არ დავწერე და ახლა გადავწყვიტე ამ ხარვეზის შევსება.

ამ სტატიაში მე გეტყვით, თუ როგორ სწორად დაამატოთ jQuery ჩვეულებრივ html ვებსაიტზე და პოპულარულ ძრავებზე.

jQuery-ის დაკავშირება თქვენი ვებსაიტის გვერდიდან

ბიბლიოთეკის დასაკავშირებლად ყველაზე გავრცელებული გზა. პირველ რიგში, თქვენ უნდა ჩამოტვირთოთ უახლესი ვერსია დეველოპერის ვებსაიტიდან. ჩამოტვირთვის გვერდზე წარმოდგენილია ბიბლიოთეკის რამდენიმე ვარიანტი, მაგალითად, ახლა გთავაზობთ ჩამოტვირთოთ "შეკუმშული, წარმოების jQuery 3.1.1" და "Uncompressed, განვითარების jQuery 3.1.1". პირველი ვარიანტი არის ბიბლიოთეკის შეკუმშული ვერსია, მისგან ყველა კომენტარი ამოღებულია, ამ შემთხვევაში ბიბლიოთეკა გაცილებით ნაკლებ ადგილს იკავებს, შესაბამისად გვერდი, რომელზეც ის იქნება დაკავშირებული, უფრო სწრაფად იტვირთება. მეორე ვარიანტი, უხეშად რომ ვთქვათ, არის ბიბლიოთეკის საწყისი კოდი, ის სტრუქტურირებულია ადვილად წასაკითხი ფორმით კომენტარებით და განკუთვნილია ძირითადად დეველოპერებისთვის. ამიტომ, გირჩევთ გამოიყენოთ ბიბლიოთეკის შეკუმშული ვერსია.

ბიბლიოთეკის ჩამოტვირთვის შემდეგ, თქვენ უნდა განათავსოთ ის სერვერზე, სადაც განთავსებულია საიტის ფაილები. მე ჩვეულებრივ ვქმნი "js" საქაღალდეს საიტის ძირში, რომელშიც ვაკოპირებ საჭირო ბიბლიოთეკებს და ვათავსებ ფაილს ჩემი ფუნქციებით.

ახლა შეგიძლიათ პირდაპირ jQuery კავშირზე გადასვლა. ვებგვერდის სტრუქტურა, რომელსაც აკავშირებთ jQuery-ს, შეიძლება განსხვავდებოდეს. მაგრამ ის უნდა შეიცავდეს HTML, HEAD და BODY ტეგებს. ასე რომ, jQuery-ს დასაკავშირებლად, თქვენ უნდა დაამატოთ SCRIPT ტეგი ბიბლიოთეკის ბმულით HEAD ტეგის შიგნით.

საიტის სათაური

ზოგიერთ შემთხვევაში, ბიბლიოთეკა შედის სხეულის დახურვის ტეგამდე, რაც დაკავშირებულია ბრაუზერის მიერ HTML გვერდის დამუშავების თანმიმდევრობით. ვინაიდან ბრაუზერი თანმიმდევრულად კითხულობს ხაზებს, ფაილის ბოლოს jQuery-ს დაკავშირებისას ბრაუზერი ჯერ აჩვენებს საიტს, შემდეგ კი დააკავშირებს დინამიკას. ნელი კავშირით, ეს მიდგომა უზრუნველყოფს საიტის დატვირთვის სიჩქარის ზრდას და მხოლოდ ამის შემდეგ სლაიდერების მუშაობას და დანარჩენს. ამ კავშირის კოდი ასე გამოიყურება:

საიტის სათაური

ყურადღება! მიზანშეწონილია არ შეცვალოთ jQuery ბიბლიოთეკის ფაილის სახელი (ხშირად იცვლება jquery.js), რადგან მომავალში ფაილის ოფიციალური სახელის შენახვა დაგეხმარებათ დაინახოთ ბიბლიოთეკის რომელ ვერსიას იყენებთ (ჩემს მაგალითში, ვერსია 3.1). .1 გამოიყენება).

jQuery-ის დაკავშირება თქვენი ვებსაიტის გვერდებთან გარე წყაროებიდან

ეს მეთოდი კარგია, რადგან ბიბლიოთეკა დაკავშირებულია ვებსაიტზე და არ დევს თქვენს მყარ დისკზე. ეს განსაკუთრებით ეხება მცირე პროექტების დიდ რაოდენობას და ტრენინგებს.

ამ კავშირის მეთოდს ეწოდება "დაკავშირება CDN-თან". შინაარსის მიწოდების ქსელი, ან როგორც მას უფრო ხშირად უწოდებენ CDN (კონტენტის მიწოდების ქსელი), არის სერვერების ქსელი მთელს მსოფლიოში. ისინი ხელს უწყობენ თქვენი ვებ სერვერის მუშაობის გაუმჯობესებას და თქვენს ტრაფიკზე დატვირთვის შემცირებას.

ყველაზე პოპულარული CDN jQuery-ს დასაკავშირებლად:

მე ჩვეულებრივ ვიყენებ Google Developers-ის კავშირს. პროექტის გვერდზე ჩვენთვის უკვე მომზადდა რამდენიმე ფრაგმენტი, უბრალოდ დააკოპირეთ ჩვენთვის საჭირო ხაზი და ჩადეთ ფაილში. ამ კავშირის მეთოდით, კოდი ასე გამოიყურება:

საიტის სათაური

< ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title >საიტის სათაური< / title > < / head > < body > < / body > < / html >

ამ მეთოდის უპირატესობა ის არის, რომ ბევრი საიტი აკავშირებს jQuery-ს Google API-ის საშუალებით, რაც ნიშნავს, რომ დიდი ალბათობით ეს ბიბლიოთეკა უკვე იმყოფება მომხმარებლის ბრაუზერის ქეშში და ის მეორედ საერთოდ არ ჩაიტვირთება.

jQuery-ის WordPress-თან დაკავშირება

jQuery ავტომატურად შედის WordPress-ში, ამიტომ არ არის საჭირო სხვა ვერსიებიდან ბიბლიოთეკების ხელით შეტანა. ეს ხდება შაბლონში php კოდის გამოყენებით:

ეს გამოიწვევს jQuery კავშირის სტრიქონს HEAD ტეგის შიგნით.

წერის დროს WordPress იგზავნება jQuery v1.12.4-ით, მაგრამ, როგორც ხედავთ, ბიბლიოთეკის ვერსია ძალიან განსხვავდება ზემოთ მოცემულ მაგალითებში მოყვანილი ვერსიასგან. შესაძლებელია ბიბლიოთეკის უახლესი ვერსიის დაკავშირება, მაგრამ არის კონფლიქტის შანსი.

იმისათვის, რომ თავიდან აიცილოთ კონფლიქტი, მაგრამ მაინც გამოიყენოთ ბიბლიოთეკის ის ვერსია, რომელიც საჭიროა, თქვენ უნდა გამოიყენოთ სწორი გზა jQuery-ის ჩასართავად functions.php ფაილში:

სტატია განკუთვნილია მომხმარებლებისთვის, რომლებიც ახლახან იწყებენ jQuery UI-თან მუშაობას და სურთ ამ ბიბლიოთეკის პრაქტიკაში გაცნობა.
ფანჯრის ეს ინტერფეისი იღებს ისეთ ძირითად თვისებებს, როგორიცაა ფანჯრების არსებობა, მათი გადატანის შესაძლებლობა, ფანჯრების ზომის შეცვლის შესაძლებლობა, მათი მინიმიზაცია/გაფართოება და ა.შ. ეს არის ის, რაც საბოლოოდ უნდა მოხდეს.
ასე რომ, ჩვენ გვინდა შევქმნათ ინტერაქტიული ფანჯრიანი ვებ ინტერფეისის მაგალითი და ამ მიზნით jQuery UI-ის გამოყენების შესაძლებლობა - მაშინ კეთილი იყოს თქვენი მობრძანება კატაში.

მოკლე შესავალი მათ, ვინც ჯერ კიდევ არ იცის, რა არის jQuery UI, შეგიძლიათ წაიკითხოთ მეტი ამის შესახებ რუსულად შემდეგ ბმულზე. აღნიშნული ბიბლიოთეკის დოკუმენტაციის რუსული თარგმანის გამოჩენა უკვე ნახსენებია Habré .1 Stage-ზე. - მოსამზადებელი. პირველ რიგში, გადმოწერეთ ბიბლიოთეკა ოფიციალური ვებ-გვერდიდან http://jqueryui.com. ინტერფეისს აქვს პერსონალიზაციის მრავალი ვარიანტი, ჩვენი მაგალითისთვის დაგვჭირდება ყველა კომპონენტი და Flick თემა.
ჩამოტვირთული კომპონენტების თქვენს კომპიუტერში ჩამოტვირთვისა და ამოღების შემდეგ, თქვენ მიიღებთ ფაილის შემდეგ სტრუქტურას:

ყველაფერი ნათელია css და js საქაღალდეებში, მაგრამ ჩვენ დავწერთ index.html-ის შაბლონს ასე: