勋章活动项目总结-vue.js

开发过程中总会遇到一些问题，解决之后只有认真复盘下才能有所收获。以下是勋章活动遇到的一些问题和解决方法，供大家参考。

问题

1. 代码使用了Vue模板，进页面时会显示出没渲染前的js代码，渲染完之后闪烁一下才呈现出页面；
2. iOS和PC端都能访问活动页，安卓的进去之后显示白屏；
3. 前后台代码处于不同域名下，存在跨域问题，用jQuery的ajax函数的jsonp进行跨域，后台返回的callback总是报错；
4. 后台返回的数据可能是数字也可能是字符串，没有处理就直接进行判断，导致页面没有渲染；
5. 使用v-if进行条件判断不准确
6. copy相同代码时记得校对变量

解决方案

1.页面闪烁

将HTML文件中包Vue模板代码的$el元素内的全部代码放到自定义的脚本<script type='text/x-template'></script>中，然后在js文件中的Vue实例中定义template属性。

html：

<div id="app">

</div>

<script type="text/x-template" id="tpl-app">
    <div class="container">
        ......
    </div>
</script>

js：

var vm = new Vue({
    el: "#app",
    template: "#tpl-app",
    data: {…}
}

这样设置之后，Vue会先渲染出template的内容之后再把他放进$el对应的div#app中。因此就不会看到渲染之前我们写的Vue的代码啦。

2.安卓白屏

因为iOS和PC都都正常访问，当时还一直以为是客户端的问题（客户端说这锅我不背），直到客户端发现是我的js代码有不明觉厉的错误。一开始以为是用的template有问题，尝试用了移动端的浏览器访问，APP内的入口访问，发现都是一片空白。无奈之下就想着回到一开始没用template的代码。神奇的是竟然也不可以了。好家伙，那就不是这个的问题了。
想了想，发现之前声明变量用的是var,可是因为IDE提示我应该使用let 而手贱全给替换了，赶紧给换回来。太激动了，真的恢复正常了……
虽然解决的方法很简单，但是找到这个错误花了我一整个早上的时间。可见：找到错误的方向很重要，另外一个就是不要轻易用现在还不太支持的技术做线上活动，有时候突然就会崩溃的。

3.callback报错

其实这个问题还是得归咎到自己是初次使用jsonp进行跨域，对jQuery用ajax实现jsonp的原理不太熟悉。
后端的同事一开始给我的接口格式是这样的：
...&jsoncallback=callback
我的ajax是这样的：

doSomething: function(){
    var callback = function(){
        //什么都不用干的回调函数...
    }
    $.ajax({
        url: '...&jsoncallback=callback',
        type: 'get',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        jsonpCallback：'callback',
        success: function (res) {
            if(res.code === 0){
                ...
            }else {
                ...
            }
        },
        error: function () {
            ...
        }
    })
}

这里对jQuery的ajax实现jsonp不了解的同学可以去看下其他大佬写的这篇博客：5分钟了解jsonp 或者自行去jQuery的官方文档阅读
可是这样并不能解决问题，仍然是报

callback is undefined

请教了另一位大佬，发现后台返回的这个callback函数是一个全局函数，但是接口又不止一个，所以肯定不能这么写。况且如果我们不设置jsonpCallback: 'callback' 那么jQuery会自动生成一串随机序列作为回调函数名，这样后台只需匹配到jsonp: 'jsoncallback' 中的参数jsoncallbck对应的参数值（即jQuery生成的随机函数名）

接口请求如下：

?jsoncallback=jQuery32108181306791196263_1514428957061

返回的数据如下：

jQuery32108181306791196263_1514428957061({code: 0, message: “”,data:{…}})

所以，正确的请求姿势应该是这样子的：

doSomething: function(){
    $.ajax({
        url: '...&jsoncallback=?',
        type: 'get',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        success: function (res) {
            if(res.code === 0){
                ...
            }else {
                ...
            }
        },
        error: function () {
            ...
        }
    })
}

注意&jsoncallback=? 后面的? 就表示使用jQuery的随机函数名，因此也不需要定义jsonpCallback: 'callback' 了。

4&5.v-if判断不准确

问题3和问题4都是由js的类型转换造成的。

使用v-if判断返回的是0还是1，但是不注意的话会将后台返回的"0" 转换成true，因此这种情况下应该使用Number(data) 将数据转换成数字

还有一种情况是根据数据中是否存在某一字段来决定是否显示某些元素，如v-if="someValue" ,可是当someValue==0 的时候，v-if=false.这就让人很生气了…对于这种情况，正确的判断应该是这样的

v-if="someValue !== undefined"

6.copy 出错的问题

讲真，能不copy还是少copy，因为你总是会很容易就忘了改掉某个变量名。

贴一个代码片段：

mission_value = new_value > limit_value ? limit_value : new_value;
if(item === "mission_1"){
    like_num = new_like > limit_like ? limit_like : new_like;
}else {
    login_day = new_day > limit_day ? limit_day : new_day;
}

像这类型的我有时候还是会copy下来再改的，不过也经常会忘了改掉某个变量，最后就成了下面这样子：

mission_value = new_value > limit_value ? limit_value : new_value;
if(item === "mission_1"){
    like_num = new_like > limit_like ? limit_like : new_like;
}else {
    login_day = new_day > limit_day ? limit_day : new_like;
}

不仔细看的话真的发现不了问题…
就算仔细看的话自己写的还是很难发现问题…
还得调试才能发现…

ending

以上这些就是我在这次项目中犯的一些错误或者说遇到的一些问题，我觉得把它详细的记录下来，对我或大家应该会有所帮助。
欢迎大家在下面留言评论，也讲讲大家在开发过程中遇到的一些问题，一起进步。