Javascript

 

vue echarts

 

>npm install echarts@3.1.1 --save

 

在使用echarts@4.2.0-rc.2、echarts@2.2.8发现都有问题。使用echarts@4.2.0-rc.2时报：echarts.init is not a function。使用echarts@2.2.8时报：ComponentClass is not a constructor错误。

 

import echarts from 'echarts'

Vue.prototype.$echarts = echarts
Vue.use(echarts)

 

 

 

<template>
  <div class="container">
    <div id="stats" class="stats" style="width: 600px;height: 400px;">

    </div>
  </div>
</template>

<script>

  export default {
    
    data: () => ({}),
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('stats'))
        // 绘制图表
        myChart.setOption({
          title: { text: '在Vue中使用echarts' },
          tooltip: {},
          xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        });
      }
    }
  }

</script>

 

 

 

 

JS 实现I P地址分配

NetworkMgr = function() {
	
}
NetworkMgr.prototype = {
	getIpAddressClass: function(address) {
		var iaddress = this.toLong(address)
		return this.getIpAddressClass0(iaddress);
	}, 
	getIpAddressClass0: function(iaddress) {
//		var byte1 = iaddress >> 24;
		var byte1 = iaddress / Math.pow(2, 24); // used to replace prior method : 
											// var byte1 = iaddress >> 24;
		var clazz = null;
		if (byte1 > 0 && byte1 <= 127) 
			clazz = "A";
		else if (byte1 >= 128 && byte1 <= 191) 
			clazz = "B";
		else if (byte1 >= 192 && byte1 <= 223) 
			clazz = "C";
		else if (byte1 >= 224 && byte1 <= 255) 
			clazz = "D";
		return clazz;
	}, 
	
	getNetworkMaskLength: function(address) {
		var iaddress = this.toLong(address)
		return this.getNetworkMaskLength0(iaddress);
	}, 
	
	getNetworkMaskLength0: function(iaddress) {
//		var byte1 = iaddress >> 24;
		var byte1 = iaddress / Math.pow(2, 24); // used to replace prior method : 
											// var byte1 = iaddress >> 24;
		var length = -1;
		if (byte1 > 0 && byte1 <= 127) 
			length = 8;
		else if (byte1 >= 128 && byte1 <= 191) 
			length = 16;
		else if (byte1 >= 192 && byte1 <= 223) 
			length = 24;
		else if (byte1 >= 224 && byte1 <= 255) 
			length = 32;
		return length;
	}, 
		available: function(from, to, maskLength) {
			var network1 = null, network2 = null;
			try {
			network1 = this.getNetworkAddress(from, maskLength);
			network2 = this.getNetworkAddress(to, maskLength);
			} catch (e) {
				throw 'Not a abailable ip address segment';
			}
			var availables = new Array();
			if (network1 == null || network2 == null) 
			return availables;
//			var step = 2 * (32 - maskLength);
			var step = Math.pow(2, 32 - maskLength);
			var count = (network2 - network1) / step;
			var t = (network2 - network1) % step;
			if (t != 0) 
			count++;
			for (var i = 0; i <= count; i++) {
				availables.push(network1);
				network1 += step;
			}
			return availables;
		}, 
		availableSubnetAddress: function(address, addrMaskLength, maskLength) {
			if (typeof address != "string")
			throw 'Not a string type';
			var iaddress = this.toLong(address);
			
			return this.availableSubnetAddress0(iaddress, addrMaskLength, maskLength);
		}, 
		availableSubnetAddress0: function(iaddress, addrMaskLength, maskLength) {
			if (typeof addrMaskLength != "number" || typeof maskLength != "number")
			throw 'Not a number type';
			if (typeof iaddress != "number")
			throw 'Not a number type';
			
			var count = Math.pow(2, maskLength - addrMaskLength);
			var availables = new Array(count);
			for (var i = 0; i < count; i++) {
				availables[i] = iaddress + i * Math.pow(2, 32 - maskLength);
			}
			return availables;
		}, 
		
		getHostAddressArrange: function(address, maskLength) {
			return this.toIpAddr(address + 1) + " ～ " + 
    				this.toIpAddr(address + Math.pow(2, 32 - maskLength) - 2);
		}, 
		
		getEndIpAddress: function(startIpAddress, maskLength) {
			var iEndAddress = this.getEndAddress(startIpAddress, maskLength);
			return this.toIpAddr(iEndAddress);
		}, 
		getEndIpAddress0: function(iStartIpAddress, maskLength) {
			var iEndAddress = this.getEndAddress0(iStartIpAddress, maskLength);
			return this.toIpAddr(iEndAddress);
		}, 
		
		getEndAddress: function(startIpAddress, maskLength) {
			var iStartAddress = this.toLong(startIpAddress);
			return this.getEndAddress0(iStartAddress, maskLength);
		}, 
		getEndAddress0: function(iStartAddress, maskLength) {
//		    var iEndAddress = iStartAddress >> (32 - maskLength);
//		    iEndAddress = iEndAddress << (32 - maskLength);
			var iEndAddress = iStartAddress / Math.pow(2, (32 - maskLength));// used to replace prior method : 
																			 // var iEndAddress = iStartAddress >> (32 - maskLength);
			iEndAddress = iEndAddress * Math.pow(2, (32 - maskLength));      // used to replace prior method : 
																			 // iEndAddress = iEndAddress << (32 - maskLength);
		    iEndAddress += Math.pow(2, 32 - maskLength) - 1;
		    return iEndAddress;
		}, 
		
		toLong: function(ipAddr) {
			var s = ipAddr.split('.');
			if (s.length != 4) 
			throw 'Not a available ip format';
			var n = 0;
			for (var i = 0; i < s.length; i++) {
				var si = s[i];
				if (isNaN(si)) 
				throw 'Not a number type';
//				n = n << 8;
				n = n * Math.pow(2, 8); // used to replace prior method : n = n << 8;
				n = n + parseInt(si, 10);
				if (isNaN(n)) 
				throw 'Not a number type';
			}
			return n;
		}, 
		toIpAddr: function(_long) {
//			if (isNaN(number)) 
			if (typeof _long != "number")
			throw 'Not a number type';
			var b = _long.toString(2);
			if (b.length != 32) {
				for (var i = b.length + 1; i <= 32; i++) {
					b = '0' + b;
				}
			}
			var i = 0;
			var seg = -8;
			var s = '';
			while (i <= 3) {
				seg += 8;
				var sub = b.substr(seg, 8);
				var p = 0;
				for (var j = 0; j < sub.length; j++) {
					var tt = Math.pow(2, j);
					var jj = sub.charAt(sub.length - 1 - j);
					jj = parseInt(jj);
					p += jj * tt;
				}
				s = s + p;
				if (i != 3) 
					s = s + '.';
				i++;
			}
			return s;
		}, 
		toNetwork: function(_long, maskLength) {
			var ipAddr = this.toIpAddr(_long);
			return ipAddr + '/' + maskLength;
		}, 
		getNetworkAddress0: function(number, maskLength) {
//			if (isNaN(number) || maskLength) 
			if (typeof number != "number" || typeof maskLength != "number")
			throw 'Not a number type';
			var test = 2 << 1;
			test = 2 << 2;
			test = 2 << 3;
			test = 3 << 2;
			var t1 = Math.pow(2, 32) - 1;
			var t2 = Math.pow(2, 32 - maskLength) - 1;
			return number & (t1 - t2);
		}, 
		getNetworkAddress: function(ipAddr, maskLength) {
			var n = this.toLong(ipAddr);
			return this.getNetworkAddress0(n, maskLength);
		}, 
		getNetworkDestinationIpAddress: function(start, maskLength) {
			var n = this.toLong(start);
			n = n << (32 - maskLength);
			var t = Math.pow(2, 32 - maskLength) -1;
			n += t;
			return n;
		}
	}




JS 实现I P地址分配 二：

SubnetCalMgr = Ext.extend(Ext.Panel, {
 subnetInfoPanel: null, 
 subnetId: null, 
 
 initComponent: function() {
  SubnetCalMgr.superclass.initComponent.call(this);
  this._initialize();
 },
 _initialize: function() {
//  this.setLayout(new Ext.layout.FitLayout());
  this.initSubnetInfoPanel();
  this.add(this.subnetInfoPanel);
 },
 getContentPanel: function() {
  return this.contentPanel;
 }, 
 loadSubnetInfoData: function(storeData) {
  var grid = this.subnetInfoPanel;
  var el = grid.getEl();
  el.mask("数据加载中...");
     var task = new Ext.util.DelayedTask(function() {
   grid.getStore().loadData(storeData);
//   grid.el.unmask();
   el.unmask();
  }, this);
  task.delay(100);
 }, 
 initSubnetInfoPanel: function() {
  var scope = this;
  var createStore = function(arraydatasource) {
   var store = new Ext.data.SimpleStore({
    fields: [{
     name: "subnetAddress", type: "string"
    }, {
     name: 'maskLength', type: 'int'
    }, {
     name: 'networkAddress', type: 'string'
    }, {
     name: 'broadcastAddress', type: 'string'
    }, {
     name: 'hostSegArrange', type: 'string'
    }]
   });
   store.loadData(arraydatasource);
   return store;
  };
  var createColumnModel = function(plugins, header) {
   return new Ext.grid.ColumnModel([
          //plugins,
          //new Ext.grid.CheckboxSelectionModel(), 
          //new Ext.grid.RowSelectionModel({
    // singleSelect: true
    //}),
          {id: 'subnetAddress', header: "子网地址", width: 160, sortable: true, dataIndex: 'subnetAddress', hidden: false}, 
    {header: '掩码长度', width: 160, sortable: true, dataIndex: 'maskLength'}, 
    {header: '网络地址', width: 160, sortable: true, dataIndex: 'networkAddress'}, 
    {header: '广播地址', width: 160, sortable: true, dataIndex: 'broadcastAddress'}, 
    {header: '主机范围', width: 160, sortable: true, dataIndex: 'hostSegArrange'}
      ]);
  };
  var createRightGridPanel = function(groupId) {
   var acl = [];
   var store = createStore(acl);
   
   var cm = createColumnModel(null, '');
  
   var selects = [[-1, '请选择掩码长度(默认为24)'], 
    [8, '8'], [9, '9'], [10, '10'], [11, '11'], [12, '12'], 
    [13, '13'], [14, '14'], [15, '15'], [16, '16'], [17, '17'], 
    [18, '18'], [19, '19'], [20, '20'], [21, '21'], [22, '22'], 
    [23, '23'], [24, '24'], [25, '25'], [26, '26'], [27, '27'], 
    [28, '28'], [29, '29'], [30, '30'], [31, '31'], [32, '32']];
   var grid = new Ext.grid.GridPanel({
//    title: '子段信息', 
//    sm: new Ext.grid.CheckboxSelectionModel(),
    sm: new Ext.grid.RowSelectionModel(/*{
     singleSelect: true
    }*/),
          store: store, 
          cm: cm,
          stripeRows: true, 
          viewConfig: {
              forceFit: true
          },
          region: 'center', 
//          plugins: expander, 
          border: true, 
          margins: '0 0 0 0', 
          bodyStyle: 'padding:　0px;', 
          animCollapse: false, 
          buttonAlign: 'center', 
          tbar: new Ext.Toolbar(["网段地址：", {
           xtype: 'textfield', 
           id: 'byte1', 
           width: 50
          }, '.', {
           xtype: 'textfield', 
           id: 'byte2', 
           width: 50
          }, '.', {
           xtype: 'textfield', 
           id: 'byte3', 
           width: 50
          }, '.', {
           xtype: 'textfield', 
           id: 'byte4', 
           width: 50
          }, '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp', {
           xtype: 'combo', 
           id: 'subnetMaskLength', 
           typeAhead: true, 
           triggerAction: 'all', 
           store: new Ext.data.SimpleStore({
               fields: ['keyitem', 'valueitem'],
               data: selects
           }), 
           displayField: 'valueitem', 
           forceSelection: true, 
           name: 'valueitem', 
           valueField: 'keyitem', 
           value: -1, 
           mode: 'local', 
           editable: false
          }, {
           xtype: 'button', 
     text : "确定",
     iconCls : "icon-yes",
     handler : function(button, eventObject) {
      scope.onBtnOk();
     }
    }])
      });
      return grid;
  };
  this.subnetInfoPanel = createRightGridPanel();
 },
 onBtnOk: function() {
  var address = '';
  for (var i = 1; i <= 4; i++) {
   var bytei = Ext.getCmp('byte' + i).getValue();
   address = address + bytei + '.';
  }
  address = address.substr(0, address.length - 1);
  var subnetMaskLength = Ext.getCmp('subnetMaskLength').getValue();
  if (subnetMaskLength == -1) 
   subnetMaskLength = 24;
  
  var networkMgr = new NetworkMgr();
  var networkMaskLength = networkMgr.getNetworkMaskLength(address);
  var availables = networkMgr.availableSubnetAddress(
    address, 
    networkMaskLength, 
    subnetMaskLength);
  var storeData = [];
  for (var i = 0; i < availables.length; i++) {
   var subnetAddress = availables[i];
   var subnetIpAddress = networkMgr.toIpAddr(subnetAddress);
   storeData[i] = [
    subnetIpAddress, 
    subnetMaskLength, 
    subnetIpAddress, 
    networkMgr.getEndIpAddress0(subnetAddress, subnetMaskLength), 
    networkMgr.getHostAddressArrange(subnetAddress, subnetMaskLength)
   ]
  }
  this.loadSubnetInfoData(storeData);
 }, 
 getSubnetInfoPanel: function() {
  return this.subnetInfoPanel;
 }
});

 

RequireJS, SeaJS, CommonJS Modules/2.0, BravoJS, ECMAScript

 

 

AMD: 

https://github.com/amdjs/amdjs-api/wiki/AMD

 

CMD:

https://github.com/seajs/seajs/issues/242

 

 

CommonJS：

http://wiki.commonjs.org/wiki/CommonJS

 

 

http://www.ecma-international.org/publications/standards/Ecma-262.htm

http://www.ecma-international.org/ecma-262/9.0/index.html