前端模块化
- 首先介绍一下前端模块化,一共包含一下四种。具体介绍看前端模块化。
- AMD ( require.js ) 浏览器端模块化
- CMD ( sea.js ) 浏览器端模块化
- Common.js ( module.export require ) 服务器端模块化
- es6 模块化 ( export import )
node模块化
- 在NodeJS中,一般将代码合理拆分到不同的JS文件中,每一个文件就是一个模块
- Node.js使用了Common.js规范
- 在编写每个模块时,都有require、exports、module三个预先定义好的变量可供使用。
- 模块内的参数说明:
- __dirname: 当前模块的文件夹名称
- __filename: 当前模块的文件名称—解析后的绝对路径。
- module: 当前模块的引用,通过此对象可以控制当前模块对外的行为和属性等。
- require:是一个函数,帮助引入其他模块.
- exports:这是一个对于 module.exports 的更简短的引用形式,也就是当前模块对外输出的引用。
- Node.js中Common.js规范有三种使用类型:
- 内置模块: path url fs precess
- 第三方模块:插件,
- 自定义模块:自己写的功能模块。
1.内置模块
- Node平台自带的一套基本功能模块。
内置模块很多,我们下面以 磁盘处理的模块为例。
内置模块我们注重的模块的使用
使用步骤:
- 先引入模块,然后用一个变量保存这个模块( 内置模块在requrie(模块名称) )
- 使用这个模块上的api( 方法 ) 【常用】
path.join
path.resolve
以上两个api,将一个目录的名称拼接到一个磁盘路径上
var path = require( 'path' )
var process = require( 'process' )
console.log( process )
console.log( __dirname )
console.log( path.resolve( __dirname,'../static') )
console.log( path.join( __dirname,'../static') )
(1)url模块
- 引入url模块
const url = require("url")
2. URL模块用于解析和处理URL字符串,提供了三个方法:
- parse 将字符串转成对象
- format 将对象转成字符串
- resolve
1. 返回从根目录指定到当前目录的绝对路径url
2. 返回结果去除了参数和锚点
3. 返回结果标准url路径格式
## parse:将url字符串转换成object对象
var url=require('url');
var url1='http://calc.gongjuji.net/byte/?name=zhangsan&age=18#one#two';
var result=url.parse(url1);
// { protocol: 'http:', //使用协议
// slashes: true, //
// auth: null, // 验证信息
// host: 'calc.gongjuji.net', //全小写的主机部分的URL,包括端口信息。
// port: null, //端口
// hostname: 'calc.gongjuji.net',//小写的主机部分的主机
// hash: '#one#two', //页面锚点参数部分
// search: '?name=zhangsan&age=18',//查询参数部分,带?
// query: 'name=zhangsan&age=18', //查询参数部分
// pathname: '/byte/', //目录部分
// path: '/byte/?name=zhangsan&age=18',//目录+参数部分
// href: 'http://calc.gongjuji.net/byte/?name=zhangsan&age=18#one#two' //最初解析的完整的网址。双方的协议和主机是小写。
// }
//console.info(result);
(2)querystring模块
- 引入querystring模块
const qs = require querystring
2. 查询字符串,一般是对http请求所带的数据进行解析.提供了四种方法:
- querystring.parse 字符串转对象
- querystring.stringify 对象转字符串
- querystring.escape 将中文字符编码
- querystring.unescape 将中文字符解码
/*
1. parse( str , arg1 , arg2)
str: 你要处理的字符
arg1: 分隔字符
arg2:
将 = 转化为 : , (这句话前提是 & 符号是提前被转化的)
*/
var qs = require( 'querystring' )
var url = require( 'url' )
var str = 'http://www.baidu.com:8080/001?a=1&b=2#hash=20'
var obj = qs.parse( str,'?','&' )
console.log( obj );
/*
{
'http://www.baidu.com:8080/001?a': '1',
b: '2#hash=20'
}
*/
// escape
var charaStr = 'http://www.baidu.com/001?city=北京'
var urlObj = url.parse( charaStr )
var query = urlObj.query // city = 北京
console.log( qs.escape( query) ) //city%3D%E5%8C%97%E4%BA%AC
// unescape
console.log( qs.unescape( qs.escape( query) ))
(3) http模块
- get
- request
(4) events 模块
- 用来绑定事件
var Events = require('events')
class MyEvents extends Events {}
var myEvents = new MyEvents ()
// console.log( myEvents )
// 声明事件
myEvents.on('aa',function(){
console.log( 'hello Node.js' )
})
// 事件的触发
myEvents.emit('aa')
(5) fs模块
- fs是Node.js中文件系统 功能: 操作文件或是目录
- 文件:
- 增:fs.writeFile(路径,内容 , 错误优先的回调)
- 删:fs.unlink(路径,回调函数)
- 改:fs.appendFile(路径,添加内容,编码格式,错误优先的回调)
- 查:fs.readFile(路径,编码格式,错误优先的回调函数)
- 增删改查的方法都有异步方法在方法后面加上Sync.例如:fs.readFileSync()
//引入模块
var fs = require('fs');
// 增(创建)
fs.writeFile('./dist/1.txt','hello yyb',function( error ) {
if( error ) throw error
})
// 改
fs.appendFile('./dist/1.txt','hello 小伙~','utf8',function( error ) {
if( error ) throw error
console.log('文件修改成功')
})
// 查
fs.readFile( './dist/1.txt','utf8',function( error, data ) {
if ( error ) throw error
// console.log( data.toString() ) // 二进制数据
console.log( data )
console.log('文件读成功了')
})
// 删
fs.unlink( './dist/1.txt', function( error ) {
if( error ) throw error
console.log( '文件删除成功' )
})
- 目录:
- 增:fs.mkdir(路径, 错误优先的回调)
- 删:fs.rmdir(path,callback) 这个方法只能删除空目录
- 改:fs.rename(路径,新路径,错误优先的回调)
- 查:fs.readdir(路径,编码格式,错误优先的回调函数)
- 增删改查的方法都有异步方法在方法后面加上Sync.例如:fs.readdirSync()
var fs = require( 'fs' )
// 目录-增
fs.mkdir('./dist',function( error ) {
if( error ) throw error
console.log( '目录创建成功' )
})
// 目录-改
fs.rename('./dist','./fs_dist',function( error ) {
if( error ) throw error
console.log(' 目录名称修改成功 ')
})
// 目录-查
//创建
for( var i = 0 ; i < 10 ; i ++ ){
fs.writeFile(`./fs_dist/${i}.txt`,i,function( err ) {
console.log( `第${i}个文件创建成功` )
})
}
fs.readdir('./fs_dist','utf-8',function ( error,data ) {
if( error ) throw error
console.log( data ) // 以文件名为元素构成的数组
for ( var i = 0 ; i < data.length; i ++ ){
fs.readFile( `./fs_dist/${data[i]}`,'utf8',function( error , content ) {
if( error ) throw error
console.log( content )
})
}
})
// 目录-删
//fs.rmdir(path,callback) 这个方法只能删除空目录
fs.rmdir( './fs_dist', function ( error ) {
if( error ) throw error
console.log('目录删除成功')
})
fs.readdir('./fs_dist','utf-8',function ( error,data ) {
if( error ) throw error
console.log( data ) // 以文件名为元素构成的数组
for ( var i = 0 ; i < data.length; i ++ ){
fs.unlink( `./fs_dist/${data[i]}`,function( error ) {
if( error ) throw error
})
}
})
fs.rmdir('./fs_dist',function( error ) {
if( error ) throw error
})
(6)stream
- 引入stream模块
const stream = require(‘stream’); - 类型
stream 流 是一种在nodejs中处理‘流式数据’的抽象接口
Node.js,Stream 有四种流类型:
- Readable - 可读操作。
- Writable - 可写操作。
- Duplex - 可读可写操作.
- Transform - 操作被写入数据,然后读出结果。
var fs = require( 'fs' )
var zlib = require('zlib') // 创建压缩包
var readeStream = fs.createReadStream( './dist/1.txt' )
var writeStream = fs.createWriteStream( './dist/1.txt.gz' )
var gzip = zlib.createGzip() // 空压缩包
readeStream.pipe( gzip ).pipe( writeStream )
2. 第三方模块
- 社区或第三方开发好escape的模块。
- 前端的第三方模块基本都存放在 http://npmjs.com
- 以一个request的一个模块来进行研究
需要一个package.json的文件来记录我们安装过的模块
1.package.json 文件的创建
- npm init 一步一步进行
- 快速创建 npm init -y / cnpm init -y / yarn init -y
- cnpm i request --save 生产环境安装
3.第三方的包使用步骤: - 引用 ( 第三方包如果使用了模块化安装, require( 模块名称 ) )
- 使用:
举例: request是用来数据请求的 : 接下来我们去请求一下豆瓣的数据
var request = require( 'request' )
var http = require ( 'http' )
http.createServer( function ( req,res ) {
// request ( url, function ( error, response, body ) {})
request ( 'https://m.lagou.com/listmore.json', function ( error, response, body ) {
if( error ) throw error
// console.log( response ) //请求的接口的信息
// console.log( body ) // 请求回来的数据
res.write( body )
res.end( )
})
}).listen( 8001 )
3.自定义模块
- 自己写的功能模块。
// 自定义模块:
1. 先定义一个 变量, 变量值可以随意
2. 导出模块
module.exports = 变量名
module.exports = {
变量名
}
3. 导入
如果是第一种方式导出 , var 变量名 = require( 相对路径 )
如果是第二种方式导出, var { 变量名 } = require ( 相对路径 )
name.js
var name = {
txt: '小骏'
}
module.exports ={ name }
index.js
var {name} = require( './name.js' )//导入
var student = {
id: 1,
name: '老俊'
}
console.log( name )
module.exports = {
student,
name
}
自定义模块上传 npmjs.com 过程
- 创建package.json
- 在 http://npmjs.com 上注册账号
- 激活账号( npmjs.com会发送一个邮件给你的注册邮箱 )
- 使用命令登录npmjs.com ( 登录前将你的源从淘宝源 切到 npmjs)
- 问题 : 如何切换源呢?
- 解决: 使用 nrm 切换
- nrm 安装
$ npm i nrm -g
- 登录命令
$ npm adduser
- 输入账号 密码
- 如果登录成功, 提示为:
Logged in as yanyabing on https://registry.npmjs.org/.
- 发布包到npmjs
$ npm publish
- 在npmjs官网查看包有没有发送上去
- 下载包来使用一下
$ npm i 包名称 -S / -D