原生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 相关文章推荐
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
javascript的几种写法总结
Sep 30 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
Vant picker 多级联动操作
Nov 02 Javascript
javascript全局自定义鼠标右键菜单
Dec 08 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
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
奇怪的鱼:Weird Fish
2018/03/18 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
2014年公路养护工作总结
2014/12/04 职场文书
纪律委员竞选稿
2015/11/19 职场文书
小学思品教学反思
2016/02/20 职场文书
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js