JavaScript的常见用途和书写规范

系统管理员 2023-01-12 14:58 101阅读 0赞

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会求得方括号内值然后通过计算结果来求得属性名。也就是说用方括号标记的方式，属性名称可以是硬编码的，也可以是变量或者函数返回值。

发表评论取消回复

表情：

评论列表（有 0 条评论，101人围观）

还没有评论，来说两句吧...

相关阅读

相关书写HTML的规范

html与css肯定是前端开发的入门第一课，相信大部分朋友都已经感觉自己很熟悉我们的这俩个好朋友了。但是大家是否了解其规范呢？今天我们一起看看Html的开发规范。文

落日映苍穹つ/ 2023年06月15日 13:27/ 0 赞/ 22 阅读

相关 JavaScript的常见用途和书写规范

JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。 JavaScript常见用途: （1）可以直接写入HTML输出流 <script>

系统管理员/ 2023年01月12日 14:58/ 0 赞/ 102 阅读

相关前端书写规范

前端开发规范：一、vue 页面命名 views 下面的文件夹代表着模块的名字 1. 由名词组成（car、order、cart） 2. 单词只能有一个 3.

曾经终败给现在/ 2022年12月03日 09:55/ 0 赞/ 244 阅读

相关 css书写规范

1. 列表内容编码设置采用 UTF-8 编码，在 CSS 代码头部使用： @charset "utf-8"; 注意，必须要定义在 CSS 文件所有字符的前

客官°小女子只卖身不卖艺/ 2022年06月10日 23:56/ 0 赞/ 275 阅读

相关 css书写规范

1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, paddin

矫情吗；*/ 2022年06月09日 02:07/ 0 赞/ 320 阅读

相关 HTML和CSS书写规范

> 注：此规范来自 Bootstrap 编码规范。 HTML CSS 黄金定律

谁践踏了优雅/ 2022年05月23日 10:26/ 0 赞/ 311 阅读

相关 Java 书写规范

个人规范，仅为个人使用记录。规范变量命名变量名起名时，首字母只能是字母、下划线“\_”、美元符“$”。 > 不能以数字开头（如Ox10）； > 不能以

浅浅的花香味﹌/ 2022年05月20日 23:15/ 0 赞/ 227 阅读

相关书写规范

我本是个做事容易粗心和着急的人，最近被分配到每周做一次会议记录，总是划掉几页纸，觉得浪费，而且很不好看，不整洁，不美观。我应该坚持好习惯，字要

红太狼/ 2022年04月16日 00:13/ 0 赞/ 263 阅读

相关 markdown书写规范

目录欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样

灰太狼/ 2022年01月21日 05:57/ 0 赞/ 287 阅读

相关 CSS书写规范和顺序

前言对于项目，那就是我们的亲儿子啊，作为一个前端菜鸟，面向用户就是将自己的儿子介绍给别人认识，肯定要让他白白净净，漂漂亮亮的啦，给别人一眼就喜欢上的感觉咯，哈哈哈~

我会带着你远行/ 2021年10月23日 15:44/ 0 赞/ 444 阅读