前端模块化

  • 首先介绍一下前端模块化,一共包含一下四种。具体介绍看前端模块化。
  1. AMD ( require.js ) 浏览器端模块化
  2. CMD ( sea.js ) 浏览器端模块化
  3. Common.js ( module.export require ) 服务器端模块化
  4. es6 模块化 ( export import )

node模块化

  • 在NodeJS中,一般将代码合理拆分到不同的JS文件中,每一个文件就是一个模块
  • Node.js使用了Common.js规范
  • 在编写每个模块时,都有require、exports、module三个预先定义好的变量可供使用。
  • 模块内的参数说明:
  1. __dirname: 当前模块的文件夹名称
  2. __filename: 当前模块的文件名称—解析后的绝对路径。
  3. module: 当前模块的引用,通过此对象可以控制当前模块对外的行为和属性等。
  4. require:是一个函数,帮助引入其他模块.
  5. exports:这是一个对于 module.exports 的更简短的引用形式,也就是当前模块对外输出的引用。
  • Node.js中Common.js规范有三种使用类型:
  1. 内置模块: path url fs precess
  2. 第三方模块:插件,
  3. 自定义模块:自己写的功能模块。

1.内置模块

  • Node平台自带的一套基本功能模块。
    内置模块很多,我们下面以 磁盘处理的模块为例。
    内置模块我们注重的模块的使用
    使用步骤:
  1. 先引入模块,然后用一个变量保存这个模块( 内置模块在requrie(模块名称) )
  2. 使用这个模块上的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模块
  1. 引入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模块
  1. 引入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中文件系统 功能: 操作文件或是目录
  1. 文件:
  • 增: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( '文件删除成功' )
        })
  1. 目录:
  • 增: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
  1. 引入stream模块
    const stream = require(‘stream’);
  2. 类型
    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 文件的创建

  1. npm init 一步一步进行
  2. 快速创建 npm init -y / cnpm init -y / yarn init -y
  3. cnpm i request --save 生产环境安装
    3.第三方的包使用步骤:
  4. 引用 ( 第三方包如果使用了模块化安装, require( 模块名称 ) )
  5. 使用:
    举例: 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 过程
  1. 创建package.json
  2. http://npmjs.com 上注册账号
  3. 激活账号( npmjs.com会发送一个邮件给你的注册邮箱 )
  4. 使用命令登录npmjs.com ( 登录前将你的源从淘宝源 切到 npmjs)
  • 问题 : 如何切换源呢?
  • 解决: 使用 nrm 切换
  • nrm 安装 $ npm i nrm -g
  1. 登录命令 $ npm adduser
  1. 发布包到npmjs
    $ npm publish
  2. 在npmjs官网查看包有没有发送上去
  3. 下载包来使用一下
    $ npm i 包名称 -S / -D