×

尝试下如何封装Javascript?

作者:andy0012020.04.07来源:Web前端之家浏览:5150评论:0
关键词:js封装

尝试下如何封装Javascript?很多项目里都会用到封装,还是了解下吧。

JavaScript函数是最原始,最基础的封装,懂js一目了然,如果你的页面不需要很多js交互操作,就可以用这种简单的方式。

function hello(){
  var a = 'hello';
  alert(a);
}

JavaScript创造者给我们提供了一个叫匿名函数,顾名思义,匿名函数就是没有实际名字的函数,它的格式很多种, !function(){}() , (function(){})() , (function(){}()) , new function(){} , void function(){}(); JQuery.js就是一个匿名函数封装,先看最常用的。

(function(){
 star.init = (function(name){
   var e = new Editor(name, Data.toolbarData);
  });
})();

先通过prototype继承方式把每一个小的操作封装成属性,init和closeWindow,然后可以进行初始化加载如my.init();也可以绑定到某个操作事件上如$("#contact").add(my.closeWindow());这些封装一气而成。

var myOpinion = myOpinion || {};
myOpinion.prototype={
   init:function(obj,i){
      alert('hello');
    },
    closeWindow:function(obj,d){
     obj.click(function(){
      d.hide();
     });
    }
   }
   $(function(){
    var my = myOpinion.prototype;
    my.init($(".z-sidebar li em"),$("#contact"));    
    $("#contact").add(my.closeWindow($(".z-sidebar li em"),$("#contact")));
 
});

还有定义单个属性封装。

WinShow.create = function(c,body){  
     var _head = '<div class="+ c.heacss +"><span class="+ c.concss +">' + c.title + '</span></div>';
     this.container.innerHTML = _head;
     return this.container;
     this.container.onclick = function(e){
 
       alert('hello');
 
    }
}

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/fengzhuagn829038429340328.html

网友评论文明上网理性发言 已有0人参与

发表评论: