实现目标

JavaScript 实现 CIDR 详细信息(开始地址、结束地址、网络ID、广播地址、可用地址数和网络掩码)的计算
(我这里是写在 Vue 里面的,各位需要自己拣出来哦,本功能已发布在一个木函网页版的《CIDR计算器》)

不知道什么是 CIDR ?

百度百科:无类别域间路由(CIDR)

掩码位数转为掩码

我的实现方法比较笨,大佬勿喷

// 此方法挂载在了 Vue 的 methods 里面,下面有提到
maskLengthToMask(maskLength) {
const netMaskZero = (maskLength) => {
  let temp = ''
  for (let i = 0; i < 32 - maskLength; i++) {
    temp = String(temp) + String(0)
  }
  return temp
}
const netMaskOne = '1'.repeat(maskLength)
const netMaskBinary = (this.netMaskBinary =
  netMaskOne + netMaskZero(maskLength))
return (
  String(parseInt(netMaskBinary.substring(0, 8), 2)) +
  '.' +
  String(parseInt(netMaskBinary.substring(8, 16), 2)) +
  '.' +
  String(parseInt(netMaskBinary.substring(16, 24), 2)) +
  '.' +
  String(parseInt(netMaskBinary.substring(24, 32), 2))
  )
}

完整过程

// cidr 为 Vue 实例数据
const maskLength = cidr.substring(cidr.indexOf('/') + 1)
this.cidrRes.usable = 2 ** (32 - maskLength) - 2
const ipAddress = cidr.substring(0, cidr.indexOf('/'))
this.cidrRes.netMask = this.maskLengthToMask(maskLength) // MaskLength 为 Vue 实例methods里面的方法
const NetworkInterface = function(ip, netmask) {
  this.ip = ip
  this.netmask = netmask
  this.splitAddress = function(str) {
    let addressArr = []
    addressArr = str.split('.')
    return addressArr
  }
  this.convertedToBinary = function(addr) {
    return (parseInt(addr) + 256).toString(2).substring(1)
  }
  this.convertedToBinaryArr = function(arr) {
    for (let i = 0; i < arr.length; i++) {
      arr[i] = this.convertedToBinary(arr[i])
    }
    return arr
  }
  this.arrJoinToString = function(arr) {
    let address = ''
    address = arr.join('')
    return address
  }
  this.getHostIndexOfNetmask = function(netmask) {
    return netmask.indexOf('0')
  }
  this.andOperation = function(val1, val2) {
    return parseInt(val1) & parseInt(val2)
  }
  this.getNetworkArr = function(ipArr, netmaskArr) {
    const network = []
    for (let i = 0; i < 4; i++) {
      network[i] = this.andOperation(ipArr[i], netmaskArr[i])
    }
    return network
  }
  this.formatAddress = function(arr) {
    let address = ''
    address = arr.join('.')
    return address
  }
  this.getBroadcastBinaryString = function(network, hostIndex) {
    let broadcast = ''
    const netAddrOfnetwork = network.substring(0, hostIndex)
    let hostOfnetwork = network.substring(hostIndex, network.length)
    hostOfnetwork = hostOfnetwork.replace(/\d/g, '1')
    broadcast = netAddrOfnetwork + hostOfnetwork
    return broadcast
  }
  this.getBroadcastBinaryArr = function(str) {
    const len = 8
    const broadcastArr = new Array(4)
    for (let i = 0; i < 4; i++) {
      broadcastArr[i] = str.substr(i * len, len)
    }
    return broadcastArr
  }
  this.formatBroadcast = function(arr) {
    for (let i = 0; i < arr.length; i++) {
      arr[i] = parseInt(arr[i], 2)
    }
    return this.formatAddress(arr)
  }
}
NetworkInterface.prototype = {
  getIpAddress() {
    return this.ip
  },
  getNetmask() {
    return this.netmask
  },
  getNetwork() {
    const ip = this.getIpAddress()
    const netmask = this.getNetmask()
    const ipArr = this.splitAddress(ip)
    const netmaskArr = this.splitAddress(netmask)
    const networkArr = this.getNetworkArr(ipArr, netmaskArr)
    const network = this.formatAddress(networkArr)
    return network
  },
  getBroadcast() {
    const netmask = this.getNetmask()
    const netmaskArr = this.splitAddress(netmask)
    const netmaskBinaryArr = this.convertedToBinaryArr(netmaskArr)
    const netmaskString = this.arrJoinToString(netmaskBinaryArr)
    const hostIndexOfNetmask = this.getHostIndexOfNetmask(netmaskString)
    const network = this.getNetwork()
    const networkArr = this.splitAddress(network)
    const networkBinaryArr = this.convertedToBinaryArr(networkArr)
    const networkstring = this.arrJoinToString(networkBinaryArr)
    const broadcaststring = this.getBroadcastBinaryString(
      networkstring,
      hostIndexOfNetmask
    )
    const broadcastArr = this.getBroadcastBinaryArr(broadcaststring)
    const broadcast = this.formatBroadcast(broadcastArr)
    return broadcast
  },
  getAddressRangeStart() {
    const network = this.getNetwork()
    const networkArr = this.splitAddress(network)
    networkArr[3] = (parseInt(networkArr[3]) + 1).toString()
    return this.formatAddress(networkArr)
  },
  getAddressRangeLast() {
    const broadcast = this.getBroadcast()
    const broadcastArr = this.splitAddress(broadcast)
    broadcastArr[3] = (parseInt(broadcastArr[3]) - 1).toString()
    return this.formatAddress(broadcastArr)
  },
  run() {
    const network = this.getNetwork()
    const broadcast = this.getBroadcast()
    const firstHost = this.getAddressRangeStart()
    const lastHost = this.getAddressRangeLast()
    return [network, broadcast, firstHost, lastHost]
  }
}
const networkInfo = new NetworkInterface(
  ipAddress,
  this.cidrRes.netMask
).run()
// cidrRes 为 Vue 实例数据
this.cidrRes.netAddress = networkInfo[0]
this.cidrRes.broadcastAddress = networkInfo[1]
this.cidrRes.startAddress = networkInfo[2]
this.cidrRes.endAddress = networkInfo[3]

最终实现效果

https://web.woobx.cn/app/cidr-calculator
20200210081450.png

文章目录