php js写法,javaScript封装的各种写法
这篇文章主要介绍了javaScript封装的各种写法,通过列举优缺点和使用场景详细介绍了几种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封装形式,但是小生还在研究中,这几种都能实现相同操作,可是写法有些区别,对于性能方面谁有更好的见解可以点评我,进行交流。
相关推荐:
php js写法,javaScript封装的各种写法相关推荐
- javaScript封装的各种写法
javaScript封装的各种写法 在javascript的世界里,写法是个神奇的现象,真是百家齐开放啊!每次看到老外写的js组件,思想和写法都怪异,就没看到一个js结构基本相同的代码出来.今天,我就 ...
- 【转载】100多个很有用的JavaScript函数以及基础写法大集合
1.document.write("");为 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4 ...
- js中(function(){…})()立即执行函数写法理解
js中(function(){-})()立即执行函数写法理解 javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法 ...
- JavaScript的三种写法
1.2-JavaScript的三种写法 1-复习CSS代码的三种写法 1.外联样式:写在css文件中,使用link导入 <link rel="stylesheet" href ...
- Vue.js父与子组件之间传参 父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为ht
Vue.js父与子组件之间传参 父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对 ...
- JS类的封装及实现代码
js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类. 1. ...
- 在Node.js中看JavaScript的引用
作者简介:黄鼎恒,饿了么Node Team负责人,Node/C程序员,饿了么前端实时监控系统主要开发者. 责编: 陈秋歌,欢迎技术投稿.给文章纠错,请发邮件至chenqg#csdn.net,或加微信: ...
- JS(JavaScript)基础【补充】
何为js? JavaScript是目前非常流行的一种动态开发网页的脚本语言,它可以嵌入到HTML文档中,使网页更加生动活泼,并且具有交互性.最初是由Netscape公司开发的,前身是LiveScrip ...
- 了不起的Node.js: 将JavaScript进行到底
了不起的Node.js: 将JavaScript进行到底(Web开发首选,实时,跨多服务器,高并发) Guillermo Rauch 编 赵静 译 ISBN 978-7-121-21769-2 201 ...
最新文章
- js用.和[]获取属性的区别
- 【剪枝算法】通过网络瘦身学习高效的卷积网络Learning Efficient Convolutional Networks through Network Slimming论文翻译
- 错误:ORA-28002: the password will expire within 7 da
- Samba服务全攻略
- 3-8:常见任务和主要工具之格式化输出
- Spring @PostConstruce 和 @PreDestroy 实例化\销毁 bean 时
- 互联网公司分批返岗;Safari 将封杀超过398天的 HTTPS 证书;TypeScript 3.8 发布 | 极客头条...
- [论文]论文的一般结构
- 一个简单的Hook demo
- Sql Server 全文检索
- 机器学习之多项式拟合
- 域名转换网址中文网址转换_大转变:域名转换工作清单,第1部分
- matlab 柯西黎曼方程,柯西-黎曼方程
- 【人工智能】【1024】谷歌量子计算突破登Nature封面,号称200秒顶超算10000年!
- 中国废弃电器电子产品回收处理行业发展格局与投资风险可行性报告2022~2027年
- python当前时间减一年_python当前时间减一年_Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年......
- c语言程序设计账单,C语言课程设计——账单管理
- java 首字母转小写
- $monitor用法
- PS创建选区的工具-----快速选择和魔棒