原生Javascript插件开发实践


Posted in Javascript onJanuary 18, 2017

前言

之前公司设计的网站比较混乱,很多地方不统一,其中一个就是弹出层,导致这个原因是因为,公司的UI换了好几个人,而他们每个人做出来的都不太一样。最近公司开始整顿这个问题,对于统一的这种东西当然是做成一个模块,或者插件,而我打算做成插件。之所以写这篇文章是因为,当写完这个插件以后,发现其中有不少的理念,而这些理念我想把它总结一下,虽然这个插件并不复杂。

该怎样架构?

对于架构这个概念,接触的比较少,我的理解,架构就是解决未来可能会发生的事。

之前也封装过一些插件,但后端嫌我封装的太难用,于是分析其原因,发现之前写的插件,该暴露的接口没有,有些不需要传的参数反而要传。该暴露的接口没有,这是因为我没有按照未来的思想来写插件,而往往这样写出来的插件就成了一次性用品。

所以这段时间,在写插件之前都会事先思考清楚,这个插件都需要哪些参数,而哪些又是必须传的,哪些是可选的,哪些功能以后可能会用到,哪些是可以会更改的,这些都是必须考虑的,不然写出来的插件肯定会有很多的问题。

基本雏形

;(function(window,document){
 var MaskShare = function(){
 };
 MaskShare.prototype = {};
 window.MaskShare = MaskShare;
}(window,document));

把要写的代码,封闭到一个自执行函数里面,防止变量冲突,然后将这个构造函数暴露给window对象,方便我们在外部去访问这个构造函数。

效果需要做成如下的:

原生Javascript插件开发实践

思考需要哪些参数

这个功能就是点击某个元素,弹出一个遮罩层,点击遮罩层将遮罩层去掉。

因此可以分析出,至少需要一个参数,也就是我们需要知道点击谁弹出弹出层,另外我们还需要配置一些默认参数。

;(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;width: 100%;height:100%;background-color: rgba(0,0,0,0.8);z-index:9999;";
  imgDom.style.cssText = "margin-top:20px;width: 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));

使用示例:

MaskShare(".immediately",{
 imgSrc:"../static/img/loading_icon.gif",
 boxDomStyle:{
  opacity:".9"
 },
 imgDomStyle:{
  opacity:".8"
 },
 open:function(){
  console.log("show");
 },
 close:function(){
  console.log("close");
 }
});

本次总结

此时再分析一遍,发现其还是有很多局限性,比如,如果不使用图片用到的是一段文字呢,又该怎么办?这些都是很大的问题,要写出一个实用的插件,不仅仅技术需要过关,思考还得全面性。所以这篇文章还只是刚刚开始,路还远着呢。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
不错的asp中显示新闻的功能
Oct 13 Javascript
javascript入门·对象属性方法大总结
Oct 01 Javascript
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
javascript 有趣而诡异的数组
Apr 06 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
Jquery Change与bind事件代码
Sep 29 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 Javascript
js实现炫酷的左右轮播图
Jan 18 #Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 #Javascript
工厂模式在JS中的实践
Jan 18 #Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 #Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 #Javascript
动态加载css方法实现和深入解析
Jan 18 #Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 #Javascript
You might like
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
php实现文件上传基本验证
2020/03/04 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
原生js实现验证码功能
2017/03/16 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
Python help()函数用法详解
2014/03/11 Python
Web服务器框架 Tornado简介
2014/07/16 Python
Python的SQLAlchemy框架使用入门
2015/04/29 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
python爬取个性签名的方法
2018/06/17 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
简单租房协议书
2014/04/09 职场文书
商场促销活动总结
2014/07/10 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
Win11查看设备管理器
2022/04/19 数码科技