编码点滴:第一期


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

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

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

  1. (react)如何理解组件里面的普通函数和箭头函数

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

    简单来说:

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

    箭头函数

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

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

  2. react native keybordWillShow 安卓是监听不到的,statusbarbarStyle在安卓上面也可以用,需要安卓6.0+

  3. react-navigation

    页面销毁:

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

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

  4. 前端处理emoji表情 😀

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

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

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


文章作者: Yao
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Yao !
 上一篇
从Axios源码学习Promise的妙用 从Axios源码学习Promise的妙用
惭愧,虽然一直在使用Promise/async/await,但是自己其实对Promise并不是特别理解,导致这次遇到问题时候,一直不是特别明白。 需求分析 需求:前端定时刷新 token 接口 分析:看起来不复杂,但是如果考虑到 tok
2020-01-05
下一篇 
React Native 沉浸式状态栏和导航栏 React Native 沉浸式状态栏和导航栏
最近开始接触 React Native 的开发工作,对原生开发基本不了解,里面很多大大小小的坑。这次开发内容不是很复杂,数据交互不是非常多,主要是页面的布局。 如何实现一个顶部隐藏状态栏并显示导航栏的页面? 实现方式 使用Image实现图片
2019-11-24
  目录