03月
11

工作中所遇到的问题

发表于 • 字数统计 2198
文章目录
  1. 本地开发 跨域 (基础)
  2. 查找对象或者中是否有存在某个值
  3. 用 jQuery 实现多品类购买的购物车
  4. 通过 script 单独引入 vue.js
  5. 前端导出表格
  6. window.open 浏览器拦截
  7. 银行卡号加空格
    1. 方案一
    2. 方案二
    3. 方案三
  8. 通过script 单独引入vue.js

记录一下自己在工作中所遇到的问题及及解决方案

本地开发 跨域 (基础)

在本地开发 请求线上的接口时 会遇到跨域的问题 那时如何解决的呢？

  • 使用 chrome 浏览器的跨域设置 （适用与不使用 webpack 打包的项目）
  • webpack 配置 proxyConfig设置代理
  • 使用 Nginx 等反向代理工具
  • 使用 fiddler 等拦截转发工具

查找对象或者中是否有存在某个值

  1. indexOf(1);
    对于浅数组使用好用，对于复杂数组，数组嵌套对象再嵌套数组 且是动态取值比较的 用 indexOf 就难比较，因为 indexOf 计较的值一旦索引发生了改变就没有办法比较是否存在某一个对象了。这种情况 将数组进行 JSON.stringfy 后再 indexOf 就可以解决了
  2. arr.find()
    数组实例的find()用于查找目标元素，查不到返回 undefined
  3. 对象中直接使用array[kry]调用，若没有则会返回undefined且不会报错。

用 jQuery 实现多品类购买的购物车

  1. 在页面中能对单个物品进行加减并加入到购物车的操作，保证购物车物品的唯一，最新的特性，考虑到这个情况，是用一下思路解决的：

    • 在点击物品时将物品的单个信息对象保存下来，加减时操作信息对象
    • 点击加入购物车时，将信息对象的 id 拿出来当成对象的 key 值添加到对象中，利用对象 key 的唯一性，且能更好的进行覆盖和删除操作。
    • 在整个流程中利用数组对象的指针特性，改变其中的某一个值影响到原本的对象，保证了多个视图层的数据统一性。

  2. 考虑到页面中能进行筛选和搜索（都是从后台重新拿取的数据），重新渲染物品列表导致原本的购物数量的信息丢失。

    • 在从接口获取数组列表时，就比对原本的购物车列表，再进行刷新渲染

  3. 因为使用的 jquery,所以想封装一个组件，组件中 监听一个 click 事件 并且可以执行相应的回调， 当时用的事件委托 ，暂时还不知道怎么封装，类似于商品列表的加减器和购物车列表的加减器

通过 script 单独引入 vue.js

最开始接触 vue.js 时，最开始有两个使用途径，一个是 vue-cli 脚手架的单页应用，一个是通过 script 单链引入的形式。

在使用单链的时候在进入首屏时，遇到过如下问题：

  • 页面中会出现 vue 的未解析的符号，例如{{}}和初始样式。
  • 当 js 判断再引入主题皮肤 css 时，会有很大一段时间是原始样式在突然过度到皮肤样式，不够美观，而且很奇怪

当时没有想清楚，然后搁置之后就忘记了这个问题，如今又要负责这种单链的页面，又遭遇了一样的问题，才惊觉其原因：
首先我们将 vue.min.js 在 body 后面才引入的，把 vue.min.js 放在 head 中就可以解决了出现未解析的符号这个问题。是由于加载 html 之后还没有加载 js 对页面进行解析才出现了这个问题

那未初始化的样式该如何解决呢？
在以前是通过操作 css 来解决的，

  • 最开始默认样式是 display：none 通过 js 控制 class 而不是直接通过 v-show 操作。相当于 v-show v-if 全部不用。（好痛苦啊这种方案）。
  • 还有一种是加 loading，在 creat 里面 loading 结束。

v-show\v-if 是无法操作 css 样式为 display：none 的元素的。

而且单链的形式都没有办法用 es6 和封装组件，没有成熟的生态圈。这种开发方式太痛苦了，最可怕的是单链 vue+前后不分离。。。。我选择死亡。而且单链这种模式如何封装组件呢？这是个问题。

前端导出表格

很早就做过导出表格的功能，也有考虑过前端是否能导出 excel 表格。现在看到了一个纯前端导出文件的插件——SheetJS

纯前端的实现方案能够在不依赖服务端能力和网络的情况下完成数据导出。虽然如此，数据量较大的时候，站在性能及用户体验的角度，在服务端完成会是更优雅的解法。

window.open 浏览器拦截

window.open 可以实现打开一个新浏览器窗口。

1
2
3
4
5
var btn = $("#btn");
btn.click(function() {
    //不会被拦截
    window.open("http://www.baidu.com");
});

如果是用户触发的时候，是不会拦截的，可以正常打开新窗口，所以，如果是用户主动触发弹窗，浏览器一般不会拦截。

1
2
3
4
5
6
7
8
9
10
var btn = $("#btn");
btn.click(function() {
    $.ajax({
        url: "ooxx",
        success: function(url) {
            //会被拦截
            window.open(url);
        }
    });
});

如上用户没有直接触发 window.open,而是发出一个 ajax 请求，window.open 方法被放在了 ajax 的回调函数里，这样的情况是会被拦截的

  • 当浏览器检测到非用户操作产生的新弹出窗口，则会对其进行阻止。因为浏览器认为这不是用户希望看到的页面
  • 在 chrome 的安全机制里面，非用户触发的 window.open 方法，是会被拦截的。

如何解决弹窗被拦截的问题，可以先打开一个不被拦截的空窗口，在异步请求后将 href 替换。如下：

1
2
3
4
5
6
7
8
9
10
11
12
var btn = $("#btn");
btn.click(function() {
    //打开一个不被拦截的新窗口
    var newWindow = window.open();
    $.ajax({
        url: "ooxx",
        success: function(url) {
            //修改新窗口的url
            newWindow.location.href = url;
        }
    });
});

银行卡号加空格

给用户输入的银行卡号 每隔 4 位加一个空格，切只能输入数字

方案一

1
2
3
4
<input
    type="text"
    onkeypress="return (function(key,that){return (key>47&&key<58) && ((that.value.length%5==0)?that.value+=' ':1)})(event.keyCode,this)"
/>

在 chrome 上输入数字的体验特别良好，输入中文时就会出现不触发 onKeypress 事件， 更重要的是无法兼容移动端，在华为浏览器上就死在第一步，所以就直接抛弃。

方案二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<input
    type="text"
    id="bankId"
    maxlength="23"
    placeholder="请输入银行卡号"
    oninput="value=value.replace(/[^\d\s]/g,'')"
/>;

input.on("keyup", function(e) {
    v = this.value;
    v = v.replace(/\s*/g, "");
    if (/\S{5}/.test(v)) {
        this.value = v.replace(/(\d{4})(?=\d)/g, "$1 ");
    }
});

暂时没有发现什么 BUG,后记：是有BUG的，比如一直输入中文

方案三

1
2
3
4
5
6
7
8
9
10
11
12
13
input.on("keyup", function(e) {
    var value = this.value;
    value = value.replace(/\s*/g, "");
    var result = [];
    for (var i = 0; i < value.length; i++) {
        if (i % 4 == 0 && i != 0) {
            result.push(" " + value.charAt(i));
        } else {
            result.push(value.charAt(i));
        }
    }
    this.value = result.join("");
});

暂时也没有发现什么 BUG

通过script 单独引入vue.js

最开始接触vue.js时，最开始有两个使用途径，一个是vue-cli 脚手架的单页应用，一个是通过script 单链引入的形式。

在使用单链的时候在进入首屏时，遇到过如下问题：

  • 页面中会出现vue 的未解析的符号，例如{{}}和初始样式。
  • 当js判断再引入主题皮肤css 时，会有很大一段时间是原始样式在突然过度到皮肤样式，不够美观，而且很奇怪

当时没有想清楚，然后搁置之后就忘记了这个问题，如今又要负责这种单链的页面，又遭遇了一样的问题，才惊觉其原因：
首先我们将vue.min.js在body 后面才引入的，把vue.min.js放在head中就可以解决了出现未解析的符号这个问题。是由于加载html之后还没有加载js对页面进行解析才出现了这个问题

那未初始化的样式该如何解决呢？
在以前是通过操作css 来解决的，

  • 最开始默认样式是display：none 通过js控制class 而不是直接通过v-show操作。相当于v-show v-if 全部不用。（好痛苦啊这种方案）。
  • 还有一种是加loading，在creat里面loading结束。

v-show\v-if 是无法操作css样式为display：none的元素的。

而且单链的形式都没有办法用es6和封装组件，没有成熟的生态圈。这种开发方式太痛苦了。

分享到：
network