JavaScript становится все более и более популярным. Это стало первым выбором для фронтального развития. С Nodejs, основанными на языке JavaScript, мы также можем разработать высокопроизводительные сервисные услуги. Я даже видел, как JavaScript появляется в области аппаратного программирования. JavaScript постепенно превращается в круглый язык развития.
Но это нелегко использовать JavaScript. В дополнение к освоению его синтаксиса и знанию того, как писать высококачественный код, вам также необходимо понять, как решать сценарии потребностей, которые будут встречаться почти в каждом проекте, таких как: оценка дат, выделение текста, ограничение количества символов и т. Д. Система раздута и также повлияет на производительность системы. Мой подход состоит в том, чтобы собирать и использовать эти общие фрагменты JavaScript и использовать их в первую очередь, когда это необходимо. Ниже приведены 10 элементов практического кода JavaScript, которые я собрал. Основываясь на них, вы также можете создать более мощные плагины JS или функциональные функции.
1. Определите, действительна ли дата
Функция даты, включенная в JavaScript, все еще слишком проста, и трудно удовлетворить потребности анализа и оценки различных форматов дат в реальных проектах. У JQUERY также есть сторонние библиотеки, чтобы упростить обработку, связанную с датой, но иногда вам может понадобиться очень простая функция, не введя огромную третью библиотеку. В настоящее время вы можете использовать следующий код проверки даты, который позволяет настроить формат даты и проверить обоснованность даты.
Функция isValidDate (value, userformat) {// Установить формат по умолчанию, если формат не предоставлен userFormat = userFormat || 'mm/dd/yyyy'; // Найти пользовательский разделитель, исключая // месяц, дневной и год символов var delimiter = /^mdy]/.exec(UserFormat)®]; // Создать массив с месяцем, днем и годом //, поэтому мы знаем порядок формата index var theformat = userformat.split (delimiter); // Создать массив из даты пользователя var thedate = value.split (delimiter); Функция isDate (date, format) {var m, d, y, i = 0, len = format.length, f; for (i; i <len; i ++) {f = format [i]; if (/m/.test(f)) m = date [i]; if (/d/.test(f)) d = date [i]; if (/y/.test(f)) y = date [i]; } return (m> 0 && m <13 && y && y.length === 4 && d> 0 && // Проверьте, является ли это действительный день месяца d <= (новая дата (y, m, 0)). getDate ()); } return isdate (thedate, theformat);}Как использовать:
Следующий вызов возвращает ложь, потому что в ноябре нет 31 дня
isvaliddate ('dd-mm-yyyy', '31/11/22
2. Получите максимальную ширину или высоту набора элементов
Следующая функция очень полезна для разработчиков, которым необходимо выполнить динамический макет.
var getMaxHeight = function ($ elms) {var maxheight = 0; $ elms.each (function () {// В некоторых случаях вы можете использовать opterheight () вместо var height = $ (this) .height (); if (height> maxheight) {maxheight = height;}}); вернуть maxheight;};Как использовать:
$ (элементы). Хейт (getMaxHeight ($ (elements)));
3. Выделите текст
Существует много сторонних библиотек JQUERY, которые могут реализовать функцию выделения текста, но я предпочитаю использовать следующий небольшой кусочек кода JavaScript для реализации этой функции. Он очень короткий и может быть гибко изменен в соответствии с моими потребностями, и вы можете определить стиль выделения самостоятельно. Следующие две функции могут помочь вам создать свой собственный плагин с подсветкой текста.
Function highting (текст, слова, тег) {// Тег по умолчанию, если не предоставляется тег tag = Tag || 'охватывать'; var i, len = words.length, re; for (i = 0; i <len; i ++) {// Глобальная режима для выделения всех совпадений re = new Regexp (слова [i], 'g'); if (re.test (text)) {text = text.replace (re, '<' + Tag + '> $ & </' + Tag + '>'); }} return Text;}Вам также нужно будет выполнять невыполненные функции:
Функция unhighlight (text, Tag) {// Тег по умолчанию, если не предоставляется тег tag = Tag || 'охватывать'; var re = new Regexp ('(<'+Tag+'.+?> | <//'+Tag+'>)', 'g'); return text.replace (re, '');}Как использовать:
$ ('p'). html (hight ($ ('p'). html (), // текст ['foo', 'bar', 'baz', 'hello world'], // Список слов или фраз, чтобы выделить «сильный» // custom Tag));4. Текстовый эффект движения
Иногда вы хотите добавить движение в абзац вашего текста, чтобы каждое слово могло перемещаться. Вы можете использовать следующий подключаемый код jQuery для достижения этого эффекта. Конечно, вам нужно объединить стиль перехода CSS3, чтобы достичь лучших результатов.
$ .fn.animateText = function (задержка, klass) {var text = this.text (); var witds = text.split (''); вернуть это. });Как использовать:
$ ('p'). AnimateText (15, 'foo');
5. Скрыть элементы один за другим
Следующий плагин jQuery может скрыть группу элементов один за другим в соответствии с длиной шага (время интервала), которую вы устанавливаете. Используемые элементы перезагрузки могут достичь хороших результатов.
$ .fn.fadeall = function (ops) {var o = $. var $ el = это; for (var i = 0, d = 0, l = $ el.length; i <l; i ++, d+= o.delay) {$ el.eq (i) .delay (d) .fadein (o.speed, o.ease); } return $ el;}Как использовать:
$ (элементы) .fadeall ({задержка: 300, скорость: 300});
6. Ограничьте количество слов в тексте
Приведенный ниже сценарий позволяет перехватить текст в соответствии с данной длиной символов. Если текст перехвачен, за ним будет автоматически последовать эллипсис.
функция excerpt (str, nwords) {var words = str.split (''); words.splice (nwords, words.length-1); вернуть слова.join ('') + (words.length! == str.split ('') .length? '…': '');}7. Определите текущую адаптивность в соответствующем макете
Многие проекты приняли отзывчивые макеты для адаптации к отображению веб -сайта или приложения на разных устройствах. Вам часто нужно определить, в какой адаптации экрана вы в настоящее время находитесь в коде.
Функция isbreakpoint (bp) {// Точки останова, которые вы устанавливаете в своем CSS var bps = [320, 480, 768, 1024]; var w = $ (window) .width (); var min, max; for (var i = 0, l = bps.length; i <l; i ++) {if (bps [i] === bp) {min = bps [i-1] || 0; max = bps [i]; перерыв; }} return w> min && w <= max;}Как использовать:
if (isbreakpoint (320)) {// точка останова при 320 или меньше} if (isbreakpoint (480)) {// Точка останова между 320 и 480}…8. Глобальный счет
В некоторых сценариях игры или рекламы вам нужно записать количество раз, когда пользователь нажимает кнопку на текущей странице. В настоящее время вы можете использовать функцию jQuery .data () для ее обработки:
$ (element) .data ('counter', 0) // начинать счетчик в Zero .click (function () {var counter = $ (this) .data ('counter'); // получить $ (this) .data ('counter', counter + 1); // set // сделайте что -то еще ...});9. Embed Youku Video
Функция embedyouku (link, ops) {var o = $ .extend ({width: 480, высота: 320, params: ''}, ops); var id = //?v/=(/w+)/.exec(link)®]; Вернуть '<embedFulFullLScreen = "true" id = "embedid" Quality = "High" Align = "middle" AllingCcesscess = "Always" type = "Application/x-Shockwave-Flash" src = "'+id+'?'+O.Ops '' ';}Как использовать:
embedyouku ('http://static.youku.com/v/swf/qplayer.swf', {'wintype = adshow & videoids = xmte3nzq0ntky & isautoplay = false & isshowroletedVideo = false'});10. Создайте динамическое меню или раскрывающееся списки
Во многих сценариях нам нужно динамически создавать меню, раскрывающиеся списки или элементы. Ниже приводится часть самого основного кода для реализации вышеуказанных функций, и вы можете расширить их соответствующим образом в соответствии с фактическими потребностями.
Функция makemenu (элементы, теги) {теги = теги || ['ul', 'li']; // теги по умолчанию var parent = теги [0]; var Child = Tags [1]; var item, value = ''; for (var i = 0, l = item.length; i <l; i ++) {item = item [i]; // отдельный элемент и значение, если значение присутствует, если (/:/.test(item)) {item = item [i] .split (':') [0]; value = elects [i] .split (':') [1]; } // Оберните элемент в элементы тега [i] = '<'+child+''+(value && 'value = "'+value+'' ')+'> '+// Добавить значение, если приведенный элемент+' </'+child+'> '; } return '<' + parent + '>' + items.join ('') + '</' + parent + '>';}Как использовать:
// Выпадающий из выбора Monthakemenu (['январь: Jan', 'февраль: февраль', «март: март»], // пункт: значение ['select', 'option']); // Список продуктов Groceriesmakemenu (['Carrose', 'Letuce', 'tomatos', 'Milk'], ['ol', 'li'];
Выше приведено лишь небольшая часть этих практических фрагментов кода JavaScript. Я также рекомендую вам обратить внимание на сбор или написание таких основных фрагментов кода самостоятельно. Они могут использоваться во многих проектах или предоставлять более полные функции с помощью некоторых модификаций. Использование этих фрагментов кода сэкономит вам много времени разработки.