前后端UI产品开发协作|协作

统一命名规范：

我就发一下我的建议吧，如果你用vue就根据vue的命名规范来，因为大多人都是这样做的，方便管理,推荐一份

vue 开发命名规范 - 前端开发日志 - SegmentFault 思否

如果你用typescript的话，就按照typescript的命名规范来

TypeScript代码格式化方案标准规则是什么？

一般页面开发规范指南

开发规范指南

接口这些是没有什么限制的，文件名，架构，这些你就要和后端统一一下概述接口这些是没有什么限制的，文件名，架构，这些你就要和后端统一一下，可以采用驼峰式命名，也可以采用下滑线命名.开发文档，主要是api文档，目前用的是postman，主要是记录接口，仅做测试用.但是这远远是不足够的，还是要健全api文档,根据经验会有以下问题会出现bug，正常情况,后端只会告诉你success的返回,你看到的只有success的返回，如果你只是这样做，仍然会有问题,success也会有很多种情况，也许你只知道一种情况，在后面的开发也会有问题。后端完善接口文档.

api文档应有的格式,分为complete和fail,一般的fail，后端会有默认返回，其他的需要特殊处理

json默认格式

1
2
3
4
5
{
   "data":{},
   "status":"0",
   "message":""
}

先说一下状态码

HTTP状态码详解

200,302,404这些经常见到，后端返回的status也是不一样的，这里要跟后端以前协商一下，简单的就0和1。0就fail，1就complete，比如说权限控制,无权访问，或者是权限不够，只能访问一部分，就需要协商一下。1的话可能会有多种情况,返回也是不一样的，测试可能提出不一样的bug，比如后端查数据返回数据的格式可能是不完全的,一会返回””，一会返回[],或者干脆这个key都不返回了，那么前端这边就会抛出异常。

3.ajax请求约定,get或者post:

我目前都是统一用post，post更安全一点,数据长度无限制,不能缓存。

get和post
如果你用get 请求，为了防止缓存还要加随机数时间戳之类的。
基础数据一般就(user/info)等，安全(这个不能全部由前端做，后端不做啊)(表单验证经常会出问题)，加密传输啊，常见接口格式（分页），字段前后的统一等等吧

4.传输格式统一：

post请求，提交格式可能是formData形式也可能是json格式，一般用到的就这两种，后台可能用formData更方便，但是不灵活，由于前一个开发者用的formData,我和后端开发调试极为不方便。json更灵活些，我推荐用json。

5.图片路径:

有的项目图片路径是前端控制，分为绝对路径和相对路径，本地的资源一般都是用相对路径了，但是有的资源可能相对路径就用不了，比如说我们后端现在用的就是七牛云存储图片，如果是一个网站可能域名就固定了，这个就比较简单，前端请求图片资源的公共位置应该可以封装一下，我不知道哪个方法可以封装，我用的vue，axios请求回来图片的字段没有和后端约定，不知道怎么封装公共的图片资源地址，我这边是让后端去封装的，图片大小也是后端控制的，如果前端来控制岂不是更好

6.图片上传：

base64编码上传，我喜欢这个，因为可以弄压缩，也可以弄水印但是后端觉得太复杂，七牛云默认有压缩，form表单上传图片也是可以的，然后图片传上去，详情页会看到图片，这里强调一下，图片路径可能会有问题

7.用svn还是git:

我这里用的是git。

8.每次修改bug尽量能有文档：

不然就只能svn一个一个查了，svn必须有message提交。

9.本地数据：

永久的用local storage,临时的用session storage,移动端微信的cookie存储了那些授权的信息，所以微信这里就不要用cookie了

10.和设计小姐姐的约定：

图片采用png,图片发给我之前先压缩，然后打包成文件夹（能要求用英文给图片命名就英文吧），或者svn格式，移动端开发尺寸约定,iphone7的尺寸就好。750px,前端用rem处理。尺寸那些也让她标记了，不然谁知道那个字体有多大，颜色是什么。
PxCook - 最高效易用的自动标注工具，设计研发协作利器
有交互的地方也让她绘制了。不然你随便弄个，又不好看。

11.和产品的约定：

怎么弄交互，哪里用，一定要有原型图.产品提需求必须要有文档，没有文档的需求，你就不做。什么时候他说:”没有这个需求，这个需求不是我要求的”,你就要背锅了.

随便介绍一下知乎地址

兼容日记|兼容

最喜欢的是chrome,不要问我为什么

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
//简单弹窗
function openAlert(settings){
	var msg=settings.msg===undefined?"ok":settings.msg,
      type=settings.type===undefined?"alert":settings.type,
		  title=settings.title===undefined?"提示信息":settings.title,
    	confirmBtn=settings.confirmBtn===undefined?"确定":settings.confirmBtn,
    	closeBtn=settings.closeBtn===undefined?"取消":settings.closeBtn,
		  openCallback=settings.openCallBack===undefined?function(){}:settings.openCallBack,
    	closeCallBack=settings.closeCallBack===undefined?function(){}:settings.closeCallBack,
        confirmCallBack=settings.confirmCallBack===undefined?function () {}:settings.confirmCallBack;
    var parentobj=$(window.top.document.body);
	if(type=="alert")
	{
        parentobj.find(".btn_confirm").hide()
        openCallback(msg)
	}else if(type=="confirm"){
        parentobj.find(".btn_confirm").show()
        openCallback(msg)
	}
	
    parentobj.find(".btn_confirm").text(confirmBtn);
    parentobj.find(".btn_close").text(closeBtn);
    parentobj.find(".modal-title").html(title);
    parentobj.find(".modal-body").html(msg);
    parentobj.find(".modal").removeClass("fade").show();
    
    //关闭弹窗
    parentobj.find(".btn_close,.close").unbind('click').bind('click',function(){
        parentobj.find(".modal-body > p").text("");
        parentobj.find(".modal").addClass("fade").hide();
        closeCallBack(msg,parentobj.find(".modal").addClass("fade").hide(),this)
    })
	//点击确定按钮
    parentobj.find(".btn_confirm").unbind('click').bind('click',function(){
        confirmCallBack(msg,parentobj.find(".modal").addClass("fade").hide(),this)
    })
     //判断是否为firefox
    
     if(navigator.userAgent.indexOf('Firefox') >= 0){
        setTimeout(function(){
            var _top=($(window).height()-$(".modal-content").height())/2;
            if($(".modal-content").length!=0){
                $(".modal-content").css("transform","translateY("+_top+"px)");
            }else{
                $(window.parent.document.querySelector(".modal-content")).css("transform","translateY("+_top+"px)");
            }
        })
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
//页面代码
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-hidden="true" style="background: rgba(0, 0, 0, 0.25);z-index:100000000!important;">
            <div class="modal-dialog" role="document" style="width:320px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">消息提示</h4>
                    </div>
                    <div class="modal-body">
                        <p> </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary btn_confirm">提交</button>
                        <button type="button" class="btn btn-default btn_close">关闭</button>
                    </div>
                </div>
            </div>
        </div>
.modal-dialog {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    display: table;
}
.modal-content {
    background-clip: padding-box;
    background-color: #FFF;
    border: 1px solid #0000;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    outline: 0 none;
}
.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}
.modal-body {
    padding: 20px 30px 30px;
}
.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}
event 兼容 firfox

var event = window.event || arguments.callee.caller.arguments[0];
var files=event.target.files;
<!--[if lt IE 9]>
<meta http-equiv="refresh" content="0;ie.html" />
<![endif]-->
if (!document.addEventListener) {
    // IE6~IE8
    document.write('__MAIN_HOST__/Public/assets/manage/js/ieBetter.js'); 
}
针对ie

if (!!window.ActiveXObject || "ActiveXObject" in window){

}
针对firfox
if(navigator.userAgent.indexOf('Firefox') >= 0){

}
head

未完待续…

自传|随笔

出生

一出生就有紫霞满天，喜鹊绕梁。我呢，就诞生了。我不是在医院生的，我是在家生出来的，很多人都会说在家生的，身体强健，其实不然，我身体不算强，也不算弱吧。我可能也知道自己身体稍微弱一点，所以上体育课的时候特别积极，这点和你们一样喔。我真正的记事，大概是在第一次踩蛇的经历上。。。。。

稳稳的踩蛇

也许不知道对蛇的畏惧吧，有可能有一点害怕，我依稀记得那是一条黑蛇，松松的，软软的。第一次是不小心踩的，然后想回去看看那到底是什么。蛇呢，就溜走了。

黑房子

你们可能都是父母的宝贝，父母走到哪里就把你们带到哪里，而我，不知道，父母究竟是去做什么，又怕我出事，电视又是黑白电视，我也看不懂，就把我丢在家里，算是不怕黑吧，当年些许还是有些害怕的。

背着孩子找孩子

这不是我的记忆，这是我母亲的记忆，我父亲背着我然后找不到我，我记得还说过，还摔了一跤，我也摔了。。。。

斩蛇

古有汉高祖斩白色起义，一切都是那么有源，我本来要去河边玩，也许真的是出身牛犊不怕虎吧，一切都是那么的不小心，每次不看路，都会踩到蛇，也许是冬天吧，也许是被我一脚踩懵逼了，然后我绕了一个很大的弯，叫上了我堂妹，拿着锄头和铲子，打蛇要打七寸，然后打了半天，见蛇一直没有动，上去摸了摸，好刺激啊，据我表妹的回忆，我应该是把蛇缠绕到了我的脖子上了的，全都是模仿啊。不知道我爷爷都看的是什么电视剧，我也跟着学。结果等到我爷爷回来把蛇下锅以后，蛇居然还在动，是我的力气太小了吗。

害怕

我爷爷是我最怕的人，没有之一，因为他打人是不讲道理的，不吃饭要打，越哭越打，我玩我的玩具也打。也许是吵到他了，我刚买的玩具啊。

我的玩具

积木，这是最好的玩具了，其他的都算是玩具吗？象棋，五子棋，军棋，飞行棋（跳棋）。望眼镜。。。。我妈给我买的。。。。。。

待更…..

helloword

世界都是我的

我的博客|随笔

自己搭博客的博客是真的爽啊,不知道写什么就写点自己的想法吧,这是一篇随文录，谢谢那些一路支持我的人,本来可能会有很多内容,不过现在的思绪已经放空.不知道写什么了。突然有了写文章的兴趣。还差一点点就差一点点,感谢所有的吃瓜群众，还有一个小问题，解决了马上回来，see you later.