开发积累总结

export default 和export const

均用于从模块导出函数、对象或原始值，区别在于：

export default：一个文件中只能有一个，为默认导出，在引用时指定名字。

export const：一个文件中有多个，为命名导出,普遍用于导出不变的值。

Map

const m = new Map();

m.set('key','value');

npm install 和 yarn install

npm install 在node.js下载时已一同安装，yarn install需要另行下载安装。两个都是JS包的管理工具。yarn是为了解决npm的一些缺陷才出现的。

yarn优点：并行安装、离线模式（已经安装的包在缓存中获取）、版本锁定（解决包之间版本不兼容问题）、简洁输出

npm对比：依次安装、运行输出较多

vue 报错 ReferenceError: exports is not defined

原因：webpack 2后不允许混合使用import 和module.exports。

修改方案：

1.统一改成es6写法：export default XXX;

2.找到.babelrcf文件删除transform-runtime。

es6的export方法

//1.基本用法（匿名函数加载）
export default function(){.......
}
​
import custName from '....';
custName();
//注意：import后不要跟{}，可以用任意名称指向输出方法
​
//2.用在非匿名函数前
export default function foo(){........
}
//或者写成
function foo(){.......
}
export default foo;
//foo函数的名称foo，在模块外部是无效的，加载时视同匿名函数加载
​
//3.加不加default的区别
//-----------加-----------
export default function foo(){}
import foo from '...';
//----------不加----------
export function foo(){}
import {foo} from '...';
//export default用于指定模块的默认输出，显然一个模块只能有一个默认输出，因此export default命令只能用一次，所以import命令后不加大括号，因为只可能唯一对应export default命令
​
//4.export default输出有一个叫default的变量或方法，然后允许引用它的地方为他任意取名
export var a = 1;//success
export default 1；//success，本质是将后面的值赋值给default变量，所以可以直接将一个值写在export default之后
export default var a = 1;//error，解释:将变量a的值赋值给default，输出对象不对，报错
​
//5.导出匿名函数和非匿名函数可以混合使用
import aa,{foo} from '....';
​
//6.export default也可以用于输出类
export default class {....}
import MyCalss from '....';
let aa = new MyClass();

声明变量

js是弱类型语言，无需声明可直接使用，默认是作为全局变量使用的。

var a = 1;
a = 1;
//两种写法，但是等效

webpack下载依赖的三种形式

dependencies

常用依赖，这些依赖最终都会构建到部署环境中。

devDependencies

开发中的依赖，比如eslint，包含一些线上包不适用的依赖

peerDependencies

目的是提示宿主环境去安装满足插件peerDependencies所指定依赖的包，然后在插件import或者require所依赖的包的时候，永远都是引用宿主环境统一安装的npm包，最终解决插件与所依赖包不一致的问题。

npm2 vs npm3

在npm2中，PackageA包中peerDependencies所指定的依赖会随着npm install PackageA一起被强制安装，所以不需要在宿主环境的package.json文件中指定对PackageA中peerDependencies内容的依赖。

但是在npm3中，npm3中不会再要求peerDependencies所指定的依赖包被强制安装，相反npm3会在安装结束后检查本次安装是否正确，如果不正确会给用户打印警告提示。举例，如果我们npm install PackageA安装PackageA时，你会得到一个警告提示说：PackageB是一个需要的依赖，但是没有被安装。 这时，你需要手动的在MyProject项目的package.json文件指定PackageB的依赖。

同源窗口共享

sessionStorage用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后将会删除数据，所以在不同的浏览器窗口数据是不共享的。但是，可以通过跳转页面实现两个界面的数据共享

而localStorage和cookie则是在所有同源（协议、域名、端口一致）窗口中都是共享的。同时，数据共享必须在相同浏览器。

CSS transparent属性

transparent代表全透明黑色，即rgba（0,0,0,0）。

CSS outline属性

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

user agent stylesheet

User Agent Stylesheet（浏览器默认样式）

User Agent Stylesheet属于浏览器的默认样式，如果不满意该样式最简单的解决方案是重新设置该样式，因为User Agent Stylesheet的优先级很低，可以被覆盖。

element UI

element ui适用于vue2.0版本，element plus适用于vue3.0版本，所以它的底层开发语言也是vue3.0

MD5加密方式

MD5是一种信息摘要算法，它可以从一个字符串或一个文件夹中按照一定规则生成一个特殊的字符串。

特点：MD5算法不可逆，内容相同无论执行多少次md5生成结果始终是一致的，但是当文件有细微的变化，生成的md5会有非常大的不同。

流程：1.请求接口返回获得加密类型、realm和随机数

2.公安MD5的五次加密混淆

加密轮次	传入数据	返回值
第一次加密	登录密码	pswd_0
第二次加密	登录名、pswd_0	pswd_1
第三次加密	pswd_1	pswd_tmp
第四次加密	登录名、realm、pswd_tmp	encryptedPassword
第五次加密	encryptedPassword、随机数	signature（签名）

3.第二次调用接口，传入登录名、signature（签名）、随机数、加密方式，调用成功返回token。

//生成token
export function getToken(params, quiet = false) {return new Promise(function(resolve, reject) {authorize(params, quiet).then(response => {//第二次调用接口，接口调用成功，返回tokenresolve(response.data);}).catch(Error => {//第一调用接口，接口状态正常为401，返回三个参数//encryptType: "MD5"---加密类型//randomKey: "8354322330355776"--随机数//realm: "6D1FC3CE5434F7AAC2BD35244722DC1E5F"//----------------------if (Error.response && Error.response.data.randomKey) {resolve(Error.response.data);} else if (Error.response) {tokenTools.setPSIToken('')reject(Error.response.data);} else {tokenTools.setPSIToken('')reject(Error);}});});
}

slot和slot-scope

vue插槽分为两类：默认插槽（没有名称的插槽）和具名插槽（有名称的插槽）。

​​​​​​​<!--父组件-->
<template><div><h3>这是父组件</h3><son><span>实践slot</span></son><son><template slot="myslot"><!--将template的内容插在子组件中--><div>实践具名slot</div></template></son></div> 
</template>
​
<!--子组件-->
<template><div><h4>这是子组件</h4><input type="text" placeholder="请输入"><slot></slot><!--name是插槽的名称，具名插槽--><slot name="myslot"></slot></div>
</template>

slot-scope（作用域插槽）

注意：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。即父组件不能直接使用子组件中定义的data数据，而slot-scope解决了这个问题。

​​​​​​​<!--父组件-->
<template lang=""><div><h3>这是父组件</h3><son><!--slot将内容插入子组件，slot-scope获取子组件的值--><template slot="myslot" slot-scope="scope"><ul><li v-for="item in scope.data">{{item}}</li></ul></template></son></div> 
</template>
​
<!--子组件-->
<template><div><h4>这是子组件</h4><input type="text" placeholder="请输入"><slot name="myslot" :data='list'></slot></div>
</template><script>export default {name:'Son',data(){return{list:[{name:"Tom",age:15},{name:"Jim",age:25},{name:"Tony",age:13}]}}}
</script>
<!--子组件-->

首先，在子组件中的插槽上有一句data="list"，而在父组件中也有slot-scope="scope"，slot-scope就是取data的值，slot-scope的值是自定义的，我们可以取任何名称，但是data的值传过来时是以对象形式传输的，所以在这scope.data才是list的值。

这样我们就可以在父组件中取到子组件的值，并且加以应用了。

注意：v-slot是的简写形式#

v-slot，一种新的统一语法，替代具名插槽和默认插槽。

$slots和$scopedSlots

$slots

只读属性，用来访问被插槽分发的内容。每个具名插槽有其相应的 property (例如：v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到)。default property 包括了所有没有被包含在具名插槽中的节点，或 v-slot:default 的内容。

请注意插槽不是响应性的。如果你需要一个组件可以在被传入的数据发生变化时重渲染，我们建议改变策略，依赖诸如 props 或 data 等响应性实例选项。

注意：v-slot:foo 在 2.6 以上的版本才支持。对于之前的版本，你可以使用废弃了的语法。

在使用渲染函数书写一个组件时，访问 vm.$slots 最有帮助。

$scopedSlots

只读属性，用来访问作用域插槽。对于包括 默认 slot 在内的每一个插槽，该对象都包含一个返回相应 VNode 的函数。

vm.$scopedSlots 在使用渲染函数开发一个组件时特别有用。

注意：从 2.6.0 开始，这个 property 有两个变化：

1. 作用域插槽函数现在保证返回一个 VNode 数组，除非在返回值无效的情况下返回 undefined。

2. 所有的 $slots 现在都会作为函数暴露在 $scopedSlots 中。如果你在使用渲染函数，不论当前插槽是否带有作用域，我们都推荐始终通过 $scopedSlots 访问它们。这不仅仅使得在未来添加作用域变得简单，也可以让你最终轻松迁移到所有插槽都是函数的 Vue 3.

Multiple root nodes returned from render function. Render function should return a single root node.

从呈现函数返回多个根节点。渲染函数应该返回一个根节点。

在Vue2中不允许<template>下有多个根节点存在，需要设置一个div将节点都包起来，在Vue3中则允许<template>标签下有多个节点存在。