你不知道的js
1.switch() 中的是条件和case 判断是=== 全等判断
2.break xxx;可以跳出一个代码块
!function(){foo:try{return 10;}catch(e){}finally{console.log("xxx");break foo;console.log("yyy")}}()
webpack-cli 依赖 webpack4.x.x
webpack 的安装webpack-cli 必须是全局的，不然运行webpack 命令时会提示安装webpack-cli,但是提示的是-d模式，即使安装了再次运行webpack还是会提示你安装webpack-cli；
配置文件 mode： development|production 表示编译模式
output 的path 值必须是 绝对路径，使用path.resolve(__dirname)+想要的路径即可，__dirname 是当前文件的路径，path.resolve是用来构建绝对路径的
在某个目录下执行webpack 就是默认 使用webpack.config.js 中的配置 调用webpack,也可以直接使用webpack api来调用
webpack.config.js
const path = require("path");
module.exports = {
entry:"./src/main.js",
output:{
filename:"[name].js",
path:path.resolve(__dirname, 'dist')
},
mode:"production"
}
package.json中 script可以加入
"start":"webpack webpack.config.js"
运行 npm start 即可。其他的脚本需要使用 npm run xx
node 目前不支持 import语法，但webpack打包的文件支持import，也支持import某个文件中的 单独的一项（但实际上整个文件都会先执行一遍，而且js文件也会全部引入）
单纯使用 webpack 编译出来的 dev js的结构是:
(function(modules){
xxxx
})({
"模块名":function(){"use strict" eval(模块代码)}//模块名 就是 import 时的 名字
})
webpack编译出来的js如果含有es6代码是不会转换成ES5的，但是转换的文件中使用了 Object.defineProperty 导致ie9以下无法使用，ie9以下能使用，可以手动将Object.defineProperty转换一下（或者有其他配置）
纯webpack 编译出来的 production 的js结构是
!function(e)
{}([function(){
依次摆放各模块的js
}])
同样由于使用了Object.defineProperty 不支持ie9，还有使用了 xx.保留字 低版本ie也不支持
在js中 import css文件 是在加载该js的时候，创建一个style 将css 放到style中，然后插入到页面中。需要在module中加入 style-loader ,css-loader
module:{
rules:[
{
test:/.css$/,//必须是正则
loader:["style-loader","css-loader"] //style-loader要在前面
}
]
}
引入css中引入图片必须使用 file-loader来处理,但是file-loader 处理后的图片 会直接和js放在同级目录下，会与css中的引用路径对不上
loader 的加载顺序是从右向左的，babel preset也是先加载后面的，loader 可以在import 的时候指定，配置的时候指定，
命令行中指定。
plugin 是webpack的支柱，webpack 本身就时构建在它的插件系统上的
引入vue-loader 和vue后就可以直接编译vue了
vue-loader 15版本后要伴随 VueLoaderPlugin 在vue-loader/lib/plugin中 在plugin中使用 ，vue后就可以直接构建vue了
注意vue 是在 import Vue from "vue/dist/vue.common.js" 中引入
使用 vue-cli 构建的系统，在去掉babel 后无法编译，{...object} 语法，但是单独使用webpack 又可以编译
new Vue ({})中使用 ...App,触发热替换会出错。热替换更改js，会刷新整个页面，更改css,和vue不会。猜测是css和vue是通过loader加载的 css没有经过loader
webpack 4 和webpack 3 ,webpack4 把cli 分开了分成了webpack 和webpack-cli，webpack-clic要全局安装
vue-loader 新版本需要 vue-loader/lib/plugin 需要这个插件
npm run 会运行 package.json 中的script 命令。并且自动加上./node_module/bin路径，bin目录都是可执行的脚本
ExtractTextWebpackPlugin 可以提前css ，但是目前不支持webpack4 可以使用bate版本 ExtractTextWebpackPlugin@next ,使用了这个插件就不要使用 style-loader 否则会报window is not deinfed
webpack 3和 和webpack-devServer2 配，webpack4和webpack-devServer 3配
gzip压缩可以大大压缩js，css的体积，至少会压缩一半。js匿名化压缩后再进行gzip压缩可以大大的减少体积
chrome 自动填充功能开启后，当页面新增了input后，会再次填充一次，会导致如果填充的密码不对，无法修改的情况产生
cssnano postcss 插件 uglifycss,uglify-js
https://www.sohu.com/a/131380036_374240
前台如何处理同时异步
代码风格缩进
cookie maxAge ：0 表示不储存，即发送给客户端后该cookie立马会失效，不会再发送给服务器，客户端js也拿不到这个cookie
负数表示，浏览器关闭就不存在了（同一个浏览器的所有窗口都关闭）
cookie domain 不设置 默认为当前域名，如果设置成和当前域名不同则不会写入cookie
cookie path 不设置 默认为当前目录，如果设置不是当前path或父路径 则不会写入cookie
-g 表示全局安装，通常用于安装脚手架等工具
–save(-s) 表示本地安装，会被加至dependencies部分
–save-dev 表示本地安装，会被加至devDependencies部分
什么都不加也会安装，但是不会加至package.json中
npm install 会安装packeage.json 中的的devpendencies 和devDependencies
npm install --protection 只会安装devpendencies中的文件
package-lock 是锁定了插件版本的，保证下载的版本完全一样。
whwier-lock.json 和 lock完全一样，不过wher-.lock可以发布
require 一个文件名如果不是以 ./,../开头的 会直接从当前目录的 node_module中查找，然后在父目录的node_module中查找，直到根目录，最后还会查找（NODE_APTH/node_module，不建议配置，会导致一些问题），
所以默认情况下，require是无法加载全局的package的，除非设置NODE_PATH环境变量
.npmrc 可以修改npm 的设置 也可以使用命令 npm config set key value,可以设置包注册地址 npm config set registy xxx，临时使用可以用 npm install --registy xx
cnpm 与npm相比已经完全无优势，可以弃用cnpm
webview 可能不支持定时器
webpack 打包时 plugin 会被打包进去
组件上绑定原生事件 要使用 .native,否则 需要组件内部 调用 $emit("事件命")触发，例如:
在 需要再myInput内部调用 $emit("click")才能触发
ref 是父组件调用子组件的一个入口，在父组件中使用 $refs.name 来调用，$refs.name 是组件实例或者dom元素，如果改变$refs.xx的值，xx是响应式的更改，不懂官网上说的ref不是响应式的意思是，ref="xxx"这个xxx只能是字符串，且不可拼接
iframe 内嵌的情况下，跨域情况下 如果iframe高度能展示全 点击锚点无法到对应的位置
uri 统一资源标识符 重点是标识 url统一资源定位符，重点是定位
每个url都是uri,url于uri的区别的url必须指明如何访问该资源，而uri无需执行
encodeURI 只会编码空格
encodeURIComponent 会编码任何特殊字符
事件处理函数在jquery 中 return false == e.stopPropagation()和e.prevendDefaut(),
在原生的 事件处理函数中:return false 无效果
新出一个 e.stopImmediatePropagation() = stopPropagation+用来阻止当前事件的其他处理函数 ie9+支持
navigator.onLine 判断是否有网络，ie6+都支持，还有window online和offline事件
weakSet和weakMap 弱set和弱map weakSet只能装引用类型，weakMap的key只能是引用类型，weakSet和weakMap的使用场景是可以被自动回收的对象如 dom节点。
weakSet和weakMap是不遍历的，因为垃圾回收机制会不时的删除内部对象，所以遍历不合适。
set和map是强引用，即使内部的数据被删除，也不回被垃圾回收机制回收
generator.next()传参会传给上一个 yiel，generator.throw 会再 function*()内捕获，但是必须先调用一次next，generator.return 会终止迭代，且return的参数作为value返回值
localStorage sessionStorage 在ie8支持，ie上必须是http方式的访问才能使用。localStorage 永远保存的，除非手动删除，localStorage同一个域名下的都可以访问，https://host:port 只要是该域名下的都可以访问。
sessionStorage 是页面级别的，只对当前页面有效，浏览器关闭或者重新打开新的tal页无法共享，页面跳转后再后退回来仍可以取值。
webview 无法获取标题，可以通过改标题后加载一个iframe 来让webview识别
eventSource 前端创建一个 eventSource 对象监听 messge，error 事件
var eventSource = new EventSource("/api")
eventSource.addEventListener("message",function(data){
console.log(data);
})
eventSource.addEventListener("error",function(data){
console.log(data);
})
后端 处理api 请求时需要将 head:ContentType 设置为 'text/event-stream'
res一定要是write ，如果,send 就表示这个请求结束了，链接会断开，客户端会重新发请求
数据格式是: “key:value
”形式
发出去
也可以指定 event，前端去监听该event res.write("event:get
"),前端使用 eventSource.addEventListener("get",function(){})来监听，不指定默认用 message
链接断开后会触发 error 事件，然后客户端会间隔3秒（chrome3秒）再次发请求
res.setHeader('Content-Type', 'text/event-stream');
setInterval(function(){
res.write("data: The server time is"+new Date()+"
");
},5000);
样式总结:
fixed float absolute 会导元素无法自动填充页面，fixed 元素固定在顶部或底部会导页面部分元素被覆盖，一个办法就是第一个元素和最后一个元素
写margin-top 或padding-top,margin-bottom,或padding-bottom来实现，第一个元素的margin-top会和父元素（无border-top或padding-top）的margin-top合并，表现为body出现margin-top
fixed absolute等脱离文档流的元素，不写left,right,top,bottom，会默认在为static的位置上，但是其他元素无感知，如果后面又其他元素会覆盖在其他元素上
float 元素挤走相邻的inline ,inlin-block元素 ，及挤走相邻包裹在block元素内的inline,inline-block元素
float 相邻的是block元素时，float元素会浮在block上，实际上block元素还是占满一行的
使用float 自适应时，写margin-left/right 要写在float元素上
使用autoprefixer 可以解决flex兼容问题，旧版的flex flex=1在原本是行内元素的标签（a,span）上太不生效,要改成div
var browserList = ["> 0.00001%"];
const autoprefixer = require("autoprefixer")({
flexbox:true,
browsers:browserList
})
一排inline元素里放字母，会被认为是一串单词，例如 <div><span>a</span>
<span>a</span>
<span>a</span>
<span>a</span>
<span>a</span>
<span>a</span>
</div> 如果不指定换行，span不会换行
等高布局：负margin -bottom,right不会影响元素本身，只会影响他右或下的元素向它靠
负 margin -top,left 会导致元素本身发生偏移
1。负的 margin-bottom，加上正的等值 padding-bottom，父元素overflow hidden,父元素就会被子元素实际内容最高的撑高，只要，这个
父边距足够大，就能完全实现等高布局
2.使用flex 布局
.babelrc 只是webpack 配合babel-loader 来回自动调用
webpack import() 动态导入，在webpack3 时，引入stage-2 既可以解决报错，在webpack4 中使用插件@babel/plugin-syntax-dynamic-import 也可以解决报错，
这两个并没有转换 import()语法，只是让babel能识别import()，
不要使用 babel-plugin-dynamic-import-webpack 这会使 import() 被转换成require.ensure语法，这是一种倒退。
webpack 转换的js 不兼容ie8，有诸多问题，如default，等关键字作为属性在ie8中是不允许的，所以打算用webpack 就不要考虑能兼容ie8了
background-origin 是指背景图片的起始位置，背景色的起始位置不变
backgroun-clip 是对背景进行裁剪，即隐藏掉部分，box-border box-padding box-content box-content 表示只保留content上的背景，其他背景都cut掉，不展示
背景色的起始位置是border ,背景图片是padding
word-wrap 和word-break word-wrap：break-word 如果放不下的另起一行，一个单词一行都放不下，就会被拆分开来，word-break：break-all，每行都占满，放不下的强行拆开
resize:both 和overflow:auto 一起用才能显示用户拖动的
事件委托 on 是将事件绑定在委托对象上，然后点击事件在委托对象上发生时，获取e.target，循环获取target的父元素判断是否有事件委托在对象上，从而达到先执行子元素绑定的事件，再执行父元素的事件
据说老的浏览器上，click有延时，所以使用tap事件代替(tap事件就是判断，touchstart 和touchend 之间的时间间隔和触摸位置变化)，但是tap事件有点透bug(比如，有个蒙尘tap就关闭，蒙尘下面是一个按钮，由于真正的click还在延时中 ，导致蒙尘下面的按钮会触发click)，据说新版本已修复，终极解决方案是fastClick，
但是：
Android版Chrome 32+浏览器，如果设置viewport meta的值为width=device-width，这种情况下浏览器会马上出发点击事件，不会延迟300毫秒，
所有版本的Android Chrome浏览器，如果设置viewport meta的值有user-scalable=no，浏览器也是会马上出发点击事件。
实测 在网页中加入 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 不会有点击延时，如果不加入这一段就会有点击延时，大概300ms左右，
现在一般网页都设置了viewport 所以不需要fastclick了，也不必关注300ms的延时
safair 上也测试了，加上viewport不会有点击延时，不加viewport会有300ms的延时
mouseover和mouseenter（不冒泡）
pointer-event:none 就是不触发鼠标事件，其子元素也不触发。
如果 pointer-event:none 的元素覆盖了一个兄弟元素，鼠标是可以点击到这个兄弟元素的
moment 一款多语言展示日期库
webpack.BannerPlugin 是在cunk中加注释的插件
new webpack.BannerPlugin({
"banner":"bannerplugintest"
})
webpack.ContextReplacementPlugin 是用来处理require(`../lang/${lang}.js`)这种不指定具体js的，它可以覆盖路径或者进行过滤、
也可以处理 import(),require.ensure 不确定路径问题
打包lang路径下的js时，只打包匹配 /zh/的
new webpack.ContextReplacementPlugin(/lang/,/zh/)
ClosureWebpackPlugin 是基于google closure tool 的js优化工具，不仅仅是对js的压缩功能还有语法分析去除不必要的代码
不使用任何插件只有入口chunk,
import("")或require.ensure 导入的是动态导入的会被 打包成一个单独的chunk 被称为子chunk
cunkId默认是 按chunk数递增的，加入 NamedChunksPlugin 会将chunk用moudle名命名
默认的moudldId 是 从0开始递增的，使用 namedMoudle 会将模块路径作为moudleid
使用 HashedModuleIdsPlugin 会将文件的hash作为moudleid 用在生产环境会很好
commonChunksPlugin
{
name: string, // or
names: string[],
// 这是 common chunk 的名称,如果这个chunk已经存在就会将common chunk和 该chunk内容打包到一起。
// 如果一个字符串数组被传入，这相当于插件针对每个 chunk 名被多次调用，就相当于
调用多个commonChunkPlugin
例如:commonChunkPlugin({
names:["test1","test2"]
})
等价于:
commonChunckPlugin({
name:"test1"
}),
commonChunkPlugin({
name:"test2"
})
这里得看看commonChunkPlugin 源码
多个commonChunkplugin时，第一个会提取出公共的模块，第二个会提取出wepack 的引导代码(一些辅助方法的定义，webpackJsonp...)，mainifest
最多定义两个commonChunkPLugin 只有第一个和最后一个生效
// 如果该选项被忽略，同时 `options.async` 或者 `options.children` 被设置，所有的 chunk 都会被使用，
// 否则 `options.filename` 会用于作为 chunk 名。
// When using `options.async` to create common chunks from other async chunks you must specify an entry-point
// chunk name here instead of omitting the `option.name`.
filename: string,
// common chunk 的文件名模板。可以包含与 `output.filename` 相同的占位符。
// 如果被忽略，原本的文件名不会被修改(通常是 `output.filename` 或者 `output.chunkFilename`)。
// This option is not permitted if you're using `options.async` as well, see below for more details.
minChunks: number|Infinity|function(module, count) -> boolean,
// 在传入 公共chunk(commons chunk) 之前所需要包含的最少数量的 chunks 。
// 默认是数量必须大于等于2 且 等于 chunks的数量 才会将入口chunk中的模块提取出来，只有一个入口chunk不会提取模块，除非设置为1
// 传入 `Infinity` 会马上生成公共chunk，但里面没有模块，只有webpack的辅助引导方法
// 你可以传入一个 `function` ，以添加定制的逻辑
传入1 的话，每个入口chunk中的模块都会被打包在一起
chunks: string[],
// 通过 chunk name 去选择从哪个chunk 中提取 commonchunk
// 如果被忽略，所有的，所有的 入口chunk (entry chunk) 都会被选择。
children: boolean,
// 如果设置为 `true`，所有入口 chunk 的子模块都会被选择
每个入口chunk的子chunk算一组，只提取每个入口文件中子chunk中的公共代码
如果有两个入口chunk,app，vender,
会分别提取出app中子chunk的公共代码
vernder子chunk的公共代码，
vender 和app 的子chunk相互不干扰 ，minkchuks 只会计算单个子chunk的
所谓子模块就是 动态导入的模块，非动态导入的不算子模块，
name
deepChildren: boolean,
// 如果设置为 `true`，所有公共 chunk 的后代模块都会被选择
async: boolean|string, 如果是字串且有nameChunkIDPlugin ，生成的的fileName就是async的名字
// 如果设置为 `true`，一个异步的 公共chunk 会作为 `options.name` 的子模块，和 `options.chunks` 的兄弟模块被创建。
不可以与name并存，有name选项时 async不会有任何效果
// 它会与 `options.chunks` 并行被加载。
// Instead of using `option.filename`, it is possible to change the name of the output file by providing
// the desired string here instead of `true`.
minSize: number,
// 在 公共chunk 被创建立之前，所有 公共模块 (common module) 的最少大小。
单位是byte,如果公共chunk没有达到这个值，不会被提取出来
}
output.libary ，和output.libaryTarg可以代码打包成各中规范的代码 amd,cmd,commonjs或是直接在script中引用的
可以供非node环境的代码使用
webpack4 splitChunks 必须指定 chunks 才会分割