day04【项目前端相关基础知识二】/10-尚硅谷-谷粒学院-前端技术-模块化操作（es5写法）

就是先演示ES5怎么做模块化，这个过程咱先大概看一遍，然后给它一次性写完，首先第一部分的咱可以写个JS文件，比如里边的你可以写几个方法啊，这是我写那个就是就是加减乘除方法，然后写完之后在这个文件中呢，咱需要写这段代码，就写一个叫model export。然后这什么意思呢？你可以这么理解，就是现在因为我这方法一会儿要被别的宅调用，咱就指定哪些方法可以被别人调，就你在里边写的方法才能被别人调，如果你这里边不写这方法，别的宅词是调不到的啊，这是他的第一部分，然后写完之后，咱在另一个摘中想去调离方法，那怎么做呢？跟咱Java中类似，先把它块引入进来，然后再去调练方法，最终执行就可以了啊。主要这个过程就是先写一个方法，然后指定哪些方法可以被别的文件调用，咱在调的时候先引入再调用啊。

这么做这个过程就可以实现出来啊，所以咱们现在就是这么来做啊。那下面我把这个给大家，我就最终来写一下，关于这个叫做模块化啊。来试一下啊。比如说为了明显啊，首先这我先关掉，我在里边呢，再来建个文件夹，文件夹就是模块化，我叫这个model DEMO。啊，DEMO mode DEMO啊，然后借完之后，按照我刚才说的，咱现在这个项目是不是都要做个初始化呀，所以咱们先来个初始化命令，咱用过很多次了啊，我就直接写了。NP minit-Y。推车先把项目做个初始化啊，这个可以做到，然后做到之后呢，在里边为了明显我再建个文件夹，比如我叫这个ES5啊，这个model。

这个啊，在里边我们写ES5代码，然后写完之后里边我写两个文件，比如说一个零一.js。再来一个叫零二.js啊，写两文件，然后咱一会儿做调用，那写完之后在里边我们要怎么写，比如现在不是这个啊，先清平一下啊，比如现在我在这个零一里边，我们写上几个方法，然后在零二中去调零一中的方法，咱就这么来做啊，写一下啊，零一里边我们就是创建。这次方法这是第一个，然后在零二里边，我们就去调用零一.js。里边的方法啊，这是我们要做的这么一个过程啊，这是咱们要这么来写啊。我把这个给大家。截到我这里面来啊，再用这个例子来说。就这张图，然后在里边我们要做的事情就是在。零一.js里边，咱们就是定义JS方法，然后我们在零二.j里边。

调用零一.gs里边的那个方法啊，主要把这个过程我们做一个实验，那咱下面就来具体写一下，看怎么做啊，首先我先定义方法，但是方法可以随便定义啊，我就从课件中直接复制了。比如说我就咱就复制两个方法，把这两个拿过来。直接这两个方法，当然你可以写其他方法啊，这是只是做这个测试，然后方法中我们看一下啊，我这是一种写法，第一个方法名字叫sum，它做的就是两个参数的相加，第二个方法做的是两个参数相减，就是一个加一个减，然后里边写了一个叫pass in，就变成一个整数类型，做相加，做相减啊，这是我们写的两个方法。这是它里边的第一部分啊，点于定义，然后定义之后我们下面在零二中要调这个方法，但是我强调默认情况下这方法是调不到的，他就好比说这方法相于咱炸药中那个private私有的调不到，那我需要让他被别人调到，怎么做呢？咱需要做个设置，就设置你的哪些方法。

可以被其他的JS调用啊，需要做个设置，那怎么设置里边有个代码，要这个model.p然后加上这个纸啊，那我写一下啊，就是model。点is post啊，我直接复制啊，点is post，然后后面加个大括号在里边呢，写上你设置的那个被别人可以调的方法，咱就直接写方法名字，比如说有一个sum，这是一个，还有一个是这个就是减的方法。这两个写出来啊，一个加一个减，这句话就表示这两个方法可以被别的调用，如果你不设置，那别的解调不到啊，这是它的第二部分，就是第一部分啊，定义你的方法。

然后第二步设置哪些方法被别的这样一次调用啊，在我课件中两种写法，这是完全写法，这是简写啊，因为它简写就是。包含名字就可以了啊，你直接这么写就足够了，所以这个在01点这中我们就完成了这部分啊，主要。就这么来做啊。这咱们就写完了啊。我把这个给大家先复制过来啊。就分到这个位置，就在我们那个。零一.gs里边那个代码啊，它的代码就是里边的。第五分啊。呃，换个颜色啊，就是这部分啊。然后这个写完之后，下面咱再写那个就是零二.s因为我们在零二.gs里边要去调用零一里面的方法，咱看这个该怎么去做啊，就是你要做个调用，那我写一下啊，怎么调用，首先你要做的话，第一步操作，因为咱要调零一嘛，咱先引入零一.gs的这么一个文件，把文件先给他引进来。

怎么引入在里边用个关键字，这关键字写一下啊。叫require关键字，然后在里边呢，加上你文件的那个路径。路径怎么加，或者各位是否记得啊，这应该是我们在外个阶段学过的，比如说我加一个点杠，或者加个点点杠效果是不一样的啊，那我都说一下啊，点杠表示当前路径，就你这文件所在的文件夹是这个文件夹，我加个比如叫点点杠，是不是它的上层目录，所以现在我们加个点杠，加上这个叫零一.js啊，这是引入这个文件。当然我强调啊，比如说我们之前写的话，其实这个点杠可以不写，但是这个时候点杠必须要加上，不加上会有问题啊，表示当前路径啊，这是我们引入的这么一个东西，然后有之后大家可以给它起个名字啊，名字随便起啊，比如我就给它起个名字。

然后叫count，比如叫M。这名字比如M怎么理解呢？它就类似于咱们加入中那个对象，就这名字就叫M啊，这是我们写的这么一个引入，然后引入之后第二步咱就开始做一个调用。怎么调用呢？你写个M。点上里面的方法，一个叫sum啊，咱就传两个参数，比如说一个一，一个二，然后还有一个叫这个，就如一个加一个减啊减，比如说写一个就来一个十来一个三，这是我们掉的两个方法，一个相加，一个相减，把它引入就可以调用啊，就是你把这两个可以调一下。然后掉完之后里边应该有输出啊，那我们给它都输出一下啊。啊，咱就这么写啊。直接输出啊。console.log啊，把这个相加和相减的值给它都输出一下啊。

这是。加这是点。所以这个啊，就是我们在零二里边写的代码，先引入零一.gs然后这里边调它的方法就可以了啊，这过程就是ES5做的模块化操作，咱们就是这么来做。啊，所以这个我们就写完了啊。给大家就是这过程啊，我再说一遍，然后最后我们测试啊，它的过程就是第一个咱建个这个项目做个初始化，然后建完之后我建文件夹有零一，有零二，在零一里边咱们创建两个方法，创建之后我们设置一下这两方法可以被别的JS调用，你加个model.is port，这单词别写错啊，注意这S不能少啊，model.port。然后加完之后零二中要调用，怎么调用，先引入这个零点文件，但是引入时候我们要写这个路径，比如说现在就算我在一个目录，咱这点杠不能省略，它表示当前路径。

引入之后起个名字叫M，通过M能调里面这个两个方法一个相加。一个相减啊，这个我们就最终完成了。主要。就这么一个过程啊，是咱们一个集中调用啊。然后这个写完之后呢，最后咱来测试一下啊，那怎么测试给大家说明啊，因为现在我是不是在零二中调零一啊，所以咱们就是啊，直接执行零二是不是可以了，云零二中调零一，那我就用终端进入到这个目录了啊，就这个ES5MODEL这个目录在里边，咱直接用note执行。怎么执行？不知各位是否记得啊，咱都测试过了，我们写一个no。零二.js当我们一回车，它把相加相减值应该可以输出，大家看到一个三一个七啊，这是相加。

这是相点这个啊，我们就最终完成了啊，就是这么一个结果。我把这个啊给大家拿过来，就是最终的一个测试啊，就是这个样子。我放到这个位置啊。测试。所以咱们现在啊，这个过程中，我们就完成了，就是模块化的一定的操作，咱刚才写的代码是一段ES5的写法，就是它里边需要你定义方法设置，然后你引入啊，最终在测试啊，这么一个基本过程啊，咱们就测试完了啊。这图我先保存一下啊，第六个。就是。模块化。ES5的这么一个写法，所以大家啊，把这过程给他自己去好好去练练，因为到后面这个模块化肯定会一直在写到，虽然说咱不会直接去写ES5，咱写的ES6，但是ES5也很重要啊。然后面会说，为什么说它重要啊，你先把这个结构知道，就是这么一个过程。

课件中跟我写的应该是一样的啊。