javaScript中封装的各种写法示例（推荐）

网络编程 2024/11/17 佚名

3 1 2

前言

在javascript的世界里，写法是个神奇的现象，真是百家齐开放啊！每次看到老外写的js组件，思想和写法都怪异，就没看到一个js结构基本相同的代码出来。今天，我就来谈谈js写法，我在开发过程中，也写了几种。对于性能方面，如果代码结构或逻辑写的不好，会造成计算机CPU的运算加大，运行性能降低，js的写法对性能的影响也是至关重要的。

通常写js组件开发的，都会用到匿名函数的写法去封装一个对象，与外界形成一个闭包的作用域。（这里对于js的继承，多态，我就不多说了，高级程序员应该具备这些知识，如果您也做过java开发，这个概念太熟悉了。 ）

主要对封装进行研究，因为前后台都会涉及到面向对象的概念，对于封装，怎么封装，封装的性能，等等很重要概念。封装（在程序世界是第一概念，我个人认为），全天下漫天遍野的封装，JQuery，EXT和Prototype.js封装的是javascript，jQuery uI和jQuery mobile封装着jQuery，java中的JDBC在spirng,Hibernate等框架封装着，在这里列举几个例子，还有很多种不一一介绍。

回到主题javaScript封装写法，先来看看一个简单的

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

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

$(function(){
 $('#id').click(function(){
  alert('hello');
 })
});

如果用Node.js则比较复杂点，因为要Node.js要加载一个HTTP模块，写法如下

var http = require('http');
http.createServer(function(req,res){
 res.writeHead(200,{'Content-Type':'text/html'});
 res.write('<p>hello</p>');
}).listen(8080);

再深层次封装写法，如果遇到大量使用js操作，单凭每个小的函数无法满足，因为它们存在一个公共的域中，写法多而散很容易造成了很多bug因素，需要规整。js创造者给我们提供了一个叫匿名函数，顾名思义，匿名函数就是没有实际名字的函数，它的格式很多种， ！function(){}() , (function(){})() , (function(){}()) , new function(){} , void function(){}(); JQuery.js就是一个匿名函数封装,先看最常用的

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

如果开发一些js组件的时候，可以先创建一个对象，给这个对象属性和方法，让这个对象能够单独操作和可以和其他对象合作

 var klm = klm || {};

 klm = (function(){

    //第一个写法
    klm.init = function(){

     alert('hello');

    }

    //第二个写法
     klm.browser = (function(ua){
       var b = {
        msie:/msie/.test(ua) && !/opera/.test(ua),
        opera:/opera/.test(ua),
        safari:/webkit/.test(ua) && !/chrome/.test(ua),
        firefox:/firefox/.test(ua),
        chrome:/chrome/.test(ua)
       };
      })(window.navigator.userAgent.toLowerCase());

      //将其定义方法以接口方式返回给外界引用

      return{
        init: klm.init,
        browser:klm.browser 
      }

  })();

接下来这种js封装写法是我自己比较喜欢的

 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")));

 });

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

还有定义单个属性封装

 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');

     }
 }

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

列举以上几种js封装形式，但是小生还在研究中，这几种都能实现相同操作，可是写法有些区别，对于性能方面谁有更好的见解可以点评我，进行交流。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对的支持。

javascript封装函数,js封装方法,js封装技巧

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“javaScript中封装的各种写法示例（推荐）”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

javaScript中封装的各种写法示例（推荐）

JavaScript之DOM_动力节点Java学院整理

JavaScript之class继承_动力节点Java学院整理

评论“javaScript中封装的各种写法示例（推荐）”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接