1,webpack 基础构建

概念:

1. webpack 把所有的东西全部看成模块：js、css、图片、字体库等静态资源。
2. SPA：simple page application,单页面应用
3. webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
4. webpack 是组件化开发的基础，只是一个打包工具，这个工具是nodejs写的。

在webpack执行命令之后的参数列表：

1. $ webpack src/js/main.js -o dist/js/bundle.js –mode development //命令行配置入口出口
2. $ webpack –config XXX.js //使用另一份配置文件（比如webpack.config2.js）来打包
3. $ webpack –watch //监听变动并自动打包
4. $ webpack –progress //显示进度条
5. $ webpack –color //添加颜色

（1）入口(entry)

1. 入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
2. 每个依赖项随即被处理，最后输出到称之为 bundles 的文件中。可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src。

（2）输出(output)

1. output 属性告诉 webpack 在哪里输出path它所创建的 bundles，以及如何命名filename这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程

（3）加载器(loader)独有

1. loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
2. loader 能够 import 导入任何类型的模块（例如 .css 文件），这是 webpack 特有的功能，其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是有很必要的，因为这可以使开发人员创建出更准确的依赖关系图。

（4）插件(plugins)

1. loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
2. 想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例

加载 CSS

1. 为了从 JavaScript 模块中 import 一个 CSS 文件，你需要在 module 配置中 安装并添加 style-loader 和 css-loader：
2. cnpm install –save-dev style-loader css-loader mini-css-extract-plugin

webpack 与gulp 工具的区别？

webpack偏向于模块化开发的思想，gulp偏向于面向过程开发模式
webpack适用于大型复杂的前端站点构建

webpack里loader与plugin的不同？

loader负责文件格式转换

plugin负责对转换后的文件进行修饰

webpack的构建流程是什么?

1、读取命令行或者配置文件里的参数

2、初始化工具

3、读取entry

4、使用loader

5、plugin

6、输出文件

webpack-dev-server思想？

当文件发生修改，通知各个模块进行更新加载，加载到计算机内存，刷新浏览器

webpack 优化前端性能？

1. 优化代码/优化前端性能？ html: 结构清晰 css: 文件合并，CDN分布式服务器，样式选择器预先写好 js: dom 操作合并，尽量避免dom 操作放到for循环里，避免重绘和重排

webpack 插件做优化：压缩，删除四代码，提取公共代码

1、添加配置，压缩代码

2、使用CDN

3、追加参数，删除死代码，–optimize-minimize
**
4、提取公共代码

2,electron基础应用

概念:

1. Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的，io.js 的一个变体。
2. 这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

应用的入口

1. 在 Electron 中，入口是一个 JavaScript 脚本。不同于直接提供一个URL，你需要手动创建一个浏览器窗口，然后通过 API 加载 HTML 文件。你还可以监听窗口事件，决定何时让应用退出。

2. 主进程

3. 在 Electron 里，运行 package.json 里 main 脚本的进程被称为主进程。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI。

4. 渲染进程

5. 由于 Electron 使用 Chromium 来展示页面，所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己的进程，这样的进程我们称之为渲染进程。

• 在一般浏览器中，网页通常会在沙盒环境下运行，并且不允许访问原生资源。然而，Electron 用户拥有在网页中调用 io.js 的 APIs 的能力，可以与底层操作系统直接交互。

主进程与渲染进程的区别

主进程使用 BrowserWindow 实例创建网页。每个 BrowserWindow 实例都在自己的渲染进程里运行着一个网页。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的，并且只关心他们自己的网页。

由于在网页里管理原生 GUI 资源是非常危险而且容易造成资源泄露，所以在网页面调用 GUI 相关的 APIs 是不被允许的。如果你想在网页里使用 GUI 操作，其对应的渲染进程必须与主进程进行通讯，请求主进程进行相关的 GUI 操作。

在 Electron，我们提供用于在主进程与渲染进程之间通讯的 ipc 模块。并且也有一个远程进程调用风格的通讯模块 remote。

相比于使用两个 IPC 模块，使用 remote 模块相对来说会比较自然一点。remote 模块帮我们屏蔽了内部的进程通信，使得我们在调用主进程的方法时完全没有感知到主进程的存在。

Electron 进程
Electron 中的 process 对象 与 upstream node 中的有以下的不同点:

process.type String – 进程类型, 可以是 browser (i.e. main process)或 renderer.
process.versions[‘electron’] String – Electron的版本.
process.versions[‘chrome’] String – Chromium的版本.
process.resourcesPath String – JavaScript源代码路径.
process.mas Boolean – 在Mac App Store 创建, 它的值为 true, 在其它的地方值为 undefined.

事件: ‘loaded’

在Electron已经加载了其内部预置脚本和它准备加载主进程或渲染进程的时候触发.

当node被完全关闭的时候，它可以被预加载脚本使用来添加(原文: removed)与node无关的全局符号来回退到全局范围

方法

process 对象有如下方法:

process.hang()

使当前进程的主线程挂起.

如何在两个网页（渲染进程）间共享数据？

在两个网页（渲染进程）间共享数据最简单的方法是使用浏览器中已经实现的 HTML5 API，比较好的方案是用 Storage API， localStorage，sessionStorage 或者 IndexedDB。

你还可以用 Electron 内的 IPC 机制实现。将数据存在主进程的某个全局变量中，然后在多个渲染进程中使用 remote 模块来访问它。

Electron 术语表

ASAR

ASAR 代表了 Atom Shell Archive Format。一个 asar 压缩包就是一个简单的 tar 文件-就像将那些有联系的文件格式化至一个单独的文件中。Electron 能够任意读取其中的文件并且不需要解压缩整个文件。

ASAR 格式主要是为了提升 Windows 平台上的性能。TODO

Brightray

Brightray 是能够简单的将 libchromiumcontent 应用到应用中的一个静态库。它是专门开发给 Electron 使用，但是也能够使用在那些没有基于 Electron 的原生应用来启用 Chromium 的渲染引擎。

Brightray 是 Electron 中的一个低级别的依赖，大部分的 Electron 用户不用关心它。

DMG

是指在 macOS 上使用的苹果系统的磁盘镜像打包格式。DMG 文件通常被用来分发应用的 “installers”（安装包）。electron-builder 支持使用 dmg 来作为编译目标。

IPC

IPC 代表 Inter-Process Communication。Electron 使用 IPC 来在 [主进程] 和 [渲染进程] 之间传递 JSON 信息。

libchromiumcontent

一个单独的开源库，包含了 Chromium 的模块以及全部依赖（比如 Blink, V8 等）。

main process

主进程，通常是值 main.js 文件，是每个 Electron 应用的入口文件。它控制着整个 APP 的生命周期，从打开到关闭。它也管理着原生元素比如菜单，菜单栏，Dock 栏，托盘等。主进程负责创建 APP 的每个渲染进程。而且整个 Node API 都集成在里面。

每个 app 的主进程文件都定义在 package.json 中的 main 属性当中，这也是为什么 electron . 能够知道应该使用哪个文件来启动。

MAS

是指苹果系统上的 Mac App Store 的缩略词。有关于如何提交你的 app 至 MAS ，详见 Mac App Store Submission Guide 。

native modules

原生模块 （在 Node.js 里也叫 addons），是一些使用 C or C++ 编写的能够在 Node.js 中加载或者在 Electron 中使用 require() 方法来加载的模块，它使用起来就如同 Node.js 的模块。它主要用于桥接在 JavaScript 上运行 Node.js 和 C/C++ 的库。

Electron 支持了原生的 Node 模块，但是 Electron 非常可能安装一个不一样的 V8 引擎通过 Node 二进制编码，所以在打包原生模块的时候你需要在 指定具体的 Electron 本地头文件。

NSIS

Nullsoft Scriptable Install System 是一个微软 Windows 平台上的脚本驱动的安装制作工具。它发布在免费软件许可证书下，是一个被广泛使用的替代商业专利产品类似于 InstallShield。electron-builder 支持使用 NSIS 作为编译目标。

process

一个进程是计算机程序执行中的一个实例。Electron 应用同时使用了 main (主进程) 和一个或者多个 renderer （渲染进程）来运行多个程序。

在 Node.js 和 Electron 里面，每个运行的进程包含一个 process 对象。这个对象作为一个全局的提供当前进程的相关信息，操作方法。作为一个全局变量，它在应用内能够不用 require() 来随时取到。

renderer process

渲染进程是你的应用内的一个浏览器窗口。与主进程不同的是，它能够同时存在多个而且运行在不一样的进程。而且它们也能够被隐藏。

在通常的浏览器内，网页通常运行在一个沙盒的环境挡住并且不能够使用原生的资源。然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些低级别的交互。

Squirrel

Squirrel 是一个开源的框架来让 Electron 的应用能够自动的更新到发布的新的版本。详见 autoUpdater API 了解如何开始使用 Squirrel。

userland

“userland” 或者 “userspace” 术语起源于 Unix 社区，当程序运行在操作系统内核之外。最近这个术语被推广在 Node 和 npm 社区用于区分 “Node core” 与发布的包的功能，对于在 npm 上注册的广大 “user（用户）” 们。

就像 Node ，Electron 致力于使用一些少量的设置和 API 来提供所有的必须的支持给开发中的跨平台应用。这个设计理念让 Electron 能够保持灵活而不被过多的规定有关于如何应该被使用。Userland 让用户能够创造和分享一些工具来提额外的功能在这个能够使用的 “core（核心）”之上。

V8

V8 是谷歌公司的开源的 JavaScript 引擎。它使用 C++ 编写并使用在谷歌公司开源的的浏览器 Google Chrome 上。V8 能够单独运行或者集成在任何一个 C++ 应用内。

webview
webview 标签用于集成 ‘guest（访客）’ 内容（比如外部的网页）在你的 Electron 应用内。它们类似于 iframe，但是不同的是每个 webview 运行在独立的进程中。 作为页面它拥有不一样的权限并且所有的嵌入的内容和你应用之间的交互都将是异步的。这将保证你的应用对于嵌入的内容的安全性。

3,javascript事件机制

一般事件

1. onclick 鼠标点击时触发此事件
2. ondblclick 鼠标双击时触发此事件
3. onmousedown 按下鼠标时触发此事件
4. onmouseup 按下鼠标后松开鼠标触发此事件
5. onmousemove 当鼠标移动时触发此事件
6. onmouseover 当鼠标移动到某对象范围的上方时触发此事件
7. onmouseout 当鼠标离开某对象范围时触发此事件
8. onkeypress 当键盘上某个键被敲下并释放时触发此事件
9. onkeydown 当键盘上某个键被敲下时触发此事件
10. onkeyup 当键盘上某个键被释放时触发此事件

页面相关事件

1. onabort 图片在下载时被用户中断
2. onbeforeunload 当前页面的内容将要被改变时触发此事件
3. onerror 出现错误时触发此事件
4. onload 页面内容完成时触发此事件
5. onresize 当浏览器的出口大小被改变时触发此事件
6. onscroll 当浏览器的滚动条位置发生变化时触发此事件
7. onstop 当浏览器的停止按钮被按下时或这在下载的文件被中断时触发此事件
8. onunload 当前页面将被改动时触发此事件

表单相关事件

1. onblur 当前元素失去焦点时触发此事件

2. onchange 当前元素失去焦点并且被改变时触发此事件

3. onfocus 当某个元素获得焦点时触发此事件

4. onreset 当表单中reset的属性被激发时触发的事件

5. onsubmit 当表单被提交时触发的事件

滚动字幕事件

1. onbounce 在marquee内的内容移动至marquee显示范围之外时触发此事件

2. onfinish 当marquee完成需要显示的内容后触发此事件

3. onstart 当marquee元素开始显示内容时触发此事件

编辑事件

1. onbeforecopy 页面当前的被选择内容将要复制到浏览者系统的剪切板前触发此事件
2. onbeforecut 当页面中的一部分或者全部的内容将被移离当前页面并移动到浏览者的系统剪切板时触

发此事件

1. onbeforeeditfocus 当前元素将要进入编辑状态时触发此事件
2. onbeforepaste 内容将要从浏览者的系统剪切板粘贴到页面中时触发此事件
3. onbeforeupdate 当浏览者粘贴系统剪切板中的内容时通知目标对象
4. oncontextmenu 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件
5. oncopy 当页面当前的被选择内容被复制时触发此事件
6. oncut 当页面当前的被选择内容被剪切时触发此事件
7. ondrag 当某个对象被拖动时触发此事件
8. ondragdrop 一个外部对象被鼠标拖入当前窗口时触发此事件
9. ondragend 当鼠标拖动结束时触发此事件
10. ondragenter 当对象被鼠标拖动的对象进入其容器范围内时触发此事件
11. ondragleave 当对象被鼠标拖动的对象离开其容器范围内时触发此事件
12. ondragover 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

• .stop 阻止事件冒泡
• .prevent 阻止事件默认行为
• .capture 修改事件冒泡顺序
• .self 只当事件在该元素本身 (比如不是子元素) 触发时触发回调
• .once 事件只执行一次

4,components底层原理

概念:
在vue 中一个组件，就是一个独立的.vue 文件，这个文件分为三部分。

• 1.模板
• 2.脚本
• 3.样式

使用:
定义好组件后，使用方法如下：

• 1.import 组件
• 1 import RxInput from ‘@/components/common/form/RxInput’;
• 2.注册组件
• 1 Vue.component( RxInput);
• 3.使用组件

xos-select解析

**分组功能相当于把 el-option 包了一层，那么这个时候el-option组件就相当于el-select组件的孙组件了，那么 el-option 和 el-select 组件就不能通过this.$parent通信了，为了兼容el-option为子组件或为孙组件的两种情况，使用inject和provide就很合适。

**其实是本地筛选功能，因此启用本地搜索功能需要传入 filterable字段而不是searchable，筛选功能真的很妙，前面也说过有多少选项就创建多少 el-option实例，因此当我们启用筛选得时候，只需要把和正则不匹配的 el-option 实例隐藏掉就可以了。代码如下（是不是比想象中的简单）：

如果我写这个组件，可能会这么使用 ，即 Select 组件的选项通过 options 传入组件。也许最后功能可以实现，但是这样做感觉有点封装过度了。从这个组件的结构来讲，和原生的select不太像。我们经常这样使用 Select 组件，是不是很直观：**

从代码结构也可以看到 select 组件里有个默认插槽，显示是没什么问题，但是考虑到 select 组件需要和 option 组件互相通信，比如 option 组件需要了解 select 组件是否多选，是否可以搜索等等，select 组件需要了解 option 组件的个数等等，如何做到呢？答案就是 inject 和 provide**