前端模块化 & 自定义模块的操作；

-前端模块化；

Q：为什么前端要使用模块化？
A：模块化是具有特定功能的一个对象；

Q：前端模块化的好处；
A：

• 可以储存多个独立的功能块；
• 复用性高；

Q：模块的种类；
A：

• AMD（require.js）；
• CMD （sea.js）；
• Common.js （Node.js）；

Q：AMD与CMD区别；
A：

https://blog.csdn.net/qq_38912819/article/details/80597101

- 模块定义的流程：

1. 自定义模块；
2. 导出模块；
3. 引用模块；

- 示例：

1. AMD定义一个模块；
   defind

// AMD
/* 
	目录
	--adDir
	----**.js
	----index.js
*/
// AMD定义  a.js
   define ({
   	a: 1,
       b: 2,
       add: function(){}
   });
  // AMD引用 index.js;
  
require([./a.js],function( moduleA ){
   //moduleA指的就是定义来的对象
})

2. CMD定义模块；
   define

//CMD
/* 
 目录
 --**.js
 --index.js
*/
*/
// 模块定义  b.js
	define(function(require, exports, module) {
    	// 模块代码
    });
//模块引用 index.js

require('./b.js',function( moduleB ){
 //moduleB就是b模块中导出的内容
})

3. Common.js
   易错的理解：

​ common.js是属于node的 ×

​ node属于common.js ×

   //common.js
   /*
   	目录结构：
   		name.js
   		index.js
   */
   //模块的定义 name.js
   	const nameObj = {
           name: 'Gabriel Yan '
   	}
   //模块的导出  name.js
   	module.exports = nameObj
   //模块的引用
   	const nameObj = require('./name.js')

- Node.js中Common.js规范的使用有三种类型：

1. 内置模块（ 内置模块指的是挂载在Node.js全局对象身上的api ）

2. 自定义模块

   1. 模块的定义

      //举例
      const student = {
          id: 1,
          name: 'Shelley Huang'
      }
      const fn = function(){}
      

   2. 模块的导出

      // 第一种导出
      module.exports = student // 安全性不高  默认导出一个
      //第二种导出
      module.exports = { //批量导出，按需引用
          student,fn
      }
      

   3. 模块的引用

      // 这种引用对应第一种导出
      const student = require('./xxx.js')
      // 这种引用对应第二种导出
      const { student , fn } = require( './xxx.js ' )
      

      注意：

      ​ 在自定义模块引用时，require一定要写好路径

3. 第三方模块

   1. 别人已经封装好的模块
   2. 这个模块具备一些特定的功能
   3. 这些模块存放在  www.npmjs.com 这个网站中
   这些模块的文档也记录在内
   
   格式： var/let/const 变量名 = require( 模块名称 )
   
     总结： 
         第一步，使用npm/cnpm 安装
         第二部，在文件中引入
         第三部，在www.npmjs.com这个网站中找到这个模块的文档，根据文档来使用
   

​ 第三方模块具备的特性：

	1. 有一定的功能
	2. 存储在: http://www.npmjs.com 中

解决： 自定义模块的上传（ http://www.npmjs.com ）

1. 创建package.json文件

   $ npm init -y
   

2. 在http://www.npmjs.com 这个网站注册一个账号

   注意：第一次登陆会发送一个邮件给你的邮箱（ 这个发送是手动的 ），然后登陆邮箱激活

3. 检查你的电脑的源是不是npm源

   $ nrm ls
   

   如果是，就不会理会

   如果不是，那么切换到npm源

4. 命令行登录npmjs仓库

   $ npm adduser
   

5. 创建模块并导出模块

6. 查看你的包名称是否已经被使用

7. 发布包

   $ npm publish
   

//举例

cnpm  i  jquery -D  === cnpm i jquery --save-dev  // 开发环境下使用
cnpm i jquery -S ===  cnpm i jquery --save // 生产环境下使用

​

Node.js跨域

跨域；

​ 前端跨域

​ jsonp

​ 反向代理（ 创建一个虚拟后端服务器，让这个后端服务器帮助我们请求数据）

​ 后端跨域

​ node php java

1. 设置请求头

2. 使用第三方的中间件（ cors ）

   中间件： 就是具有一定功能的一个函数

​