類與模組化開發
阿新 • • 發佈：2020-07-26
// 類 物件
// 物件就是類的例項化體現
// 類就是物件的抽象化表現
// 父類 子類 超類superClass 基類BaseClass
// 子類的父類稱為超類
// 範
var obj={
a:1,
play:function(){
console.log("play");
},
run:function(){
console.log("run"+this.a);
}
}
obj.play();//play
obj.run(); //run1
var obj={
bool:false,
init:function(){
this.elem=document.createElement("div");
Object.assign(this.elem.style,{
width:"50px",
height:"50px",
backgroundColor:"#"+Math.floor(Math.random()*0xFFFFFF).toString(16).padStart(6,"0")
});
document.body.appendChild(this.elem);
this.elem.addEventListener("click",e=>this.clickHandler(e));
},
clickHandler(e){
this.bool=!this.bool;
e.currentTarget.style.backgroundColor=this.bool ? "red" : "green";
this.showBackground();
},
showBackground:function(){
console.log(this.elem.style.backgroundColor);
}
}
obj.init();
obj.init();
class A{
a=1;
// 建構函式
constructor(){
}
play(){
console.log("play");
}
run(){
this.a++;
console.log("run"+this.a);
}
}
// 例項化物件
var a=new A();
a.play();//play
a.run();//run2
a.run();//run3
a.run();//run4
var b=new A();
b.play();//play
b.run(); //run2
// console.log(a);//A{a:4}
class Box{
// 當例項化時，就會自動執行建構函式
a=0;
constructor(a){
this.a=a;
this.elem=this.createElem();
}
createElem(){
var elem=document.createElement("div");
Object.assign(elem.style,{
width:"50px",
height:"50px",
backgroundColor:"#"+Math.floor(Math.random()*0xFFFFFF).toString(16).padStart(6,"0")
})
document.body.appendChild(elem);
elem.addEventListener("click",e=>this.clickHandler(e));
return elem;
}
clickHandler(e){
this.bool=!this.bool;
e.currentTarget.style.backgroundColor=this.bool ? "red" : "green";
this.showBackground();
}
showBackground(){
console.log(this.elem.style.backgroundColor);
}
}
class Ball extends Box{
constructor(a){
super(a);//超類的建構函式
this.elem.style.borderRadius="50px";
}
clickHandler(e){
// 會覆蓋父類這個方法的內容 override
super.clickHandler(e);//先執行父類的該方法
console.log(this.a);
}
}
var b=new Ball(5);//例項化物件，加(),類似於函式（當例項化時執行了constructor函式）
var c=new Box(6); ES6模組開發
<script type="module">
import A from "./js/A.js";//export default的可以直接import
import {B,C} from "./js/B.js";//{}裡寫的不是預設的default
var a=new A();
var b=new B();
var c=new C();
console.log(a,b,c); //雙擊開啟會報錯
var a=new A(4,5,6,7,8,9);
var obj={
a:1,b:2,c:3
}
var o={d:10};
o={...obj};//淺複製
//重新建立一個物件，並且將obj複製給這個新的物件，不會保留原物件的屬性
console.log(o);
import Arrays from "./js/A.js";
var arr=new Arrays(3,4,5);
// arr.constructor===Arrays;
arr.push();
arr.join();
Arrays.form();
Arrays.isArray()
console.log(arr);
Math.PI
</script>
//A.js
export default class Arrays{
// 引數可以設定初始值
/*constructor(a,b,c=3){
} */
// ...arg 引數允許由不定量資料，arg最後是一個數組
/*constructor(a,b,...arg){
console.log(a,b,arg);
} */
a=[];
constructor(len,...arg){//建立陣列
if(arg.length===0 && len.constructor===Number){//第一位引數是數值
if(len===Math.floor(len)) this.a.length=len;
else console.error("輸入錯誤的長度");
return;
}
this.a[0]=len;
for(var i=0;i<arg.length;i++){
this.a[i+1]=arg[i];
}
}
push(...arg){
}
pop(){
}
unshift(...arg){
}
shift(){
}
splice(start,len,...arg){
}
join(str){//物件呼叫的方法
}
static from(){//這個陣列的類呼叫的方法，靜態方法中不能寫this
}
static isArray(){
}
}
export class Maths{
static PI=3.1415926;
static abs(){
}
static floor(){
}
}
// Maths.PI
// Maths.abs();
// Maths.floor();
//B.js
export class B{//沒有加default,匯出多個類
}
export class C{
}多選框和單選框
<div class="divs"></div>
<script type="module">
// import CheckBox from "./js/CheckBox.js";
import Radio from "./js/Radio.js";
var list=[];
let arr=["看書","游泳","寫程式碼","跑步","看電影","逛街"];
arr.forEach(function(item){
let ck=new Radio(item,"hobby");
ck.appendTo(".divs");
list.push(ck);
})
</script>
//CheckBox.js
export default class CheckBox{
// 建構函式就是當前類別例項化時初始執行的函式,在外面我們也可以認為
// 建構函式的名字等同於類名
// 建構函式中不能使用return返回某個物件
// 建構函式中會自動返回this，如果使用return就會覆蓋內容
// 建構函式中的this,就是例項化完成的物件
elem;
label;
checked=false;
constructor(_label){
this.label=_label;
this.elem=this.createElem();
}
createElem(){
if(this.elem) return this.elem;g//如果elem已經建立了把它賦值回去，不會重複建立
let div=document.createElement("div");
div.style.float="left";
div.style.marginRight="12px";
div.style.position="relative";
let icon=document.createElement("span");
Object.assign(icon.style,{
width:"14px",
height:"14px",
position:"relative",
display:"inline-block",
marginRight:"8px",
backgroundImage:"url('./img/new_icon.png')",
backgroundPositionX:"-238px",
backgroundPositionY:"-37px",
});
div.appendChild(icon);
let labelSpan=document.createElement("span");
labelSpan.textContent=this.label;
labelSpan.style.userSelect="none";
labelSpan.style.position="relative"
div.appendChild(labelSpan);
div.addEventListener("click",e=>this.clickHandler(e));
return div;
}
appendTo(parent){
if(typeof parent==="string") parent=document.querySelector(parent);
parent.appendChild(this.elem);
}
clickHandler(e){
this.checked=!this.checked;
Object.assign(this.elem.firstElementChild.style,{
backgroundPositionX:this.checked ? "-128px" : "-238px",
backgroundPositionY:this.checked ? "-126px" : "-37px"
})
}
}
//radio.js
import CheckBox from "./CheckBox.js";
export default class Radio extends CheckBox{
name;
constructor(_lable,_name){
super(_lable);
this.name=_name;
Object.assign(this.elem.firstElementChild.style,{
width:"18px",
height:"18px",
backgroundPositionX:"-195px",
backgroundPositionY:"-104px",
});
Object.assign(this.elem.lastElementChild.style,{
top:"-2px"
});
this.elem.setAttribute("name",_name);
}
clickHandler(e){
this.checked=true
let arr=Array.from(document.getElementsByName(this.name));
for(var i=0;i<arr.length;i++){
if(arr[i]===this.elem){
Object.assign(this.elem.firstElementChild.style,{
backgroundPositionX:"-175px",
backgroundPositionY:"-104px",
});
}else{
Object.assign(arr[i].firstElementChild.style,{
backgroundPositionX:"-195px",
backgroundPositionY:"-104px",
});
}
}
}
}動畫
<style>
.ball{
width:50px;
height: 50px;
border-radius: 50%;
position: absolute;
left:0;
top:0;
}
.box
{
width:800px;
height:400px;
border: 1px solid #000000;
position: relative;
margin: auto;
left: 0;
right: 0;
}
</style>
<div class="box">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
<script>
// 幀頻 1秒中播放多少幀
// 幀 1幀就是一張圖片播放的時間
// 60幀頻
// 1000/60=16.666666
/* var balls;
var ids;
init();
function init(){
balls=document.querySelectorAll(".ball");
for(var i=0;i<balls.length;i++){
balls[i].speedX=Math.floor(Math.random()*5)+1;
balls[i].speedY=Math.floor(Math.random()*6)+1;
balls[i].x=Math.floor(Math.random()*700);
balls[i].y=Math.floor(Math.random()*300);
}
animation();
}
function animation(){
// 開啟固定60幀頻
ids=requestAnimationFrame(animation);
// cancelAnimationFrame(ids);//清除時間幀請求
for(var i=0;i<balls.length;i++){
if(balls[i].x+50>800 || balls[i].x<0) balls[i].speedX=-balls[i].speedX;
if(balls[i].y+50>400 || balls[i].y<0) balls[i].speedY=-balls[i].speedY;
balls[i].x+=balls[i].speedX;
balls[i].y+=balls[i].speedY;
balls[i].style.left=balls[i].x+"px";
balls[i].style.top=balls[i].y+"px";
}
}
*/
</script>