html5触摸事件 tap事件

Posted on 2017-07-17

自定义对象、prototype原型属性

Posted on 2017-07-16

自定义对象

1. JS没有类，但只要有函数即可创建对象
2. 自定义对象的几种方式

方式1: 使用无参的函数创建对象

1
2
3
4
5
6
7
function person() {};
var p1 = new person();
p1.id = "1";
p1.name = "张三";
console.log(p1); // person {id: "1", name: "张三"}
var p2 = new person();
console.log(p2); // person {}

这种方式创建的对象的属性不会共享。

方式2: 使用带参数的函数创建对象

1
2
3
4
5
6
7
8
function person(id, name) {
	this.id = id;
	this.name = name;
}
var p1 = new person(2, "李四");
coonsole.log(p1); // person {id: 2, name: "李四"}
var p2 = new person(3, "王五");
console.log(p2); // person {id: 3, name: "王五"}

方式3: 使用Object函数创建对象，JS默认创建了一个function Object(){}.

1
2
3
4
var p1 = new Object();
p1.id = 1;
p1.name = "张三";
console.log(p1);//Object {id: 1, name: "张三"}

方式4: 使用对象字面量的方式创建

1
2
3
4
5
var p1 = {
	id: 1, // key加不加引号都可以
	name: "张三"
}
console.log(p1); //Object {id: 1, name: "张三"}

3. 有了上述基础知识，那我们来实现一个简单的需求：

编写一个js文件，在js文件中自定义一个数组工具对象，该工具对象要有一个找到最大值的方法，与找元素对应的索引值的方法。
如果抛开以上知识，我们可能会这么写：

<script type="text/javascript">
function arrayTool(arr, target) {
  var max=arr[0];
  var index = null;
  for(var i=0; i <arr.length; i++){
    if(arr[i] > max) {
      max = arr[i];
    }
    if(arr[i] == target){
      index = i;
    }
  }
  return [max, index];
}
console.log(arrayTool([1,3,2,6], 1)); // 
</script>

这样写没错，输出结果是：

result

但是，如果有时候我们只想获得最大值，而不想获得索引值呢？那好办，返回的结果取第一个值，console.log(arrayTool([1,3,2,6], 1)[0])不就行了。那如果这个数组工具有很多很多返回的值呢，难不成我们要一个个数是返回数组的第几个值？或者当我们想要其中的一部分返回值的时候，又怎么办呢？是不是很麻烦？

so，我们就可以利用上面学到的方法啦~

<script type="text/javascript">
function arrayTool(arr, target) {
  this.getMax = function (arr) {
    var max=arr[0];
    for(var i=0; i <arr.length; i++){
      if(arr[i] > max) {
        max = arr[i];
      }
    }
    return max;
  }
  this.getIndex = function (arr, target) {
    for(var i=0; i <arr.length; i++){
      if(arr[i] == target){
        return i;
      }
    }
    return -1;
  }
}
var tool = new arrayTool();
var arr = [1,3,2,6];
console.log(tool.getMax(arr));
console.log(tool.getIndex(arr, 1));
</script>

输出结果是：

result

这样我们想得到什么就去调用对应的方法，多简单！

prototype原型属性

1. 如果我们想把上述getMax与getIndex方法添加到数组对象中呢？

// 以下这种方式是不行的，因为Array是内置对象。
function Array() {
    this.getMax = function () {
    }
    this.getIndex = function () {
    }
}

2. Prototype注意的细节

* prototype是函数(function)的一个必备属性（书面一点的说法是“保留属性”），只要是function，就一定有一个prototype属性
* prototype的值是一个对象
* 可以修改任意函数的prototype属性的值
* 一个对象会自动拥有prototype的所有成员属性和方法

// 猜想Array对象内部结构：
function Array() {
    this.prototype = new Object(); // Array对象的必备属性，并且是一个对象
}
Array.prototype.getMax = function () {
    // Array对象的prototype对象的getMax方法
}
new Array(); // 这个对象就自动拥有了prototype的所有成员属性和方法，即这里的getMax方法。

3. 作用：给一个方法追加一些功能，就可以使用prototype。（jquery使用较多）
4. 解决需求：

Array.prototype.getMax = function () {
  var max=this[0];
    for(var i=0; i <this.length; i++){
      if(this[i] > max) {
        max = this[i];
      }
    }
  return max;
}
Array.prototype.getIndex = function (target) {
  for(var i=0; i <this.length; i++){
      if(this[i] == target){
        return i;
      }
    }
  return -1;
}
var arr = [1,3,2,6];
console.log(arr.getMax());
console.log(arr.getIndex(1));

5. 练习：给字符串对象添加一个toCharArray的方法，然后再添加一个reverse(翻转)的方法。

String.prototype.toCharArray = function () {
  var arr = new Array();
  for (var i=0; i < this.length; i++) {
    arr.push(this.charAt(i)); // 注意这里也可以用this[i]，因为字符串是类数组，可以通过下标获取值，但推荐还是用charAt
  }
  return arr;
}

// 方式一：
// String.prototype.reverse = function () {
//   var str = new String();
//   for(var i=this.length; i--; i>=0) {
//     str += this[i];
//   }
//   return str;
// }

// 方式二(推荐)：利用toCharArray的方法,因为数组本身就具有reverse方法
String.prototype.reverse = function () {
  var charStr = this.toCharArray();
  charStr.reverse();
  return charStr.join("");
}
var str = "we are family";

console.log(str.toCharArray()); // (13) ["w", "e", " ", "a", "r", "e", " ", "f", "a", "m", "i", "l", "y"]
console.log(str.reverse()); // ylimaf era ew

Vue.js（-）

Posted on 2017-07-06

生命周期

我们执行以下代码：

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: "xuxiao is boy"
        },
        beforeCreate: function() {
            console.group('beforeCreate 创建前状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
            console.log("%c%s", "color:red", "data   : " + this.$data); //undefined 
            console.log("%c%s", "color:red", "message: " + this.message)
        },
        created: function() {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
            console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
            console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
        },
        beforeMount: function() {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化  
            console.log("%c%s", "color:red", "message: " + this.message); //已被初始化  
        },
        mounted: function() {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 
        },
        beforeUpdate: function() {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
        },
        updated: function() {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
        },
        beforeDestroy: function() {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
        },
        destroyed: function() {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message)
        }
    })
    </script>
</body>

</html>

可以看出，
beforecreated：el 和 data 并未初始化

created:完成了 data 数据的初始化，el没有

beforeMount：完成了 el 和 data 初始化

mounted ：完成挂载

如何用

beforecreate : 举个栗子：可以在这加个loading事件

created ：在这结束loading，还做一些初始化，实现函数自执行

mounted ：在这发起后端请求，拿回数据，配合路由钩子做一些事情

beforeDestory：你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容

转载自：https://segmentfault.com/a/1190000008010666

JS中表达式和语句的区别

Posted on 2017-03-15

1. 语句（statement）和表达式（expression）

JS中的表达式和语句是有区别的。

两句话总结：

一个表达式会产生一个值，它可以放在任何需要一个值的地方。
一个语句是一个行为，比如循环语句，if语句

函数参数需要的是一个值，所以函数参数可以用表达式，不能放if等语句。

举例子：

（1）以下三个都是表达式：

myvar
3 + x
myfunc("a", "b")

解释一下：

var myvar = 1; // 这里定义myvar
myvar // 输出1， 这里得到的是一个值，所以myvar是一个表达式`

var x = 1;
3 + x // 4，这里得到的是一个值，所以3+x是一个表达式

function myfunc(a,b){
    return a+b;
}
myfunc("a","b") // 'ab', 这里得到的是一个值，所以myfunc("a","b")是一个表达式

（2）循环语句、if语句就是典型的语句。

2. 其他语法

2.1 if语句和条件运算符

if语句

// 这是语句
var x;
if (y >= 0) {
```
x = y;
```
} else {
```
x = -y;
```
}
条件运算符

// 这是表达式
var x = (y >=0 ? y : -y);

可以看出，if语句和条件运算符可以实现相同的功能，也就是说上述两段代码是等价的。
其中 var x = (y >=0 ? y : -y); 和 (y >=0 ? y : -y) 都分别是一个表达式。

2.2 分号和逗号表达式

JS中，使用分号可以连接两个语句：

foo(); bar();

要想连接两个语句，使用的是不常见的逗号运算符：
foo(), bar()

注意：逗号运算符会计算前后两个表达式，然后返回右边表达式的计算结果。例如：

"a", "b" // 'b'
var x = ("a", "b") 
x // 'b'
console.log(("a", "b")); // b

3. 看似语句的表达式

3.1 对象字面量和语句块

下面是一个对象字面量，也就是一个可以生成一个对象值的表达式：

{
    foo: bar(3,5)
}

不过，同时，它也是一个完全合法的语句，这个语句的组成部分有：

一个代码块：一个由大括号包围的语句序列
一个标签：你可以在任何语句前面放置一个标签，这里的foo就是一个标签
一条语句：表达式语句bar(3,5)

JS可以有独立的代码块（常见的代码块是依托于循环或者if语句的），下面的代码演示了这种代码块的作用：你可以给它设置一个标签然后跳出这个代码块。

function test(printTwo){
    printing: {
        console.log("one");
        if(!printTwo){
        break printing;
    }
    console.log("three");
    }
}
test(false); // one three
test(true); // one two three

3.2 函数表达式和函数声明

下面的代码是一个函数表达式：

function () {}

你还可以给这个函数表达式起一个名字，将它转变为一个命名（非匿名）的函数表达式：

function foo(){}

这个函数的函数名只存在于函数内部，比如，可以用它来做递归运算：

var fac = function me(x) {
    return x <= 1 ? 1: x * me(x-1);
}
fac(10) // 362800
console.log(me) //Uncaught ReferenceError: me is not defined `

一个命名的函数表达式从表面上看起来,和一个函数声明并没有什么区别.但他们的效果是不同的:一个函数表达式产生一个值(一个函数).一个函数声明执行一个动作:将一个函数赋值给一个变量. 此外,只有函数表达式可以被立即调用,函数声明不可以.

下面的例子是一个立即执行的函数表达式

(function () { return 'abc' }()) // 'abc'`

如果省略了小括号，你会得到一个语法错误（函数声明不能匿名）

function () { return 'abc' }() // Uncaught SyntaxError: Unexpected token (`

另外一个能让表达式在表达式上下文被解析的办法是使用一元运算符，比如 + 或者！，但是，和使用括号不同的是，这些操作符会改变表达式的运行结果，如果你不关心结果的话，完全可以使用：

+function () { console.log("hello")} () // hello NaN

转载：【链接】[译]JavaScript中:表达式和语句的区别
http://www.cnblogs.com/ziyunfei/archive/2012/09/16/2687589.html