05：模板化开发

三思原创大约 6 分钟

本文介绍了JavaScript中匿名函数的概念及应用场景，提出使用模块化来解决重名问题，并介绍了浏览器端和服务器端的模块化分类，包括AMD、CMD等模块化方式。

Vue自学笔记5：模板化开发

本文章为观看B站codewhy老师教学视频自学vuejs过程中记录的笔记，对视频进行了清晰的整理。

(帮大家节省自己整理笔记的时间啦,剩下的时间一定要去上机实操,多多练习!!)

四、模板化开发

1. JavaScript原始功能

2. 匿名函数的解决方案

该方案虽然解决了重名问题,但是使得函数,变量变得不可复用

什么是匿名函数:

匿名函数顾名思义指的是没有名字的函数，在实际开发中使用的频率非常高！也是学好JS的重点。
匿名函数：没有实际名字的函数。

首先我们声明一个普通函数：
//声明一个普通函数，函数的名字叫fn
function fn(){
    console.log("小张");
}

然后将函数的名字去掉即是匿名函数：
//匿名函数，咦，运行时，你会发现报错啦！
function (){
    console.log("小张");
}

到此，你会发现单独运行一个匿名函数，由于不符合语法要求，报错啦！解决方法只需要给匿名函数包裹一个括号即可：

//匿名函数在其它应用场景括号可以省略
(function (){
    //由于没有执行该匿名函数，所以不会执行匿名函数体内的语句。
    console.log("小张");
})

如果需要执行匿名函数，在匿名函数后面加上一个括号即可立即执行！
(function (){
    //此时会输出小张
    console.log("小张");
})()

倘若需要传值，直接将参数写到括号内即可：
(function (str){
    //此时会输出小张好帅！
    console.log("小张"+str);
})("好帅！")

匿名函数的应用场景:

此处应用到的是场景6

1、事件
<input type="button" value="点我啊！" id="sub">
<script>
    //获得按钮元素
    var sub=document.querySelector("#sub");
    //给按钮增加点击事件。
    sub.onclick=function(){
        alert("当点击按钮时会执行到我哦！");
    }
</script>

2、对象
var obj={
    name:"小张",
    age:18,
    fn:function(){
        return "我叫"+this.name+"今年"+this.age+"岁了！";
    }
};
console.log(obj.fn());//我叫小张今年18岁了！

3、函数表达式
//将匿名函数赋值给变量fn。
var fn=function(){
    return "我是一只小小小小留下，怎么飞也飞不高！"
}
//调用方式与调用普通函数一样
console.log(fn());//我是一只小小小小留下，怎么飞也飞不高！

4、回调函数
setInterval(function(){
    console.log("我其实是一个回调函数，每次1秒钟会被执行一次");
},1000);

5、返回值
//将匿名函数作为返回值
function fn(){
    //返回匿名函数
    return function(){
        return "小张";
    }
}
//调用匿名函数
console.log(fn()());//小张
//或
var box=fn();
console.log(box());//小张


6、模仿块级作用域
块级作用域，有的地方称为私有作用域。JavaScript中是没有块级作用域的，例如：
if(1==1){//条件成立，执行if代码块语句。
    var a=12;//a为全局变量
}
console.log(a);//12

for(var i=0;i<3;i++){
    console.log(i);
}
console.log(i);//4

if(){}for(){}等没有自己的作用域。如果有，出了自己的作用域，声明的变量就会立即被销毁了。但是咱们可以通过匿名函数来模拟块级作用域：
(function(){
    //这里是我们的块级作用域（私有作用域）
})();

匿名函数的作用：

1、通过匿名函数可以实现闭包，关于闭包在后面的文章中会重点讲解。在这里简单介绍一下：闭包是可以访问在函数作用域内定义的变量的函数。若要创建一个闭包，往往都需要用到匿名函数。

2、模拟块级作用域，减少全局变量。执行完匿名函数，存储在内存中相对应的变量会被销毁，从而节省内存。再者，在大型多人开发的项目中，使用块级作用域，会大大降低命名冲突的问题，从而避免产生灾难性的后果。自此开发者再也不必担心搞乱全局作用域了。

3. 使用模块化为出口

3.1 模块化最基础的封装:

3.2 模块化的分类

A.浏览器端的模块化

1).AMD(Asynchronous Module Definition,异步模块定义)
    代表产品为：Require.js
2).CMD(Common Module Definition,通用模块定义)
    代表产品为：Sea.js

B.服务器端的模块化

服务器端的模块化规范是使用CommonJS规范：
1).使用require引入其他模块或者包
2).使用exports或者module.exports导出模块成员
3).一个文件就是一个模块，都拥有独立的作用域

语法演示:

前提:要配好node环境,在底层才能解析

C.ES6模块化(重点)

ES6模块化规范中定义：
1).每一个js文件都是独立的模块
2).导入模块成员使用import关键字
3).暴露模块成员使用export关键字

小结：推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范.

3.3 ES6模块化(重点掌握)

实例:

1) export的使用

var name = '小明'
var age = 19

//1.导出方式一:以对象的形式导出
var flag = true
function sum(num1, num2) {
    return num1 + num2
}
export {
    flag,
    sum
}

//2.导出方式二:定义变量的时候直接导出
export var num1 = 1000
export var height = 1.88

//3.export default(上面两种导出方式在import时必须同名,使用default在import时可以自定义命名)
const address = '中国'
export default address //可以写成import addr from "./aaa.js",addr为自定义命名
//注意:每个文件里只能有一个default!!!

//-----------------------------------

//a.导出函数function
//以导出方式二为例导出
export function add(num1, num2) {
    return num1 + num2
}

//b.导出类class(es6中类)
//以导出方式二为例导出
export class person {
    run() {
        console.log("我在奔跑")
    }
}

2) import的使用

// 1.导入export的{}中定义的变量
import { flag, sum } from "./aaa.js"
if (flag) {
    console.log("小明是天才，哈哈哈");
    console.log(sum(1, 2))
}

// 2.导入export定义的变量
import { num, height } from "./aaa.js"

// 3.导入export的function
import { add } from "./aaa.js"

// 4.导入export的class
import { person } from "./aaa.js"
const p = new person //通过导入的person类实例化p对象
p.run()  //执行p中的run方法

// 6.统一全部导入
import *as abc from "./aaa.js"
console.log(abc.name);
console.log(abc.age);