day30 - 浅谈 模块化

COMMONJS规范（node.js）、AMD规范（Require.js）、CMD规范（SeaJs）

• 模块化的思想和意义–解决冲突和依赖。 可以更方便地使用别人的代码，想要什么功能，就加载什么模块(每个 JavaScript
• 文件就是一个独立的模块) 大家必须以同样的方式编写模块，否则达不到预想的效果。
• 模块化思想就是指将页面根据内容的关联性分解成不同的且相互独立的模块进行开发，每个模块之间没有必然的联系，互不影响。

1.COMMONJS规范 - node.js

• CommonJS 最开始是 Mozilla 的工程师于 2009 年开始的一个项目，它的目的是让浏览器之外的JavaScript能够通过模块化的方式来开发和协作—Node.js(服务器端环境)
• CommonJS是最早的规范。
• CommonJS的规范中，每个 JavaScript 文件就是一个独立的模块。具备独立的作用域，不会污染全局。
• CommonJS 的规范中提出定义模块 调用模块 配置模块的方式方法。
• CommonJS 规范的主要适用场景是服务器端编程，所以采用同步加载模块的策略。

COMMON.JS的使用方式：

(1) 内置模块【API】

const 变量 = require('内置模块名')

- 内置模块就是默认绑定在全局变量 global 身上的方法，类似： window.location
- 内置模块就是Node提供的内置方法，可以直接去使用，不需要安装，在官网文档/API文档中侧边栏中内容
- 我们在项目中基本都是使用const来定义变量的，除非这个变量是改变的，采用let

(2) 第三方模块

const 变量 = require('第三方模块名')

- 第三方： 外部的、别人
- 前端第三方模块都存储在  npmjs.com
- 1. 安装/第三方模块会放置到node_modules文件夹中
    - npx nrm use taobao 切换npm源为淘宝源
    - npm i 第三方模块 -S/-D 生成node_modules文件夹
        - -S 表示生产环境安装
        - -D 表示开发环境安装
2. node_modules文件夹 - 依赖包
    - 依赖包删除： rm -rf node_modules
    - 这个删除命令是不能在cmd中用的，因为它是Linux命令

(3)自定义模块
module.exports 导出一个模块，定义模块

require 引入一个模块（用相对路径）

- 自定义包上传到 npm源
    - 0. 自定义包必须有一个说明文件： package.json
        - npm init -y 生成package.json文件
    - 1. npm adduser 登录账号
    - 2. npm publish 上传自定义包到npmjs.com

2.AMD规范 - Require.js

• AMD（Asynchronous Module Definition），即“异步模块定义”，是从 CommonJS 讨论中诞生的。
• AMD优先照顾浏览器的模块加载场景，使用了异步加载和回调的方式。浏览器端异步加载库Require.js实现的就是AMD规范。

AMD（Require.js）模块化开发的步骤：

(1)下载并引入require.js文件

<script src="js/require.js"  defer async="true"  data-main="js/main"></script>
async属性表明这个文件需要异步加载，避免网页失去响应。IE只支持 defer，所以把defer也写上。
data-main属性的作用是，指定网页程序的主模块,意思是整个网页的入口代码,所有代码都从这儿开始运行,文件名自定义

(2)define 定义模块，接收二个参数
tool_module.js文件

    第1个参数，必须是一个数组，指明该模块的依赖性
    第2个参数是一个回调函数

(3)require 调用模块，接收二个参数。
main.js文件

    第1个参数是一个数组，表示所依赖的模块
    第2个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用

requirejs.config(obj)，用来对 Require.js 进行配置。

3.CMD规范 - SeaJs

• CMD规范（Common Module Definition），称为 通用模块加载规范。一般也是用在浏览器端。浏览器端异步加载库Sea.js实现的就是CMD规范。(SeaJS的作者是前淘宝UED,现支付宝前端工程师玉伯)

4.ES6模块化

export命令用于规定模块的对外接口

import命令用于输入其他模块提供的功能

5.Node.js中常用的几个模块

(1)url模块 - 用于处理url地址

const url = require('url')
    //url.parse(str)  将url字符串转成url对象
    //url.format(urlobj) 将url对象转成url字符串

url字符的构成：
    - 统一资源定位符
    - 协议   http/https/tcp/ws/file/...   
    - 域名   item.taobao.com 
    - 端口   默认80
    - 路径   /item.html   ?前 - 域名后的部分
    - 查找字符串(search)  例：a=1&b=3&c=3
         一般指的都是连接的数据   
    - hash    #/a

(2)path模块 - 用于处理磁盘路径（绝对路径）

const path = require('path')

    const pathurl = path.join(__dirname,'../a')
    __dirname表示当前文件所在的磁盘路径
    第二个参数表示你拼接或是覆盖的路径(./  /   ../)

(3)querystring模块

const qs= require('querystring')
//qs.parse（） 字符串 → 对象
//qs.stringify（） 对象 → 字符串

const str = 'https://item.taobao.com/item.htm?spm=a217h.9580640.831217.2.3b2b25aaIDKCur&id=19407930086&scm=1007.12144.81309.70043_0_0&pvid=fb2f3014-1f61-4dc3-9917-8c5e21bd9453&utparam=%7B%22x_hestia_source%22%3A%2270043%22%2C%22x_object_type%22%3A%22item%22%2C%22x_mt%22%3A9%2C%22x_src%22%3A%2270043%22%2C%22x_pos%22%3A2%2C%22x_pvid%22%3A%22fb2f3014-1f61-4dc3-9917-8c5e21bd9453%22%2C%22x_object_id%22%3A19407930086%7D'
//业务：得到上面str中的id对应的值
const url = require('url')
const qs = require('querystring')
const obj = qs.parse(url.parse(str).query)或const obj = qs.parse(url.parse(str).search)
console.log(obj.id) //19407930086

qs.escape（） 加密
qs.unescape（） 解密

const city = 'city=北京'
const qsCityStr = qs.escape(city)
console.log(qsCityStr) //city%3D%E5%8C%97%E4%BA%AC
console.log(qs.unescape(qsCityStr)) //city=北京

(4)http模块

const http= require('http')

const PORT = 3000
const HOST_NAME = '10.31.162.31'
const server = http.createServer((request,response) => {
    /*
        * request 表示请求
        * response 表示响应  
    */
    response.writeHead(200,{
        'Content-Type': 'text/html;charset=UTF8'
    })
    response.write('<h3>Hello Node 你好</h3>')
    response.end()
})

//监听服务器
server.listen(PORT,HOST_NAME,() => {
    // 后台提示
    console.log(`当前服务器运行在: http://${HOST_NAME}:${PORT}`)
})

(5)fs模块(file system) - 用于对系统文件及目录进行读写操作

const fs= require('fs')

目录：
        fs.mkdir()   创建目录
        fs.rmdir() - 要求目录必须为空
        fs.readdir()
        fs.rename()
文件 ：
        fs.writeFile(path,callback)
        fs.unlink(path)          删除文件
        fs.readFile(path)
        fs.writeFile()

(6)stream + zlib模块 - 使用代码将某一个文件或是文件夹做成压缩包

const zlib= require('zlib')