我建议这样思路写组件

我建议这样思路写组件：首先一个大函数就是一个模块，可以简单到只是用function写，通过config对象写配置。然后通过传参调用，把这些模块连接起来，能实现功能，之后再对函数模块进行二次优化迭代。

在具体的操作上，第一步，就是像我们现在正在做的，先把下拉框啊，弹窗啊，菜单啊，都单独的写出来。让它们每个都能正常运行，并且具有一定的复用性。

第二步，上述那些组件写好之后，就把它们在同一个页面上引入，然后用这些组件来拼装成一个页面。这就是最简单的页面组件化、模块化了。

第三步，在拼装页面的过程中，逐步的迭代优化上述组件。例如用OO的方式，替换掉面向过程的方式。用prototype、apply,,,来添加继承，就这样逐步的增加组件的抽像性。

不要上来就追求最优，高大上的写法。什么类啊，面向对象啊，抽像啊，继承啊，父子类，设计模式等等。上周日的先行者群视频，有同学连参数传递的顺序都还搞不清楚呢。所以我说不要一上来就步子太大，容易。。。

还有的同学基础也还好，模仿网上的写法，把模块拆分的粒度过小，参数传来传去过于复杂。但这样的目的是什么呢？技术是为业务服务的，模块的拆分是基于业务的划分。这样只是为了拆分而拆分，搞的JS那么复杂，即没有单个模块的易于维护，也失去了组件型模块的可复用性。

从这几次的作业来看，许多同学只是把功能实现了。但是JS书写格式都没有完全掌握。写出来的JS代码格式很不规范。没有分行，没有分作用域。不客气点说，就是很烂。接下来我放几张作业的截图，给大家看看这些不规范的代码是什么样子，被我截图的同学也不要不开心，如果真的不开心就留言给我，下次我放别人的哈。

这个配置里，avatarsrc，这是个什么词？

如果写成avatarSrc是不是可读性好一些？

只有第一个有双引号，其余的都没有，这是什么意思？

我在先行者周日群视频里，无数次的说过，针对具体DOM的JQ选择器，不要用"."，要用"#"，它们俩在JQ的效率上有区别。

注释不对齐是怎么回事？

圆框里这种乱成一团的东西是什么？格式，是代码的第一印像，是代码的脸。

张召忠曾说过，“你看一件武器厉害不厉害，首先看它好不好看”，代码也是一样，看一篇代码好不好，首先看格式。格式很烂的代码，根本没有看下去的欲望。

就这些吧，不要小瞧格式，它能让你的JS代码拥有一种节奏感，别人在看的时候会觉得很易于阅读并且很容易看出哪里是开头哪里是结尾。而这几次的作业，很多同学的代码就像一车土豆倒在地上一样，滚的到处都是。所以我经常会要求有的同学重写，再重写。

我经常会建议你们多看Github上其它人的代码，和那些框架的源码，这都是很好的学习材料。它们无论是在代码格式上，还是在代码风格上都很值得学习。但很可惜，从作业来看很少有同学去看代码。也许是看代码很吃力吧，毕竟看代码要理解作业的思路和想法。但这就是一条必经之路。如果真的看着费劲，只能硬看了。

代码格式的相关文章很多，我就不一一重复了。只说三个关键词，缩进，隔行，空格。这三个关键词掌握好了，代码就像一首诗。

再多说几句，曾经有人看过先行者计划的内容说，就讲这点东西呀。。。他本人是什么想法我不予置评，因为没有资格去评价别人的想法。但我相信有类似想法的人不在少数，我想说的是WEB前端的未来就是模块化、组件化，而先行者计划讲的就是这点东西。

WEB前端教室