零JS筆記 | 面向對象 | 組件
提高对象的复用性
如何配置参数和默认参数
对面向对象的深入应用（UI组件，功能组件）
将 配置参数、方法、事件，三者进行分离
创建自定义事件
有利于多人协作开发代码
如何去挂载自定义事件与事件函数
組件開發，多組對象；像兄弟之間的關係 （代碼利用的一種形式；）
推理過程：
function show(opt){
}
show({
id:'div1',
toDown:function(){},
toUp:function(){}
})
var a = { name:'小明' } //配置參數 1、優先級較高 2、key值一定要相同 ；
var b = { name:'小強' } //默認參數
extend(b,a) //b的name被a的name覆蓋了；
console.log(b.name); //小明，（小強被小明蓋了）
function extend(o1,o2){
for(var attr in o2){
o1[attr] = o2[attr]
}
}重點：寫配置參數---> 寫默認參數--->用配置覆蓋默認---->調用默認方法；
所以，搭架子
var f1 = new Fn();
f1.init({
});
function Fn(){
this.settings = {
}
}
Fn.prototype.init = function(opt){
extend(this.settings,opt)
}
function extend(o1,o2){
for(var attr in o2){
o1[attr] = o2[attr]
}
}
//改寫：定義配置參數；
d1.init({
id:'div1'
})
d2.init({
id:'div2',
_down:function(){
document.title = 'down'
}
})
d3.init({
id:'div3',
_down:function(){
document.title = 'down-down-down'
},
_up: function () {
document.title='up-up-up'
}
})
d4.init({
id:'div4',
_up:function(){
document.title = 'bybybyby'
}
})
//沒有值的情況：
function Drag() {
this.obj = null;
this.disX = 0;
this.dixY = 0;
this.settings = { //配置覆蓋默認，然後去調用默認的值；
_down: function () {},
_up: function () {}
}
}
//執行：
Drag.prototype.init = function (opt) {
this.obj = document.getElementById(opt.id)
var _this = this;
extend(this.settings, opt) //使this.settings的值 == opt的值，如果opt沒有，則找默認的
this.obj.onmousedown = function (ev) {
var ev = ev || event;
_this.fnDown(ev) //ev要傳進來，下面才不用定義 ；
_this.settings._down() //調用默認
document.onmousemove = function (ev) {
var ev = ev || event;
_this.fnMove(ev)
}
document.onmouseup = function () {
_this.fnUp();
_this.settings._up() //調用默認
}
return false //最後加阻止默認事件；
}
}
//其他：
Drag.prototype.fnDown = function (ev) {
this.disX = ev.clientX - this.obj.offsetLeft;
this.disY = ev.clientY - this.obj.offsetTop;
}
Drag.prototype.fnMove = function (ev) {
this.obj.style.left = ev.clientX - this.disX + 'px'
this.obj.style.top = ev.clientY - this.disY + 'px'
}
Drag.prototype.fnUp = function () {
document.onmousemove = document.onmouseup = null;
}
function extend(o1, o2) {
for (var attr in o2) {
o1[attr] = o2[attr]
}
}核心：
//1、寫默認
this.settings = {
_down: function () {},
_up: function () {}
}
//3、改寫默認，即把外面調用的函數賦值給默認 覆蓋默認，所以再執行如果外面有，則執行，如無則執行默認
extend(this.settings, opt)
//2、調執行默認
_this.settings._down()
_this.settings._up()組件彈窗
window.onload = function () {
var _inp = document.getElementsByTagName('input')
_inp[0].onclick = function () {
var d1 = new Dialog();
d1.init({ //配置參數
cur: 0,
title: '登入'
});
}
_inp[1].onclick = function () {
var d2 = new Dialog();
d2.init({
cur: 1,
w: 100,
h: 400,
dir: 'right',
title: '公告'
})
}
_inp[2].onclick = function () {
var d2 = new Dialog();
d2.init({
cur: 2,
mask: true
})
}
}
function Dialog() {
this._login = null;
this._mask = null;
this.settings = { //默認參數
w: 300,
h: 300,
dir: 'center',
title: '',
mask: false
}
}
Dialog.prototype.json = {}; //目的：只能彈一次： 先定義空json
Dialog.prototype.init = function (opt) {
extend(this.settings, opt)
if (this.json[opt.cur] == undefined) { //第一次走這裏；
this.json[opt.cur] = true;
}
if (this.json[opt.cur]) { //為true時就走創建
this.create();
this.fnClose();
if (this.settings.mask) {
this.createMask();
}
this.json[opt.cur] = false; //後fase跟undefined也等於false，也不會走上面；
}
}
Dialog.prototype.create = function () {
this._login = document.createElement('div');
this._login.className = 'login'
this._login.innerHTML = '<div class="title"><span>' + this.settings.title + '</span><span class="close">X</span></div><div class="content"></div>'
document.body.appendChild(this._login);
this.setDate();
}
Dialog.prototype.setDate = function () {
this._login.style.width = this.settings.w + 'px'
this._login.style.height = this.settings.h + 'px'
if (this.settings.dir == 'center') {
this._login.style.left = (viewWidth() - this._login.offsetWidth) / 2 + 'px'
this._login.style.top = (viewHeight() - this._login.offsetHeight) / 2 + 'px'
}
else if (this.settings.dir = 'right') {
this._login.style.left = (viewWidth() - this._login.offsetWidth) + 'px'
this._login.style.top = (viewHeight() - this._login.offsetHeight) + 'px'
}
}
Dialog.prototype.fnClose = function () {
var _this = this;
var _close = this._login.querySelector('.close')
_close.onclick = function () {
document.body.removeChild(_this._login)
if (_this.settings.mask) {
document.body.removeChild(_this._mask)
}
_this.json[_this.settings.cur] = true; //關閉後再設回；
}
}
Dialog.prototype.createMask = function () {
this._mask = document.createElement('div')
this._mask.id = 'mask'
document.body.appendChild(this._mask)
this._mask.style.width = viewWidth() + 'px'
this._mask.style.height = viewHeight() + 'px'
}
function viewWidth() {
return document.documentElement.clientWidth;
}
function viewHeight() {
return document.documentElement.clientHeight;
}
function extend(o1, o2) {
for (var attr in o2) {
o1[attr] = o2[attr]
}
}See the Pen avezwe by elmok (@elmok) on CodePen.
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
