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 }, '  ', { 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
相关推荐
本书是一本全面、深入介绍JavaScript语言的学习指南。本书共分四个部分,第1部分帮助读者快速入手,掌握基本的JavaScript编程要点;第2部分介绍JavaScript的发展和技术背景;第3部分深入探索JavaScript,介绍了语法...
《JavaScript权威指南》是JavaScript编程领域的一本经典之作,由著名技术作家David Flanagan撰写,被誉为"JavaScript犀牛书"。这本书深入浅出地讲解了JavaScript语言的核心概念、语法特性和高级特性,对于想要全面...
《JavaScript语言精粹》作为一本深入浅出讲解JavaScript编程语言的经典之作,对于想要提升自己JavaScript技能的开发者来说,无疑是一份宝贵的资源。本书由Douglas Crockford所著,他不仅是JSON格式的创始人,也是...
Author David Herman, with his years of experience on Ecma’s JavaScript standardization committee, illuminates the language’s inner workings as never before—helping you take full advantage of ...
在这个场景中,我们关注的是VS2015的安装过程中涉及到的证书问题以及两个特定的组件:JavaScript_ProjectSystem.msi和JavaScript_LanguageService.msi。 首先,关于“VS2015安装证书”,这通常是指安装过程中需要...
《JavaScript程序设计案例教程》课件(共13章)第1章 JavaScript程序设计案例教程.pdf《JavaScript程序设计案例教程》课件(共13章)第1章 JavaScript程序设计案例教程.pdf《JavaScript程序设计案例教程》课件(共13章)第...