JS遇到的一些问题（持续更新）

最新推荐文章于 2022-07-19 23:14:25 发布

kikpin

最新推荐文章于 2022-07-19 23:14:25 发布

阅读量237

点赞数

分类专栏： JS H5C3 文章标签： javascript h5 c3

本文链接：https://blog.csdn.net/qq_36484899/article/details/89002014

版权

JS 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

H5C3

1 篇文章 0 订阅

订阅专栏

JS遇到的一些问题

window.onload = function(){...}一个页面中只执行一次；相当于onload事件绑定匿名函数；
一个页面中，一个JS应用另一个JS文件的函数；
通过操作DOM插入JS文件，然后执行里面的函数，必须在</body>标签之后

//html中引用B文件
<body>
</body>
<script src="./b.js"></script>

//b.js引用a.js
var new_e = document.addElement("script");
new_e.setAttribute("type","text/script");
new_e.setAttribute("src","./a.js");
document.body.appendChild(new_e);

function b(){
//在B.JS文件中执行A.JS的函数
	a();
};

对外暴露函数接口：()();

//全局
(function(){
	function test(){...代码}
	window.ts = test();
})()
//或
(function(){
	window.ts = function(){...代码};
})()
或
(function(){
	var test1 = function (){...代码}
	var test2 = function (){...代码}
	window.ts = {test1,test2};
})()

或

//闭包
var foo = (function(){
	return {
		test = function(){...代码};
		}
})();
console.log(foo.test);

通过JS加载CSS样式的思考：

操作DOM，创建<link>标签引入，兼容性好；
封装函数，动态加载：兼容性问题。
封装插件内部=>操作DOM创建<link>标签引入的URL，将插件引用时，其内部的URL的相对地址问题？URL为当前引用JS的相对路径，不是插件内部的相对路径。有待优化~！！

变量提升，函数提升，元素树节点树获取（实时）；
语法糖this；
鼠标事件mouseover、mouseout多次触发问题：事件冒泡；
- 一般和mouseenter、mouseleave相区别，兼容问题；
- 阻止事件冒泡，子节点添加event.stopPropagation()方法；
- 可以使用jQuery封装好的的mouseenter和mouseleave事件；
实时获取DOM节点尺寸？window.onresize();
点击事件动态获取位置？

动态元素有3个至关重要的元素：位置、尺寸和可见性 link；
子盒子的margin-top坍塌问题：父盒子 overflow:hidden；或子盒子前添加兄弟元素E::before{content:'',overflow:hidden};

overflow:hidden 隐藏子元素溢出；撑开子元素浮动的父级盒子；
css中P元素内英文长单词溢出部分=>“长单词”断字换行：word-wrap:break-word;
取消默认长单词换行=>“所有行”断字换行：word-break:break-all;
不换行：white-space:nowrap;
溢出隐藏以“…”代替：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;

你真的了解word-wrap和word-break的区别吗? - - 无双·博客园
margin影响JS操作元素位置偏差问题：position：relativewidth是否会不变化，直接偏移？
垃圾回收机制：销毁不需要的变量缓解内存；
"消失"的几种常用CSS：display：none，visibility:hidden，opacity:0；
其中：visibility对于transition有效，伪:hover效果；
“拖拽”实现：元素可被拖拽draggable='true'，阻止“链接打开”默认事件preventDefault()，监听事件ondragstart/ondragover/ondrag//dragged，处理dataTransfer.setData()/getData()，event.target.appendChild()。
判断一个对象it是否已存在一个数组array中：

//遍历,封装函数
var result = false;
array.forEach(e=>{
	if(e == it){
		result = true;
	}
})
return result;

实现滚动条隐藏：包一层overflow:hidden，内部width加上滚动条宽度，scroll-x:hidden;scroll-y:scroll；
Chrome浏览器下.element::-webkit-scrollbar {display:none}，不兼容其他浏览器；
阻止双击选中文字：

js：阻止选取事件 => <div onselectstart="return false" />，IE以及Chrome，火狐不起作用css补救；
css：{user-select:none;-moz-user-select:none}， Firefox；
css选择器：xxx::selection{background: transparent;}，注意兼容性；

双击选中所有文字，复制文本，

如何取到promise返回的值？
只能在内部使用，或后接.then()内部使用；
DOM.sytle.attr获取：写在CSS样式表中，无法获取；直接写在HTML内联中或JS中可以获取；查看官网-定义
JS改变样式，增删类，规避这种问题；
少用:hover，移动端不兼容，以增删类的形式规避；
input、text-area、select自动填充历史记录时，会自动填充背景色(E:-webkit-autofill:backgroud-color:rgb(250,255,189))：取消自动填充autocomplete="off"；
JS判断空对象是否为{}：JSON.stringify(data) == "{}"；或for in遍历内部是否有属性，或obj.getOwnPropertyName === 0；或Object.keys(data).length === 0
懒加载：设置setTimeout()；

kikpin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS遇到的一些问题（持续更新）

JS原生遇到的一些问题window.onload = function(){...}一个页面中只执行一次；相当于onload事件绑定匿名函数；一个页面中，一个JS应用另一个JS文件的函数；通过操作DOM插入JS文件，然后执行里面的函数，必须在</body>标签之后//html中引用B文件<body></body><script src="...
复制链接

扫一扫