438198602 / frontend Goto Github PK

root = true

[*]
# 缩进样式 空格
indent_style = space
# 缩进宽度 4个空格
indent_size = 4
# 字符编码 utf-8
charset = utf-8
# 换行符使用 unix 的换行符 \n
end_of_line = lf
# 行尾允许空格
trim_trailing_whitespace = true
# 文件末尾加一个空行
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false        # .md 文件不去掉每行末尾的空格

img {
    display: inline-block;
    position: relative;
    width: 540px;
    height: 258px;
    background: #ccc;
    vertical-align: top;
}
img:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('https://www.baidu.com/img/bd_logo1.png') #ccc;
}

// VNode
export default class VNode {
  tag: string | void;
  data: VNodeData | void;
  children: ?Array<VNode>;
  text: string | void;
  elm: Node | void;
  ns: string | void;
  context: Component | void; // rendered in this component's scope
  key: string | number | void;
  componentOptions: VNodeComponentOptions | void;
  componentInstance: Component | void; // component instance
  parent: VNode | void; // component placeholder node

  // strictly internal
  raw: boolean; // contains raw HTML? (server only)
  isStatic: boolean; // hoisted static node
  isRootInsert: boolean; // necessary for enter transition check
  isComment: boolean; // empty comment placeholder?
  isCloned: boolean; // is a cloned node?
  isOnce: boolean; // is a v-once node?
  asyncFactory: Function | void; // async component factory function
  asyncMeta: Object | void;
  isAsyncPlaceholder: boolean;
  ssrContext: Object | void;
  fnContext: Component | void; // real context vm for functional nodes
  fnOptions: ?ComponentOptions; // for SSR caching
  fnScopeId: ?string; // functioanl scope id support

  constructor (
    tag?: string,
    data?: VNodeData,
    children?: ?Array<VNode>,
    text?: string,
    elm?: Node,
    context?: Component,
    componentOptions?: VNodeComponentOptions,
    asyncFactory?: Function
  ) {
    this.tag = tag // 当前节点标签名
    this.data = data // 当前节点数据（VNodeData类型）
    this.children = children // 当前节点子节点
    this.text = text // 当前节点文本
    this.elm = elm // 当前节点对应的真实DOM节点
    this.ns = undefined // 当前节点命名空间
    this.context = context // 当前节点上下文
    this.fnContext = undefined // 函数化组件上下文
    this.fnOptions = undefined // 函数化组件配置项
    this.fnScopeId = undefined // 函数化组件ScopeId
    this.key = data && data.key // 子节点key属性
    this.componentOptions = componentOptions // 组件配置项 
    this.componentInstance = undefined // 组件实例
    this.parent = undefined // 当前节点父节点
    this.raw = false // 是否为原生HTML或只是普通文本
    this.isStatic = false // 静态节点标志 keep-alive
    this.isRootInsert = true // 是否作为根节点插入
    this.isComment = false // 是否为注释节点
    this.isCloned = false // 是否为克隆节点
    this.isOnce = false // 是否为v-once节点
    this.asyncFactory = asyncFactory // 异步工厂方法 
    this.asyncMeta = undefined // 异步Meta
    this.isAsyncPlaceholder = false // 是否为异步占位
  }

  // 容器实例向后兼容的别名
  get child (): Component | void {
    return this.componentInstance
  }
}

class Element {
  constructor(type, attr, children) {
    this.type = type;
    this.attr = attr;
    this.children = children;
    /*this.props={...attr,children:children}*/
  }
  render() {
    // 这个方法将虚拟的DOM转成真实的DOM；
    let ele = document.createElement(this.type);
    // 2. 设置行间属性
    for (let key in this.attr) {
      let _key = key;
      if (key === "className") {
        _key = "class";
      }
      if (key === "htmlFor") {
        _key = "for";
      }
      ele.setAttribute(_key, this.attr[key]);
    }
    // 3.children
    this.children.forEach(item => {
      // 如果数组中的成员是Element的实例,需要继续调用render方法；将虚拟的DOM转成真实的DOM；
      // 循环子节点，都放入ele中；
      let curEle =
        item instanceof Element
          ? item.render()
          : document.createTextNode(item);
      ele.appendChild(curEle);
    });
    return ele; // 将创建的元素转成DOM返回；
  }
}
let obj = {
  createElement(type, attr, ...children) {
    // type: 元素类型
    // attr：行间属性
    // children : 子节点 ... 把多余的参数放进一个数组中；
    return new Element(type, attr, children);
  }
};
let objDOM = {
  render(element, container) {
    // container : 容器，根元素；
    // element: 虚拟的DOM对象；当render执行时，让这个虚拟的DOM转成真实的DOM；
    container.appendChild(element.render());
  }
};
let y = obj.createElement("div", { a: 1, className: 12 }, "**北京");
objDOM.render(y, document.getElementById("root"));

<div a="1" class="12">**北京</div>

let startTime = new Date().getTime(),
    count = 0;
// 模拟耗时任务
setInterval(function() {
  let i = 0;
  while (i++ < 1000000000);
}, 0);
setInterval(function() {
  count++;
  console.log("间隔：", new Date().getTime() - (startTime + count * 1000), "毫秒");
}, 1000);

间隔： 852 毫秒
间隔： 1098 毫秒
间隔： 1950 毫秒
间隔： 2175 毫秒
间隔： 2980 毫秒
间隔： 3203 毫秒
间隔： 4035 毫秒
间隔： 4865 毫秒
间隔： 5102 毫秒
间隔： 6093 毫秒
间隔： 6976 毫秒
间隔： 7245 毫秒
间隔： 8050 毫秒
间隔： 8908 毫秒
间隔： 9131 毫秒
间隔： 10020 毫秒
间隔： 10882 毫秒
间隔： 11153 毫秒
...

setInterval(function, N)
// 即：每隔 N 秒把 function 事件推到消息队列中

let startTime = new Date().getTime(),
    count = 0;
// 模拟耗时任务
setInterval(function() {
  let i = 0;
  while (i++ < 1000000000);
}, 0);
const repeat = (func, ms) => {
  setTimeout(() => {
    func();
    repeat(func, ms);
  }, ms);
};
repeat(() => {
  count++;
  console.log("间隔：", new Date().getTime() - (startTime + count * 1000), "毫秒");
}, 1000);

定位属性：position、display、float、left、top、right、bottom、overflow、clear、z-index

自身属性：width、height、padding、border、margin、background

文字样式：font-family、font-size、font-style、font-weight、color

文本属性：text-align、vertical-align、text-wrap、text-transform、text-indent、text-decoration、letter-spacing、word-spacing、white-space、text-overflow

css3中新增属性：content、box-shadow、border-radius、transform

width: 100px;
height: 100px;
position: absolute;

// 对 JavaScript 文件使用 TypeScript 的 Type Checking（类型检查）
// 下面这行绝对不能删除
// @ts-check


// 对变量进行类型检查
/**
 * @type {number}
 */
let x;
x = 0;


// 对函数进行类型检查
/**
 * @param {string} foo
 * @param {string} bar
 * @returns {string}
*/
function test1(foo, bar) {
    return `${foo} and ${bar}`;
}

// @ts-check
/**
 * @typedef Example1
 * @prop {string} street 街道
 * @prop {string} city 城市
 * @prop {number} zip 邮政编码
 *
 * @typedef Example2
 * @prop {string} name
 * @prop {string} email
 * @prop {Boolean} isShow
 */

/** @type {Example1} */
const data1 = {
    street: '街道',
    city: 100
};

/** @type {Example1 & Example2} */
const data2 = {
    street: '街道',
    city: 100,
    name: '001',
    isShow: 2
};

parseInt(string, radix)

console.log(parseInt(0.5));       // => 0
console.log(parseInt(0.05));      // => 0
console.log(parseInt(0.005));     // => 0
console.log(parseInt(0.0005));    // => 0
console.log(parseInt(0.00005));   // => 0
console.log(parseInt(0.000005));  // => 0
console.log(parseInt(0.0000005)); // => 5

console.log(String(0.5));       // => '0.5'
console.log(String(0.05));      // => '0.05'
console.log(String(0.005));     // => '0.005'
console.log(String(0.0005));    // => '0.0005'
console.log(String(0.00005));   // => '0.00005'
console.log(String(0.000005));  // => '0.000005'
console.log(String(0.0000005)); // => '5e-7'

console.log(parseInt(0.0000005)); // => 5
console.log(parseInt(5e-7));      // => 5
console.log(parseInt('5e-7'));    // => 5

0.1 + 0.2 = 0.30000000000000004
0.3 - 0.2 = 0.09999999999999998
0.1 * 3 = 0.30000000000000004
0.3 / 0.1 = 2.9999999999999996

0.1 -> 0.00011001100110011001100110011001100110011001100110011010
0.2 -> 0.0011001100110011001100110011001100110011001100110011010

0.0100110011001100110011001100110011001100110011001100111

// toFixed兼容方法
Number.prototype.toFixed = function(len) {
    if (len > 20 || len < 0) {
        throw new RangeError('toFixed() digits argument must be between 0 and 20');
    }
    // 对数字末尾加0
    function padNum(num) {
        num = num.toString();
        var dotPos = num.indexOf('.');
        if (dotPos === -1) {
            // 整数的情况
            num += '.';
            for (var i = 0; i < len; i++) {
                num += '0';
            }
            return num;
        } else {
            // 小数的情况
            var need = len - (num.length - dotPos - 1);
            for (var j = 0; j < need; j++) {
                num += '0';
            }
            return num;
        }
    }
    // .123 转为 0.123
    var number = Number(this);
    if (isNaN(number) || number >= Math.pow(10, 21)) {
        return number.toString();
    }
    if (typeof (len) == 'undefined' || len == 0) {
        return (Math.round(number)).toString();
    }
    var result = number.toString(),
        numberArr = result.split('.');

    if (numberArr.length < 2) {
        // 整数的情况
        return padNum(result);
    }
    var intNum = numberArr[0], // 整数部分
        deciNum = numberArr[1], // 小数部分
        lastNum = deciNum.substr(len, 1); // 最后一个数字
    
    if (deciNum.length == len) {
        // 需要截取的长度等于当前长度
        return result;
    }
    if (deciNum.length < len) {
        // 需要截取的长度大于当前长度 1.3.toFixed(2)
        return padNum(result);
    }
    // 需要截取的长度小于当前长度，需要判断最后一位数字
    result = intNum + '.' + deciNum.substr(0, len);
    if (parseInt(lastNum, 10) >= 5) {
        // 最后一位数字大于5，要进位
        var times = Math.pow(10, len); // 需要放大的倍数
        var changedInt = Number(result.replace('.', '')); // 截取后转为整数
        changedInt++; // 整数进位
        changedInt /= times; // 整数转为小数，注：有可能还是整数
        result = padNum(changedInt + '');
    }
    return result;
}

var x = 3;
console.log(++x);
// 4
console.log(x);
// 4

var y = 3;
console.log(y++);
// 3
console.log(y);
// 4