1小时编写一个支持七牛上传的 markdown 客户端2(代码优化篇)

2015-12-09 1,730 0

code.jpg

摘要: 一个小时如何编写一个支持七牛上传的 markdown 编辑器的客户端。继续上次的内容,本次内容主要是讲解代码优化,如何进行模块化的拆分。

写文章,尤其是技术类的文章,我们是需要将文章进行一个条理性的说明,我依旧是采用按要点来说明。

要点

模块化

把这个放在签名,主要是为了说明一个宏观的思维,人干事情是需要一种思维的。万事万物皆有模块,人的手、足、眼、鼻、耳等等都是模块,东西南北是模块,天、地都是模块。文章的分段落,分篇章也是模块,咱们前端的拆分文件当然也是模块,在一个文件中,写不同的函数,也是一种模块。就是看你把这个模块拆分有多细,最总要的是要合适,适度。我承认我在 ndpeditor 中,是有些过度模块化了,当然是有原因的,原因看下面。

优化原因

  1. 习惯,应该说是有代码洁癖。看到代码不整齐,没有逻辑的代码,就想动手整一整。
  2. 把简单文件当作一个项目去做,项目是需要有结构意识。
  3. 代码的可读性,代码是让机器执行,但需要人来读的。开源的代码,更应该有可读性。
  4. 功能的可扩展性,当我们基础结构搭建好了,之后代码的可扩展功能就越强。

其实还有很多,但是切记,切记,切记,不要过渡设计,不要过度优化。

代码拆分

优化前代码

demo.js 这个文件,我添加了些注释,看一遍应就能懂了,200行的代码。

优化后代码

优化后的代码我拆分如下几个:

QQ20151210-0.png

https://github.com/zhaopengme/ndpediter/tree/master/app/js 代码内容到这里直接看,都是几十行的代码,不多,而且我的注释足够,看看就懂了。

模块划分

app.js 应用启动模块。
config.js 配置文件的保存读取。
editor.js 也属于一个核心部分,就是对编辑器进行初始化,设置,事件处理。
index.js 应用加载启动模块,其实也可以和app.js进行合并的。
util.js 工具类。

麻雀虽小五脏俱全。至少我保证了一个完整项目结构的完整性。

结语

本篇内容不多,关键内容还就是,代码要有逻辑,有条理,分模块,当然,还需要多看代码,多练。下一篇,说下 node-webkit 的打包发布,内容也不会太多,但是合并到本篇,和本篇的内容不符,还是单独拆分来吧!

相关文章

15年来的手艺之路:手艺人赵鹏的自述
纪念 Google 25 周年:从搜索引擎到科技巨头的演变之路
1小时编写一个支持七牛上传的 markdown 客户端3(打包发布篇)
1小时编写一个支持七牛上传的 markdown 客户端1(技术实现篇)
从 wordpress 转移到 hexo
总结 web 应用中常用的各种 cache

Leave a Reply