知识点9--零散知识点串讲-CSDN博客

本文链接：https://blog.csdn.net/dudadudadd/article/details/125659738

从本篇知识点开始，不再纯粹讲解vue的东西，因为它本身也是从原生js封装上来的，和jquery是同等的地位，而且有很多都是一些共性的东西，可以说你有jquery的基础在了解一些vue的开发方式其实大致上就八九不离十了，所以为了防止看知识点的朋友专注于vue而忘了它的本质仍然是js，本篇知识点开始往后整体上，不再单纯的讲解vue特性，而且vue没有多少单独的东西，往后的知识点会整体上多讲一讲开发中常用到的一些要点，不止有vue还有js本身自带的特性，本篇顺带着讲一些零碎的东西

箭头函数

vue的箭头函数其实就是js的匿名函数，如果有scala、python、java语言能力的应该都不陌生

(a,b)=>a+b

它的格式就是参数表达式 => 方法体

前端的全局和局部变量

在前端中我们写JS的时候，声明一个变量大家用的一般是var，但是从严格的开发手段上讲并不推荐大家每次声明变量的时候直接用var，因为var声明的是全局变量，let声明的才是更贴合我们使用的局部变量，所以我们能用let的就不要用var，很多时候全局变量对程序不友好

这里给大家一个例子，我们前端写个demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="./js/letdemo.js"></script>
	</head>
	<body>
		<h1>Hello Hbuilder</h1>
		
		<button>点我点我</button>
	</body>
</html>

在js脚本中我们写下如下代码

var x = 1;
{
	let a=10; //只在{}代码块有效 
	console.log("现在输出的是代码块中的a："+a);
	console.log("代码块中输出x："+x);
}
console.log("代码块外输出a："+a);
console.log("代码块外输出x："+x);

用浏览器打开并查看控制台
在这里插入图片描述
这个时候就会发现在代码块外输出局部变量时会报错

全局变量的使用提升

前端的全局变量有使用域提升的特点，而局部变量没有，通过一个demo开来解释

console.log("输出局部a："+a);
let a = 2;

浏览器可以看到如下效果，会报错告诉你没有这个变量
在这里插入图片描述
但是当你使用的是全局变量时，就不一样了

console.log("输出全局x："+x);
var x = 1;
console.log("输出全局x："+x);

可以看到第一次输出并不会报错，而是可以找到全局变量，只是会提示你，这个变量由于是提升上来的，在提升到这里时它还没有被赋值
在这里插入图片描述

模块

前端js的书写允许你将一个js以模块式开发，并在模块中声明可被直接调用的变量对象，这使得在使用不同的js时无需整个的导入js文件，通过demo我们来了解模块的使用

例如现有js脚本one，这里顺便说一点js本身也是一种解析式语言，且它的类型是弱检查的，所以它本身也是可以有对象的，且模块式开发可以让你用export声明可导出的变量

let person={
	name:'chenhj',
	sex:'M',
	age:34
}

let a=100;

let fun=(a,b)=>a+b;

export {person,a,fun}

此时准备一个two脚本，通过import {...} from path导入one模块的变量，注意导入时名字必须和模块中的名称一样，你可以导入时用as其名，但不可以直接改名字

import {person as p1,a,fun} from './one.js'

console.log(p1.name);
console.log(a);

console.log(fun(3,5));

准备一个页面直接导入two，注意如果你导入的js是一个模块式的开发方法，那么type要为module

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="module" src="./js/two.js"></script>
	</head>
	<body>
		<h1>Hello Hbuilder</h1>
		
		<div id="djs">10秒</div>

	</body>
</html>

看效果
在这里插入图片描述
在导入模块变量时注意，如果你导入的不是一个缺省变量，就一定要使用{}包裹，哪怕你只是导入一个也要有

这里说一下什么叫缺省变量，在一个模块中只允许存在一个缺省导出的声明，且缺省导出只允许导出一个变量，该变量相当于该模块导出的默认值，缺省导出的格式为export default 变量名，缺省导出使用方式如下

let person={
	name:'lisi',
	age:18,
	sex:'F'
};

var x=10;

export {x}

//缺省导出
export default person;

在你导入时就可以直接导入，并不需要同普通导入那样在意变量名

import {person as p1,a,fun} from './one.js'
//导入多个模块
import p from "./one_1.js" //缺省导入
import {x} from './one_1.js'

console.log(p1.name);
console.log(a);

console.log(fun(3,5));

console.log(p.name);
console.log(x);