原生Javascript插件开发实践


Posted in Javascript onJanuary 09, 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 相关文章推荐
js函数的引用, 关于内存的开销
Sep 17 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
jquery获取当前日期的方法
Jan 14 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
详解iframe与frame的区别
Jan 13 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
简单实现JS计算器功能
Dec 21 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
react路由配置方式详解
Aug 07 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 #Javascript
详解网站中图片日常使用以及优化手法
Jan 09 #Javascript
jQuery实现表格元素动态创建功能
Jan 09 #Javascript
input输入密码变黑点密文的实现方法
Jan 09 #Javascript
微信小程序 css使用技巧总结
Jan 09 #Javascript
详解Jquery Easyui的验证扩展
Jan 09 #Javascript
Javascript blur与click冲突解决办法
Jan 09 #Javascript
You might like
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
javascript 学习之旅 (2)
2009/02/05 Javascript
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
python保存字符串到文件的方法
2015/07/01 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
Python新手学习标准库模块命名
2020/05/29 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
2014年保卫部工作总结
2014/11/21 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
部队个人年终总结
2015/03/02 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
班主任开场白
2015/06/01 职场文书