[随想]一种重用代码的方法

<!-- /*<!--[CDATA[*/ body { color: #000; background-color: #fff; margin: 0px 10%; min-width: 720px; font-family: Verdana, sans-serif; counter-reset: chapter section subsection subsubsection paragraph lchapter lsection lsubsection lsubsubsection lparagraph} div.footnote { border-left: 1px solid #000; margin-left: 0em; clear: both } div.ftext { position: relative; margin-left: 50px } div.fnumber { float: left; width: 40px; padding: 0em; margin-left: 0.5em; margin-top: 0em } div.fnumber a { margin: 0px; padding: 0px } div.ctext { position: relative; margin-left: 100px } div.cnumber { float: left; width: 90px; padding: 0em; margin-left: 0.5em; margin-top: 0em } div.cnumber a { margin: 0px; padding: 0px } div.tip { border: 2px solid #0d0; margin: 0.5em 2em 1em 2em; padding: 0em 1em } div.warning, div.caution, div.danger, div.error { border: 2px solid #f00; margin: 0.5em 2em 1em 2em; padding: 0em 1em } div.note, div.hint, div.important { border: 2px solid #000; margin: 0.5em 2em 1em 2em; padding: 0em 1em } div.figure { display: block; padding: 1em; width: 400px; clear: both} div.topic { margin: 2em } div.vstsidebar, div.sidebar { border: 2px solid #aaa; color: #000; background-color: #ffffee; float: right; width: 40%; margin-left: 1em; margin-right: -1em; padding: 1em } span.strike { text-decoration: line-through } span.big { font-size: large } span.small { font-size: small } span.title { font-style: italic } span.notetitle { font-size: large; font-weight: 900; font-family: Verdana, sans-serif } p.toc { font-size: large; font-weight: 900 } p.notesubtitle { font-weight: 900; font-family: Verdana, sans-serif } p.attribution { font-style: italic; margin-left: 8em; text-indent: -1.4em } .vstright { float: right; margin: 1em } .vstleft { float: left; margin: 1em } .vstcenter { margin: 1em auto } blockquote.pull { font-size: large } p.rubric { font-size: large; margin-left: 2em } dd.normal { margin-bottom: 0.5em } dt.option { float: left; margin: 0em 0em 5px 2em; padding: 0px; font-family: monospace } dd.option { padding: 0px; margin: 0em 0em 5px 10em; text-indent: 0.5em } dd.option > p { margin: 0px } dd.normal > p { margin: 0px } table { border-collapse: collapse; margin: 0.5em 0em } thead, tfoot { text-align: center; font-weight: bold } td { border: 1px solid #000; padding: 0.25em; _top: 0%; vertical-align: top } td blockquote p{ margin: 0px; padding: 0px} td blockquote { margin: 0px; padding: 0px} table.vstbless td { border: 0px solid #000; padding: 0.25em; _top: 0%; vertical-align: top } td > p { margin: 0px } table.field { border: 0px solid #000; margin-left: 2em; padding: 0.25em; _top: 0%; vertical-align: top } td.fkey { font-weight: 900 } td.fval { border: 0px solid #000; padding: 0.25em; _top: 0%; vertical-align: top } td.fkey { font-weight: 900; border: 0px solid #000; padding: 0.25em; _top: 0%; vertical-align: top } td.fdkey { text-align: center; font-weight: 900 } td.fdval { text-align: center; font-style: italic } td.fakey { text-align: center; font-weight: 900 } td.faval { border: 0px solid #000; padding: 0.25em; _top: 0%; vertical-align: top } hr { width: 80%; margin: 1.5em auto } h1 { text-align: center; clear: both } h2, h3, h4, h5, h6 { text-align: left; margin-top: 1em; clear: both } h2 { counter-reset: section subsection subsubsection paragraph } h3 { counter-reset: subsection subsubsection paragraph } h4 { counter-reset: subsubsection paragraph } h5 { counter-reset: paragraph } h1 a { color: #000; background-color: transparent } h2 a { color: #000; background-color: transparent } h3 a { color: #000; background-color: transparent } h4 a { color: #000; background-color: transparent } h5 a { color: #000; background-color: transparent } h6 a { color: #000; background-color: transparent } p.subh1 { text-align: center; font-size: 120%; font-variant: small-caps } p.subh2, p.subh3, p.subh4, p.subh5, p.subh6 { text-align: left; font-size: 120%; font-variant: small-caps } h2:before { content: counter(chapter)" "; counter-increment: chapter } h3:before { content: counter(chapter)"."counter(section)" "; counter-increment: section } h4:before { content: counter(chapter)"."counter(section)"."counter(subsection)" "; counter-increment: subsection } h5:before { content: counter(chapter)"."counter(section)"."counter(subsection)"."counter(subsubsection)" "; counter-increment: subsubsection } h6:before { content: counter(chapter)"."counter(section)"."counter(subsection)"."counter(subsubsection)"."counter(paragraph)" "; counter-increment: paragraph} li.h1 { margin-left: 0em } li.h2 { margin-left: 1em; counter-reset: lsection lsubsection lsubsubsection lparagraph } li.h3 { margin-left: 2em; counter-reset: lsubsection lsubsubsection lparagraph } li.h4 { margin-left: 3em; counter-reset: lsubsubsection lparagraph } li.h5 { margin-left: 4em; counter-reset: lparagraph } li.h2:before { content: counter(lchapter)" "; counter-increment: lchapter } li.h3:before { content: counter(lchapter)"."counter(lsection)" "; counter-increment: lsection } li.h4:before { content: counter(lchapter)"."counter(lsection)"."counter(lsubsection)" "; counter-increment: lsubsection } li.h5:before { content: counter(lchapter)"."counter(lsection)"."counter(lsubsection)"."counter(lsubsubsection)" "; counter-increment: lsubsubsection } li.h6:before { content: counter(lchapter)"."counter(lsection)"."counter(lsubsection)"."counter(lsubsubsection)"."counter(lparagraph)" "; counter-increment: lparagraph} li.h6 { margin-left: 5em } ol, ul { margin-bottom: 0.5em; margin-top: 0.5em } ol.loweralpha { list-style-type: lower-alpha } ol.upperalpha { list-style-type: upper-alpha } ol.lowerroman { list-style-type: lower-roman } ol.upperroman { list-style-type: upper-roman } ol.decimal { list-style-type: decimal } ul.square { list-style-type: square } ul.circle { list-style-type: circle } ul.disc { list-style-type: disc } li > p { margin: 0em } img { border: 1px solid #000; padding: 0em; display: block; margin: 1em auto } img.inline { border: 1px solid #000; padding: 0em; margin: 0em; display: inline } pre { color: #000; background-color: #eee; margin-left: 2em; clear: both; overflow: auto } div.unknown { font-family: monospace; color: #000; background-color: #fff; margin: 1em; padding: 1em; clear: both; border: 3px solid red} pre.quoted { color: #000; background-color: #eee; margin-left: 0em; clear: both; overflow: auto } pre.rawlatex { color: #000; background-color: #ddd; border: 1px solid #000; padding: 0.1em; clear: both; overflow: auto } pre.address { font-family: Verdana, sans-serif; display: inline; margin: 0px; color: #000; background-color: #fff; overflow: auto } span.target { text-decoration: underline } div.vstfooter hr { width: 100%; margin: 0px } div.vstfooter p { margin: 0px } /*]]>*/ -->

Date:	2010.01.19.
Keyword:	JavaScript 方法论 KISS原则

---

今天折腾了一天JavaScript。之前没接触过JS编程，为了保证项目进度，硬着头皮看了半天JS代码，下午开始上阵编码。这时才发现原来JS程序员非常擅长重用代码，很多看似复杂的操作都有小巧的组件（该怎样称呼JS代码库？）来辅助实现。所以到目前为止，我在用JS编程时需要做的大部分工作就是上网找或问同事好用的代码集，然后重用这些代码来实现想要的功能。但在重用代码时也遇到了一个问题，将例子代码直接复制到项目代码中经常不能使用，这个过程还需要用IE8调试JS脚本，以此发现出错点，然后再修改代码，修改的结果往往还是不可用。这个过程消耗我很多时间，直到晚上，我才发现一个好办法：把要重用的代码拿过来之前先精减例程的代码，直到构造出一个最小的可以运行的测试代码，再将这部分代码帖到项目的代码。当然，这个办法也不能保证一次就成功，但将项目代码和精减的测试代码对比几次之后往往能找出正确的使用方法。

原来老子在道德经中教导的道理 见小曰明 ，也能在编程中运用。再回想Unix的设计哲学 Keep it Simple,Stupid(KISS) ，是的，小和简单，能让我们生活得更加明白，工作中的生产力也会大幅上升。