Статьи

Сокровища Techy # 4: Что внутри функции доллара?

Январь 27, 2019

Сегодняшнее Techy Treasure — это еще один основной продукт для меня, нечто простое, но я использую его практически во всех написанных мной сценариях. Это метод для получения ссылок на элементы — либо отдельные элементы, либо коллекции элементов, на которые ссылается имя тега и которые могут быть отфильтрованы по совпадению атрибутов.

У большинства библиотек JavaScript есть такая функция, часто называемая $ (доллар). И хотя все они работают немного по-разному, все они делают одно и то же. Так что, если вы новичок в JavaScript, и вам интересно, что находится внутри этих вездесущих долларовых функций, вот вам немного анатомии!

Как и во всех методах, о которых я писал в этом столбце, я демонстрирую это здесь как глобальную функцию, чтобы сделать примеры более простыми; но на практике вам лучше определить его как метод пользовательского объекта : 

 function get(find, context, conditions) { if(find.indexOf('#') != -1) { return document.getElementById(find.split('#')[1]); } else { if(typeof context == 'undefined') { context = document; } var nodes = [], tmp = context.getElementsByTagName(find); for(var i=0; i<tmp.length; i++) { nodes.push(tmp[i]); } if(typeof conditions == 'undefined') { return nodes; } var filtered = []; for(i=0; i<nodes.length; i++) { var add = true; for(var c in conditions) { if(!conditions.hasOwnProperty(c)) { continue; } var attr = c == 'class' ? nodes[i].className : nodes[i].getAttribute(c); if(attr == null || attr == '' || new RegExp('(' + conditions 
 


  + ')', '') .test (attr) == false) 

				 { 

					 добавить = ложь; 

				 } 

			 } 

			 если (добавить == правда) 

			 { 

				 filtered.push (узлы [I]); 

			 } 

		 } 

		 возврат фильтруется; 

	 } 

 } 


  Метод get() делает три вещи.  Во-первых, он может получить один элемент, сокращение для getElementById : 


 var content = get('#content'); 


  Во-вторых, он может получить коллекцию элементов, сокращение для getElementsByTagName : 


 var paragraphs = get('p'); 


  Но в-третьих, и что самое интересное, я думаю, он может фильтровать коллекцию элементов по совпадениям атрибутов.  Эту функцию составляет метод getElementsByAttributeMatch() , где несколько атрибутов могут быть сопоставлены в одном выражении: 


 var codeblocks = get('code', document, { 'class':'javascript' }); 


  Этот третий пример извлекает коллекцию элементов <code> которые имеют имя класса «javascript»;  или, если быть более точным, элементы, в которых значение атрибута class содержит строку «javascript». 


  На самом деле параметр value каждой пары ключ / значение оценивается как регулярное выражение, поэтому вы можете сделать что-то вроде этого: 


 var codeblocks = get('code', document, { 'class':'j(ava)?script|php' }); 




  В этих примерах вы заметите, что перед объектом условия есть второй аргумент, который определяет контекст поиска.  Вы можете передать другую ссылку на документ, чтобы получить коллекцию в этом контексте (например, страницу внутри iframe ), или вы можете передать ссылку на элемент, чтобы получить коллекцию дочерних элементов в определенном элементе (например, все элементы списка). в списке). 


  Наконец, то, что возвращает этот метод, также зависит от того, что вы запрашиваете.  Для одного элемента он вернет либо этот элемент, либо null ;  для коллекции элементов (независимо от того, отфильтрованы ли они по условиям атрибута или нет) он вернет массив элементов (истинный массив JavaScript, а не коллекцию DOM ), и, если не найдено подходящих элементов, этот массив будет пустым.

34
Share: