SeaHai's Blog

const {Provider, Consumer} = React.createContext(defaultValue);

<Provider value={/*共享的数据*/} />

<Consumer>
  {value => /*根据上下文  进行渲染相应内容*/}
</Consumer>

const obj = {
    tag:'div',
    attrs:{
    className:"test"
    },
    children:[
    tag:'span',
    attrs:{
    className:"text"
    },]
}

class App extends React.Component{
render(){
    return <div>123</div>
    }
}

...
_createClass(App, [{
    key: "render",
    value: function render() {
    return React.createElement("div", null, "123");
    }
}]
);

const React = {};
React.createElement = function(tag, attrs, ...children) {
return {
    tag,
    attrs,
    children
    };
};
export default React;

// ReactDom
const ReactDom = {};
//vnode 虚拟 dom ，即 js 对象
//container 即对应的根标签 包裹元素
const render = function(vnode, container) {
    return container.appendChild(_render(vnode));
};
ReactDom.render = render;

//_render 方法
//_render 方法，接受虚拟 dom 对象，返回真实 dom 对象：
export function _render(vnode) {
  console.log('_render');
  // 如果传入的是 null ,字符串或者数字 那么直接转换成真实 dom 
  if (vnode === undefined || vnode === null || typeof vnode === 'boolean')
    vnode = '';
  if (typeof vnode === 'number') vnode = String(vnode);

  if (typeof vnode === 'string') {
    let textNode = document.createTextNode(vnode);
    return textNode;
  }
  if (typeof vnode.tag === 'function') {
    const component = createComponent(vnode.tag, vnode.attrs);
    setComponentProps(component, vnode.attrs);
    return component.base;
  }

  const dom = document.createElement(vnode.tag);
  // 传入的是个 dom 元素，而且它有属性，需要一个 handleDealAttrs 方法，处理成真实 dom 的属性
  if (vnode.attrs) {
    Object.keys(vnode.attrs).forEach(key => {
      const value = vnode.attrs[key];
      handleDealAttrs(dom, key, value);
    });
  }

  vnode.children && vnode.children.forEach(child => render(child, dom)); // 递归渲染子节点

  return dom;
}

function handleDealAttrs(dom, name, value) {
  if (name === 'className') name = 'class';
  if (/on\w+/.test(name)) {
    name = name.toLowerCase();
    dom[name] = value || '';
  } else if (name === 'style') {
    if (!value || typeof value === 'string') {
      dom.style.cssText = value || '';
    } else if (value && typeof value === 'object') {
      for (let name in value) {
        dom.style[name] =
          typeof value[name] === 'number' ? value[name] + 'px' : value[name];
      }
    }
  } else {
    if (name in dom) {
      dom[name] = value || '';
    }
    if (value) {
      dom.setAttribute(name, value);
    } else {
      dom.removeAttribute(name);
    }
  }
}

Event.onchange; // 事件会在域的内容改变时发生。
Object.defineProperty(obj,key,value) // 在一个对象上存取数据，或者修改数据

// html
<input id="input" type="text" />

// javascript
const data = {};
const input = document.getElementById('input');
Object.defineProperty(data,'text',{
    set(value){
        input.value = value;
        this.value = value;
    }
});

input.onchange = (e) =>{
    data.text = e.target.value;
}

var blob = new Blob(array[optional], options[optional]);

FormData.append(); // 添加键值对
FormData.delete(); // 删除键值对
FormData.entries(); // 返回允许遍历此对象中包含的所有键/值对的迭代器

let formData = new FormData();
formData.append('file', file)
let xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.send(formData);

FileReader.onload; //事件在读取完成后触发。
FileReader.readAsDataURL(); // 转换为base64

// xhr
let xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = "blob";
xhr.onload = function () {
    // 请求完成
    if (this.status === 200) {
        // 返回200
        let blob = this.response;
        let reader = new FileReader(); // 创建 FileReader() 对象
        reader.readAsDataURL(blob); // 转换为base64，直接放入src
        let captcha = document.getElementById('captcha');
        reader.onload = function(e){
            captcha.src = e.target.result; // 输入文件流
            console.log(captcha.src);
        };
        captcha.onload = function() {
            window.URL.revokeObjectURL(captcha.src); // 释放
        };
    }
};
// 发送ajax请求
xhr.send();

let blob = this.response;
let reader = new FileReader();  
reader.readAsDataURL(blob); // 转换为base64，直接放入a标签href  
reader.onload = function(e) {  
    // 转换完成，创建一个a标签用于下载  
    let a = document.createElement('a');  
    a.href = e.target.result;
    a.download = 'fileName';
};
a.onload = function() {
    window.URL.revokeObjectURL(a.href); // 释放
};
document.body.appendChild(a); // 修复firefox中无法触发click  
a.click();  
document.body.removeChild(a);

if (window.navigator.msSaveOrOpenBlob) {  
    navigator.msSaveBlob(blob, fileName);  
}

event：监听的事件
func：事件捕获后触发的函数
useCapture：boolean 对象。
为 true 时，在事件捕获阶段触发函数
为 false 时，在事件冒泡阶段触发函数

/**
 * Definition for singly-linked list.
 * function ListNode(val) {
 *     this.val = val;
 *     this.next = null;
 * }
 */
/**
 * @param {ListNode} node
 * @return {void} Do not return anything, modify node in-place instead.
 */
var deleteNode = function(node) {
    var nodeNext =node.next;
    node.val = nodeNext.val; // 将下个节点的值赋给节点
    node.next = nodeNext.next // 将下个节点的指向赋给节点
};

/**
 * Definition for singly-linked list.
 * function ListNode(val) {
 *     this.val = val;
 *     this.next = null;
 * }
 */
/**
 * @param {ListNode} head
 * @param {number} n
 * @return {ListNode}
 */
var removeNthFromEnd = function(head, n) {
    if(head===null){
        return head
    } 
    if(n===0){
        return head;
    }
    let fast=head;
    let slow=head;
    while(n>0){
        fast = fast.next;
        n--;
    } // 先让fast指针前进n
    if(fast ===  null){
        return head.next;
    } // 先让fast指针前进n，已经不在链表，直接删除头结点
    while(fast.next !== null){
        fast = fast.next;
        slow = slow.next;
    } // slow和fast一起前进
    slow.next = slow.next.next; // fast到了末尾，slow.next就是要删除的结点
    return head;
};

/**
 * @param {character[]} s
 * @return {void} Do not return anything, modify s in-place instead.
 */
let reverseString = function(s) {
    let l=s.length/2, str =''
    for(let i = 0;i < l; i ++){
       str = s[i];
       s[i] = s[s.length-1-i];
       s[s.length-1-i] = str;
    }
    return str;
};

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置。

/**
 * @param {string} s
 * @return {number}
 */
let firstUniqChar = function(s) {
    let l= s.length
    for (let i = 0;i < l;i++) {
        if (s.lastIndexOf(s[i]) === s.indexOf(s[i])) {
            return i
        }
    }
    return -1
};

join() 方法用于把数组中的所有元素放入一个字符串。

/**
 * @param {string} s
 * @param {string} t
 * @return {boolean}
 */
let isAnagram = function(s, t) {
    if (s.length !== t.length) return false;
    let ss = Array.from(s).sort().join(''),
    st = Array.from(t).sort().join('');
    return ss === st;
};

/**
 * @param {string} haystack
 * @param {string} needle
 * @return {number}
 */
let strStr = function(haystack, needle) {
    return haystack.indexOf(needle);
};