原生技巧篇
阿新 • • 發佈：2020-10-07
pointer-event
css 指標事件屬性
.aaa{ // 停止滑鼠事件 pointer-events:none; // } 值 SVG all：當指標位於填充或筆觸上方時，該元素是目標。 stroke：當指標在筆劃上時，該元素是目標。 fill：當指標位於填充上時，該元素是目標。 visible：當指標位於填充或筆觸上並且填充或筆觸設定為visible時，該元素是目標，而不管填充或筆劃的值如何。 visiblePainted：當指標位於填充或筆觸上時，該元素是目標，並且該填充或筆觸被設定為visible，並且設定為非空。 visibleFill：指標位於填充上並且填充被設定為visible時，該元素是目標，而與填充的值無關。 visibleStroke：指標在筆劃上並且該筆劃設定為visible時，該元素是目標，而與筆劃的值無關。
target 和 currentTarget的區別
<div className="aaa" onClick={this.clickDodo}>
<span>xxx</span>
</div>
clickDodo(e){
e.target.classList.add('ccc');
// e.currentTarget.classList.add('ccc');
}
我們會發現當點選span 的時候,會給span新增class
Event.target 和 event.currentTarget 都是對一個觸發事件的物件的引用.
Event.target
Event.target 對觸發事件的物件的引用(即它標識事件發生的元素)
event.currentTarget
event.currentTarget 當事件遍歷DOM時，標識事件的當前目標。它總是引用事件處理程式附加到的元素
screenX/Y,clientX/Y,pageX/Y 區別
client
可見區域的位置
pageX/Y
整個渲染頁面的位置(包括滾動隱藏的部分)
screenX/Y
是顯示器距離瀏覽器的距離
陣列迭代 of
let arr = ['a', 'b', 'c']; for (let [index,item] of arr.entries()) { console.log(index,item); } // 0 a // 1 b // 2 c
類陣列迭代
function sum() {
for (let item of arguments) {
console.log(item);
}
}
sum(1,2,3,4)
// 1
// 2
// 3
// 4
字串迭代
迭代DOM集合
[...'abc'] [... document.querySelectorAll('a')]
字串的問題
normalize()一種Unicode正規形式將當前字串正規化所以思考,字串安全嗎?
const str1 = 'afé';
const str2 = 'afé';
console.log(str1 === str2); //false
console.log(str1.normalize()===str2.normalize()); //true
base
使用
<base>標記使所有連結在新選項中開啟<head> <meta charset="UTF-8"> <title>Title</title> <base target="_blank"> </head> <body> <a href="https://www.baidu.com">百度</a> // 預設新選項開啟 </body> </html>
datalist
自定義輸入下拉列表
<input list="ice-cream" name="ice-choice"> <datalist id="ice-cream"> <option value="Chocolate"> <option value="Coconut"> <option value="Mint"> <option value="Strawberry"> <option value="Vanilla"> </datalist>
面向物件程式設計
連結到其他物件的物件(OLOO)
const Human = {
init(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
return this
}
};
//const a = Object.create(Human);
//a.init('a', 'b');
//console.log(a.firstName);
//console.log(a.lastName);
const a = Object.create(Human).init('a', 'b');
console.log(a.firstName);
console.log(a.lastName);
給一個函式原型新增多個方法
Object.assign(Human.prototype, {
method1() {
},
method2() {
}
})
私有變數
在js中,在變數前面加下劃線
class Car { _fuel = 11; constructor() { } getFuel () { return this._fuel } setFuel (value) { this._fuel = value // Caps fuel at 100 liters if (value > 100) this._fuel = 100 } }使用
getFuel和setFuel獲取或者設定屬性但是通常來說也仍然也是一個公共變數
const car = new Car() console.log(car.getFuel()) // 50 car._fuel = 3000 console.log(car.getFuel()) // 3000
真正的私有變數
class Car {
#fuel = 50
}
class Car {
#fuel = 50
getFuel () {
return this.#fuel
}
setFuel (value) {
this.#fuel = value
if (value > 100) this.#fuel = 100
}
}
const car = new Car()
console.log(car.getFuel()) // 50
car.setFuel(3000)
console.log(car.getFuel()) // 100
不過我喜歡這種
class Car {
#fuel = 50
get fuel () {
return this.#fuel
}
set fuel (value) {
this.#fuel = value
if (value > 100) this.#fuel = 100
}
}
const car = new Car()
console.log(car.fuel) // 50
car.fuel = 3000
console.log(car.fuel) // 100
私有變數2
function Car() {
let fuel = 50;
return {
get fuel() {
return fuel;
},
set fuel(value) {
fuel = value;
}
}
}
let a = new Car();
console.log(a.fuel);//50
a.fuel = 10;
console.log(a.fuel);// 10
繼承的使用
class Human {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
sayHello() {
console.log(`hello,I'm ${this.firstName}`);
}
}
class Developer extends Human{
code(thing){
console.log(`${this.firstName} coded${thing}`);
}
sayHello() {
super.sayHello();
console.log('developer');
}
}
let b=new Developer('ssss','bbbb');
b.sayHello();
// hello,I'm ssss
// developer
不用class使用
function Human(firstName, lastName) {
return {
firstName,
lastName,
sayHello(){
console.log(`hello,${this.firstName}`);
}
}
}
function Developer(firstName, lastName) {
const human = new Human(firstName, lastName);
return Object.assign({},human,{
code(thing) {
console.log(`${this.firstName} coded ${thing}`);
},
sayHello() {
human.sayHello();
console.log('xxxx');
}
})
}
事件監聽器的this問題
class Counter () {
// ...
constructor (counter) {
// ...
this.buttonElement.addEventListener('click', this.increaseCount.bind(this))
}
// ...
}
響應式
檔案的形式
不同視口尺寸的樣式表
<head>
<!--所有-->
<link rel="stylesheet" href="./test1.css" media="all">
<!--螢幕至少大於900px-->
<link rel="stylesheet" href="./test2.css" media="(min-width:900px)">
<!--螢幕至少大於1200px-->
<link rel="stylesheet" href="./test3.css" media="(min-width:900px)">
<!--用於列印的配置顏色-->
<link rel="stylesheet" href="./test2.css" media="print">
</head>
引入檔案
<style>
/* 所有螢幕適用 */
@import url("style.css") screen;
/* 列印 */
@import url("print.css") print;
/*至少小於800px*/
@import url('./test2.css') screen and (max-width: 800px);
/* 用於手機縱向*/
@import url('landscape.css') screen and (orientation: portrait);
</style>
內聯
<!--至少小於800px-->
<style media="all and (max-width:800px)">
body {
background-color: #ff6259;
}
</style>
行內
<style>
/* 小於600px*/
@media screen and (max-width: 600px) {
body{
background-color: #ff6708;
}
}
/* 大於600px小於1000px*/
@media screen and (min-width: 600px) and (max-width: 1000px) {
body{
background-color: #ff00b0;
}
}
/*小於1000px*/
@media screen and (min-width: 1000px) {
body{
background-color: #004aff;
}
}
</style>
js的操作
const mediaQ=window.matchMedia('(min-width:1000px)');
if (mediaQ.matches) {
console.log('螢幕大於1000px');
}
可以使用`resize` 進行事件監聽(以前使用window.innerWidth或者window.innerHeight 進行觸發)