第一种：简单数字序号写法

:nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。 例子：

1
2
3

代码如下:

li:nth-child(3){background:orange;}

第二种：倍数写法

:nth-child(an) 匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。 例子：

1
2
3

代码如下:

li:nth-child(3n){background:orange;}

方法一、props/$emit

父组件 A 通过 props 的方式向子组件 B 传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。

1. 父组件向子组件传值
   接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件 Users.vue 中如何获取父组件 App.vue 中的数据 users:[“王小虎”,”张三”,”李四”]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

//App.vue父组件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名
  </div>
</template>
<script>

import Users from "./components/Users"

export default {
  name: 'App',
  data(){
    return{
      users:["王小虎","张三","李四"]
    }
  },
  components:{
    "users":Users
  }
}

当使用fetch 发起跨域请求时，CORS（跨域资源共享Cross-origin resource sharing）

请求fetch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const body = {name:"Good boy"};
 fetch("http://leheavengame.com/API",{
     headers:{
         'content-type':'application/json'
     }
     method:'POST',
     body: JSON.stringify(body)
}).then(response =>  
     response.json().then(json => ({ json, response }))
).then(({ json, response }) => {
    if (!response.ok) {
      return Promise.reject(json);
    }
    return json;
}).then(
    response => response,
    error => error
  );

同源策略

同源策略/SOP（Same origin policy）是一种约定，由 Netscape 公司 1995 年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到 XSS、CSRF 等攻击。所谓同源是指 “协议 + 域名 + 端口” 三者相同，即便两个不同的域名指向同一个 ip 地址，也非同源。

什么是跨域？

当协议、域名、端口号，有一个或多个不同时，有希望可以访问并获取数据的现象称为跨域访问，同源策略限制下 cookie、localStorage、dom、ajax、IndexDB 都是不支持跨域的。

假设 cookie 支持了跨域，http 协议无状态，当用户访问了一个银行网站登录后，银行网站的服务器给返回了一个 sessionId，当通过当前浏览器再访问一个恶意网站，如果 cookie 支持跨域，恶意网站将获取 sessionId 并访问银行网站，出现安全性问题；IndexDB、localStorage 等数据存储在不同域的页面切换时是获取不到的；假设 dom 元素可以跨域，在自己的页面写入一个 iframe 内部嵌入的地址是 www.baidu.com， 当在百度页面登录账号密码时就可以在自己的页面获取百度的数据信息，这显然是不合理的。

这就是为什么 cookie、localStorage、dom、ajax、IndexDB 会受到同源策略会限制，下面还有一点对跨域理解的误区：

误区：同源策略限制下，访问不到后台服务器的数据，或访问到后台服务器的数据后没有返回；

正确：同源策略限制下，可以访问到后台服务器的数据，后台服务器会正常返回数据，而被浏览器给拦截了。

js 判断是否安装插件

需求：点击一个按钮，然后打开本地的软件。类似一些网站打开 qq 一样。但是后来遇到一个问题，如果本地没有安装这个指定的软件，则无法打开。所以需要判断当前的电脑是否已经安装指定软件，如果已安装，则打开软件；否则，弹出模态框，提示下载并安装软件。如果本地安装了插件，当尝试使用插件打开时，window后触发blur事件；如果无法打开插件，则什么都不会发生。

根据这个原理，进行一个简单的封装。（其实也不算是封装，只是简单的把其中的原理展现出来而已）

这里使用的是es5代码，主要是为了兼任低版本的浏览器，可以在理解其中的原理后，移植到相应的项目或者框架。

在对应组件内引入组件

1.在components（专门放组件的文件）下创建一个header.vue文件
2.在App.vue文件里添加如下代码

1
2
3
4
5
6
7
8
9
10

 <my-head></my-head>



import myHead from './components/header'


  components : {
  myHead,
  }

1. JavaScript的sort()方法

1
2
3
4
5
6

var array = [1,4,-8,-3,6,12,9,8];
function compare(val1,val2){
    return val1-val2;
};
array.sort(compare);
document.write(array);

sort()方法按照升序排列数组项，会调用每个数组项的toString()转型方法，然后比较得到的字符串。

toString()方法是把布尔值（Boolean）或对象(Object)转换为字符串，并返回结果。

compare()函数方法是一个比较函数，作为sort()方法的参数。

Array、Boolean、Date、Number等对象都具有toString()、toLocaleString()、valueOf()三个方法，那这三个方法有什么区别？？？

一、JS Array

1
2
3
4
5
6
7
8
9

//例子：
var array = new Array("ni","li","mi");
console.log(array.valueOf());
console.log(array.toString());
console.log(array.toLocaleString());
//结果：
Array[3]
ni,li,mi
ni,li,mi

valueOf：返回数组本身
toString()：把数组转换为字符串，并返回结果，每一项以逗号分割。
toLocalString()：把数组转换为本地数组，并返回结果。

单例模式概念：保证一个类只有一个实例。

概念：单例就是保证一个类只有一个实例，实现方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。在JavaScript里，单例作为一个命名空间提供者，从全局命名空间里提供一个唯一的访问点来访问该对象。

单例模式的作用和注意事项

模式作用：

1、模块间通信

2、系统中某个类的对象只能存在一个

3、保护自己的属性和方法

注意事项：

1、注意this的使用

2、闭包容易造成内存泄露，不需要的要赶快干掉

3、注意new的成本。（继承）

策略模式：定义了一系列家族算法，并对每一种算法单独封装起来，让算法之间可以相互替换，独立于使用算法的客户。通俗的讲就是根据不同的参数可以定义不同的策略。

策略模式是JavaScript中比较经典的模式之一, 可以减少大量的if语句,可复用程度高

如下面的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//清除字符空格
const trim = {
    'A': function (str, type) {
        return str.replace(/\s+/g, "");
    },
    'B': function (str, type) {
        return str.replace(/(^\s*)|(\s*$)/g, "");
    },
    'C': function (str, type) {
        return str.replace(/(^\s*)/g, "");
    },
    'D': function (str, type) {
        return str.replace(/(\s*$)/g, "");
    }
}