H5开发工作经验笔记

最新推荐文章于 2024-06-17 22:13:35 发布

那谁家的，小谁

最新推荐文章于 2024-06-17 22:13:35 发布

阅读量1k

点赞数

分类专栏：小白菜javascript

本文链接：https://blog.youkuaiyun.com/qq_41807489/article/details/99349301

版权

小白菜javascript 专栏收录该内容

29 篇文章

订阅专栏

本文深入探讨了前端开发中的各种技巧和最佳实践，包括正则表达式的使用、宏任务与微任务的区别、防止页面穿透的方法、eruda和vconsole的使用、减少页面回流的策略、高德地图自定义样式等，旨在提升前端开发效率和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

正则匹配 \b边界符 \1反向引用。

function a(){
     b();
     c();
     console..log(111111);
     d();
}
function b(){
    console.log(222222);
    e();
}
function c(){
    console.log(333333);
    f();
}
function d(){
    console.log(44444);
}
function e(){
    console.log(55555);
}
function f(){
    console.log(66666);
}
//
222222
55555
333333
66666
111111
44444

window.setTimeout(fun1(),1000);
console.log(22222);
function fun1(){
console.log(11111);
}
//这样的setTimeOut无效
11111
22222
//---------------------------------------------------
window.setTimeout(function(){fun1()},1000);
console.log(22222)
function fun1(){
console.log(11111);
} 
//这样的setTimeOut有效
22222
...1秒后
11111

var arr = [1,2,3];
function a(){
arr[3] = 4;
arr = [100];
}
a();
console.log(arr)
// [100]
var arr = [1,2,3];
function a(arr){
arr[3] = 4;
arr = [100];
}
a(arr);
console.log(arr)
// [1,2,3,4]

var 宏任务 = ["SET1","SET2","SET#"];
var 微任务 = ["then1"];//哇。。。用中文骚一下
setTimeout(function(){
     console.log("SET1");
     new Promise(function(resolve,reject){
       console.log(1234)
       resolve();
     }).then(function(){
     console.log("then2")
     })
},100)

//
var p = new Promise(function(resolve,reject){
    console.log("promise1");
    setTimeout(function(){
       console.log("SET2");
    },100)
    resolve();
}).then(function(){
    console.log("then1");
})

//promise1, then1, SET1, 1234, then2, SET2, SET3

//在移动端中，由于机型的不同，往往在弹窗的时候会出现页面的穿透事件，使得原页面还是能够进行滑动，
//这是我们不想看到的效果。
//首先，建立一个函数
function bodyScroll(event){  
    event.preventDefault();  
} 
//之后在触发弹窗的时候禁止页面滚动
document.body.addEventListener('touchmove',bodyScroll,false);  
$('body').css({'position':'fixed',"width":"100%"});
//关闭弹框时开启页面滚动
document.body.removeEventListener('touchmove',bodyScroll,false);   
$("body").css({"position":"initial","height":"auto"});   
//参考链接：https://blog.youkuaiyun.com/m0_37852904/article/details/79300719

1、eruda使用方法
多页面应用
<script src="https://cdn.bootcss.com/eruda/1.5.5/eruda.min.js"></script>
<script>
  eruda.init();
</script>
单页面应用
npm install --save-dev eruda
;(function () {
    if (!/mdebug=true/.test(window.location.href)) return;
    var script = document.createElement('script')
    script.src = "https://cdn.bootcss.com/eruda/1.2.6/eruda.min.js"
    script.async = true
    document.getElementsByTagName('head')[0].appendChild(script)
    script.onload = function () {
        eruda.init()
    }
})()
在项目的入口引用这个文件就可以
只需要在地址栏增加mdebug=true即可调试
2、vconsole使用方法
多页面应用
<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
<script>
  var VConsole = new VConsole();
</script>
单页面应用
npm install --save-dev vconsole
var vConsole = new VConsole();
console.log('Hello world');

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<map name="primary">
  <area shape="circle" coords="75,75,75" href="left.html">
  <area shape="circle" coords="275,75,75" href="right.html">
</map>
<img usemap="#primary" src="https://placehold.it/350x150" alt="350 x 150 pic">

</body>
</html>

内联图片描述
传统的插入图片方式是这样滴：<img src="http://我也不知道写点什么好">，这样需要进行一次请求来的得到数据。

但是对于一个小小的图片，请求一次性价比不高，又没法应用上面提到的第二项的时候哦，我们可以尝试用内联图片：将图片作为数据直接写到页面的静态内容中。这种方法的优点是减少了请求次数，缺点是增加了第一次请求的大小，浏览器不能缓存这张图片，并且图片的大小有了限制

<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/>

平常的做法在使用documentFragment之前我的做法大致是这样的

let table = document.getElementById("u-table");
for(let i = 0;i<13;i++){
    let tempTr = document.createElement("tr");
    for(let j = 0;j<5;j++){
        let tempTd = document.createElement("td");
        tempTr.appendChilda(tempTd);
    }
    table.appendChild(tempTr);
}

上面向table中添加了65个子节点，相应的，页面就要进行65次回流想想就很可怕。

使用documentFragment的改进策略
为了减少回流次数，我们可以如此这般

let table = document.getElementById("u-table");
// 创建一个文档碎片
let fragment = document.createDocumentFragment();
// 将所有的单元格都塞进这个fragment中
for(let i = 0;i<13;i++){
    let tempTr = document.createElement("tr");
    for(let j = 0;j<5;j++){
        let tempTd = document.createElement("td");
        tempTr.appendChild(tempTd);
    }
    fragment.appendChild(tempTr);
}
// 直接将文档碎片塞到table里 这样仅仅进行了一次重绘就完成了，amazing～
table.appendChild(fragment);

//***
高德地图去掉LOGO与LOGO点击事件
//***
</style>
.amap-logo{
      opacity:0;
} 
/* 隐藏logo */
.amap-copyright{
      opacity:0; 
}
</style>
<script>
$(".amap-logo").attr("href","#");//去掉点击事件
</script>

var img = "imgurl";//imgurl 就是你的图片路径  

function getBase64Image(img) {  
     var canvas = document.createElement("canvas");  
     canvas.width = img.width;  
     canvas.height = img.height;  
     var ctx = canvas.getContext("2d");  
     ctx.drawImage(img, 0, 0, img.width, img.height);  
     var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();  
     var dataURL = canvas.toDataURL("image/"+ext);  
     return dataURL;  
}  

var image = new Image();  
image.src = img;  
image.onload = function(){  
  var base64 = getBase64Image(image);  
  console.log(base64);  
}

日常注意点：

将多次页面样式改变合并成一次操作
将需要多次重排的元素，设置为absolute或者fixed，元素脱离了文档流，不会影响别的元素
对一个有多个层次的dom节点，构建完成之后再插入页面中，而不要一步一步添加
可以先把元素display：none，改变内容完成之后再diaplay：block。

p标签有默认的margin padding 要及时去掉

new date()获取的是本地本机时间，不一定是准确的北京时间，要获取当前北京时间可以通过服务器端获取。

jquery同时设置animate与slideDown /slideUp必须等到动画结束再操作slideDown/slideUp，

否则会出现白板闪动。(解决方法（settimeOut（）)。

在用css对行高进行设置时，line-height的属性必须在font的下面，否则无效！

①inline-block: 水平排列一行，即使元素高度不一，也会以高度最大的元素高度为行高，即使高度小的元素周围留空，也不回有第二行元素上浮补位。可以设置默认的垂直对齐基线。

②float: 让元素脱离当前文档流，呈环绕装排列，如遇上行有空白，而当前元素大小可以挤进去，这个元素会在上行补位排列。默认是顶部对齐。

场景：

①inline-block：当我们要设置某些元素在一行显示，并且排列方向一致的情况下，我们尽可能去用inline-block。因为inline-block的元素仍然在当前文档流里面，这样就减少了程序对DOM的更改操作，因为DOM的每一次更改，浏览器会重绘DOM树。理论上会增加性能消耗。这样也不用像flaot那样麻烦，需要清除flaot.

②float：即使inline-block为布局首选，但是也有inline-block所不能涉及的一些业务需求，比如：有两个元素，我们需要一个向左，一个向右排列，这时候我们就只能用float来实现，

window.location.href不会立即就阻塞所有的代码，这和alert不一样，它至少会等待一个页面离开事件，那么在同时，代码会往下执行。alert阻塞当前代码，这个没啥好问的吧，规定就是这样，alert，confirm和prompt都是同步的，后面的代码都会被阻塞。

sessionStorage 不能保存对象和数组，需要json.stringify(obj) 然后获取的时候 json.parse(obj);

mac解决跨域快速启动方式https://juejin.im/post/5d6bb5acf265da039d32e640