如何才能优雅地书写JS代码

第一:关于匿名函数的使用

要避免全局变量泛滥, 可以考虑使用匿名函数, 把不需要在外部访问的变量或者函数限制在一个比较小的范围内。

例如以下代码:

  1. <script>
  2. function func1(){
  3. var list = ["a", "b", "c"];
  4. for(var i = 0; i < list.length; i++){
  5. //..
  6. };
  7. }
  8. func1(); // 自动运行
  9. </script>

上述代码的作用是在页面加载的时候自动执行某些操作, 并不需要被外部调用, 但是它执行过后却留下了一个全局的函数。

像这种情况, 非常有必要使用匿名函数:

如下述代码所示:

  1. <script>
  2. (function func1(){
  3. var list = ["a", "b", "c"];
  4. for(var i = 0; i < list.length; i++){
  5. //..
  6. };
  7. })(); // 自动运行
  8. </script>

匿名函数的书写格式(不带参数的情况下):

  1. (function(){
  2. // 代码块
  3. })();

如果后面需要添加参数的话,则这样书写:

  1. (function(arg1, arg2, argN){
  2. //..
  3. })(arg1, arg2, argN);

第二:有关命名空间的使用规范:

命名空间可以有效减少全局变量的使用,是个很不错的规范JS代码的方式,在JS中命名空间需要进行如下操作:

“对象-属性”:

  1. window.com = {}
  2. window.com.bytter = {}
  3. window.com.bytter.hello = function(){
  4. alert("hello");
  5. }

那么什么情况下才会使用到命名空间呢?

如果您需要给某个已经存在的页面添加一些功能,有可能需要添加好多个函数,而且正好那个页面当中已经存在了好多的全局变量和函数,甚至还存在某些函数和你要新增加的函数同名,这时我们就可以使用命名空间了:

你创建一个命名空间, 把你的新函数都放在那个命名空间之下, 就可以了:

  1. <button type="button" onclick="pg.check.userAcc()">检查用户名</button>
  2. <button type="button" onclick="pg.check.userAcc()">检查帐号</button>
  3. <script>
  4. window.pg = {}
  5. window.pg.check = {
  6. // 检查用户名
  7. userName: function(){
  8. //..
  9. },
  10. // 检查帐号
  11. userAcc: function(){
  12. //..
  13. }
  14. };
  15. </script>

第三:如何保证多人书写的JS代码互不干扰

我们学习了匿名函数和命名空间,掌握了它们的正确使用方法,接下来我们就可以做到保证JS代码之间互不干扰:

我们把一个页面中自己维护的代码与别人维护的代码或者系统自带的代码分隔开来,做到与外部代码的耦合降低到最小。

  1. <script>
  2. // 页面命名空间
  3. window.pg = {}
  4. //命名空间的使用
  5. // 检查用户信息
  6. // 作者:张三
  7. // 最后更新: 2012.12.31
  8. (function(){
  9. // 私有变量
  10. var a, b, c;
  11. // 检查用户信息的相关方法
  12. window.pg.check = {
  13. // 检查用户名
  14. userName: function(){
  15. //..
  16. },
  17. // 检查帐号
  18. userAcc: function(){
  19. //..
  20. }
  21. };
  22. })(); // end 张三的代码
  23. //匿名函数的使用
  24. // xxx功能
  25. // 作者:李四
  26. // 最后更新: 2012.1.1
  27. (function(){
  28. window.pg.xxx = {
  29. //..
  30. }
  31. })(); // end 李四的代码
  32. </script>

第四:使得变量声明美观易读

1、变量必须在使用前用var进行声明;

2、变量的声明应该放在代码块或者函数的头部;

3、可在一行内声明多个变量,尽可能添加上注释信息

  1. // 声明变量 银行名称, 银行帐号
  2. var type, acc;
  3. // 声明变量 银行名称, 银行帐号
  4. var type = "中国银行", acc = "xxxxxx";
  5. var type = "中国银行", // 银行名称
  6. acc = "xxxxxx"; // 银行帐号
  1. 尽量使用易于理解的变量名,如:
  2. var bankType = "中国银行",
  3. bankAccount = "xxxxxx";

第五:函数和变量的命名

普通变量名和函数名采用"小驼峰式命名法", 如:firstName、lastName

作为构造函数的函数采用"大驼峰式命名法", 如以下代码所示:

  1. var Person = function(){
  2. //..
  3. }
  4. var me = new Person();
  5. 常量用大写和下划线表示,如:
  6. var ROOT_PATH = "/v10/";

第六:正确地使用分号,可保证JS正常压缩

尽量做到每条语句使用分号结尾(特别是需要进行压缩的js,因为省略分号常常会导致压缩失败);

第七:有关数组的定义

尽量使用简便的方式进行数组的定义:

  1. // 比较好的定义方法
  2. var list = [1, 2, 3];
  3. // 不好的定义方法
  4. var list = new Array();
  5. list[0] = 1;
  6. list[1] = 2;
  7. list[2] = 3;

摘自:iteye技术博客[有删改]

时间: 2024-10-16 13:41:20

如何才能优雅地书写JS代码的相关文章

几个你所不知道的技巧助你写出更优雅的vue.js代码

1. watch 与 computed 的巧妙结合 如上图,一个简单的列表页面. 你可能会这么做: created(){ this.fetchData() }, watch: { keyword(){ this.fetchData() } } 如果参数比较多,比如上图 关键字筛选, 区域筛选, 设备ID筛选, 分页数, 每页几条数据, 可能会是这样: data(){ return { keyword:'', region:'', deviceId:'', page:1 } }, methods:

输入密码才能浏览网页JS代码

代码一: <script type="text/javascript"> function password() { var testV = 1; var pass1 = prompt('请输入密码',''); while (testV < 3) { if (!pass1) history.go(-1); if (pass1 == "123") {//初始密码123 alert('密码正确!'); break; } testV+=1; var pa

JS代码中加上alert才能正常显示效果

模拟一个生成验证码的效果,发现JS代码中加上alert可以正常刷新,没有alert时图片就会丢失,找到解决方法,但是还不是很明白,先记录下来. 生成验证码的servlet代码如下: package servlet; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import

每天都有新发现——如何优雅的用js动态添加html代码

body { font-family: 微软雅黑,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMingLiU,serif; font-size: 10.5pt; line-height: 1.5; } html, body { } h1 { font-size:1.5em; font-weight:bold; } h2 { font-size:1.4em; font-weight:bold; } h3 { fon

最新的JavaScript核心语言标准&mdash;&mdash;ES6,彻底改变你编写JS代码的方式!【转载+整理】

原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructuring 箭头函数 Arrow Functions Symbols 集合 学习Babel和Broccoli,马上就用ES6 代理 Proxies ES6 说自己的宗旨是"凡是新加入的特性,势必已在其它语言中得到强有力的实用性证明."--TRUE!如果你大概浏览下 ES6 的新特性,事实上它

JS代码执行机制

JS代码从编译到执行 我们写出一段JS代码,JS的引擎并不是按照我们书写的顺序从上到下顺序编译并且执行的,首先是按照自己的规则对我们的代码先进行编译,然后从上到下执行编译的代码. 在全局作用域中,JS首先会对我们的函数进行声明,然后就是我们经常听到的变量提升机制,然后才是按照我们书写代码的顺序,来进行编译,然后在执行编译的代码. 看如下代码: function fn(){ console.log(a); } fn(); var a = "value"; 非常常见的一个面试题fn函数执行

JS代码的简单重构与优化

JS代码的简单重构与优化(适合新手) 原文  http://www.cnblogs.com/similar/p/5016424.html Demo . 1 //bad if (age > 20) { return true; } else { return false; } //good return age > 20; 这种一看就明白吧,没什么说的. Demo . 2 //bad for (var i = 0; i < arr.length; i++) { //do something

网页标题随机显示名言JS代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

精品JS代码收藏大全

1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键    <table border oncontextmenu=return(false)><td>no</table> 可用于Table 2. <body onselectstart="return false"> 取消选取.防止复制 3. onpaste="return false&quo