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


Posted in Javascript onJuly 03, 2017

前言

在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 相关文章推荐
ext 代码生成器
Aug 07 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 #Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 #Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 #Javascript
React组件生命周期详解
Jul 03 #Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 #Javascript
Swiper实现轮播图效果
Jul 03 #Javascript
jQuery实现点击关注和取消功能
Jul 03 #jQuery
You might like
PHP脚本的10个技巧(2)
2006/10/09 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
Django小白教程之Django用户注册与登录
2016/04/22 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
软件测试面试题
2015/10/21 面试题
Java语言程序设计测试题判断题部分
2013/01/06 面试题
大学生简历中个人的自我评价
2013/10/06 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
开会通知
2015/04/20 职场文书
DSP接收机前端设想
2022/04/05 无线电