У вас есть все эти малоизвестные холодные знания о внешнем интерфейсе?

задний план

В последнее время проектов в компании немного, и она относительно неторопливая.Я гребу по воде и ловлю рыбу на основных платформах технологических блогов.Я приобрел много навыков фронтенда в одно мгновение, некоторые навыки, а некоторые - неслыханное холодное знание. Я не могу переварить его какое-то время. Вздохнул!

Передняя часть действительно широкая и глубокая

Вот я и придумал блажь, а теперь разобрался и поделился с вами.Так же добавил немного обычного накопления и расширил немного контента.Как говорится лучше наслаждаться музыкой в одиночку,чем всем.Давайте примем крещение передка вместе! ! !

На сломанной передней части

HTML Статьи

В адресной строке браузера выполняется код JavaScript

Многие все же должны знать, что код JavaScript можно запустить прямо в адресной строке браузера, начав с javascript:, за которым следует оператор, который необходимо выполнить. Например:

javascript:alert('hello from address bar :)');

Вставьте приведенный выше код в адресную строку браузера и нажмите Enter, оповещение будет выполнено в обычном режиме и появится всплывающее окно.

Следует отметить, что если вы скопируете и вставите код в адресную строку браузера, IE и Chrome автоматически удалит javascript: в начале кода, поэтому для корректного выполнения его необходимо добавить вручную. автоматически удаляется в Firefox, он не поддерживает запуск JS-кода в адресной строке, вздох~

Адресная строка браузера запускает HTML-код

Если есть много людей, которые знают маленький секрет выше, будет меньше людей, которые знают этот секрет HTML-код можно напрямую запустить в адресной строке браузера без ядра IE!

Например, введите следующий код в адресную строку и нажмите Enter для запуска, появится указанное содержимое страницы.

data:text/html,<h1>Hello, everybody!</h1>

Редактор второго изменения браузера

Это еще возня в адресной строке браузера. Скопируйте и вставьте в адресную строку браузера следующий код. После запуска браузер становится примитивным и простым редактором, похожим на блокнот, который идет в комплекте с windows. Без лишних слов попробуем Это.

data:text/html, <html contenteditable>

Ведь благодаря новым дополнениям в HTML5contenteditableАтрибут, когда элемент указывает этот атрибут, содержимое элемента становится редактируемым.

Точно так же выполнение следующего кода в консоли также может сделать редактируемой всю страницу.

document.body.contentEditable='true';

Поле ввода стиля письма в реальном времени

Точно так же он также использует HTML5contenteditableатрибут, разумно добавляет к телу редактируемый тег стиля.

<body>
  <style style="display:block; position: fixed;" contentEditable>
    body { background: red; }
  </style>
</body>

Используйте тег для анализа URL

Много раз нам нужно извлечь из URL-адреса доменное имя, ключевые слова запроса, значения переменных параметров и т. д. Однако обрабатывать строку URL-адреса сложнее, и тег a можно использовать для автоматического анализа URL-адреса.

Основной метод заключается в создании тега в JS, а затем назначении URL-адреса, который необходимо обработать, атрибуту href нашего вновь созданного тега, после чего мы можем получить то, что хотим.

var a = document.createElement('a');
a.href = 'https://juejin.cn/user/2796746682939054/posts';
console.log(a.host);

Используя этот метод, после небольшой инкапсуляции вы можете получить очень практичную инструментальную функцию.Ниже приведен распространенный пример инкапсуляции в Интернете.

function urlParse(url, key) {
  var a = document.createElement('a')
  a.href = url
  var result = {
    href: url,
    protocol: a.protocol.replace(':', ''),
    port: a.port,
    query: a.search,
    params: (function(){
      var ret = {}, centArr,
        seg = a.search.replace(/^\?/, '').replace(/^\?/,'').split('&')
      for (i = 0, len = seg.length; i < len; i ++) {
        if (!seg[i]) { continue }
        centArr = seg[i].split('=')
        ret[centArr[0]] = centArr[1]
      }
      return ret
    }()),
    hash: a.hash,
    file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1],
    path: a.pathname.replace(/^([^\/])/, '/$1'),
    relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1],
    segments: a.pathname.replace(/^\//, '').split('/')
  }
  a = null
  return key ? result[key] : result
}

H5 имеет новые URL-адреса API, которые также могут быстро обрабатывать ссылку.

var url = new URL('https://www.baidu.com/')
url.hash
...

Элемент с атрибутом Id создает глобальную переменную

На HTML-странице все элементы с установленным атрибутом ID будут создавать соответствующие глобальные переменные в среде выполнения JavaScript, что означаетdocument.getElementByIdОн выглядит лишним, как человеческий зуб мудрости. Но в реальном проекте лучше честно писать то, что хочется, ведь шанса на хаос в обычном коде гораздо меньше.

<div id="test"></div>
<script>
    console.log(test)
</script>

теги script содержат произвольную информацию

Мы можем сохранять в нем любую информацию, установив атрибут type тега скрипта в text, а также очень удобно потом получить информацию в js.

<script type="text" id="template">
	<h1>欢迎关注公众号：猴哥说前端</h1>
</script>

var text = document.getElementById('template').innerHTML

CSS-статьи

эффект текста размытия

Просто добавьте следующие две строки кода, чтобы добиться размытия текста.

color: transparent;
text-shadow: #111 0 0 5px;

Обычный текст VS нечеткий текст, разве это не круто, хахаха.

эффект матового стекла

На самом деле эффект размытия матового стекла технически относительно прост, достаточно использовать свойство blur в фильтре css (filter). Но чтобы получился хороший эффект матового стекла, нужно уделить внимание множеству деталей. Простой пример приведен ниже:

.blur {
    display: block;
    width: 300px;
    height: 300px;
    margin: 100px auto;
    filter: blur(10px);
}

<img src="./img/test.png" class="blur" alt="">

На фото мой милый синий толстяк (●'◡'●)

несколько границ

В css мы можем использовать повторение назначенной box-shadow для достижения эффекта множественных границ.

/*CSS Border with Box-Shadow Example*/
div {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
    height: 200px;
    margin: 50px auto;
    width: 400px
}

Простые операции также можно выполнять в CSS.

В ежедневной разработке мы часто сталкиваемся с такими требованиями:

Левая или правая ширина фиксирована, а остальная часть заполняется автоматически.

Многие мелкие партнеры могут подумать об использовании гибкой верстки, установив flex: 1; сделать так, чтобы она заполнялась автоматически, конечно, этот подход тоже правильный, но у нас есть более простой способ, то есть использовать функцию calc из css, пример код выглядит следующим образом:

.container{
	width: calc(100% - 50px);
}

Функция calc() используется для динамического вычисления значения длины.

Следует отметить, что перед оператором и после него необходимо резервировать пробел, например: width: calc(100% - 10px);
Любое значение длины может быть рассчитано с помощью функции CALC ();
Функция Calc () поддерживает «+», «-», «,« * »,« / »;
Функция calc() использует стандартные математические правила приоритета;

JS-статьи

Поменять местами значения двух переменных

Как правило, происходит обмен значениями двух переменных.Первое, о чем все думают, может быть преобразование через промежуточную переменную, но на самом деле есть более быстрый способ написать это.Код выглядит следующим образом:

var a=1, b=2
a=[b, b=a][0]

быстрое округление чисел с плавающей запятой в меньшую сторону

JavaScript не является целой концепцией, но его можно легко обращаться с оператором носа при получении эффективности.

|0 и ~~ являются хорошим примером, используя их можно преобразовать с плавающей запятой в целое число быстрее, чем аналогичный parseInt, Math.round с точки зрения эффективности. Полезно при работе с такими эффектами, как смещение пикселей и анимации.

(12.4 / 4.13) | 0
// => 3
~~(12.4 / 4.13)
// => 3

генерировать случайную строку

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

Но ниже есть более простой способ, код такой:

function generateRandomAlphaNum(len) {
    var rdmString = "";
    for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
    return rdmString.substr(0, len);
}

В основном с использованием характеристик метода toString()

Когда а === а - 1

На первый взгляд, чтобы увидеть, насколько ложь это конгруэнтное стиль, но все, что есть общая причина, то давайте посмотрим на обстоятельства, при которых это уравнение установлено.

Первый случай — это Бесконечность, или, можно сказать, положительная и отрицательная Бесконечность.

👉🏻 Знание: в JavaScript Infinity — это литерал типа Number, что означает бесконечность. Когда значение типа Number превышает максимальное значение, которое может быть представлено во время операции, оно получает бесконечность.

let a = Infinity;

console.log(a === a - 1); // true

let b = -Infinity;

console.log(b === b - 1);  // true

Так есть ли другая ситуация? Или замените его наa == a-1Какие еще ситуации существуют? Вы можете принять участие в обсуждении в разделе комментариев ниже.

пародия

CSS подделка

Давайте догадаемся, если вы добавите стиль в код, что будет эффект?

{
    cursor: none !important;
}

(Картинка взята из сети. Если есть какие-либо нарушения, пожалуйста, свяжитесь со мной)

`console.log`пародия

Хромconsole.logОн поддерживает добавление стилей к тексту, даже изображения журналов. Таким образом, вы можете переопределить метод журнала по умолчанию и применить к тексту для журнала эффект размытия CSS, чтобы, когда кто-то пытается вызвать console.log(), текст размывался. Так холодно, я сказал, что не смеялся.

var _log = console.log;
console.log = function() {
  _log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);');
};
console.log('你是逗逼吗')

Я обезьянософт, и ваши [Три ссылки] - самая большая мотивация для создания обезьянософта. Если в этой статье есть какие-либо ошибки или предложения, пожалуйста, оставьте сообщение!

Ссылаться на:

1,What are the most interesting HTML/JS/DOM/CSS hacks that most web developers don't know about?

2,45 Useful JavaScript Tips, Tricks and Best Practices

3.10 Small Things You May Not Know About Javascript

4.W3school

5.Неизвестная сторона фронтенда — коллекция холодных знаний фронтенда