1.先来说一下我使用到的es6的Object.assign。在jq里合并对象用的是extend方法，用来处理默认参数和传入参数做合并。es6里为我们提供了Object.assign，但是ie下全部撂倒。
解决办法：在使用Object.assign之前，写下：
if (!Object.assign) {
Object.defineProperty(Object, "assign", {
enumerable: false,
configurable: true,
writable: true,
value: function(target, firstSource) {
"use strict";
if (target === undefined || target === null)
throw new TypeError("Cannot convert first argument to object");
var to = Object(target);
for (var i = 1; i < arguments.length; i++) {
var nextSource = arguments[i];
if (nextSource === undefined || nextSource === null) continue;
var keysArray = Object.keys(Object(nextSource));
for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
var nextKey = keysArray[nextIndex];
var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
if (desc !== undefined && desc.enumerable) to[nextKey] = nextSource[nextKey];
}
}
return to;
}
});
}
2.第一种，面向对象写法-挂载到window下
(function(win, doc) {
var defaultSettings = {
/* color: "red",
background: "blue",
border: "2px solid #000",
fontSize:"30px",
textAlign:"center",
"200px",
borderRadius:"5px" */
};
function SetStyles(options) {
var self = this;
//没传配置项自己丢错
if(!options) {
throw new Error("请传入配置参数");
}
if (!Object.assign) {
Object.defineProperty(Object, "assign", {
enumerable: false,
configurable: true,
writable: true,
value: function(target, firstSource) {
"use strict";
if (target === undefined || target === null)
throw new TypeError("Cannot convert first argument to object");
var to = Object(target);
for (var i = 1; i < arguments.length; i++) {
var nextSource = arguments[i];
if (nextSource === undefined || nextSource === null) continue;
var keysArray = Object.keys(Object(nextSource));
for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
var nextKey = keysArray[nextIndex];
var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
if (desc !== undefined && desc.enumerable) to[nextKey] = nextSource[nextKey];
}
}
return to;
}
});
}
self = Object.assign(self, defaultSettings, options);
self.container = doc.querySelector(self.container) || doc.querySelectorAll(self.container);
self.init();
}
SetStyles.prototype = {
/* _changeStyles: function() {
var self = this;
for(var pro in self) {
if(pro == "container") {
continue;
}
if(pro == 'text' && typeof self[pro]== 'string') {
self.container.innerText = self[pro];
continue;
}else if(pro == 'text' && typeof self[pro]== 'function'){
self.container.innerText = self[pro]();
continue;
}
self.container.style[pro] = self[pro];
}
}, */
appendCss:function(){
var link=document.createElement('link');
link.href="./index.css";
link.type='text/css';
link.rel = 'stylesheet';
document.querySelector("head").appendChild(link);
},
appendHtml:function(){
var htmlin='<div class="box">'+
'<p>我是内容</p>'+'</div>';
var html=document.createElement("div");
html.innerHTML=htmlin;
document.querySelector("body").appendChild(html);
},
init:function(){
this.appendCss();
this.appendHtml();
}
}
win.SetStyles = SetStyles;
})(window, document)
//调用：
new SetStyles({
container:"#box",
background:"#fff",
textAlign:"center",
text:function(){
return "我是文本";
}
});
第二种：面向对象方法【推荐】
"use strict";
class websong{
constructor(opt){
const ops={
el:"",
css:"./class.css"
}
this.ops=Object.assign({},ops,opt)
}
appendCss(){
var thas=this;
var link=document.createElement("link");
link.href=thas.ops.css;
link.type='text/css';
link.rel = 'stylesheet';
link.setAttribute("id","main")
document.querySelector("head").appendChild(link);
/* return link.onload = link.readystatechange = function () {
if (!link.readyState || /loaded|complete/.test(link.readyState)) {
//开始回调
link.onload = link.readystatechange = null;
}
} */
}
appendHtml(){
var thmlin='<div id="openBoxCtitle"><span>标题</span><span id="openBoxClose">【关闭】</span></div><div class="containnr"><p>我是生成的内容</p></div>';
var html=document.createElement("div");
html.setAttribute("id","openBoxContainer");
html.className="hide";
html.innerHTML=thmlin;
document.querySelector("body").appendChild(html);
var showdin="<div class='moveBg'></div>";
var showd=document.createElement("div");
showd.innerHTML=showdin;
document.querySelector("body").appendChild(showd);
}
evnet(){
var thas=this;
var el;
if((thas.ops.el).match(/[#.]/)){
el=document.querySelector(thas.ops.el);
if(!el){
return console.log("你传入的el没有查找到")
}
el.onclick=open;
}else{
el=document.querySelectorAll(thas.ops.el);
if(el.length==0){
return console.log("你传入的el没有查找到")
}
for(var i=0;i<el.length;i++){
el[i].onclick=open;
}
}
var container=document.querySelector("#openBoxContainer");
function open(){
container.className="";
}
openWinEvent();
function openWinEvent(){
(function (window) {
function $(id) {
return document.getElementById(id);
};
// 获取对象
var innerht = $("openBoxCtitle"), demo = $("openBoxContainer"), close = $("openBoxClose");
// 给innerht绑定鼠标事件
innerht.onmousedown = function (event) {
// 解决event兼容问题
var event = event || window.event;
// 获取鼠标在页面上坐标
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// 获取鼠标在innerht内部的坐标
var innerX = pageX - demo.offsetLeft;
var innerY = pageY - demo.offsetTop;
// 给document绑定鼠标移动事件，防止鼠标快速滑动时滑出innerht
document.onmousemove = function (event) {
//取消margin值，清除意外。
demo.style.margin=0
var event = event || window.event;
// 获取鼠标移动时的坐标
var moveX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var moveY = event.pageY || event.clientY + document.documentElement.scrollTop;
// 鼠标移动时demo的位置坐标
var demoX = moveX - innerX;
var demoY = moveY - innerY;
// 到达边缘防止溢出
var ww = window.innerWidth;
var ow = demo.offsetWidth;
demoX < 0 ? demoX = 0 : "";
demoX + ow > ww ? demoX = ww - ow : "";
var wh=window.innerHeight;
var oh=demo.offsetHeight;
demoY<0?demoY=0:"";
demoY+oh>wh?demoY=wh-oh:'';
// 鼠标移动时demo的位置坐标
demo.style.left = demoX + "px";
demo.style.top = demoY + "px";
//清除选中文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
};
// 鼠标抬起清除拖拽效果
document.onmouseup = function () {
document.onmousemove = null;
};
// 点击关闭按钮关闭跟随框
close.onclick = function () {
this.parentNode.parentNode.className="hide";
};
})(window)
}
}
init(){
var thas=this;
thas.appendCss();thas.appendHtml();thas.evnet()
return thas;
}
}
new websong({
"el":"#box"
}).init();
3.弹窗插件【网友的】借鉴其思路
(function(window,document){
var MaskShare = function(targetDom,options){
// 判断是用函数创建的还是用new创建的。这样我们就可以通过MaskShare("dom") 或 new MaskShare("dom")来使用这个插件了
if(!(this instanceof MaskShare))return new MaskShare(targetDom,options);
// 参数合并
this.options = this.extend({
// 这个参数以后可能会更改所以暴露出去
imgSrc:"../static/img/coupon-mask_1.png"
},options);
// 判断传进来的是DOM还是字符串
if((typeof targetDom)==="string"){
this.targetDom = document.querySelector(targetDom);
}else{
this.targetDom = targetDom;
}
var boxDom = document.createElement("div");
var imgDom = document.createElement("img");
// 设置默认样式 注意将z-index值设置大一些，防止其他元素层级比遮罩层高
boxDom.style.cssText = "display: none;position: absolute;left: 0;top: 0; 100%;height:100%;background-color: rgba(0,0,0,0.8);z-index:9999;";
imgDom.style.cssText = "margin-top:20px; 100%;";
// 追加或重设其样式
if(this.options.boxDomStyle){
this.setStyle(boxDom,this.options.boxDomStyle);
}
if(this.options.imgDomStyle){
this.setStyle(imgDom,this.options.imgDomStyle);
}
imgDom.src = this.options.imgSrc;
boxDom.appendChild(imgDom);
this.boxDom = boxDom;
// 初始化
this.init();
};
MaskShare.prototype = {
init:function(){
this.event();
},
extend:function(obj,obj2){
for(var k in obj2){
obj[k] = obj2[k];
}
return obj;
},
setStyle:function(dom,objStyle){
for(var k in objStyle){
dom.style[k] = objStyle[k];
}
},
event:function(){
var _this = this;
this.targetDom.addEventListener("click",function(){
document.body.appendChild(_this.boxDom);
_this.boxDom.style.display = "block";
// 打开遮罩层的回调
_this.options.open&&_this.options.open();
},false);
this.boxDom.addEventListener("click",function(){
this.style.display = "none";
// 关闭遮罩层的回调
_this.options.close&&_this.options.close();
},false);
}
};
// 暴露方法
window.MaskShare = MaskShare;
}(window,document));
<button id="openBtn">open</button>
new MaskShare("#openBtn",{
imgSrc:"http://image.tupian114.com/20180322/2109277031.jpg",
boxDomStyle:{
opacity:".9"
},
imgDomStyle:{
opacity:".8"
},
open:function(){
console.log("show");
},
close:function(){
console.log("close");
}
});