编码点滴:第一期

本周遇到几个有意思的问题。下面一一记录。

1. （css）使用flex布局，如何保证上下行之间间距，并且最后一行和容器空间为0

   元素之间使用margin-bottom保持距离，最后一行元素的距离，使用外层的负margin抵消

2. （react）如何理解组件里面的普通函数和箭头函数

   参考：https://www.zhihu.com/question/59025982

   简单来说：

   普通函数 Foo.prototype.a = function(){}

   箭头函数

   class Foo {
       constructor() {
           this. a= () => {}
       }
   }
   

   普通函数挂载在原型上面，箭头函数挂载在对象上面。使用箭头函数绑定不需要使用bind，比较方便。

3. react native keybordWillShow 安卓是监听不到的，statusbar中barStyle在安卓上面也可以用，需要安卓6.0+

4. react-navigation

   页面销毁：

   a->b ：不会执行页面销毁事件

   b返回a：执行b页面销毁事件

5. 前端处理emoji表情 😀

   正常应该数据库保存emoji表情，数据库使用utf8mp4，最完美的解决方案。

   但是有时候，数据库是以前的，不可能变更，这时候前端可以把emoji转成utf-16，然后传给后端。可以直接使用umoji的emojiToUnicode方法。

   验证utf-16是否正确：https://www.browserling.com/tools/utf16-decode

   前端如何解析这个utf-16 呢？https://www.jianshu.com/p/432425a02b59

   编码解码函数：

   // 编码
   function utf16toEntities(str) { 
           var patt=/[\ud800-\udbff][\udc00-\udfff]/g; // 检测utf16字符正则 
           str = str.replace(patt, function(char){ 
                   var H, L, code; 
                   if (char.length===2) { 
                       H = char.charCodeAt(0); // 取出高位 
                       L = char.charCodeAt(1); // 取出低位 
                       code = (H - 0xD800) * 0x400 + 0x10000 + L - 0xDC00; // 转换算法 
                       return "&#" + code + ";"; 
                   } else { 
                    return char; 
                   } 
            }); 
           return str; 
    }
   // 解码
   function uncodeUtf16(str){
           var reg = /\&#.*?;/g;
           var result = str.replace(reg,function(char){
               var H,L,code;
               if(char.length == 9 ){
                   code = parseInt(char.match(/[0-9]+/g));
                   H = Math.floor((code-0x10000) / 0x400)+0xD800;
                   L = (code - 0x10000) % 0x400 + 0xDC00;
                   return unescape("%u"+H.toString(16)+"%u"+L.toString(16));
               }else{
                   return char;
               }
           });
           return result;
       }
   

   但是但是，我解析的时候直接JSON.parse(emoji)也是可以的….试了偏僻的字符也可以，想搞明白为什么，没有找到文章=-=，不知道是埋了炸弹，还是狗屎运/(ㄒoㄒ)/~~