【前端】常用功能合集

目录

  • js
    • 跳转到新标签打开PDF文件
    • js每十个字符换行
  • es6
    • 用表达式或变量名作为对象的属性名
  • vue
    • v-for
    • 插值、:style、:class
    • 父组件加载完后再加载子组件
    • keep-alive缓存
    • 跨域请求第三方接口
    • 跨域请求之callback(不建议)
    • 读取本地文件
    • 浏览器播放提示音audio
  • jquery
    • $.fn.method 扩展方法
    • $.extend()

js

跳转到新标签打开PDF文件

let url=fileBaseUrl+this.downloadForm.downloadFile//下载地址
let ele=document.createElement('a')//创建a标签
 ele.download=this.downloadForm.downloadFile//下载名称
 ele.target="_blank"//新标签
 ele.href=url//地址
 $("body").append(ele)//将a标签插入页面
 ele.click()//点击a标签实现跳转
 $(ele).remove()//移除a标签

js每十个字符换行

string.replace(/[^\x00-\xff]/g,"$&\x01").replace(/.{9}\x01?/g,"$&\n").replace(/\x01/g,"")
  • 将每个中文字符变为两个字符,比如“中文”替换成“中文”
  • 匹配任意每9个字符或9个字符加,在匹配的字符串后加一个换行符
  • 将所有的去除

\xnn 匹配ASCII代码中十六进制代码为nn的字符
[^\x00-\xff]表示匹配非单字节的字符,例如汉字,汉字符号,单字节字符包括英文字母,数字,英文符号…
$&与 regexp 所有相匹配的子串
\x01 控制字符,soh,表示标题开始
. 除换行符 \n 之外的任何单字符
零次或一次

es6

用表达式或变量名作为对象的属性名

// 定义
var obj1={
	a:"1",
	b:"2"
}
var obj2={
	["a"+1]:"1",
	["a"+2]:"2"
}
var c="a"
var obj3={
	[c]:"1",
}
// 使用
obj1.a
obj1["b“]
obj2["a1"]
obj2["a"+2]
var c="a"
obj1[c]

vue

v-for

  1. 普通数字

    data:{
    }
    
    <p v-for="count in 4">第{{count}}个p>
    
  2. 普通数组

    data:{
          list:[1,2,3,4]
    }
    
    <p v-for="(value,index) in list">--索引--{{index}}   --值--{{value}}p>
    
  3. 普通对象

    data:{
          obj:{
            a:1,
            b:2,
            c:3
          }
    }
    
    <p v-for="(val,key) in obj">--键是--{{key}}--值是--{{val}}p>
    
  4. 对象数组

    data:{
          listObj:[
            {id:1, name:'zs1'},
            {id:2, name:'zs2'},
            {id:3, name:'zs3'},
            {id:4, name:'zs4'},
            {id:5, name:'zs5'},
            {id:6, name:'zs6'},
          ]
    }
    
    <p v-for="(item,index) in listObj">--id--{{item.id}}   --姓名--{{item.name}}p>
    

插值、:style、:class

  1. {{}}直接引用变量
    <span>Message: {{ msg }}span>
    
  2. {{}}表达式
    {{ number + 1 }}
    {{ ok ? 'YES' : 'NO' }}
    {{ message.split('').reverse().join('') }}
    
  3. v-bind直接绑定变量
    <div :id="myId">div>
    <button :disabled="btnDisable">Buttonbutton>
    
  4. v-bind拼接字符串
    <div :id="'chart-' + num" :class="'list'+num">div>
    <div :id="`myChart${index+1}`" :class="`position${index+1}`">
    
  5. :style–>{}
    data() {
    	return {
    		a:'微软雅黑',
    		b: 5,
    		c: '#fff',
    		link1: '/home',
    		d:'www',
    		msg1:'1',
    		msg2:'2',
    		msg3:'3'
    	}
    }
    
    <p :style="{fontFamily:a}">{{msg1}}p>
    <a :style="{color:(b>0?c:'#000')}" :href="link1">{{msg2}}a>
    <p :style="{fontSize:(d!='d'?'18rem':'16rem')">{{msg3}}p>
    
  6. :class–>{}
    data() {
    	return {
    		current:'a',
    		isActive:true,
    	}
    }
    <li :class="{list:(current=='a')}">
    <li :class="{list:(current=='b')}">
    <div :class="{active:isActive}">
    <div :id="`myChart${index+1}`" :class="`position${index+1}`">
    

父组件加载完后再加载子组件

  • 父组件.vue

    //引用子组件时设置`v-if=flag`为false,等数据准备后再将flag设置为true
    <template>
     ...
     <child v-if="flag"></child>
     ...
    </template>
    <script>
    ...
    //获取数据
    this.flag=true
    ...
    </script>
    

keep-alive缓存

主要用于保留组件状态或避免重新渲染
activated钩子函数
组件激活时调用,该钩子在服务器端渲染期间不被调用
deactivated钩子函数
组件停用时调用,该钩子在服务器端渲染期间不被调用

  • app.vue全局缓存
    <template>
      <div id="app">
        <transition>
          <keep-alive>
            <router-view>router-view>
          keep-alive>
        transition>
      div>
    template>
    
  • 路由缓存
    <li :class="{nav_current:(current=='index')}">
      <keep-alive>
        <router-link to="/index">页面router-link>
      keep-alive>
    li>
    
  • 组件缓存
    <keep-alive>
      <component v-bind:is="currentTabComponent">component>
    keep-alive>
    

注意事项:通常初始化操作放在mounted中,设置keep-alive缓存后页面切换时mounted不会被执行,如果需要执行某些操作则必须放在钩子函数activated中

跨域请求第三方接口

问题:不论下面哪一种方法,同一个页面都不能请求两个,$.getJSON会报Access-Control-Allow-Origin的错,axios会报503的错。
解决:也没找到好的解决方案,暂时解决方案为两个请求放在不同的.vue页面,并将数据存在store。

  • 方法一:axios通过代理
    1. 跨域请求地址
      https://lab.isaaclin.cn/nCoV/api/overall
      https://lab.isaaclin.cn/nCoV/api/area?province=北京市
    2. config下index.js的proxytable配置
      '/bpi':{
        target: 'https://lab.isaaclin.cn/nCoV/api',
        changeOrigin: true,
        pathRewrite: {
          '^/bpi': ''
        }
      }
      
    3. axios请求
      this.$axios.get("/bpi/overall").then((res)=>{
        console.log(res.data)
      })
      this.$axios.get("/bpi/area?province=北京市").then((res)=>{
        console.log(res.data)
      })
      
  • 方法二:$getJSON
    $.ajaxSettings.async = false;//防止返回数据混乱,同步请求
    $.getJSON(url1, (res)=>{
        console.log(res)
      })
    $.getJSON(url1, (res)=>{
      console.log(res)
    })
    $.ajaxSettings.async = true;//重置回异步,防止影响其他
    

跨域请求之callback(不建议)

如果有SameSite 错误,可参考以下方法解决
https://blog.csdn.net/cnq2328/article/details/105134286/

  • 方法一:script标签
    前端

    <script>
    		//回调函数,处理返回
            function showData (result) {
               console.log(result)
            }
    
            $(document).ready(function () {
            //插入标签
    			$("head").append("
                        
                        

你可能感兴趣的:(前端,javascript,vue)