一个前端的工作方法总结

发表于   |   分类于   |     |   阅读次数

进入前端也半年多了，在工作中也学到了一些帮助自己提高工作效率的工具、方法，和大家分享一下，知识需要慢慢的积累，光读文章是不够的需要结合平时的实践才能融会贯通，这篇文章不会涉及很多知识，会分享一些平时工作中用到的工具、方法，主要偏向于移动端的开发方面。

跨域问题

平时在调试接口的时候，难免会碰到一系列问题，因为在本地调试的时候和线上会有不同，可能会碰到跨域，和未登录的问题。

跨协议、主域、子域、端口号都算跨域。具体的很多文章都讲的很详细。通常我们解决跨域使用jsonp、后端加跨域头，这两种需要后端来配合完成，还有是通过iframe来跨域。这是我们在生产时用到的办法。

但是在开发的时候我们总不可能让后端同学加一个本地的跨域头把。。。jsonp是可以的，但是如果暂时后端没有配合，我们本地开发也可以用一些简单的方法来实现：
我们可以使用浏览器插件：Allow-Control-Allow-Origin:** ，这个插件会转发请求，然后在请求头中加上`Allow-Control-Allow-Origin: `（插件名字简单粗暴），这样就可以使请求跨域了。

cookie问题

像平常不知道大家会不会遇到这样的情况：在联调的时候会需要不同状态的账号切换，来看前端页面展示的不同状态是不是正常的。

这时通过两个插件配合就可以比较方便的解决类似的问题：ModHeader和EditThisCookie。

通过EditThisCookie来取出页面中我们需要的cookie。通过ModHeader来设置请求头加上cookie的字段。

这样首先通过登录不同的账号取到不同的cookie：

然后把他加到ModHeader的请求头中：

通过勾选不同的cookie来切换账号就可以解决上述的问题了。

其实ModHeader也可以实现跨域。因为他可以加返回头，在返回头中加入跨域的头Access-Control-Allow-Origin: *就可以实现跨域了。

因为ModHeader可以加请求头和返回头，所以它的功能不仅仅如此，大家可以尝试着使用它。

接口调试

如果后台已经开发完接口，就配合跨域应该就可以了。

平常经常会碰到前后端已经约定好字段了或者文档已经有了，但是后台接口还没有开发完成，所以这时候需要我们自己来mock数据。

不知道大家平时是怎么mock数据的，第一开始我知道的是mock.js这个库，用这个库可以造出想要的字段和格式，而且字段都是随机的挺方便的，但是也需要学习一下。

直到有一天，我发现有人直接在ajax中直接请求了一个json文件（可能大家早已经知道了。。。），我发现这种方式真的很方便，直接把文档复制过来就可以了，还可以根据自己的需求来更改字段方便调试。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//mock.json
{
  "resperr": "",
  "respcd": "0000",
  "respmsg": "",
  "data": {
    "cur_pt": 1,
    "diff_exchange": 3,
    "exchange_pt": 2,
    "shopname": "伏牛堂",
    "addr": "望京SOHO",
    "start_time": "2016-01-01 00:00:00",
    "expire_time": "2016-01-02 23:59:59",
    "state": 1,
    "status": 1,
    "goods_name": "鸡丝大凉面一份",
    "goods_amt": "2000",
    "obtain_amt": 8,
    "obtain_limit": 1,
    "activity_id": 1,
    "exchange": 1
  }
}

另外这个npm包也不错的JSON Server，JSON Server可以起一个类似api的服务。

CSS兼容前缀

在开发移动端的时候会有webkit兼容的问题，必须去写一些兼容的前缀。但是也有方法可以省去手动的添加，当然这也依赖构建的工具去实现。但是这样做也有不好的地方，就是我们总不去手写，就会不熟悉哪些属性需要去添加兼容，辩证来看吧。

autoprefixer

1
2
3
4
5
6
7
8
9
10
11
12
13
var autoprefixer = require('autoprefixer');

module.exports = {
    module: {
        loaders: [
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ]
}

这个网站也能去看浏览器的兼容性，Can I use 。

px转rem

因为工作一直以来都是以移动端为主，移动端现在主流的解决方法就是配合flexible，css是使用rem单位来布局。

从前。。。我是看着设计稿，比如如果设计稿是375的，我在写样式的时候比如200px，我就在拿计算器算：200/37.5*2 （dpr是2）然后算出来rem的值。。。。然后原来我就天天按计算器。

直到有一天。。。我知道了可以在sass中写一个计算函数来进行计算：具体链接如果懒得看我来贴出来：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@function pxTorem($px){//$px为需要转换的字号
    @return $px / $browser-default-font-size * 1rem;
}

$browser-default-font-size: 16px !default;//变量的值可以根据自己需求定义

//SCSS
html {
    font-size: $browser-default-font-size;
}
.header {
    font-size: pxTorem(12px);
}

//CSS
html {
  font-size: 16px; }

.header {
  font-size: 0.75rem; }

这样是会简单一些，而现在呢直接使用webpack的插件可以直接在样式中写px就可以了，然后构建的时候会自动转换为rem，如果不想转换在样式后面跟/*px*/就可以了。具体使用可以看下面链接：

postcss-px2rem

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//npm install postcss-loader

var px2rem = require('postcss-px2rem');
 
module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },
  postcss: function() {
    return [px2rem({remUnit: 75})];
  }
}

压缩图片

tinypng

设计师和前端都会用到的一个超好用的图片压缩工具。

代码规范

可以使用eslint，eslint，这样大家代码风格就一样了，刚开始使用的时候确实有不适应，但是慢慢就习惯了。

ColorZilla

这个插件可以在页面上取色，记录取色的历史，还可以生成渐变的css等等。不过平常用的可能还是取色功能吧~

网站配色

配色是一门学问，在我们不了解设计的情况下可以使用这个网站来快速的找到合适的配色方案：http://paletton.com/

Octotree

不知道大家平常在浏览github时会不会有这样的情况：进入的目录深了之后，如果要返回之前的目录不是一直点浏览器的退后，就是点../那个按钮，在同事那里看到了这个插件Octotree，他在浏览器的左侧生成一个目录结构，类似于webstorm左侧一样。

这样不管进入的目录有多深都可以一键返回主目录了，挺方便的。

WEB前端助手(FeHelper)

这个工具是有一次看慕课网的视频看到的，然后自己就找到了用了一下主要包括有下面的功能：

FE助手：包括字符串编解码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成器、编码规范检测、页面性能检测、页面取色

平常常用的可能是字符串编解码，时间转换，JSON格式化这几个因为别的有其他插件来代替的。

二维码(QR码)生成器(QR Code Generator)

原来如果要手机调试页面的时候，我会这样做：把网址发到QQ或者微信上，然后再去打开网址。我估计和我这么蠢的人也不是很多了。

安装这个插件后直接扫二维码进入就好了，方便了一些。

我深知一个人所了解到的是远远不够的，很多都是从同事或者网上学习到的。希望别的同学也可以不吝啬自己的小技巧，把大家平常工作中所用到的一些觉得很方便的方法、浏览器插件、代码库、webpack插件等等，只要可以提高效率都可以分享出来，可以在下面留言，我希望可以和大家一起学习进步。

最后，分享一下自己前段时间写的一个vue小项目，知乎日报移动web版，github地址。