【持续更新】前端开发过程中遇到的Tips 和 Problems

最新推荐文章于 2024-06-26 17:26:05 发布

一只狐猴

最新推荐文章于 2024-06-26 17:26:05 发布

阅读量298

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/m0_37975886/article/details/93640976

前端专栏收录该内容

9 篇文章

订阅专栏

本文汇总了前端开发过程中的实用Tips和常见问题，包括无返回数据的HTTP请求处理、document.write()的副作用及解决方案、JavaScript截流技术、获取元素所有样式的技巧、边距设置导致的尺寸变化以及CSS盒模型、弹出蒙层的页面定位问题、静态资源缓存更新策略和calc()函数的使用注意事项等，是前端开发者必备的知识库。

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

1.【Tip】无返回数据的http请求

背景描述：触发点击事件时，发送某请求 http://$%^.$%^?a=*&b=* 通知后台，无返回数据

可行做法：ajax get请求

Tip：访问图片的方式自动请求

var img = new Image();

img.src='http://$%^.$%^?a=*&b=*'

2.【Problem】document.write()带来的问题

背景描述：document.write最简单的理解就是：打印输出，在页面中输出write()括号内的东西。在JS中 document是DOM树最顶端的对象，也就是说是在body里打印括号里的东西。调用浏览器DOM中document对象的write方法，将一段HTML代码或是一段文本内容输出到文档,以使浏览器可以动态处理。要在页面中渲染完成后动态的插入一段script代码，使用document.write('<script>...</script>')；结果页面原本的内容都不见了，只有<script>...</script>

原因：在已经渲染完的页面也就是执行过load事件的页面里，调用document.write()会自动调用docuement.open()打开一个文档流，清空该文档的内容！然后写入数据，写完再调用document.close(),以告诉浏览器页面已经加载完毕。写入的数据会被解析到文档结构模型里。在上面的例子里，元素h1会成为文档中的一个节点。此时页面上就只剩下'<script>...</script>'这一段了。

特殊：如果document.write()调用发生在<script>标签中，那么它将不会自动调用document.open()。

解决：使用dom的api，操作元素。

var scri = document.createElement('script');

document.getElementByTagName('head')[0].appendChild(scri);

链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/write

3.【Tip】Js截流

背景描述：页面下滑，间断加载图片，每个图片展示在视窗内就触发一次展示报告事件

做法：在window.onscroll事件中，for循环图片dom元素，其距离视窗顶部高度低于视窗本身高度时，触发报告事件

问题：onscroll+for 导致一直在触发for里的代码块

解决：通过定时器实现js截流

原文链接：https://www.jianshu.com/p/b8b467837b77

   // onscroll截流事件所需的全局定时器

  var timeoutMac = null;

  //定时器回调函数

  function callBack(){

    //展示行为报告

    var adList = document.getElementsByClassName('ds');

    for(var i=0;i<adList.length;i++){

        showAd(adList[i].getAttribute('impAddress'))

    }

  }

  window.onscroll = function(){

    if(timeoutMac){

      clearTimeout(timeoutMac);

    }

    //回调函数延迟50毫秒触发

    timeoutMac = setTimeout(callBack,50);

4.【Tips】md文件编辑方式

原文链接：http://www.cnblogs.com/liugang-vip/p/6337580.html

5.【Problems】在页面上引入一个scirpt,要是用脚本里的方法，直接使用funName();不生效提示funName is undefined.

解决：在script脚本中定义该方法时不能直接 function funName(){...} 而是window.funName = function(){}

6.【Problems】页面上自调用的函数里调用另一个函数，写法如下

var getNum = function(){

     return 23;

}

(function(){

     console.log('aa')

})();

浏览器编译报错：

(intermediat value)(...) is not a function

原因：自调用函数前，代码块必须用分号;结束

var getNum = function(){

     return 23;

} ；

(function(){

     console.log('aa')

})();

7.【Tips】获取当前元素的所有样式

背景描述：查看当前元素的样式，通过ele.style.*只能查到当前元素的行内样式，无法查看类样式等所有样式

解决: 获取元素的样式对象，从对象中取出对应的样式值

var ele = document.getElementsByClassName('article')[0];

var style = getComputedStyle(ele);

console.log(style);

var br = style.getPropertyValue('font-size'); //结果是带单位的‘18px’

8.【Problems】设置边距后，改变了原本的宽高

背景描述：弹出一个提示框，固定大小为300px*185px,但设置8px的边距后，提示框被撑大为316px*201px

原因：所有只讲内边距不讲盒模型的教程都是耍流氓！盒模型定义：每个元素被表示称一个矩形的方框；默认情况下，一个元素的宽和高指的是content也就是内容的宽高，此时盒模型box-sizing的值是默认值：content-box;所以设置的padding和border会在现有的content的宽高基础上再累加；如果要固定宽高，就要设置box-sizing:border-box;表示先添加border,padding,最后content，保证父元素不会被撑大；这两种模式也被称作正常盒模型(content-box)和怪异盒模型()

链接：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Box_model_recap

相关：

1.)外边距塌陷问题：当两个盒子挨在一起时，二者之间的距离为两个挨着的外边距中最大的那个值，而不是二者的和。

2.)背景图片的边界问题：background-clip: border-box | padding-box | content-box | text ;

链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip

3.)轮廓outline:看起来像边框，是在边框之外外边距之内的一条线，不占据空间，不会修改盒子的大小

9.【Problems】弹出蒙层时使底层页面不动

问题：overflow：hidden在移动端无效 && 设置position:fixed时总是回到页面顶端 && offsetTop有风险，设置元素到页面顶端的距离scrollTop未生效

背景：开发一个sdk，嵌入到在webview的h5页面里，在弹出提示框蒙层之后，希望底层的body不动，设置样式overflow:hidden无效(在chrome里调试时生效，在手机上运行时无效)，看到网友的解决办法，将body设置为

overflow:hidden;position:fixed;

此时页面不在滚动，但是会回到页首；神奇的网友们再次给出了解决办法，给body设置一个top，值等于当前页面的距离页面顶端的距离。首先尝试了ele.style.top/ele.offsetTop,在一部分页面中正常表现，追查原因，原来style.top和offsetTop都是元素距离最近一层的position属性不为static的父元素的上偏移量，所以sdk的代码嵌入在不同来源的页面，由于其页面父子结构的不同，会导致结果不同；接着尝试了

var top = ele.getBoundingClientRect().top; //获取距离视窗顶部的距离

document.body.scrollTop = -top; //未生效

在chrome浏览器中document.body.scrollTop的值始终为0,在safari中可以查到非零值；看了一些资料，发现了这样的写法

var top = document.body.scrollTop || document.documentElement.scrollTop;

看了一位网友的帖子，这个问题有了答案，以后在使用scrollTop属性时都要注意下下兼容性；有意思的是，在官网中没有看到相关的说明，如果有哪位大神看到了，麻烦给我留个言，小女子感激不尽～

链接：https://blog.youkuaiyun.com/huang100qi/article/details/5950894

注意：scrollTop的结果是数值型，默认使用像素作单位,设置值的时候不要带单位

10.【Tips】访问远程静态资源的缓存问题

背景：把html/css/js放在CDN上(使用的是oss浏览器)，远程调用时，文件名不变，内容更新，返回内容不能及时变更，缓存了静态资源

解决：请求资源时，将资源的url添加一个后缀就可以完美解决

css.href = "https://aliyun.com/src/index.css" + '?v=' + parseInt(Math.random() * 1000000000);