前端开发小问题汇总

壹，ios 使用alert弹窗取消默认的域名

<script>
  window.alert = function(name){
    var iframe = document.createElement("IFRAME");
    iframe.style.display="none";
    iframe.setAttribute("src", 'data:text/plain,');
    document.documentElement.appendChild(iframe);
    window.frames[0].window.alert(name);
    iframe.parentNode.removeChild(iframe);
  }
  //重写confirm方法，去掉地址显示
  window.confirm = function(name){
    var iframe = document.createElement("IFRAME");
    iframe.style.display="none";
    iframe.setAttribute("src", 'data:text/plain,');
    document.documentElement.appendChild(iframe);
    var result = window.frames[0].window.confirm(name);
    iframe.parentNode.removeChild(iframe);
    return result;
  }
</script>

贰，登录信息储存

推荐在vue中使用good-storage，使用方法简单

// 安装
npm install good-storage -S
// 引入
import storage from 'good-storage'  // 全局引入好像不管用，需要在你用到的页面引入
// 使用
// localStorage
storage.set(key,val) 
storage.get(key) 
// sessionStorage
storage.session.set(key, val)
storage.session.get(key, val)

// API
set(key, val)
set storage with key and val

get(key, def)
get storage with key, return def if not find

remove(key)
remove storage with key

has(key)
determine storage has the key

clear()
clear all storages

getAll()
get all the storages

forEach(callback)
forEach the storages and call the callback function with each storage

叁，一些不太常用的Css样式

①鼠标变成小手
②

肆，封装一个从url中获取?后面的参数

function GetRequest() {
  var url = decodeURIComponent(location.search);
  var theRequest = new Object();
  if (url.indexOf("?") != -1) {
    var str = url.substr(1);
    var strs = str.split("&");
    for(var i = 0; i < strs.length; i ++) {
        theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
    }
    }
        return theRequest;
  };
  var msg = GetRequest()
  // var token = msg.api_token

伍，页面出现浮层时禁止页面滚动

html页面

$('body').css('overflow','hidden') // 浮层出现时窗口不能滚动设置
$('body').css('overflow','auto') // 浮层关闭时滚动设置

vue页面

// 浮层出现时窗口不能滚动设置
var mo = function(e) {e.preventDefault()}
document.body.style.overflow = 'hidden'
document.addEventListener("touchmove", mo, false)
// 浮层关闭时滚动设置
var mo = function(e) {e.preventDefault()}
document.body.style.overflow = ''
document.removeEventListener("touchmove", mo, false)

陆，改变页面路径

window.location.href = ''

柒，苹果处理时间的兼容问题

苹果在处理事件时，如果时间格式为2018-01-01，会处理出错，需要将时间转为2018/01/01的格式

var newtime = time.replace(new RegExp(/-/gm), "/")

捌，在使用$.ajax需要配置头部时

$.ajax({
  beforeSend:function(jqXHR,options){
    jqXHR.setRequestHeader("Accept", "application/json");
    jqXHR.setRequestHeader("Content-Type", "application/json");
  },// beforeSend配置头部
  type:"get",
  url: "",
  success: function(data){
    // do something
  },
  error:function(e){
    console.log(e)
  }
})

玖，在vue项目中使用jq

① 首先通过npm安装jquery

npm install jquery --save

② 在webpack.base.conf.js里加入

var webpack = require("webpack")

③ 在webpack.base.conf.js中module.exports的最后加入

plugins: [ 
  new webpack.ProvidePlugin({ 
    $:"jquery", 
    jQuery:"jquery", 
    "windows.jQuery":"jquery"
  }) 
],

④ 在main.js中引入

import $ from 'jquery'

⑤ 最后运行npm run dev

拾，vue写H5项目，px转rem

1.下载amfe-flexible

npm i amfe-flexible

2.引入amfe-flexible

在main.js中引入amfe-flexible

import 'amfe-flexible/index.js'

3.安装px2rem-loader

npm install px2rem-loader

4.配置px2rem-loader

在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，将下面代码加进cssLoaders方法中

const px2remLoader = {
 loader: 'px2rem-loader',
 options: {
   remUint: 75
 }
}

同一文件下，在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
}

5.重启

npm run dev

6.注意事项

一、不能在index.html的头部加 name 为 viewport 的 meta 标签，flexible会自动为我们添加
二、对边框样式增加/* no */后缀，会保持原样

.box{
    border: 1px solid #fff; /* no */
}
// 会被编译成如下：
.box{
    border: 1px solid #fff;
}