Alloyteam Conf 2017 Живая запись

внешний интерфейс JavaScript


Во-первых, это представление больших парней.AC - это ежегодное собрание по обмену технологиями команды Alloy Team, и некоторое время назад TFC в основном приглашала для обмена технологиями лидеров отрасли. AC надеется предоставить разработчикам лучший опыт участия в конференции, а также надеется, что все присутствующие на сцене поделятся своими историями.
Вставьте вступительную танцевальную картинку:

Сессия 1: Веб-изоморфный прямой вывод для сотен миллионов пользователей

Возьмем в качестве примера заинтересованные племена, чтобы объяснить изоморфный прямой вывод Web для сотен миллионов пользователей.
Сначала вводятся некоторые основные понятия.
Что такое прямо?

以 Node 作为后端语言实现的服务端渲染页面并输出的技术。

Что такое изоморфизм?

客户端与服务端可以共享部分代码

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


Далее тема в основном делится на две части: изоморфный прямой вывод и высокая доступность услуг.

Как перестроить напрямую

Три элемента изоморфизма прямо
  • Консистенция DOM
    Поддержание согласованности DOM использует идею виртуального DOM React. сервер черезReactDomServer.renderToStringСоберите строку HTML и верните ее в браузер. Сторона браузера в соответствии с данными, возвращаемыми серверной сторонойReactDom.renderиз реального DOM.
  • Согласованность данных
    Поддержание согласованности данных Сервер запрашивает данные, которые должны быть отправлены прямо со страницы через http.request, сохраняет данные через хранилище, а браузер отображает данные, возвращенные сервером, через атрибут хранилища в Provider.
    возникшие проблемы: Интерфейсный код не может быть выполнен на сервере, браузер используетajax, Сторона узла используетhttp.requestКак решить.
    Интерфейсный код, который не может быть выполнен на сервере, обрабатывается с помощью тегов и инструментов сборки.
    `_BROWSER_`;
...
`_END_`;
  • Согласованность маршрута
    Внешние и внутренние маршруты поддерживаются согласованными, чтобы избежать возврата страниц с ошибками.
строить планы

Это достигается за счет прямолинейного выхода машины из кадра.

  • Во-первых, это сборка проекта
  • Далее идет извлечение действий.
    Рабочий процесс всей рамной машины выглядит следующим образом:

высокая доступность

Разработка и отладка

Локальная разработка и отладка набора фреймов с помощью набора инструментов командной строкиfireDragon, выполните следующую команду.

npm link // 建立全局链接
firedragon init //初始化路由配置
firedragon // 读取路由配置文件，启动服务
аварийное восстановление

Существует два метода аварийного восстановления: машина кадров выполняет гибкую обработку, а уровень доступа пересылает.

стресс тест

пройти черезwetest.qq.comПлатформа отслеживает различные данные приложений, чтобы понять доступность и выявить узкие места в производительности.

оттенки серого

Внедрите публикацию в оттенках серого и постепенно увеличивайте количество пользователей, посещающих прямую страницу, с 10 до 300 миллионов, а количество серверов — с 1 до 111.

Мониторинг сигналов тревоги

На уровне сервера отслеживайте использование ЦП, производительность ЦП, использование памяти, дисковый ввод-вывод и сетевой ввод-вывод.
Данные времени выполнения из ошибок скриптов, тестов, PV/UV, качества прямого сервера, качества внутреннего интерфейса и журналов окрашивания.

Сессия 2: Практическая битва за улучшение юзабилити крупных веб-проектов без ошибок скриптов

Фактическая борьба с нулевыми ошибками сценария в основном объясняется следующими пятью аспектами.

Как узнать, что не так с вашим кодом

отзыв клиента? Серийные смертельные вызовы босса? Попробовали эти мысли и приняли более эффективное решение.

Состав базовой системы мониторинга

Состав системы разделен на три этапа: мониторинг -> отчетность -> система сбора данных.

  • монитор
    использоватьtry-catch,window-onerror.
  • отчет
    Отправитьajaxзапрашивать или использовать напрямуюimg.
  • система сбора данных
    • Обеспечить интерфейс отчетности
    • Хранить данные отчета
    • Дисплей анализа данных

Анализ и оптимизация сообщений об ошибках

Отчет обнаружил, что многие столкнулисьscript errorОшибка вызвана политикой браузера о том же происхождении.
Как это решить?scriptдобавить тегиcrossoriginатрибут, серверная часть выполняет обработку CORS.

Веб-безопасность и ошибки сценариев

Анализ сценария ошибок на основеSourceMapрешение для мониторинга.
путем созданияSourceMapФайл поддерживает отношение сопоставления между исходным файлом и обработанным файлом, используяVLQкодировка для хранения карты.
или используйте открытый исходный кодsentry.

Политика безопасности контента CSP

Отслеживайте внешние ресурсы в белом списке и сообщайте о них.

  • Как использовать
    HTML MetaЭтикетка
    <meta http-equiv="Content-Security-Policy" content="script-src 'self'" >
    HTTP Header(в заголовке ответаCSPкоманда)
  • настроить
      使用上报（不拦截），拦截两种方式。
Напрямую используйте https://

Тесты разработчиков и ошибки скриптов

Рекомендуется два плагина,js-error-dialogвсплывающее окно с ошибкой иprettyjsФорматирование кода, подсветка и отображение ошибок.

Сессия 3: Как построить постмодернистскую систему разработки интерфейсов

Первый веб-сайт, разработанный разработчиком для обмена вопросами, направляется, и вводится тема интерфейсной разработки, и она описывается по трем ссылкам: среда разработки, подключение и производственная среда.

развивать

Разработка ведется из трех основных звеньев, скаффолдинга и командной строки, компонентизации и совместной отладки интерфейсов.

  • Строительные леса против командной строки
    Построение каркаса рассматривается из пяти элементов: быстрое развертывание и обновление, групповое соглашение, быстрая настройка, производительность страницы и производительность сборки.
    Основываясь на вышеуказанных элементах, команда сплава разработалаsteamerjs. Готовый механизм подключаемых модулей позволяет легко и быстро создавать проекты, просто введите следующие команды:
      npm i -g steamerjs
  npm i -g steamer-plugin-kit
  npm i -g steamer-react
  steamer kit
  • составной
    Компонентизация рекомендуется для принятия метода разработки межпроектных компонентов и публикации общих компонентов в общедоступной сети.npmилиnpmЧастный сервер, легко повторно использовать компоненты в проектах.
    Отличные библиотеки компонентов в отрасли, такие какelement.
  • отладка интерфейса
    Некоторые инструменты и плагины рекомендуются,postman,easy-mock.com,steamer-plugin-mock.

Связывание среды разработки и производственной среды

  • Отчетность по данным и мониторинг ошибок
    В основном принимают некоторые зрелые рыночные решения. Рекомендации по статистике Статистика Baidu или статистика Tencent, рекомендации по мониторингу производительностиwetest, рекомендация по мониторингу журналаsentry.io.
  • Непрерывная интеграция
    Проекты с открытым исходным кодом могут использоватьgithub + travis-ci, частные проекты могут использоватьbitbucket + pipeline or github + pipeline.
    Спецификация кода рекомендует использовать напоминания IDE +pre-CommitОсмотр.
    Развертывание тестовой среды
    • Многодоменная тестовая среда
      Для чистых веб-сайтов не требуются никакие прокси-инструменты, а тестирование удобно. Сохраняйте серверы.
    • Одно доменное имя и несколько тестовых сред
      Для встроенных страниц APP удобно тестировать. Каждая тестовая среда независима и не мешает друг другу.

Производственная среда

Рекомендуется использовать Tencent Cloud для производственного развертывания (здесь есть жесткое размещение рекламы, ха-ха~)

Сессия 4: Обмен темами Service Worker

Прежде всего, что такое Service Worker.
Service Worker — это метод запуска JS в фоновом режиме браузера для обработки сетевых запросов и управления соответствующим кешем. Сервисные работники представляют собой альтернативу кэшу приложений.

Начать быстро

Пример простейшего сервисного работника:

 if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./sw.js')
 }

 // sw.js
 self.onfetch = (e) => {
    e.respondWith(new Response('Hello Service Worker!'))
 }

Базовые знания

  • Жизненный цикл
    Первая загрузка пройдетInstalling -> Active, если есть ошибка, он войдетError.
  • механизм обновления
    Обновления Service Worker проходятInstalling -> Waiting -> Active, если будет ошибка, то тоже войдетError.

Инженерная практика

  • совместимость

  • URL сервис-воркера
    Не вводите номер версии! ! ! Правильный способ — оставить URL-адрес ПО без изменений и под тем же доменным именем, что и домашняя страница.

    xxx.com/xxx/sw.js

  • Dev Tool
    Инструменты отладки в Chromenetworkопции,Sizeстолбецfrom Service WorkerвключенService Workerзагруженный ресурс.

  • строить автоматически
    Более зрелым в отрасли является sw-precache от Google. Он также очень прост в использовании, с одной строкой команды:

    sw-precache —config=sw-config.js
// sw-config.js
module.exports = {
  // 需要SW缓存的⽂文件，默认使⽤用缓存优先策略略
  staticFileGlobs: [
      'dist/cdn/**',
      'dist/webserver/**'
  ],
  // 前缀替换
  stripPrefixMulti: {
      'dist/cdn/': '//path/to/your/cdn/',
      'dist/webserver/': '//path/to/your/webserver'
  },
  // 输出路路径
  swFile: '/dist/webserver/sw.js',
  // 动态内容的缓存策略略
  runtimeCaching: [{
      // 对于所有url中带有 '/api/' 的请求，优先⽹网络请求，若离线，则使⽤用之前的缓存
      urlPattern: /\/api\//,
      handler: 'networkFirst'
  }]
};

Конечно, sw-precache также имеет некоторые недостатки, такие как отсутствие встроенной среды выполнения и поддержки внешних ресурсов CDN.
Учитывая эти дефекты, были сделаны некоторые улучшения на основе sw-precache для устранения этих недостатков, названные create-sw.

  • доступ к бизнесу
    Модуль сопоставления мобильного телефона QQ с ближайшим номиналом использует эту схему. Около 80% пользователей Android, потому что встроенный браузер Tencent мобильного телефона Android QQ использует ядро ​​​​X5, а уровень поддержки API сервисного работника достигает 91%. Эффективность использования Service Workers составляет около 50%.

Зачем нужны сервис-воркеры

  • Замените ресурс на
  • Загружается быстрее, чем 304
  • Возможность работы в автономном режиме
  • Полная возможность управления кешем
  • Прогрессивное улучшение, безболезненная миграция

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

Сессия 5: Javascript и машинное обучение

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

делиться целями

  • Овладейте основными понятиями машинного обучения
    Машинное обучение — это алгоритм, который генерирует алгоритмы. Искусственная нейронная сеть в настоящее время является самым популярным методом машинного обучения, и нейронная сеть рассчитывается путем соединения большого количества искусственных нейронов.
  • Освоение классификаторов нейронных сетей
    В основном он говорит о линейной классификации, классификации XOR и классификации данных, а также запускает демонстрацию классификации данных на месте.

  • Освойте два метода обучения нейронной сети
    • Нейронная сеть мутации генетического алгоритма
    • Нейронная сеть коррекции обратного распространения
  • Освойте генетический алгоритм + нейронная сеть
    Возьмите FlappyBird в качестве примера. Генерировать группу популяций случайным образом -> выполнить программу заданного уровня -> дождаться, пока все популяции умрут, и взять верхние 20% в соответствии с наивысшим баллом -> перейти к следующему раунду для выбранных 20% и 80% популяции, мутировавшие из их уровневой программы.
    Перейдите к шагу 2, чтобы выполнить программу уровня, пока проверка уровня не будет завершена.
  • Овладейте алгоритмом обратного распространения
    Обратное распространение, сокращение от «обратное распространение ошибки», является распространенным методом, используемым в сочетании с методами оптимизации, такими как градиентный спуск, для обучения искусственных нейронных сетей. Этот метод вычисляет градиент функции потерь для всех весов в сети. Этот градиент возвращается обратно в метод оптимизации, который используется для обновления весов для минимизации функции потерь. Обратное распространение требует, чтобы для каждого входного значения был получен известный результат, чтобы вычислить градиент функции потерь. Поэтому его обычно считают контролируемым методом обучения.
  • Освойте распознавание рукописных цифр
    Улучшите распознавание рукописного текста с помощью машинного обучения.

Суммировать

  • Все, что можно написать на JS, будет написано на JS.
  • webgl — хороший выбор для обучения нейронных сетей
  • Навыки ИИ и программирование баз данных, сетевое программирование станут обычными навыками
  • Квантовые вычисления не могут пройти через все деревья весов нейронных сетей, все еще необходимо изучать алгоритмы
  • Машинное обучение не может добиться качественных прорывов до прорывов в фундаментальной физике
  • Человечество уничтожают люди или стихийные бедствия, а не искусственный интеллект.

Сессия 6: Эффективный дизайн анимации H5 и оптимизация производительности

Обмен в основном берет в качестве примера практику страницы подарков заинтересованного племени и делится на следующие темы:

Общие схемы анимации

  • GIF
    Недостатки очевидны
    • это ресурс изображений
    • До 256 цветов
    • Полная прозрачность поддерживается, полупрозрачность не поддерживается
    • Недоступно для «True Color» — RGB
    • Качество анимации пропорционально объему ресурсов
  • APNG
    Недостатки очевидны
    • Также ресурс изображений
    • неофициальное одобрение
    • Первый кадр в формате PNG, за которым следуют блоки расширения.
    • низкая поддержка
  • Video
    Это хорошее решение, но необходимо учитывать проблемы с пропускной способностью.
    • Установите для свойства autoplay значение autoplay
    • Установите свойство цикла для управления циклом
    • Длина видео имеет значение (12–30 секунд)
    • Пропускная способность является проблемой
  • SVG
    • Вектор без искажений
    • Сложность рендеринга сложных растровых эффектов.
    • Сложные анимации имеют проблемы с рендерингом
  • Canvas
    Рекомендация также является основным методом в отрасли.
    • Программируемый холст
    • 2D Context API
    • Одиночный элемент Dom без сохранения состояния
    • WebGL
  • JS
    • Управление DOM, CSS с помощью JS
    • Самоподдерживающийся поток времени и скорость анимации
  • CSS3
    • анимация перехода
    • Анимация по ключевым кадрам (ключевые кадры)
    • Механизм рендеринга будет использовать пропуск кадров, чтобы обеспечить плавность анимации.
    • Механизм рендеринга останавливает или уменьшает частоту обновления анимации для невидимых элементов.


Какой из этих вариантов лучше? Производительность говорит! Анализ производительности можно выполнить с помощью инструмента FPS stats.js.

Адаптация к мобильному экрану

Экранизация мобильного терминала делится на следующие сценарии:

  • задний план
    • Фон представляет собой сплошной цвет или градиентный цвет, непосредственно покрытый
    • Фон представляет собой одно большое изображение, установленное на обложку.
    • Фон представляет собой повторяемую текстуру, просто повторите ее напрямую.
  • основной корпус
    • Базовый размер основной области iphone6 ​​по умолчанию
    • Элементы, расположенные в зависимости от предметной области
    • Масштаб центра экрана по умолчанию
    • Используйте rem для поддержания целостности страницы и удобства пользователей.
      Как определить основную площадь?
  • крайний элемент
    • Субъектно-независимые элементы, такие как музыкальные картинки, инструкции по эксплуатации и т. д.
    • В фиксированном положении на экране в зависимости от положения экрана

Мониторинг производительности и оптимизация

Нужно учитывать потребление памяти и частоту кадров, рекомендуемые инструменты stats.js и Chrome developTool.

  • Использовать аппаратное ускорение графического процессора

    • Избегайте частых перерисовок и перекомпоновок
    • Избегайте ширины и высоты, используйте transform:scale(x)
    • Избегайте полей, сверху/слева, используйте преобразование: translate(x, y)
    • Сразу после создания элемента установите transform: translateZ(0) или translate3d(0,0,0)
    • Элементы визуализируются с использованием отдельных слоев.

  • Сжатие изображения

    • Сжатие изображения: тинипниtinypng.com/
    • Слияние изображений:Tony Tony.club/tool/oh ..., чтобы просмотреть анимацию кадра
    • TextureMerger

  • проблемы с производительностью
    Для мониторинга производительности используйте рекомендуемый ранее stats.js. В результате анализа установлено, что перевод значительно превосходит фон.
    В ходе тестирования было обнаружено, что анимация рваная и очевидна заморозка, что может быть вызвано слишком большим размером изображения.

  • график отладки производительности
    Как появляется зуб пилы?

    • GPU срабатывает при падении FPS
    • Большое изображение -> Удалить кадр
    • Видеокарта для записи больших изображений

  • Покадровая анимационная картинка
    Используют ли покадровые анимации комбинированные изображения? Не рекомендуется использовать HTTP2.0 в сочетании. Изображение спрайта после объединенного изображения будет иметь пустую область, анимационное изображение около 40-50 кадров, а одно изображение до 500500px, 4000px после объединения изображений3000 пикселей.

  • Схема оптимизации покадровой анимации - zip архив

    • Упаковка ресурсов для уменьшения количества запросов
    • Избегайте одного большого узкого места при рендеринге изображений
    • Фронтендовая декомпрессия с помощью jszipstuk.github.io/jszip/
    • jszip анализирует ArrayBuffer, base64?
    • URL.createObjectURL(blob)
      Используйте развертывание CDN ресурсов zip-анимации, ускорение максимального возраста и внешнего кэша.

  • Схема оптимизации покадровой анимации - indexedDB

  • Аппаратное ускорение будет изменить

    • Уведомлять браузер заранее, какие свойства элемента будут анимированы
    • Предварительная оптимизация браузера
    • Не злоупотребляйте

  • Проблемы совместимости элементов управления анимацией CSS3

    • Большая ошибка обратного вызова после анимации CSS3 с использованием setTimeout
    • CSS3 Animation предоставляет события анимации animationStart и animationEnd.
    • Некоторые машины не поддерживают
    • Понизьте версию с помощью JavaScript для точного контроля

  • Проблемы совместимости с контролем FPS

    • установить время ожидания/установить интервал. Неаккуратность в исполнении
    • использовать запросAnimationFrame
    • В соответствии с частотой обновления браузера
    • IOS поддерживает все, уровень поддержки Android составляет около 89%

  • Ограничение частоты кадров RAF
    Обычно рекомендуется обеспечить частоту кадров 60 FPS. Если вы не ограничиваете частоту кадров, используйте RAF, чтобы играть свободно, но вам нужно обратить внимание на размер пакета ресурсов.

  • Проблемы совместимости Адаптация Canvas Retina
    250px 250 пикселей исходного до 500 пикселейХолст размером 500 пикселей оказывается размытым, что вызвано соотношением пикселей устройства window.devicePixelRatio. Его можно нарисовать на холсте размером 500 пикселей * 500 пикселей, а затем масштабировать (0,5).

оценка производительности

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

  • Метод оценки производительности
    Сначала создайте на странице 200 квадратных элементов DIV.
    Каждый DIV имеет ширину и высоту 100 пикселей, а центральная точка начального положения DIV совпадает с центральной точкой страницы.
    Установите время t1 и t2 для случайного смещения, масштабирования и преобразования каждого DIV на странице в течение каждого периода кадра.
    Время начала t1, время окончания t2, количество кадров n
    fps = 1000 * n/t
    Возьмите 10-кратную частоту кадров в качестве оценки производительности.
    ``` score = floor( 10000 * n / t)
    оценка
  • меры по повышению эффективности
    • Уменьшить количество кадров (количество картинок)
    • Уменьшить сложность оформления и анимации
    • Отменить эффект
    • использовать@1xкартина

Автоматизация и конфигурируемость

Продукты часто добавляются/заменяются подарками, и, несомненно, не рекомендуется изменять код каждый раз, когда меняется продукт. Следовательно, необходимо изменить эффект анимации на настраиваемый, определить единый файл конфигурации, ресурс анимации однозначно идентифицируется по packageID, а конфигурация подарка отделена от ресурса анимации.

  • "Нормальная операция"
    • подарочное "панно" ленивая загрузка
    • подарок "config" предварительно загружен
    • Подарочная панель "Картинки" с предзагрузкой
    • Подарочная предварительная загрузка «анимационных ресурсов» при вызове панели
    • подарок "анимационный ресурс" кеш indexDB

Ресурсы курса

GitHub.com/CAE или/AC-H…

Сессия 7: Механизмы асинхронной обработки в эпоху ES7

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

Собственное решение Javascript для асинхронности

  • Перезвоните
    Преимущества и недостатки функций обратного вызова очевидны.
    Преимуществом является простота, легкость понимания и развертывания.
    Недостатком является то, что он не способствует чтению и сопровождению кода, сильно связан, процесс хаотичен, и для каждой задачи можно указать только одну callback-функцию.
  • прослушиватель событий
    В отличие от обратных вызовов. Добавьте прослушиватели событий, чтобы активировать логику обработки событий прослушивателя в асинхронных функциях.
  • Опубликовать/подписаться
    Pub/Sub похож на «прослушиватель событий», но лучше последнего. Он может контролировать работу программы и выполнять многозадачную привязку.

Решите асинхронный способ с jQuery

через jQuerywhenметод также может достичь чего-то вродеPromiseфункцию объекта. и черезwhenВы можете сделать несколько асинхронных параллельных запросов, а затем получить возвращаемое значение для обработки обратного вызова.
пройти черезdoneилиthenЕсть два способа перезвонить.

Решите асинхронный способ с промисами

Сила промисов заключается в том, чтобы легко моделировать сложную асинхронную обработку.
Затем краткое введениеpromiseAPI, подробно описывать не буду:

  • then(onResolve, onReject)
  • catch(onReject)
  • resolve(callback)
  • reject(callback)
  • all(Array)
  • race(Array)

Путаница, вызванная одновременным существованием синхронных и асинхронных вызовов

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

Идеальное решение для асинхронной обработки в рамках ES7

Решение асинхронных методов через async/await имеет следующие преимущества:

  • простой и чистый
  • Синхронная и асинхронная обработка смешанных ошибок
  • Условная дискриминация
  • Легко получить промежуточные значения
  • информация о стеке ошибок
  • Легко отлаживать


Основные правила async/await:

  • async означает, что это асинхронная функция, и await можно использовать только в этой функции.
  • await означает дождаться обещания вернуть здесь результат, а затем продолжить выполнение.
  • За ожиданием должен следовать объект обещания.
  • Хотя await ожидает объект обещания, вам не нужно писать .then(), вы можете напрямую получить возвращаемое значение.

Послеобеденный десерт:

Сессия 8: Постфункциональное программирование в эпоху ES2017

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

function f(h){
    return h + 1;
}
var x = 3;
f(x + 1);

Понимание функционального программирования означает:

  • Умение читать открытый код
  • Развивайте новые способы мышления
  • Пишите аккуратно организованный код

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

Что такое функциональное программирование

Функциональное программирование — это парадигма программирования, которая рассматривает компьютерные операции как вычисление функций, уделяя особое внимание чистой логике и математике.

Возможности функционального программирования

  • Декларативный и императивный
  • Потоковое, больше подходит для человеческого чтения

Краеугольный камень функционального программирования — чистые функции

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

  • кеш переменных
    var memoize = function(f) {
var cache = {};
return function() {
  var arg_str = JSON.stringify(arguments); 
  cache[arg_str] = cache[arg_str] || f.apply(f, arguments);
  return cache[arg_str];
};
};
  • побочный эффект
    • вставить запись в базу
    • отправить http запрос
    • переменные данные
    • печать/журнал
    • Получить пользовательский ввод
    • DOM-запрос
    • доступ к статусу системы и т. д.
      Выполнение этих функций не всегда возвращает один и тот же результат, и этого можно избежать, отложив выполнение.

Преобразование и манипулирование функциями

  • карри
    Преобразование функций низкого порядка в функции высокого порядка с помощью каррирования можно наглядно сравнить с процессом поедания Pac-Bean.
  • Compose
    Выполнять справа налево.
    let f = x => x + 1;
let g = x => x * 2;
g(f(1))
compose(g, f)(1)
  • Functor
    Functor — это класс-контейнер, который реализует функцию карты и подчиняется определенным правилам. позвонивContainer.ofСкладывайте вещи в контейнеры, чтобы изолировать внешние воздействия, касайтесь и манипулируйте значениями в окне через Карту и получайте контейнеры, содержащие новые значения.
    var Container = function(x) {
  this._value = x;
}
Container.of = function(x) {
  return new Container(x);
}
Container.of(3)
// => Container(3)
Container.prototype.map = function(f){
  return Container.of(f(this._value))
}
Container.of('flamethrowers').map(function(s) {
  return s.toUpperCase()
}
// => Container('FLAMETHROWERS')
  • Monad
    Функтор, реализующий цепочку.
    chain( flatMap )
    После выполнения с помощью Map (возможно, с добавлением контейнеров/томов) один раз снимите контейнеры/тома, и новые тома создаваться не будут.

Потоковые функции

Выход предыдущей функции является входом следующей функции.
Потоковые фреймворки — это xtream и RxJS.

настоящий бой

  • Исходный код промежуточного программного обеспечения Redux
  • Интерпретация кода CycleJS

Ссылки прилагаются в конце

Сессия 9: Как стать фронтенд-талантом, который нужен крупным интернет-компаниям

Старый профессор сначала задал классический вопрос: «Если бы вы были выпускником колледжа, вы бы выбрали крупную интернет-компанию или стартап?».
Стандартного ответа на этот вопрос никогда не существовало, и респонденты на местах очень твердо выбирали малые компании, тогда как старый профессор предлагает выбирать крупные компании.

Что такое большая компания?

  • Богатые учебные ресурсы
  • Атмосфера активного технического обмена
  • Сосредоточьтесь на проведении предварительных углубленных исследований
    Квалифицированные интервьюеры должны иметь полную систему знаний и сосредоточиться на выявлении талантов.
    Чтобы узнать о содержании инспекции при приеме на работу в школу, вы можете проверить статью старого профессора «Что следует проверять на собеседовании при приеме на работу в школу? 》

Отличие социального рекрутинга от школьного рекрутинга

Процесс собеседования при приеме в школу

Основы интерфейса

  • HTML
    • Общие мета-заголовки
    • Семантический
    • Что нового в HTML5
    • Знание рендеринга и парсинга HTML
  • CSS
    • Читаемый и канонический код CSS
    • коробочная модель
    • Возможности CSS3: анимация, гибкие макеты и многое другое.
  • JS
    • модель событий
    • Замыкания и утечки памяти
    • Сеть прототипов
    • Рендеринг дерева, переупорядочивание и перерисовка, многоуровневый рендеринг и т. д. (дополнительно)
  • HTTP
    • Общие коды состояния HTTP
    • Различия между разными типами запросов
    • Как кэшировать
    • HTTP2
  • отладка
    • Как захватывать пакеты
    • Как отлаживать проблемы с программой
    • Как сделать мобильную отладку
    • Как обнаружить проблемы со страницей
  • Мобильная веб-разработка
    • Разница между мобильной веб-разработкой и веб-разработкой для ПК
    • Адаптивный макет
    • Жесты и события на мобильных устройствах
    • Как улучшить производительность рендеринга мобильных страниц

И некоторые комплексные проверки знаний, такие как: что произошло в процессе от ввода пользователем URL-адреса до отображения конечной страницы? Страница обратной связи с боссом открывается с белым экраном, но ваш мобильный телефон работает нормально, что мне делать? Страница зависла, как ее оптимизировать?

Находятся ли передовые профессиональные знания о приеме на работу в школу в центре внимания проверки?

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

Опыт проекта

Одно слово, бой! Узнайте ключевые слова опыта проекта, а затем двигайтесь от мелкого к более глубокому, пока не сможете ответить на вопрос. Тайно наблюдайте за осознанностью работы в команде, решительностью в преодолении сложных проблем, умением искать информацию и т.д.

Что я должен сделать, чтобы накопить в колледже?

  • Завершите основы интерфейса
  • Следите за новыми технологиями, пробуйте новые языки
  • Понимать технические элементы, используемые в практическом проекте

Как использовать стандарт большой компании, чтобы требовать и улучшать себя?

  • Технические приготовления
    • Квазибазовые знания
    • копание в одной точке
      Как долго крупные компании уважают специальность
      大学的时候以广度为主，拓展视野；
工作之后以深度为主，单点深挖；
当达到瓶颈后，再次向广度拓展，打通知识。
                  ————百度某总监
    • Обучение войск техническими проектами
      Начиная с оптимизации бизнеса, концентрируясь на веселых и интересных проектах в области технологий добычи полезных ископаемых.
    • пиши, делись
  • умственная подготовка
    • Навыки общения
      Замена самоутверждения общением
      Дайте больше отзывов, активно давайте отзывы
      Риск быть брошенным вовремя
    • Недостаточные официальные ресурсы
      «Если все готово и каждый может это сделать, что я хочу, чтобы ты сделал?»
    • проблема на мне
    • Развивайте эффективные методы работы

Смена работы

  • Базовые знания
    К базовым знаниям предъявляются более высокие требования, чем к социальному набору.

  • Опыт проекта
    Опыт проекта нужно сравнивать с опытом TencentСтарший фронтенд-инженерТребовать.

В конце концов, оптимизм и уверенность в себе так же важны, как и технические способности!

На данный момент живая запись конференции AC была обновлена.В течение дня проводится 9 технических обменов и круглых столов.Темы также охватывают различные аспекты от построения проекта, оптимизации, мониторинга до идей программирования, передовых технологий и карьеры. развитие Встреча, которая больше не может быть сделана.
Один день очень короткий, а содержание очень длинное. Надеюсь, это будет полезно для всех. В ближайшие несколько дней я буду потихоньку переваривать его, а потом смогу больше общаться.

Категории