核心只要两行即可实现添加或移除className

<div id="abc" class="same new yes">1111111</div>

改进版 只有一行

function removeClass(value){
	var kls,reg=1>0 &&(kls=this.className,reg=new RegExp('(^| )'+value+'( |$)'),reg.test(this.className) && (this.className=(kls.replace(reg,'$1')).replace(/ $/,''))); 
	return this;
};
function addClass(value){
	var reg=1>0 &&(reg=new RegExp('(^| )'+value+'( |$)'),reg.test(this.className) || (this.className==='' ? (this.className=value) : (this.className+=(' '+value))));
	return this;
};
	
///removeClass.call(document.getElementById('abc'),'new');
//addClass.call(document.getElementById('abc'),['new saw try']) 一次添加多个样式 
addClass.call(addClass.call(removeClass.call(document.getElementById('abc'),'new'),'game'),'beta');

javascript确实很有意思 语法灵活 就看怎么玩

评论

31 楼 stoneskin 2011-05-11  

:哭笑
写javascript的也是猿。。。。
我们很多猿都是从写html过来的。。
现在有时还时不时回去写点script,改改css.

30 楼 jamesmos 2011-05-04  

enix2212 写道

tiannet 写道

enix2212 写道

而且我不认为 这个是对自己量身定做 试想谁会写class的时候去敲回车 就算有可能 但这个肯定不是所提倡的编码方式 我们没有为别人的错误买单 多开发99%的代码 而且我说过 我不是在写类库 没必要考虑所有人的感受

给你点建议：别人给你指出代码的问题其实是在帮助你，应该感谢才对，可楼主似乎很生气？这种行为要不得。

另外，对于写程序来说，强调的就是严谨啊！既然语法允许换行，那就应该考虑这种情况啊。
试想一下，项目组的某个成员正好用了你的这个函数，然后又刚好不小心把className换了行，那他得花费多长时间去找原因啊？
我们程序员写的大部分代码，不都是为了应对使用者的疏忽、不正常操作么？

在这个问题上猿还是回避吧

只能我们狮直接讨论 猿什么时候会写html了

我觉得你分这么开是真没必要的。话说javascript虽然在浏览器上跑，而且大部分时间都用来做交互和界面，但其实也算得上编程语言了。没有程序员的严谨，吃亏是迟早的事。

29 楼 enix2212 2011-05-04  

tiannet 写道

enix2212 写道

而且我不认为 这个是对自己量身定做 试想谁会写class的时候去敲回车 就算有可能 但这个肯定不是所提倡的编码方式 我们没有为别人的错误买单 多开发99%的代码 而且我说过 我不是在写类库 没必要考虑所有人的感受

给你点建议：别人给你指出代码的问题其实是在帮助你，应该感谢才对，可楼主似乎很生气？这种行为要不得。

另外，对于写程序来说，强调的就是严谨啊！既然语法允许换行，那就应该考虑这种情况啊。
试想一下，项目组的某个成员正好用了你的这个函数，然后又刚好不小心把className换了行，那他得花费多长时间去找原因啊？
我们程序员写的大部分代码，不都是为了应对使用者的疏忽、不正常操作么？

在这个问题上猿还是回避吧

只能我们狮直接讨论 猿什么时候会写html了

28 楼 tiannet 2011-05-04  

enix2212 写道

而且我不认为 这个是对自己量身定做 试想谁会写class的时候去敲回车 就算有可能 但这个肯定不是所提倡的编码方式 我们没有为别人的错误买单 多开发99%的代码 而且我说过 我不是在写类库 没必要考虑所有人的感受

给你点建议：别人给你指出代码的问题其实是在帮助你，应该感谢才对，可楼主似乎很生气？这种行为要不得。

另外，对于写程序来说，强调的就是严谨啊！既然语法允许换行，那就应该考虑这种情况啊。
试想一下，项目组的某个成员正好用了你的这个函数，然后又刚好不小心把className换了行，那他得花费多长时间去找原因啊？
我们程序员写的大部分代码，不都是为了应对使用者的疏忽、不正常操作么？

27 楼 dfbdfbdfb 2011-05-04  

支持楼主，有些人就是喜欢不看帖子的重点，鸡蛋里挑骨头，显摆

26 楼 leelege 2011-05-03  

楼主这么喜欢三元运算符，可以尝试多个条件下对三元运算符进行嵌套，那写出来的代码过一阵再去看……啧啧

25 楼 cpdw 2011-05-03  

这种问题有必要争个脸红脖子粗吗？无聊啊

24 楼 vb2005xu 2011-05-02  

// css class relative
this.hasClass = function(name) {
var re = new RegExp('(^| )' + name + '( |$)');
return re.test(this.ele.className) ;
};
this.addClass = function(name) {return this.toggleClass(name,true) ;};
this.removeClass = function(name) {return this.toggleClass(name,false) ;};
this.toggleClass = function (name,cond) {
if (typeof name == __undef) this.ele.className = '' ;
else {
var re = new RegExp('(^| )' + name + '( |$)');
var had = re.test(this.ele.className) ;
if (typeof cond != __undef){
if (cond){
if (!had) this.ele.className += ' ' + name;
}else
if (had) this.ele.className = this.ele.className.replace(re, ' ');
}else
this.ele.className = had ? this.ele.className.replace(re, ' ') : this.ele.className + ' ' + name ;

re = had = null ;
}
return this ;
};

23 楼 enix2212 2011-05-02  

前端代码是为了看明白么 典型的程序猿的思维 前端代码很多时候就是为了安全 让人看不懂甚至去混淆 我这个已经封装完了 传递的参数也很明确 拿去用就好了 没必要去了解内部运作 jQuery的理念也是 统一接口 内部的高耦合使用者没必要了解 不看jquery源码能写出漂亮代码？ 这个有不是写教科书 有必要写20行再加上注释 让别人了解怎么工作的么 较少复杂程度 写上注释 那是服务器语言 前端脚本上线前必须删除注释 压缩代码 混淆 不是一个纯正的FE相信你们也不会了解 服务器语言会经过编译等等手段 前端代码怎么实现加密 只能通过这些手段 莫非我脚本里面写上 我这用了个jsonp数据 是个公开接口 你也可以用我们公司的数据 而且我还告不了你 这样才算好代码？


请问 你们讨论前看我后面更新的代码了没有

比如说 让你去生成一个字符串10次
你是用for 生成 还是以下方法有技术含量

String.prototype.repeat=function(a){
   return (new Array(a+1)).join(this);
};

alert('ab'.repeat(5));




编码 做事每个人都有自己的理念
职业也有规矩
前端代码的要求就是少 快 好 省
也许我现在还全部做不到
但是我希望大家能角色代入 不要以程序员的思维来对待

22 楼 jamesmos 2011-05-02  

rainsilence 写道

function addClass(value){  
    var reg=new RegExp('(^| )'+value+'( |$)');  
    reg.test(this.className) || (this.className==='' ? (this.className=value) : (this.className+=(' '+value)));  
    return this;  
}

改为

function addClass(value){  
    (this.className.indexOf(value) != -1) || (this.className==='' ? (this.className=value) : (this.className+=(' '+value)));  
    return this;  
}

更好
帮你省了一行，而且复杂度下降了一个层次

你写的这个在功能上是不满足要求的，很简单的例子就是尝试给className为"sampleClass"的元素添加"sample"

21 楼 rainsilence 2011-05-02  

function addClass(value){  
    var reg=new RegExp('(^| )'+value+'( |$)');  
    reg.test(this.className) || (this.className==='' ? (this.className=value) : (this.className+=(' '+value)));  
    return this;  
}

改为

function addClass(value){  
    (this.className.indexOf(value) != -1) || (this.className==='' ? (this.className=value) : (this.className+=(' '+value)));  
    return this;  
}

更好
帮你省了一行，而且复杂度下降了一个层次

20 楼 hite 2011-05-01  

int08h 写道

算了，每个人都有自己的坚持自己的理念，编程说低端点就是敲敲键盘，说高端点其实是每个人自己的哲学，也没啥好争的

风度啊！如此涵养。关注你

19 楼 zhouYunan2010 2011-05-01  

jamesmos 写道

enix2212 写道

为的是把10行代码搞成一行 现在又要搞回去？ 我写样式肯定不会敲回车 如果有需要 你自行修改 再说 我也不相信你每次写样式都会敲回车吧 那这些判断 有何意义

你这种缩短代码的方式是用逻辑运算符和三元运算符来代替条件判断，最后是一行长过别人三行，效率还不一定高，意义大么？你发个自己写的东西在这里说有多短多短，结果是为你自己的需求量身定做的，别人要用还要自己进行逻辑上的完善，再短又有何意义？

hello world 写道

对啊，我也这样认为

18 楼 qianshuiqs 2011-05-01  

作为万年潜水员，我忍不住问问，你写这个方法的同时有考虑到了可读性了吗，可能是我以前没看过用三元运算符代理if/else的写法，正则表达式什么的都没什么，关键是这个三元运算符到底什么意思我看了半天，这样子做似乎也并没有减少多少代码量，还增加了理解难度。

17 楼 int08h 2011-05-01  

三元运算和if/else生成的语法树是一样的，这个没啥好讨论的吧……
jQuery在前端向来是被认为可读性极差、可用性极高的库，从使用的角度来说jQuery是优秀的，但其兼容性也是无上的，就好比这个className的问题，jQuery在升级到1.5的时候，还特地把\t作为分隔符考虑了进去
但是jQuery作为源码学习是不合适的，远不如prototype/underscore/Ext/tangram/kissy/qwrap等库，所谓的“代码竟然能这样写”很多时候其实是bad smell而已

16 楼 jamesmos 2011-04-30  

enix2212 写道

其实 if else  三元 逻辑运算的本质都是在求布尔的运算 只要得到布尔值就能进行运算了 所以 简化if else 都是有意义的
我这个大的表达式不止使用了 三元 逻辑 还有连续运算 尤其这个连续运算 我觉得这个才是这个出彩的地方 而且 声明变量 赋值 连续运算可以一行完成 这个语言真的是很棒

而且看过jquery源码 有时候会拍桌 擦 代码还能这样写 有点这种意思

而且 没有更充分的证据 我能相信的肯定是ncz或者高性能建站


而且我不认为 这个是对自己量身定做 试想谁会写class的时候去敲回车 就算有可能 但这个肯定不是所提倡的编码方式 我们没有为别人的错误买单 多开发99%的代码 而且我说过 我不是在写类库 没必要考虑所有人的感受

代码不一定是手工写出来的。比如使用模板编译出的html文档，完全有可能出现各种你觉得不合理的现象。当然，你觉得到那时候出现问题再来改，那也是可以的；但如果这个工作不是由你亲自来做了呢？你的接手人就不一定能立马想到问题出在哪里。

15 楼 enix2212 2011-04-30  

其实 if else  三元 逻辑运算的本质都是在求布尔的运算 只要得到布尔值就能进行运算了 所以 简化if else 都是有意义的
我这个大的表达式不止使用了 三元 逻辑 还有连续运算 尤其这个连续运算 我觉得这个才是这个出彩的地方 而且 声明变量 赋值 连续运算可以一行完成 这个语言真的是很棒

而且看过jquery源码 有时候会拍桌 擦 代码还能这样写 有点这种意思

而且 没有更充分的证据 我能相信的肯定是ncz或者高性能建站


而且我不认为 这个是对自己量身定做 试想谁会写class的时候去敲回车 就算有可能 但这个肯定不是所提倡的编码方式 我们没有为别人的错误买单 多开发99%的代码 而且我说过 我不是在写类库 没必要考虑所有人的感受

14 楼 jamesmos 2011-04-30  

客户端代码的短是有意义，但在脚本压缩和客户端缓存的作用下，这种程度的缩短（十行缩短到五行，结果只节省了5个字节）所产生的意义是非常有限的。当然，你能够根据自己的需求牺牲一些通用性而进一步缩短，对你自己来说这是完全值得肯定的（这也是我所说的量身定做的意思）。而如果你在应对自己的需求进行缩减处理的过程中有很巧妙的地方，和大家分享出来也是很有价值的行为。

13 楼 jamesmos 2011-04-30  

enix2212 写道

jamesmos 写道

enix2212 写道

为的是把10行代码搞成一行 现在又要搞回去？ 我写样式肯定不会敲回车 如果有需要 你自行修改 再说 我也不相信你每次写样式都会敲回车吧 那这些判断 有何意义

你这种缩短代码的方式是用逻辑运算符和三元运算符来代替条件判断，最后是一行长过别人三行，效率还不一定高，意义大么？你发个自己写的东西在这里说有多短多短，结果是为你自己的需求量身定做的，别人要用还要自己进行逻辑上的完善，再短又有何意义？

三元没有 if else 效率高？？
看来你不懂js
为自己量身定做？ 这个和开源就要免费的论调基本一致吧 再说就算我是为自己量身定做的 而且我也说了 这个语言很强大 很灵活 多行的可以一行完成 我没有强烈要求你一行两行  我有没要求大家用我的 你何苦纠缠不清 效率不高你可以弄个一行高的 共同学习进步嘛 客户端代码短没有意义吗？ 起码占用的字节少了吧

关于三元运算符与if条件判断谁效率高这个问题，我真心希望你的自信不是来自于教科书。
前几天有个帖子在讨论StringBuffer的效率问题，回帖里就没几个正确的，还有人去把教科书上的分析过程复制了一段贴上去，结果呢？那个问题我是之前亲自试验过的，所以很干脆的就回帖了。今天这个问题我之前确实是没做个测试，但我知道在php里，三元运算符效率是没有if else条件判断高的，另一方面是凭我个人的直觉。我也是个认真的人，看到你这么自信满满的，我就想会不会是我错了，于是粗略的写了个测试，最后发现这个问题是真没有定论，在不同浏览器下，甚至在不同的测试样本之下，结果都是不一样的。我把测试页面传到网上了，你有兴趣可以去试试看，也算是个共同学习的过程吧。

地址：http://home.ustc.edu.cn/~kkjames/test/testCh.html

12 楼 enix2212 2011-04-30  

jamesmos 写道

enix2212 写道

为的是把10行代码搞成一行 现在又要搞回去？ 我写样式肯定不会敲回车 如果有需要 你自行修改 再说 我也不相信你每次写样式都会敲回车吧 那这些判断 有何意义

你这种缩短代码的方式是用逻辑运算符和三元运算符来代替条件判断，最后是一行长过别人三行，效率还不一定高，意义大么？你发个自己写的东西在这里说有多短多短，结果是为你自己的需求量身定做的，别人要用还要自己进行逻辑上的完善，再短又有何意义？

三元没有 if else 效率高？？
看来你不懂js
为自己量身定做？ 这个和开源就要免费的论调基本一致吧 再说就算我是为自己量身定做的 而且我也说了 这个语言很强大 很灵活 多行的可以一行完成 我没有强烈要求你一行两行  我有没要求大家用我的 你何苦纠缠不清 效率不高你可以弄个一行高的 共同学习进步嘛 客户端代码短没有意义吗？ 起码占用的字节少了吧