82-preload和prefetch

发表于 2019-02-23 | 分类于前端-02-js基础复习

【区分】

preload 是告诉浏览器页面必定需要的资源，浏览器一定会加载这些资源

prefetch 是告诉浏览器页面可能需要的资源，浏览器不一定会加载这些资源

23-返回并刷新

发表于 2019-02-23 | 分类于前端-02-js基础复习

方案一（不推荐）

1	window.location.href=document.referrer;

解决history在某些机型不兼容的情况

方案二

1	history.go(-2)

方案三

A->B->C

当B->C的时候,在B用location.replace(C),删除B的历史记录，这样C返回就是A了

09-禁用仪表盘

发表于 2019-02-23 | 分类于前端-14-Mac

通过 Spotlight 搜索「终端」或「Terminal」，进入并复制以下命令粘贴到终端中，并敲击「return」回车键。

1	defaults write com.apple.dashboard mcx-disabled -boolean YES && killall Dock

重新开启仪表盘的解决方案

1	defaults write com.apple.dashboard mcx-disabled -boolean NO && killall Dock

15-vux踩坑

发表于 2019-02-23 | 分类于前端-08-vue

本文不仅限于vux组件，包括项目中遇到的一些问题记录
本文不仅限于vux组件，包括项目中遇到的一些问题记录

1. AlertModule 组件

原先写法：

AlertModule.show({
  title: '提示',
  content: '请输入手机号码',
  maskTransition: '' // 原生的 maskTransition 动画慢一拍，设置为空取消动画
})

解决：

每次写都要加maskTransition: '' // 原生的 maskTransition 动画慢一拍，设置为空取消动画，为了简写，封装一个函数，预设设置。

src/plugins/Alert.js:

import { AlertModule } from 'vux'

export default function(tip, payload = {}) {
  AlertModule.show({
    title: '提示',
    ...payload,
    content: tip,
    maskTransition: '' // 原生的 maskTransition 动画慢一拍，设置为空取消动画
  })
}

并将yxAlert写到 Vue.prototype.$yxAlert 上

src/plugins/index.js:

import yxAlert from './Alert'
export default {
  install: (Vue, options) => {
    Vue.prototype.$yxAlert = yxAlert
  }
}

2. toast 组件

同理，src/plugins/Alert.js:

export function yxToast(tip, position = 'bottom') {
  Vue.$vux.toast.text(tip, position)
  return Vue.$vux.toast
}

引用：

1	this.$yxToast('请输入您的手机号码')

3. 防抖函数

vux自带防抖函数，简单包装在工具函数js里src/utils

import { dateFormat, debounce as vuxDebounce } from 'vux'

// 防抖
export function throttle(fn, time) {
  return vuxDebounce(fn, time, {
    'leading': true,
    'trailing': false
  })
}

使用方法：

// 上拉加载
onPullingUp: throttle(function() {
  this.SearchOranizations()
}, 2000),

3. 验证插件

由于vux没有element-ui一套完整的验证规则，可采用vee-validate插件

4. vue-awesome-swiper 插件使用

vue-awesome-swiper 当你使用了 loop 模式，尽量用 v-if 来控制 swiper 组件的渲染，并且，swiper 对图片懒加载不友好。

<swiper :options="swiperOption" ref="swiperOption" v-if="value.length > 0">
    <swiper-slide v-for="(slide, index) in value" :key="index" ><img class="slider-img" :src="slide.F_PictureUrl" alt=""></swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
</swiper>

5. 手机侧滑插件

采用插件sideout.

6. 判断浏览器内核

请查看 Browser.js

7. 上拉下滑插件

本项目使用 better-scroll,封装从 cube-ui的 Scroll 组件，api可查看文档

bs有个问题，在手机uc浏览器，手机safria浏览器，底部栏会遮挡底部内容

_calculateMinHeight() {
  if (this.$refs.listWrapper) {
    this.$refs.listWrapper.style.minHeight = this.pullDownRefresh || this.pullUpLoad ? `${getRect(this.$refs.wrapper).height + 1}px` : 0
  }
  /* 给 UC，safira浏览器增加 padding-bottom，防止底部栏遮挡内容 */
  var _navigator = typeof navigator !== 'undefined' ? navigator : {}
  var u = _navigator.userAgent || {}
  var isUC = u.indexOf('UC') > -1 || u.indexOf(' UBrowser') > -1
  // var Safari = u.indexOf('Safari') > -1
  if (isUC) {
    this.$refs.listWrapper.style.paddingBottom = '50px'
  }
},

8.upload图片上传组件

由于vux没有图片上传组件，故采用ube-ui的upload组件,并简单封装一下。

<yx-upload
  v-model="value" // 图片链接，上传1张用字符串，多张用字符串数组
  @file-error="fileError"
  @file-success="fileSuccess"
  folderName="companyInsert"
  :maxSize="2*1024*1024"
  :amount="1">
</yx-upload>

22-a标签无法自动触发点击事件

发表于 2019-02-23 | 分类于前端-00-基础

csdn

1	<a href="www.baidu.com"></a>

问题分析

点击A标签本身，并不会触发跳转到指定链接的事件，就是说，我们平时都是点击的A标签中的文字了。所以要想用JS模拟点击A标签事件，就得先往A标签中的文字添加能被JS捕获的元素，然后再用JS模拟点击该元素即可。
打印$(“a”)[0]，得到的是http://www.baidu.com，但实际上$(“a”)[0]是一个object对象，或许说是DOM对象更贴切一些。

解决方案一

1	document.getElementById("abc ").click();

解决方案二

1	$("#abc ")[0].click();

81-removeEventListener

发表于 2019-02-23 | 分类于前端-02-js基础复习

removeEventListener() 方法用于移除由 addEventListener() 方法添加的事件句柄。

注意：如果要移除事件句柄，addEventListener() 的执行函数必须使用外部函数

匿名函数，类似 “document.removeEventListener(“event”, function(){ myScript });” 该事件是无法移除的。

21-vue-loader

发表于 2019-02-23 | 分类于前端-08-vue

加载一个全局设置文件

在每个组件里加载一个设置文件，而无需每次都将其显式导入，是一个常见的需求。比如为所有组件全局使用 scss 变量。为了达成此目的：

1	npm install sass-resources-loader --save-dev

（如果你使用了 vuejs-templates/webpack，请如下修改 build/utils.js：）

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/style/_variables.scss')
    }
  }
),

编译规则

如果路径是绝对路径，会原样保留。
如果路径以 . 开头，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。
如果路径以 ~ 开头，其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 node 依赖中的资源：
1
<img src="~some-npm-package/foo.png">
(13.7.0+) 如果路径以 @ 开头，也会被看作模块依赖。如果你的 webpack 配置中给 @配置了 alias，这就很有用了。所有 vue-cli 创建的项目都默认配置了将 @ 指向 /src。

80-H5图片保存(带二维码生成)

发表于 2019-01-27 | 分类于前端-02-js基础复习

1. 采用的js库

html2canvas: 采用0.5版本
qrcodejs ：该库已经发布很久，需要自行添加回调事件

2. 生成二维码

由于qrcodejs没有采用模块化包装，需要自行封装
由于qrcode生成二维码没有回传一个事件，需要自行加个回调函数，请参考链接

1 封装：

(function(root, factory) {
  if (typeof define === "function" && define) {
    define(factory);
  } else if (typeof exports === "object") {
    //Node, CommonJS之类的
    module.exports = factory();
  } else {
    //浏览器全局变量(root 即 window)
    root.QRCode = factory();
  }
})(this, function() {｝）

QRCode = function(el, vOption, fn) {  // line:1472
    ...
};

this._oDrawing = new Drawing(this._el, this._htOption, fn); // line:1506

var svgDrawer = (function() { // line:1044
    var Drawing = function(el, htOption, callback) {
      this._callback = callback;
      this._el = el;
      this._htOption = htOption;
    };
    
var Drawing = function(el, htOption, callback) { // line:1123
  this._callback = callback;
  this._el = el;
  this._htOption = htOption;
};

this._callback(); // line:1174

this._callback(this._elImage.src); // line:1193

使用方法：

_self.qrcode=div2canvas.qrcode("#shop-item-share__qrcode",{
  text:href,
  width: 128,
  height: 128,
  colorDark : "#000000",
  colorLight : "#ffffff"
},function(url){
  // 当url有值时代表当前环境支持canvas
  num++;
  if(num==2){
    _self.html2canvas();
  }
})

3.html2canvas

3.1 参考

参考链接

html2canvas 注意有些css会影响正常生成图片，比如 flex,css3 transform

此外，html2canvas需要promise的支持,建议用 babel-pollyfill 或者 es6-promise

3.2文字叠影问题

html2canvas文字含中文括号或者其他特殊字符的时候，生成图片时会跑到下面，与下面文字重叠，通过给字符加上span标签解决

function wrap(str){
    var arr=str.replace(/(.)(?=(.{2})+$)/g,'$1,').split(',');
    var newStr=arr.map(function(item){
      return "<span>"+item+"</span>"
    }).join("")
    if(str.length<17){
      newStr+="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
    }
    return newStr;
}

完整代码如下：

define('module/div2canvas', function(require, exports, module){
  'use strict';

  require('es6-promise').polyfill();
  var html2canvas=require('html2canvas');
  var QRCode=require('qrcode');

  var div2canvas = {
    /**
     * 根据window.devicePixelRatio获取像素比
     */
    DPR:function(){
      if (window.devicePixelRatio && window.devicePixelRatio > 1) {
        return window.devicePixelRatio;
      }
      return 1;
    },
    /**
     *  将传入值转为整数
     */
    parseValue:function(value) {
      return parseInt(value, 10);
    },
    /**
     * 绘制canvas
     */
    drawCanvas:function(selector){
      var _self=this;
      // 获取想要转换的 DOM 节点
      var dom = document.querySelector(selector);
      var box = window.getComputedStyle(dom);
      // DOM 节点计算后宽高
      var width = _self.parseValue(box.width);
      var height = _self.parseValue(box.height);
      // 获取像素比
      var scaleBy = _self.DPR();
      // 创建自定义 canvas 元素
      var canvas = document.createElement('canvas');

      // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
      canvas.width = width * scaleBy;
      canvas.height = height * scaleBy;
      // 设定 canvas css宽高为 DOM 节点宽高
      canvas.style.width = width+'px';
      canvas.style.height = height+'px';
      // 获取画笔
      var context = canvas.getContext('2d');

      // 将所有绘制内容放大像素比倍
      context.scale(scaleBy, scaleBy);

      // 将自定义 canvas 作为配置项传入，开始绘制
      return html2canvas(dom, {canvas:canvas});
    },

    /**
     * 图片转base64格式
     */
    img2base64:function(url,crossOrigin) {
      return new Promise(function(resolve,reject){ 
        var img = new Image();

        img.onload = function() {
            var c = document.createElement('canvas');
  
            c.width = img.naturalWidth;
            c.height = img.naturalHeight;
  
            var cxt = c.getContext('2d');
  
            cxt.drawImage(img, 0, 0);
            // 得到图片的base64编码数据
            resolve(c.toDataURL('image/png'));
        };
  
        crossOrigin && img.setAttribute('crossOrigin', 'Anonymous');
        img.src = url;
      }) 
    },

    /**
     * 二维码
     */
    qrcode:function(selector,option,cb){
      return new QRCode(document.querySelector(selector),option,cb);
    }
  }

  module.exports = div2canvas;
});

79-缺省协议的好处

发表于 2019-01-27 | 分类于前端-02-js基础复习

//缺省协议

/缺省协议的使用，代表资源访问的协议和当前页面保持一致，如果当前页面是http ，采用http协议访问，如果是https，则使用 https 协议访问。这样用就不管是http还是升级到https都不用改动代码,现在很多CDN资源都是这样引用。一般使用在内链中，外链的协议头具有不确定性的原因。

78-cnpm的缺点

发表于 2019-01-27 | 分类于前端-02-js基础复习

82-preload和prefetch

【区分】

23-返回并刷新

方案一（不推荐）

方案二

方案三

09-禁用仪表盘

15-vux踩坑

1. AlertModule 组件

解决：

2. toast 组件

3. 防抖函数

3. 验证插件

4. vue-awesome-swiper 插件使用

5. 手机侧滑插件

6. 判断浏览器内核

7. 上拉下滑插件

8.upload图片上传组件

22-a标签无法自动触发点击事件

问题分析

解决方案一

解决方案二

81-removeEventListener

21-vue-loader

加载一个全局设置文件

编译规则

80-H5图片保存(带二维码生成)

1. 采用的js库

2. 生成二维码

3.html2canvas

3.1 参考

3.2文字叠影问题

79-缺省协议的好处

//缺省协议

78-cnpm的缺点

1.cnpm不会帮你锁版本

2.执行 cnpm i 的时候，不会帮你自动写到pkg文件里的依赖列表