`
lobin
  • 浏览: 425290 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论
阅读更多

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

 

 

 

0
0
分享到:
| C
评论

相关推荐

    深入理解JavaScript系列

    本书是一本全面、深入介绍JavaScript语言的学习指南。本书共分四个部分,第1部分帮助读者快速入手,掌握基本的JavaScript编程要点;第2部分介绍JavaScript的发展和技术背景;第3部分深入探索JavaScript,介绍了语法...

    head first JavaScript源码

    《Head First JavaScript源码》是2010年出版的一本中文版JavaScript学习书籍的源码,这本书以其独特的视觉设计和易理解的方式深入浅出地介绍了JavaScript编程语言。JavaScript是一种广泛应用于网页和网络应用的脚本...

    JavaScript权威指南(JavaScript犀牛书一本)

    《JavaScript权威指南》是JavaScript编程领域的一本经典之作,由著名技术作家David Flanagan撰写,被誉为"JavaScript犀牛书"。这本书深入浅出地讲解了JavaScript语言的核心概念、语法特性和高级特性,对于想要全面...

    VS2015安装证书,JavaScript_ProjectSystem.msi,JavaScript_LanguageService.msi

    在这个场景中,我们关注的是VS2015的安装过程中涉及到的证书问题以及两个特定的组件:JavaScript_ProjectSystem.msi和JavaScript_LanguageService.msi。 首先,关于“VS2015安装证书”,这通常是指安装过程中需要...

    JavaScript学习指南 高清 PDF

    JavaScript,一种广泛应用于Web开发的脚本语言,是前端开发的核心技术之一。这份"JavaScript学习指南"高清PDF,无疑为想要深入理解JavaScript的初学者或有一定基础的开发者提供了宝贵的资源。下面,我们将深入探讨...

    《JavaScript程序设计案例教程》课件(共13章)第1章 JavaScript程序设计案例教程.pdf

    《JavaScript程序设计案例教程》课件(共13章)第1章 JavaScript程序设计案例教程.pdf《JavaScript程序设计案例教程》课件(共13章)第1章 JavaScript程序设计案例教程.pdf《JavaScript程序设计案例教程》课件(共13章)第...

    JavaScript全栈教程 (廖雪峰) 完整版PDF

    简单地说,JavaScript是一种运行在浏览器中的解释型的编程语言。在Web世界里,只有JavaScript能跨平台、跨浏览器驱动网 页,与用户交互。 《JavaScript全栈教程》是小白的零基础JavaScript全栈教程。从基础入门在...

    JavaScript之Math对象(源代码)

    JavaScript之Math对象(源代码)JavaScript之Math对象(源代码)JavaScript之Math对象(源代码)JavaScript之Math对象(源代码)JavaScript之Math对象(源代码)JavaScript之Math对象(源代码)JavaScript之Math对象...

    web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码

    web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页...

    javascript试题(附答案)

    JavaScript是一种广泛应用于网页和网络应用的编程语言,尤其在客户端脚本方面扮演着核心角色。这份"javascript试题(附答案)"是为初学者设计的,旨在帮助他们更好地理解和掌握JavaScript的基础知识。 一、变量与数据...

    ArcGis-for-javaScript最全中文API.pdf

    ArcGIS JavaScript API 介绍与示例 ArcGIS JavaScript API 是 ESRI 提供的一种基于 JavaScript 的开发工具,允许开发者创建交互式的 Web 地图应用程序。本文将对 ArcGIS JavaScript API 进行详细的介绍,并提供多个...

    JavaScript 动态网页设计期末大作业CHASMISH眼镜网(纯手打,高分项目).zip

    JavaScript 动态网页设计期末大作业CHASMISH眼镜网(纯手打,高分项目)。 JavaScript 动态网页设计期末大作业CHASMISH眼镜网(纯手打,高分项目)。 JavaScript 动态网页设计期末大作业CHASMISH眼镜网(纯手打,...

    [JavaScript权威指南(第6版)]

    《JavaScript权威指南(第6版)》主要讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增...

    jQuery JavaScript与CSS开发入门经典

    jQuery将JavaScript编程量精简为寥寥数行代码,使JavaScript变得更直观,更富魅力。iQuery还允许同时为一个或多个元素设置样式,使得通过JavaScript操纵CSS变得分外轻松。 在这本面向项目的精品书籍的指引下,即使是...

    HTML+CSS+Javascript详细手册大全 含9个chm文档资料合集

    3- JavaScript参考手册.chm 4- JavaScript参考手册中文版.chm 5- Javascript高级教程.CHM 6- JavaScript使用手册.chm 7- 网页制作完全手册.chm 8- 样式表滤镜中文手册.CHM 9- 样式表中文手册2.0.CHM

    JavaScript基础教程(第8版) 高清版 mobi

    《javascript基础教程(第8版)》循序渐进地讲述了javascript 及相关的css、dom、ajax、jquery 等技术。书中从javascript 语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并...

    JavaScript DOM编程艺术(第2版pdf)+源代码

    JavaScript DOM编程艺术(第2版)是一本深受程序员喜爱的JavaScript技术书籍,专注于讲解如何使用JavaScript与Document Object Model(DOM)进行交互。DOM是Web页面的结构化表示,它允许我们通过编程方式操纵HTML和XML...

    JavaScript权威指南(第6版)(中文版)

    《JavaScript权威指南(第6版)》全面介绍了JavaScript语言的核心,以及Web浏览器中实现的遗留和标准的DOM。它运用了一些复杂的例子,说明如何处理验证表单数据、使用cookie、创建可移植的DHTML动画等常见任务。...

    JavaScript基础语法(ppt)

    JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)...

Global site tag (gtag.js) - Google Analytics