Что 36 из нас узнали на этой неделе

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

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

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

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

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

Авторская практика работы функции прямых трансляций в среде WeChat

Проблемы совместимости

Связанные с совместимостью видео

В Android прямое использование нативного видео приводит к полноэкранному воспроизведению, охватывающему все элементы, поэтому используйте проигрыватель x5. Однако у плеера x5 все еще есть проблемы, хотя он не закроет элемент, но добавит свои спецэффекты (закроет слой маски панели навигации).

<video
  className='live-detail__video vjs-big-play-centered'
  id='live-player'
  controls={false}
  playsInline
  webkit-playsinline='true'
  x5-video-player-type='h5'
  x5-video-orientation='portrait'
  x5-playsinline='true'
  style={style}
/>

Для этого можно использовать плеер x5 под Android,playsInlineиwebkit-playsinlineСвойство для включения встроенного воспроизведения в среде iOS. Но установка совместимости встроенного воспроизведения через свойства не очень хороша, поэтому в данный момент нам нужно использоватьiphone-inline-videoэта библиотека черезenableInlineVideo(video)Вот и все.

Автовоспроизведение видео

Совместимость автоматического воспроизведения видео с Android очень плохая, поэтому пользователи могут запускать воспроизведение видео только вручную. Однако в iOS видео может воспроизводиться автоматически, прослушивая события WeChat.

document.addEventListener("WeixinJSBridgeReady", function () {
    player.play()
}, false)

Проблема с протоколом под iOS

Поскольку на странице используется протокол HTTPS, iOS требует, чтобы безопасный протокол также использовался на страницах HTTPS. Поэтому, если используется протокол ws, под iOS будет сообщено об ошибке, а протокол wss будет использоваться для ее решения позже.

испытывать проблемы

Под iOS клавиатура всплывает и закрывается

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

// 监听键盘收起及弹出状态
document.body.addEventListener('focusout', () => {
  if (isIphone()) {
    setTimeout(() => {
      document.body.scrollTop = document.body.scrollHeight
    }, 100)
  }
})

document.body.addEventListener('focusin', () => {
  if (isIphone()) {
    setTimeout(() => {
      document.body.scrollTop = document.body.scrollHeight
    }, 100)
  }
})

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

Отображение данных чата

Учитывая частые данные чата в прямом эфире, все полученные данные сначала будут храниться в буфере массива и будут отображаться равномерно после ожидания в течение 2 секунд.

// 接收到消息就先 push 到缓存数组中
this.bufferAllComments.push({
  customerName: fromCustomerName,
  commentId,
  content,
  commentType
})
// 利用定时器，每两秒将数组中的中的 concat 到当前聊天数据中并清空缓存
this.commentTimer = setInterval(() => {
  if (this.bufferAllComments.length) {
    this.appendChatData(this.bufferAllComments)
    this.bufferAllComments = []
  }
}, 2000)

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

Связанный список как носитель данных чата

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

  • Причина использования связанного списка состоит в том, чтобы учесть частое удаление данных заголовка массива, чтобы усложнить пространство.
  • Кроме того, реализована функция поддержки итераторов, код выглядит следующим образом:
[Symbol.iterator] () {
  let current = null; let target = this
  return {
    next () {
      current = current != null ? current.next : target.head
      if (current != null) {
        return { value: current.value, done: false }
      }
      return { value: undefined, done: true }
    },
    return () {
      return { done: true }
    }
  }
}

JS

суммирование массива

let arr = [1, 2, 3, 4, 5]
eval(arr.join('+'))

Массив полностью развернут

function myFlat(arr) {
  while (arr.some(t => Array.isArray(t))) {
   	arr = ([]).concat.apply([], arr);
  }
  return arr;
}
var arrTest1 = [1, [2, 3, [4]], 5, 6, [7, 8], [[9, [10, 11], 12], 13], 14];  
// Expected Output: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
console.log(myFlat(arrTest1))

Реализовать функцию сна

function sleep(interval) {
  return new Promise(resolve => {
    setTimeout(resolve, interval);
  })
}
async function test() {
  for (let index = 0; index < 10; index++) {
    console.log(index);
    await sleep(2000)
  }
}

Регулярная фильтрация оскорбительных слов

var ma = "大xx".split('');
var regstr = ma.join('([^\u4e00-\u9fa5]*?)');
var str = "这是一篇文章,需要过滤掉大xx这三个词,大xx中间出汉字以外的字符 大_/_傻a1v逼和 大傻a1v逼";
var reg = new RegExp(regstr , 'g');
str.replace(reg,"<替换的词>");

Node

Включить сжатие

const express = require('express');
const compression = require('compression');
const app = express();
app.use(compression());

Подсчет строк кода Git

const { exec } = require('child_process');
const { argv } = require('yargs');

const readLines = stdout => {
  const stringArray = stdout
    .toString()
    .split(/(\n)/g)
    .filter(str => str !== '\n' && str);
  const dataArray = [];
  stringArray.map(str => {
    const data = str.split(/(\t)/g).filter(str => str !== '\t');
    const [newLine, deletedLine, filePath] = data;
    dataArray.push({ newLine, deletedLine, filePath });
  });
  return dataArray;
};


try {
  if (!argv.commit) throw new Error('')
  exec(`git diff ${argv.commit} --numstat`, (error, stdout, stderr) => {
    console.table(readLines(stdout));
  });
} catch (e) {
  console.log(e);
}

реализовать единственную функцию

var obj = {
    name: 'tobi',
    last: 'holowaychuk',
    email: 'tobi@learnboost.com',
    _id: '12345'
};

const only = (obj, para) => {
    if (!obj || !para) { new Error('please check your args!') }
    let newObj = {};
    let newArr = Array.isArray(para) ? para : typeof (para) === 'string' ? para.split(/ +/) : [];
    newArr.forEach((item) => {
        if (item && obj[item] && !newObj[item]) {
            newObj[item] = obj[item];
        }
    })
    return newObj;
}
// {email: "tobi@learnboost.com", last: "holowaychuk", name: "tobi"}
console.log(only(obj, ['name', 'last', 'email']));
console.log(only(obj, 'name last    email'));

разное

Несколько когниций, разработанных на работе

  1. Расставьте приоритеты для самых важных вещей (вы можете записывать свои ежедневные задачи в блокнот или использовать программное обеспечение, такое как todolist)
  2. Понимать «мышление по замкнутому циклу» (регулярно сообщать о ходе проекта руководителям и своевременно синхронизировать ход проекта с коллегами и подчиненными)
  3. Умение решать проблемы и решать проблемы быстро
  4. Будьте надежным, умным, твердым и заслуживающим доверия человеком. Улучшите свою незаменимость.
  5. У всего есть объяснение, у всего есть свое падение, у всего есть эхо.
  6. Благодарен за ошибки. Именно ошибки заставляют вас расти. Чтобы расти, вы должны решать больше ошибок и выполнять больше задач.
  7. Будь позитивным и оптимистичным, будь позитивным человеком. (Держитесь подальше от людей и вещей с негативной энергией)

Скрипт, после превышения количества данных в массиве памяти вдруг становится меньше?

Наконец

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

Категории