# 事件循环

## 浏览器的进程模型

### 何为进程？

程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZV4E..png)


每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。

### 何为线程？

有了进程后，就可以运行程序的代码了。

运行代码的「人」称之为「线程」。

一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为主线程。

如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程。

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZVBS..png)

### 浏览器有哪些进程和线程？

**浏览器是一个多进程多线程的应用程序**

浏览器内部工作极其复杂。

为了避免相互影响，为了减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程。

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZVJ6..png)

> 可以在浏览器的任务管理器中查看当前的所有进程

其中，最主要的进程有：

1. 浏览器进程

   主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。

2. 网络进程

   负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。

3. **渲染进程**（本节课重点讲解的进程）

   渲染进程启动后，会开启一个**渲染主线程**，主线程负责执行 HTML、CSS、JS 代码。

   默认情况下，浏览器会为每个标签页开启一个新的渲染进程，以保证不同的标签页之间不相互影响。

   > 将来该默认模式可能会有所改变，有兴趣的同学可参见[chrome官方说明文档](https://chromium.googlesource.com/chromium/src/+/main/docs/process_model_and_site_isolation.md#Modes-and-Availability)

## 渲染主线程是如何工作的？

渲染主线程是浏览器中最繁忙的线程，需要它处理的任务包括但不限于：

- 解析 HTML
- 解析 CSS
- 计算样式
- 布局
- 处理图层
- 每秒把页面画 60 次
- 执行全局 JS 代码
- 执行事件处理函数
- 执行计时器的回调函数
- ......

> 思考题：为什么渲染进程不适用多个线程来处理这些事情？

要处理这么多的任务，主线程遇到了一个前所未有的难题：如何调度任务？

比如：

- 我正在执行一个 JS 函数，执行到一半的时候用户点击了按钮，我该立即去执行点击事件的处理函数吗？
- 我正在执行一个 JS 函数，执行到一半的时候某个计时器到达了时间，我该立即去执行它的回调吗？
- 浏览器进程通知我“用户点击了按钮”，与此同时，某个计时器也到达了时间，我应该处理哪一个呢？
- ......

渲染主线程想出了一个绝妙的主意来处理这个问题：排队

![image-20220809223027806](http://mdrs.yuanjin.tech/img/202208092230847.png)

1. 在最开始的时候，渲染主线程会进入一个无限循环
2. 每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务执行，执行完一个后进入下一次循环；如果没有，则进入休眠状态。
3. 其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务

这样一来，就可以让每个任务有条不紊的、持续的进行下去了。

**整个过程，被称之为事件循环（消息循环）**

## 若干解释

### 何为异步？

代码在执行过程中，会遇到一些无法立即处理的任务，比如：

- 计时完成后需要执行的任务 —— `setTimeout`、`setInterval`
- 网络通信完成后需要执行的任务 -- `XHR`、`Fetch`
- 用户操作后需要执行的任务 -- `addEventListener`

如果让渲染主线程等待这些任务的时机达到，就会导致主线程长期处于「阻塞」的状态，从而导致浏览器「卡死」

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZUX0..png)

**渲染主线程承担着极其重要的工作，无论如何都不能阻塞！**

因此，浏览器选择**异步**来解决这个问题

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZVQK..png)

使用异步的方式，**渲染主线程永不阻塞**

> 面试题：如何理解 JS 的异步？
>
> 
>
> 参考答案：
>
> JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。
>
> 而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。
>
> 如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。
>
> 所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。
>
> 在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。

### JS为何会阻碍渲染？

先看代码

```html
<h1>Mr.Yuan is awesome!</h1>
<button>change</button>
<script>
  var h1 = document.querySelector('h1');
  var btn = document.querySelector('button');

  // 死循环指定的时间
  function delay(duration) {
    var start = Date.now();
    while (Date.now() - start < duration) {}
  }

  btn.onclick = function () {
    h1.textContent = '袁老师很帅！';
    delay(3000);
  };
</script>
```

点击按钮后，会发生什么呢？

<见具体演示>

### 任务有优先级吗？

任务没有优先级，在消息队列中先进先出

但**消息队列是有优先级的**

根据 W3C 的最新解释:

- 每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。
  在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。
- 浏览器必须准备好一个微队列，微队列中的任务优先所有其他任务执行
  https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint

> 随着浏览器的复杂度急剧提升，W3C 不再使用宏队列的说法

在目前 chrome 的实现中，至少包含了下面的队列：

- 延时队列：用于存放计时器到达后的回调任务，优先级「中」
- 交互队列：用于存放用户操作后产生的事件处理任务，优先级「高」
- 微队列：用户存放需要最快执行的任务，优先级「最高」

> 添加任务到微队列的主要方式主要是使用 Promise、MutationObserver
>
> 
>
> 例如：
>
> ```js
> // 立即把一个函数添加到微队列
> Promise.resolve().then(函数)
> ```

> 浏览器还有很多其他的队列，由于和我们开发关系不大，不作考虑

> 面试题：阐述一下 JS 的事件循环
>
> 
>
> 参考答案：
>
> 事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。
>
> 在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。
>
> 过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。
>
> 根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。

> 面试题：JS 中的计时器能做到精确计时吗？为什么？
>
> 
>
> 参考答案：
>
> 不行，因为：
>
> 1. 计算机硬件没有原子钟，无法做到精确计时
> 2. 操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终调用的是操作系统的函数，也就携带了这些偏差
> 3. 按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时又带来了偏差
> 4. 受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差

深入剖析JavaScript的事件循环

### 实现一个类似于jQuery功能的轻量级框架

在现代前端开发中，jQuery仍然是一个经典且强大的工具库，但有时候，出于性能优化或自定义功能的需求，我们可能需要实现一个轻量级的框架来满足特定的需求。本文将带你一步一步实现一个类似于jQuery功能的轻量级框架，称之为`Xframe`。

#### 一、项目结构与设计思路

##### 1. 项目结构
我们的项目将分为几个主要模块：
- **主框架**：用于获取DOM元素集合并支持链式调用。
- **公共框架**：包含字符串处理、数组操作、数据类型检测等通用功能。
- **事件框架**：实现事件绑定和解绑功能。
- **CSS框架**：提供CSS类操作、元素显示隐藏、尺寸获取等功能。
- **属性框架**：操作DOM元素的属性。
- **内容框架**：操作DOM元素的内容（HTML、文本、值）。
- **动画框架**：实现简单的动画效果。

##### 2. 设计思路
- **链式调用**：通过返回一个对象实例本身来支持链式调用。
- **扩展性**：使用`extend`方法允许动态添加方法。
- **模块化**：每个功能模块都封装在单独的闭包中，以减少全局变量的污染。

#### 二、实现主框架

首先，我们需要实现一个基础的框架，能够获取DOM元素并支持链式调用。

```javascript
(function (w) {
    var xframe = function (selector, context) {
        return this.init.apply(this, [selector, context]);
    };

    xframe.prototype.init = function (selector, context) {
        this.length = 0;
        if (typeof selector === 'string') {
            var nodeList = (context || document).querySelectorAll(selector);
            this.length = nodeList.length;
            for (var i = 0; i < this.length; i++) {
                this[i] = nodeList[i];
            }
        } else if (selector.nodeType) {
            this[0] = selector;
            this.length = 1;
        }
        return this;
    };

    var $$ = function (selector, context) {
        if (typeof selector === 'function') {
            w.onload = selector;
        } else {
            return new xframe(selector, context);
        }
    };

    $$.extend = function () {
        var len = arguments.length, target = null, i = 1, key;
        if (len === 0) return;
        if (len === 1) {
            target = xframe.prototype;
            i--;
        } else {
            target = arguments[0];
        }
        for (; i < len; i++) {
            for (key in arguments[i]) {
                target[key] = arguments[i][key];
            }
        }
        return target;
    };

    w.xframe = w.$ = $$;
})(window);
```

#### 三、实现功能模块

##### 1. 公共框架

公共框架包含一些基础的功能，如字符串处理、数组操作等。这里仅给出结构，具体实现可根据需求编写。

```javascript
(function (xframe) {
    // 字符串处理模块
    xframe.extend(xframe, {
        // 实现 ltrim, rtrim, trim 等方法
    });

    // 数组相关模块
    xframe.extend(xframe, {
        // 实现数组操作方法
    });

    // 数据类型检验模块
    xframe.extend(xframe, {
        isNumber: function (obj) {
            return typeof obj === 'number' && !isNaN(obj);
        },
        // 实现其他数据类型检测方法
    });
})(xframe);
```

##### 2. 事件框架

事件框架实现事件绑定和解绑功能。

```javascript
(function (xframe) {
    xframe.extend({
        on: function (event, handler) {
            return this.each(function (index, element) {
                element.addEventListener(event, handler);
            });
        },
        // 实现 off 方法
    });
})(xframe);
```

##### 3. CSS框架

CSS框架提供CSS类操作、元素显示隐藏、尺寸获取等功能。

```javascript
(function (xframe) {
    xframe.extend({
        css: function (property, value) {
            return this.each(function (index, element) {
                element.style[property] = value;
            });
        },
        show: function () {
            return this.css('display', '');
        },
        hide: function () {
            return this.css('display', 'none');
        },
        // 实现其他CSS相关方法
    });
})(xframe);
```

##### 4. 属性框架

属性框架提供操作DOM元素属性的方法。

```javascript
(function (xframe) {
    xframe.extend({
        attr: function (name, value) {
            if (value !== undefined) {
                return this.each(function (index, element) {
                    element.setAttribute(name, value);
                });
            } else {
                return this[0] ? this[0].getAttribute(name) : null;
            }
        },
        addClass: function (className) {
            return this.each(function (index, element) {
                element.classList.add(className);
            });
        },
        removeClass: function (className) {
            return this.each(function (index, element) {
                element.classList.remove(className);
            });
        },
    });
})(xframe);
```

##### 5. 内容框架

内容框架提供操作DOM元素内容的方法。

```javascript
(function (xframe) {
    xframe.html = function (htmlString) {
        if (htmlString !== undefined) {
            return this.each(function (index, element) {
                element.innerHTML = htmlString;
            });
        } else {
            return this[0] ? this[0].innerHTML : null;
        }
    };

    xframe.text = function (textString) {
        if (textString !== undefined) {
            return this.each(function (index, element) {
                element.textContent = textString;
            });
        } else {
            return this[0] ? this[0].textContent : null;
        }
    };

    xframe.val = function (value) {
        if (value !== undefined) {
            return this.each(function (index, element) {
                element.value = value;
            });
        } else {
            return this[0] ? this[0].value : null;
        }
    };
})(xframe);
```

##### 6. 动画框架

动画框架实现简单的动画效果。这里只给出结构，具体实现可根据需求编写。

```javascript
(function () {
    function Animate() {
        // 动画实现
    }

    Animate.prototype = {
        // 动画方法
    };

    // 将Animate绑定到xframe上
    xframe.animate = function (options) {
        return new Animate(this, options);
    };
})();
```

#### 四、总结

通过以上步骤，我们实现了一个类似于jQuery功能的轻量级框架`Xframe`。它包含了获取DOM元素、事件处理、CSS操作、属性操作、内容操作以及动画功能。你可以根据自己的需求，进一步完善和扩展这个框架。

`Xframe`不仅可以帮助你理解jQuery的底层实现原理，还可以作为一个轻量级的选择，满足你项目中特定的需求。希望这篇文章对你有所帮助，祝你在前端开发的道路上越走越远！

在现代前端开发中，jQuery仍然是一个经典且强大的工具库，但有时候，出于性能优化或自定义功能的需求，我们可能需要实现一个轻量级的框架来满足特定的需求。本文将带你一步一步实现一个类似于jQuery功能的轻量级框架，称之为`Xframe`。

jQuery框架源码解析与实现

实现一个类似于jQuery功能的轻量级框架


> 在现代Web开发中，搜索引擎优化（SEO）是提高网站可见性和流量的重要手段。Next.js作为一个功能强大的React框架，凭借其内置的SEO支持以及丰富的工具和策略，成为构建高性能、SEO友好的Web应用的首选框架之一。本文将深入探讨Next.js的SEO优化方案，并通过代码示例展示具体实现方法。

#### 一、Next.js的SEO优势

Next.js提供了多种内置功能，使得开发者能够轻松实现SEO优化。这些功能包括但不限于：

1. **自动处理`<head>`标签**：Next.js提供了`Head`组件，允许开发者动态管理页面的元信息，如标题、描述、canonical等。
2. **预渲染技术**：Next.js支持静态生成（Static Generation, SG）和服务器端渲染（Server-Side Rendering, SSR），这两种技术都能提供完整的HTML结构供搜索引擎爬虫抓取，从而提升SEO排名。
3. **基于文件的路由系统**：Next.js使用基于文件的路由系统，使得创建干净且对SEO友好的URL变得容易。
4. **next-seo库**：next-seo是一个专门为Next.js设计的库，它提供了一组React组件，允许开发者轻松地将与SEO相关的元标记添加到页面中。

#### 二、Next.js SEO优化方案

##### 1. 使用`Head`组件管理页面元信息

Next.js的`Head`组件允许开发者在页面中设置和管理`<head>`标签，这些标签对于搜索引擎来说非常重要。通过`Head`组件，可以设置页面的标题、描述信息以及关键词等，从而吸引搜索引擎和用户的关注，提升网站在搜索结果中的点击率。

```jsx
import Head from 'next/head';

const HomePage = () => (
  <>
    <Head>
      <title>Home Page</title>
      <meta name="description" content="This is the description of the Home Page" />
    </Head>
    <h1>Welcome to the Home Page!</h1>
  </>
);

export default HomePage;
```

##### 2. 使用next-seo库添加元标记

next-seo是一个流行的库，它允许开发者轻松地将与SEO相关的元标记添加到Next.js应用程序中。搜索引擎使用这些标签（如标题和描述标签）来了解页面内容并将其显示在搜索结果中。

首先，需要安装next-seo库：

```bash
npm install next-seo
# 或者
yarn add next-seo
```

然后，在页面中导入并使用next-seo组件：

```jsx
import Head from 'next/head';
import { DefaultSeo, SEO } from 'next-seo';

const Home = () => {
  return (
    <div>
      <Head>
        <title>My Next.js App</title>
      </Head>
      <SEO
        title="My Next.js App"
        description="This is my Next.js app, it's awesome!"
        openGraph={{
          title: 'My Next.js App',
          description: 'This is my Next.js app, it\'s awesome!',
          url: 'https://mynextjsapp.com',
          images: [
            {
              url: 'https://mynextjsapp.com/og-image.jpg',
              alt: 'My Next.js App',
            },
          ],
          site_name: 'My Next.js App',
        }}
      />
      <p>Welcome to my Next.js app!</p>
    </div>
  );
};

export default Home;
```

在这个示例中，我们使用了`SEO`组件来设置页面的标题、描述以及OpenGraph标签。同时，`Head`组件中也设置了标题标签，这是Next.js中添加元标签的标准方式。

##### 3. 优化URL结构

合理的URL结构能提升搜索引擎对网站的认可度，从而带来更好的排名和流量。Next.js使用基于文件的路由系统，使得创建干净且对SEO友好的URL变得容易。此外，Next.js还支持动态路由，允许开发者创建具有良好结构的URL。

```jsx
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;
  return <p>Post: {id}</p>;
};

export default Post;
```

在这个示例中，我们创建了一个动态路由页面`Post`，通过`useRouter`钩子获取路由参数`id`，并将其显示在页面中。

##### 4. 内容质量和关键词优化

除了技术层面的优化，还需要关注网站的内容质量和关键词优化。Next.js的静态生成和服务端渲染能够帮助实现高质量的内容展示，而在内容中合理地布局关键词，并进行内部链接的优化，也是提升网站SEO的重要策略。

##### 5. 使用预渲染技术提升性能

Next.js提供了静态生成和服务器端渲染两种预渲染技术，这两种技术都能提供完整的HTML结构供搜索引擎爬虫抓取，从而提升SEO排名。同时，预渲染技术还能显著提升页面加载速度和服务器资源利用率。

- **静态生成**：适用于内容相对固定、更新频率较低的页面。

```jsx
export const getStaticProps = async () => {
  const posts = await fetchPostsFromApi(); // 获取静态数据
  return {
    props: { posts },
    revalidate: 60, // 可选，指定数据刷新间隔（秒）
  };
};

function HomePage({ posts }) {
  // 页面渲染逻辑
}
```

- **服务器端渲染**：适用于需要实时数据、个性化内容或动态路由的应用场景。

```jsx
export const getServerSideProps = async (context) => {
  const currentUserId = context.req.user?.id; // 从请求上下文中获取当前用户ID
  const personalizedData = await fetchPersonalizedData(currentUserId); // 获取实时数据
  return {
    props: { personalizedData },
  };
};

function UserProfilePage({ personalizedData }) {
  // 页面渲染逻辑
}
```

##### 6. 图片优化

在网站开发中，图片通常是占用较大资源的内容。Next.js提供了`Image`组件来进行图片优化，包括懒加载、响应式加载等策略，以提升页面的加载速度和性能表现。

```jsx
import Image from 'next/image';

function BlogPost({ post }) {
  return (
    <>
      <Image
        src={post.featuredImage.url}
        alt={post.title}
        width={800}
        height={450}
        layout="responsive"
      />
      {/* 页面内容 */}
    </>
  );
}
```

##### 7. 代码分割和懒加载

Next.js支持代码分割和按需加载，通过动态导入和懒加载的方式，可以将页面和组件进行分割，按需加载，以减少初始加载时的资源压力，提升页面的响应速度。

```jsx
const SomeComponent = React.lazy(() => import('../components/SomeComponent'));

function MyPage() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <SomeComponent />
      </Suspense>
    </div>
  );
}
```

##### 8. 缓存策略

通过合理地设置HTTP缓存策略、使用CDN加速等手段，可以有效地提升网站的访问速度和性能表现，为用户提供更好的体验。

#### 三、总结

Next.js凭借其强大的静态生成、服务器端渲染以及对SEO的深度支持，已成为构建高性能、高SEO友好Web应用的首选框架之一。通过合理的URL结构、页面标题和描述、内容质量和关键词优化，以及图片优化、代码分割和懒加载、缓存策略等手段，可以提升网站在搜索引擎中的排名，以及网站的加载速度和用户体验。这些策略都是基于Next.js丰富的特性和工具而提供的，可以帮助开发者构建性能优秀、SEO友好的Web应用。

在Next.js的SEO优化过程中，next-seo库是一个不可或缺的工具，它使得添加和管理SEO元标记变得更加容易和高效。同时，Next.js的预渲染技术、动态路由、图片优化等功能也为SEO优化提供了强有力的支持。

作为开发者，我们应该充分利用Next.js的这些功能和工具，不断优化和提升网站的SEO效果，从而为网站带来更多的流量和曝光机会。希望本文能够为你的Next.js SEO优化之路提供一些有用的启示和帮助。

在现代Web开发中，搜索引擎优化（SEO）是提高网站可见性和流量的重要手段。Next.js作为一个功能强大的React框架，凭借其内置的SEO支持以及丰富的工具和策略，成为构建高性能、SEO友好的Web应用的首选框架之一。本文将深入探讨Next.js的SEO优化方案，并通过代码示例展示具体实现方法。

Next.js SEO优化方案全解析

# Ajax 

## 1. 介绍一下ajax并代码实现 
### 1.1 基本概念 
>  avaScript 和XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。 它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性，也就是说他可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

[Ajax | MDN](https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX)


### 1.2 创建一个简单的Ajax

 - 创建 XMLHttpRequest 对象
```js
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
```

 - 绑定onreadystatechange 事件
```js
httpRequest.onreadystatechange = function(){
    // Process the server response here.
};
```

 - 向服务器发送请求
```js
httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();
```

完整的例子
```js
function ajax(url, cb) {
  let xhr;
  if(window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = ActiveXObject("Microsoft.XMLHTTP");
  }
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
      cb(xhr.responseText);
    }
  }
  xhr.open('GET', url, true);
  xhr.send();
}
```

### 1.3 httpRequest.readyState的值(熟记)

 - 0 (未初始化) or (请求还未初始化)
 - 1 (正在加载) or (已建立服务器链接)
 - 2 (加载成功) or (请求已接受)
 - 3 (交互) or (正在处理请求)
 - 4 (完成) or (请求已完成并且响应已准备好)


### 1.4 访问服务端返回的数据

 - httpRequest.responseText
   - 服务器以文本字符的形式返回
 - httpRequest.responseXML
   - 以 XMLDocument 对象方式返回，之后就可以使用JavaScript来处理


### 1.5 GET 注意事项

 -  如果不设置响应头 `Cache-Control: no-cache` 浏览器将会把响应缓存下来而且再也不无法重新提交请求。你也可以添加一个总是不同的 GET 参数，比如时间戳或者随机数 (详情见 [bypassing the cache](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache))


### 1.6 POST 请求
> [!NOTE]
> POST请求则需要设置`RequestHeader`告诉后台传递内容的编码方式以及在send方法里传入对应的值

```js
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type": "application/x-www-form-urlencoded");
xhr.send("key1=value1&key2=value2");
```


### 1.7 Ajax如何携带cookie(面试加分)
 - ajax会自动带上同源的cookie，不会带上不同源的cookie
 - 可以通过前端设置withCredentials为true， 后端设置Header的方式让ajax自动带上不同源的cookie，但是这个属性对同源请求没有任何影响。会被自动忽略。

[withCredentials | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/withCredentials)

```js
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send(null);
```


【计算机网络】Ajax

# HTML基础强化
## 1.如何理解HTML？
1. HTML类似于一份word“文档”
2. 描述文档的“结构”
3. 有区块和大纲

## 2.对WEB标准的理解？
> Web标准是由一系列标准组合而成。一个网页主要由三部分组成：结构层、表现层和行为层。

对应的标准也分三方面：
+ 结构化标准语言主要包括XHTML和HTML以及XML，
+ 表现层标准语言主要包括CSS，
+ 行为标准主要包括对象模型，DOM、ECMAScript等

### 2.1 结构层标准
> 结构化标准语言，就是W3C规定的主要包括HTML和XHTML以及XML，在页面body里面我们写入的标签都是为了页面的结构。

1. 标签的书写，需要开始和结束。单便签除外；
2. 块级元素不能放在p标签里面。li内可以包含div标签。
3. 块元素里面可以放在块和内联，特殊的 p和 h1—h6里面不要放块元素，li和div可以放很多。因为这两个标签，本身就有容器的属性
4. 内联里面要放内联，不要放块。（嵌套关系）
5. 结构与表现分离
6. 命名一定要规范

### 2.2 表现层标准
> 表现标准语言主要包括CSS（Cascading Style Sheets）层叠式样式表，通过CSS样式表，W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言，通过CSS样式可以是页面的结构标签更具美感。

1.	尽可能使用外部引入的方式，达到分离的目的
2.	CSS选择器，优先级
3.	代码简洁

### 2.3 行为层标准
> 行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，标准主要包括对象模型（如W3C DOM）、ECMAScript并要求这三部分分离。

+ DOM是Document Object Model文档对象模型的缩写。DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。

+ ECMAScript是ECMA(EuropeanComputer Manufacturers Association)制定的标准脚本语言（JAVAScript）

## 3.对W3C的认识？
> W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范。

主要包含如下几点：
### 3.1 对于结构的要求
+ 1）标签字母要小写
+ 2）标签要闭合
+ 3）标签不允许随意嵌套
  
### 3.2 对于css和js的要求
+ 1）尽量使用外链css样式表和js脚本。使结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
+ 2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版。
+ 3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。
  
## 4.什么是前端语义化？
> [!NOTE]
>语义化就是是让机器可以读懂内容，web页面的解析是由搜索引擎来进行搜索，机器来解析。

### 4.1 标签是有语义的
h1~h6、thead、ul、ol等标签，初期的语义化标签：程序员利用HTML标签的id和class属性，进一步对HTML标签进行描述，如对页脚HTML标签添加如id="footer"或者class="footer"的属性（值）（使用有语义的对于需要声明的变量和class，id）
### 4.2 HTML5的语义标签
w3C采用了header/footer; section（章节、页眉、页脚）/article（内容区域）; nav导航；aside 不重要的内容；em(emphasize)/strong增强; i(icon)制作图标

## 5.谈一下页面布局架构？
+ CSS布局：table布局，float布局，flex布局（瀑布流布局），inline-block布局
+ 三大框架，页面架构

## 6.HTML的版本问题？
1. HTML4/4.0.1(SGML)(标签允许不结束)
2. XHTML(XML)（标签必须结束，属性必须带引号，属性必须有值，标签属性必须有值）
3. HTML5（类似于HTML4的写法）

> [!NOTE]
> 关键点：HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

## 7.HTML5新增的内容有哪些？
1. 新的区块标签：section,article,nav,aside
2. 表单增强：日期、时间、搜索（修改type的类型实现）；表单验证；placeholder
3. 语义增强：header/footer; section/article; nav导航；aside 不重要的内容；em(emphasize)/strong增强; i(icon)制作图标

## 8.HTML的元素分类？
+ 块级元素block（方块形状，占据一整行）：div ul ol li dl dt dd h1 h2 h3 h4…p
+ 行内元素inline(一行中的某个位置)：a b span img input select strong（强调的语气）
+ inline-block(行内，有宽高属性)：selection

> [!NOTE]
> 行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
> 块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
> 空元素:br、meta、hr、link、input、img

## 9.HTML嵌套关系？
1. 块级元素可以包含行内元素
2. 块级元素不一定能包含块级元素(p标签不能包含div标签)
3. 行内元素“一般”不能包含块级元素（a包含div是可以的）

## 10.HTML的默认样式？
1. 默认样式的意义
2. 默认样式代理的问题
3. CSS Reset 的作用

```css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
```

## 11.使用ajax方式来提交数据可以不使用form标签吗？
1. form标签可以使用submit, reset
2. 使用form可以直接一次性获取所有的form窗体的数据属性
3. form可以较好地实现表单验证等功能

### 11.1 Form表单提交
```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="login test">   
</head>
<body>
<div id="form-div">
    <form id="form1" action="/users/login" method="post">
        <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="submit" value="登录">&nbsp<input type="reset" value="重置"></p>
    </form>
</div>
</body>
</html>
```
### 11.2 ajax提交
```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="ajax方式">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        function login() {
            $.ajax({
            //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/users/login" ,//url
                data: $('#form1').serialize(),
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.resultCode == 200) {
                        alert("SUCCESS");
                    }
                    ;
                },
                error : function() {
                    alert("异常！");
                }
            });
        }
    </script>
</head>
<body>
<div id="form-div">
    <form id="form1" onsubmit="return false" action="##" method="post">
        <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="button" value="登录" onclick="login()">&nbsp;<input type="reset" value="重置"></p>
    </form>
</div>
</body>
</html>
```
> [!NOTE]
> 扩展思考：Form表单提交数据给一个非同源的网址，如在A网址(http://www.A.com)上直接向B网站(http://www.B.com)发送数据请求, 为什么不会触发浏览器的同源策略限制呢？

【HTML相关】HTML基础强化

11.使用ajax方式来提交数据可以不使用form标签吗？

### 实现一个类型判断函数

1. 判断null
2. 判断基础类型
3. 使用`Object.prototype.toString.call(target)`来判断**引用类型**

> [!NOTE]
> 注意： 一定是使用`call`来调用，不然是判断的Object.prototype的类型

之所以要先判断是否为基本类型是因为：虽然`Object.prototype.toString.call()`能判断出某值是：number/string/boolean，但是其实在包装的时候是把他们先转成了对象然后再判断类型的。 但是JS中包装类型和原始类型还是有差别的，因为对一个包装类型来说，typeof的值是object

```javascript
/**
 * 类型判断
 */
function getType(target) {
  //先处理最特殊的Null
  if(target === null) {
    return 'null';
  }
  //判断是不是基础类型
  const typeOfT = typeof target
  if(typeOfT !== 'object') {
    return typeOfT;
  }
  //肯定是引用类型了
  const template = {
    "[object Object]": "object",
    "[object Array]" : "array",
    "[object Function]": "function",
    // 一些包装类型
    "[object String]": "object - string",
    "[object Number]": "object - number",
    "[object Boolean]": "object - boolean"
  };
  const typeStr = Object.prototype.toString.call(target);
  return template[typeStr];
}
```

# 升级版本
```js
// typeof可以检测基本数据类型
// Undefined, Null, Boolean, Number, String, Objec
// undefined, object, boolean, number, string, object

// 以下是11种：
var number = 1;          // [object Number]
var string = '123';      // [object String]
var boolean = true;      // [object Boolean]
var und = undefined;     // [object Undefined]
var nul = null;          // [object Null]
var obj = {a: 1}         // [object Object]
var array = [1, 2, 3];   // [object Array]
var date = new Date();   // [object Date]
var error = new Error(); // [object Error]
var reg = /a/g;          // [object RegExp]
var func = function a(){}; // [object Function]

function checkType() {
    for (var i = 0; i < arguments.length; i++) {
        console.log(Object.prototype.toString.call(arguments[i]))
    }
}

checkType(number, string, boolean, und, nul, obj, array, date, error, reg, func)

console.log(Object.prototype.toString.call(Math)); // [object Math]
console.log(Object.prototype.toString.call(JSON)); // [object JSON]

function a() {
    console.log(Object.prototype.toString.call(arguments)); // [object Arguments]
}

a();

// TODO:Object.toString()的理解？
/*1. 如果 this 值是 undefined，就返回 [object Undefined]
  2. 如果 this 的值是 null，就返回 [object Null]
  3. 让 O 成为 ToObject(this) 的结果
  4. 让 class 成为 O 的内部属性 [[Class]] 的值
  5. 最后返回由 "[object " 和 class 和 "]" 三个部分组成的字符串*/

// TODO:封装一个通用的type API？
// v1: 基础版本
var class2type = {};

'Undefined Null String Number Boolean Object Function Array Date RegExp Error'
    .split(' ')
    .map(function (item) {
        // 开始建立映射关系
        class2type[`[object ${item}]`] = item.toLowerCase();
    })

function type(obj) {
    return typeof obj === 'object' || typeof obj === 'function'
        ? class2type[Object.prototype.toString.call(obj)] || 'object'
        : typeof obj;
}

// v2:在 IE6 中，null 和 undefined 会被 Object.prototype.toString 识别成 [object Object]！
// TODO: 解决IE6下的null和undefined 会被识别为[object Object]?
var class2type = {};
'Undefined Null String Number Boolean Object Function Array Date RegExp Error'
    .split(' ').map(function (item) {
    class2type[`[object ${item}]`] = item.toLowerCase();
})

/**
 * 查看type的基础类型
 * @param obj
 * @return {string|*}
 */
function type(obj) {
    // 开始解决ie下的兼容问题
    if (obj == null) {
        return obj + '';
    }
    return typeof obj === 'object' || obj === 'function'
            //  ES6 新增的 Symbol、Map、Set 等类型，它们并不在 class2type 列表中，所以使用 type 函数，返回的结果会是 object
            ? class2type[Object.prototype.toString.call(obj)] || 'object'
            : typeof obj;
}

/**
 * 查看obj是否为函数累类型
 * @param obj
 * @return {boolean}
 */
function isFunction(obj) {
    return type(obj) === 'function';
}


/**
 * 注意这里的isArray是一个函数，并不是一个函数执行的结果
 * @type {((arg: any) => arg is Array<any>) | (function(*=): boolean)}
 */
var isArray = Array.isArray || function (obj) {
    return type(obj) === 'array';
}


// TODO: plainObject, 就是该对象是通过 "{}" 或 "new Object" 创建的，该对象含有零个或者多个键值对?
// 存放toString的映射结果
var class2type = {};
// Object.prototype.toString
var toString = class2type.toString();
// Object.prototype.hasOwnProperty
var hasOwn = class2type.hasOwnProperty;

function isPlainObject(obj) {
    // 排除掉宿主对象 eg: toString.call(window) === '[objct window]'
    if (!obj || toString.call(obj) !== '[object Object]') {
        return false;
    }

    /**
     * Object.getPrototypeOf() 方法返回指定对象的原型（即, 内部[[Prototype]]属性的值）,如果没有继承属性，则返回 null 。
     * eg: obj.__proto__ === Object.protptype
     * @type {any}
     */
    var proto = Object.getPrototypeOf(obj);
    // 如果没有原型对象的话，eg:Object.create(null), 就是纯对象
    if (!proto) {
        return true;
    }

    // 通过new Object方式创建的对象
    // 判断 proto 是否有 constructor 属性，如果有就让 Ctor 的值为 proto.constructor
    var Constructor = hasOwn.call(proto, 'constructor') && proto.constructor;

    // 判断Constructor是不是Object的构造函数
    return typeof Constructor === 'function' && hasOwn.toString.call(Constructor) === hasOwn.toString.call(Object);
}


// TODO: EmptyObject如何判断？
function isEmptyObject(obj) {
    var name;
    // 看一下当前的这个obj对象有没有属性，如果有的话就返回false
    for (name in obj) {
        // 遍历的不仅仅是obj自身的属性，而且也遍历了obj原型上的属性
        return false;
    }
    return true;
}
// test
console.log(isEmptyObject({})); // true
console.log(isEmptyObject([])); // true
console.log(isEmptyObject(null)); // true
console.log(isEmptyObject(undefined)); // true
console.log(isEmptyObject(1)); // true
console.log(isEmptyObject('')); // true
console.log(isEmptyObject(true)); // true


// TODO: 判断是否为window对象？
// window对象的window属性指向其本身
function isWindow(obj) {
    return obj != null && obj == obj.window;
}

// TODO: 判断是否为document对象？
function isDocument(obj) {
    return obj != null && obj.nodeType == obj.DOCUMENT_NODE;
}

// TODO: 判断是不是DOM元素
function isDOMElement(obj) {
    // 这里需要强制把返回的结果转换为bool类型，eg:obj = undefined,!!undefined=r\true
    return !!(obj && obj.nodeType === 1);
}


// TODO: isArrayLike如何实现？(可以判断数组和伪数组类型)
function isArrayLike(obj) {
    // 1. 先看obj有没有length属性
    var length = !!obj && ('length' in obj) && obj.length;
    var typeRes = type(obj);

    // 2. 排除掉函数和window对象, window也是有length属性的
    if (typeRes === 'function' || isWindow(obj)) {
        return false;
    }

    // 3. 开始处理结果
    return typeRes === 'array'                  // 1. 是数组类型
            || length === 0                     // 2. 长度为0(函数中的arguments参数)
            || typeof length === 'number'
            && length > 0
            && (length - 1) in obj;             // 3. length 属性是大于 0 的数字类型，并且obj[length - 1]必须存在(符合条件的类数组对象是一定存在最后一个元素的)

}

// underscore 如何实现的？
function isArrayLike(collection) {
    var MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;
    var length = getLength(collection);
    return typeof length === 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
}
```

【编程题与分析题】类型检测

# 参考资料

## 前端工具

- Git
  1. [入门篇](https://backlog.com/git-tutorial/cn/intro/intro1_1.html)
  2. [高级篇](https://backlog.com/git-tutorial/cn/stepup/stepup1_1.html)
  3. [索引篇](https://backlog.com/git-tutorial/cn/reference/)
  4. [原版](https://www.atlassian.com/git/tutorials/merging-vs-rebasing)
  5. [原版翻译](https://github.com/geeeeeeeeek/git-recipes/wiki/1.1-%E6%9E%9C%E5%A3%B3%E4%B8%AD%E7%9A%84-Git)
  6. [Git 的奇技淫巧](https://github.com/cucygh/git-tips)
- Webpack
  1. [文档](https://doc.webpack-china.org/concepts/)
  2. [插件](https://doc.webpack-china.org/plugins/)
- Gulp
  -  [文档](https://www.gulpjs.com.cn/)
- Grunt
  - [文档](http://www.gruntjs.net/)
- Rollup
  - [文档](http://www.rollupjs.com/)
- 代码质量
  1. [vue eslint](https://mysticatea.github.io/vue-eslint-demo/)
  2. [htmlhint](https://htmlhint.io/)
  3. [stylelint](https://stylelint.io/)
- http-server
  - [静态服务器](https://www.npmjs.com/package/http-server)
- ast
  - [业界 AST 库](https://github.com/cucygh/AST-)
- 自动化测试
  - [jest](https://jestjs.io/zh-Hans/)


## 前端框架

- Vue
  1. [基本教程](https://cn.vuejs.org/)
  2. [路由](https://router.vuejs.org/)
  3. [Vuex](https://vuex.vuejs.org/)
  4. [SSR](https://ssr.vuejs.org/)
  5. [Nuxt.js](https://zh.nuxtjs.org/)
  6. [Vue 源码分析·免费](http://hcysun.me/vue-design/)
- React
  1. [文档](https://doc.react-china.org/)
  2. [Redux 官方文档](http://cn.redux.js.org/)
  3. [Redux 中文社区](http://www.redux.org.cn/)
  4. [Next.js](https://zeit.co/blog/next4)
  5. [Next.js 中文文档](http://nextjs.frontendx.cn/docs)
  6. [Next.js 掘金博客](https://juejin.im/entry/59791d8f6fb9a03c391b557e)
- Angular
  - [官方文档](https://angular.cn/)
- Koa
  > Express 升级后的框架，抽象设计更彻底，强大、自由、灵活

  1. [文档](https://koa.bootcss.com/)
  2. [Koa2 进阶学习笔记](https://chenshenhai.github.io/koa2-note/)
  3. [基于 Koa2 搭建 Node.js 实战项目教程](https://github.com/ikcamp/koa2-tutorial)
- Express
  > Node.js 开发最容易上手的业务应用开发框架
  - [文档](http://expressjs.com/zh-cn/)

## 前端技术

- 内存泄漏
  1. [JavaScript 内存泄露和 CSS 优化](https://github.com/cucygh/js-leakage-patterns?organization=cucygh&organization=cucygh)
  2. [内存泄漏](https://developers.google.com/web/tools/chrome-devtools/memory-problems/?hl=zh-cn)
- MDN官方文档
  - [MDN官方文档](https://developer.mozilla.org/zh-CN/)

## CSS 教程

- Less
  - [文档](http://less.bootcss.com/)
- Sass
  - [文档](http://sass.bootcss.com/docs/sass-reference/)
- CSS3 布局
  - [学习布局](http://zh.learnlayout.com/)

## JavaScript 教程

- ES6
  1. [权威教程:ECMAScript 6](http://es6-features.org/#Constants)
  2. [入门教程](http://es6.ruanyifeng.com/)
- Node
  1. [官方网站](http://nodejs.cn/)
  2. [官方教程](http://nodejs.cn/api/)
- ES3
  - [入门教程](http://www.runoob.com/js/js-tutorial.html)
- ES5
  1. [ES5 新特性与 ES3 的对比](http://www.hahack.com/wiki/javascript-es5.html#es5-%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7)
  2. [ES5 新特性博客](http://pij.robinqu.me/JavaScript_Core/ECMAScript/es5.html)

## 服务端教程

- [Nginx 入门](http://cnt1992.xyz/2016/03/18/simple-intro-to-nginx/)
- [Nginx 入门与精通（高级）](http://tengine.taobao.org/book/#)
- [Nginx 配置大全](https://nginxconfig.io/)



【总结】参考资料

# 函数

## 1. JS编译解析的流程

### 1.1 JS运行分三步
语法分析（通篇扫描是否有语法错误），预编译（发生在函数执行的前一刻），解释执行（一行行执行）。


### 1.2 预编译执行分五步
1. 创建AO对象（Activation Object  执行期上下文）

2. 找形参和变量声明，将变量和形参名作为AO属性名，值为undefined. 变量声明提升（变量放到后面也不会报错，只是未定义类型）如：console.log(a);var a=10;结果undenfined;

3. 将实参值和形参统一（传参）

4. 在函数体里面找到函数声明{函数声明整体提升（相当于放到程序最前面）}

5. 值赋予函数体，执行（声明函数和变量的部分直接不看了）


## 2. 函数作用域和作用域链
### 2.1 函数作用域

> 每个javascript函数都是一个对象，对象中有的属性可以访问，有的不能，这些属性仅供javascript引擎存取，如[[scope]]。

[[scope]]就是函数的作用域，其中存储了执行期上下文的集合。

**执行期上下文**： 当函数执行时，会创建一个称为执行期上下文的内部对象（AO）。一个执行期上下文定义了一个函数执行时的环境，函数每次执行时对应的执行期上下文都是独一无二的，所以多次调用一个函数会导致创建多个执行期上下文，当函数执行完毕，它所产生的执行上下文被销毁。


### 2.2 作用域链
`[[scope]]`中所存储的执行期上下文对象的集合，这个集合呈链式链接，我们称这种链式链接为作用域链。查找变量时，要从作用域链的顶部开始查找。Activation Object（AO）到Global Object（GO）。

![function](../../img/function.png)
![a定义](../../img/define.png)
![a run](../../img/run.png)
![b define](../../img/bdefine.png)
![b run](../../img/brun.png)



### 2.3 闭包
> [!NOTE]
> 当内部函数被保存到外部时，将会生成闭包。生成闭包后，内部函数依旧可以访问其所在的外部函数的变量。

> 闭包问题的解决方法：立即执行函数、let

#### 2.3.1 详细解释

1. 当函数执行时，会创建一个称为**执行期上下文的内部对象（AO）**，执行期上下文定义了一个函数执行时的环境。

2. 函数还会获得它所在作用域的**作用域链**，是存储函数能够访问的所有执行期上下文对象的集合，即这个函数中能够访问到的东西都是沿着作用域链向上查找直到全局作用域。

3. 函数每次执行时对应的执行期上下文都是独一无二的，当函数执行完毕，函数都会失去对这个作用域链的引用，JS的垃圾回收机制是采用引用计数策略，如果一块内存不再被引用了那么这块内存就会被释放。

4. 但是，当闭包存在时，即内部函数保留了对外部变量的引用时，这个作用域链就不会被销毁，此时内部函数依旧可以访问其所在的外部函数的变量，这就是闭包。


#### 2.3.2 闭包的应用
> 先看两个例子，两个例子都打印5个5

```js
for (var i = 0; i < 5; i++) {
  setTimeout(function timer() {
    console.log(i)
  }, i * 100)
}
```

```js
function test() {
   var a = [];
   for (var i = 0; i < 5; i++) {
         a[i] = function () {
            console.log(i);
         }
   }
   return a;
}

var myArr = test();
for(var j=0;j<5;j++)
{
   myArr[j]();
}
```


> 解决方法： 使用立即执行函数

```js
for (var i = 0; i < 5; i++) {
   ;(function(i) {
      setTimeout(function timer() {
         console.log(i)
      }, i * 100)
   })(i)
}
```
```js
function test(){
   var arr=[];
   for(i=0;i<10;i++)
   {
      (function(j){
         arr[j]=function(){
         console.log(j);
         }
      })(i)
   }
   return arr;
}

var myArr=test();
for(j=0;j<10;j++)
{
   myArr[j]();
}
```


#### 2.3.3 闭包-封装私有变量
```js
function Counter() {
   let count = 0;
   this.plus = function () {
      return ++count;
   }
   this.minus = function () {
      return --count;
   }
   this.getCount = function () {
      return count;
   }
}

const counter = new Counter();
counter.puls();
counter.puls();
console.log(counter.getCount())
```


## 3. 作用域与变量声明提升?
1. 在 JavaScript 中，函数声明与变量声明会被 JavaScript 引擎隐式地提升到当前作用域的顶部 
2. 声明语句中的赋值部分并不会被提升，只有名称被提升
3. 函数声明的优先级高于变量，如果变量名跟函数名相同且未赋值，则函数声明会覆盖变量声明
4. 如果函数有多个同名参数，那么最后一个参数（即使没有定义）会覆盖前面的同名参数


## 4. 构造函数，new时发生了什么？
 
```javascript
   var obj  = {}; 
   obj.__proto__ = Base.prototype;
   Base.call(obj);  
```

1. 创建一个新的对象 obj;
2. 将这个空对象的__proto__成员指向了Base函数对象prototype成员对象
3. Base函数对象的this指针替换成obj, 相当于执行了Base.call(obj);
4. 如果构造函数显示的返回一个对象，那么则这个实例为这个返回的对象。 否则返回这个新创建的对象



## 5. 函数参数是对象会发生什么问题？

```javascript
function test(person) {
  person.age = 26
  person = {
    name: 'yyy',
    age: 30
  }

  return person
}
const p1 = {
  name: 'hy',
  age: 25
}
const p2 = test(p1)
console.log(p1) // -> {name: "hy", age: 20}
console.log(p2) // -> {name: "yyy", age: 30}
```

`person = {}` 这一步操作就将应用与原来的分离了
![地址改变](../../img/addressChange.png)



## 6. JavaScript 中，调用函数有哪几种方式？
1. 方法调用模式 Foo.foo(arg1, arg2);
2. 函数调用模式 foo(arg1, arg2);
3. 构造器调用模式 (new Foo())(arg1, arg2);
4. call/applay 调用模式 Foo.foo.call(that, arg1, arg2);
5. bind 调用模式 Foo.foo.bind(that)(arg1, arg2)();

【JS相关】函数

4. 构造函数，new时发生了什么？

5. 函数参数是对象会发生什么问题？

6. JavaScript 中，调用函数有哪几种方式？

# NodeJS
## 1.	对Node的优点和缺点提出了自己的看法：
*（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，
因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，
因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。
*（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，
而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。
## 2.	需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？
至少给出自己的思路（url-hash,可以使用已有的一些框架history.js等）
## 3.	Node.js的适用场景？
1)、实时应用：如在线聊天，实时通知推送等等（如socket.io）
2)、分布式应用：通过高效的并行I/O使用已有的数据
3)、工具类应用：海量的工具，小到前端压缩部署（如grunt），大到桌面图形界面应用程序
4)、游戏类应用：游戏领域对实时和并发有很高的要求（如网易的pomelo框架）
5)、利用稳定接口提升Web渲染能力
6)、前后端编程语言环境统一：前端开发人员可以非常快速地切入到服务器端的开发（如著名的纯Javascript全栈式MEAN架构）
## 4.	(如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
Nodejs相关概念的理解程度
## 5.	解释一下 Backbone 的 MVC 实现方式？
流行的MVC架构模式
## 6.	什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?
熟悉前后端通信相关知识


【前端面试题】NodeJS

1.   对Node的优点和缺点提出了自己的看法：

2.   需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？

4.   (如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?

5.   解释一下 Backbone 的 MVC 实现方式？

6.   什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?

# XSS 跨站脚本攻击

## 1. 介绍一下XSS攻击的原理和危害？
### 1.1 基本原理
> [!NOTE]
> XSS ( Cross Site Scripting ) 是指恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点，进而添加一些代码，嵌入到web页面中去。使别的用户访问都会执行相应的嵌入代码。从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。

### 1.2 XSS攻击的危害

1. 获取页面数据
2. 获取cookie
3. 劫持前端逻辑
4. 发送请求
5. 偷取网站任意数据
6. 偷取用户资料
7. 偷取用户密码和登陆态
8. 欺骗用户
   
### 1.3 XSS攻击分类

#### 1.3.1  反射型
> 通过url参数直接注入。

发出请求时，XSS代码出现在URL中，作为输入提交到服务器端，服务端解析后返回，XSS代码随响应内容一起传回给浏览器，最后浏览器执行XSS代码。这个过程像一次反射，故叫做反射型XSS。

**举个例子**

一个链接，里面的query字段中包含一个script标签，这个标签的src就是恶意代码，用户点击了这个链接后会先向服务器发送请求，服务器返回时也携带了这个XSS代码，然后浏览器将查询的结果写入Html，这时恶意代码就被执行了。

并不是在url中没有包含script标签的网址都是安全的，可以使用[短网址](dwz.com)来让网址变得很短。



#### 1.3.2 存储型
> [!NOTE]
> 存储型XSS会被保存到数据库，在其他用户访问（前端）到这条数据时，这个代码会在访问用户的浏览器端执行。

**举个例子**

比如攻击者在一篇文章的评论中写入了script标签，这个评论被保存数据库，当其他用户看到这篇文章时就会执行这个脚本。



### 1.4 XSS攻击注入点
 - HTML节点内容
   - 如果一个节点内容是动态生成的，而这个内容中包含用户输入。
 - HTML属性
   - 某些节点属性值是由用户输入的内容生成的。那么可能会被封闭标签后添加script标签。


```html
<img src="${image}"/>
<img src="1" onerror="alert(1)" />
```
 - Javascript代码
   - JS中包含由后台注入的变量或用户输入的信息。
```js
var data = "#{data}";
var data = "hello"; alert(1);"";
```
 - 富文本


## 2. XSS 防御方法有哪些？
> [!NOTE]
> 对于 XSS 攻击来说，通常有两种方式可以用来防御。
> - 转义字符
> - CSP 内容安全策略

### 2.1 转义字符

 - 普通的输入 - 编码
   - 对用户输入数据进行HTML Entity编码（使用转义字符）
   - "
   - &
   - <
   - \>
   - 空格

 - 富文本 - 过滤（黑名单、白名单）
   - 移除上传的DOM属性，如onerror等
   - 移除用户上传的style节点、script节点、iframe节点等

 - 较正
   - 避免直接对HTML Entity解码
   - 使用DOM Parse转换，校正不配对的DOM标签和属性


#### 2.1.1 对于会在DOM中出现的字符串（用户数据）

 < 转义为 \&lt;
 > 转义为 \&gt;

#### 2.1.2 对于可能出现在DOM元素属性上的数据

 " 转义为 \&quot;
 ' 转义为 \&9039;
 空格转义为 \&nbsp; 但这可能造成多个连续的空格，也可以不对空格转义，但是一定要为属性加双引号

 & 这个字符如果要转义，那么一定要放在转移函数的第一个来做

#### 2.1.3 避免JS中的插入
```js
var data = "#{data}";
var data = "hello"; alert(1);"";
```

因为是用引号将变量包裹起来的，而且被攻击也因为引号被提前结束，所以要做的就是将引号转义
```
先 \\ -> \\\\
再 " -> \\"
```

### 2.2 富文本

#### 2.2.1 按照黑名单过滤script等
> [!NOTE]
> 但是html标签中能执行html代码的属性太多了，比如onclick, onhover,onerror, `<a href="jacascript:alert(1)">`


```js
function xssFilter = function (html) {
  html = html.replace(/<\s*\/?script\s*>/g, '');
  html = html.repalce(/javascript:[^'"]/g, '');
  html = html.replace(/onerror\s*=\s*['"]?[^'"]*['"]?/g, '');
  //....
  return html;
}
```

##### 2.2.1.1 按照白名单过滤
> [!NOTE]
> 只允许某些标签和属性存在

> 做法：将HTML解析成树状结构，对于这个DOM树，一个一个的去看是否存在合法的标签和属性，如果不是就去掉。

> 使用cheerio就可以快速的解析DOM


```js
function xssFilter (html) {

  const cheerio = require('cheerio');
  const $ = cheerio.load(html);

  //白名单
  const whiteList = {'img': ['src']}

  $('*').each((index, elem) => {
    if(!whiteList[elem.name]) {
      $(elem).remove();
      return;
    }
    for(let attr in elem.attribs) {
      if(whiteList[elem.name].indexOf(attr) === -1) {
        $(elem).attr(attr, null);
      }
    }
  })
  return html;
}
```

##### 2.2.1.2 使用npm包来简化操作
[xss文档](https://github.com/leizongmin/js-xss/blob/master/README.zh.md)


### 2.3 CSP 内容安全策略
> [!NOTE]
> CSP 本质上就是建立白名单，开发者明确告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截是由浏览器自己实现的。我们可以通过这种方式来尽量减少 XSS 攻击。

通常可以通过两种方式来开启 CSP：
 - 设置 HTTP Header 中的 Content-Security-Policy
 - 设置 meta 标签的方式 `<meta http-equiv="Content-Security-Policy">`

以设置 HTTP Header 来举例
 - 只允许加载本站资源
```
Content-Security-Policy: default-src ‘self’
```
 - 图片只允许加载 HTTPS 协议
```
Content-Security-Policy: img-src https://*
```
 - 允许加载任何来源框架
```
Content-Security-Policy: child-src 'none'
```

**参考文章**
- [CSP](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP) ( Content Security Policy )


【Web安全】XSS攻击

1. 介绍一下XSS攻击的原理和危害？

2.1.1 对于会在DOM中出现的字符串（用户数据）

2.1.2 对于可能出现在DOM元素属性上的数据

【JS相关】JS基础知识

1.2 typeof可以及检测的数据类型有哪些？

2.6 zepto或其他框架中是如何实现原型链的？

3.1 函数表达式和函数声明的区别？

（2）全局作用域中函数中的this

3.6 什么是自由变量和作用域链？

3.8 创建10个a标签，点击的时候，弹出对应的序号

4.1 什么是异步？前端使用异步的场景有哪些？

5.1 如何获取2017-06-10 格式的日期？

5.2 如何获取一个长度一致的随机字符串？

5.3 写一个能遍历对象和数组通用的forEach函数

# JS基础知识
## 1.	javascript的typeof返回哪些数据类型
```js
   alert(typeof [1, 2]); //object
    alert(typeof 'leipeng'); //string
    var i = true; 
    alert(typeof i); //boolean
    alert(typeof 1); //number
    var a; 
    alert(typeof a); //undefined
    function a(){;};
alert(typeof a) //function
typeof isNaN  function
检测数组的几种方式：
Array.isArray(arr);   es5
Object.toString.call([]) === ‘object Array’
arr instanceof Array
arr.constructor === Array
```
## 2.	例举3种强制类型转换和2种隐式类型转换?
强制（parseInt(),parseFloat(),Number()）
隐式（== ,!!）
## 3.	split() 、join() 的区别
前者是切割成数组的形式，后者是将数组转换成字符串
## 4.	数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
## 5.	事件绑定和普通事件有什么区别
普通添加事件的方法：
```js
var btn = document.getElementById("hello");
btn.onclick = function(){
	alert(1);
}
btn.onclick = function(){
	alert(2);
}
执行上面的代码只会alert 2 

事件绑定方式添加事件：
var btn = document.getElementById("hello");
btn.addEventListener("click",function(){
	alert(1);
},false);
btn.addEventListener("click",function(){
	alert(2);
},false);
执行上面的代码会先alert 1 再 alert 2
1.	普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。
2.	普通事件绑定不支持DOM事件流，事件捕获-目标元素-事件冒泡（可以把事件绑定在不同的阶段去执行）
3.	addEventListener不兼容低版本IE，第三个参数默认为false，表示在事件冒泡阶段执行
普通事件无法取消；第三个参数为true的时候表示在事件捕获的阶段执行；不需要on前缀；
addEventLisntener还支持事件冒泡+事件捕获；
4.	addEventLisntener同一个元素绑定完全相同的事件并不会覆盖掉前面的事件
5.	attachEvent只支持事件冒泡，不支持事件捕获。
```
## 6.	IE和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题
## 7.	IE和标准下有哪些兼容性的写法
Var ev = ev || window.event；   // 获取触发事件对象
Var target = ev.srcElement||ev.target  // 获取触发事件的源对象
document.documentElement.clientWidth || document.body.clientWidth
## 8.	call和apply的区别
call方法: 
语法：call(thisObj，Object1,Object2...)
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 

apply方法： 
语法：apply(thisObj，[argArray])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。 
说明： 
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。 
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。
## 9.	b继承a的方法
原型链继承
借用构造函数继承
原型+构造函数组合继承
寄生式继承
```js
function A( age, name ){ 
  this.age = age; 
  this.name = name; 
} 

A.prototype.show = function(){ 
  alert('父级方法'); 
} 

function B(age,name,job){ 
  A.apply( this, arguments ); 
  this.job = job; 
} 

B.prototype = new A();
var b = new A(14,'侠客行'); 
var a = new B(15,'狼侠','侠客'); 
```
## 10.	如何阻止事件冒泡和默认事件
canceBubble()只支持IE,return false,stopPropagation()
## 11.	JS创建对象的几种方式？
对象字面量 / Object构造函数
构造函数
纯构造函数
空构造函数 + 原型
混合构造函数 + 原型
动态原型
```js
// 动态原型的使用
    function Person(name, work) {
        this.name = name;

        // JS中通过if条件动态给一个对象添加属性或者方法的过程就是动态原型
        if (work) {
            Person.prototype.working = function () {
                console.log('我的工作是：', work);
            }
        }
    }
寄生构造函数
Object.create()
```
## 12.	this指针，闭包，作用域
闭包： 收敛权限，避免变量全局污染；可以实现模块化（jQuery）
```js
// 立即执行函数
    var common = (function () {
        var name = 'common module';
        function initPage() {
            console.log(name);
        }

        // 向外暴露一个对象
        return {
            initpage : initPage
        }
    })();

    common.initpage();
// 使用闭包函数实现点击弹出真实索引
    var lis = document.querySelectorAll('li');
    for (var i = 0; i < lis.length; i++) {
        (function (i) {
            lis[i].addEventListener('click', function () {
                alert(i);
            })
        })(i);
    }
```
## 13.	添加 删除 替换 插入到某个接点的方法
```js
obj.appendChid()
obj.insertBefore()
obj.replaceChild()
obj.removeChild()
```
## 14.	javascript的本地对象，内置对象和宿主对象
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主对象为浏览器自带的document,window 等
## 15.	window.onload 和document ready的区别
window.onload 是在dom文档树加载完和所有文件加载完之后执行一个函数Document.ready原生种没有这个方法，jquery中有 $().ready(function),在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。
$(document).ready要比window.onload先执行
window.onload只能出来一次，$(document).ready可以出现多次
## 16.	”==”和“===”的不同
前者会自动转换类型
后者不会
## 17.	javascript的同源策略
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、议和端口号的组合。
Ajax跨域的实现，JSONP的底层实现原理，如何解决跨域请求
## 18.	JavaScript是一门什么样的语言，它有哪些特点？
没有标准答案。
javaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。JavaScript兼容于ECMA标准，因此也称为ECMAScript。
基本特点
1．是一种解释性脚本语言（代码不进行预编译）。
2．主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
3．可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
4．跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
## 19.	JavaScript的数据类型都有什么？
基本数据类型：String,boolean,Number,Undefined, Null
引用数据类型：Object(Array,Date,RegExp,Function)
那么问题来了，如何判断某变量是否为数组数据类型？
方法一.判断其是否具有“数组性质”，如slice()方法。可自己给该变量定义slice方法，故有时会失效
方法二.obj instanceof Array 在某些IE版本中不正确
方法三.方法一二皆有漏洞，在ECMA Script5中定义了新方法Array.isArray(), 保证其兼容性，最好的方法如下：
```js
	if(typeof Array.isArray==="undefined")
{
  Array.isArray = function(arg){
        return Object.prototype.toString.call(arg)==="[object Array]"
    };  
}
```

## 20.	已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)
	document.getElementById(“ID”).value
## 21.	希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)
```js
	var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];
var len = domList.length;　　//缓存到局部变量
while (len--) {　　//使用while的效率会比for循环更高
　　if (domList[len].type == ‘checkbox’) {
    　　checkBoxList.push(domList[len]);
　　}
}
```

## 22.	设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)
```js
var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”
dom.style.color = “#000”
```

## 23.	当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？
直接在DOM里绑定事件：<div onclick=”test()”></div>
在JS里通过onclick绑定：xxx.onclick = test
通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)
那么问题来了，Javascript的事件流模型都有什么？
“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡
## 24.	看下列代码输出为何？解释原因。
```js
var a;
alert(typeof a); // undefined
alert(b); // 报错
```
解释：Undefined是一个只有一个值的数据类型，这个值就是“undefined”，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。
## 25.	看下列代码,输出什么？解释原因。
```js
var a = null;
alert(typeof a); //object
```
解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object”。
## 26.	看下列代码,输出什么？解释原因。
```js
var undefined;
undefined == null; // true
1 == true;   // true
2 == true;   // false
0 == false;  // true
0 == '';     // true
NaN == NaN;  // false
[] == false; // true
[] == ![];   // true
```
•	undefined与null相等，但不恒等（===）
一个是number一个是string时，会尝试将string转换为number
尝试将boolean转换为number，0或1
尝试将Object转换成number或string，取决于另外一个对比量的类型
所以，对于0、空字符串的判断，建议使用 “===” 。“===”会先判断两边的值类型，类型不匹配时为false。
那么问题来了，看下面的代码，输出什么，foo的值为什么？

```js
var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);   // number
```
执行完后foo的值为111，foo的类型为number。
## 27.	看代码给答案。
```js
var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);
```
答案：2（考察引用数据类型细节）

## 28. 已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。
答案：alert(stringArray.join(“ ”))		// 注意中间的空格

## 29.	已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。
```js
	function combo(msg){
    var arr=msg.split("-");
    for(var i=1;i<arr.length;i++){
        arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
    }
    msg=arr.join("");
    return msg;
}
```
## 30.	var numberArray = [3,6,2,4,1,5]; （考察基础API）
1) 实现对该数组的倒排，输出[5,1,4,2,6,3]
numberArray.reverse()
2) 实现对该数组的降序排列，输出[6,5,4,3,2,1]
numberArray.sort(function(a,b){return b-a})
## 31.	输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26
```js
var d = new Date();
// 获取年，getFullYear()返回4位的数字
var year = d.getFullYear();
// 获取月，月份比较特殊，0是1月，11是12月
var month = d.getMonth() + 1;
// 变成两位
month = month < 10 ? '0' + month : month;
// 获取日
var day = d.getDate();
day = day < 10 ? '0' + day : day;
alert(year + '-' + month + '-' + day);
```
## 32.	将字符串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替换成10，{$name}替换成Tony （使用正则表达式）
答案："<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>".replace(/{\$id}/g, '10').replace(/{\$name}/g, 'Tony');
## 33.	为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义
```js
	function escapeHtml(str) {
return str.replace(/[<>”&]/g, function(match) {
    switch (match) {
                   case “<”:
                      return “&lt;”;
                   case “>”:
                      return “&gt;”;
                   case “&”:
                      return “&amp;”;
                   case “\””:
                      return “&quot;”;
      }
  });
}
```
## 34.	foo = foo||bar ，这行代码是什么意思？为什么要这样写？
答案：if(!foo) foo = bar; //如果foo存在，值不变，否则把bar的值赋给foo。
短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。
## 35.	看下列代码，将会输出什么?(变量声明提升)
```js
	var foo = 1;
(function(){
    console.log(foo);
    var foo = 2;
    console.log(foo);
})()
```
答案：输出undefined 和 2。上面代码相当于：
```js
	var foo = 1;
(function(){
    var foo;
    console.log(foo); //undefined
    foo = 2;
    console.log(foo); // 2;   
})()
```
函数声明与变量声明会被JavaScript引擎隐式地提升到当前作用域的顶部，但是只提升名称不会提升赋值部分。
## 36.	用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。
```js
	function randomNub(aArray, len, min, max) {
               if (len >= (max - min)) {
                   return '超过' + min + '-' + max + '之间的个数范围' + (max - min - 1) + '个的总数';
               }
               if (aArray.length >= len) {
                   aArray.sort(function(a, b) {
                       return a - b
                   });
                   return aArray;
               }
               var nowNub = parseInt(Math.random() * (max - min - 1)) + (min + 1);
               for (var j = 0; j < aArray.length; j++) {
                   if (nowNub == aArray[j]) {
                       randomNub(aArray, len, min, max);
                       return;
                   }
               }
               aArray.push(nowNub);
               randomNub(aArray, len, min, max);
               return aArray;
           }
var arr=[];
randomNub(arr,10,10,100);
```
## 37.	把两个数组合并，并删除第二个元素。
```js
var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1);
```
## 38.	怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）
1）创建新节点
createDocumentFragment()    //创建一个DOM片段
createElement()   //创建一个具体的元素
createTextNode()   //创建一个文本节点
2）添加、移除、替换、插入
appendChild()      //添加
removeChild()      //移除
replaceChild()      //替换
insertBefore()      //插入
3）查找
getElementsByTagName()    //通过标签名称
getElementsByName()     //通过元素的Name属性的值
getElementById()        //通过元素Id，唯一性
## 39.	有这样一个URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。
答案：
```js
	function serilizeUrl(url) {
    var urlObject = {};
    if (/\?/.test(url)) {
        var urlString = url.substring(url.indexOf("?") + 1);
        var urlArray = urlString.split("&");
        for (var i = 0, len = urlArray.length; i < len; i++) {
            var urlItem = urlArray[i];
            var item = urlItem.split("=");
            urlObject[item[0]] = item[1];
        }
        return urlObject;
    }
    return null;
}
```
## 40.	正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？
答案：当使用RegExp()构造函数的时候，不仅需要转义引号（即\”表示”），并且还需要双反斜杠（即\\表示一个\）。使用正则表达字面量的效率更高。 
邮箱的正则匹配：
```js
	var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
```


【前端面试题】JS基础

1.   javascript的typeof返回哪些数据类型

2.   例举3种强制类型转换和2种隐式类型转换?

4.   数组方法pop() push() unshift() shift()

5.   事件绑定和普通事件有什么区别

7.   IE和标准下有哪些兼容性的写法

10.  如何阻止事件冒泡和默认事件

13.  添加 删除 替换 插入到某个接点的方法

14.  javascript的本地对象，内置对象和宿主对象

15.  window.onload 和document ready的区别

18.  JavaScript是一门什么样的语言，它有哪些特点？

19.  JavaScript的数据类型都有什么？

20.  已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)

21.  希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)

22.  设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)

23.  当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？

24.  看下列代码输出为何？解释原因。

25.  看下列代码,输出什么？解释原因。

26.  看下列代码,输出什么？解释原因。

28. 已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。

29.  已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。

30.  var numberArray = [3,6,2,4,1,5]; （考察基础API）

31.  输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26

32.  将字符串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替换成10，{$name}替换成Tony （使用正则表达式）

33.  为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义

34.  foo = foo||bar ，这行代码是什么意思？为什么要这样写？

35.  看下列代码，将会输出什么?(变量声明提升)

36.  用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。

37.  把两个数组合并，并删除第二个元素。

38.  怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）

39.  有这样一个URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。

40.  正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？