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

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

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

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


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

插件的使用范围

要么写成你当前网站全站通用的组件,要么写成全互联网通用的组件。当然,你也可以写成只符合你当前页面(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的颜色等等。所以说,越牛逼的插件,代码越多。代码越少的插件,功能越简。
有点千万别忘了,蛋疼的浏览器兼容性啊!!!


TDD和OOP你值得拥有。

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

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


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

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

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

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

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

到此神功大成,可喜可贺


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


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

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

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


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

【热门文章】
【热门文章】