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 相关文章推荐
跨浏览器的事件对象介绍
Jun 27 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
vue iview多张图片大图预览、缩放翻转
Jul 13 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
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命令行用法入门实例教程
2014/10/27 PHP
php格式化日期实例分析
2014/11/12 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
python简单的函数定义和用法实例
2015/05/07 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
python 日志增量抓取实现方法
2018/04/28 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
作为网站管理者应当如何防范XSS
2014/08/16 面试题
师范生的个人求职信范文
2014/01/04 职场文书
住房公积金接收函
2014/01/09 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
2014年实习生工作总结
2014/11/27 职场文书
鸟的天堂导游词
2015/01/31 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
nginx配置指令之server_name的具体使用
2022/08/14 Servers