js中使用中文变量名是否更优雅？

Question

http://tu.dog/
打开调试工具

我从未见过如此单身狗的js代码，仔细看看还挺通俗易懂。
js中使用中文变量名是否更优雅？

var 
总视窗=this,
总文档=document,
文档正文=总文档.body,
浏览器=navigator,
弹窗=alert,
编码=encodeURIComponent,
数学=Math,
控制台=console,
用户系统,
稍后运行=setTimeout

var 
标贴样板=总文档.createElement('div')
标贴样板.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,'&lt;')
        .replace(/>/g,'&gt;')
        .replace(/\'/g,'&#39;')
        .replace(/\"/g,'&quot;')
},
获取随机数=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('div')
用户信息模板.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='<img src="http://tp2.sinaimg.cn/'+用户微博唯一号+'/180/1"> '+用户昵称+'<i style="background:rgb('+用户颜色+')"></i>'


    绑定动画结束事件(用户信息卡片,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='<img src="'+用户信息.avatar.replace(/\/50\//,'/180/')+'">'+用户信息.name

            打开网络隧道('6965_'+用户信息.uid)
            
        },error:function(){
            控制台.log(/登录失败/)

        },notlogin:function(){
            控制台.log(/并没有登录/)

            // 用户框.innerHTML='<button id="登录按钮">参与讨论</button>'
            // 登录按钮.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');

Answer 1

我就是土狗的作者，这是我的恶搞系列之一

存在即合理

@边城狂人 同学基本上也说明了大部分，中文作为变量名在英文编程环境大体上是得不偿失的。但除了英文编程环境下的不适应之外，中文作为母语、有先天的低学习成本优势在：

1. 变量命名时不需要翻译成英文

2. 减少中文说明注释

3. 变量类型可通过词性表达 function 可用动词、普通变量可用名词 等...

理想的中文编程语言至少是不需要切换输入法的

于是在土狗之后又做了如下尝试:
「易网页」 http://front.dog/e/

Answer 2

何为优雅？首先这个问题就很难回答，所以咱不说优雅，就说说中文变量名。

我很早在一篇关于效率的博客中提到，由于很多二杆子英语水平的程序员，定义了一堆不着边际的变量名，让代码晦涩难懂，大大降低了开发效率。在这种情况下，还不如用中文变量名，简捷明了，清晰易懂——目前至少我喜欢的语言中，Java、C#、JavaScript 等都支持中文变量名。

然而，实际的情况，我们的项目中几乎只有在定义枚举值的时候使用中文，Why？

易懂是易懂了，但是写中文远比写英文麻烦。就输入来说，一个中文字词需要几个英文字母键来完成，如果要选词，还是中断思路去关注一下输入法的候选项。另外，写关键字要用英文，写内置函数要用英文，写变量名用中文，期间无数次中英切换，习惯好的人会用 Shift 或者 Ctrl+Space 快速切换，习惯没养成的人会去 Ctrl+Shift 轮循，如果输入法装得多，那是要疯的。

除此之外，Java、C#、JavaScript 等常用语言变量名都是区分大小写的，hello 和 Hello 就是两个不同的标识符，所以上述 3 种语言都有习惯性的约定，比如类名用 Pascal 命名，私有变量和局部变量用 Camcel 命名等，但中文完全不存在大小写的区分，所以，如果不加后缀，就不能一目了然了。如果加后缀，你想想，“西瓜类”、“苹果类” 看起来还是有些别扭的——如果有一个分类属性，叫“水果类”、“蔬菜类”……这到底是类还是类别呢……继续疯！

完全用中文的语言不是没有，比如易语言，很火了一阵子，但是现在，还是没怎么听说了。也许是因为我不在圈子里，也许是它真的没落了，因为不了解，所以对此不作评论……

但总的来说，中文参与编程，一点问题也没有，只是需要注意，不要为了中文而中文，要把中文用到适当的地方。

Answer 3

中英混排有点香港人说话的感觉，感受下。。

Answer 4

如果你写的js页面中包含大量的中文业务术语时, 你用那蹩脚的英文声明变量名试试看, 这个时候你就会发现中文变量的优雅之处了!

Answer 5

长见识了！！优雅到说不上，排版还是英文好点

Answer 6

你们切换输入法的时候难道不觉得麻烦吗？

Answer 7

毫无优雅感可言，除了中国人，世界上其他4/5的人完全理解不了，觉得优雅可能仅仅是英文水平不好吧。再说了，中文编码不同会不会造成乱码呢？

Answer 8

不伦不类

Answer 9

有什么必要吗？ 个人觉得，在严谨的定义，说明方面，英文是要比中文好一点的。不过，萝卜白菜嘛。

Answer 10

一堆英文代码里面有一堆中文变量，看不出什么优雅

Answer 11

写英文就优雅，中文就不优雅？如果你英文不溜还真不如写中文。比如ClassSelect和班级选择你觉得哪个优雅？ClassSelect被外国人看到可能会被笑吧。

Answer 12

何为优雅？首先这个问题就很难回答，所以咱不说优雅，就说说中文变量名。

我很早在一篇关于效率的博客中提到，由于很多二杆子英语水平的程序员，定义了一堆不着边际的变量名，让代码晦涩难懂，大大降低了开发效率。在这种情况下，还不如用中文变量名，简捷明了，清晰易懂——目前至少我喜欢的语言中，Java、C#、JavaScript 等都支持中文变量名。

UP!