JSFiddle - React, Tailwind, and code Playground

by etianqq

HTML

<div id="box">
    <div id="content">
        <div>
            Effective Javascript - 对象和原型
            <div><br></div>
            <div>1. 理解prototype, getPrototypeOf, __proto__之间的区别</div>
            <div style="font-size: 30px">C.prototype：用于建立有new C()创建的对象的原型</div>
            <div>getPrototypeOf：ES5中获取Object对象原型的标准方法</div>
            <div>__proto__：获得Object对象原型的非标准方法</div>
            <div><br></div>
            <div><h1>JS中类的本质是一个构造函数</h1>(User)与一个用于该类(User.prototype)实例间共享方法的原型对象的结合</div>
            <div><br></div>
            <div>2. 使用Object.getPrototypeOf函数而不要用__proto__属性</div>
            <div><br></div>
            <div style="font-size: 30px">3. 始终不要修改__proto__属性</div>
            <div><br></div>
            <div>4. 使构造函数与new操作符无关</div>
            <div>用new操作符调用构造函数，接收者是一个全新的对象；</div>
            <div>如果不使用new而直接调用构造函数，接收者是全局对象</div>
            <div><br></div>
            <div style="font-size: 30px">一个好的写法是：</div>
            <div><font color="#002463">function User(name, passwordHash){</font></div>
            <div><font color="#002463"><span>&nbsp;&nbsp;&nbsp;&nbsp;</span>if(!(this instanceof User)) {</font></div>
            <div><font color="#002463"><span>&nbsp; &nbsp;&nbsp;<span>&nbsp;&nbsp;&nbsp;&nbsp;</span></span>return new
                User(name, passwordHash);</font></div>
            <div><font color="#002463"><span>&nbsp;&nbsp;&nbsp;&nbsp;</span>}</font></div>
            <div><font color="#002463"><span>&nbsp; &nbsp; this.name = name;</span><br></font></div>
            <div><font color="#002463"><span>&nbsp; &nbsp; this.passwordHash = passwordHash;</span><br></font></div>
            <div><font color="#002463">}</font></div>
            <div><br></div>
            <div>或者是：</div>
            <div>
                <div><font color="#002463">function User(name, passwordHash){</font></div>
                <div><span><span><font color="#002463">&nbsp; &nbsp; var self = this instanceof User?this:
                   ...

CSS

#box {
            position: relative;
            margin-left: 100px;
            width: 600px;
            height: 300px;
            border: 2px solid #000;
            /*overflow: hidden;*/
        }

        #content {
            position: absolute;
            top: 0;
            left: 0;
            height: 290px;
            padding: 0 5px;
            -webkit-column-width: 290px;
            -webkit-column-gap: 20px;
            -moz-column-width: 290px;
            -moz-column-gap: 20px;
            column-width: 290px;
            column-gap: 20px;
            border: 1px solid red;
        }

JavaScript

var cw = 290; // css:column-width: 290px;
var gap = 20;// css:column-gap: 20px;
$(document).ready(function () {
      var content = $("#content");
      content.css("width", getWidth());
 });

function getWidth(content) {
       var left = $(".endpoint").position().left;
       $(".left").html(left);
       $(".columnCount").html(Math.ceil(left/(cw+gap)));
       var width = left + cw;
       return width;
}