web开发中碰到的问题

2021-09-25 本文已影响0人林思念

一、input 输入框过滤 emoji 表情

JS 最初设计的时候，基于 UCS-2 编码,只支持 两个字节（16位），后来 UTF-16 对 UCS-2 进行了拓展支持两个字节至最长可支持4字节（32位）,但是最初的Js代码函数（ES5）为了兼容之前的处理方法并没有进行更新，所以导致（ES5及）之前的方法在处理两个字节以上的字符都会出现错误，ES6 提供的遍历方法是做了兼容处理的

获取正确的字符长度以及遍历的方法

Array.from(string).length
for (let s of string ) {  // ... }

ES6新增 String 静态方法

String.fromCodePoint()                     从Unicode码点返回对应字符
String.prototype.codePointAt()             从字符返回对应的码点
String.prototype.at()                      返回字符串给定位置的字符

16进制和 unicode 之间的转换

console.log(String.fromCodePoint(0x1f600))           //  😀   \u{1f600}
console.log('0x'+'😀'.codePointAt().toString(16))    //  0x1f600

4. 正则表达式过滤写法

str.replace(/[\u20e3]/ig, '')        //unicode编码长度为4的写法
str.replace(/[\u{1f610}]/uig, '')    //unicode编码长度不为4的写法

Unicode提供了两种表示方法。一种是带附加符号的单个字符，即一个码点表示一个字符，另一种是将附加符号单独作为一个码点，与主体字符复合显示，即两个码点表示一个字符。

// '\u01D1' （一个码点） 
// '\u004F\u030C' （附加符号作为一个单独的码点） 都可以表示为  'Ǒ'

然而

'\u01D1'  === '\u004F\u030C'   //false

ES6提供了normalize方法，将序列统一

'\u01D1'.normalize() === '\u004F\u030C'.normalize()   // true

emoji 表情过滤代码

const raplaceEmoji = (str) => {
  return str.replace(new RegExp(/[\s+\u20e3\u203c\u2049\u2122\u2139\u231a\u2b1b\u2b1c\u2b50\u3030\u303d\u3297\u2b55\u3299\u231b\u2328\u23cf\u23e9\u24c2\u25aa\u25ab\u25B6\u25c0\u2b06\u{1F22F}\u{1F250}\u{1F251}\u{1FAC0}\u{1FAC1}\u{1FAC2}\u{1F17E}\u{1F17F}\u{1F18E}\u{1F201}\u{1F202}\u{1F21A}\u{1F171}\u{1F170}\u{1F004}\u{1F0CF}\u{a9}\u{ae}\u200d\u2934\u2935\uFFFD\u2B05\u2B07]|[\u{2194}-\u{21AA}]|[\u{23EA}-\u{23FA}]|[\u{25FB}-\u{25FE}]|[\u{2600}-\u{27BF}]|[\u{FE00}-\u{FE0F}]|[\u{1F191}-\u{1F19A}]|[\u{1F1E6}-\u{1F1FF}]|[\u{1F232}-\u{1F23A}]|[\u{1F300}-\u{1F64F}]|[\u{1F680}-\u{1F6FF}]|[\u{1F7E0}-\u{1F7EB}]|[\u{1FA70}-\u{1FA74}]|[\u{1FA78}-\u{1FA86}]|[\u{1FA90}-\u{1FAA8}]|[\u{1FAB0}-\u{1FAB6}]|[\u{1F900}-\u{1F9FF}]|[\u{1FAD0}-\u{1FAD6}]|[\u{E0020}-\u{E007F}]/uig), "")
}

验证函数测试用例

let emoji = "😀 😃 😄 😁 😆 😅 😂 🤣 😇 😉 😊 🙂 🙃 ☺ 😋 😌 😍 🥰 😘 😗 😙 😚 🥲 🤪 😜 😝 😛 🤑 😎 🤓 🥸 🧐 🤠 🥳 🤗 🤡 😏 😶 😐 😑 😒 🙄 🤨 🤔 🤫 🤭 🤥 😳 😞 😟 😠 😡 🤬 😔 😕 🙁 ☹ 😬 🥺 😣 😖 😫 😩 🥱 😤 😮 💨 😮 😱 😨 😰 😯 😦 😧 😢 😥 😪 🤤 😓 😭 🤩 😵 💫 🥴 😲 🤯 🤐 😷 🤕 🤒 🤮 🤢 🤧 🥵 🥶 😶 🌫️ 😴 💤 😈 👿 👹 👺 💩 👻 💀 ☠ 👽 🤖 🎃 😺 😸 😹 😻 😼 😽 🙀 😿 😾 👐 🤲 🙌 👏 🙏 🤝 👍 👎 👊 ✊ 🤛 🤜 🤞 ✌ 🤘 🤟 👌 🤌 🤏 👈 👉 👆 👇 ☝ ✋ 🤚 🖐 🖖 👋 🤙 💪 🦾 🖕 ✍ 🤳 💅 🦵 🦿 🦶 👄 🦷 👅 👂 🦻 👃 👁 👀 🧠 🫀 🫁 🦴 👤 👥 🗣 🫂 👶 👧 🧒 👦 👩 🧑 👨 👩🦱 🧑🦱 👨🦱 👩🦰 🧑🦰 👨🦰 👱♀️ 👱 👱♂️ 👩🦳 🧑🦳 👨🦳 👩🦲 🧑🦲 👨🦲 🧔♀️ 🧔 🧔♂️ 👵 🧓 👴 👲 👳♀️ 👳 👳♂️ 🧕 👼 👸 🤴 👰 👰♀️ 👰♂️ 🤵♀️ 🤵 🤵♂️ 🙇♀️ 🙇 🙇♂️ 💁♀️ 💁 💁♂️ 🙅♀️ 🙅 🙅♂️ 🙆♀️ 🙆 🙆♂️ 🤷♀️ 🤷 🤷♂️ 🙋♀️ 🙋 🙋♂️ 🤦♀️ 🤦 🤦♂️ 🧏♀️ 🧏 🧏♂️ 🙎♀️ 🙎 🙎♂️ 🙍♀️ 🙍 🙍♂️ 💇♀️ 💇 💇♂️ 💆♀️ 💆 💆♂️ 🤰 🤱 👩🍼 🧑🍼 👨🍼 🧎♀️ 🧎 🧎♂️ 🧍♀️ 🧍 🧍♂️ 🚶♀️ 🚶 🚶♂️ 👩🦯 🧑🦯 👨🦯 🏃♀️ 🏃 🏃♂️ 👩🦼 🧑🦼 👨🦼 👩🦽 🧑🦽 👨🦽 💃 🕺 👫 👭 👬 🧑🤝🧑 👩❤️👨 👩❤️👩 💑 👨❤️👨 👩❤️💋👨 👩❤️💋👩 💏 👨❤️💋👨 ❤ 🧡 💛 💚 💙 💜 🤎 🖤 🤍 💔 ❣ 💕 💞 💓 💗 💖 💘 💝 ❤ ️🔥 🩹 💟 🐶 🐱 🐭 🐹 🐰 🐻 🧸 🐼 🐻 ❄️ 🐨 🐯 🦁 🐮 🐷 🐽 🐸 🐵 🙈 🙉 🙊 🐒 🦍 🦧 🐔 🐧 🐦 🐤 🐣 🐥 🐺 🦊 🦝 🐗 🐴 🦓 🦒 🦌 🦘 🦥 🦦 🦫 🦄 🐝 🐛 🦋 🐌 🪲 🐞 🐜 🦗 🪳 🕷 🕸 🦂 🦟 🪰 🪱 🦠 🐢 🐍 🦎 🐙 🦑 🦞 🦀 🦐 🦪 🐠 🐟 🐡 🐬 🦈 🦭 🐳 🐋 🐊 🐆 🐅 🐃 🐂 🐄 🦬 🐪 🐫 🦙 🐘 🦏 🦛 🦣 🐐 🐏 🐑 🐎 🐖 🦇 🐓 🦃 🕊 🦅 🦆 🦢 🦉 🦩 🦚 🦜 🦤 🪶 🐕 🦮 🐕🦺 🐩 🐈 ⬛ 🐇 🐀 🐁 🐿 🦨 🦡 🦔 🐾 🐉 🐲 🦕 🦖 🌵 🎄 🌲 🌳 🌴 🪴 🌱 🌿 ☘ 🍀 🎍 🎋 🍃 🍂 🍁 🌾 🌺 🌻 🌹 🥀 🌷 🌼 🌸 💐 🍄 🌰 🐚 🌎 🌍 🌏 🌕 🌖 🌗 🌘 🌑 🌒 🌓 🌔 🌙 🌚 🌝 🌛 🌜 ⭐ 🌟 💫 ✨ ☄ 🪐 🌞 ☀ 🌤 ⛅ 🌥 🌦 ☁ 🌧 ⛈ 🌩 ⚡ 🔥 💥 ❄ 🌨 ☃ ⛄ 🌬 💨 🌪 🌫 🌈 ☔ 💧 💦 🌊 🍏 🍎 🍐 🍊 🍋 🍌 🍉 🍇 🍓 🍈 🍒 🫐 🍑 🥭 🍍 🥥 🥝 🍅 🥑 🫒 🍆 🌶 🫑 🥒 🥬 🥦 🧄 🧅 🌽 🥕 🥗 🥔 🍠 🥜 🍯 🍞 🥐 🥖 🫓 🥨 🥯 🥞 🧇 🧀 🍗 🍖 🥩 🍤 🥚 🍳 🥓 🍔 🍟 🌭 🍕 🍝 🥪 🌮 🌯 🫔 🥙 🧆 🍜 🥘 🍲 🫕 🥫 🧂 🧈 🍥 🍣 🍱 🍛 🍙 🍚 🍘 🥟 🍢 🍡 🍧 🍨 🍦 🍰 🎂 🧁 🥧 🍮 🍭 🍬 🍫 🍿 🍩 🍪 🥠 🥮 ☕ 🍵 🫖 🥣 🍼 🥤 🧋 🧃 🧉 🥛 🍺 🍻 🍷 🥂 🥃 🍸 🍹 🍾 🍶 🧊 🥄 🍴 🍽 🥢 🥡 ⚽ 🏀 🏈 ⚾ 🥎 🎾 🏐 🏉 🎱 🥏 🪃 🏓 🏸 🥅 🏒 🏑 🏏 🥍 🥌 ⛳ 🏹 🎣 🤿 🥊 🥋 ⛸ 🎿 🛷 ⛷ 🏂 🏋️♀️ 🏋 🏋️♂️ 🤺 🤼♀️ 🤼 🤼♂️ 🤸♀️ 🤸 🤸♂️ ⛹️♀️ ⛹ ⛹️♂️ 🤾♀️ 🤾 🤾♂️ 🧗♀️ 🧗 🧗♂️ 🏌️♀️ 🏌 🏌️♂️ 🧘♀️ 🧘 🧘♂️ 🧖♀️ 🧖 🧖♂️ 🏄♀️ 🏄 🏄♂️ 🏊♀️ 🏊 🏊♂️ 🤽♀️ 🤽 🤽♂️ 🚣♀️ 🚣 🚣♂️ 🏇 🚴♀️ 🚴 🚴♂️ 🚵♀️ 🚵 🚵♂️ 🎽 🎖 🏅 🥇 🥈 🥉 🏆 🏵 🎗 🎫 🎟 🎪 🤹♀️ 🤹 🤹♂️ 🎭 🎨 🎬 🎤 🎧 🎼 🎹 🪗 🥁 🪘 🎷 🎺 🎸 🪕 🎻 🎲 🧩 ♟ 🎯 🎳 🪀 🪁 🎮 👾 🎰 👮♀️ 👮 👮♂️ 👩🚒 🧑🚒 👨🚒 👷♀️ 👷 👷♂️ 👩🏭 🧑🏭 👨🏭 👩🔧 🧑🔧 👨🔧 👩🌾 🧑🌾 👨🌾 👩🍳 🧑🍳 👨🍳 👩🎤 🧑🎤 👨🎤 👩🎨 🧑🎨 👨🎨 👩🏫 🧑🏫 👨🏫 👩🎓 🧑🎓 👨🎓 👩💼 🧑💼 👨💼 👩💻 🧑💻 👨💻 👩🔬 🧑🔬 👨🔬 👩🚀 🧑🚀 👨🚀 👩⚕️ 🧑⚕️ 👨⚕️ 👩⚖️ 🧑⚖️ 👨⚖️ 👩✈️ 🧑✈️ 👨✈️ 💂♀️ 💂 💂♂️ 🥷 🕵️♀️ 🕵 🕵️♂️ 🤶 🧑🎄 🎅 🕴️♀️ 🕴 🕴️♂️ 🦸♀️ 🦸 🦸♂️ 🦹♀️ 🦹 🦹♂️ 🧙♀️ 🧙 🧙♂️ 🧝♀️ 🧝 🧝♂️ 🧚♀️ 🧚 🧚♂️ 🧞♀️ 🧞 🧞♂️ 🧜♀️ 🧜 🧜♂️ 🧛♀️ 🧛 🧛♂️ 🧟♀️ 🧟 🧟♂️ 👯♀️ 👯 👯♂️ 👪 👨👩👧 👨👩👧👦 👨👩👦👦 👨👩👧👧 👩👩👦 👩👩👧 👩👩👧👦 👩👩👦👦 👩👩👧👧 👨👨👦 👨👨👧 👨👨👧👦 👨👨👦👦 👨👨👧👧 👩👦 👩👧 👩👧👦 👩👦👦 👩👧👧 👨👦 👨👧 👨👧👦 👨👦👦 👨👧👧 🚗 🚙 🚕 🛺 🚌 🚎 🏎 🚓 🚑 🚒 🚐 🛻 🚚 🚛 🚜 🏍 🛵 🚲 🦼 🦽 🛴 🛹 🛼 🚨 🚔 🚍 🚘 🚖 🚡 🚠 🚟 🚃 🚋 🚝 🚄 🚅 🚈 🚞 🚂 🚆 🚇 🚊 🚉 🚁 🛩 ✈ 🛫 🛬 🪂 💺 🛰 🚀 🛸 🛶 ⛵ 🛥 🚤 ⛴ 🛳 🚢 ⚓ ⛽ 🚧 🚏 🚦 🚥 🛑 🎡 🎢 🎠 🏗 🌁 🗼 🏭 ⛲ 🎑 ⛰ 🏔 🗻 🌋 🗾 🏕 ⛺ 🏞 🛣 🛤 🌅 🌄 🏜 🏖 🏝 🌇 🌆 🏙 🌃 🌉 🌌 🌠 🎇 🎆 🛖 🏘 🏰 🏯 🏟 🗽 🏠 🏡 🏚 🏢 🏬 🏣 🏤 🏥 🏦 🏨 🏪 🏫 🏩 💒 🏛 ⛪ 🕌 🛕 🕍 🕋 ⛩ ⌚ 📱 📲 💻 ⌨ 🖥 🖨 🖱 🖲 🕹 🗜 💽 💾 💿 📀 📼 📷 📸 📹 🎥 📽 🎞 📞 ☎ 📟 📠 📺 📻 🎙 🎚 🎛 ⏱ ⏲ ⏰ 🕰 ⏳ ⌛ 🧮 📡 🔋 🔌 💡 🔦 🕯 🧯 🗑 🛢 🛒 💸 💵 💴 💶 💷 💰 🪙 💳 🧾 💎 ⚖ 🦯 🧰 🔧 🪛 🔨 ⚒ 🛠 ⛏ 🪓 🪚 🔩 ⚙ ⛓ 🪝 🪜 🧱 🪨 🪵 🔫 🧨 💣 🔪 🗡 ⚔ 🛡 🚬 ⚰ 🪦 ⚱ 🏺 🔮 🪄 📿 🧿 💈 🧲 ⚗ 🧪 🧫 🧬 🔭 🔬 🕳 💊 💉 🩸 🩹 🩺 🌡 🏷 🔖 🚽 🪠 🚿 🛁 🛀 🪥 🪒 🧴 🧻 🧼 🧽 🧹 🧺 🪣 🔑 🗝 🪤 🛋 🪑 🛌 🛏 🚪 🪞 🪟 🧳 🛎 🖼 🧭 🗺 ⛱ 🗿 🛍 🎈 🎏 🎀 🧧 🎁 🎊 🎉 🪅 🪆 🎎 🎐 🏮 🪔 ✉ 📩 📨 📧 💌 📮 📪 📫 📬 📭 📦 📯 📥 📤 📜 📃 📑 📊 📈 📉 📄 📅 📆 🗓 📇 🗃 🗳 🗄 📋 🗒 📁 📂 🗂 🗞 📰 🪧 📓 📕 📗 📘 📙 📔 📒 📚 📖 🔗 📎 🖇 ✂ 📐 📏 📌 📍 🧷 🪡 🧵 🧶 🪢 🔐 🔒 🔓 🔏 🖊 🖋 ✒ 📝 ✏ 🖍 🖌 🔍 🔎 👚 👕 🥼 🦺 🧥 👖 👔 👗 👘 🥻 🩱 👙 🩲 🩳 💄 💋 👣 🧦 🩴 👠 👡 👢 🥿 👞 👟 🩰 🥾 🧢 👒 🎩 🎓 👑 ⛑ 🪖 🎒 👝 👛 👜 💼 👓 🕶 🥽 🧣 🧤 💍 🌂 ☂ 🏳 🏴 🏁 🚩 🎌 🏴☠️ 🏳️🌈 🏳️⚧️ 🇦🇨 🇦🇩 🇦🇪 🇦🇫 🇦🇬 🇦🇮 🇦🇱 🇦🇲 🇦🇴 🇦🇶 🇦🇷 🇦🇸 🇦🇹 🇦🇺 🇦🇼 🇦🇽 🇦🇿 🇧🇦 🇧🇧 🇧🇩 🇧🇪 🇧🇫 🇧🇬 🇧🇭 🇧🇮 🇧🇯 🇧🇱 🇧🇲 🇧🇳 🇧🇴 🇧🇶 🇧🇷 🇧🇸 🇧🇹 🇧🇼 🇧🇾 🇧🇿 🇨🇦 🇨🇨 🇨🇩 🇨🇫 🇨🇬 🇨🇭 🇨🇮 🇨🇰 🇨🇱 🇨🇲 🇨🇳 🇨🇴 🇨🇷 🇨🇺 🇨🇻 🇨🇼 🇨🇽 🇨🇾 🇨🇿 🇩🇪 🇩🇯 🇩🇰 🇩🇲 🇩🇴 🇩🇿 🇪🇨 🏴 🇪🇪 🇪🇬 🇪🇭 🇪🇷 🇪🇸 🇪🇹 🇪🇺 🇫🇮 🇫🇯 🇫🇰 🇫🇲 🇫🇴 🇫🇷 🇬🇦 🇬🇧 🇬🇩 🇬🇪 🇬🇫 🇬🇬 🇬🇭 🇬🇮 🇬🇱 🇬🇲 🇬🇳 🇬🇵 🇬🇶 🇬🇷 🇬🇸 🇬🇹 🇬🇺 🇬🇼 🇬🇾 🇭🇰 🇭🇳 🇭🇷 🇭🇹 🇭🇺 🇮🇨 🇮🇩 🇮🇪 🇮🇱 🇮🇲 🇮🇳 🇮🇴 🇮🇶 🇮🇷 🇮🇸 🇮🇹 🇯🇪 🇯🇲 🇯🇴 🇯🇵 🇰🇪 🇰🇬 🇰🇭 🇰🇮 🇰🇲 🇰🇳 🇰🇵 🇰🇷 🇰🇼 🇰🇾 🇰🇿 🇱🇦 🇱🇧 🇱🇨 🇱🇮 🇱🇰 🇱🇷 🇱🇸 🇱🇹 🇱🇺 🇱🇻 🇱🇾 🇲🇦 🇲🇨 🇲🇩 🇲🇪 🇲🇬 🇲🇭 🇲🇰 🇲🇱 🇲🇲 🇲🇳 🇲🇴 🇲🇵 🇲🇶 🇲🇷 🇲🇸 🇲🇹 🇲🇺 🇲🇻 🇲🇼 🇲🇽 🇲🇾 🇲🇿 🇳🇦 🇳🇨 🇳🇪 🇳🇫 🇳🇬 🇳🇮 🇳🇱 🇳🇴 🇳🇵 🇳🇷 🇳🇺 🇳🇿 🇴🇲 🇵🇦 🇵🇪 🇵🇫 🇵🇬 🇵🇭 🇵🇰 🇵🇱 🇵🇲 🇵🇳 🇵🇷 🇵🇸 🇵🇹 🇵🇼 🇵🇾 🇶🇦 🇷🇪 🇷🇴 🇷🇸 🇷🇺 🇷🇼 🇸🇦 🏴 🇸🇧 🇸🇨 🇸🇩 🇸🇪 🇸🇬 🇸🇭 🇸🇮 🇸🇰 🇸🇱 🇸🇲 🇸🇳 🇸🇴 🇸🇷 🇸🇸 🇸🇹 🇸🇻 🇸🇽 🇸🇾 🇸🇿 🇹🇦 🇹🇨 🇹🇩 🇹🇫 🇹🇬 🇹🇭 🇹🇯 🇹🇰 🇹🇱 🇹🇲 🇹🇳 🇹🇴 🇹🇷 🇹🇹 🇹🇻 🇹🇿 🇺🇦 🇺🇬 🇺🇳 🇺🇸 🇺🇾 🇺🇿 🇻🇦 🇻🇨 🇻🇪 🇻🇬 🇻🇮 🇻🇳 🇻🇺 🏴 🇼🇫 🇼🇸 🇽🇰 🇾🇪 🇾🇹 🇿🇦 🇿🇲 🇿🇼 ☮ ✝ ☪ 🕉 ☸ ✡ 🔯 🕎 ☯ ☦ 🛐 ⛎ ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓ 🆔 ⚛ ⚕ ☢ ☣ 📴 📳 🈶 🈚 🈸 🈺 🈷 ✴ 🆚 🉑 💮 🉐 ㊙ ㊗ 🈴 🈵 🈹 🈲 🅰 🅱 🆎 🆑 🅾 🆘 ⛔ 📛 🚫 ❌ ⭕ 💢 ♨ 🚷 🚯 🚳 🚱 🔞 📵 🚭 ❗ ❕ ❓ ❔ ‼ ⁉ 💯 🔅 🔆 🔱 ⚜ 〽 ⚠ 🚸 🔰 ♻ 🈯 💹 ❇ ✳ ❎ ✅ 💠 🌀 ➿ 🌐 ♾ Ⓜ 🏧 🚾 ♿ 🅿 🈳 🈂 🛂 🛃 🛄 🛅 🚰 🛗 🚹 ♂ 🚺 ♀ ⚧ 🚼 🚻 🚮 🎦 📶 🈁 🆖 🆗 🆙 🆒 🆕 🆓 🔟 🔢 ▶ ⏸ ⏯ ⏹ ⏺ ⏏ ⏭ ⏮ ⏩ ⏪ 🔀 🔁 🔂 ◀ 🔼 🔽 ⏫ ⏬ ➡ ⬅ ⬆ ⬇ ↗ ↘ ↙ ↖ ↕ ↔ 🔄 ↪ ↩ 🔃 ⤴ ⤵ ℹ 🔤 🔡 🔠 🔣 🎵 🎶 〰 ➰ ✔ ➕ ➖ ➗ ✖ 💲 💱 © ® ™ 🔚 🔙 🔛 🔝 🔜 ☑ 🔘 🔴 🟠 🟡 🟢 🔵 🟣 🟤 ⚫ ⚪ 🟥 🟧 🟨 🟩 🟦 🟪 🟫 ⬛ ⬜ ◼ ◻ ◾ ◽ ▪ ▫ 🔸 🔹 🔶 🔷 🔺 🔻 🔲 🔳 🔈 🔉 🔊 🔇 📣 📢 🔔 🔕 🃏 🀄 ♠ ♣ ♥ ♦ 🎴 👁🗨 🗨 💭 🗯 💬 🕐 🕑 🕒 🕓 🕔 🕕 🕖 🕗 🕘 🕙 🕚 🕛 🕜 🕝 🕞 🕟 🕠 🕡 🕢 🕣 🕤 🕥 🕦 🕧"

附加

str.replace(new RegExp(/[\u4e00-\u9fa5]+/ig), '')    //过滤汉字

后来才知道emoji-regex也可以解决
地址：https://www.npmjs.com/package/emoji-regex

二、iOS部分机型视频播放有音频、无视频

机型：iphone xs Max（问题视频）、 iphone 11（正常）
环境：微信8.0.13
文件格式：mp4
操作：部分手机打开视频
问题：视频处于播放中，手机屏幕显示为黑屏、手指滑动屏幕可以显示、停止滑动即黑屏
解决：
1、不设置 poster 属性
2、source标签src属性直接加入video标签
对比：

//修改前
<video 
  id="my-video" 
  controls preload="auto" 
  @play="handleVideoPlay"
  :width="width" 
  :height="videoHeight"
  :poster="`${videoUrl}?x-oss-process=video/snapshot,t_0,m_fast,ar_auto,w_300`" 
  data-setup="{}">
    <source :src="videoUrl" type="video/mp4">
    <p class="vjs-no-js"> 若要查看此视频，请启用JavaScript，并考虑升级到Web浏览器</p>
</video>

//修改后
<video 
  id="my-video" 
  controls preload="auto" 
  @play="handleVideoPlay"
  :width="width" 
  :height="videoHeight"
  data-setup="{}">
    <source :src="videoUrl" type="video/mp4">
    <p class="vjs-no-js"> 若要查看此视频，请启用JavaScript，并考虑升级到Web浏览器</p>
</video>
// 或者
<video 
  id="my-video" 
  controls preload="auto" 
  @play="handleVideoPlay"
  :width="width" 
  :height="videoHeight"
  :poster="`${videoUrl}?x-oss-process=video/snapshot,t_0,m_fast,ar_auto,w_300`" 
  :src="videoUrl">
</video>

三、输入框最大长度限制问题（最大长度为12汉字或者24英文字符）

场景

input框限制最大长度，当输入到最后一个字符的时候，拼音输入法输入中文超过最大长度，会被截取导致最后一个汉字不能输入的问题
change在windows + chrome + sogou pinyin的组合下为一个空白符{" "}且不会多次触发；
change在mac + chrome + sogou pinyin的组合下触发多次并带有单引号{"'"}；

注意

自带的maxLength可以解决这个问题，但是部分情况会根据字符的字节码长度进行设置不同的场景
compositionstart, compositionupdate, compositionend，分别是在输入框中，输入拼音输入法输入中文的开始、持续输入、结束的三个事件函数
浏览器中事件执行顺序：
1. 谷歌浏览器：compositionstart onChange compositionend
2. 火狐浏览器：compositionstart compositionend onChange

解决思路

进入compositionstart函数之后，在compositionend函数结束以前，阻止onChange事件的触发

<InputDemo value={this.state.value} onChange={this.handleChange} />

import React, { Component, createRef } from 'react'
import { connect } from 'react-redux'

export class InputDemo extends Component {

  constructor(props) {
    super(props)
    this.state = {
    }
    this.inputRef = createRef();
    this.isOnComposition = false;
  }

  componentDidMount() {
    this.setInputValue();
  }

  componentDidUpdate() {
    this.setInputValue();
  }

  setInputValue = () => {
    this.inputRef.current.value = this.props.value || ''
  };

  handleComposition = (e) => {
    if (e.type === 'compositionend') {
      this.isOnComposition = false;
      // 谷歌浏览器：compositionstart onChange compositionend
      // 火狐浏览器：compositionstart compositionend onChange
      if (navigator.userAgent.indexOf('Chrome') > -1) {
        this.onChange(e);
      }
      return;
    }
    this.isOnComposition = true;
  };

  onChange = (e) => {
    if (!this.isOnComposition) {
      this.props.onChange(e);
    }
  };

  render() {
    const commonProps = {
      onChange: this.onChange,
      onCompositionStart: this.handleComposition,
      onCompositionUpdate: this.handleComposition,
      onCompositionEnd: this.handleComposition,
    };
    return <input
      ref={this.inputRef}
      type="text"
      {...commonProps}
    />
  }
}

const mapStateToProps = (state) => ({

})

const mapDispatchToProps = dispatch => {
  return {
    dispatch
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(InputDemo)

参考：https://www.cnblogs.com/xiaonian8/p/13705311.html
npm react-composition

四、多种媒体类型混排，不同间距设置问题

最近遇到一个问题，单列的时候兄弟节点之间外边距是互相重叠的，用来实现不同类型之间设置不同间距非常好用，但是多列的时候，兄弟节点之间外边距会变成累加，在多种类型混排的时候就需要单独计算，于是在排版的时候就会变得非常难受

图片、视频和文本混排，单双三排，还有最优边框（根据当前行的图片高度进行取最大值展示，不足100%居中，灰色底部）的选项，默认为宽高比（4：3）显示图片，示例如下：

2.jpeg

3.jpeg

1.jpeg

什么是BFC？

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

怎么样会触发BFC？

float的值不是none。
position的值不是static或者relative。
display的值是inline-block、table-cell、flex、table-caption或者inline-flex
overflow的值不是visible

在进行多列排版的时候，一定会用到上述属性，(否则就会有文本混乱的风险），就会触发BFC，提前知道哪些情况费否会开启BFC可以在进行需求评审的时候，及时沟通清楚，预知可能会出现的问题

BFC的作用

1.利用BFC避免margin重叠。

一般情况下，段落之间外边距会重叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>防止margin重叠</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    p {
        color: #f55;
        background: yellow;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 30px;
    }
</style>
<body>
    <p>看看我的 margin是多少</p>
    <p>看看我的 margin是多少</p>
</body>
</html>

属于同一个BFC的两个相邻的Box会发生margin重叠，所以我们可以设置，两个不同的BFC，也就是我们可以让把第二个p用div包起来，然后激活它使其成为一个BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>防止margin重叠</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    p {
        color: #f55;
        background: yellow;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 30px;
    }
    div{
        overflow: hidden;
    }
</style>
<body>
    <p>看看我的 margin是多少</p>
    <div>
        <p>看看我的 margin是多少</p>
    </div>
</body>
</html>

2.自适应两栏布局

每个盒子的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        position: relative;
    }
 
    .left {
        width: 100px;
        height: 150px;
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }
 
    .right {
        height: 300px;
        background: rgb(170, 54, 236);
        text-align: center;
        line-height: 300px;
        font-size: 40px;
    }
</style>
<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>
</html>

1.png

BFC的区域不会与float box重叠。所以我们让right单独成为一个BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        position: relative;
    }
 
    .left {
        width: 100px;
        height: 150px;
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }
 
    .right {
        overflow: hidden;
        height: 300px;
        background: rgb(170, 54, 236);
        text-align: center;
        line-height: 300px;
        font-size: 40px;
    }
</style>
<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>
</html>

2.png

五、window、mac浏览器滚动条

之前写过这样一个页面，左右padding填充，中间部分平分成N块。在mac浏览器调试的时候是没有任何问题，但是window打开的时候浏览器出现滚动条导致排版换行。
原因是mac浏览器滚动条是浮起来的，不占用文档流，但是window是占用文档流的，通过对滚动设置样式进行兼容

head,body {
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
  &::-webkit-scrollbar {
    width: 0 !important;
  }
  scroll-behavior: smooth;
}