前端模块化之Common.js

模块与Common.js ( Node.js使用了Common.js规范)

Node.js中Common.js规范有三种使用类型:

1. 内置模块 (path,url,fs,precess)

内置模块很多,我们下面以 磁盘处理的模块 为例

内置模块我们注重的模块的使用


 使用步骤: 

1. 先引入模块,然后用一个变量保存这个模块( 内置模块在requrie(模块名称) )

2. 使用这个模块上的api( 方法 ) 【常用】

    path.join
    path.resolve

    以上两个api,将一个目录的名称拼接到一个磁盘路径上


  { 
    resolve: [Function: resolve],
    normalize: [Function: normalize],
    isAbsolute: [Function: isAbsolute],
    join: [Function: join],
    relative: [Function: relative],
    toNamespacedPath: [Function: toNamespacedPath],
    dirname: [Function: dirname],
    basename: [Function: basename],
    extname: [Function: extname],
    format: [Function: format],
    parse: [Function: parse],
    sep: '\\',
    delimiter: ';',
    win32: [Circular],
    posix:
    { resolve: [Function: resolve],
      normalize: [Function: normalize],
      isAbsolute: [Function: isAbsolute],
      join: [Function: join],
      relative: [Function: relative],
      toNamespacedPath: [Function: toNamespacedPath],
      dirname: [Function: dirname],
      basename: [Function: basename],
      extname: [Function: extname],
      format: [Function: format],
      parse: [Function: parse],
      sep: '/',
      delimiter: ':',
      win32: [Circular],
      posix: [Circular],
      _makeLong: [Function: toNamespacedPath] },
    _makeLong: [Function: toNamespacedPath] }



*/
		var path = require( 'path' )
		
		var process = require( 'process' )
		
		// console.log( process )
		
		
		/* // path.resolve 
		
		console.log( __dirname )
		
		
		console.log( path.resolve( __dirname,'../static') )
		console.log( path.join( __dirname,'../static') ) 

url 是处理url

核心api有三个:
  parse
  format
  resolve

var url = require('url')
var urlStr = 'http://www.baidu.com:8000/001?a=1&b=2#hash=20' 

// parse     String --> Object 

var urlObj = url.parse( urlStr )

console.log( urlObj )
/* Url {
  protocol: 'http:',
  slashes: true,
  auth: null,
  host: 'www.baidu.com:8000',
  port: '8000',
  hostname: 'www.baidu.com',
  hash: '#hash=20',
  search: '?a=1&b=2',
  query: 'a=1&b=2',
  pathname: '/001',
  path: '/001?a=1&b=2',
  href: 'http://www.baidu.com:8000/001?a=1&b=2#hash=20' } */


  // 2. format    Objext -=> String


  // console.log( url.format( urlObj ))


  //3. resolve 

  var str = "http://localhost:8080/home/a"


  console.log( url.resolve( str, './b'))

2. 第三方模块:插件

前端的第三方模块基本都存放在 http://npmjs.com

npmjs.com中会第三方包的 文档 就在这里 



以一个 request 的一个模块来进行研究


需要一个package.json的文件来记录我们安装过的模块

package.json 文件的创建

  npm init  一步一步进行

  快速创建   npm init -y / cnpm init -y / yarn init -y

命令安装的环境区分

  cnpm i request --save    生产环境安装
  简写: cnpm i request -S

  生产环境安装在package.json中记录在 dependencies 中

  cnpm i request --save-dev  开发环境安装

  简写: cnpm i request -D

  开发环境安装在 package.json中记录在 depenDencies 中


  后端 不存在跨域问题, 后端是不依靠浏览器,


第三方的包使用步骤:
  1. 引用 ( 第三方包如果使用了模块化安装, require( 模块名称 ) )
  2. 使用: 
        举例: 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 ( 相对路径 )

自定义模块上传 npmjs.com 过程
1. 创建package.json
2. 在 http://npmjs.com 上注册账号
3. 激活账号( npmjs.com会发送一个邮件给你的注册邮箱 ) 
4. 使用命令登录npmjs.com ( 登录前将你的源从淘宝源 切到 npmjs) 
	   	 - 问题 : 如何切换源呢?
	    - 解决: 使用 nrm 切换
	    - nrm 安装   `$ npm i nrm -g`
	    - nrm ls 查看目前源
	    - nrm use 源
	    `$ npm adduser`(输入密码时看不到变化,输完回车即可)

5. 如果登录成功, 提示为:   Logged in as yanyabing on https://registry.npmjs.org/.  
6. 发布包到npmjs
`$ npm publish`

7. 在npmjs官网查看包有没有发送上去

8. 下载包来使用一下
`$ npm i 包名称 -S / -D  `
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值