kk2n

kk2n 查看完整档案

上海编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

kk2n 发布了文章 · 9月29日

告诉你:前端在开发React项目时最舒服的方式!

告诉你:前端在开发React项目时最舒服的方式!

---从4个方面来给大家分享前端在开发过程中,从忙乱的状态走向迅捷状态的进化过程。

这4个方面是:
1.【统一的代码及开发规范】
2.【完善的前端文档及接口文档】
3.【简单易懂的前端数据管理方法】
4.【合理的抽离组件】

【引言】

回想起去年同时期,每天加班到22点甚至24点都是常有的事情....由于太忙,也一直没时间学习新的东西,每天就是【接需求】【做开发】--接着--【接需求】【做开发】。没有时间静下来,好好想想....如何提高自己的工作效率,如何提高我们这个团队的工作效率!

每次参加公司【月度计划】会议时,总避免不了讨论一个话题,“本月又是谁姓【瓶】?”,意思就是:面对需求,哪个部门或者组出现了【瓶颈】?

面对技术总监一次一次的怒怼:“又是前端姓【瓶】?”,压力着实不小....

当时,我们8个前端开发,10多个后端开发,

开发按项目分组,每个需求基本上会安排1-2前端,和3-4个后端,共同配合完成开发任务。

前后端的比例基本上在1:2或1:3。同时进行的开发任务,通常在4-5个。

所以,当时的状态,就是大概有4-5个前端一直在完成业务需求,这些前端基本上手上同时要进行1-2个项目。

由于,公司实现的是【敏捷开发】模式,提测完一个需求后,马上进入下一个需求,有时候,连测试改bug的时间都没有.....所以,当时,可以说是相当辛苦......

我们自己的框架、组件和一些公共方法,也需要安排1-2前端来开发与维护,并且这1-2人还需要机动地帮助人数不够的项目。

而作为技术负责人的我,基本上没办法参与到开发项目中.....因为,每天的会议一个接着一个....
【需求分析会】【项目评审会】【原型评审会】【接口文档评审会】【测试用例评审会】....除了这些,还有部门周会,月会,前端内部的代码recode,技术分享会,等等....

【历史的技术债务】

在前面的工作环境下,又经历的大半年时间,我和我的前端同仁们,基本上把之前遗留下来的系统,重新梳理一遍,把之前的老系统,遗留下来的问题,基本上解决完了

当时,公司ERP老系统,有多个版本,有最早基于easyUI+JQURY,也有基于vue1.0+饿了么UI 1.0版本的系统,由于没办法VUE和UI库的升级成本很高。

老系统bug也很多,记得有一周测试测出有近300个bug,每天下班17:30,开始对bug的解决数,一天50-60个,平均分给3-4个人,每人10-20个,改完了后再下班。

大家都知道:改别人写的代码是最痛苦的事,因为,你要理解对方得到编程思想,然后再判断合不合理,如果是别人的整个思维都是错的,那你就得重新开始,如果只是思维有漏洞,你还可以,想办法补补。

所以,由于种种原因,我们毅然的决定,将老系统的bug改完后,就不在老的系统上开发新的功能,

再结合自己的业务特点,将我们新的前端框架确定下,并为之制定了一些系列的编程规范,将之,打造成一个可持续扩展的平台....

大概去年5-6月份时,我们决定上基于Reat的系统框架。当时,考察了dva,umi等现在比较流行的框架后,最后,自己开发一套基于React的前端脚手架...

至于为什么要新开发脚手架,也就是担心,使用其他的脚手架,可能会出现,依赖不能及时更新的问题,还有版本的,就比如DVA,他的1.0和2.0版本就有很大区别,最新的2.0版本里,现在还有报错....

所以,长痛不如短痛,我们自己读官方文档,自己写自己脚手架。

由于是自己写的,扩展起来也非常方便。并且在开发的过程中...我们不但的总结,哪些是常用的操作,哪些能提高我们的开发效率...然后,把方法总结处理写出对应的通用的方法...

待续....

查看原文

赞 0 收藏 0 评论 0

kk2n 回答了问题 · 2016-03-16

解决前端如何百分百还原美工图?

如果允许页面出现滚动条,实现还是有可能的,宽高按设计稿的比例计算出来,

如果,既要与设计稿一致,又要整屏显示,那就是不可能的,除非做设计的,也根据不同的设备设计出不同大小的设计稿来,

说多了都是泪,如果你的上司是做设计的,拿着一张设计稿要前端出一模一样的页面,还要整屏显示,因为设计稿就是没有滚动条的,这时你就直接拿键盘鼠标砸到他脸上

关注 17 回答 12

kk2n 回答了问题 · 2016-03-16

css('width','xxz')为什么不能执行? /*xxz是事先定义好的*/

去掉xxz的引号,这样他就是变量,就会等于计算出来的数字,加引号表明width:xxz这样肯定无效

关注 4 回答 4

kk2n 关注了问题 · 2016-03-16

解决webpack 如何按顺序合并文件

var a = ['a.js','b.js','c.js'];
module.exports = {
    entry: a,
    output: {
        path: path.join(__dirname, './out'),
        filename: 'out.js'
    }
};

webpack 为什么不是按数组中文件的顺序去合并js文件的?

关注 3 回答 1

kk2n 关注了问题 · 2016-03-16

如何编写高效的Sass并兼容像Bootstrap那样的第三方UI框架?

想请教一下大家,用sass(scss)的话怎么组织代码的呢?有什么开源项目代码案例可以参考,感觉很多功能会看不会用。如果引入像bootstrap这样的UI框架后,怎么命名会比较兼容,且不繁琐,扩展性好?例如是直接在相同类名上覆盖,还是自己起一个类名写样式添加在后面,还是重新自定义一份?我之前看了不少公司的css代码规范,像AlloyTeam的,网易NEC的。也看过大漠翻译的管理sass文件结果http://www.w3cplus.com/preprocessor/architecture-sass-project.html。但感觉自己写还是没什么套路和头绪,写的很乱。希望大家不吝赐教,提供一下写sass的经验,谢谢~

关注 3 回答 1

kk2n 关注了问题 · 2016-03-13

vue.js的第二层菜单内容是一样的,怎么修改一下数据结构?

下面的代码是一个选择年月的表单,因为月份都是1月-12月,是相同的,所以问题就是:下面代码中的vue.js代码怎么修改一下数据结构,让月份只用写一次就好。
html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #card1 {
            width: 40rem;
            position: absolute;
            display: none;
            right: 0;
            left: auto;
            top: 100%;
            z-index: 1000;
            float: left;
            min-width: 160px;
            padding: 5px 0;
            margin: 2px 0 0;
            font-size: 1rem;
            color: #373a3c;
            text-align: left;
            list-style: none;
            background-color: #fff;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            border: 1px solid rgba(0, 0, 0, .15);
            border-radius: .25rem;
        }
    </style>
</head>
<body>
<div class="container spark-screen">
    <fieldset class="form-group">
        <label for="inputGroupText" class="col-xs-2 control-label">选择年月:</label>
        <div id="inputGroup1" class="input-group">
            <input id="inputGroupText" name="inputGroupText" v-model="choseninputGroup1" type="text"
                   class="form-control"
                   aria-label="Text input with dropdown button"
            <div class="input-group-btn">
                <button id="button1" type="button" class="btn btn-secondary dropdown-toggle"
                        aria-haspopup="true" aria-expanded="false">
                </button>
                <div class="card dropdown-menu-right" id="card1">
                    <div class="card-header">
                        选择
                        <button type="button" class="close" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            <span class="sr-only">Close</span>
                        </button>
                    </div>
                    <div class="card-block">
                        <table id="table1" class="table table-sm table-bordered dropdown-menu-right">
                            <tr>
                                <td>90年代</td>
                                <td>
                                    <ul class="year-month">
                                        <li class="col-xs-3" v-for="first in group1">
                                            <a class="trigger right-caret">{{first.level01}}</a>
                                            <ul class="row dropdown-menu sub-menu">
                                                <li class="col-xs-4" v-for="second in first.level02"><a
                                                        data-table1="{{first.level01}}{{second}}">{{second}}</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                            <tr>
                                <td>00年代</td>
                                <td>
                                    <ul class="year-month">
                                        <li class="col-xs-3" v-for="first in group2">
                                            <a class="trigger right-caret">{{first.level01}}</a>
                                            <ul class="row dropdown-menu sub-menu">

                                                <li class="col-xs-4" v-for="second in first.level02"><a
                                                        data-table1="{{first.level01}}{{second}}">{{second}}</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
</div>
</fieldset>
<script data-original="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script data-original="https://cdn.bootcss.com/tether/1.1.1/js/tether.min.js"></script>
<script data-original="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script data-original="https://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
</body>
</html>

jquery代码

<script>
    $(function () {
        $('#button1').click(function (e) {
            var menu = $('#card1');
            e.stopPropagation();
            if (menu.is(":hidden")) {
                menu.show();
            } else {
                menu.hide();
            }
            $('.sub-menu').hide();
        });

        $(".year-month>li > a.trigger").on("click", function (e) {
            var current = $(this).next();
            var grandparent = $(this).parents();
            grandparent.find(".sub-menu:visible").not(current).hide();
            current.toggle();
            e.stopPropagation();
        });

        $(".sub-menu >li >a").on("click", function () {
            var root = $(this).closest('.dropdown');
            root.find('.sub-menu:visible').hide();
            $('input[id=inputGroupText]').val($(this).attr("data-table1"));
            $('#card1').hide();
        });

        $('.sub-menu').mouseleave(function () {
            $(this).hide();
        });


        $(window).click(function () {
            $("#card1").hide();
        });


        $("button.close").click(function () {
            $(this).parents("#card1").hide();
        });

        $("#card1,.form-control").click(function (e) {
            e.stopPropagation();
        });
    });
</script>

vue代码

<script>
    var table1 = new Vue({
        el: '#table1',
        data: {
            menu: [{
                'group': '1',
                'level01': '1990年',
                'level02': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }, {
                'group': '1',
                'level01': '1991年',
                'level02': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }, {
                'group': '1',
                'level01': '1992年',
                'level02': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }, {
                'group': '2',
                'level01': '2000年',
                'level02': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }, {
                'group': '2',
                'level01': '2001年',
                'level02': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }, {
                'group': '2',
                'level01': '2002年',
                'level02': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }]
        },
        computed: {
            group1: function () {
                return this.menu.filter(function (m) {
                    return m.group === '1'
                })
            },
            group2: function () {
                return this.menu.filter(function (m) {
                    return m.group === '2'
                })
            }
        }
    });
</script>

关注 4 回答 3

kk2n 关注了问题 · 2016-03-13

解决vue.js+webpack 为 img src 赋值的路径问题?

用了 webpack 进行构建,图片部分的 loader 如下

{
  test: /\.(png|jpg|gif|svg)$/,
  loader: 'url',
  query: {
    limit: 10000,
    name: '[name].[ext]?[hash:7]'
  }
}

模板代码

<template v-for="item in items">
  <li v-show="item.show">
    <a href="#">
      <img v-bind:data-original="item.img">
    </a>
  </li>
</template>

遇到的问题是item.img中的路径并不会被 webpack 编译,还保持着相对路径的状态,最终产生 404 错误。
请问应该如何解决?

关注 24 回答 5

认证与成就

  • 获得 2 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-03-11
个人主页被 184 人浏览