前端模块化

http爬虫 + http web服务器渲染数据发送前台 + 中文乱码

服务器：
可以运行在服务端一个网站（站点）
种类：

1. web服务器（ 静态服务器 ） ，可以运行在浏览器中的服务器
2. api服务器 （ 后端接口 ） 后端语言暴露一个数据接口，用于前端数据请求（ ajax fetch ）

Node.js中原生创建web服务器

http模块
createServer( callback ) 创建服务器
callback中接收三个参数 request response
listen(port,host,callback) 监听服务器（ 反馈服务器状态 ）
port 端口
host 域名

// 1.引入http模块
const http = require('http');

//2.定义端口和域名
const port = 8888;

const host = 'localhost' //127.0.0.1

//3.通过http模块的createServer api可以创建一个web服务器
const server = http.createServer((request, Response) => {
Response.writeHead(200, {
'content-type': 'text/html;charset=UTF8' //设置反馈头信息
})
Response.write('<h1>hello world 你好</h1>') //向前台发送数据
Response.end() //发送结束

}).listen(port, host, () => {
console.log(`The server running at:http://${host}:${port}`)
})

注：按Ctrl访问终端里的服务器地址即可查看数据渲染的页面

防止中文乱码解决方案：

1. 设置请求头
   response.writeHead( 200, {
   ‘Content-Type’: ‘text/html;charset=UTF8’ // 小写也可以 utf8
   })

2. 发送一个meta标签
   response.write(’’)

3. toString() 在当前应用场景中还不行
   二进制有效
   将二进制 — 》 string

名词： chunk 分片

我们刚才发送了一个html给前台，那么这种渲染数据的形式我们称之为： ‘后端渲染’，也称之为：‘服务端渲染’，英文叫法：‘ssr’

前端模块化

问题： 为什么前端要使用模块化？
模块化： 是具有特定功能的一个对象（ 广义理解 ）

模块定义的流程：
1.定义模块（对象）
2.导出模块
3.引用模块

好处：
1.可以存储多个独立的功能块
2.复用性高

种类

1. AMD（ require.js）
2. CMD ( sea.js )
3. Common.js

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指的就是定义来的对象
    })

CMD定义模块
define

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

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.自定义模块
1. 模块的定义

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

2. 模块的导出

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

3. 模块的引用

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

注意：这种引用对应第一种导出

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

Node.js跨域
跨域；
前端跨域
jsonp
反向代理（ 创建一个虚拟后端服务器，让这个后端服务器帮助我们请求数据）
后端跨域
node php java
1. 设置请求头
2. 使用第三方的中间件（ cors ）
中间件： 就是具有一定功能的一个函数

补充：
-D === --save-dev

//举例

cnpm  i  jquery -D  === cnpm i jquery --save-dev  
// 开发环境下使用 代码是不能直接上线的
cnpm i jquery -S ===  cnpm i jquery --save
 // 生产环境下使用 代码在线上可以直接使用 能访问到