我建议这样思路写组件

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

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

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

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

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

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

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

这个配置里,avatarsrc,这是个什么词?

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

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

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

注释不对齐是怎么回事?

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

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

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

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

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

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

不过我看咱们许多同学的CSS3动画还比较过关哈,看这个,

===== GIF图片渣画质 =====

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2016-08-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我是攻城师

程序员最恐怖的梦魇是什么?

2614
来自专栏前端大白专栏

最近在学习react-native 为之后的找工作做准备

2019
来自专栏无原型不设计

国外设计师眼中的原型工具Mockplus

今天,我们评述一款新型设计工具,Mockplus,专为设计师而打造的创新性原型设计工具。Mockplus适合于各种应用软件的制作,无论是手机应用,网页应用,亦...

3884
来自专栏Albert陈凯

2018-07-24 关于数据库‘状态’字段设计的思考与实践关于数据库‘状态’字段设计的思考与实践1. 问题综述2. 业务分析3. 问题一、订单表的‘订单状态’字段应当包含哪些状态值?4. 问题二、订

原文地址:https://blog.csdn.net/tan_jianhui/article/details/8571342

2431
来自专栏逸鹏说道

Bootstrap-Select 动态加载数据的小记

关于前端框架系列的可以参考我我刚学Bootstrap时候写的LoT.UI http://www.cnblogs.com/dunitian/p/4822808.h...

3409
来自专栏iOS122-移动混合开发研究院

记一个同时支持模糊匹配和静态推导的Atom语法补全插件的开发过程: 序

简介 过去的一周,都睡的很晚,终于做出了Atom上的APICloud语法提示与补全插件:apicloud_autocomplete.个中滋味,感觉还是有必要记录...

1926
来自专栏搞前端的李蚊子

IOS safari浏览器登陆时Cookie无法保存的问题

近期完成了一个儿童的测评项目,测试到最后的时候发现在ipad mini上登陆成功之后无法跳转页面,而安卓和pc端都可以,找了大半天bug,发现其他的苹果设备都没...

9175
来自专栏北京马哥教育

给Linux小白看的命令行极简教程

1、命令行真的好吗 程序员的使命 维基百科的解释: 命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及之前使...

3526
来自专栏EAWorld

生成全局唯一ID的3个思路,来自一个资深架构师的总结

标识(ID / Identifier)是无处不在的,生成标识的主体是人,那么它就是一个命名过程,如果是计算机,那么它就是一个生成过程。如何保证分布式系统下,并行...

5986
来自专栏小巫技术博客

那些Android中的性能优化tips

972

扫码关注云+社区

领取腾讯云代金券