《知识点累积》JavaScript

1. / 与 ./

错误：Uncaught SyntaxError: Unexpected token <

错误原因

• 此错误在开发环境未必能出现，一般在生成环境下，且编译的项目不是放在服务器的根目录下;

• 当 vue.config.js 中的属性 publicPath 不是默认的 '/'，表示项目编译后不是从根目录开始；

两者的区别如下

• /：根目录；

• ./：当前目录；

html/head 中

html head

报错： / 从根目录开始

<script src="/static/config.js"></script>

正确： ./ 从当前目录开始

<script src="./static/文件名.js"></script>

推荐写法：使用 <%= BASE_URL %>

// 注意后缀是有斜线，所以不用额外添加
<script src="<%= BASE_URL %>文件名.js"></script>

图片路径

当图片放在 /public/images 文件夹下，属性 src 必须也从 **./ ** 当前目录开始

<!-- 注意不用写 public，因为编译后会将 public 文件夹下的静态资源全部放在根目录下 -->
<img src="./images/test.png" />

2.http 或 https

不要写死，建议写法

// http: 或 https:  注意是有冒号
let url = `${window.location.protocol}//locahost:8080/index`;

3.iframe 报错

Refused to display xxx in a frame because it set X-Frame-Options to deny

需在服务端解决；

4.代码改变icon

let link = document.querySelector('link[rel*=\'icon\']') || document.createElement('link')
link.type = 'image/x-icon'
link.rel = 'shortcut icon'
link.href = 'http://localhost/test.png'
document.getElementsByTagName('head')[0].appendChild(link)

5.用户名正则表达式

//长度至少8位,含有数字和字母
/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,}$/

// 长度至少8位,必须有数字、大小写字母和特殊字符
/^(?=.*[A-Za-z])(?=.*\d)(?=.*[`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]])[A-Za-z\d`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]]{8,}$/

//强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：
/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/

6.手机号正则表达式

/^1[3456789]\d{9}$/.test(18752365452);// true
// 或
/^1(3|4|5|6|7|8|9)\d{9}$/.test(18752365452);// true

7.选取元素列表的用法

const foo = document.querySelectorAll('.foo');// 'p'
const nodes = Array.from(foo);

8.字符串转数组

使用方法 slice 转为真正是数组

// 字符串
Array.prototype.slice.call('abcdefg');// ['a', 'b', 'c', 'd', 'e', 'f', 'g']
// 对象
Array.prototype.slice.call({0: 'a', 1: 'b', 2: 'c', length: 3})// ['a', 'b', 'c']

9.每个字符中间加

Array.prototype.join.call('hello', '-');// h-e-l-l-o

10.截取 url 参数

方法

window.GetParamFromUrl = () => {
  let url = location.href;
  let map = {}
  let paramsStr = url.split('?')[1]
  if (paramsStr) {
      let paramStrList = paramsStr.split('&')
      for (let i = 0; i < paramStrList.length; i++) {
          let param = paramStrList[i].split('=')
          map[param[0]] = param[1]
      }
  }
  return map
}	

示例

// http://localhost:8089/#/create?prjId=64
let prjId = GetParamFromUrl().prjId;// "64" //注意返回的是字符串类型

11.数组中插入新成员

let arr = [1, 1, 1];
arr.splice(1, 0, 2)// []
arr// [1, 2, 1, 1]

12.数组成员为字符串，找出最长的

let longest = ['aaa', 'bb', 'c'].reduce((pre, curr) => {
    return pre.length > curr.length ? pre : curr;
});
// 'aaa'

13.日期和时钟

setInterval(() => {
            let d = new Date();
    		let year = d.getFullYear();
            let months = (d.getMonth() + 1).toString().length === 1 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1);
            let day = d.getDate().toString().length === 1 ? '0' + d.getDate() : d.getDate();
            this.date = year + '年' + months + '月' + day + '日';
    
            let hours = d.getHours().toString().length === 1 ? '0' + d.getHours() : d.getHours();
            let minutes = d.getMinutes().toString().length === 1 ? '0' + d.getMinutes() : d.getMinutes();
            let seconds = d.getSeconds().toString().length === 1 ? '0' + d.getSeconds() : d.getSeconds();
            this.clock = hours + ':' + minutes + ':' + seconds;
}, 1000);

14.上传文件或图片

// 创建隐藏的 input:file 并触发 click 事件，打开文件选择
let inputObj = document.createElement('input')
inputObj.setAttribute('id', '_ef')
inputObj.setAttribute('type', 'file')
inputObj.setAttribute('style', 'visibility:hidden')
document.body.appendChild(inputObj)
inputObj.click();
// 监听文件选择事件
inputObj.onchange = () => {
	// 创建form对象
	let fileParams = new FormData();
    // 选择第一个文件对象
	let file = inputObj.files[0];
	fileParams.append('file', file, file.name);
    // 请求头配置
	let headerCfg = {
		headers: { 'Content-Type': 'multipart/form-data' }
	};
    // url
    let url = `/fs/upload`;
    // 上传请求
    axios.post(encodeURI(url), fileParams, headerCfg).then(response =>{
		this.$message.success('成功')
	}).catch(err => {
		console.error(err);
		this.$message.error('上传失败')
	})
}

15.html 页动态加载 js 文件

方式一(推荐)

// url 你的js文件地址
function inputScript(url) {
    let script = `<script type="text/javascript" src="${url}"></script>`;
    document.writeln(script);
}

方式二

// url 你的js文件地址
function inputScript(url) {
    let script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    document.head.append(script);
}

16.html 页动态加载 css 文件

方式一(推荐)

// url 你的 css 文件地址
function inputCSS(url) {
    var css = '<link rel="stylesheet" href="' + url + '">';
    document.writeln(css);
}

方式二

function inputCSS(url) {
    let link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
    document.head.appendChild(link);
}

17.base64 图片

<img src="data:image/jpg;base64,/9j/4AAQSkZJRg........."/>

18.回到顶部

window.scrollTo(0, 0);