TOMMYHU

1、需求：输入框长度限制为10个字符，包括表情。超出长度提示。 注：iPhone手机自定义的表情，有四个小人的，三个小人的，主要是长度还都不一样。有的表情可能一个就超出了长度限制（10），比如?‍?‍?‍?这个表情长度为11，当然我这个长度设置的比较小，可以随意设置。 查阅资料的过程中发现了lodash可以处理数组，并且可以处理表情。 console.log(_.toArray('12?').length); // --> 3); 这样的话就能符合我截取的条件了。判断如果数组的某一个长度超出我的限制长度，就截取数组。 本来这样就可以了，但是就为了转这个引入一个文件，也不合适。于是我就把源码里面的一些符合我的需要的内容摘出来。 let rsAstralRange = '\\ud800-\\udfff',     rsZWJ = '\\u200d',     rsVarRange = '\\ufe0e\\ufe0f',     rsComboMarksRange = '\\u0300-\\u036f',     reComboHalfMarksRange = '\\ufe20-\\ufe2f',     rsComboSymbolsRange = '\\u20d0-\\u20ff',     rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange; let reHasUnicode = RegExp('[' + rsZWJ + rsAstralRange + rsComboRange + rsVarRange + ']'); let rsFitz = '\\ud83c[\\udffb-\\udfff]',     rsOptVar = '[' + rsVarRange + ']?',     rsCombo = '[' + rsComboRange + ']',     rsModifier = '(?:' + rsCombo + '|' + rsFitz + ')',     reOptMod = rsModifier + '?',     rsAstral = '[' + rsAstralRange + ']',     rsNonAstral = '[^' + rsAstralRange + ']',     rsRegional = '(?:\\ud83c[\\udde6-\\uddff]){2}',     rsSurrPair = '[\\ud800-\\udbff][\\udc00-\\udfff]',     rsOptJoin = '(?:' + rsZWJ + '(?:' + [rsNonAstral, rsRegional, rsSurrPair].join('|') + ')' + rsOptVar + reOptMod + ')*',     rsSeq = rsOptVar + reOptMod + rsOptJoin,     rsSymbol = '(?:' + [rsNonAstral + rsCombo + '?', rsCombo, rsRegional, rsSurrPair, rsAstral].join('|') + ')'; let reUnicode = RegExp(rsFitz + '(?=' + rsFitz + ')|' + rsSymbol + rsSeq, 'g'); export function toArray (val) { // 字符串转成数组     return hasUnicode(val)         ? unicodeToArray(val)         : asciiToArray(val); } export function hasUnicode (val) {     return reHasUnicode.test(val); } export function unicodeToArray (val) {     return val.match(reUnicode) || []; } export function asciiToArray (val) {     return val.split(''); } 是的，一大堆正则。看着就头疼。这个方法可以满足，把表情转成数组中的一份子。这样的话，我们只用判断数组就好了。 然后根据得到的数组，去挨个判断每一个的长度；代码如下： let strarr = utils.toArray(val); let str = '', strlen = 0, num = 0, lastarr = []; for (let i = 0;i < strarr.length;i++) {     strlen += strarr[i].length; // 数组中每一个字符的长度相加     if (strlen > this.limit) { // 如果长度大于限制         num = i; // 记录下到第几个开始超出限制         lastarr = strarr.slice(0, this.limit); // 取出限制内的数组         this.$toast('长度超出了');         break; // 退出循环         // return;     } } if (strlen > this.limit) { // 如果输入的第一个数长度大于限制的表情     for (var j = 0;j < num;j++) {         str += lastarr[j]; // 取出限制内的数组的字符     }     this.currentValue = str; } 其实这块也可以封装一个方法调用。

有后台的，npm组件的，基于ts的，集成单元测试的，更多可git上撸一下

https://github.com/typescript-project

这是一个很充实的假期，小姨子出嫁啦，希望疫情早日结束，一切好起来，也希望妈妈的腿脚也早日利索起来，恩，加油?

高德的jsapi v2.0已经新鲜出炉，可以耍一耍：https://lbs.amap.com/api/jsapi-v2/summary


别用三方的，例如vue-amap，elementui的确不错，这element的高德封装就是一坨翔



入门：https://lbs.amap.com/api/jsapi-v2/guide/abc/load

需要注意的是移动端的点击事件 是 touch，而不是click，被坑了几个小时，

https://www.cnblogs.com/xiaomg/articles/10432907.html

移动的端的1px，你懂的，这个是真的，挺好用的
.border(@t:1px, @r:1px, @b:1px, @l:1px, @radius:5px,@style:solid, @color:#D1D1D1){     position: relative;     &:before {         content: "";         box-sizing: border-box;         position: absolute;         width: 200%;         height: 200%;         left: 0;         top: 0;         -webkit-transform: scale(0.5);         -webkit-transform-origin: 0 0;         transform: scale(0.5);         transform-origin: 0 0;         border-style: @style;         border-color: @color;         border-top-width: @t;         border-bottom-width: @b;         border-left-width: @l;         border-right-width: @r;         border-radius:@radius;     } }

使用
.test { >i {      // 下边1px      .border(0,0,1px,0,0);   } }

CSS的同理也可以撸一个
export default function remoteLoadJS (url, hasCallback) {   return createScript(url)   /**    * 创建script    * @param url    * @returns {Promise}    */   function createScript (url) {     let scriptElement = document.createElement('script')     document.body.appendChild(scriptElement)     let promise = new Promise((resolve, reject) => {       scriptElement.addEventListener('load', e => {         removeScript(url)         if (!hasCallback) {           resolve(e)         }       }, false)       scriptElement.addEventListener('error', e => {         removeScript(url)         reject(e)       }, false)       if (hasCallback) {         window.____callback____ = function () {           resolve()           window.____callback____ = null         }       }     })     if (hasCallback) {       url += '&callback=____callback____'     }     scriptElement.src = url     return promise   }   /**    * 移除script标签    * @param scriptElement script dom    */   function removeScript (src) {     var scripts = document.getElementsByTagName("script");     for (var i = 0; i < scripts.length; i++) {         if (scripts[i] && scripts[i].src && scripts[i].src.indexOf(src) != -1) {             scripts[i].parentNode.removeChild(scripts[i]);         }     }   } }

当然可以用vue-tap,vue-touch
这里讲的是原生的
给dom加个ref,例如demo
data() {   return {       touchDistance: 40 // 滑动的距离   } }, mounted(){    this.handleTouchEvent(this.$refs.demo) }, methods: {     handleTouchEvent(el) {         el.addEventListener('touchstart', this.touchStartEvent true)         el.addEventListener('touchend', this.touchEndEvent, true)         el.addEventListener('touchmove', this.touchMoveEvent, true)     },     removeEventListener(el) {         el.removeEventListener('touchstart', this.touchStartEvent true)         el.removeEventListener('touchend', this.touchEndEvent, true)         el.removeEventListener('touchmove', this.touchMoveEvent, true)     },     touchStartEvent(event) {         event.stopPropagation()         this.clientY = event.changedTouches[0].clientY     },     touchEndEvent(event) {         event.stopPropagation()         const diffY = event.changedTouches[0].clientY - this.clientY         if (diffY > this.touchDistance) {             // 下划         }         if (diffY < -1 * this.touchDistance) {             // 上划         }     },     touchMoveEvent(event) {         event.preventDefault()     } }, beforeDestroy() {     this.removeEventListener(this.$refs.demo) }

addEventListener() 事件监听 removeEventListener() 移除事件监听 element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 “click” ).

第二个参数是事件触发后调用的函数

第三个参数是个布尔值。默认是false（冒泡阶段执行）true(捕获阶段产生)

事件传递有两种方式：冒泡与捕获。事件是先捕获再冒泡的

冒泡阶段，内部元素的事件会先被触发，然后再触发外部元素。即： p 元素的点击事件先触发，然后会触发 div 元素的点击事件。
捕获阶段，外部元素的事件会先被触发，然后才会触发内部元素的事件。即： div元素的点击事件先触发 ，然后再触发 p元素的点击事件。

<div>      <p>some text... ...</p> </div> <script>      var ele = document.querySelector('p');      ele.addEventListener('click', function(e) {         console.log(11, e);     }, true); //捕获先执行     ele.addEventListener('click', function(e) {         console.log(22,e);     }, false);  //冒泡 </script>