开发积累总结

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. //1.基本用法（匿名函数加载）
2. export default function(){
3.     .......
4. }
5. ​
6. import custName from '....';
7. custName();
8. //注意：import后不要跟{}，可以用任意名称指向输出方法
9. ​
10. //2.用在非匿名函数前
11. export default function foo(){
12.    ........
13. }
14. //或者写成
15. function foo(){
16.    .......
17. }
18. export default foo;
19. //foo函数的名称foo，在模块外部是无效的，加载时视同匿名函数加载
20. ​
21. //3.加不加default的区别
22. //-----------加-----------
23. export default function foo(){}
24. import foo from '...';
25. //----------不加----------
26. export function foo(){}
27. import {foo} from '...';
28. //export default用于指定模块的默认输出，显然一个模块只能有一个默认输出，因此export default命令只能用一次，所以import命令后不加大括号，因为只可能唯一对应export default命令
29. ​
30. //4.export default输出有一个叫default的变量或方法，然后允许引用它的地方为他任意取名
31. export var a = 1;//success
32. export default 1；//success，本质是将后面的值赋值给default变量，所以可以直接将一个值写在export default之后
33. export default var a = 1;//error，解释:将变量a的值赋值给default，输出对象不对，报错
34. ​
35. //5.导出匿名函数和非匿名函数可以混合使用
36. import aa,{foo} from '....';
37. ​
38. //6.export default也可以用于输出类
39. export default class {....}
40. import MyCalss from '....';
41. let aa = new MyClass();

复制代码

声明变量

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

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

复制代码

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_0pswd_1第三次加密pswd_1pswd_tmp第四次加密登录名、realm、pswd_tmpencryptedPassword第五次加密encryptedPassword、随机数signature（署名） 3.第二次调用接口，传入登录名、signature（署名）、随机数、加密方式，调用成功返回token。

1. //生成token
2. export function getToken(params, quiet = false) {
3.     return new Promise(function(resolve, reject) {
4.         authorize(params, quiet)
5.             .then(response => {
6.            //第二次调用接口，接口调用成功，返回token
7.                 resolve(response.data);
8.             })
9.             .catch(Error => {
10.                 //第一调用接口，接口状态正常为401，返回三个参数
11.                //encryptType: "MD5"---加密类型
12.                 //randomKey: "8354322330355776"--随机数
13.                 //realm: "6D1FC3CE5434F7AAC2BD35244722DC1E5F"
14.                //----------------------
15.                 if (Error.response && Error.response.data.randomKey) {
16.                     resolve(Error.response.data);
17.                 } else if (Error.response) {
18.                     tokenTools.setPSIToken('')
19.                     reject(Error.response.data);
20.                 } else {
21.                     tokenTools.setPSIToken('')
22.                     reject(Error);
23.                 }
24.             });
25.     });
26. }

复制代码

slot和slot-scope

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

1. ​​​​​​​<!--父组件-->
2. <template>
3.  <div>
4.    <h3>这是父组件</h3>
5.    <son><span>实践slot</span></son>
6.    <son>
7.       <template slot="myslot">
8.           <!--将template的内容插在子组件中-->
9.          <div>实践具名slot</div>
10.       </template>
11.    </son>
12.  </div>
13. </template>
14. ​
15. <!--子组件-->
16. <template>
17.  <div>
18.    <h4>这是子组件</h4>
19.    <input type="text" placeholder="请输入">
20.    <slot></slot>
21.      <!--name是插槽的名称，具名插槽-->
22.    <slot name="myslot"></slot>
23.  </div>
24. </template>

复制代码

slot-scope（作用域插槽）

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

1. ​​​​​​​<!--父组件-->
2. <template lang="">
3.  <div>
4.    <h3>这是父组件</h3>
5.    <son>
6.        <!--slot将内容插入子组件，slot-scope获取子组件的值-->
7.      <template slot="myslot" slot-scope="scope">
8.        <ul>
9.          <li v-for="item in scope.data">{{item}}</li>
10.        </ul>
11.      </template>
12.    </son>
13.  </div>
14. </template>
15. ​
16. <!--子组件-->
17. <template>
18.  <div>
19.    <h4>这是子组件</h4>
20.    <input type="text" placeholder="请输入">
21.    <slot name="myslot" :data='list'></slot>
22.  </div>
23. </template>
25. <script>
26.  export default {
27.    name:'Son',
28.    data(){
29.      return{
30.        list:[
31.          {name:"Tom",age:15},
32.          {name:"Jim",age:25},
33.          {name:"Tony",age:13}
34.        ]
35.      }
36.    }
37.   }
38. </script>
39. <!--子组件-->

复制代码

起首，在子组件中的插槽上有一句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 有两个变化：

• 作用域插槽函数现在保证返回一个 VNode 数组，除非在返回值无效的环境下返回 undefined。
  
• 所有的 $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>标签下有多个节点存在。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告