编写js效果的时候, 大家一般是怎么去构思的?

Question

很好奇, 大家平时去写一个效果的时候,是怎么从构思到编写代码的?比如写一个无限循环的轮播插件.

一般是直接抄上键盘开干, 还是有什么更好的思考构造方法? 更成熟的工作习惯呢?

Answer 1

轮播这种普遍的效果一般不会生造轮子……

真要自己撸的话，我一开始基本不会考虑复用，因为真的自己撸一定是“找不到合适的轮子”，那基本上代表了业务场景很难复用。而且，真的发现可以复用的时候，再重构代码来提公用部分反而比较高效。因为为了业务写的代码，基本没有时间仔细梳理文档，当初留的扩展性过了三个月很容易就变成坑了。“没有思路的时候不谈复用，只求最简实现”

但是，假设我做了N遍轮播，找了M个轮子都觉得不顺手，同时业务又不紧或者下班有时间的时候，我就会以冲动开始造轮子了，这时候我会参考M个轮子各自的优缺点，决定自己的这个轮子究竟如何在扩展性和易用性上取到平衡点，到这时你一定对M个轮子各种吐槽，集合你N遍轮播碰到的各种情况，顺势而为，呼啦啦一个晚上就能轻松撸出自己的轮子，然后哼着歌套到项目里试试，效果好，你学到了，效果不好，你也学到了。如果你还能试着拉你的小伙伴一起来用，听听他的评价，那你能学到更多。慢慢的，你碰到没做几次的效果甚至第一次做的效果，心里也还是有数，嗯，这里留个配置，哪里暴露个接口，以后会爽。

当然，你可能会从地上的坑里飞出来，掉到天上的坑里去：你开始过度设计，做什么都插件，模块，复用，然后你发现你花了很多时间写的这些插件，模块，复用让其他同事无法理解你的代码，让你的代码和小伙伴的代码格格不入，当初留的扩展性很少用上，更糟糕的是小伙伴来写的时候他根本不理解你预留的扩展性，他会再自己写一套他的……

最后，你看到一个需求，低头掐指一算时间多充裕，小伙伴多信你，外面的轮子靠谱不，自己造轮子能达到好效果不，不造轮子直接强撸又怎样，双眼猛地一亮抄起键盘啪啪啪

到此神功大成，可喜可贺

Answer 2

TDD和OOP你值得拥有。

你看如果你真的要做一个插件，那么你应该看看有没有同样功能的插件，看看他的代码。你要学会借鉴。

你得想想自己是做一个jquery的插件，还是说做一个纯js实现的插件或者有没有其他的依赖。然后想想有什么功能来设计调用接口，怎么暴露接口。怎么构建?命名空间设计模式、seajs（CMD）、requirejs（AMD）、webpack、browserify等等你要想想，这些东西能帮你更好的组织代码。

Answer 3

如果只是写一个简单的效果，利用所学的基本知识抄上键盘就干！！！
如果楼主是要写一个插件的话，问题就多了。拿楼主所说的轮播插件来说。首先你要考虑的问题是

插件的使用范围

要么写成你当前网站全站通用的组件，要么写成全互联网通用的组件。当然，你也可以写成只符合你当前页面（no zuo no die）。
先说第一种情况，全站通用。轮播是跟html结构有紧密关联的，因为是全站通用的，你可以跟前端设计（如果html也是你编写，那更棒了。）定好统一的html结构，比如：

<div class="main-banner-roll">
    <ul class="banner-rolll">
        <li>
            <a href="">
                <img src="">
            </a>            
        </li>
        <li>
            <a href="">
                <img src="">
            </a>
        </li>
        <li>
            <a href="">
                <img src="">
            </a>
        </li>
    </ul>
    <ul class="banner-btn">
        <li></li>
        <li></li>
        <li></li>        
    </ul>
    <span class="prev"></span>
    <span class="next"></span>
</div>

结构固定了，编码的难度就会大大减小。重要的一点时，因为是适用于当前网站，你可以依赖你当前网站已有的js类库，如underscore等等。
如果你要想做成全互联网都可以使用的。哈哈，恭（zhao）喜（si）。
这个时候你就不能对html结构有太大的要求。不能在插件文档的第一句话就写上：如要使用该插件，html结构必须怎样，而且连类名都指定了，这它酿的坑爹啊。为了适应不同的结构，必不可少要做一些兼容性的处理。有一点要特别注意，尽量不要依赖第三方类库（jQuery除外哈），顺便在文档的第二句话写上，如果要使用此插件，必须使用requirejs，underscore，backbone...，你觉得还有人来用么？

编码

定好方向后，我的习惯是直接开始编码，边编码边调试。有些人可能习惯先构思，后编码。这是个人习惯。

轮播插件，一般有左右切换效果，下方小按钮标识切换效果，自动轮播效果。
当然了这个左右切换可能显示，也可能不显示，下方的小按钮也一样，自动轮播的速度也应该可以定制，所以这就有了三个参数了。在编写插件的过程中一定要记住：任何主要功能都应该是可定制的，这样才能做到通用。比如说下方的小按钮可以通过参数控制形状、hover的颜色等等。所以说，越牛逼的插件，代码越多。代码越少的插件，功能越简。
有点千万别忘了，蛋疼的浏览器兼容性啊！！！

Answer 4

1. 明确需求，保证组件的功能可扩展。
2. 构建UI界面。
3. 遵循js组件编写的基本模式。

常见的就是一个构造器，基于此的原型方法扩展。其它需要做的包括链式操作，属性默认和覆盖扩展操作。另外也包括对于组件对象的方法的set和get操作，实例化后也方便进行一些set操作进行重渲染，实现个性化更改需求。

多参考其它的jquery小组件，你可以从中学到组件编写的基本技巧，其实也没有多少可说的。

Answer 5

就拿轮播举例子：
写多了就会想，能不能以后只用一段代码（类）搞定所有轮播问题？
只要朝着这个方向努力就行了。

Answer 6

分析需求，满足最小可用，增强迭代。