百姓大小事，一呼百应！

百姓网 | 百姓知道

硬件

拉勾网的前端架构是怎样的？

相关问题： 百姓网的前端架构是怎样的？百姓网的前端架构是怎样的？ - 前端开发美团的前端架构是怎样的？美团的前端架构是怎样的？ - 前端开发支付宝的前端架构是怎样的？支付宝的前端架构是怎样的？ - 前端开发大搜车的前端架构是怎样的？ 大搜车的前端架构是怎样的？ - 前端开发

2 个回答

  • 华安 | 2017-07-22 08:32:31

    先自我介绍下，拉勾的前端程序员，也就是某匿名的那位同学所说的几个渣的程序猿之一。话说真没想到竟然会有人提问拉勾网的前端架构是怎么样的？对支付宝美团这样的大厂小厂来说，我们也就是个作坊吧，笑。
    言归正传，简单的介绍下拉勾前端的演变过程吧

    第一个阶段，拉勾网2013年7月上线后大概一年的时间内，那时的业务逻辑很简单，页面也很少，根本谈不上什么架构，基本jquery加上jquery的各种插件就可以搞定，开发的流程也是后端开发完了前端再来的原始方式。

    第二个阶段，到今年的上半年，拉勾网在这期间快速成长着，拉勾网的业务逻辑也变的越来越复杂，功能越来越多，前端的开发上也暴露出了很多问题，就像上面的那位同学说的，页面有许多能够优化的地方，而开发模式前端的后端开发的原始形式也越来越低效，跟不上整个拉勾产品的需求。
    那这个时候，拉勾的前端同学除了埋头于业务线还做了什么呢？我们做了一个可以脱离后端开发的前端集成环境：Lagou-Frontend/idt · GitHub，可以提供调试的web服务，可以写mock数据来解析velocity模版，可以打包压缩，使前端能够完全独立于后端并行开发，我们的开发流程变为前后端定接口---独立开发---连调上线，而我们的开发方式也进化为用less作为css预处理器，用amd来进行模块化开发，大量的使用前端模版，开发如弹出框，分页，轮播等等组件，今年上半年拉勾的主要产品：搜索结果页改版，公司主页改版，公司列表页改版都使用了这样的开发模式。

    第三个阶段，从今天下半年开始，拉勾准备将之前旧模式下开发的页面使用新的开发方式进行拆分，而我们的前端集成解决方案也准备替换为基于fis3的Lagou-Frontend/normae · GitHub，更好的本地调试功能：实时刷新，模拟url转发，更好的页面性能优化：打包，压缩，精灵图合成，更好的发布方式，md5戳非覆盖式的部署，远程部署，而我们所有的静态资源也将发布到static.lagou.com上，我们也正在制定拉勾的UI规范，搭建组件库，让拉勾前端的整个工作流程更加的规范高效。
    当然了，我们要做的远不止于此，拉勾的C端B端拆分后，我们会尝试MV*框架，最近也一直在进行技术选型，是最流行的angular，还是朴实实用的mvvm框架，抑或是大胆的尝试下React？对了，我们还有大前端的野心，用node做中间层，我们自己来搞定view层，再也不用纠结什么前后端模版了。当然这个目标还稍显遥远，目前node在拉勾前端还仅限于一些构建工具的搭建。

    因为各种各样的原因吧，拉勾目前接近10人的前端团队还是非常年轻的，我们知道拉勾网的页面有许多待优化的问题，也懂得我们也许应该尝试更好的架构，但是可惜拉勾并不是一个技术驱动的公司，应该说是产品驱动吧，在以前，我们可能真的没有时间进行大量的基础性技术建设，用昨天开会时eric的话说，就是我们需要一边开车一边修车，笑。但是随着我们team的壮大，开发效率的提高，我们接下来要真的去做很多事了。而且我相信在拉勾网整个前端优化的过程中，我们的团队也将获得很大的成长。

    至于说我们渣不渣什么的，在我看来真的不重要，现在做得不好就是做的不好，但是我们依然在努力着，我们相信就算是作坊，只要用心有一天也能做出漂漂亮亮的东西，话又说回来说不定哪天就不是作坊了呢？

    本问答由华安提供

  • 华安 | 2017-07-22 08:04:59

    有部分可以优化的地方：
    首页图片：
    1、微信的二维码，现有的格式是JPG的，图片大小 为35KB，如改成GIF，图片大小为15KB左右，或者把JPG压缩下品质，在同等情况下，大小大概在20KB左右。首页LOGO，也可以做下图片压缩，在品质保证的情况下。

    再说下JS这块
    1、很多JS可以合并为一个JS，或者说放一个公共的，可好像并没有看到有公共的
    如：
    <script> var a = $('#home_banner .banner_bg li a'); var http = 'http://' for(var i=0;i<a.length;i++){ var str = $(a[i]).attr('href'); if( str.indexOf( http ) < 0 ){ $(a[i]).attr('target','_self'); } } </script> <script type="text/javascript"> $(function(){ // $('#aaa').click(function(){ // PASSPORT.popup(); // }) $(".mr_del").on("click",function(){ $(".mr_remind").hide() ; $.ajax({ type:'POST', data: {}, url:ctx+'/resume/clearShowNoticeInSeesion.json' }).done(function(result) { }); }) }) </script> <script type="text/javascript"> var pypv; var IsLogin = "com.lagou.entity.User@5127f68c"; IsLogin == '' ? pypv = 2 : pypv = 1; var _py = _py || []; _py.push(['a', 'ga..n3f5DPSWZXFMcbQa2-GxjX']); _py.push(['domain', 'stats.ipinyou.com']); _py.push(['pv', pypv]); _py.push(['e', '']); -function(d) { var s = d.createElement('script'), e = d.body.getElementsByTagName('script')[0]; e.parentNode.insertBefore(s, e), f = 'https:' == location.protocol; s.src = (f ? 'https' : 'http') + '://' + ('www.lagou.com') + '/js/adv-sim.js?v=1.5.6_2015090115'; }(document); </script> <!--浏览记录--> <script type="text/javascript" src="http://www.lagou.com/js/history2.js?v=1.5.6_2015090115"></script> <!-- 统计代码配置 --> <script type="text/javascript"> $(function(){ var tag = $('.init_joblist'); var tag_attr = 'data-jobid'; var t = $.trim($('.hotabbing').children('li:first').text()); if( t == '热门职位' ){ t = 'hot'; }else if( t == '推荐职位'){ t = 'recommend'; } initHotJob(t,tag,tag_attr); }); </script> <noscript><img src="//stats.ipinyou.com/adv.gif?a=ga..n3f5DPSWZXFMcbQa2-GxjX&e=" style="display:none;" /></noscript> <script type="text/javascript"> var jobids = []; var dszicon_joblists = $(".position_list_item"); for ( var i = 0; i < dszicon_joblists.length; i ++ ) { jobids.push(jQuery(dszicon_joblists[i]).data("jobid")); } var jobicons_type = 1; </script> <script type="text/javascript"> //页面滑动到底部时，底部的登录banner向上移，露出“拉勾微博 拉勾微信 帮助中心 联系我们：400-605-9900” if(document.getElementById('loginToolBar')){ $(window).scroll(function(){ 　　var scrollTop = $(this).scrollTop(); 　　var scrollHeight = $(document).height(); 　　var windowHeight = $(this).height(); 　　if(scrollTop + windowHeight >= scrollHeight-36){ var bottom_range = 36 - (scrollHeight - scrollTop - windowHeight); $("#loginToolBar").css('bottom', bottom_range); 　　}else{ $("#loginToolBar").css('bottom', 0); 　　} }); } </script> <script type="text/javascript"> var arr=jobids; jobids = jobids.join(","); var $icon1 = $("<i class='fl pos_icon_small'></i>"); var $icon2 = $("<i class='fl pos_icon_big'></i>"); function callback(data) { for(var i=0,l=arr.length;i<l;i++){ var jobid=arr[i]; if(!data[jobid]) break; switch(jobicons_type){ case 1: var item = $(".position_list li[data-jobid=" + jobid + "]").find(".pli_top .position_name"); item.append($icon1.clone()); break; case 2: var item = $(".recommend_list .rec_pos li[data-jobid=" + jobid + "]").find(".rec_pos_l .row:eq(0)"); item.append($icon1.addClass("rec_pos_icon").clone()); break; case 3: var item = $(".my_collections li[data-id=" + jobid + "]").find(".co_item h2 a"); item.append($icon1.clone().addClass("rec_pos_icon")); break; case 4: $("#container .content_l").append($icon2.clone()); break; } } } jQuery.ajax({ url:"http://c.lagou.com/icon/showIcon.json", dataType: 'jsonp', jsonp: 'callback', data:{ type:"POSITION", size:'big', ids : jobids } }).done(function (data) { callback && callback(data); }); </script>
    这些，可以并到一个JS里面去，这样可以减少加载请求，不知道这是不是编译之后的。 我只是随便放的一段代码
    还有，JS不是应该都放底部的么，为啥，都放顶部啊？

    CSS可以做一些优化，如
    <a href="http://www.wangxiao.cn" target="_blank">中大网校</a> <span>|</span>
    1、可以把后面的span标签去掉，写2套CSS方案，IE6-8用一套，其它的浏览器和IE8以上，用另外一套，虽然有点麻烦，但它们支持伪类选择器，可以减少很多代码。
    2、很多小图标可以用图标字体代替，如“帐号设置”里面的，QQ、微博、微信等图标，以及其它的，剪头图标等等，很多会支持IE6/7的字体图标。

    虽然这些优化，都是非常小的，而且在PC端体现的并不是很明显，其实我也不知道这些有没有优化的必要性。最近做移动端比较多。 @豪情 请指点下啊，豪大大

    不知道说的对不对，欢迎大家来讨论。

    本问答由华安提供

* 本站部分内容来源自网络，仅作分享之用，侵删。

百姓网

熊掌号

简单，快速，搞得定！

查看

更多