怎样封装html属性,如何封装javascript?

本文深入探讨了JavaScript中的封装概念,介绍了如何使用函数进行基本封装,以及如何利用匿名函数和原型继承实现更复杂的封装。通过实例展示了在JQuery.js中封装的方法,包括init和closeWindow等操作,以及如何绑定事件。此外,还提到了使用对象属性封装HTML代码和事件处理。文章适合对JavaScript有一定基础,希望进一步理解封装机制的读者。
摘要由CSDN通过智能技术生成

封装是面向对象编程中的一个主要概念。它允许一个对象以单一名称将私人和公共成员分组。所有面向对象的编程语言都支持这一点。

08e45b7569e69931fc5a1953a0e35c79.png

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 = '

' + c.title + '
';

this.container.innerHTML = _head;

return this.container;

this.container.onclick = function(e){

alert('hello');

}

}

在这里创建一个create属性以匿名函数形式封装一段HTML代码,并给这个 HTML代码绑定点击事件。

想要了解更多前端知识,可访问 前端开发学习!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值