javaScript封装的各种写法


Posted in Javascript onAugust 14, 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 相关文章推荐
js图片预加载示例
Apr 30 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
微信小程序 开发之全局配置
May 05 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 #Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 #Javascript
jQuery实现手势解锁密码特效
Aug 14 #jQuery
Vue+Element使用富文本编辑器的示例代码
Aug 14 #Javascript
带你快速理解javascript中的事件模型
Aug 14 #Javascript
JS获取子、父、兄节点方法小结
Aug 14 #Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 #Javascript
You might like
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
php微信开发之关注事件
2018/06/14 PHP
javascript基本语法分析说明
2008/06/15 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
浅谈Python协程
2020/06/17 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
2013年入党人员的自我鉴定
2013/10/25 职场文书
司机岗位职责
2013/11/15 职场文书
化验室技术员岗位职责
2013/12/24 职场文书
图书室标语
2014/06/21 职场文书
大学生自荐材料范文
2014/12/30 职场文书
销售口号霸气押韵
2015/12/24 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js