摘要: 一个小时如何编写一个支持七牛上传的 markdown 编辑器的客户端。继续上次的内容，本次内容主要是讲解代码优化，如何进行模块化的拆分。写文章，尤其是技术类的文章，我们是需要将文章进行一个条理性的说明，我依旧是采用按要点来说明。要点模块化把这个放在签名，主要是为了说明一个宏观的思维，人干事情是需要一种思维的。万事万物皆有模块，人的手、足、眼、鼻、耳等等都是模块，东西南北是模块，天、地都是模块。文章的分段落，分篇章也是模块，咱们前端的拆分文件当然也是模块，在一个文件中，写不同的函数，也是一种模块。就是看你把这个模块拆分有多细，最总要的是要合适，适度。我承认我在 ndpeditor 中，是有些过度模块化了，当然是有原因的，原因看下面。优化原因习惯，应该说是有代码洁癖。看到代码不整齐，没有逻辑的代码，就想动手整一整。把简单文件当作一个项目去做，项目是需要有结构意识。代码的可读性，代码是让机器执行，但需要人来读的。开源的代码，更应该有可读性。功能的可扩展性，当我们基础结构搭建好了，之后代码的可扩展功能就越强。…其实还有很多，但是切记，切记，切记，不要过渡设计，不要过度优化。代码拆分优化前代码demo.js 这个文件，我添加了些注释，看一遍应就能懂了，200行的代码。优化后代码优化后的代码我拆分如下几个：https://github.com/zhaopengme/ndpediter/tree/master/app/js 代码内容到这里直接看，都是几十行的代码，不多，而且我的注释足够，看看就懂了。模块划分app.js 应用启动模块。config.js 配置文件的保存读取。editor.js 也属于一个核心部分，就是对编辑器进行初始化，设置，事件处理。index.js 应用加载启动模块，其实也可以和app.js进行合并的。util.js 工具类。麻雀虽小五脏俱全。至少我保证了一个完整项目结构的完整性。结语本篇内容不多，关键内容还就是，代码要有逻辑，有条理，分模块，当然，还需要多看代码，多练。下一篇，说下 node-webkit 的打包发布，内容也不会太多，但是合并到本篇，和本篇的内容不符，还是单独拆分来吧！
本来是打算找一个模板直接使用的，没有找到到合适的，自己写好麻烦的啊！很早就知道960css的这个框架了，趁这个机会学学，找到一篇比较容易入门的基础，推荐阅读。 CSS框架已经出现很长时间了，关于这些框架的用处也被我们讨论了很多遍了。有人说，CSS框架不够先进，还有人说这些框架大大的节省了他们的开发时间。在此，我们将不再讨论这个问题。 前段时间，我了解到了CSS框架。经过对Malo、BluePrint和960做了实验对比后，我得出一个结论：我最喜欢960CSS框架。 本教程将解释这个框架的基本原理，这样你就可以用960来快速进入开发。 基本原理 你必须知道一些基本原理来“学习这个框架是如何工作的”。你可以通过实验（或者是用firebug）来学习它，不过我也将会在这里为你介绍它。让我们开始吧。 不要编辑960.css文件 首先是一个小提示：不要编辑960.css文件，否则，将来你将不能更新这个框架。因为尽管我们需要布局我们的HTML，我们将创建一个独立的CSS文件。 加载网格 因为我们可以使用一个外部文件的CSS代码，我们必须在我们的HTML网站中加载它们，我们可以通过以下代码来实现： <link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/reset.css” /> <link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/960.css” /> <link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/text.css” /> 这些做好了之后，我们必须添加我们自己的CSS文件。例如，你可以叫这个文件为style.css或site.css或者其它任何名字。用下面代码引用这个文件： <link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/style.css” /> 容器 在960框架中，你可以选择名为.container_12和.container_16的两个容器class。他们都是960px的宽度（这就是为什么叫960），它们的不同是分的列数不同。.container_12被分割为12列，.container_16被分割为16列。这些960px宽的容器是水平居中的。 网格/列 有很多列宽可供选择，而且在这两个容器里，这些宽度也不相同。你可以通过打开960.css文件来查看这些宽度。但是这对于设计一个网站来说是不必要的。有一个小技巧可以让这个框架更加易用。 比如，你想要在你的容器里建两列（叫sidebar/content）。你可以这样做： <div class=”container_12″> <div class=”grid_4″>sidebar</div> <div class=”grid_8″>main content</div> </div> 可以看到，你的第一列（grid_4）的数字加上第二列（grid_8）的数字正好是12。也就是说，你不必知道每一列的宽度，你可以选择列宽通过一些简单的数学计算。 如果我们要建一个4列的布局，代码可以是这样的： <div class=”container_12″> <div class=”grid_2″>sidebar</div> <div class=”grid_6″>main content</div> <div class=”grid_2″>photo’s</div> <div class=”grid_2″>advertisement</div> </div> 正如你所看到的那样，这个系统依然很完美。但是如果你想使用嵌套的列的话，你会发现它是有问题的。比如，如果后面三列都属于content列： <div class=”container_12″> <div class=”grid_2″>sidebar</div> <div class=”grid_10″> <div class=”grid_6″>main content</div> <div class=”grid_2″>photo’s</div> <div class=”grid_2″>advertisement</div> </div> </div> 你会发现这错位了，不过不用着急，这正是我们下一节要说的。 间距 默认情况下，每列之间都有间距。每一个grid_（这里代表数字）class左右都有10个像素的间距。也就是说，两列之间，总共有20px的间距。 20px间距对创建一个有足够宽的空白间距的布局来说是很棒的，它可以让一切看起来很自然。这也是我喜欢使用960的原因之一。 在上面的例子中，我们遇到了个问题，现在我们就来解决它。 问题是，每一列都有左右边距。而嵌套的三列中，第一列和最后一列是不需要边距的，解决方法是： <div class=”container_12″> <div class=”grid_2″>sidebar</div> <div class=”grid_10″> <div class=”grid_6 alpha”>main content</div> <div class=”grid_2″>photo’s</div> <div class=”grid_2 omega”>advertisement</div> </div> </div> 我们可以简单的添加”alpha“样式来去掉左边的间距，添加“omega”样式来去除右边的间距。这样我们刚刚创建的这个例子在任何浏览器里面就很完美了（当然包括IE6）。 样式 好了，你现在已经完全了解如果用960框架来创建一个网格布局的基本原理了。当然，我们也可以添加一些样式到我们的布局中。 <div class=”container_12″> <div id=”sidebar” class=”grid_2″>sidebar</div> <div id=”content” class=”grid_10″> <div id=”main_content” class=”grid_6 alpha”>main content</div> <div id=”photo” class=”grid_2″>photo’s</div> <div id=”advertise” class=”grid_2 omega”>advertisement</div> </div> </div> 因为CSS使用特性来确定哪一个样式声明具有高于其它样式的优先级。”id“比class更重要。 用这种方法，我们可以在自己的文件中重写那些被class设定的规则（比如宽度，padding，边框等）。 我也添加一些样式，它们整整花费了我5分钟来整理整个例子。查看示例的源代码和样式声明。. 搞定 就这样。你已经学习了如果使用960框架来建立跨浏览器兼容性和整洁的布局了。当你完全掌握了960框架后，你将大大地减少编写CSS的时间。 如果你还不理解，研究一下示例吧。 我留给你的问题： 你使用960CSS框架吗？或者你使用其它框架？你认为框架可以帮你提升你的代码吗？ Translate From: divitodesign 来源：http://www.qianduan.net/960css-the-framework-of-the-basic-principles-of.html