2020/02/11 04-JS模块化_js 函数挂到实体-CSDN博客

本文链接：https://blog.csdn.net/qq_42227818/article/details/104269195

promise是一个新的类，new出来得到新的实例，promise实例

承诺把事情做完，但是做完成功还是失败，就不管了，里面有一个执行器executor，把你的逻辑写在里面。promise这个异步的对象就去执行了，既然是异步，就会提前返回一个值（不是最终结果）
异步无非就是（要么自己不断询问是否完成，要么我通知你来做，要么就是使用回调方式帮你完成）
交给它干什么事情用executor来实现，executor需要传入2个函数，在函数体内部完成执行，成功调用第一个参数resolve，没成功调用rejected，这两个调用以后这个promise就完成了，会有两个状态fulfilled，rejected，这两个方式可以用回调的方式。
回调需要使用另一种语法，then或者catch 在这里插入图片描述
then定义两个东西，一个是成功状态应该如何处理，一个是失败了如何处理，这两个是分别调用

所以要在里面写两个函数，一个是用来处理成功，一个是用来处理失败的，如果定UI的promise成功了，会调用第一个函数，失败了调用第二个函数，如果第二个参数不写，就会在内部生成一个异常，这个异常都不是成功，都是失败
在这里插入图片描述
整个then会返回一个新的promise对象，就可以用链式变成往里面继续加点，加点以后可以再继续then，可以catch，catch也会得到一个新的对象，可以再点then，串起来写

在这里插入图片描述
根据前面的状态变化来看，后面要不要做，链式编程解决了异步调用

这里失败之后进行处理，就变成了正确了

成功以后，P1.then也是返回的成功的

到下面继续调用

如果现在直接p1.then调用catch，返回的对象都是fulfilled，成功的话，catch就执行不了

在这里插入图片描述
构建新的promise的返回值，把它的返回值构建成一个失败的状态，用primise构造了一个状态

执行一下，有点问题

使用return，实际上又产生了一个对象，return回去

在这里插入图片描述
注释掉

在这里插入图片描述
写处理逻辑判断成功与否，然后交给下面的来处理

每一个方法可以对一个前面的对象进行状态处理

catch是对前面对象返回的进行一个处理，

每一个处理函数中，依然可以返回，then来返回一个新的对象

在这里插入图片描述

这是一个异步调用

这个函数调用会返回一个promise对象

如果成功向后打印reject

reject被catch捕捉

catch里面resolve交给then捕捉

异步往往需要一个构造器，构造一个异步对象，内部其实就是封装了promise，promise执行需要花费时间，运行一段时间会告诉你究竟成功还是失败了，然后做相应处理
在这里插入图片描述
大多数，异步处理用promise，大多数使用异步库来解决一些问题，异步在做网络通信的时候要和服务端进行链接，在浏览器里，就可以调用异步库，访问的时候，等数据回来的时候调用回调，在回调里把内容处理了，这样网页就不会卡着了

模块化

在这里插入图片描述
ES6之前，JS没有出现一套模块化系统，JS还是主要在浏览器端做处理，可以在html标签script加一写js脚本

05年之后，ajax技术可以发送异步请求，带来前后端交互方式的变化，为了提高用户体验，原来网页都改成了异步方式，尤其是后面jquery库减小了浏览器的差异，大量开始使用js
在这里插入图片描述
python的模块，全局变量都出不了这个边界

所以js就有点难办，因为是放在html标签的script里的，在head里就可以写script，直接引用一个外部文件，相当于把文件内容贴到同一个html里，但是变量就需要一个名词空间来保证他们不冲突了，但是js没有，特别是到了后端JS一大堆的时候
在这里插入图片描述
这时候就诞生了commonjs方案，使用全局的require函数导入模块，使用exports导出变量，用exports来控制导

把JS文件所有变量包住，所有js要运行，需要从服务器下载到本地浏览器才能用，写在需要时间，所以用异步的方案，js文件完成下载后，来调用回调，回调里面是你写的代码是安全的，因为js已经下载到浏览器端，浏览器有js的信号数据，这样调用函数，类是安全的
在这里插入图片描述
AMD异步模块定义，amd虽然是异步操作，但是会预先加载和执行，也就是碰到的语句，不管执行不执行，先预先加载，需要什么模块，就提前下载js。，遇到加载不征求意见，直接加载。
CMD使用了seajs库，作者是淘宝前端玉伯，也是解决了requirejs的一些问题，推崇懒加载。不用不加载，什么时候用，什么时候加载。
在这里插入图片描述
预先加载会用的时候都在，懒加载是用的时候才去服务器端下载（如果文件比较大，是需要等一会），JS本身在浏览器端是要缓存的，同样的JS文件，在浏览器端可以用很久，除非缓存过期

现在开发用ES6，社区原生提供的，模块化管理工具
在这里插入图片描述

如果支持，项目该怎么写
建立一个目录src
在这里插入图片描述
创建一个文件

现在函数直接调用没问题

打开这个文件

在这里插入图片描述
写全一点

试试能不能在控制台里打印

在控制台里就打印了

需要下载这个JS文件，然后在下面调用

在node。js第三行打印了

一个网页里的js可能有很多，没有模块化的管理，变量名就可能冲突，尤其是a=100，是全局变量，会冲突
在这里插入图片描述
在ES6中提供了import

**从哪个文件导入哪个东西
**
左边是使用的JS，右边是模块的JS

报错是因为语法太新了

需要在JS文件里export 导出，才能使用import

整个JS开发上，有一个工具链，只要有JS开发，从头到尾，整个工具链里的工具都有用

需要看一下转译工具（对于python来讲一编译，就是字节码了，人看不懂了），这里更偏向转译，有的地方翻译成编译，从一种语言的形式转换成另一种语言的形式，更倾向翻译成转译
在这里插入图片描述

**每个项目跑的python版本不一样，最合适的方法就是多版本，或者手动编译一个python3，启动的时候指定使用python3
**

python2转到python3都是一个源文件之间的转换，所以这种不能叫编译，叫转译比较合适，JS的最大问题也是存在多个版本，而且还有浏览器的JS引擎跟不上，只能兼容
在这里插入图片描述
编译compile，转译transpiler（从一个到另一个）

babel

这个工具叫babel，通过转译器可以转换为指定的之前的版本代码，浏览器兼容的格式
在这里插入图片描述
babeljs.io

ES6语法这是一个生成器语法，右边是老语法，所以就是把ES6的生成器，模拟成了低版本可以跑的东西

只需要记住左边的即可

版本7.1的语法跟6的语法产生了很大的差别
在这里插入图片描述
箭头函数转换成了匿名函数
它的7和6差别比较大，但是可以兼容，首先如何使用

nodejs之后出现了包管理器，就是来解决大量JS转换问题，开发完了用这个东西来进行大量转译

在这里插入图片描述
preset预设，现在讲的是6的

写这一个代替以前的好几个

react语法，和后面几个预选版本的语法都支持，基本上react的生成的js文件到浏览器都跑不起来，需要用它来进行转译。这些就是预设

除了react，在ES6中其他的都可以用env这一个完全替代，这个一个预设代替好几个，写一个就够了
在这里插入图片描述
这时候不能按照传统的JS开发方式了，这时候就需要用nodejs的正儿八经的前端开发方式了

在项目根目录里

package name包名
version 版本
description 描述
entry point 入口
test command 测试
git repository 网上git是什么，也就是跟GitHub链接一下
author 作者
keywords 搜索关键字
license用的是什么
在这里插入图片描述
生成的东西提示想要写到package.json里面

这个写的项目要个package.json交互一下

yes就创建文件成功

这个文件有了之后，目前这个目录就归npm管了，npm跟nodejs一样，没有path路径就找不到npm，等价于python里的pypi
在这里插入图片描述

在这里插入图片描述

初始化项目目录文件，这个文件很重要，里面所有的包管理都在这里

在这里插入图片描述
创建文件，npmrc运行环境，rc指的是运行环境

写淘宝的registry，可以是没有，但是没有链接的是官网，速度很慢

这个文件可以放在npm的安装目录下，可以直接命名npmrc，
也可以放到家目录里，当前目录进行控制，可以放到项目根目录，此项目受影响，一般配置都是当前项目下受影响
在这里插入图片描述

安装

在这里插入图片描述
一般都是项目创建的时候只用一回

在项目目录下执行，会创建一个node_modules文件夹

只引入了两个包，加了237个包

在这里插入图片描述
这么多文件必须模块化，否则会打架

要用什么必须下载到本地才能使用

有几个地方要修改，save-dev和save的差别，主要是对packeg.json文件的影响
在这里插入图片描述
这里有依赖，devDependencies开发依赖，依赖有两种，开发时的依赖（帮你生成将来运行在服务器端要跑的JS），
还有运行依赖，运行的时候还需要其他的JS文件支持，

开发的依赖时不用在运行环境中，打包的时候不用带，一般都是开发运行的时候测试用的，跟部署环境无关
在这里插入图片描述
运行时依赖，是在运行环境中，在最终部署的时候，应该把谁带走

这些东西都会加载到package.json,devdependencies是开发用的，dependecies最后打包文件需要带走，这个打包文件放在浏览器端可以跑，放在用户的任何一个地方都可以跑
在这里插入图片描述
安装完后，会放在一个node_modules目录中，里面有babel相关模块及依赖的模块。不管是开发依赖还是运行依赖都会放在里面，

修改下配置文件

用babel来转译，将src目录中的所有文件，-d目录，转换到lib目录里去

在这里插入图片描述
创建lib，目录

在src里面添加文件

查看这个地方的版本对不对

现在两个目录准备好了

按照json的标准就是字符串是双引号

babel相关的一个预设都没有，需要安装
安装依赖
在这里插入图片描述
安装依赖

运行时依赖可以暂时不用

在这里插入图片描述
这样直接保存即可

准备js文件

在这里插入图片描述
两个文件产生了

用commonjs方式来定义

这个js就是导入了foo函数执行了一下

导出一个类，导出一个const常量

调用lib目录下的执行也没有问题

它需要把这些封起来放到一个名词空间中，不跑出来，否则没有模块化的概念
在这里插入图片描述
这就构建出来了，最后运行下即可
这就是如何使用babel工具，在浏览器中不支持的语法，替我们转换成可以安全运行的带啊，转译工具其实就是做几个简单的配置
babel工具可以把比较高的语法转换成低版本的语法，都可以把很多情况下，把自己写的程序运行起来，没有所谓的兼容性问题。

模块化编程还有一个问题，import，export
在这里插入图片描述
缺省导入导出，需要加一个default，缺省导出

在这里插入图片描述
编译以后记得自动保存一下，保存以后flush 到磁盘，再进行编译

这时候出现了一些问题
在这里插入图片描述
因为缺省的导入导出方式都是不太一样的，导入的时候写在外面就OK了

缺省的不要写括号里，单独提取出来
在这里插入图片描述
这里定义的名字是foo

下面用bar这个名字取回来

名字就算不对，编译也没有问题，也就是缺省的名称可以换

看一下modejs，这是缺省导出导foo，把函数foo 交给了exports.default像属性一样的东西 在这里插入图片描述
这个属性要导入，相当于把foo对象交给了一个bar变量

在这里插入图片描述
相当于调用别人的default属性

在这里插入图片描述
其他导入导出都必须是名字

在这里插入图片描述
缺省可以名字不同

试试匿名

运行转译没有问题

没有标识符就直接赋值成函数对象了

不缺省就需要把名字写上

对于非缺省的必须用他们的名称

没有问题可以使用
也就是缺省的可以不用名字，对于非缺省用哪个，把哪个放在大括号内，逗号隔开，挨个写，这是导入的写法， 在这里插入图片描述

但是这么导入也有问题，假如另外导入的也有foo函数，这样就冲突，肯定互相覆盖

遇到这种情况可以这么做，as相当于同时建立了一个统一的名词

缺省导出的类加括号就是初始化
下面相当于有个名词限定它了
在这里插入图片描述

如果采用第一种方式，需要注意模块的名词冲突

使用第二种方式，可以通过名词来间接访问所有导出项，避免互相冲突

把export去掉，现在就不导出了

不导出了就告诉你这个函数找不到了 在这里插入图片描述
这个函数根本就没导出，用import语法根本就不理这个函数，这个函数是找不到的
利用export和import就能让JS文件像python一样当模块用，两种导入方式，对于缺省导入实际上可以换名字，不能写在大括号内，大括号内都是写其他的导出方式在这里插入图片描述

也可以用这种方式导出

可以统一导出

没有问题