最新资讯当前位置:星鸿娱乐 > 最新资讯 > >

进阶前端高级攻城狮:使用单体模式设计原生j

  毛病:在利用单体模式的时间,必须要非常相识闭包等观点,并且以后联合其他计划模式配合利用的时间,庞大度和代码量相对来说要求更高,以是必要利用者本身举行权衡,值不值得利用,会不会增长项目开辟难度等。假如值得就用,不值得就不发起利用

  下面为闭包单体模式的骨架(用空专门讲计划模式和一些案例和利用):

  var nameSpance=window.nameSpance|| {}; //声明一个空间

  nameSpance.gerry=(function(){

  //这里可以存放私有属性和私有要领,不对外开放,防备其他开辟者擅自窜改

  var privateAttr=false;

  function privateMethod (){

  console.log("这是私有要领,不对外开放...");

  //这里为抛出工具,供开辟者利用的

  var publicObject={

  publicAttr : true,

  publicMethod : function(){

  console.log("这是抛出要领,供开辟者利用...")

  return publicObject;

  })()

  原生代码计划:

  声明空间然后搭建骨架

  var gerry=window.gerry || {}; //声明

  gerry.setBackgroundImage=(function(){

  var publicMethods={};

  return publicMethods;

  })()

  设置插件默认值(注明:该默认值不提供外部修改,不开放特权要领去set改变它的值)

  var gerry=window.gerry || {}; //声明

  gerry.setBackgroundImage=(function(){

  //私有参数设置(不对外开放)

  var config={

  imgArr: [], //图片数组

  imgSecond: 1000, //图片淡出的时间

  isRandom:false //是否为随机图片

  //袒露给开辟者利用的要领,可随意拓展

  var publicMethods={};

  return publicMethods ;

  })()

  封装一些tool,放在私有要领中,由于究竟不是jQuery了,一些要领必要本身举行封装下

  var tool={

  //ID选择器

  id_selector:function (selector){

  return document.getElementById(selector);

  //创建节点

  createElement:function(node){

  return document.createElement(node);

  //设置节点属性

  attr:function(setArrObject){

  for(var i=0,len=setArrObject.attribute.length;i i++){

  setArrObject.node.setAttribute(setArrObject.attribute[i].key,setArrObject.attribute[i].value);

  }

  设置一些必要利用的样式,放到一个css工具中

  //设置的样式

  var css={

  divT : 'position:absolute;left:0;top:0;z-index:-1;overflow:hidden;width:100%;height:100%',

  ImgT:'position:absolute;left:0;top:0;z-index:-2;opacity:0;',

  }

  封装一些私有要领处置惩罚一些常用的要领,好比参数处置惩罚呀啥的

  //私有要领,不对外开放

  var privateMethods={

  //对开辟者的设置举行处置惩罚

  paraHandling:function(option){

  var configTemp ;

  if(option.config !=undefined){ //开辟者设置了值

  option.config.imgArr==undefined option.config.imgArr=config.imgArr:null;

  option.config.imgSecond==undefined option.config.imgSecond=config.imgSecond:null;

  option.config.isRandom==undefined option.config.isRandom=config.isRandom:null;

  configTemp=option.config;

  }else{

  configTemp=config;

  return configTemp;

  //针对IE9处置惩罚淡出结果,由于IE9不支持transition

  divFadeIn:function(option){

  if(option.selector==undefined){

  throw new Error("please select a id (div).")

  }else{

  var showTime=Number(option.config.imgSecond);

  var opacityValue=0; //设置opacity的属性值

  var divSelector=tool.id_selector(option.selector); //得到div的ID

  var temp=setInterval(function(){

  opacityValue+=0.01;

  divSelector.style.opacity=opacityValue;

  if(opacityValue 1){

  clearInterval(temp);

  },showTime/100); //针对ie9 用opacity共同setInterval定时函数来实现淡出的结果,留意控制革新的频率,给视觉上一种流通的感觉 (责任编辑:admin)

上一篇:iOS10正式版必备软件!iTunes新版12.5.1下载:拯救变

下一篇:广州中专会计专业招生广州加利福学校,广州市加

推荐内容

客户服务热线

400 888 8932

在线客服