JavaScript的常见用途和书写规范

JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。

JavaScript常见用途:

(1)可以直接写入HTML输出流

<script>
document.write("<h1>标题</h1>");
document.write("<p>这是一个 <strong>段落</strong>。</p>");
</script>

(2)对事件作出反应

<button type="button" onclick="alert('欢迎!')">点击我!</button>

(3)改变HTML元素的内容

<p id="demo">
可以改变 HTML 元素的内容
</p>
<script>
function myFunction()
{
    x=document.getElementById("demo");  // 找到元素
    x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

(4)改变HTML图像

<script>
function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
        element.src="/images/pic_bulboff.gif";
    }
    else
    {
        element.src="/images/pic_bulbon.gif";
    }
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">

(5)改变HTML元素样式

<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
    x=document.getElementById("demo") // 找到元素
    x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

(6)验证输入

<p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
    var x=document.getElementById("demo").value;
    if(x==""||isNaN(x))
    {
        alert("不是数字");
    }
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

书写规范

1)文件编码统一为utf-8

2)书写过程过, 每行代码结束必须有分号;

3)库引入: 原则上仅引入jQuery库

4)变量命名: 以下划线链接每个单词,类型_变量名

  • s:表示字符串。
  • n:表示数字。
  • b:表示逻辑。
  • a:表示数组。
  • r:表示正则表达式。
  • f:表示函数。
  • o:表示以上未涉及到的其他对象,

变量在作用域的顶部申明

5)常量:全部大写,以下划线分隔 如网站的URL,域,图片目录路径,js和css用到的目录路径

6)类命名: 首字母大写, 驼峰式命名. 如 Comment;

7)函数命名: 首字母小写驼峰式命名. 如getUserName();

8)类中私有方法,以下划线+方法名标注,私有方法不能在类外被调用。

8)命名语义化, 尽可能利用英文单词或其缩写;

9)代码结构明了化, 加适量注释. 提高函数重用率;
(1)大功能区块的功能描述(类,函数)
(2)单行的注释(放在行末尾)

10)注重与html分离, 减小reflow, 注重性能.

11)Dom中自定义的class,以j_classname的形式

12)把外部JavaScript文件放在HTML底部,的前面

13)优化循环(循环体中若有Dom操作,应该把Dom操作提到循环体外;在同一作用域内,Dom选择赋值给一局部变量。)

14)使用更简单的格式来写innerscript

15)总是检查数据
要检查你的方法输入的所有数据,一方面是为了安全性,另一方面也是为了可用性。

16)避免混入其他技术,js不直接控制css详细的设置,可控制classname

17)避免全局变量(类名空间App.dialog.)
全局变量和全局函数是非常糟糕的。因为在一个页面中包含的所有JavaScript都在同一个域中运行。所以如果你的代码中声明了全局变量或者全局函数的话,后面的代码中载入的脚本文件中的同名变量和函数会覆盖掉(overwrite)你的。

18)声明变量的话,总是用var
JavaScript中的变量可能是全局域或者局部域,用var声明的话会更加直观。

19)避免使用eval()方法(ajax数据请求验证)
JavaScript中的eval()方法是在运行时把任何代码当作对象来计算/运行的方法。实际上由于安全性的缘故,大部分情况下都不应该用 eval(),总是有一种更“正确”的方法来完成同样的工作的。

20)不要偷懒省略”和{}

21)获取对象属性的时候用方括号而不是点号
如果是用点号标记取得对象的属性,属性名称是硬编码,无法在运行时更改;而用方括号的话,JavaScript会求得方括号内值然后通过计算结果来求得属性名。也就是说用方括号标记的方式,属性名称可以是硬编码的,也可以是变量或者函数返回值。

猜你喜欢

转载自blog.csdn.net/QIANDXX/article/details/113351998
今日推荐