如何从零开始,形成自己的模块化思维方式?

今天这篇文章说的是模块化的思维方式,并不仅限于教你怎么写前端模块化。

计算机这东西不是凭空出现的,它是为了解决一些实际的问题,有很多时候是对现实世界的模拟。遇到问题时,经常会有人说,要有大局观,要具体问题具体分析,也可以牵强的解释为这就是模块化思维的一种,也是用来解决问题的一些思路,方法。

大局观,就是站在整个项目、应用的层面上去设计它的结构;具体问题具体分析,其实就是软件工程中的“分而治之”的思想,无论多么复杂的系统,都可以从这二个方面进行解构。

<!-- -->

那么,“我”,现在没有这种思想。现在“我”该怎么做,才能有这种思想?现在我们不提大局观,先实现一个小目录,“拆分一个小模块”。

说,“现在有一个首页的竖列的导航条,(很简单我就不上图了),就是一个ul和li的竖列导航条”。现在要把它设计成一个相对独立的模块,该怎么搞?

首先,你要分析需求点啊,

- 这个menu菜单都有哪些功能呢?

- 这些li是怎么生成呢?

- 这些li里的字是从哪来的呢?

- 当li被点击的时候,页面上的被更新的内容从哪来呢?

- 这些li里的自定义属性都有哪些呢?

- ...随需求再添加

把这些需求相关的东西都列出来,写在纸上。这是第一步。

第二步,因为这个menu菜单的需求,所以它里面必然有一些是不能变的核心的属性、方法;还有一些是可能被修改的,可能被继承添加的。就是说,可能会变的东西。

你把,哪些是不变的,哪些是会变的,把它们分别在纸上列出来。这个工作算是相对简单的UI界面需求分析和模块结构设计的阶段,

<!-- -->

接下来,咱们使用最简单的prototype原型模式,以伪代码的方式来实现一个这个模块。

上面已经把需求用中文写好啦,那我们接下来就把中文给翻译成js代码,就ok啦。

代码太长一屏截不下,用ps接了一下。这样一来,一个最简单、最好理解,同时功能还基本ok的模块,就搞出来啦。然后随着需求的不断添加,业务的不断复杂,这个模块会不断的扩大,再扩大。

这时你就需要把它拆分,再拆分,在这个过程中,你的模块化思维方式,就不断的熟练再熟练出来啦。

在这个过程中,你还可以不断的添加一些新的方式、思想在其中,如果你愿意的话。例如单例、call和apply搞搞继承,可以让你的模块更加强大。当然了,这是美好的未来,哈哈,为了实现它,首先你必须先实现我上面所展示的那个“小小的目标”。

<!-- -->

再谈点其它的啊。

组件的意义吧,在最开始的时候,是为了重复使用。早期的想法是,如果某个东西不需要在多个页面上重复使用,那么就不需要把它单独摘出来。应该说这个想法在当时是没有问题的。

但是现在是什么行情了,现在的情况是网站或是应用的复杂程度已经跟页面的数量没有关系啦。就例如我淘宝爸爸的首页,那么多功能搞三搞四的骗我老婆们的钱,但它其实只有一个页面。

这么多、复杂的需求、功能,如果不组件的话,那结果就是所有的业务代码都罗列式的堆积在前端页面上。所以现在组件化的意义,“已经从复用变成了分治”。

所以就是最好整个页面上所有的功能块、需求都给它组件化了;所以最终导致了ReactJs、VueJs的出现,也就是全面的拥抱组件化。

<!-- -->

写的顺手了就有点收不住了,再说几句。

ReactJs、VueJs这些框架,号称数据驱动视图。你也不必把句话看得多么高大尚。坦率的讲,前端开发不操作dom,那是不可能的。这句话也就是说,它把json和dom的相互映射影响,给自动化了。

也就是说,如果用了ReactJs、VueJs,那么上面那个代码里就没有createLi()之类生成dom和liEventFn()绑定事件的东西了。

所以,就有那么一种观点,“至少到目前为止,前端开发没有银弹”。

所以,ReactJs、VueJs之类的框架,在前端开发的发展过程中,依然只是过客,它们不是终点!

所以,学习前端开发的根本,依然是学习JavaScript语言本身、掌握模块化思维方式、理解业务和需求!

兴之所致,写的有点跑偏,请大家笑纳。

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

原文发表时间:2018-06-25

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏PPV课数据科学社区

编程 | 用python获取天气数据,并作定时播报

思路 1.调用和风天气的API,获取天气数据 2.用百度语音API,将天气数据合成语音 3.用树莓派每天早上定时播报天气(定时任务crontab + Pytho...

74680
来自专栏Python爬虫与算法进阶

爬虫学到什么程度可以去找工作

随便看看知乎上的教程就可以入门了,就Python而言,会requests当然是不够的,还需要了解scrapy和pyspider这两个框架,scrapy_redi...

15310
来自专栏13blog.site

Spring+SpringMVC+MyBatis+easyUI整合优化篇(八)代码优化整理小记及个人吐槽

前言 这两天也一直在纠结这一篇文章该写什么东西,前面临时加的两篇文章就有些打乱了整体节奏,这一篇又想去写一下代码层面优化的事情,可是也不太能抓住重要的点,不太确...

26460
来自专栏移动端开发

苹果审核2.1大礼包,这几个方面入手。

1.6K20
来自专栏腾讯移动品质中心TMQ的专栏

【腾讯TMQ】测试分析?就这么简单!

在软件测试过程中,以最小的成本将软件质量风险降至最低,这就是精准测试。宏观上,测试分析是响应精准测试的实践,贯穿整个测试过程,并对整个测试过程起指导作用。

54700
来自专栏帘卷西风的专栏

开源CEGUI编辑器之一(MFC重写的LayoutEditor)

转载请注明出处:帘卷西风的专栏(http://blog.csdn.net/ljxfblog)

18020
来自专栏阮一峰的网络日志

USENET简介

普通的互联网用户,可能对USENET知之甚少,或者根本就没有听说过它。但是,这是一种很重要的网络应用,里面有一些真正有趣的东西。 我在网上没有找到比较通俗易懂的...

29890
来自专栏闰土大叔

为什么我不推荐你使用vue-cli创建脚手架?

最近在知乎看到一个问题,原问题如下: “ 很奇怪,为什么现在能找到自己手动创建vue脚手架的文章非常少,而且大家似乎对webpack4的热情并不高,对于想基于v...

640130
来自专栏北京马哥教育

程序员技术练级攻略

月光博客6月12日发表了《写给新手程序员的一封信》,翻译自《An open letter to those who want to start programm...

387110
来自专栏CSDN技术头条

大规模数据集成: Linked Data

在本系列的前两篇文章(“ 使用 RDF 创建数据网络 ” 和 “ 使用 SPARQL 查询 RDF 数据 ”)中,您了解了资源描述框架和 SPARQL 协议和 ...

24980

扫码关注云+社区

领取腾讯云代金券