前端模块化

前端模块化

1. http爬虫 + http web服务器渲染数据发送前台 + 中文乱码
2. 前端模块化
   问题： 为什么前端要使用模块化？
   ​ 模块化： 是具有特定功能的一个对象（ 广义理解 ）
   ​ 模块定义的流程：
   ​ 1.定义模块（对象）
   ​ 2.导出模块
   ​ 3.引用模块
   ​ 好处：
   1. 可以存储多个独立的功能块
   2. 复用性高
3. 种类
4. AMD（ require.js）
5. CMD ( sea.js )
6. Common.js
7. AMD定义一个模块
   define

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

3. CMD定义模块
   define

//CMD
/*
 目录结构
     b.js
     index.js
*/
// 模块定义 b.js
 define(function(require, exports, module) {
 // 模块代码
});
//模块引用 index.js
 require('./b.js',function( moduleB ){
//moduleB就是b模块中导出的内容
 })

面试题之一： CMD AMD
4. Common.js
**Node.js使用了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. 自定义模块
3. 模块的定义

//举例
const student = {
id: 1,
name: 'Gabriel Yan'
}
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

犯错点：

1. 邮箱没有激活 （ 最多的 ）
   2. npm源没有切换
   3. 整个电脑的npm就不能使用
   如果以上方法没有解决：
   ​ 你使用别人的账号去试一下就可以了
   -D === --save-dev

//举例
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 ）
   中间件： 就是具有一定功能的一个函数
   ​