前端开发_JavaScript_JavaScript简介和代码规范

JavaScript简介和代码规范

1.引入

   我们已经把前端所需掌握的知识点已经大致的了解了一下，但是我们会发现一个问题，就是有一部分的特效和功能我们使用单纯的CSS是很难实现的，这一个时候我们需要学习一门新的编程语言:JavaScript。接下来我们就一起来学习一下。

2.JavaScript简介

   JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript是一种轻量级的编程语言。是可插入 HTML 页面的编程代码。插入 HTML 页面后，可由代浏览器执行。说到底,那么javaScript能够做什么呢？就是可以实现操作页面上的内容信息，以及一些常见的页面动作信息。

3.JavaScript编码规范

   (1).JavaScript代码应该尽量写在.js文件中。然后如果需要在页面中需要使用的时候使用
      <script src="文件位置" type="text/javascript" charset="utf-8"></script>
      的方式引入。
      
  (2).尽量避免把代码直接写在html页面中。因为写在页面中浏览器在解析的时候，可以看见相关的
      代码。看见以后就会影响程序的安全性。

   (3).变量命名

      ①、变量的命名可以缩写但是不应该过短,如:不好的命名:id,inp,相比较好的命名规范:userId,userNameInput。

      ②、命名应该尽量做到见名知意，而不是图简便就随取名称，如:username,password,而不是a，b，c。

     ③、取名称的时候如果存在相互对应的关系，那么这一个时候尽量做到对仗工整，如:up/down

large/mideo/small等

    ④、避免变量的名称和临时变量发生冲突，最常用的两个就是obj和temp，因为我们在默认的编码习惯中做为形式参数的时候会经常使用这两个变量，当我们取了这两个变量的时候会发现一个问题:有莫名的错误。所以尽量避开这俩个变量的命名。

   ⑤、bool(布尔)类型的变量值在取名称的时候尽量不要使用is开头。

   ⑥、变量名称在命名的时候不要使用数字、拼音，尽量使用英文描述。

   ⑦、由于JavaScript是弱编程语言，所以建议在定义变量的时候就给出初始化值，这样方便后面的调用。

   ⑧、变量一般不使用undefined作为变量的值。

  (4).代码排版

   ①、一行代码最长是70个字符，超过就换行。

   ②、对于定义的函数、循环、条件等相关内容的代码，需要做对应的缩进，一般使用俩个空格。

  (5).代码简洁

       在实现相同功能的情况下，我们尽可能的选用代码量少，而且简洁的代码去实现相关的功能。

  (6).代码注释

      ①、多行注释

/*
 * @file index.js
 * @description 这是练习的测试题目
 * @author nwx
 * @update (create by nwx at 2021/12/19)
 */

     ②、函数注释

    /*
     * 初始化驱动函数
     * 
     * @param {bool} realTimeSearch 是否需要进行实时搜索
     * @param {HTMLFormElement} form 搜索表单DOM元素
     *
     */
    init(realTimeSearch, HTMLFormElement){
         // codes
    }

    /*
     * 处理数据的函数
     *
     * @param {object} jquery的点击事件event
     * @trigger 会触发search按钮的点击事件，以触发搜索
     * @returns 无返回
     *
     * TODO 这里临时使用了一个全局变量的flag，这种实现方式不太好
     * 虽然比较方便
     */              
    caculateResultFormDatas(event){

    }

   ③:单行注释

//定义国籍常量
var NATION = "中国";

 (7).代码深度建议不要过于太深。

      部分程序员写法：

 bindEvent: function(){
        $(".index").on("click", function(){
            if(orderStatus === "active"){
                ajax({
                    url: "/Index",
                    success: function(data){
                        for(let i = 0; i < data.orders.length; i++){
                            dom.append();
                        }
                    }
                });
            } else {
                ajax({
                    url: "/UserLogin",
                    success: function(data){
                        dom.linkto();
                    }
                });
            }
});
   

可以简化深度

updateOrder: function(event){
        let requestUrl = orderStatus === "active" ? "/index" 
                                : "create-order";
        //设置回调函数
        let activeUpdateCallback = function(data){ 
            for(var i = 0; i < data.orders.length; i++){
                console.log(data.orders[i].id);
            }       
        };
        //登录回调函数
        let inactiveUpdateCallback = function(data){
        
        };      
        
        let successCallback = {
            active: activeUpdateCallback,
            inactive: inactiveUpdateCallback
        };
        //请求登录
        searchHandler.sendUpdateOrderReq(requestUrl, 
        successCallback[orderStatus]);
    },      

bindEvent: function(){
        $(".UserLogin").on("click", searchHandler.updateOrder);
}