小陀螺的博客 2018-02-25T03:05:51.000Z https://wllluoo.github.io/myblog/ wllluoo Hexo js中的事件委托 https://wllluoo.github.io/myblog/2018/02/24/事件委托/ 2018-02-23T16:00:00.000Z 2018-02-25T03:05:51.000Z 特效：浏览器滚动时，文字滑入特效 https://wllluoo.github.io/myblog/2017/10/22/fade/ 2017-10-21T16:00:00.000Z 2018-02-17T15:02:12.000Z 1.首先要获取内容进入屏幕边缘的零界点

可以通过 滚轮移动端距离 + 浏览器窗口大小 > 元素距离页面顶部的距离来进行判断。
监听浏览器滚动事件：

1
2
3
4
5
6
//给页面绑定滑轮滚动事件
if (document.addEventListener) {//firefox
  document.addEventListener('DOMMouseScroll', scrollFun, false);
}
//滚动滑轮触发scrollFunc方法 //ie 谷歌
window.onmousewheel = document.onmousewheel = scrollFun;
若是移动端还需加上：
1
document.addEventListener('scroll',scrollFun, false);

2.处理滚动事件：

当元素进入浏览器边缘时，对该元素添加一个class，令其具有滑入的特效。因此给需要有滑入特效的元素事先增加自定义的class，以便选中。 
1
2
3
4
function revealOnScroll() {
      var scrolled = $(window).scrollTop();  // 获取滚动条移动的距离，即移动的位移
      scrollFadeUpFun(scrolled, 'fade’); // 选中所有class为fade的元素
  }

3.获取浏览器高度：

1
var windowHeight = document.body.clientHeight;

4.操作元素：

1
2
3
4
5
6
7
8
9
10
function scrollFadeUpFun(scrolled, element) {
  $("." + element).each(function() {
    var $this = $(this),
    fadeOffsetTop = $this.offset().top; // 该元素在dom中距离顶部的距离
    if (windowHeight + scrolled > fadeOffsetTop) {
      // 当 窗口高度 + 滚动的高度 > 元素在dom中距离顶部的距离 即进入浏览器的下边缘时
      $this.addClass('fade_up');
    }
  });
 }

5.html中, 定义需滑入的元素

1
2
3
4
<div class='fade'>
      <p>回顾所来径</p>
      <p>苍苍横翠薇</p>
</div>

6.给元素增加滑入渐变特效，如下所示，即元素的透明度从0.1变为1, 位置从80px还原为0px。

1
2
3
4
5
6
7
8
9
10
11
12
13
元素自身样式
  .fade {
  display: block;
  transform: translateY(80px);
  opacity: 0.1;
  }
  定义滑入样式
  .fade_up {
  transform: translateY(0px);
  -webkit-transition: -webkit-transform .8s ease-out, opacity .8s ease-in;
  transition: transform .8s ease-out, opacity .8s ease-in-out;
  opacity: 1;
  }
]]> <h2 id="1-首先要获取内容进入屏幕边缘的零界点"><a href="#1-首先要获取内容进入屏幕边缘的零界点" class="headerlink" title="1.首先要获取内容进入屏幕边缘的零界点"></a>1.首先要获取内容进入屏幕边缘的零界点</h2><p> typescript测试之小试牛刀 https://wllluoo.github.io/myblog/2017/09/03/typescript/ 2017-09-02T16:00:00.000Z 2018-02-17T15:02:46.000Z TypeScript基于接口的强类型定义，能很好的弥补javascript语言的先天不足，并且遵循了es6标准，因此只要掌握了 TypeScript ，就相当于掌握了 JavaScript 语言的最新标准，并且能在老式浏览器上完整运行（先吹一波）。

1.变量定义

1
2
3
4
const test: string = 'nihao'; // 字符串
const aaa: number = 12121;   // 数字
const member: string[] = ['111', '222', '3333']; // 字符串类型的数组
console.log(member.toString()); // 111,222,3333
若不按给定的类型定义，将报错，如下：
1
2
const aaa: number = '12121';  
// 报错： Type '"12121"' is not assignable to type 'number'.

2.接口的使用

例1:

1
2
3
4
5
6
7
8
9
10
interface SuperHero {
    realName: String;
    superName: String;
}
const superman: SuperHero = {
  realName: 'spiderman',    // 需给出符合 SuperHero接口的数据类型的定义 
  superName: 'superman',
};
console.log(`${superman.realName} is a ${superman.superName}`);
// spiderman is a superman

例2:

1
2
3
4
5
6
7
8
9
10
11
12
interface SuperHero {
        realName: String;
        superName: String;
    }
// 定义一个 SuperHero类型的数组, SuperHero的值，需是符合SuperHero借口定义的对象。
const SuperHeroes: SuperHero[] = [];  
    SuperHeroes.push({
      realName: 'Ah way',
      superName: 'superman',
    });
console.log(`${SuperHeroes[0].realName} is a ${SuperHeroes[0].superName}`);
// Ah way is a superman

3.方法的使用：

例1:

1
2
3
4
5
// 定义一个接收两个number参数的方法，并返回数字类型的和
const getSum = function (num1: number, num2: number): number {    
  return num1 + num2;
};
const sum1 = getSum(2, 5); // 7

例2:

1
2
3
4
5
6
7
8
9
// 定义一个方法，其中num2 赋值为2, num3可不传或为number类型的参数
const getSum = function (num1: number, num2 = 2, num3?: number): number { 
  if (typeof num3 !== 'undefined') {
    return num1 + num2 + num3;
  }
  return num1 + num2;
};
const sum1 = getSum(5); // 7
const sum2 = getSum(5, 2, 1); // 8

例3:

1
2
3
4
5
// 定义一个方法，接收多个number的参数，并将所有参数整合为数组
const getSum = function (...nums: number[]): void { 
      const sum = nums.reduce((a, b) => a + b, 0);     
    };
getSum(5, 2, 1);  // 8

4.类继承接口的使用

1
2
3
4
5
6
7
8
9
10
11
12
// 定义一个有drive参数的Vehicle接口，其中drive可以是任意的数据类型
interface Vehicle {   
    drive: any;
}
class Car implements Vehicle {  // 定义一个Car继承Vehicle接口
    constructor(private wheels: number){} //构造器去接收wheels参数
    drive() : void { 
        console.log('this.wheels', this.wheels);
    }
}
var car = new Car(4); // 实例化一个Car对象
car.drive(); // this.wheels : 4

5.接收固定参数的方法

1
2
3
4
5
6
7
function GetType<T>(val: T): string {
  return typeof (val);
}
const testStr = 'test';
const testNum = 123;
GetType(testStr); // string
GetType(testNum); // number

6. 方法继承接口的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
interface Vehicle {    
    drive: any;
}
class Car implements Vehicle { // 
    constructor(private wheels: number){}
    drive(): void {
        console.log('this.wheels', this.wheels);
    }
}
var car = new Car(4);
  
function GetWheels<w extends Vehicle> (veh: w): number {
    return veh.drive();
}
GetWheels(car); // this.wheels : 4

7. 接收固定参数的类

1
2
3
4
5
6
7
8
9
10
// 构造一个GenericNumber类，其中有add方法，接收一个参数，作为add方法参数的类型
class GenericNumber<T>{  
    add: (val1: T, val2: T) => T;
}
var aNumber = new GenericNumber<number>(); // new 一个GenericNumber类的实例，并定义add方法接收Number类型的参数
aNumber.add = function(x, y) {
    return x + y;
}
console.log(aNumber.add(5, 4));  // 9
console.log(aNumber.add('5', '4'));  // 报错 Argument of type '"5"' is not assignable to parameter of type 'number'.
]]> <p>TypeScript基于接口的强类型定义，能很好的弥补javascript语言的先天不足，并且遵循了es6标准，因此只要掌握了 TypeScript ，就相当于掌握了 JavaScript 语言的最新标准，并且能在老式浏览器上完整运行（先吹一波）。</p> <h2 id=" react中通过displayName改变组件名 https://wllluoo.github.io/myblog/2017/08/28/reactDisplay/ 2017-08-27T16:00:00.000Z 2018-02-17T15:13:29.000Z 先讲一点react的基础部分：

1. react中创建组件的写法:

var a = <Component {...props} />，实质上是React调用createElement方法，生成一个虚拟的DOM元素。等同于如下：
var a = React.createElement(Component, props);

2. 创建类的写法：

class Component{ }，其本质是一个方法， 在babel中转化如下：

1
2
3
4
5
6
7
8
9
 function _classCallCheck(instance, Constructor) { 
  if (!(instance instanceof Constructor)) {  // 类型检测
    throw new TypeError("Cannot call a class as a function"); 
  } 
}
 
var Component = function Component() {
  _classCallCheck(this, Component);
};

3. 在DOM中渲染一个button按钮：

1
2
3
var child = React.createElement('p', { id: 'bbb' }, 'click me');
var app = React.createElement('button', { id: 'aaa', onClick: () => console.log(1111) }, child);
ReactDOM.render(app, document.getElementById('root'));

上述将生成一个包裹着p标签的button组件。ReactElement: 一个描述DOM节点或component实例的字面级对象。创建并返回一个新的react element元素及虚拟DOM对象。type可以是一个普通的标签名如div或span, 亦可以是react组件类型（class或是function)。

4. 提供一个改变组件名字的方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class ButtonForTest extends Component {  // 写一个class供addName方法使用，也可以是一个function
  render() {
    return (
      <Button>1111</Button>
    )
  }
} 
function addName(name, Component) { // 接收一个名字，及一个组件
  function WithName(props) {
    return <Component {...props} />;
  }
  WithName.displayName = `${name}`;  // 改变function 的名字,即改变WithName类的名字。
  return WithName;
}
const newName = { key: addName('NewName', ButtonForTest) };
const NewComponent = <newName.key />; // -》 var c = React.createElement(newName.key, null);

上诉NewComponent所得为NewName组件下包含着ButtonForTest组件。

笔者一直感到奇怪，NewComponent获得的是一个带有display属性的function，并不是一个class，为什么也可以渲染出来呢。

其实上面已经说到了，类的本质就是一个方法。 <newName.key />转化为js的写法是 React.createElement(newName.key, null)，createElement接收三个参数（type, config, children）, type属性为字符串时，它代表是普通的节点，如div,span。type属性为一个函数或一个类时，它代表自定义的节点。因此上述方法即是获得一个addName方法返回的组件，其中对所要包裹的组件，(即第二个参数)外部包裹一层名为NewName 的组件。

5. 简单看一下react中createElement部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
ReactElement.createElement = function(type, config, children) {
  var propName;
 
  // Reserved names are extracted
  var props = {};
 
  var key = null;
  var ref = null;
  var self = null;
  var source = null;
 
  if (config != null) {
    if (hasValidRef(config)) {
      ref = config.ref;
    }
    if (hasValidKey(config)) {
      key = '' + config.key;
    }
 
    self = config.__self === undefined ? null : config.__self;
    source = config.__source === undefined ? null : config.__source;
    // Remaining properties are added to a new props object
    // 将config里的属性复制到props中去
    for (propName in config) {
      if (
        hasOwnProperty.call(config, propName) &&
        !RESERVED_PROPS.hasOwnProperty(propName)
      ) {
        props[propName] = config[propName];
      }
    }
  }
 
  // Children can be more than one argument, and those are transferred onto
  // the newly allocated props object.
  //处理children,全部挂载到props的children属性上
  //支持两种写法，如果只有一个参数，直接赋值给children，否则做合并处理
  var childrenLength = arguments.length - 2;
  if (childrenLength === 1) {
    props.children = children;
  } else if (childrenLength > 1) {
    var childArray = Array(childrenLength);
    for (var i = 0; i < childrenLength; i++) {
      childArray[i] = arguments[i + 2];
    }
    if (__DEV__) {
      if (Object.freeze) {
        Object.freeze(childArray);
      }
    }
    props.children = childArray;
  }
 
  // Resolve default props
  if (type && type.defaultProps) {
    var defaultProps = type.defaultProps;
    for (propName in defaultProps) {
      if (props[propName] === undefined) {
        props[propName] = defaultProps[propName];
      }
    }
  }
  if (__DEV__) {
    if (key || ref) {
      if (
        typeof props.$$typeof === 'undefined' ||
        props.$$typeof !== REACT_ELEMENT_TYPE
      ) {
        var displayName = typeof type === 'function'
          ? type.displayName || type.name || 'Unknown'
          : type;
        if (key) {
          defineKeyPropWarningGetter(props, displayName);
        }
        if (ref) {
          defineRefPropWarningGetter(props, displayName);
        }
      }
    }
  }
  return ReactElement( // 返回ReactElement对象供React使用。
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
};

官方有更详尽的讲解：https://facebook.github.io/react/docs/react-api.html#createelement

]]> <p>先讲一点react的基础部分：</p> <h2 id="1-react中创建组件的写法"><a href="#1-react中创建组件的写法" class="headerlink" title="1. react中创建组件的写法:"></a>1. react中创建组件的写法 如何在vue中使用highcharts--vue2-highcharts https://wllluoo.github.io/myblog/2017/08/17/assign/ 2017-08-16T16:00:00.000Z 2018-02-18T14:43:20.000Z 1.首先。需要npm i -s vue2-highcharts，安装到项目所需的依赖中。

2.然后：首先参考官网给出的例子可以满足你的基本上所有的需求了。

3.具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<template>
  <vue-highcharts :options="options" ref="lineCharts"></vue-highcharts>
  <button @click="load">load</button>
</template>
<script>
import VueHighcharts from 'vue2-highcharts'
const asyncData = {
  name: 'Tokyo',
  marker: {
    symbol: 'square'
  },
  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
    y: 26.5,
    marker: {
      symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
    }
  }, 23.3, 18.3, 13.9, 9.6]
}
export default{
    components: {
        VueHighcharts
    },
    data(){
      return{
        options: {
          chart: {
            type: 'spline'
          },
          title: {
            text: 'Monthly Average Temperature'
          },
          subtitle: {
            text: 'Source: WorldClimate.com'
          },
          xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
              'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
          },
          yAxis: {
            title: {
              text: 'Temperature'
            },
            labels: {
              formatter: function () {
                return this.value + '°';
              }
            }
          },
          tooltip: {
            crosshairs: true,
            shared: true
          },
          credits: {
            enabled: false
          },
          plotOptions: {
            spline: {
              marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
              }
            }
          },
          series: []
        };
      }
    },
    methods{
      load(){
          let lineCharts = this.$refs.lineCharts;
          lineCharts.delegateMethod('showLoading', 'Loading...');
          setTimeout(() => {
              lineCharts.addSeries(asyncData);
              lineCharts.hideLoading();
          }, 2000)
      }
    }
}
</script>

这里可以使用异步的数据，比如从接口取数据，或者从父级传递下来。
要注意的是asyncData需要是一个对象，然后lineCharts.removeSeries（）每调用一次就会清掉一个已有的曲线

]]> <h2 id="1-首先。需要npm-i-s-vue2-highcharts，安装到项目所需的依赖中。"><a href="#1-首先。需要npm-i-s-vue2-highcharts，安装到项目所需的依赖中。" class="headerlink" title="1.首先。需 mac下开启Atom live server 服务 https://wllluoo.github.io/myblog/2017/08/01/liveServer/ 2017-07-31T16:00:00.000Z 2018-02-18T14:46:42.000Z 在mac环境下，开启atom插件atom live server 服务，步骤如下：

1.安装atom live server后重启atom。

2.打开命令面板(快捷键:cmd + shift + p), 输入“incompatible packages: view”。

3.在下拉列表中选中live server，并点击“Rebuild”按钮。

4.确认启动后，将开启live server服务。

]]> <p>在mac环境下，开启atom插件atom live server 服务，步骤如下：</p> <h2 id="1-安装atom-live-server后重启atom。"><a href="#1-安装atom-live-server后重启atom。" class="header