Break、Continue、Return

2019-08-14

Break

　　Break 语句会使运行的程序立刻退出包含在最内层的循环或者退出一个 switch 语句。由于它是用来退出循环或者 switch 语句，所以只有当它出现在这些语句时，这种形式的 break 语句才是合法的。

for (var i = 1; i < 10; i++) {
    if (i == 6) {
        break;
    }
console.log(i);
}
// 输出结果 1 2 3 4 5 
// 当 i = 6 时，直接退出当前的这个 for 循环。这个循环将不再被执行，直接进入下一个语句。

Continue

　　Continue 语句和 Break 语句相似。不同的是，它不是退出一个循环，而是开始循环的一次新迭代。

　　Continue 语句只能用在 while 语句、do/while语句、for语句、或者for/in语句的循环体内，在其他地方使用都会引起错误！

for (var i = 1; i < 10; i++) {
    if (i == 6) {
        continue;
    }
console.log(i);
}
// 输出结果 1 2 3 4 5 7 8 9
// 当 i = 6 时，直接跳出本次 for 循环。继续下一次的循环执行。

more >>

展开全文 >>

你不知道的JavaScript（上）

2019-08-14

Scope & Closures this & Object Prototypes(作用域、闭包、原型)

作用域和闭包

作用域是什么

作用域是一套规则，用于确定在何处以及如何查找变量（标识符）。如果查找的目的是对变量进行赋值，那么就会使用 LHS（可以理解为赋值操作的目标是谁）查询；如果目的是获取变量的值，就会使用 RHS（谁是赋值操作的源头）查询。

// 变量赋值
// 这里的目的是为了给 a 变量赋值 2，所以执行的是 LHS 查询（找到赋值操作的目标是谁）
a = 2;
// 获取变量的值
// 目的是打印输出 a 变量的值（找到源头）
console.log(a);

赋值操作符会导致 LHS 查询。= 操作符或调用函数时传入参数的操作都会导致关联作用域的赋值操作。

JavaScript 引擎首先会在代码执行前对其进行编译，在这个过程中，像 var a = 2 这样的声明会被分解成两个独立的步骤：

首先， var a 在其作用域中声明新变量。这会在最开始的阶段，也就是代码执行前进行。
接下来，a = 2 会查询（LHS 查询）变量 a 并对其进行赋值。

LHS 和 RHS 查询都会在当前执行作用域中开始，如果有需要（也就是说它们没有找到所需的标识符），就会向上级作用域继续查找目标标识符，这样每次上升一级作用域，最后抵达全局作用域（最顶层作用域），无论找到或没找到都将停止。

不成功的 RHS 引用会导致抛出 ReferenceError 异常。不成功的 LHS 引用会导致自动隐式地创建一个全局变量（非严格模式下），该变量使用 LHS 引用的目标作为标识符，或者抛出 ReferenceError 异常（严格模式下）。
more >>

展开全文 >>

AsynchronousCoding

2018-12-04

阅读本篇文章之前一定要明白异步解决方案和 http 的关系。异步是异步，http 是http。http 请求是一个异步的过程，而异步并不一定就和 http 请求联系在一起。所以不要提起异步就默认为就是 ajax请求数据。

Promise

Promise 对象用于表示一个异步操作的最终状态（玩成或失败），以及其返回的值。

看下控制台输出的 Promise 对象信息：

Promise 的构造函数接受一个函数作为参数。传入的函数参数可以有两个： resolve 和 reject。resolve 是将 Promise 从 pending 状态置为 fulfilled 状态。 reject 是将 Promise 状态从 pending 置为 rejected 状态。我们可以简单的理解成：resolve 表示异步操作成功后的回调函数， reject 表示异步操作失败后的回调函数。

Promise 最直接的好处就是链式调用。

more >>

展开全文 >>

函数柯里化

2018-08-29

什么是柯里化？

在计算机科学中，柯里化（Currying）是把接收多个参数的函数换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数且返回结果的新函数的技术。这个技术由 Christopher Strachey 以逻辑学家 Haskell Curry 命名的，尽管它是 Moses Schnfinkel 和 Gottlob Frege 发明的。

简单的理解就是：原本一个函数是被写成可以接受多个参数的形式，现在将其改写成每次接受一个参数（按照之前传参的顺序）的函数形式，这里需要处理的是如何存储每次传参后处理得到的结果以及如何返回一个函数进而能使后一个传进来的参数能继续执行下去。

代码上示意：

1	f(x,y,z) -> f(x)(y)(z)

为什么对函数进行柯里化

固定易变因素（比如this）
可以实现对众多子功能的开关把控

more >>

展开全文 >>

CSS样式的特殊性

2018-08-15

特殊性、继承、层叠

特殊性

同一个元素可以通过多种方式选取到，不同的选取方式会应用不同的样式规则。那么当应用的样式规则存在冲突的时候，肯定需要评出一个优先级最高的规则来应用（毕竟一种元素最终只能呈现一种规则的样式）。对于每个规则，用户代理会计算选择器的特殊性，并将这个特殊性附加到规则中的各个声明，最后拥有最高特殊性的声明会在冲突中胜出。

特殊性值表述为4个部分，如：0，0，0，0。一个选择器的具体特殊性如下确定：
- 对于选择器中给定的各个ID属性值，加0，1，0，0。
- 对于选择器中给定的各个类属性值、属性选择或伪类，加0，0，1，0。
- 对于选择其中给定的各个元素和伪元素，加0，0，0，1。伪元素是否有特殊性？在这个方面CSS2有些自相矛盾，不过CSS2.1很清楚地指出，伪元素有特殊性，而且特殊性为0，0，0，1。
- 结合符和通配选择器对特殊性没有任何贡献
  
  示例：
  1
  2
  3
  4
  5
  h1 { color: red; } /* 0,0,0,1 */
  body h1 { color: green; } /* 0,0,0,2 (winner) */
  
  h2.grape { color: purple; } /* 0,0,1,1 (winner) */
  h2 { color: silver; } /* 0,0,0,1 */
  more >>

展开全文 >>

奇怪的滚动条

2018-07-03

不可预料的滚动条出现，处理方法:

html页面嵌入iframe,已设置宽高的百分比后仍然出现滚动条


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <iframe src="svg.svg" style="border:none;width: 100%;height: 100%;"></iframe>
</body>
</html>

原因： iframe和img标签类似，是inline-block标签，空白符被解析。

解决思路：首先考虑是不是设置了margin/padding。根据以上代码，排除内外边距的原因。
查阅网上资料，一般有两种方案。一种是改变父级样式：font-size: 0;或者line-height: 0。另外一种可能是
该标签的display属性值为inline-block（比如 iframe 、img），针对这个原因造成的解决办法就是改变inline-block自身样式，如display: block; 或者 vertical-align: middle;

展开全文 >>

React-Virtual-Dom算法

2018-07-03

React的virtual Dom

React组件挂载：JSX/TSX ==>JavaScript对象==>真实DOM

无论是.jsx还是.tsx，都是先把组件中的render()方法返回的Html标签结构转化成JavaScript对象，生成
一个虚拟的DOM树，然后经历一系列的逻辑操作后，使用ReactDOM.render()（import * as ReactDOM from ‘react-dom’）方法将虚拟的DOM转化为真实的DOM树。

应用Virtual DOM算法的几个步骤：

用JavaScript对象结构表示DOM树的结构，然后用这个树构建一个真正的DOM树，并插入到文档中。
当状态变更的时候，重新构造一棵新的对象树（新的JavaScript树）。然后用新的树和旧的树进行比较，比较两棵树的差异
把比较后的得到的差异应用到之前构造的真正的DOM树上，这样视图就更新了。

创建virtual Dom的目的：

相对于直接操作页面的DOM，直接操作JavaScript对象（虚拟Dom树）处理起来更快，而且更简单。

通过对比缓存在内存中的新旧JavaScript对象树，我们可以获取到先后的差异，这样我么就可以针对这个明确的差异去修改对应的真实DOM结构，而不需要整体或者频繁的去改动真实的DOM结构。

more >>

展开全文 >>

React-HigherOrderComponent

2018-07-03

阅读之前，首先要问下自己：前端为什么要进行组件化开发

什么是高阶组件？

高阶组件就是一个函数，该函数的特点是需要给它传递一个组件作为参数（参数还可以包含其他的数据），它会返回一个新的组件。

高阶组件定义示例：

import React, { Component } from 'react'

// 默认导出了一个函数，该函数有两个参数，第一个参数是一个组件，第二个是一个字符串
//  该函数就是一个高阶组件
export default (WrappedComponent, name) => {
  class NewComponent extends Component {
    constructor () {
      super()
      this.state = { data: null }
    }

    componentWillMount () {
      let data = localStorage.getItem(name)
      this.setState({ data })
    }

    render () {
      return <WrappedComponent data={this.state.data} />
    }
  }
  return NewComponent
}

more >>

展开全文 >>

React笔记

2018-06-22

入门推荐

跟随官网教程入门

阅读“reactJs 小书”加强理解

阅读react源码

安装快速启动种子文件

1	npm install -g create-react-app

使用种子文件创建TypeScript类型的环境参考资料

1	create-react-app my-app --scripts-version=react-scripts-ts

more >>

展开全文 >>

鼠标Event事件

2018-06-22

Event对象、获取Dom元素显示tips

鼠标Event对象

Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

event.currentTarget和event.target的区别 参考资料

事件捕获层上有多个节点，单击时，得到的currentTarget是设定的捕获层节点（事件绑定的元素），而target则是实际被单击的节点，
实际被单击的节点通常位于currentTarget之内的子节点或是其本身

event对象screenX、clientX 、pageX区别。参考资料

获取dom元素的位置信息

getBoundingClientRect方法用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗window的位置。返回的是一个对象，该对象有四个属性：top，left，right，bottom；该方法原本是IE Only的，但是FF3.0+和Opera9.5+已经支持了该方法，可以说在获得页面元素位置上效率有很大的提高。另外，该方法避免使用while循环，而是直接获取数值来实现，比第一种方法性能要好，特别是在复杂的页面上更为明显。
参考资料

鼠标滑过显示tip提示框

常规dom结构标签，生成常规标签

function MyOnMouseOver(event, hint, mytimr) {
    $("#svgtips").css({ "display": "block", "top": $(event.currentTarget).offset().top + event.currentTarget.getBoundingClientRect().height, "left": $(event.currentTarget).offset().left + event.currentTarget.getBoundingClientRect().width });
}
function MyOnMouseOut() {
    $("#svgtips").css("display", "none");
    $("#svgtips").html("");
}

结合svg，在svg内部生成svg的标签

function ShuZiLiang_MouseOver(event) {
    if (event.target.parentNode.getAttribute('hint')) {
        //如果配置了hint的描述值
        if (document.getElementById('svgtip_box')) {
            //页面已经存在提示框
            document.getElementById('svgtip_box').style.display = 'block';
            var _obj = document.getElementById('svgtip_box').getElementsByTagName('text');
            _obj[0].setAttribute('x', event.target.getBBox().x);
            _obj[0].setAttribute('y', event.target.getBBox().y);
            _obj[0].textContent = event.target.parentNode.getAttribute('hint');
        } else {
            var _tip = document.createElementNS("http://www.w3.org/2000/svg", "g");
            _tip.setAttribute('id', 'svgtip_box');
            _tip.setAttribute('transform', event.target.parentNode.getAttribute('transform'));
            var _tipText = document.createElementNS("http://www.w3.org/2000/svg", "text");
            _tipText.textContent = event.target.parentNode.getAttribute('hint');
            _tipText.setAttribute('x', event.target.getBBox().x);
            _tipText.setAttribute('y', event.target.getBBox().y);
            _tipText.setAttribute('fill', '#555');
            _tipText.style.fontSize = '16px';
            _tip.appendChild(_tipText);
            console.log(_tipText);
            console.log(event.target.ownerDocument.getElementsByTagName("svg")[0]);
            console.log(_tip);
            //event.target.ownerDocument.rootElement.appendChild(_tip);
            if (event.target.ownerDocument.getElementsByTagName("svg")[0]) {
                event.target.ownerDocument.getElementsByTagName("svg")[0].appendChild(_tip);
            }
            
        }
    }
}

function ShuZiLiang_MouseOut(event) {
    if (document.getElementById('svgtip_box')) {
        $("#svgtip_box").remove();
        //$("#svgtip_box").css("display", "none");
        //document.getElementById('tip_box').parentNode.removeChild(document.getElementById('tip_box'));
        //event.target.ownerDocument.getElementsByTagName("svg")[0].removeChild(document.getElementById('tip_box'));
    }
}

展开全文 >>