javaScript中封装的各种写法示例(推荐)

前言

在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封装形式,但是小生还在研究中,这几种都能实现相同操作,可是写法有些区别,对于性能方面谁有更好的见解可以点评我,进行交流。

总结

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

(0)

相关推荐

  • 把jQuery的类、插件封装成seajs的模块的方法

    注:本文使用的seajs版本是2.1.1一.把Jquery封装成seajs的模块 复制代码 代码如下: define(function () { //这里放置jquery代码 把你喜欢的jquery版本放进来就好了 return $.noConflict();}); 调用方法:这样引进就可以像以前一样使用jquery 复制代码 代码如下: define(function (require, exports, module) {    var $ = require('./js/jquery');

  • 基于jquery封装的一个js分页

    复制代码 代码如下: (function ($) { var PageFunc = function PageFunc() { } $.PageFunc = function (Total, PageSize, curPageNum, FunUrl) { if (PageSize == "" || PageSize == null || PageSize == undefined) { PageSize = 10; } if (curPageNum == "" ||

  • 封装属于自己的JS组件

    一.扩展已经存在的组件 1.需求背景 很多时候,我们使用jquery.ajax的方式向后台发送请求,型如 $.ajax({ type: "post", url: "/User/Edit", data: { data: JSON.stringify(postdata) }, success: function (data, status) { if (status == "success") { toastr.success('提交数据成功');

  • JS类的封装及实现代码

    1. 定义js类 js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类. 复制代码 代码如下: function ShapeBase() { this.show = function() { alert("ShapeBase show"); }; this.init = function(){ alert("ShapeBase init&q

  • 一个封装js代码-----展开收起效果示例

    第一次靠自己完整的封装的小特效,有点小小的兴奋,和大家分享下,希望能对和我一样在探索的童鞋们有点帮助 js部分: 复制代码 代码如下: var show_obj = function(obj,at,ob){ $(obj).bind('click', function(){ var showTxt = $(this).children(at); //alert($(at).html()); //alert(sObj); //alert(); //alert($(this).parent().chi

  • javaScript中封装的各种写法示例(推荐)

    前言 在javascript的世界里,写法是个神奇的现象,真是百家齐开放啊!每次看到老外写的js组件,思想和写法都怪异,就没看到一个js结构基本相同的代码出来.今天,我就来谈谈js写法,我在开发过程中,也写了几种.对于性能方面,如果代码结构或逻辑写的不好,会造成计算机CPU的运算加大,运行性能降低,js的写法对性能的影响也是至关重要的. 通常写js组件开发的,都会用到匿名函数的写法去封装一个对象,与外界形成一个闭包的作用域.(这里对于js的继承,多态,我就不多说了,高级程序员应该具备这些知识,如

  • JavaScript中判断的优雅写法示例

    目录 前言 一.一元判断 1.1 举个例子

  • 全面解析JavaScript中apply和call以及bind(推荐)

    函数调用方法 在谈论JavaScript中apply.call和bind这三兄弟之前,我想先说下,函数的调用方式有哪些: •作为函数 •作为方法 •作为构造函数 •通过它们的call()和apply()方法间接调用 前面的三种调用方法,我们都知道且不在这篇文章的讨论范围内,就不说了. 下面我们来说说这第四种调用方法 通过call()和apply()间接调用 其实,我们可以将这两个函数看做是某个对象的方法,通过调用方法的方式来间接调用函数: function f(){} f.call(o); f.

  • JavaScript中Form表单技术汇总(推荐)

    这里不进行很复杂的后台验证以及JavaScript的正则表达式,只是简单的介绍下这个技术,简单的后台接收与跳转,大概了解怎么验证的就可以.具体的技术,我后面还会继续写博客的.本人也还在学习中. 表单验证1-简单验证 进行简单的验证,用户名必须为abcd,密码长度必须大于等于6 然后根据用户输入的数据,在后面给出提示. 代码演示: <html> <head> <title>DHTML技术演示---表单验证</title> <meta http-equiv

  • Python中的TCP socket写法示例

    前言 本文主要介绍了关于Python中TCP socket的写法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一. 服务器server的写法: 1. 创建 socket 套接字: 网络编程接口 socket(family = AF_INET , type = SOCKET_STREM,proto = 0, fileno = None)   提供了多种socket family.AF_INET 是默认的family,需要绑定IP和端口. 127.0.0.1是一个特殊的IP地址

  • JavaScript中工厂函数与构造函数示例详解

    前言 当谈到JavaScript语言与其他编程语言相比时,你可能会听到一些令人困惑东西,其中之一是工厂函数和构造函数. 工厂函数 所谓工厂函数,就是指这些内建函数都是类对象,当你调用他们时,实际上是创建了一个类实例".意思就是当我调用这个函数,实际上是先利用类创建了一个对象,然后返回这个对象.由于 Javascript 本身不是严格的面向对象的语言(不包含类),实际上来说,Javascript 并没有严格的"工厂函数",但是在 Javascript中,我们能利用函数模拟类.来

  • JavaScript中数组继承的简单示例

    在写一些库时经常会用到树结构的数据,而且一些树形结构的数据对从根到叶的路径获取需求非常高.比如一个站点的整个路由表就是一棵这样的树,它的「路径」实际上就是 URL 中的 path 部分.所以我好几次都用了丧心病狂的数组继承去实现,下面给大家分享下. 在 JavaScript 中,数组也属于 Object 的一种,它也可以继承.任何两个对象本身就可以有继承关系,数组也不例外.于是我们让一个树的任何一个节点都是数组,它只维护自己下标最大的那个元素的值.其它元素的值通过原型继承从祖先节点继承而来.这样

  • 全面解析JavaScript中的valueOf与toString方法(推荐)

    可以这样说,所有JS数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题.在程序应用非常广泛.下面我们逐一来给大家介绍下. JavaScript 的 valueOf() 方法 valueOf() 方法可返回 Boolean 对象的原始值. 用法booleanObject.valueOf(),返回值为booleanObject 的原始布尔值.如果调用该方法的对象不是 Boolean,则抛出异常 TypeError. <script

  • JavaScript中new操作符的原理示例详解

    new的用处 new的作用是通过构造函数来创建一个实例对象,该实例与原型和构造函数之间的关系如下图所示: 先来总结一下 创建一个空对象 空对象的内部属性 __proto__ 赋值为构造函数的 prototype 属性 将构造函数的 this 指向空对象 执行构造函数内部代码 返回该新对象 详细说明 执行 new 操作时会依次经过以下步骤: 1.创建一个空对象 空对象是 Object 的实例,即 {} . let obj = {} 2.空对象的内部属性 __proto__ 赋值为构造函数的 pro

  • 关于JavaScript中name的意义冲突示例介绍

    在昨天的<Javascript权威指南>学习笔记之十:ECMAScript 5 增强的对象模型一文中,对于一段代码的调试出现了一个奇怪现象,现将源代码贴在下面: 复制代码 代码如下: <script type="text/javascript"> function Person(){} var per = new Person; Object.defineProperties(per, { "nickName": { value:"

随机推荐