热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

javaScript封装的各种写法

这篇文章主要介绍了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('

hello

'); }).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 = '
' + c.title + '
'; this.container.innerHTML = _head; return this.container; this.container.Onclick= function(e){ alert('hello'); } }

在这里我创建一个create属性以匿名函数形式封装一段HTML代码,并给这个 HTML代码绑定点击事件。

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


推荐阅读
  • nginx 解决跨域问题 No: 'AccessControlAllowOrigin' header is present on the requested resource
    错误信息:1, ... [详细]
  • Python瓦片图下载、合并、绘图、标记的代码示例
    本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ... [详细]
  • 使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例
    本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤,可以获取到网站首页的新闻数据。代码示例使用Python编写,并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]
  • 本文整理了常用的CSS属性及用法,包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等,方便开发者查阅和使用。 ... [详细]
  • css元素可拖动,如何使用CSS禁止元素拖拽?
    一、用户行为三剑客以下3个CSS属性:user-select属性可以设置是否允许用户选择页面中的图文内容;user-modify属性可以设置是否允许输入 ... [详细]
  • 文章目录简介HTTP请求过程HTTP状态码含义HTTP头部信息Cookie状态管理HTTP请求方式简介HTTP协议(超文本传输协议)是用于从WWW服务 ... [详细]
  • 最近在学Python,看了不少资料、视频,对爬虫比较感兴趣,爬过了网页文字、图片、视频。文字就不说了直接从网页上去根据标签分离出来就好了。图片和视频则需要在获取到相应的链接之后取做下载。以下是图片和视 ... [详细]
  • Scrapy 爬取图片
    1.创建Scrapy项目scrapystartprojectCrawlMeiziTuscrapygenspiderMeiziTuSpiderhttps:movie.douban.c ... [详细]
  • 目录爬虫06scrapy框架1.scrapy概述安装2.基本使用3.全栈数据的爬取4.五大核心组件对象5.适当提升scrapy爬取数据的效率6.请求传参爬虫06scrapy框架1. ... [详细]
  • 发现一个好看的手机壁纸网站,撸代码的手已经饥渴难耐了
    本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。最近有同学的爬虫代码出了bug,给问我怎么改于 ... [详细]
  • whitepages 爬取_爬取新笔趣阁小说!适合新手入门的小案例
    爬取笔趣阁小说(搜索爬取)首先看看最终效果(gif):实现步骤:1.探查网站“http:www.xbiquge.la”,看看网站的实现原理 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • ECMA262规定typeof操作符的返回值和instanceof的使用方法
    本文介绍了ECMA262规定的typeof操作符对不同类型的变量的返回值,以及instanceof操作符的使用方法。同时还提到了在不同浏览器中对正则表达式应用typeof操作符的返回值的差异。 ... [详细]
  • pyecharts 介绍
    一、pyecharts介绍ECharts,一个使用JavaScript实现的开源可视化库,可以流畅的运行在PC和移动设备上,兼容当前绝大部 ... [详细]
  • 篇首语:本文由编程笔记#小编为大家整理,主要介绍了正则表达式python相关的知识,希望对你有一定的参考价值。 ... [详细]
author-avatar
玻璃里的鱼鱼
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有