js 编写规范


Posted in Javascript onMarch 03, 2010

在一个项目中大量使用js,工程项目与网站开发有一些不一样,在我接触的工程项目中普遍使用js 不够多,大部分客户端可做事,交给了服务端,而且在使用js时不够规范,很容易造成代码难以阅读、内存泄漏问题,不注意js 输写方式。而在网站开发中(尤其一些大网站,js输出的非常漂亮、完美无论使用jquery,还是prototype 框架,还是不用框架,都有自己良好一套东东可用)
js输写最好还是可以面向对象方式 用类方向进行包装 js输写两种方式 闭包 原型
闭包:(借用的一个例子)

function Person(firstName, lastName, age) 
{ 
//私有变量: 
var _firstName = firstName; 
var _lastName = lastName; 
//公共变量: 
this.age = age; 
//方法: 
this.getName = function() 
{ 
return(firstName + " " + lastName); 
}; 
this.SayHello = function() 
{ 
alert("Hello, I'm " + firstName + " " + lastName); 
}; 
}; 
var BillGates = new Person("Bill", "Gates", 53);

原型:(借用的一个例子)
//定义构造函数 
function Person(name) 
{ 
this.name = name; //在构造函数中定义成员 
}; 
//方法定义到构造函数的prototype上 
Person.prototype.SayHello = function() 
{ 
alert("Hello, I'm " + this.name); 
}; 
//子类构造函数 
function Employee(name, salary) 
{ 
Person.call(this, name); //调用上层构造函数 
this.salary = salary; //扩展的成员 
}; 
//子类构造函数首先需要用上层构造函数来建立prototype对象,实现继承的概念 
Employee.prototype = new Person() //只需要其prototype的方法,此对象的成员没有任何意义! 
//子类方法也定义到构造函数之上 
Employee.prototype.ShowMeTheMoney = function() 
{ 
alert(this.name + " $" + this.salary); 
}; 
var BillGates = new Person("Bill Gates"); 
BillGates.SayHello(); 
var SteveJobs = new Employee("Steve Jobs", 1234); 
SteveJobs.SayHello();

这两种方法各有优缺点,第一种看起来更像一个类 每个对象设置一份方法有很大浪费,而且资源回收不利,第二种方法,看起来不是很漂亮,可性能很好(不过如果你使用prototype框架,就可以完美解决结构与性能问题了。)

实际在使用jquery 还是prototype问题上,我的一点点体会是 jquery使用闭包方式,而prototype当然原型,jquery更加适合对单个对象操作,而prototype更适合做一些客户端控件。实际我更喜欢在项目中使用jquery 而网站上更关注prototype

Javascript 相关文章推荐
javascript去掉代码里面的注释
Jul 24 Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 Javascript
vue 实现购物车总价计算
Nov 06 Javascript
js实现简单进度条效果
Mar 25 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 Javascript
jquery validation插件表单验证的一个例子
Mar 03 #Javascript
Jquery 实现Tab效果 思路是js思路
Mar 02 #Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 #Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 #Javascript
jQuery对象和DOM对象的相互转化实现代码
Mar 02 #Javascript
Javascript 自定义类型方法小结
Mar 02 #Javascript
Javascript Cookie读写删除操作的函数
Mar 02 #Javascript
You might like
深入理解PHP原理之异常机制
2010/08/21 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
php实现的农历算法实例
2015/08/11 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
13个PHP函数超实用
2015/10/21 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
Python数据结构之单链表详解
2017/09/12 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
python中def是做什么的
2020/06/10 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
python爬虫基础之urllib的使用
2020/12/31 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
就业推荐自我鉴定
2013/10/06 职场文书
安全生产月演讲稿
2014/05/09 职场文书
2014年基建工作总结
2014/12/12 职场文书
应急管理工作总结2015
2015/05/04 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
HttpClient实现文件上传功能
2022/08/14 Java/Android