编码点滴:第一期

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

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ㄒ)/~~