万丈高楼平地起——实践为王,应需而生

在文章开头,按照惯例(哪儿来的惯例~),先闲聊一下抒发一点点感想吧。

此次文章的想法来源于我正在做的项目当中的作品评论功能,此前我是没做过的,当时拿到设计稿之后,感觉,挺简单,不就一个列表而已,后来,到最后,也真的挺简单,可是,也真的,相当复杂。做的过程中遇到过很多问题,反复的去查看手册,向同行、前辈们请教,在此一并感谢了~当然,还有同行说:不是有插件么,实现起来挺方便的。在这里我要说为什么我没有用那些插件,首先就是,初看觉得挺简单的,自己应该能搞定,再者,我真的不想再去搬代码,然后要去研究,去把它改成自己项目当中要的样子,多余的还要去掉等等等等。所以,我就这么上路了,也就有了现在满满的收获。技术圈永远那么和谐又充满爱对吧,so,拿来跟大家分享一下。当然,此文只涉及前端实现,不涉及后台。顺序是:案例功能分析、所用技术罗列(jq)、注意事项、结束语~

先来说功能,按区域一一道来:

一、输入框

借用一下大家灰常熟悉的QQ空间评论框,当然,我们要谈的功能不会这么多,只要输入,发表,即可,你要记得我这里说的是“即可”哦。

第一步,输入框我们要用什么做呢,你觉得这不是个需要考虑的事儿?是的,可以用textarea,但是,div可不可以呢,这也可以吗?!如果你不知道,那么就去看看“contenteditable”这个属性,点到为止。然后你会觉得,本以为我知道的差不多了,到底还有多少我不知道的啊?

第二步,它里面好像有字呢 ——“说点什么吧”,这个怎么实现呢,你知道QQ怎么实现的吗?这哥们儿用了两个div,my god!当时我那个对它满满的钦佩,点击之前是一个div里面装的是“说点什么吧”,点击之后隐藏之,显示另外一个空的div。说实话我用的也是这种方法。只因那一瞬间的震撼,方法千百种,只要你敢想呐,不过后来我就悟到,其实没必要这样,你可以只用一个div,给里面填上几个字,获取焦点的时候清空即可,注意,这里就有一个小陷阱哦,我说的是获取焦点的时候清空,那,如果我输入了文字,鼠标点击了其他地方再回来,oh,它也空了,这可不行,所以,需要做条件判断,判断什么?内容,怎么判断,可爱的——if!粉末登场咯!点到为止!~哦,对了,忘了一个,你需要获取文本内容!~

第三步,如果我点击了之后,啥也没输入,又点了出来,这是再正常不过的操作,这里可能会涉及两个东东,一、点击此物一个反应,点击除此物之外的区域,另一个反应。二、获得焦点的时候一个反应,失去焦点的时候另一个反应。
点到为止!~

第四步,我点击了,也输入内容了,那就发表吧,爽歪歪,很多童鞋都知道下面要干嘛,评论嘛,一个列表嘛,点击发表新建列表项,插入嘛!停!because,哪里来的列表?是的,还没有评论的时候,是木有列表滴,是的,你需要新建列表!建完之后,你得把它插入,这里有两个插入,列表插入和列表项插入,问题又来了,怎么插入,内部还是外部?最前还是最后,还是在某个特定位置?都可以,点到为止!~oh,停!我怎么知道列表在不在呀,难道每次发表的时候都去新建啊?当然不是,那,你还需要判断ul是否存在,方法不止一种,可以结束了,oh,好像还漏了一点,到底有完没完啊?!~我发表之后,输入框怎么办呢,文字要赋给新建列表项,然后呢,将其清空还是怎样,或许你突然觉得,我点击完发表,那输入框不就算是失去焦点了吗?那点击事件和失去焦点事件,到底哪个说了算啊?它是不是会自动的回到”说点什么吧”呢?能不能呢,你去试试吧!~

到此,关于输入框的东西告一段落,可能还没完,可能~额,还记得之前说的那个”即可“么,别打我哈!

二、列表

为了不暴露他人隐私,我就拿我和韬哥的一段来给大家看看吧,他应该不会介意~先说明我们做的不一定是这个样子,随你做成什么样,但道理都一样。

第一步、首先,列表项大家都懂对吧,而且,形式一样,功能一样,长得一样,那既然都一样,我们会想到两个东西,一个是可以对其中的样式都用”类“定义,另一个就是”克隆“,而且如果你用克隆(clone),里面的一个参数取”true“的时候,那简直是,你可能就不用再掉进下面我要说的一个大坑里了,我说的是可能,我的项目里并没有用,至于原因我记不起了,大家可以自己试试。

第二步、每条评论都是可以操作的是吧,比如,你发表的评论,别人是可以回复的,如果,诸如:回复、删除等等不显示出来,移入哪条评论区,那条评论的操作才显示出来,移出就消失掉呢?这个不难,加上移入移出事件。
点到。。

第三步、怎么回复呢,需要输入框,…….又是输入框,没错,这个倒霉蛋又被我们碰到了,输入文字之前,我们需要处理好这样几件事情,首先,,那如果我要回复的输入框一开始不显示,点击回复才显示,再点击就又不显示了呢?好办,加个交替点击事件,这里也有坑,下面讲。那,输入框是让它直接显示隐藏呢,还是淡入淡出呢,还是展开收起呢?好多方法啊,那个高兴,可也,那个纠结,嘿嘿,随你喜欢哪种,或者用户喜欢哪种!~

第四步,补上第三步里面该说的一点,放在第四步说是因为点太小了~那就是,输入框在三种情况下收起,交替点击时,取消回复时,发表回复时,如果你漏了,你自己都会觉得那么别扭,当然三种情况是不同的,这就是第四步要讲的重点。首先,回复的框也是要有预填文字的,比如:”回复@XX“,先说点击回复,点击回复的时候,展开,里面有文字,输入框获取和失去焦点跟评论一样,这里不再说。点击取消,则清空输入框并收起,其他不需要任何操作。点击发表,那,是不是相当于我们又在重复发表评论时候的那一套呢?我知道你不想回到那条路~但就是那样,你需要判断,插入等等等。当然,这是在列表为二级的情况下,如果评论和回复都在同一个列表中,那就不必了,因为如果没有列表,你是不可能回复的,so不需要判断,然后你要把框内文字赋给新建的列表项,然后清空它,收起输入框!~

第五步,为什么要有第五步,这不是大功告成了么,既可以发表评论,又可以对评论发表回复,破费科特呀!~哥们儿,还记得我们的回复是怎么来的么,是新建来的,那么既然如此,我要告诉你一件不幸的事情,那就是,你所加的事件,在动态创建的新元素里,相当于没了,这可怎么办呐!要命啊!~别急,还有个东西叫——”事件代理“,代理可用方法种种,
点到。。~

第六步,是的,你没看错,还有第六步,你可以想象平时自己使用的时候,出现过两个输入框同时打开使用的情况?对的,当有多个列表项,你操作了一个输入框并输入了文字,没发表之前,又去操作别的东西,比如打开另一个输入框,这个时候,会有提示你——”是否放弃当前正在编辑的文字“,选择放弃或者不放弃,那又是两种不同的操作,jq里提示框大概有三类——直接警示、给提示语可确定或取消、你要输入文字进行确认。这里当然是第二种,如果确定,则清空之前输入框并收起,取消则原封不动。

貌似,功能分析可以告一段落了。

下面开始罗列所用技术,分类罗列(这里只是部分,具体自行查看手册了解):

显示隐藏:css:display——block/none show()/hide(), fadeIn()/fadeOut() slideDown()/slideUp()
焦点:focus()/blur()
获取(代码/文本):html() / text()
新建:$(“代码”)
插入:append()/appendTo() insertBefore()/insertAfter()
移入移出:mouseenter()/mouseleave() 可用hover(fn(),fn())替代
交替点击:toggle(fn(),fn());
克隆:clone();
事件代理:live() delegate() on()
同辈元素选择:sibling()
提示框:alert() confirm() prompt()
当前项选择:$(this)
筛选:next()/nextAll() prev()/prevAll parent()/parents()/parentsUntil() closest() children()
判断是否:is()
以上简要列出,供大家参考而已,方法可以多种,用法也各异。

注意事项——群坑荟萃:

一、千万,千万,千万(我要有这么多钱就好了~),千万别把变量给弄成字符串!(除非特殊情况,你就是要知道它的名字)编程里面有个很有用,特别有用的东东叫变量,因为它就是个无限大的盒子,想往里装什么就装什么,它可以帮你做很多事情,但是如果你总是习惯于诸如 alert(“变量”);这么happy的写法,那你会很不happy~

二、接着上面一个顺便说一下,当做选择器的时候,诸如,类,id这些要把”.“和”#”加上,但如果仅仅是要用到它们的名字,则不要加了,否则你又不happy了

三、还记得我们之前谈到列表项时,因为很多的”一样“,而给列表项里面的所有都用”类”来给样式吗?这样子当然没问题,可是当我们要给它们加事件的时候,就必须给它们规定作用域了,不然,你会看到它们队形整齐的全都动起来,虽壮观、但悲催呀~这时候$(this)就是个很好用,也很必要的东东,当然,要结合其他的筛选方法才能精准定位作用对象哦!~

四、关于事件代理,不要被这个词儿给吓到,只需关注它的意思和是干嘛的就行了。在这里它是用来解决动态创建元素的事件问题,那它的原理是什么呢,有人说是事件冒泡,我简单解释一下,我们都知道元素可以嵌套,那么我们要动态创建的元素是在里层,要加的事件也是在里层,代理的意思是,你先把事件交给外层,等到你操作了要加事件的元素时,会由外往里去”寻找“匹配元素,找到即生效。这里我要告诉你一百个注意!如果不注意,你在这个坑里挂掉可别找我——你交给的这个外层不能也是新创建的元素!!!所以,这个外层不能简单理解为是它爸,而是它的固有祖先元素,因为它爸,甚至它爷爷都可能是新创建出来的,那就无效了!为什么我要着重强调这一点,因为我就是在这个坑里待过很久,说多了都是泪!~

五、事件冒泡,太多说它的资料了,我不详述了,就是多层嵌套的元素,里层元素的事件层层向外扩散,导致很多事件重复执行或者看起来是无效的,具体大家自己找资料研究一下,我就偷个懒~

六、jquery有很多版本,对里面的选择器,筛选方法和事件的支持可能会有所不同,有时候,如果你用了某个东西,而它压根儿就没生效,在排除了其他错误之后,那就是版本支持问题了,比如toggle()的点击,在jquery-1.9版本就不同了,当然,是有弥补措施的,可自行查阅。

本文所谈内容尚浅,但你应该看出来了,我要说的不仅是评论这个东东。更多的在于从功能方面去做何考虑,跟所需技术是怎样联系起来的,你也可以感受到jq,甚至js是怎么运用到网页当中,什么时候该定义变量,如何理清各元素之间关系,使用合适的选择器和筛选方法去找到作用对象,什么样的效果用什么方法,等等。而做好这些的前提是正确认识概念和用法!!

该结束了,再说一段儿吧,写程序就像是写文章,都是需要逻辑,组织的好了,则结构清晰、行云流水、感人肺腑,而且你不会去管多少字,万丈高楼也是从地基开始一砖一瓦堆砌起来的。当然,程序也要求必要的精简,通用性等,此不详述。另一个理解是,程序的执行和人的思想、行为是挂钩的,要求很严格,不允许出任何的疏漏,人的行为到了哪里,那你的考虑范围就要到哪里,没有到就出问题了,当然你也可以去挖掘新的东西。这里就要回归到本文的标题——实践为王,应需而生!

啰嗦了这么一大堆,问题再所难免,还望谅解。事实证明,我是没办法也没能力把所有事情都告诉你们,呵呵,不过,说过的给你们惊喜,没让你们失望吧?技术这个东西就像我们以前对学习的形容一样,看似内容很多,先把”厚书“读薄,再读厚,就能有所小成。多实践,坚持!让我们一起加油吧!~关于此文,有兴趣可以直接找我交流

灵感_idea wechat
欢迎关注我的公众号“灵感周末”,每个周末推送优质好文!
给加个蛋呗