【前端】常用功能合集

这篇具有很好参考价值的文章主要介绍了【前端】常用功能合集。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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">Button</button>
    
  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("<script src='https://lab.isaaclin.cn/nCoV/api/overall?callback=showData'><\/script>");
            });
    </script>
    

    后端返回

    callback是jquery在进行跨域请求时生成的一个回调函数名,当页面取得服务器返回的值时,会由该回调函数解析成json对象。所以在返回数据时应该把对整个回调函数的调用进行返回,这个函数需要一个json对象的字符串作为参数,这样才能正常解析。

    返回格式示例:callback({“name”:”hello”})

    //前端传过来的回调函数名称
     String callback = request.getParameter("callback");
    //用回调函数名称包裹返回数据,这样,返回数据就作为回调函数的参数传回去了
     result = callback + "(" + result + ")";
     }
    
  • 方法二:jsonp

    jsonp的原理就是通过script的src,将函数作为src请求地址的参数来传递数据,所以jsonp只有get一种传输方式。

    前端

    			function showData (result) {
               		console,log(result)
            	}
    
     			 $.ajax({
                       url: "https://lab.isaaclin.cn/nCoV/api/overall",
                       type: "GET",
                       dataType: "jsonp",  //指定服务器返回的数据类型
                       jsonpCallback: "showData",  //指定回调函数名称
                       success: function (data) {
                            console.info("调用success");
                       }
                   });
    

读取本地文件

前端无法像原生APP一样直接操作本地文件,否则的话打开个网页就能把用户电脑上的文件偷光了,所以需要通过用户触发,用户可通过以下三种方式操作触发:
1、通过input type=”file” 选择本地文件
2、通过拖拽的方式把文件拖过来
3、在编辑框里面复制粘贴

如果是非要不经过用户通过js读取,建议将文件放在项目static目录下,然后通过ajax请求

vue引用static下资源时,必须使用绝对路径/static/[name]
因为static目录下的文件并不会被webpack处理,它们会直接复制到最终目录(dist/static)下,一般放类库文件

  1. 将本地文件放在static下

  2. 通过get请求
    注意:因为请求的是本项目static目录下的资源,所以请求的url不需要加域名和端口(如"http:localhost:8081"),不然部署到服务器容易请求不到数据

    this.$axios
            .get("/static/data/zt_bj_5g_location3.csv")
            .then(res => {
              let csv= res.data;
              console.log(csv);
            });
    

    如果是部署到tomcat服务器,最好区分一下开发环境还是生产环境

    const baseUrl = process.env.NODE_ENV == "development"?'':'/myprojectname';
    module.exports={
      baseUrl:baseUrl
    }
    
    let url=baseUrl+"/static/data/zt_bj_5g_location3.csv"
    this.$axios
            .get(url)
            .then(res => {
              let csv= res.data;
              console.log(csv);
            });
    

浏览器播放提示音audio

方法一:修改浏览器配置

  • 代码
    <audio
     controls="controls"
     hidden
     src="../../static/alert.mp3"
     ref="audio"
    ></audio>
    
    this.$refs.audio.currentTime = 0; //从头开始播放提示音
    this.$refs.audio.play(); //播放
    
  • chrome设置允许声音自动播放
    搜索”网站设置
    【前端】常用功能合集,前端,javascript,vue
    下拉在”更多内容设置“找到“声音”,选择网站可以播放声音或者在自定义内添加
    【前端】常用功能合集,前端,javascript,vue

方法二:引导用户点击

  • 代码

    <audio
     controls="controls"
     hidden
     src="../../static/alert.mp3"
     ref="audio"
    ></audio>
    
    init() {
      //刚打开网站时弹框引导用户点击
      this.$alert("允许网站播放声音", "提示", {
        confirmButtonText: "确定",
        showClose: false,
        callback: action => {
          this.isPlay = true;
          this.play();
        }
      });
    },
    play() {
      //用户点击后,即可播放
      if (this.isPlay) {
        this.$refs.audio.currentTime = 0; //从头开始播放提示音
        this.$refs.audio.play(); //播放
      }
    },
    

jquery

$.fn.method 扩展方法

jQuery.fn === jQuery.prototype,把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法

// 扩展方法
$.fn.dataStatistics = function(options){
  options = $.extend({
  min : 1000, 
  times: 3000,
  len:9
  },options || {});
  var ths = this;//解决this指向问题
}

// 将方法扩展到.dataStatistics元素
 $(".dataStatistics").dataStatistics({
        min: rate4g,
        time: 1000,
        len: 6
 });

$.extend()

将两个或更多对象的内容合并到第一个对象,对于同一个属性,后面对象的该属性值的覆盖前面对象的该属性值
$.extend( target [, object1 ] [, objectN ] )
$.extend( [deep ], target, object1 [, objectN ] )

  • deep:可选,默认false,为true时表示深度合并对象
  • target:目标对象,其他对象的成员属性将被附加到该对象上
  • object1:可选,被合并的对象
// 将传入的options参数对象与默认的参数对象合并
options = $.extend({
  min : 1000, 
  times: 3000,
  len:9 
  },options || {});

为jQuery类添加方法:如果只有一个参数,意味着目标参数被省略,jQuery对象本身被默认为目标对象。文章来源地址https://www.toymoban.com/news/detail-683029.html

$.extend({
    a: function() { },
    b: function() { }
})

到了这里,关于【前端】常用功能合集的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 有趣且重要的JS知识合集(18)浏览器实现前端录音功能

    兼容多个浏览器下的前端录音功能,实现六大录音功能: 1、开始录音 2、暂停录音 3、继续录音 4、结束录音 5、播放录音 6、上传录音 初始状态: 开始录音: 结束录音: 录音流程 : 示例中的三个按钮其实包含了六个上述功能,点击开始时开始录音,可以暂停/结束录音,此

    2024年02月04日
    浏览(57)
  • 近万字详解Docker常用功能合集(Docker系列第1章,共3章)

    官网:https://www.docker.com 利用比虚拟机更加轻量级的容器化虚拟技术,能够低成本的把当前环境快速打包或在新环境部署相同子环境的运维工具,基于Go语言实现,跨平台(支持Linux、Windows、MacOS)。 通俗类比:无论什么牌子什么价位的主机,都可以利用同一个的Windows镜像文

    2024年04月14日
    浏览(36)
  • 30个前端开发中常用的JavaScript函数

    🧑‍💻作者名称:DaenCode 🎤作者简介:啥技术都喜欢捣鼓捣鼓,喜欢分享技术、经验、生活。 😎人生感悟:尝尽人生百味,方知世间冷暖。 在前端开发中通常会用到校验函数,检验是否为空、手机号格式、身份证格式等等。现按照用途分类整理出了30个常用的方法,在V

    2024年02月14日
    浏览(46)
  • 〖大前端 - 基础入门三大核心之JS篇㉔〗- JavaScript 的数组的常用方法 (一)

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月07日
    浏览(56)
  • vue(javaScript) 操作字符串的常用方法

    1. 获取字符串长度 JavaScript中的字符串有一个length属性,该属性可以用来获取字符串的长度 2. 获取字符串指定位置的值 charAt()和charCodeAt()方法都可以通过索引来获取指定位置的值 charAt() 方法获取到的是指定位置的字符; charCodeAt()方法获取的是指定位置字符的Unicode值。 (1)

    2024年02月03日
    浏览(44)
  • 前端随笔:HTML/CSS/JavaScript和Vue

    最近因为工作需要,需要接触一些前端的东西。之前虽然大体上了解过 HTML 、 CSS 和 JavaScript ,也知道 HTML 定义了内容、 CSS 定义了样式、 JavaScript 定义了行为,但是却没有详细的学习过前端三件套的细节。而最近的工作中需要使用 Vue ,并且想到未来的工作中使用 Vue 能够更

    2024年02月16日
    浏览(44)
  • 前端技术Html,Css,JavaScript,Vue3

    1.基本标签 2.文本格式化 3.链接 4.图片 5.无序列表 6.有序列表 7.表格 8.表单 1.选择器 2.文本和字体 3.链接 4.隐藏 5.定位position 6.浮动 7.对齐 8.图像 1.输出 2.函数 3.常用事件 4.DOM 5.改变Html 6.DOM 元素 (节点) 尾部创建新的 HTML 元素 (节点) - appendChild() 头部创建新的 HTML 元素 (节点)

    2024年02月13日
    浏览(53)
  • 从javascript到vue再到react:前端开发框架的演变

    目录 JavaScript: 动态语言的基础 JavaScript:Web开发的起点 Vue.js: 渐进式框架的兴起 Vue.js:简洁、高效的前端框架 React.js: 声明式UI的革新 React.js:强大、灵活的前端框架 演变之路与未来展望 演变过程 当提到前端开发中的框架时,JavaScript、Vue.js和React.js是三个最常见的名词。它

    2024年02月07日
    浏览(53)
  • 前端使用elementui开发后台管理系统的常用功能(持续更新)

    前言:本次的文章完全是自己开发中遇到的一些问题,经过不断的修改终于完成的一些功能,当个快捷的查看手册吧~ 功能描述:数据使用的若依的字典,或者是自定义数据,可以点击每个选项进行选择,取消选择,也可以在已选择进行清除和单个删除 使用: @selection-change

    2024年02月09日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包