http://tu.dog/
打开调试工具
我从未见过如此单身狗的js代码,仔细看看还挺通俗易懂。
js中使用中文变量名是否更优雅?
var 总视窗=this, 总文档=document, 文档正文=总文档.body, 浏览器=navigator, 弹窗=alert, 编码=encodeURIComponent, 数学=Math, 控制台=console, 用户系统, 稍后运行=setTimeout var 标贴样板=总文档.createElement('p') 标贴样板.className='标贴 隐藏' var 绑定动画结束事件=function(元素,回调函数){ 元素.addEventListener('webkitAnimationEnd',回调函数,0) 元素.addEventListener('mozAnimationEnd',回调函数,0) 元素.addEventListener('animationend',回调函数,0) }, 绑定缓动结束事件=function(元素,回调函数){ 元素.addEventListener('webkitTransitionEnd',回调函数,0) 元素.addEventListener('mozTransitionEnd',回调函数,0) 元素.addEventListener('transitionEnd',回调函数,0) }, 弹出浏览器提示窗口=function(标题,说明文字,图标地址){ if(!总视窗.webkitNotifications) return var 弹出窗=总视窗.webkitNotifications.createNotification(图标地址,标题,说明文字) 弹出窗.onshow=function(){ 稍后运行(function(){ 弹出窗.cancel() },7e3) } 弹出窗.onclick=function(){ 总视窗.focus() 弹出窗.cancel() } 弹出窗.replaceId='土狗提示' 弹出窗.show() }, 转义超文本标记语言=function(文本){ return 文本 .replace(/(^\s*)|(\s*$)/g,'') .replace(/&/g,'&') .replace(//g,'>') .replace(/\'/g,''') .replace(/\"/g,'"') }, 获取随机数=function(范围,调整){ 范围=范围||75 调整=调整||2 return 数学.floor(数学.random()*范围+调整) }, 根据文字调整大小=function(文本){ var 文本长度=文本.length if(文本长度==1) return 3.8 return .7+(4/文本长度) }, 删除标贴=function(父级元素){ if(this.className!='标贴') return this.className='标贴' if(父级元素=this.parentNode) 父级元素.removeChild(this) }, 二五五随机数=function(){ return 数学.floor(数学.random()*25)+225 },透明颜色值=function(){ return 'background-color:rgba('+二五五随机数()+','+二五五随机数()+','+二五五随机数()+',.8)' },展示标贴=function(标贴信息){ var 用户唯一号=标贴信息[0], 文本=标贴信息[1], 横向偏移=+标贴信息[2]||获取随机数(), 纵向偏移=+标贴信息[3]||获取随机数() var 标贴=标贴样板.cloneNode(1) 标贴.setAttribute('用户唯一号',用户唯一号) 标贴.innerHTML=转义超文本标记语言(文本) //为了解决火狐的 innerText 问题 换成了 innerHTML + 正则转义 T_T 标贴.style.cssText='left:'+横向偏移+'%;top:'+纵向偏移+'%;font-size:'+根据文字调整大小(文本)+'em;background-color:'+获取用户颜色(用户唯一号) 用户信息卡片震动(用户唯一号) var 用户信息=获取用户信息(用户唯一号) if(用户信息){ 总文档.title=用户信息[2]+': '+文本 //收藏图标.href='http://tp2.sinaimg.cn/'+用户信息[1]+'/180/1' 弹出浏览器提示窗口(文本,'来自 '+用户信息[2]+' 的消息',收藏图标.href) 控制台.log('%c'+用户信息[2],'background-color:rgb('+用户信息[3]+')',文本) } 绑定动画结束事件(标贴,删除标贴) 弹幕框.appendChild(标贴) return 标贴 }, 展示标贴们=function(返回值){ 返回值=返回值.split(/\n/) if(返回值.length>1&&初次获取首屏信息){ 初次获取首屏信息-- } var 指针=返回值.length, 临时变量, 每次运行函数=function(){ //临时变量=[返回值[指针].match(/^\d+/),返回值[指针].replace(/^\d+,/,'')] 指针-- 展示标贴(返回值[指针].split(/\t/)) if(指针>0) 稍后运行(每次运行函数,数学.floor(数学.random()*1500)) else{ //展示完一整组标贴之后 if(初次获取首屏信息) 网络隧道.send('√'+初次获取首屏信息) } } 每次运行函数() }, 超文本传输请求=function(地址,回调函数){ var 超文本传输请求=new XMLHttpRequest() 超文本传输请求.open('GET',地址,1) if(回调函数) 超文本传输请求.onload=function(){ 回调函数(超文本传输请求.responseText) } 超文本传输请求.send() }, 未登录时展示标贴=function(){ 超文本传输请求('x/?msg',展示标贴们) }, 用户们={}, 添加单条用户信息=function(用户信息){ 用户们[+用户信息[0]]=用户信息 }, 处理用户信息=function(用户们文本){ 用户们文本=用户们文本.split(/\n/) var 指针=用户们文本.length, 临时变量 while(指针--){ 临时变量=用户们文本[指针].split(' ') 添加单条用户信息(临时变量) if(+临时变量[4]) 用户上线(临时变量) } 初次获取用户信息=0 if(初次获取用户信息) 网络隧道.send('☺'+初次获取用户信息*10) },获取用户信息=function(用户唯一号){ var 返回值 if(返回值=用户们[用户唯一号]) return 返回值 return ['0','0','土狗','239,236,201'] },获取用户颜色=function(用户唯一号){ var 返回值 if(返回值=用户们[用户唯一号]) return 'rgba('+返回值[3]+',.8)' return 'rgba(239,236,201,.8)' },用户信息卡片震动=function(用户唯一号){ var 用户信息卡片=总视窗['用户编号'+用户唯一号] if(!用户信息卡片) return 用户信息卡片.className='用户卡片 震铃' } var 用户信息模板=总文档.createElement('p') 用户信息模板.className='用户卡片 转入' var 用户上线=function(用户信息){ var 用户唯一号=用户信息[0], 用户微博唯一号=用户信息[1], 用户昵称=用户信息[2], 用户颜色=用户信息[3] 控制台.log('%c'+用户信息[2],'background-color:rgb('+用户信息[3]+')',/上线了!/) if(用户信息卡片=总视窗['用户编号'+用户唯一号]) return 用户信息卡片.className='用户卡片' if(用户系统.me.uid==用户唯一号) return 用户信息卡片 添加单条用户信息(用户信息) //console.log(用户信息,/传入格式是这样的/) var 用户信息卡片=用户信息模板.cloneNode(1) 用户信息卡片.id='用户编号'+用户唯一号 用户信息卡片.innerHTML=' '+用户昵称+'' 绑定动画结束事件(用户信息卡片,function(){ this.className='用户卡片' }) //用户信息卡片.style.cssText='background:rgba('+用户颜色+',.8)' 在线列表.appendChild(用户信息卡片) return 用户信息卡片 },用户下线=function(用户信息){ var 用户信息卡片 if(!(用户信息卡片=总视窗['用户编号'+用户信息[0]])) return 控制台.log(/未找到这个在线用户/,用户信息) 用户信息卡片.className='用户卡片 隐藏' 控制台.log('%c'+用户信息[2],'background-color:rgb('+用户信息[3]+')',/下线了…/) return } var 网络隧道, 初次获取用户信息=1, 初次获取首屏信息=10, 打开网络隧道=function(身份钥匙){ 网络隧道=new WebSocket('ws://ws.smartgslb.com:11233/'+身份钥匙) 网络隧道.onopen=function(){ if(初次获取用户信息) 网络隧道.send('☺'+初次获取用户信息*10) if(初次获取首屏信息) 网络隧道.send('√'+初次获取首屏信息) 控制台.log(/网络隧道开启/) } 网络隧道.onmessage=function(事件){ //控制台.log(/ws MSG/,事件.data) var 文本=事件.data, 类型=文本.substr(0,1) if(类型=='☺'){ 处理用户信息(文本.substr(1)) }else if(类型=='✿'){ 用户上线(文本.substr(1).split(' ')) }else if(类型=='✖'){ 用户下线(文本.substr(1).split(' ')) }else{ 展示标贴们(文本) } } 网络隧道.onclose=function(){ 控制台.log(/网络隧道断线/) 打开网络隧道(身份钥匙) } 网络隧道.onerror=function(事件){ 控制台.log(/ERROR/,事件.data) } } 表单.onsubmit=function(事件){ 事件.preventDefault() var 文本=表单.文本框.value.replace(/(^\s+|\s+$)/g,'') if(!文本) return 表单.文本框.focus() if(!总视窗.用户系统||!用户系统.me){ 事件.preventDefault() 显示登陆框() return false } 表单.文本框.value='' 网络隧道.send('✎'+文本.replace(/\t/,' ')+' '+获取随机数()+' '+获取随机数(60,2)) } 表单.文本框.focus() 表单.文本框.onclick= 表单.文本框.ontouchstart=function(){ if(!总视窗.用户系统||!用户系统.me) return 显示登陆框() } var 加载脚本语言文件=function(链接地址,回调函数,代码标签){ 代码标签=总文档.createElement('script') 代码标签.src=链接地址 代码标签.onload=function(父级标签){ if(回调函数) 回调函数() if(父级标签=this.parentNode) 父级标签.removeChild(this) } 文档正文.appendChild(代码标签) } 加载脚本语言文件('//api.mouto.org/u.js',function(){ 用户系统=U 用户系统.init({ success:function(用户信息){ //控制台.log(/登录成功/,用户信息) if(!用户信息||!用户信息.avatar) return 弹窗('登录失败!!') 用户框.innerHTML=''+用户信息.name 打开网络隧道('6965_'+用户信息.uid) },error:function(){ 控制台.log(/登录失败/) },notlogin:function(){ 控制台.log(/并没有登录/) // 用户框.innerHTML='' // 登录按钮.onclick=function(){ // location.href='http://api.mouto.org/x/?a=towb&redirect='+编码(location.href) // } 未登录时展示标贴() } }) }) 加载脚本语言文件('//1.mouto.org/x.js') 加载脚本语言文件('前端/图片表情.js') var 用户代理=浏览器.userAgent 视口设置.content= 用户代理.match(/ipad/i)?'width=1024,user-scalable=no,minimal-ui': 用户代理.match(/iphone/i)?'width=620,user-scalable=no,minimal-ui': 'width=720' 稍后运行(function(){ 表单.className='' },2e3) var 显示登陆框=function(){ if(总视窗.用户系统&&用户系统.me) return 登录框.className='' 超文本传输请求('x/?usernum',function(总数){ 成员数量.innerHTML=总数 }) 表单.文本框.blur() 文档正文.focus() },隐藏登陆框=function(){ 登录框.className='隐藏' } 登录按钮.onclick=function(){ location.href='http://api.mouto.org/x/?a=towb&redirect='+编码(location.href) } 关闭登录框按钮.onclick=隐藏登陆框 // 绑定缓动结束事件(登录框,function(){ // console.log(this) // if(this.className=='隐藏'){ // this.className='隐藏 屏蔽' // } // }) if(总视窗.webkitNotifications) 总视窗.webkitNotifications.requestPermission() 加载脚本语言文件('//x.mouto.org/wb/up.js');
何为优雅?首先这个问题就很难回答,所以咱不说优雅,就说说中文变量名。 我很早在一篇关于效率的博客中提到,由于很多二杆子英语水平的程序员,定义了一堆不着边际的变量名,让代码晦涩难懂,大大降低了开发效率。在这种情况下,还不如用中文变量名,简捷明了,清晰易懂——目前至少我喜欢的语言中,Java、C#、JavaScript 等都支持中文变量名。
UP!
中英混排有点香港人说话的感觉,感受下。。
有什么必要吗? 个人觉得,在严谨的定义,说明方面,英文是要比中文好一点的。不过,萝卜白菜嘛。
不伦不类
毫无优雅感可言,除了中国人,世界上其他4/5的人完全理解不了,觉得优雅可能仅仅是英文水平不好吧。再说了,中文编码不同会不会造成乱码呢?
你们切换输入法的时候难道不觉得麻烦吗?
长见识了!!优雅到说不上,排版还是英文好点
何为优雅?首先这个问题就很难回答,所以咱不说优雅,就说说中文变量名。
我很早在一篇关于效率的博客中提到,由于很多二杆子英语水平的程序员,定义了一堆不着边际的变量名,让代码晦涩难懂,大大降低了开发效率。在这种情况下,还不如用中文变量名,简捷明了,清晰易懂——目前至少我喜欢的语言中,Java、C#、JavaScript 等都支持中文变量名。
然而,实际的情况,我们的项目中几乎只有在定义枚举值的时候使用中文,Why?
易懂是易懂了,但是写中文远比写英文麻烦。就输入来说,一个中文字词需要几个英文字母键来完成,如果要选词,还是中断思路去关注一下输入法的候选项。另外,写关键字要用英文,写内置函数要用英文,写变量名用中文,期间无数次中英切换,习惯好的人会用 Shift 或者 Ctrl+Space 快速切换,习惯没养成的人会去 Ctrl+Shift 轮循,如果输入法装得多,那是要疯的。
除此之外,Java、C#、JavaScript 等常用语言变量名都是区分大小写的,hello
和 Hello
就是两个不同的标识符,所以上述 3 种语言都有习惯性的约定,比如类名用 Pascal 命名,私有变量和局部变量用 Camcel 命名等,但中文完全不存在大小写的区分,所以,如果不加后缀,就不能一目了然了。如果加后缀,你想想,“西瓜类”、“苹果类” 看起来还是有些别扭的——如果有一个分类属性,叫“水果类”、“蔬菜类”……这到底是类还是类别呢……继续疯!
完全用中文的语言不是没有,比如易语言,很火了一阵子,但是现在,还是没怎么听说了。也许是因为我不在圈子里,也许是它真的没落了,因为不了解,所以对此不作评论……
但总的来说,中文参与编程,一点问题也没有,只是需要注意,不要为了中文而中文,要把中文用到适当的地方。
我就是土狗的作者,这是我的恶搞系列之一
@边城狂人 同学基本上也说明了大部分,中文作为变量名在英文编程环境大体上是得不偿失的。但除了英文编程环境下的不适应之外,中文作为母语、有先天的低学习成本优势在:
变量命名时不需要翻译成英文
减少中文说明注释
变量类型可通过词性表达 function
可用动词、普通变量可用名词 等...
于是在土狗之后又做了如下尝试:
「易网页」 http://front.dog/e/