HappyLifeLife.com
HappyLifeLife.com
HappyLifeLife.com 登录 HappyLifeLife.com 注册 HappyLifeLife.com
爱新闻 爱生活
爱分享 爱学习
爱读书 爱探索
爱音乐 爱宇宙
爱电影 爱地球
爱阅读 爱世界
爱运动 爱科技
爱学习

<< < - > >>
JS
JS语言技巧方法
www.HappyLiveLife.com 收藏 www.happylivelife.com
HappyLifeLife.com HappyLifeLife.com HappyLifeLife.com HappyLifeLife.com HappyLifeLife.com HappyLifeLife.com HappyLifeLife.com HappyLifeLife.com HappyLifeLife.com HappyLifeLife.com
编辑
/是否合法IP地址/export function validateIP(rule, value,callback) { if(value==''||value==undefined||value==null){ callback(); }else { const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/; if ((!reg.test(value)) && value != '') { callback(new Error('请输入正确的IP地址')); } else { callback(); } }}/ 是否手机号码或者固话/export function validatePhoneTwo(rule, value, callback) { const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;; if (value == '' || value == undefined || value == null) { callback(); } else { if ((!reg.test(value)) && value != '') { callback(new Error('请输入正确的电话号码或者固话号码')); } else { callback(); } }}/ 是否固话/export function validateTelphone(rule, value,callback) { const reg =/0\d{2}-\d{7,8}/; if(value==''||value==undefined||value==null){ callback(); }else { if ((!reg.test(value)) && value != '') { callback(new Error('请输入正确的固话(格式:区号+号码,如010-1234567)')); } else { callback(); } }}/ 是否手机号码/export function validatePhone(rule, value,callback) { const reg =/^[1][3,4,5,7,8][0-9]{9}$/; if(value==''||value==undefined||value==null){ callback(); }else { if ((!reg.test(value)) && value != '') { callback(new Error('请输入正确的电话号码')); } else { callback(); } }}/ 是否身份证号码/export function validateIdNo(rule, value,callback) { const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; if(value==''||value==undefined||value==null){ callback(); }else { if ((!reg.test(value)) && value != '') { callback(new Error('请输入正确的身份证号码')); } else { callback(); } }}/ 是否邮箱/export function validateEMail(rule, value,callback) { const reg =/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/; if(value==''||value==undefined||value==null){ callback(); }else{ if (!reg.test(value)){ callback(new Error('请输入正确的邮箱地址')); } else { callback(); } }}/ 合法uri/export function validateURL(textval) { const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)@)((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))$/; return urlregex.test(textval);}/验证内容是否英文数字以及下划线/export function isPassword(rule, value, callback) { const reg =/^[_a-zA-Z0-9]+$/; if(value==''||value==undefined||value==null){ callback(); } else { if (!reg.test(value)){ callback(new Error('密码仅由英文字母,数字以及下划线组成')); } else { callback(); } }}/自动检验数值的范围/export function checkMax20000(rule, value, callback) { if (value == '' || value == undefined || value == null) { callback(); } else if (!Number(value)) { callback(new Error('请输入[1,20000]之间的数字')); } else if (value < 1 || value > 20000) { callback(new Error('请输入[1,20000]之间的数字')); } else { callback(); }}//验证数字输入框最大数值,32767export function checkMaxVal(rule, value,callback) { if (value < 0 || value > 32767) { callback(new Error('请输入[0,32767]之间的数字')); } else { callback(); }}//验证是否1-99之间export function isOneToNinetyNine(rule, value, callback) { if (!value) { return callback(new Error('输入不可以为空')); } setTimeout(() => { if (!Number(value)) { callback(new Error('请输入正整数')); } else { const re = /^[1-9][0-9]{0,1}$/; const rsCheck = re.test(value); if (!rsCheck) { callback(new Error('请输入正整数,值为【1,99】')); } else { callback(); } } }, 0);}// 验证是否整数export function isInteger(rule, value, callback) { if (!value) { return callback(new Error('输入不可以为空')); } setTimeout(() => { if (!Number(value)) { callback(new Error('请输入正整数')); } else { const re = /^[0-9][1-9][0-9]$/; const rsCheck = re.test(value); if (!rsCheck) { callback(new Error('请输入正整数')); } else { callback(); } } }, 0);}// 验证是否整数,非必填export function isIntegerNotMust(rule, value, callback) { if (!value) { callback(); } setTimeout(() => { if (!Number(value)) { callback(new Error('请输入正整数')); } else { const re = /^[0-9][1-9][0-9]$/; const rsCheck = re.test(value); if (!rsCheck) { callback(new Error('请输入正整数')); } else { callback(); } } }, 1000);}// 验证是否是[0-1]的小数export function isDecimal(rule, value, callback) { if (!value) { return callback(new Error('输入不可以为空')); } setTimeout(() => { if (!Number(value)) { callback(new Error('请输入[0,1]之间的数字')); } else { if (value < 0 || value > 1) { callback(new Error('请输入[0,1]之间的数字')); } else { callback(); } } }, 100);}// 验证是否是[1-10]的小数,即不可以等于0export function isBtnOneToTen(rule, value, callback) { if (typeof value == 'undefined') { return callback(new Error('输入不可以为空')); } setTimeout(() => { if (!Number(value)) { callback(new Error('请输入正整数,值为[1,10]')); } else { if (!(value == '1' || value == '2' || value == '3' || value == '4' || value == '5' || value == '6' || value == '7' || value == '8' || value == '9' || value == '10')) { callback(new Error('请输入正整数,值为[1,10]')); } else { callback(); } } }, 100);}// 验证是否是[1-100]的小数,即不可以等于0export function isBtnOneToHundred(rule, value, callback) { if (!value) { return callback(new Error('输入不可以为空')); } setTimeout(() => { if (!Number(value)) { callback(new Error('请输入整数,值为[1,100]')); } else { if (value < 1 || value > 100) { callback(new Error('请输入整数,值为[1,100]')); } else { callback(); } } }, 100);}// 验证是否是[0-100]的小数export function isBtnZeroToHundred(rule, value, callback) { if (!value) { return callback(new Error('输入不可以为空')); } setTimeout(() => { if (!Number(value)) { callback(new Error('请输入[1,100]之间的数字')); } else { if (value < 0 || value > 100) { callback(new Error('请输入[1,100]之间的数字')); } else { callback(); } } }, 100);}// 验证端口是否在[0,65535]之间export function isPort(rule, value, callback) { if (!value) { return callback(new Error('输入不可以为空')); } setTimeout(() => { if (value == '' || typeof(value) == undefined) { callback(new Error('请输入端口值')); } else { const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/; const rsCheck = re.test(value); if (!rsCheck) { callback(new Error('请输入在[0-65535]之间的端口值')); } else { callback(); } } }, 100);}// 验证端口是否在[0,65535]之间,非必填,isMust表示是否必填export function isCheckPort(rule, value, callback) { if (!value) { callback(); } setTimeout(() => { if (value == '' || typeof(value) == undefined) { //callback(new Error('请输入端口值')); } else { const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/; const rsCheck = re.test(value); if (!rsCheck) { callback(new Error('请输入在[0-65535]之间的端口值')); } else { callback(); } } }, 100);}/ 小写字母/export function validateLowerCase(str) { const reg = /^[a-z]+$/; return reg.test(str);}/保留2为小数/export function validatetoFixedNew(str) { return str ;}/ 验证key/// export function validateKey(str) {// var reg = /^[a-z_\-:]+$/;// return reg.test(str);// }/ 大写字母/export function validateUpperCase(str) { const reg = /^[A-Z]+$/; return reg.test(str);}/ 大小写字母/export function validatAlphabets(str) { const reg = /^[A-Za-z]+$/; return reg.test(str);} function set(key,value){ var curTime = new Date().getTime(); localStorage.setItem(key,JSON.stringify({data:value,time:curTime})); } function get(key,exp){ var data = localStorage.getItem(key); var dataObj = JSON.parse(data); if (new Date().getTime() - dataObj.time>exp) { console.log('信息已过期'); //alert("信息已过期") }else{ //console.log("data="+dataObj.data); //console.log(JSON.parse(dataObj.data)); var dataObjDatatoJson = JSON.parse(dataObj.data) return dataObjDatatoJson; }/是否合法IP地址/export function validateIP(rule, value,callback) { if(value==''||value==undefined||value==null){ callback(); }else { const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/; if ((!reg.test(value)) && value != '') { callback(new Error('请输入正确的IP地址')); } else { callback(); } }}/ 是否手机号码或者固话/export function validatePhoneTwo(rule, value, callback) { const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;; if (value == '' || value == undefined || value == null) { callback(); } else { if ((!reg.test(value)) && value != '') { callback(new Error('请输入正确的电话号码或者固话号码')); } else { callback(); } }}/ 是否固话/export function validateTelphone(rule, value,callback) { const reg =/0\d{2}-\d{7,8}/; if(value==''||value==undefined||value==null){ callback(); }else { if ((!reg.test(value)) && value != '') { callback(new Error('请输入正确的固话(格式:区号+号码,如010-1234567)')); } else { callback(); } }}/ 是否手机号码/export function validatePhone(rule, value,callback) { const reg =/^[1][3,4,5,7,8][0-9]{9}$/; if(value==''||value==undefined||value==null){ callback(); }else { if ((!reg.test(value)) && value != '') { callback(new Error('请输入正确的电话号码')); } else { callback(); } }}/ 是否身份证号码/export function validateIdNo(rule, value,callback) { const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; if(value==''||value==undefined||value==null){ callback(); }else { if ((!reg.test(value)) && value != '') { callback(new Error('请输入正确的身份证号码')); } else { callback(); } }}/ 是否邮箱/export function validateEMail(rule, value,callback) { const reg =/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/; if(value==''||value==undefined||value==null){ callback(); }else{ if (!reg.test(value)){ callback(new Error('请输入正确的邮箱地址')); } else { callback(); } }}/ 合法uri/export function validateURL(textval) { const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)@)((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))$/; return urlregex.test(textval);}/验证内容是否英文数字以及下划线/export function isPassword(rule, value, callback) { const reg =/^[_a-zA-Z0-9]+$/; if(value==''||value==undefined||value==null){ callback(); } else { if (!reg.test(value)){ callback(new Error('密码仅由英文字母,数字以及下划线组成')); } else { callback(); } }}/自动检验数值的范围/export function checkMax20000(rule, value, callback) { if (value == '' || value == undefined || value == null) { callback(); } else if (!Number(value)) { callback(new Error('请输入[1,20000]之间的数字')); } else if (value < 1 || value > 20000) { callback(new Error('请输入[1,20000]之间的数字')); } else { callback(); }}//验证数字输入框最大数值,32767export function checkMaxVal(rule, value,callback) { if (value < 0 || value > 32767) { callback(new Error('请输入[0,32767]之间的数字')); } else { callback(); }}//验证是否1-99之间export function isOneToNinetyNine(rule, value, callback) { if (!value) { return callback(new Error('输入不可以为空')); } setTimeout(() => { if (!Number(value)) { callback(new Error('请输入正整数')); } else { const re = /^[1-9][0-9]{0,1}$/; const rsCheck = re.test(value); if (!rsCheck) { callback(new Error('请输入正整数,值为【1,99】')); } else { callback(); } } }, 0);}// 验证是否整数export function isInteger(rule, value, callback) { if (!value) { return callback(new Error('输入不可以为空')); } setTimeout(() => { if (!Number(value)) { callback(new Error('请输入正整数')); } else { const re = /^[0-9][1-9][0-9]$/; const rsCheck = re.test(value); if (!rsCheck) { callback(new Error('请输入正整数')); } else { callback(); } } }, 0);}// 验证是否整数,非必填export function isIntegerNotMust(rule, value, callback) { if (!value) { callback(); } setTimeout(() => { if (!Number(value)) { callback(new Error('请输入正整数')); } else { const re = /^[0-9][1-9][0-9]$/; const rsCheck = re.test(value); if (!rsCheck) { callback(new Error('请输入正整数')); } else { callback(); } } }, 1000);}// 验证是否是[0-1]的小数export function isDecimal(rule, value, callback) { if (!value) { return callback(new Error('输入不可以为空')); } setTimeout(() => { if (!Number(value)) { callback(new Error('请输入[0,1]之间的数字')); } else { if (value < 0 || value > 1) { callback(new Error('请输入[0,1]之间的数字')); } else { callback(); } } }, 100);}// 验证是否是[1-10]的小数,即不可以等于0export function isBtnOneToTen(rule, value, callback) { if (typeof value == 'undefined') { return callback(new Error('输入不可以为空')); } setTimeout(() => { if (!Number(value)) { callback(new Error('请输入正整数,值为[1,10]')); } else { if (!(value == '1' || value == '2' || value == '3' || value == '4' || value == '5' || value == '6' || value == '7' || value == '8' || value == '9' || value == '10')) { callback(new Error('请输入正整数,值为[1,10]')); } else { callback(); } } }, 100);}// 验证是否是[1-100]的小数,即不可以等于0export function isBtnOneToHundred(rule, value, callback) { if (!value) { return callback(new Error('输入不可以为空')); } setTimeout(() => { if (!Number(value)) { callback(new Error('请输入整数,值为[1,100]')); } else { if (value < 1 || value > 100) { callback(new Error('请输入整数,值为[1,100]')); } else { callback(); } } }, 100);}// 验证是否是[0-100]的小数export function isBtnZeroToHundred(rule, value, callback) { if (!value) { return callback(new Error('输入不可以为空')); } setTimeout(() => { if (!Number(value)) { callback(new Error('请输入[1,100]之间的数字')); } else { if (value < 0 || value > 100) { callback(new Error('请输入[1,100]之间的数字')); } else { callback(); } } }, 100);}// 验证端口是否在[0,65535]之间export function isPort(rule, value, callback) { if (!value) { return callback(new Error('输入不可以为空')); } setTimeout(() => { if (value == '' || typeof(value) == undefined) { callback(new Error('请输入端口值')); } else { const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/; const rsCheck = re.test(value); if (!rsCheck) { callback(new Error('请输入在[0-65535]之间的端口值')); } else { callback(); } } }, 100);}// 验证端口是否在[0,65535]之间,非必填,isMust表示是否必填export function isCheckPort(rule, value, callback) { if (!value) { callback(); } setTimeout(() => { if (value == '' || typeof(value) == undefined) { //callback(new Error('请输入端口值')); } else { const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/; const rsCheck = re.test(value); if (!rsCheck) { callback(new Error('请输入在[0-65535]之间的端口值')); } else { callback(); } } }, 100);}/ 小写字母/export function validateLowerCase(str) { const reg = /^[a-z]+$/; return reg.test(str);}/保留2为小数/export function validatetoFixedNew(str) { return str ;}/ 验证key/// export function validateKey(str) {// var reg = /^[a-z_\-:]+$/;// return reg.test(str);// }/ 大写字母/export function validateUpperCase(str) { const reg = /^[A-Z]+$/; return reg.test(str);}/ 大小写字母/export function validatAlphabets(str) { const reg = /^[A-Za-z]+$/; return reg.test(str);}生命周期的阶段:beforeCreate: 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。created:实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。beforeDestory:实例销毁之前调用。在这一步,实例仍然完全可用。destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。//获取canvas容器var can = document.getElementById('canvas');//创建一个画布var ctx = can.getContext('2d');绘制圆形var draw = function(x, y, r, start, end, color, type) { var unit = Math.PI / 180; ctx.beginPath(); ctx.arc(x, y, r, start unit, end unit); ctx[type + 'Style'] = color; ctx.closePath(); ctx[type]();}参数解释:x,y-圆心;start-起始角度;end-结束角度;color-绘制颜色;type-绘制类型('fill'和'stroke')。实例如下图所示:绘制三角形var draw = function(x1, y1, x2, y2, x3, y3, color, type) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.lineTo(x3, y3); ctx[type + 'Style'] = color; ctx.closePath(); ctx[type]();}参数解释:x1(2、3),y1(2、3)-三角形的三个点的坐标;color-绘制颜色;type-绘制类型('fill'和'stroke')。实例如下图所示:绘制(圆角)矩形var draw = function(x, y, width, height, radius, color, type){ ctx.beginPath(); ctx.moveTo(x, y+radius); ctx.lineTo(x, y+height-radius); ctx.quadraticCurveTo(x, y+height, x+radius, y+height); ctx.lineTo(x+width-radius, y+height); ctx.quadraticCurveTo(x+width, y+height, x+width, y+height-radius); ctx.lineTo(x+width, y+radius); ctx.quadraticCurveTo(x+width, y, x+width-radius, y); ctx.lineTo(x+radius, y); ctx.quadraticCurveTo(x, y, x, y+radius); ctx[type + 'Style'] = color || params.color; ctx.closePath(); ctx[type]();}参数解释:x,y-左上角点的坐标;width、height-宽高;radius-圆角;color-绘制颜色;type-绘制类型('fill'和'stroke')。实例如下图所示:绘制多边形var drawPolygon = function(ctx, conf){ var x = conf && conf.x || 0; //中心点x坐标 var y = conf && conf.y || 0; //中心点y坐标 var num = conf && conf.num || 3; //图形边的个数 var r = conf && conf.r || 100; //图形的半径 var width = conf && conf.width || 5; var strokeStyle = conf && conf.strokeStyle; var fillStyle = conf && conf.fillStyle; //开始路径 ctx.beginPath(); var startX = x + r Math.cos(2Math.PI0/num); var startY = y + r Math.sin(2Math.PI0/num); ctx.moveTo(startX, startY); for(var i = 1; i <= num; i++) { var newX = x + r Math.cos(2Math.PIi/num); var newY = y + r Math.sin(2Math.PIi/num); ctx.lineTo(newX, newY); } ctx.closePath(); //路径闭合 if(strokeStyle) { ctx.strokeStyle = strokeStyle; ctx.lineWidth = width; ctx.lineJoin = 'round'; ctx.stroke(); } if(fillStyle) { ctx.fillStyle = fillStyle; ctx.fill(); }}参数说明:ctx: canvas画布conf: 配置项,提供以下一些配置x: 中心点横坐标y: 中心点纵坐标num: 多边形的边数r:多边形的半径长度width:多边形线的宽度strokeStyle:边线的颜色fillStyle:填充的颜色上图效果的代码如下:上图1的代码:drawPolygon(ctx, { num: 6, r: 100, strokeStyle: 'blue', fillStyle: '#9da'})上图2的代码:drawPolygon(ctx, { num: 4, r: 150, strokeStyle: 'red', width: 4})上图3的代码:drawPolygon(ctx, { x: 800, y: 250, num: 10, fillStyle: '#000'})1.console.assert()方法 //示例代码 //声明一个名为People的构造函数 function People(name,age,performance){ this.name = name; this.age = age; this.performance = performance; } //引用上面的构造函数People,声明变量people var people =new People("john",20,[80,90,99]); //调用console.assert()方法 console.assert( people.performance.length == 3, "长度不准确"); //说明 //上面在调用console.assert()的意思是: //如果people.performance.length == 3返回的结果是true, //就不输出"长度不准确"; //如果people.performance.length == 3返回的结果是false, //就输出"长度不准确";2.console.clear()方法//示例代码 console.log("john"); console.clear(); console.log("is a good man"); //说明 console.clear()主要的作用是: 清空浏览器中的打印输出面板,也就是清空浏览器里面的console3.console.count()方法//实力代码 //定义一个简单的加法函数addition function addition(a, b) { //调用console.count()方法 console.count('addition function called times:'); return a + b; } //声明一个变量 var sum = 0; for(var i = 0; i < 20; i++) { if(i % 2 == 0) { sum = addition(sum, i); } } console.log(sum); //说明 //console.count()方法用于统计代码块被执行的次数, //console.count()参数是可选的标题,方便阅读4.console.debug()方法,console.info()方法 console.warn()方法 , console.error()方法 console.log()方法//console以上方法支持类似C语言的占位符, //如 %s=>字符串, %d=>整数, %f=>浮点数, %o=>object //示例代码 console.log('I %s more than %d %o.', 'want', 3, {animal: 'dogs', color: 'black'}); console.debug('I like', {'a': 'Dog', 'b': 'Cat'}, 'A'); console.debug('I %s more than %d %o.', 'want', 3, {animal: 'dogs', color: 'black'}); console.info('I like', {'a': 'Dog', 'b': 'Cat'}, 'A'); console.info('I %s more than %d %o.', 'want', 3, {animal: 'dogs', color: 'black'}); console.warn('I like', {'a': 'Dog', 'b': 'Cat'}, 'A'); console.warn('I %s more than %d %o.', 'want', 3, {animal: 'dogs', color: 'black'}); console.error('I like', {'a': 'Dog', 'b': 'Cat'}, 'A'); console.error('I %s more than %d %o.', 'want', 3, {animal: 'dogs', color: 'black'}); //说明 //上面几个方法比较简单,就不细说了5.console.dir()方法//示例代码 //声明一个名为People的构造函数 function People(name,age,performance){ this.name = name; this.age = age; this.performance = performance; } //引用上面的构造函数People,声明变量people var people =new People("john",20,[80,90,99]); //调用console.dir()方法 console.dir( people ); //说明 //在调试JavaScript程序时,有时需要转储对象的详细信息。 //通过手工编写JavaScript代码可以完成这一工作: //针对对象的属性进行循环,将循环到的每一个属性值打印出来; //可见,这一过程是比较繁琐的,但是在具备调试工具的浏览器上, //通过console.dir()方法可以轻松完成5.console.dirxml()方法//示例代码 console.log(document.getElementById('myDiv')); console.dirxml(document.getElementById('myDiv')); //说明 输出网页的某个节点(node)包含的html/xml代码, 与console.log()功能相似6.console.group()方法console.groupCollapsed()方法 console.groupEnd()方法 //示例代码 console.group('第一组'); console.log('1.1'); console.log('1.2'); console.log('1.3'); console.groupEnd(); console.groupCollapsed('第二组'); console.log('2.1'); console.log('2.2'); console.log('2.3'); console.groupEnd(); //说明 //console.group()默认展开 //console.groupCollapsed()默认关闭 //console.groupEnd()结束分组7.console.profile()方法 console.profileEnd()方法//示例代码 function AllFunction(){ for(var i=0;i<100;i++){ functionA(10000); } functionB(10000); } function functionA(count){ for(var i=0;iWelcome等效于js代码window.location.href="http://www.jb51.net"; //在同当前窗口中打开窗口 2.超链接Welcome等效于js代码window.open("http://www.jb51.net"); //在另外新建窗口中打开窗口3、关闭新窗口:this.window.opener =null; window.close();一、从服务端发来的json字符串,怎么才能作为JavaScript对象(JSON对象)在web端调用呢?1、如果使用jQuery,就很方便了,可以在ajax一系列函数中,把参数Datatype传json即可,返回的data即为JSON对象。PS:如果要对表单处理为json字符串,可以使用.serialize()与.serializeArray()处理,如果要作为URL调用,则可以使用jQuery.param()处理。2、$.parseJSON( jsonstr)3、浏览器自带的JSON.parse(jsonstr)4、使用字符串转代码功能  eval('(' + jsonstr + ')');(不推荐,会执行代码)5、使用json官方的json.js  parse()方法二、json对象转字符串1、JSON.stringify(jsonobj);2、obj.toJSONString() 与java对象互转1. //把java 对象列表转换为json对象数组,并转为字符串 JSONArray array = JSONArray.fromObject(userlist); String jsonstr = array.toString();2.//把java对象转换成json对象,并转化为字符串 JSONObject object = JSONObject.fromObject(invite); Log4jInit.ysulogger.debug(object.toString());3.//把JSON字符串转换为JAVA 对象数组 String personstr = getRequest().getParameter("persons"); JSONArray json = JSONArray.fromObject(personstr); List persons = (List)JSONArray.toCollection(json, nvoidPerson.class);4.//把JSON字符串转换为JAVA 对象 str = "{\"lendperson\":\"李四\",\"lendcompany\":\"有限公司\",\"checkperson\":\"李四\", \"lenddate\":\"2010-07-19T00:00:00\",\"lendcounts\":4,\" passports\":[{\"passportid\":\"d\",\"name\":\"李豫川\",\"passporttype\":\"K\"}, {\"passportid\":\"K9051\",\"name\":\"李平\",\"passporttype\":\"K\"}, {\"passportid\":\"K90517\",\"name\":\"袁寒梅\",\"passporttype\":\"K\"}, {\"passportid\":\"K905199\",\"name\":\"贺明\",\"passporttype\":\"K\"}]}"; JSONObject jsonobject = JSONObject.fromObject(str); PassportLendsEntity passportlends = null; try { //获取一个json数组 JSONArray array = jsonobject.getJSONArray("passports"); //将json数组 转换成 List泛型 List list = new ArrayList(); for (int i = 0; i < array.size(); i++) { JSONObject object = (JSONObject)array.get(i); PassPortForLendsEntity passport = (PassPortForLendsEntity)JSONObject.toBean(object, PassPortForLendsEntity.class); if(passport != null){ list.add(passport); } } //转换PassportLendsEntity 实体类 passportlends = (PassportLendsEntity)JSONObject.toBean(jsonobject, PassportLendsEntity.class);vueonxxxx 写法v-on:xxx=""如:JavaScript编写类的几种写法以及优缺点1、构造函数方式  用构造函数模拟"类",在其内部用this关键字指代实例对象。基本语法:function 类名(){ this.属性名;//公共属性 var 属性名;//私有属性 /凡是定义类的公共属性和公共方法都要使用this/ //定义类的公共函数 this.函数名=function(){ ..... } //定义类的私有函数 function 函数名(){    ...... }} /定义一个Person类/ function Person(_name,_age,_salary){ //Person类的公开属性,类的公开属性的定义方式是:”this.属性名“ this.name=_name; //Person类的私有属性,类的私有属性的定义方式是:”var 属性名“ var age=_age;//私有属性 var salary=_salary;//私有属性 /定义私有属性Age的对外公开访问方法/ this.setAge = function(intAge) { age = intAge; } /定义私有属性Age的对外公开访问方法/ this.getAge = function() { return age; } //定义Person类的公开方法(特权方法),类的公开方法的定义方式是:”this.functionName=function(){.....}“ this.Show=function(){ document.writeln("在公开方法里面访问类的私有属性是允许的,age="+age+"\t"+"salary="+salary);//在公开方法里面访问类的私有属性是允许的 } //公共方法 this.publicMethod = function(){ document.writeln("在公开方法里面访问类的私有方法是允许的"); privateFn();//在公开方法里面调用类的私有方法 privateFn2();//在公开方法里面调用类的私有方法 } / 定义Person类的私有方法(内部方法), 类的私有方法的定义方式是:”function functionName(){.....}“, 或者 var functionName=function(){....} / function privateFn(){ document.writeln("我是Person类的私有函数privateFn"); } var privateFn2=function(){ document.writeln("我是Person类的私有函数privateFn2"); } } var p1 = new Person("孤傲苍狼",24,2300); var p2 = new Person("白虎神皇",24,2300); document.write("
");     document.writeln("p1 instanceof Person的结果是:"+(p1 instanceof Person));//p1是Person类的实例,结果是true     document.writeln("p2 instanceof Person的结果是:"+(p2 instanceof Person));//p2是Person类的实例,结果是true     //当==两边的内容是对象或者是对象的函数属性时,则比较内存地址是否相等     document.writeln("当==两边的内容是对象或者是对象的函数属性时,则比较内存地址是否相等");     document.writeln("比较p1和p2这两个对象的show方法的内存地址是否一样:p1.show== p2.show的结果是:"+(p1.show == p2.show));//false     document.writeln("p1.show == p2.show的结果是:"+(p1.show == p2.show)+",这证明p1对象和p2对象不是共享一个show方法,在内存中show方法的代码有2份,存放在两块内存区域");    document.writeln("name是Person类定义的public属性,可以使用类的对象去直接访问类的public属性");    document.writeln("p1.name="+p1.name);//访问公有属性,这是可以正常访问的    document.writeln("age和salary是Person类定义的private属性,不能使用类的对象去直接访问类私有属性,这是访问不了的,结果都是undefined");    document.writeln("p1.age="+p1.age+","+"p1.salary="+p1.salary)//不能使用类的对象去直接访问类私有属性,这是访问不了的,结果都是undefined    p1.show();//调用类的公共函数,这次允许的    p1.publicMethod();//调用类的公共函数,这次允许的    p1.setAge(24);//使用public方法setAge方法为私有属性age赋值    document.writeln("使用public方法getAge方法获取私有属性age的值,p1.getAge()="+p1.getAge());//使用getAge方法获取私有属性age的值    //document.writeln("p1.privateFn():"+p1.privateFn()+" p1.privateFn2():"+p1.privateFn2());//不能使用类的对象去调用类的私有方法,这里会报错”对象不支持此属性或者方法    document.write("
");    这种方式的优点是:可以根据参数来构造不同的对象实例 ,每个对象的属性一般是不相同的,缺点是构造每个实例对象时,方法不能共享,Person类里面定义的那些方法,p1对象有一份,p2也有一份,那么在内存中就得开辟两块内存空间来分别存储p1的方法和p2的方法,这样就造成了内存的浪费。对于一个类的不同实例对象,这些对象的属性一般是不相同的,但是方法是相同的,所以节约内存的做法就是把方法放到内存的一块区域中存放,然后每个实例对象都从这块内存中取出方法。2、原型方式 需要说明的是,使用原型方式编写JavaScript类是无法给类添加私有属性和私有方法的,使用原型方式添加的属性和方法都是public的。写法一: /定义一个Person类/ function Person(_name,_age,_weight,_height){ this.init(_name,_age,_weight,_height); } /使用原型的方式定义Person类的public属性:name,age,weight,height,使用原型的方式添加的属性都是public的/ Person.prototype.name; Person.prototype.age; Person.prototype.weight; Person.prototype.height; /使用原型的方式给Person类添加public方法,使用原型的方式添加的方法都是public的/ /使用原型的方式给Person类添加init方法/ Person.prototype.init = function(_name,_age,_weight,_height) { if(_name != undefined && _age!=undefined && _weight!=undefined && _height!=undefined){ this.name = _name; this.age = _age; this.weight=_weight; this.height=_height; document.writeln("this.name="+this.name+",this.age="+this.age+",this.weight="+this.weight+",this.height="+this.height); } } /使用原型的方式给Person类添加show方法/ Person.prototype.show = function(){ document.writeln("show method"); } document.write("
");     var p1 = new Person("孤傲苍狼",24,115,160);     var p2 = new Person("白虎神皇",25,120,170);     var p3 = new Person();     p3.init("玄天邪帝",26,130,180);//调用public方法init初始化p3对象     document.writeln("p1 instanceof Person的结果是:"+(p1 instanceof Person));//p1是Person类的实例,结果是true     document.writeln("p2 instanceof Person的结果是:"+(p2 instanceof Person));//p2是Person类的实例,结果是true     document.writeln("p3 instanceof Person的结果是:"+(p3 instanceof Person));//p3是Person类的实例,结果是true     //当==两边的内容是对象或者是对象的函数属性时,则比较内存地址是否相等    document.writeln("当==两边的内容是对象或者是对象的函数属性时,则比较内存地址是否相等");    document.writeln("比较p1和p2这两个对象的show方法的内存地址是否一样:p1.show == p2.show的结果是:"+(p1.show == p2.show));//true    document.writeln("p1.show == p2.show的结果是:"+(p1.show == p2.show)+",这证明p1对象和p2对象共享一个show方法,在内存中show方法的代码只有一份,存放在内存的一块区域");//true    document.writeln("p1.name="+p1.name+",p1.age="+p1.age+",p1.weight="+p1.weight+",p1.height="+p1.height);//访问公有属性,这是可以正常访问的    document.writeln("p2.name="+p2.name+",p2.age="+p2.age+",p2.weight="+p2.weight+",p2.height="+p2.height);//访问公有属性,这是可以正常访问的    p3.name="灭世魔尊";//为公共属性重新赋值    document.writeln("p3.name="+p3.name);//访问公有属性,这是可以正常访问的    p1.show();//调用类的公共函数,这次允许的    document.write("
");复制代码测试结果:  写法二:使用原型方式给类定义public属性和public方法更加优雅的写法,我个人推荐使用这种方式,这种方式看起来比较舒服 /定义类Person2/ function Person2(){ } /使用原型方式给类定义public属性和public方法更加优雅的写法/ Person2.prototype = { name:"",//public属性 age:0,//public属性 weight:0,//public属性 height:0,//public属性 /public方法/ init:function(_name,_age,_weight,_height) { this.name = _name; this.age = _age; this.weight=_weight; this.height=_height; document.writeln("this.name="+this.name+",this.age="+this.age+",this.weight="+this.weight+",this.height="+this.height); }, /public方法/ show:function(){ document.writeln("show method"); } }; document.write("
");     var p2_1 = new Person2();     var p2_2 = new Person2();     p2_1.init("孤傲苍狼",24,115,160);     p2_2.init("白虎神皇",25,120,170);     document.writeln("p2_1.name="+p2_1.name+",p2_1.age="+p2_1.age+",p2_1.weight="+p2_1.weight+",p2_1.height="+p2_1.height);//访问公有属性,这是可以正常访问的     document.writeln("p2_2.name="+p2_2.name+",p2_2.age="+p2_2.age+",p2_2.weight="+p2_2.weight+",p2_2.height="+p2_2.height);//访问公有属性,这是可以正常访问的     document.writeln("p2_1 instanceof Person2的结果是:"+(p2_1 instanceof Person2));//p2_1是Person2类的实例,结果是true     document.writeln("p2_2 instanceof Person2的结果是:"+(p2_2 instanceof Person2));//p2_2是Person2类的实例,结果是true    //当==两边的内容是对象或者是对象的函数属性时,则比较内存地址是否相等    document.writeln("当==两边的内容是对象或者是对象的函数属性时,则比较内存地址是否相等");    document.writeln("比较p2_1和p2_2这两个对象的init方法的内存地址是否一样:p2_1.init == p2_2.init的结果是:"+(p2_1.init == p2_2.init));//true    p2_1.name="灭世魔尊";//为公共属性重新赋值    document.writeln("p2_1.name="+p2_1.name);//访问公有属性,这是可以正常访问的    p2_1.show();//调用类的公共函数,这次允许的    document.write("
");   原型方式的优点:所有对象实例都共享类中定义的方法,这样就没有造成内存浪费。缺点,第一,不能定义类的私有属性和私有方法,第二,给在创建对象,给对象的属性初始化时,需要额外写一个初始化对象的方法。3、构造函数+原型  构造函数方式和原型方式都有各自的优缺点,因此可以把这两种方式合并起来,用构造函数方式来定义类的属性(public属性,private属性),用原型方式来定义类的方法(public方法)。互补不足,这就有了第三种写法。复制代码 /定义一个Person类/ function Person(_name,_age,_salary){ //在Person类内部定义类的public属性和private属性以及private方法 //Person类的公开属性,类的公开属性的定义方式是:”this.属性名“ this.name=_name; //Person类的私有属性,类的私有属性的定义方式是:”var 属性名“ var age=_age;//私有属性,只能在类内部使用 var salary=_salary;//私有属性,只能在类内部使用 / 定义Person类的私有方法(内部方法),只能在类内部使用 类的私有方法的定义方式是:”function functionName(){.....}“, 或者 var functionName=function(){....} / function privateFn(){ document.write("
");            document.writeln("我是Person类的私有属性age,只能在Person类内部使用,初始化后age="+age);            document.writeln("我是Person类的私有函数privateFn,只能在Person类内部使用");            document.write("
"); } var privateFn2=function(){ document.write("
");            document.writeln("我是Person类的私有属性salary,只能在Person类内部使用,初始化后salary="+salary);            document.writeln("我是Person类的私有函数privateFn2,只能在Person类内部使用");            document.write("
"); } privateFn();//在Person类内部调用私有方法 privateFn2();//在Person类内部调用私有方法 } //使用prototype原型方式定义的方法(public方法)是无法访问类的私有属性和私有方法的 //使用prototype原型方式定义Person类的方public方法 Person.prototype={ setName:function(_name){ this.name = _name; //privateFn();//不能调用Person类定义的私有方法privateFn(),会报错:缺少对象 }, getName:function(){ return this.name; }, show:function(){ document.writeln("公开方法show"); }, //公共方法 publicMethod:function(){ document.writeln("公开方法publicMethod"); } }; var p1 = new Person("孤傲苍狼",24,2300); var p2 = new Person("白虎神皇",25,3000); document.write("
");     document.writeln("p1 instanceof Person的结果是:"+(p1 instanceof Person));//p1是Person类的实例,结果是true     document.writeln("p2 instanceof Person的结果是:"+(p2 instanceof Person));//p2是Person类的实例,结果是true     //当==两边的内容是对象或者是对象的函数属性时,则比较内存地址是否相等     document.writeln("当==两边的内容是对象或者是对象的函数属性时,则比较内存地址是否相等");     document.writeln("比较p1和p2这两个对象的show方法的内存地址是否一样:p1.show== p2.show的结果是:"+(p1.show == p2.show));//true     document.writeln("p1.show == p2.show的结果是:"+(p1.show == p2.show)+",这证明p1对象和p2对象共享一个show方法,在内存中show方法的代码有1份,存放在1块内存区域");    document.writeln("name是Person类定义的public属性,可以使用类的对象去直接访问类的public属性");    document.writeln("p1.name="+p1.name);//访问公有属性,这是可以正常访问的    document.writeln("age和salary是Person类定义的private属性,不能使用类的对象去直接访问类私有属性,这是访问不了的,结果都是undefined");    document.writeln("p1.age="+p1.age+","+"p1.salary="+p1.salary)//不能使用类的对象去直接访问类私有属性,这是访问不了的,结果都是undefined    p1.show();//调用类的公共函数,这次允许的    p1.publicMethod();//调用类的公共函数,这次允许的    p1.setName("玄天邪帝");//调用类的公共函数设置为name属性重新赋值    document.writeln("p1.getName="+p1.getName());    //document.writeln("p1.privateFn():"+p1.privateFn()+" p1.privateFn2():"+p1.privateFn2());//不能使用类的对象去调用类的私有方法,这里会报错”对象不支持此属性或者方法    document.write("
");  第三种方式通过前两种方式的结合,算是达到了一个比较理想的写法了,可以通过传参构造对象实例,对象实例都共享同一份方法不造成内存浪费。第三种方式在开发中用得最多,我本人也是采用这种方式来编写JavaScript类。如何使用chrome自带的Javascript调试工具 将写好的Javascript代码用chrome打开。在页面,单击右键,并且选择“审查元素”。弹出窗体,如图所示:如何使用chrome自带的Javascript调试工具 - bluesky - 我的博客然后,点击“Resources”标签,如图所示:如何使用chrome自带的Javascript调试工具 然后点击“enable resource tracking”,导入源文件,并且选择“Script”标签,如下:添加断点的方法就是在所在的代码行的数字上双击即可!!debug控制方式:首先是刷新调试的网页,即重新载入代码。此时弹出Jscript标签页面,并且中止在断点处。
* 声明:本文由其作者或媒体撰写,观点仅代表其本身,不代表本站立场。
编辑
HappyLifeLife.com HappyLifeLife.com HappyLifeLife.com HappyLifeLife.com HappyLifeLife.com HappyLifeLife.com HappyLifeLife.com HappyLifeLife.com HappyLifeLife.com HappyLifeLife.com
 
<< < - > >>
[JS][*] [GIT][*] [Web][*] [C][*] [Android][*] [JAVA][*] [0][*] [TL][*] [DB][*] [O][*] [3D][*] [PAS][*] [IOS][*] [算法][*] [地球][*] [学习方法][*] [探索][*] [宇宙][*] [Linux][*] [阅读秘诀][*] [考试技巧][*] [...]
天天快乐生活[HappyLifeLife.com]
欢迎来访 快乐空间 热点新闻 我的分享 读书频道 七彩生活 精彩世界 快乐搜索 
ICP备15040518 | ©1999-2018 HappyLiveLife.com 版权所有 | 服务 | 爱新闻 | 爱分享 | 在线搜索 | 招贤纳士
欢迎来访 快乐空间 热点新闻 我的分享 读书频道 七彩生活 精彩世界 快乐搜索 
ICP备15040518 | ©1999-2018 HappyLiveLife.com 版权所有 | 服务 | 爱新闻 | 爱分享 | 在线搜索 | 招贤纳士