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; -
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()；