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 相关文章推荐
Javascript操作cookie的函数代码
Oct 03 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 Javascript
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
使用Ajax实现进度条的绘制
Apr 07 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
截获网站title标签之家内容的例子
2006/10/09 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
Vue 中的compile操作方法
2018/02/26 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
浅析python的优势和不足之处
2018/11/20 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
Python中实现输入一个整数的案例
2020/05/03 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
出纳岗位职责范本
2013/12/01 职场文书
运动会广播稿500字
2014/01/28 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
500字小学生检讨书
2015/02/19 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
我的中国梦主题班会
2015/08/14 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书