做有态度的前端团队

网易FEG前端团队

关于代码结构的一些总结

前段时间做图库,因为算是一个小的项目了,所以在做之前就考虑要周到一些,不能像做单页面一样,代码堆砌也可以正常运行。功能稍微复杂一些,就要考虑可维护性与可扩展性了,我就自己在做的过程中遇到的一些问题做一些总结吧。没有大片的代码贴,只是写一些体会而已。

数据分离

我们很早就会听说MVC之类的设计模式,目的也是为了实现代码的拆分,加强代码的可读性可维护性。图库的接口比较多,在开发以及维护过程中,为了方便适应接口的频繁更改(你懂的),组长很久以前提醒过我要把接口集中放在一个文件里面(当时我并没听进去,因为懒 T0T,但是我记住了),这时就派上用场了,如下:

var HOST = "http://tuku.tx.163.com";//正式环境
    var cgiLock = {}
    var cgi = function(url,param,success_cb,host){
        if(cgiLock[url]){   
            return false;
        }
        cgiLock[url] = true;
        var _url = (host?host:HOST)+url;
        $.ajax({
            type : "GET",
            url : _url,
            data : param,
            dataType : "jsonp",
            success : function(data){
                cgiLock[url] = false;
                if (data.status =="ok") {
                    success_cb(data);
                }else{
                    alert(data.msg||data.form_errs_msg);
                }
            },
            error : function(data){
                cgiLock[url] = false;
                //统一处理error
                console.log("报错接口为:"+url);
                alert("服务器错误,请稍后重试");
            }
        });
        var exports = {
        cgi : cgi,
        get_albums : function(param,cb){
            var url = "/v1/album";
            param.preview_count = 4;
            cgi(url,param,cb);
        }
    };
    return exports;
    }

这样,就不怕接口频繁修改之后,各种js文件里面各种找了。
具体代码在这里:天下图库移动端git地址

提取公用部分

一个项目往往很多地方都是可以公用的,在着手做之前,看看哪些是可以公用的,把公用的部分拆分出来,可以省很多时间,方便后期维护。

1、使用模板:从接口取的数据要用模板去动态添加,尽量避免写成字符串。

2、公用样式:重复写样式好累哒,而且一个重复的样式后面要修改,好麻烦哒。我一般在公用的样式前面加个com_,统一放在common.less里面,只需要改一个就可以了。

3、公用方法和组件:同样的功能,可以抽象出来写成一个公用的工具方法或者是公用的组件,(我是参考槟爷的移动端模板里面的分页组件、弹窗组件、alert组件之类的公用组件来写的),需要用到的地方就实例化一个出来用,非常的方便实用。
可以参考移动端模板的写法和思路:移动官网模板git地址

4、公用模块:有时候在做运维单的时候会发现同一个项目下,不同的页面会有一些相同的地方(侧边栏,顶条之类的),有些代码并没有把它们合并起来,导致后期维护产生大量重复性的工作。所以在做之前就要看看设计稿上哪些地方可以提取成公用模板的,这样后期要修改只要改一个地方就行了。

一边写一边重构代码

有时候一边做一边有需求变化,如果懒就会将错就错,不停地给代码打补丁(我是吃过很多这种亏的)。事实证明,当你发现你当前的代码结构有坏味道的时候,一定要及时修改,不然后面会有很多坑,补丁摞补丁,后面就非常难改了。

比如说在做阴阳师概念站(http://yys.163.com/)时,需求多变,本来我做的弹窗是分开的,后来眼看着弹窗越加越多,差不多得有五六个,每个单独分开就会非常麻烦,如果再不把这块单独提取出来,重复工作就会非常多,如果懒得改的话后面就会付出代价,别问我是怎么知道的。

结语

只是和大家分享一下一些习惯,希望大家都能多多分享一些能减轻工作重复性和提高工作效率的方法,分享出来的东西如果有不合适的地方或者大家有更好的方法也希望能多多交流,共同进步。||| ^_^ |||

手机阅读请扫描下方二维码:

已有 73 条评论

  1. 恩。不错。。胖瑶还是成长了不少的。。。

  2. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  3. admin

    sjgqptrhalivkqixgxbx

  4. admin%0d%0aCRLF-Header:CRLF-Value

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  5. sjgqptrhalivkqixgxbx

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  6. 12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  7. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  8. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  9. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  10. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  11. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  12. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  13. 1

    1

  14. 1

    1

  15. 1

    555

  16. 1

    1

  17. 1

    555

  18. 1

    1

  19. 1

    1

  20. 1

    1

  21. 1

    1

  22. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  23. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  24. 1

    1

  25. 1

    555

  26. 1

    1

  27. 1

    1

  28. 1

    1

  29. 1

    1

  30. 1

    1

  31. 1

    1

  32. 1

    1

  33. 1

    1

  34. 1

    1

  35. 1

    1

  36. 1

    1

  37. 1

    1

  38. 1

    1

  39. 1

    1

  40. 1

    1

  41. 1

    1

  42. 1

    1

  43. 1

    1

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif