模块化编程

一、简介

1.什么是模块？

• 每个.js文件就是一个模块

• 从npm上下载的一个包（可能是由多个文件组成的一个实现特定功能的包）也是一个模块

• 任何文件或目录只要可以被Node.js通过require()函数加载的都是模块

• 每个模块就是一个独立的作用域，模块和模块之间不会互相"污染"

• 我们可以通过编程的方式，指定某个模块要对外暴露的内容（其实就是指定require的返回值，通过require的返回值对外暴露指定内容）。这个对外暴露内容的过程也叫"导出" module.exports

2.模块化的好处

• 模块和模块之间不会出现变量"污染"，一个模块就是一个作用域，即不同的模块可以用a做变量，但是不会互相影响

• 模块化开发效率高、可维护性好

• 模块化可以做到职责分离，每个模块实现一个独立的功能

二、运用

1.通俗点讲，模块化就是将复杂的js文件分开来写，在一个js文件中去调用另一个js文件的属性或方法

2.在模块件的调用联系的时候，需要把一个模块暴露出去module.exports，然后在另一个模块中去接收require()

3.例子

(1)暴露

module.exports = { json数据 }

function max(a,b){
    let max = a;
    if(max < b){
        max = b;
    }
    console.log(`最大值为：${max}`);
    return max;
}
//箭头函数
const min = (a,b) => {
    let min = a;
    if(max > b){
        min = b;
    }
    console.log(`最小值为：${min}`);
    return min;   
}
//将函数暴露出去
module.exports = {
    //在es6新语法中规定，当属性和值的名称相同时，可以只写一个
    max : max,  //也可以简写 max
    min   // 等价于 min:min
}

(2)接收暴露出来的模块

定义一个常量或变量接收，const 常量= require('暴露出来的模块的路径');

//接收暴露出来的js,
const minAndmax = require('./getMinAndMax.js');
//调用暴露出来的模块的方法
minAndmax.max(10,20);
minAndmax.min(33,52);

三、文件操作-读写文件

1.读文件

• .readFileSync('文件地址')同步读取
• .readFile('文件地址'，回调函数(错误信息，读取文件返回的数据)) 异步读取
• require("fs")这里的fs为nodejs中内置的文件模块

const fs = require("fs");   //引入nodejs内置文件模块

//同步读取文件
// let text =  fs.readFileSync('./text.txt'); //将读取的文件赋值给一个变量
// console.log(text.toString());   //将变量内容转换成字符串并打印出来

/**
 * 异步读取文件语法：
 *  .readFile(文件地址，回调函数(错误信息，读取文件返回的数据))
 */
console.log("读取文件之前");
fs.readFile('./text.txt',(err,text) => {
    console.log("读取文件完成：",text.toString());
})

2.写文件

• .writeFileSync('文件路径','写入的内容')

const fs= require("fs");    //引入nodejs内置文件模块
/**
 * 写文件语法：
 *     .writeFileSync('文件路径','写入的内容') 
 */
writeFile.writeFileSync('./text.txt','welcome to nodejs runtime');

四、异步与同步

• 同步是指：当程序1调用程序2时，程序1停下不动，直到程序2完成回到程序1来，程序1才继续执行下去

• 异步是指：当程序1调用程序2时，程序1径自继续自己的下一个动作，不受程序2的的影响

五、es6部分新语法

1.箭头函数

（1）箭头函数语法：

//  => 箭头左边括号写入参数，右边大括号写入语句
const 变量名 = () => {}

const getMax = (a,b) => {
    let max = a;
    if(a < b){
        max = b;
    }
    return max;
}
let maxNum = getMax(11,22);
console.log(`最大值为：${maxNum}`);

（2）箭头函数的简写

• 若函数语句只有一句代码，可以省略大括号

const add = (a) => console.log(`这是加法函数;${a++}`);

• 若函数语句只有一句代码，并且是一个返回值的话，可以省略大括号和return

const returnNum = () => 30;

2.模版字符串

• 用反引号(`)标识，它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量

（1）打印语句中使用

（``）语句之间是打印内容，若要打印变量值，用${变量}将变量包裹起来

let sum = (n) => {
    if(n == 1){
        return 1;
    }else{
        let m = n + sum(n-1);  
        return m;    
    }
}
console.log(`>>>>>和为：${sum(5)}`);

• （2）创建子组件时使用

（``）语句之间为创建的子组件的内容

Vue.component("div-ele",{
      props: ["students","index"],     //接收父组件传递的参数
      template: `<div>
                   <p>{{students[index].id}}</p>
                   <p>{{students[index].name}}</p>
                   <p>{{students[index].age}}</p>
                </div>`  //这里的p-ele标签中打印出父组件传递的参数
})