<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" ></script>
</head>
<body>
  <input data-bind-user="name">
  <span  data-bind-user="name"></span>
</body>
 <script>
    function dataBind(uid) {
        var pubSub = $({})
        var dataAttr = 'bind-'+uid
        var message = uid+':change'

        $(document).on('input change','[data-'+dataAttr+']',function () {
            var $ele = $(this)
            pubSub.trigger(message,[$ele.data(dataAttr),$ele.val()])
        })
        pubSub.on(message,function (event,proName,val) {
            $('[data-'+dataAttr+'='+proName+']').each(function () {
                var $ele = $(this)
                if($ele.is('input,textarea,select')){
                    $ele.val(val)
                }else {
                    $ele.text(val)
                }
            })
        })
    }
    dataBind('user')

 </script>
</html>

jquery实现数据双向绑定

参考：http://eux.baidu.com/blog/fe/use-jquery-to-achieve-a-simple-data-binding

为原生api添加功能

参考：http://eux.baidu.com/blog/fe/%E4%B8%BA%E5%8E%9F%E7%94%9Fapi%E6%B7%BB%E5%8A%A0%E5%8A%9F%E8%83%BD

(function () {//不用修改this
    let a = alert;

    alert = function (v) {
        console.log(v);
        a(v);
    }

    alert(1); // 控制台输出1，弹窗1
})();

let a = console.log; //需要修改this

console.log = function () {
    var args = [].slice.call(arguments)
    a.apply(this,args);
    alert(args[0])
}

console.log(1); // 控制台输出1，弹窗1

实现一个高度自适应的输入框

参考：http://eux.baidu.com/blog/fe/%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E9%AB%98%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94%E7%9A%84%E8%BE%93%E5%85%A5%E6%A1%86

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        textarea {
            resize: none;
        }
    </style>
</head>
<script type="text/javascript" src="https://cdn.bootcss.com/autosize.js/4.0.2/autosize.min.js"></script>
<body>
<textarea id="textarea" rows="1" placeholder="请输入内容..." maxlength="50"></textarea>
</body>
<script type="text/javascript">
   autosize(document.querySelector('#textarea'));
</script>
</html>

Timing Api 是通过获取页面响应时间记录页面性能的 api。像是浏览器 devtool 里边的 performance。

预加载：http://eux.baidu.com/blog/fe/link-preload-%E6%A0%87%E7%AD%BE

百度EUX学习笔记

实现一个高度自适应的输入框