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 相关文章推荐
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
Vue实现本地购物车功能
Dec 05 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
微信小程序实现底部弹出框
Nov 18 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
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
分享10段PHP常用代码
2015/11/11 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
Python devel安装失败问题解决方案
2020/06/09 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
软件测试面试题
2014/01/05 面试题
生物技术专业研究生自荐信
2013/09/22 职场文书
董事长岗位职责
2013/11/30 职场文书
会计应聘求职信范文
2013/12/17 职场文书
统计系教授推荐信
2014/02/28 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
python标准库ElementTree处理xml
2022/05/20 Python
js 实现验证码输入框示例详解
2022/09/23 Javascript