Краткая история фронтенда
Это было осенью 1989 года, и физик ЦЕРН Тим Бернерс-Ли изобрел язык гипертекстовой разметки... (здесь опущены десятки тысяч слов).
Так как это краткая история, конечно их не может быть куча.Сейчас я постараюсь вкратце рассказать об истории развития фронтенда, как показано на рисунке.
В эпоху фронтенд-слэш-энд-бёрна, когда студенты фронтенда разрабатывали проекты, они использовали нативный JS в сочетании с нативным API, предоставляемым браузером, для прямого манипулирования DOM, борясь с неясной природой нативного API и совместимостью. проблемы различных браузеров. Благодаря голосу Дуанга появился jQuery. Благодаря простому API и отличной совместимости с браузерами он быстро стал наиболее широко используемой библиотекой JavaScript. GitHub, крупнейший в мире базовый веб-сайт, использовал jQuery еще несколько месяцев назад. Полностью откажитесь от jQuery.
В эпоху нативного JS и jQuery наша разработка — это мышление, управляемое событиями, и процесс выглядит следующим образом:
На этапе перехода от управляемого событиями к управляемому данными шаблон MVC когда-то был очень популярен, например, ASP, JSP, ASP.NET и т. д. Эти технологии до сих пор используются некоторыми веб-сайтами, но каждая операция, которая должна общаться с бэкэндом, браузер повторно получит целый кусок HTML, который может изменить только часть данных, а затем повторно отобразит режим разработки, который медленно исчезает из поля зрения людей.
В последние годы, с появлением MVVM framework, мы окончательно избавились от работы DOM, а связь с сервером получает только измененные данные.В это время все что можно увидеть на сайте уже не работает HTML, CSS, все это данные, и каждая маленькая деталь веб-сайта может быть сначала определена, а затем отображена фреймворком. Наше мышление также изменилось на модель, управляемую данными. Процесс выглядит следующим образом:
Данные, которые интерфейсному интерфейсу часто требуется обрабатывать
- Основные типы данных: строка, логическое значение, число, неопределенный, нулевой, символ (ES6)
- Справочные типы данных: объект, функция, массив, регулярное выражение и т. д.
Данные, с которыми нам часто приходится иметь дело в повседневной разработке, — это не что иное, как перечисленные выше базовые типы данных и ссылочные типы данных.Здесь объект в ссылочном типе относится к включению фигурных скобок, а свойства объекта внутри скобки являются парами ключ-значение. В форме {name:'frontEnd'} есть классическая поговорка в JS: "Все является объектом", если мы используем[引用数据类型] instanceof ObjectВы обнаружите, что все возвращенное верно,
Все объекты в JavaScript являются производными от Object, все объекты наследуют методы и свойства от Object.prototype, хотя они могут быть переопределены. Например, прототипы других конструкторов переопределяют свойство конструктора и предоставляют собственные методы toString(). Изменения в объекте-прототипе Object распространяются на все объекты, если только свойства и методы, подверженные этим изменениям, не переопределяются дальше по цепочке прототипов. (из МДН)
Если вы уберете это предложение и сделаете вид, что все в JS является объектом, то вы получите пощечину, потому что String, Boolean, Number, Symbol эти типы значений не являются объектами, так как они не являются объектами, то мы как откуда берутся свойства и методы обычных строк? Хочу знать? Если хочешь знать, посмотри вниз.
Типы строк и объекты String
Тип String используется для представления последовательности символов, состоящей из нуля или более 16-битных символов Unicode, строки. Объект String — это один из трех объектов-оболочек, изначально предоставляемых JavaScript для создания строковых объектов.
- Начните с вопроса интервью
Дамы и господа, пожалуйста, прочтите заголовок:
var ranshaw = 'ranshaw',
str1 = new String(ranshaw),
str2 = String(ranshaw);
// 请确认以下判断是否准确
str1 === ranshaw
str2 === ranshaw
typeof str1 === typeof str2
Если вы правы, значит, вы переступили порог первичного фронтенда, если нет, то рекомендуется купить зажигалку для игры в нарды, не будетгде нажать.
- Строковый объект
В приведенном выше вопросе мы выполняем некоторые операции над str, как показано ниже:
Правильно, str1 это объект String. Что! Разве выше не сказано, что тип String не является объектом? Ну конечно тип String это не объект, а последовательность символов. new String() это чтобы обернуть строку исходного типа «ranshaw», она стала объектом, и мы можем увидеть ее через результаты печати консоли Chrome. str2 показывает, что результатом является строка, а str1 показывает, что это объект и имеет атрибут длины и атрибут _proto_.Через атрибут _proto_ мы также можем получить доступ к некоторым методам, обычно используемым при работе со строками.Итак, вопрос в том, что str2, являющаяся строкой, также может обращаться к свойствам и методам объекта String Что происходит?
Добавление, удаление и изменение данных
Операция с данными, будь то бэкэнд или интерфейс, самое главное - добавить, удалить, изменить и проверить эти четыре операции.Ниже мы классифицируем методы работы с данными из этих четырех аспектов.
нить
Через объект-оболочку, описанный выше, мы знаем, что строка не может изменить свое значение. Методы объекта String в основном возвращают новую строку без изменения исходной строки, поэтому добавьте, удалите или измените эти три. Операция не существует. Следующее представляет собой классификацию методов или операций, подобных добавлениям, удалениям и модификациям, для облегчения сортировки и запоминания.
- увеличивать
var str1 = 'ran';
var str2 = 'shaw';
// 方式一 "+"号拼接
str1 + str2 // 'ranshaw'
// 方式二 模板字符串
`${str1}${str2}` // 'ranshaw'
// 方式三 concat
str1.concat(str2) // 'ranshaw'
- чек об оплате
var str = 'hello world'
// charAt 返回指定位置的字符，参数是从0开始编号的位置
str.charAt(1) // 'e'
// [] 返回指定位置的字符，中括号的值从0开始
str[1] // 'e'
// indexOf 返回要查询字符串第一次出现的位置，如果没有就返回-1；参数1：字符串，参数2：从该位置向后匹配
str.indexOf('o') // 4
str.indexOf('o',5) // 7
// lastIndexOf 同indexOf，区别是lastIndexOf是从尾部开始匹配，参数2为从此位置向前匹配
str.lastIndexOf('o') // 7
str.lastIndexOf('o',4) // 4
// match 用于确定原字符串是否匹配某个子字符串，返回一个数组，成员为匹配的第一个字符串。如果没有找到匹配，则返回null
str.match('ll') // ['ll']
// search 和match类似，返回值为匹配的第一个位置。如果没有找到匹配，则返回-1
str.search('ll') // 2
- удалить и изменить
var str = 'hello world';
// slice 从原字符串取出子字符串并返回，不改变原字符串。参数1：起始位置，参数2：结束位置（不包含）
str.slice(0,5) // 'hello'
// substring 和slice类似
str.substring(0,5) // 'hello'
// substr 与slice和substring作用类似，但参数2为字符串的长度
str.substr(0,5) // 'hello'
// replace 替换匹配的子字符串,一般情况下只替换第一个匹配（除非使用正则）
str.replace('o','k') // 'hellk world'
str.replace(/o/g,'k') // 'hellk wkrld'
- разное
var str = '\nhello world '
// trim 去除字符串两端的空格和制表符（\t、\v）、换行符（\n）和回车符（\r）
str.trim() // 'hello world'
// split 按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组
str.trim().split(' ') // ["hello", "world"]
использованная литература
Упаковочный объект Ruan Yifeng
Изменение мышления переднего плана — от управления событиями к управлению данными