精华内容
下载资源
问答
  • JavaScript函数命名方式

    千次阅读 2020-10-08 16:49:18
    函数命名方式 JavaScript代码服用单位是函数函数可以包含一段可执行代码,也可以接受调用者传入的参数。JavaScript定义函数主要有以下三种方式: 第一种方式:命名函数 <script> function 函数名(参数...

    函数的命名方式

    JavaScript代码服用单位是函数,函数可以包含一段可执行代码,也可以接受调用者传入的参数。JavaScript定义函数主要有以下三种方式:

    1. 第一种方式:命名函数
    <script>
      function 函数名(参数列表){//function声明函数的关键字
         要执行的语句块;
       }
       function myAge(age) {
                document.write('我的年龄是' + age)//我的年龄是19 
            }
            myAge(19)//函数不调用,不执行
    </script>
    
    1. 第二种:匿名函数
    <script>
        function (参数列表) {//同引用函数调用这个函数
            要执行的语句块
         }
         //匿名函数
          var a=function(age) {
              document.write('我的年龄是' + age)//我的年龄是19
           }
           a(19)
        </script>
    

    命名函数和匿名函数不同,命名函数前后都可调用,匿名函数只能在函数后面调用才能出现

    1. 第三种:使用function类构建匿名函数
    <script>
       new function(参数列表,函数执行体);//构造一个函数,参数列表和函数执行体都要用双引号括起来
    
       //构建匿名函数
       var a = new Function('name','age',"document.write('我的姓名:'+name+',我的年龄:'+age)")//我的姓名:小红,我的年龄:20
        a("小红",20)
    </script>
    

    **强调:**函数的形参不需要做类型声明,也不要加var,这是JavaScript属于弱类型语言的一种表现

    大多数优秀的JavaScript框架都使用第二种“匿名函数”语法来定义函数,他的可读性最好,所以我们必须掌握使用它。

    函数常用的特殊语句

    • 函数的返回值

    return

    JavaScript中的函数没有声明返回类型,当函数想要返回值的时候直接加上return“值”语句即可,假如不加就代表此函数没有任何返回值

     <script>
            //return
            function show() {
                return function(){
                    alert("美女")//打印美女
                }
            }
            var f=show();
            f();
        </script>
    
    • 局部变量和局部函数

    根据变量的定义范围不同,变量有全局变量局部变量之分。

    函数外部直接定义的变量是全局变量,在函数中定义的变量成为局部变量,局部变量只能在函数内有效,如果全局变量和局部变量使用相同的变量,则局部变量将覆盖全局变量。

    与局部变量对应的是局部函数,局部函数实在函数中定义的,全局变量可以在外部直接访问,内部变量只能在函数内部访问

    注意:全局变量不能调用局部变量,局部变量可以调用内部变量

    <script>
       //全局变量
        var name="美女"//全局变量
         function show(){
               var name="美女"
               var age=10;
               alert(name+"---"+age);//打印 美女---10
          }
          alert(name)//全局变量和局部变量使用相同的变量,则局部变量将覆盖全局变量。
          alert(age) //全局变量可以在外部直接访问,内部变量只能在函数内部访问
          show();
    
          //局部变量
            function f1() {
                var name ="张三";
                function f2() {
                    var age = 30;
                    alert(name);
                }
                //alert(age);//错误的  全局函数是不能访问局部函数内部的局部变量
                f2();
            }
            f1();
    
          //闭包:闭包是指有权访问另一个函数作用域中变量的函数
            function f3() {
                var n=1;
                function f4() {
                    alert(n);
                }
                return f4;
            }
            var f=f3();
            f();
    </script>
    

    JavaScript的3种调用函数的方式:

    1. 直接调用函数:这种函数的调用是最常见、最普通的方式

    对象.函数引用:
    //当声明一个函数没有指明分配给哪个对象使用的时候,默认分配给的是window对象。

    <scrit>
       function show(name,age) {
                alert("你好"+name+",今年"+age)
            }
            window.show('张三','20')  //对象.函数名   默认分配给的是window对象
    </script>
    
    1. 以call方法调用函数:

    函数引用.call(调用者,参数1,参数2,…)

    <scrit>
        function show(name,age) {
                alert("你好,我是"+name+",今年"+age)
            }
            show.call(window,'张三','20');
    </script>
    
    1. 以apply方法调用函数:

    函数引用.apply(调用者,arguments)
    //arguments相当于是数组,用来存放多个参数。和call调用方式类似

    <scrit>
       function show(name,age) {
                alert("你好,我是"+name+",今年"+age)
            }
            show.apply(window,['张三','20']);
    </script>
    

    对方法2和方法3的一个扩展小案例

    <script>
        function show(arr,func) {
                func.call(window,arr);
            }
            show([1,2,3,4],function (arr) {//用匿名函数传递
                for(i in arr){//遍历这个函数
                    document.write(arr[i]+"<br/>")
                }
            })
    
            document.write("_______"+"<br>")
    
            function show(arr,func) {
                func.apply(window,[arr]);
            }
            show([1,2,3,4],function (arr) {//以数组形式传参
                for(i in arr){//遍历这个函数
                    document.write(arr[i]+"<br/>")
                }
            })
            //第一种比较常用,但第二种和第三种比较灵活
    </script>
    
    展开全文
  • 1,函数命名规范 普通函数:小驼峰 add() sayName() 普通函数有封装功能,用于执行代码块 构造函数 大驼峰 Object String Date Jiwawa Dog 构造函数 2,如何实现数组去重,即arr=[1,1,2,3,4,3,3,5,6,4]进行...

    1,函数命名规范

    普通函数:小驼峰  add()   sayName()          普通函数有封装功能,用于执行代码块

    构造函数     大驼峰    Object  String  Date Jiwawa  Dog    构造函数   

    2,如何实现数组去重,即arr=[1,1,2,3,4,3,3,5,6,4]进行代码处理变成arr=[1,2,3,4,5,6]

      

     

     

     

     

     

     

    展开全文
  • JavaScript常见变量和函数命名示例

    万次阅读 2020-07-21 15:16:17
    JavaScript作为前端开发从业人员必须掌握的3大基础知识中最重要的一环,也是平是接触时间最长、写得最多的。在开发过程中必然会遇到命名的问题,你会词穷...JavaScript常见变量和函数命名示例思维导图 需要注意的是由

    JavaScript作为前端开发从业人员必须掌握的3大基础知识中最重要的一环,也是平是接触时间最长、写得最多的。在开发过程中必然会遇到命名的问题,你会词穷、纠结、惆怅吗?本文的出现相信能够解决大部分烦恼,让你轻松写出符合规范、易读、简短的代码。

    本文将通过大量的实例来试图自圆其说,形成一套系统化、实用的变量命名理化体系。通过按JavaScript的数据类型分类着手、细到一个函数的参数命名,并提供众多可选方案,并尽量给出其适用范围和利弊。

    JavaScript常见变量和函数命名示例思维导图
    JavaScript常见变量和函数命名示例思维导图

    需要注意的是由于个人写作水平、和知识有限,很多方面叙述上有些生硬,在分类上也没有什么特别的依据,文章也没有人审稿,所以有什么纰漏还请留言告知。由于写作仓促,内容可能不全,后续会随着工作和学习的深入而不断地调整和更新。

    布尔值(Boolean)命名

    Boolean值是两种逻辑状态的变量,它包含两个值:。在JavaScript中对应 truefalse,在实践中通常使用数字1表示真值,0来表示假值。

    虽然Boolean的状态只有两种但是在命名时可以进一步分类,这里给出几种场景:

    场景一:表示可见性、进行中的状态

    解释可见性在通常指页面中的元素、组件是否显示(或者组件挂载到DOM上,但并不可见)。进行中主要是说明某种状态是处于持续进行中。

    推荐命名方式为 is + 动词(现在进行时)/形容词,同时这种方式也可以直接不写 is,但是为了更好的作区分,建议还是加上。

    {
      isShow: '是否显示',
      isVisible: '是否可见',
      isLoading: '是否处于加载中',
      isConnecting: '是否处于连接中',
      isValidating: '正在验证中',
      isRunning: '正在运行中',
      isListening: '正在监听中'
    }
    

    注意: 在Java中使用这种方式是有一定副作用的,为什么请移步:为什么阿里巴巴禁止开发人员使用 “isSuccess” 作为变量名?

    场景二:属性状态类

    解释:通常用来描述实体(例如:HTML标签、组件、对象)的功能属性,而且定法比较固定。

    {
      disabled: '是否禁用',
      editable: '是否可编辑',
      clearable: '是否可清除',
      readonly: '只读',
      expandable: '是否可展开',
      checked: '是否选中',
      enumberable: '是否可枚举',
      iterable: '是否可迭代',
      clickable: '是否可点击',
      draggable: '是否可拖拽'
    }
    

    场景三:配置类、选项类

    解释:主要是指组件功能的开启与关闭,功能属性的配置。

    这是一种比较常见的情景,目前命名方式也有很多种,但是归纳起来也不多。推荐使用 withXx 来表示组件在基本功能形态外的其它功能,比如组件的基础功能到高级功能的开启;使用 enableXx 来表示组件某些功能的开启;使用 allowXx 来表示功能属性的配置;使用 noXx 用于建议功能使用者这个不建议开启。

    {
      withTab: '是否带选项卡',
      withoutTab: '不带选项卡',
      enableFilter: '开启过滤',
      allownCustomScale: '允许自定义缩放',
      shouldClear: '是否清除',
      canSelectItem: '是否能选中元素',
      noColon: '不显示label后面的冒号',
      checkJs: '检查Js',
      emitBOM: 'Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files.'
    }
    

    注意:如果嫌分类太多,可以只使用其中一种方式,比如在Typescript中使用了 allownXxnoXx

    除了上面这些带有特定的前置介词、动词方式外还有一些在语义上带有疑问性质的组合通常也是作为Boolean命名的一种参考。

    {
      virtualScroll: '是否启用虚拟滚动模式',
      unlinkPanels: '在范围选择器里取消两个日期面板之间的联动',
      validateEvent: '输入时是否触发表单的校验'
    }
    

    函数命名

    函数在不同的上下文中的叫法也不一样,在对象中称为方法,在类中有构造函数、在异步处理时有回调函数,还有立即执行函数、箭头函数、柯里函数等。

    函数命名的方式常常是和业务逻辑耦合在一起的,但是在命名规则上也有一些常见的模式可以遵循。

    场景一:事件处理

    事件处理函数是前端平时用到最多的,包括浏览器原生事件、异步事件和组件自定义事件。在写法上最常见的两种命名分别为 onXxonXxClickhandleXxhandleXxChange

    这里如何在二者之间选择,可以从二方面来归类。一是,原生事件采用 onXx,而自定义事件使用handleXx。二是,事件主动监听采用 onXx,被动处理使用 handleXx

    从实践及三大主流框架的文档关于事件部分的内容来看,推荐使用 handleXx 这种方式,而在表单提交的时候通常采用 onSubmit 函数。

    其实,在实际项目中很少严格这样来命名事件处理函数,因为这种方式有一定的局限性,比如点击按钮打开一个对话框,使用 handleOpenDlgonOpenDlg 都没有直接写 openDlg 方便,如果页面有多个不同功能的对话框采用这种方式会显得变量名过长,而handle和on就显得没有必要了,比如hanldeOpenCommentDlg 就没有 openCommentDlg 直白。

    下面列出了一些约定成俗的适用例子:

    {
      onSubmit: '提交表单',
      handleSizeChange: '处理分页页数改变',
      handlePageChange: '处理分页每页大小改变',
      onKeydown: '按下键'
    }
    

    场景二:异步处理

    这里主要是指在写数据层服务、状态管理中的Action命名,以及Ajax回调的命名规则。

    {
      getUsers: '获取用户列表',
      fetchToken: '取得Token',
      deleteUser: '删除用户',
      removeTag: '移除标签',
      updateUsrInfo: '更新用户信息',
      addUsr: '添加用户',
      createAccount: '创建账户'
    }
    

    命名主要围绕数据的增删查找来划分,获取数据通常是 getXxfetchXx,在作者看来两者在使用上的区分在于 getXx 的数据来源不一定直接取自异步的原始数据,可能是加工处理后的,而 fetchXx 是直接拿的原始数据。当然在实际项目中并没有区分,看个人喜好。

    deleteXx 主要用于数据删除,而 removeXx 在语义上是移除数据,通常情况数据是还存在的,只是没有显示或数据假删除。updateXx 是指数据更新操作,addXx 是在已有列表数据中添加新的子项、而createXx主要是创建新的实例,比如新建一个账户。

    场景三: 跳转路由

    在实际开发过种中,比如在使用react-router/vue-router时,在模板或者JSX中可以直接在标签中写上目标地址,但有些时候跳转的目标地址是经过判断或者组合后的,并且通过事件触发跳转的,这个时候就需要一个函数来处理,那么在函数命名的时候可以考虑使用

    {
      toTplDetail: '跳转到模板详情页面',
      navigateToHome: '导航到首页',
      jumpHome: '跳转首页',
      goHome: '跳转首页',
      redirectToLogin: '重定向到登录页',
      switchTab: '切换Tab选项卡',
      backHome: '回到主页'
    }
    

    推荐使用 toXxgoXx 这两种方式,如果不是在当前页面打开/跳转页面,可以使用 toBlankTplDetail 或者 goBlankHome 这种方式来进一步语义化。如果前端页面是位于Webview中,也可以考虑采用toNativeShare 这种方式来命名。

    场景四:框架相关特定方法

    这里主要是针对前端3大主流流行框架,有一些命名是带有特定标识符的,还有就是一些生命周期的命名方式。

    {
      formatTimeFilter: '在AngularJs和Vue中,通常用于过滤器命名',
      storeCtrl: '用于AngularJs定义控制器方法',
      formatPipe: '用于Angular中,标识管道方法',
      $emit: 'Vue中的实例方法',
      $$formatters: 'AngularJs中的内置方法',
      beforeCreate: 'Vue的生命周期命名',
      componentWillMount: 'React生命周期命名',
      componentDidMount: 'React生命周期命名',
      afterContentInit: 'Anuglar生命周期命名',
      afterViewChecked: 'Angula生命周期命名',
      httpProvider: 'AngularJs服务',
      userFactory: '工厂函数',
      useCallback: 'React钩子函数'
    }
    

    场景五:数据的加工

    这类场景在处理列表的时候经常会碰到,比如排序、过滤、添加额外的字段、根据ID和索引获取特定数据等。

    情形一:根据特定属性获取属性

    这里可以参考DOM方法的命名,比如:getElememtById()getElementsByTagName()getElementsByClassName()getElementsByName(),然后提炼出一个比较实用的模板:getXxByYy()。其中 Xx 可以是:element, item, option, data, selection,list, options 以及一些特定上下文的名字,比如:user(s), menu(s) 等。Yy 相对来说比较固定,经常用到的就是 id, index, key, value, selected, actived 等。

    除了使用 get,还可以使用 queryfetch,但是需要注意和上面提到的异步数据处理作一个区分。

    {
      getItemById: '根据ID获取数据元素',
      getItemsBySelected: '根据传入的已选列表ID来获取列表全部数据',
      queryUserByUid: '根据UID查询用户'
    }
    

    注意:在 getItemsBySelected 这种情形下直接写成 getItemsSelected 更好,但只适用于 Yy 为形容词的场景

    情形二:格式化数据

    这里的格式化操作包括排序、调整数据结构、过滤数据、添加属性。命名通常使用 formatXx, convertXx,inverseXx, toggleXx, parseXx, flatXx, 也可以结合数组的一些操作方法来命名,比如 sliceXx, substrXx,spliceXx, sortXx, joinXx 等来命名。

    {
      formatDate: '格式化日期',
      convertCurrency: '转换货币单位',
      inverseList: '反转数据列表',
      toggleAllSelected: '切换所有已选择数据状态',
      parseXml: '解析XML数据',
      flatSelect: '展开选择数据',
      sortByDesc: '按降序排序'
    }
    

    数组命名

    数组的命名推荐使用复数形式来命名,还有就是名词和具有列表意思的单词组合。常见的词汇有options, list, maps, nodes, entities, collection 等。

    {
      users: '用户列表',
      userList: '用户列表',
      tabOptions: '选项卡选项',
      stateMaps: '状态映射表',
      selectedNodes: '选中的节点',
      btnGroup: '按钮组',
      userEntities: '用户实体'
    }
    

    选项元素、下拉元素命名

    主要针对的是在下拉选择框、选项卡元素、Radio、Checkbox等数据源每个选项数据的命名。常见的词汇有:title, name, key, label, field, value, id, children, index, nodes 等。

    基中 title/name/key/label/field 作为选项显示名, value/id 用于唯一标识选项,children/nodes 用于包含子节点内容。如果选项元素的语义很明确的情况下也可以直接使用特定单词来代替提到的这些泛指的词汇,例如菜单列表就可以使用 menu 来作为显示名。

    // 最常见组合
    {
      title: '标题',
      value: 'ID值'
    }
    
    // 组合二
    {
      label: '标签名',
      value: 'ID值'
    }
    
    // 组合三
    {
      name: '元素名',
      id: 'ID值'
    }
    
    // 组合四
    {
      field: '字段',
      value: '标识',
      index: '索引'
    }
    

    当前选项、激活项命名

    适用列表的选中项、菜单选中项、步骤操作的当前进行步骤、页面路由当前路由等的命名。

    {
      activeTab: '当前选中选项卡',
      currentPage: '当前页',
      selectedData: '当前选项中数据',
    }
    

    临时数据、比对数据命名

    针对在代码中有时会使用一些临时的变量来存储数据、保存数据快照的场景下的命名。

    {
      swapData: '临时交换数据',
      tempData: '临时数据',
      dataSnapshot: '数据快照'
    }
    

    数据循环语句中变量命名

    在使用 for 循环时,多层嵌套请依次使用 i/j/k,超过3层可以使用 x/y/zm/n 来命名。使用 forEach,map, filter 等方法时,每一个元素命名可以根据不同语境下的特殊名字来命名,比如遍历 menus,那么每个元素可以命名为 menu,不然则使用上下文无关的词汇,比如:item, option, data, key, object 等。至于索引通常使用 index,如果多层可以使用 index + 数字 的形式,也可以直接使用 i/j/k 来作为索引,甚至还可以使用 subIndex/grandIndex 这种方式来命名。

    对于在使用 for 循环时数组长度如果需要单独命名的话,可以使用 xxlength/xxLens,或者 xxCount

    在循环的过程中通常还会统计某个条件下数据匹配的次数、重复元素数量、记录中间结果等情况。这里推荐使用 count 表示次数,skipped 表示跳过的数量,result 表示结果。

    // for 循环
    for (let i = 0; i < 10; i++) {
      for (let j = 0; j < 10; j++) {
        for (let k = 0; k < 10; k++) {
          // do something
        }
      }
    }
    
    for (let i = 0, lens = this.options.length; i < lens; i++) {
      // do something
    }
    
    // forEach
    users.forEach((item, index) => {
      // do something
    })
    
    menus.forEach((menu, index) => {
      if (menu.children) {
        menu.children.forEach((subMenu, subIndex) => {
          if (subMenu.children) {
            subMenu.children.forEach((grandMenu, grandIndex) => {
              // 一个不常用的示例
            })
          }
        })
      }
    })
    

    方法参数命名

    方法的参数名称和数量在不同的方法中各不相同,但是还是有一些固定的模式可以参考,比如在Vue中监听属性变化的新值和旧值;reduce 方法的上一个值,当前值;回调函数的命名、剩余参数的命名等。

    情形一:新值、旧值

    常见于Vue中watch 对像中的属性监听回调函数,推荐使用

    {
      oldVal: '旧值',
      newVal: '新值'
    }
    

    情形二:上一个值、下一个值和当前值

    这种情形见于路由的钩子方法,Object.assign 数据拷贝的参数。

    // 组合一
    {
      from: '从...',
      to: '到...'
    }
    
    // 组合二
    {
      prev: '上一个...',
      next: '下一个...',
      cur: '当前'
    }
    
    // 组合三
    {
      source: '源',
      target: '目标'
    }
    
    // 组合四
    {
      start: '开始',
      end: '结束'
    }
    

    情形三:异步数据返回

    用于Promise的then方法参数,await 的返回的Promise等。可选择的词汇有:res, data, json, entity,推荐使用 res

    demoPromise.then(res => {
      // do something
    })
    

    情形四:其它情况

    一些使用不多,但是在编程时约定成俗的命名方式。例如 ch 表示单个字符,str 表示字符串, n 代表次数, reg 表示正则, expr 表示表达式, lens 表示数组长度, count 表示数量, p 表示数据的精度, q 表示查询(query), src 表示数据源(source), no 表示数字(number), rate 表示比率, status 表示状态, bool 表示布尔值, arr 表示数组值, obj 表示对象值, xy 表示坐标两轴, func 表示函数, ua表示User Agent, size 表示大小, unit 表示单位, hoz 表示水平方向, vert 表示垂直方向, radix 表示基数,根

    // 传入单个字符
    function upper(ch) {}
    
    // 数量重复
    function repeat(str, n)
    
    // 正则
    'abab'.replace(reg, 'bb')
    

    事件命名

    这里根据DOM、nodejs和一些框架和UI组件的事件进行归纳

    DOM事件

    这里列举DOM中常见的事件命名

    {
      load: '已完成加载',
      unload: '资源正在被卸载',
      beforeunload: '资源即将被卸载',
      error: '失败时',
      abort: '中止时',
      focus: '元素获得焦点',
      blur: '元素失去焦点',
      cut: '已经剪贴选中的文本内容并且复制到了剪贴板',
      copy: '已经把选中的文本内容复制到了剪贴板',
      paste: '从剪贴板复制的文本内容被粘贴',
      resize: '元素重置大小',
      scroll: '滚动事件',
      reset: '重置',
      submit: '表单提交',
      online: '在线',
      offline: '离线',
      open: '打开',
      close: '关闭',
      connect: '连接',
      start: '开始',
      end: '结束',
      print: '打印',
      afterprint: '打印机关闭时触发',
      click: '点击',
      dblclick: '双击',
      change: '变动',
      select: '文本被选中被选中',
      keydown/keypress/keyup: '按键事件',
      mousemove/mousedown/mouseup/mouseleave/mouseout: '鼠标事件',
      touch: '轻按',
      contextmenu: '右键点击 (右键菜单显示前)',
      wheel: '滚轮向任意方向滚动',
      pointer: '指针事件',
      drag/dragstart/dragend/dragenter/dragover/dragleave: '拖放事件',
      drop: '元素在有效释放目标区上释放',
      play: '播放',
      pause: '暂停',
      suspend: '挂起',
      complete: '完成',
      seek: '搜索',
      install: '安装',
      progress: '进行',
      broadcast: '广播',
      input: '输入',
      message: '消息',
      valid: '有效',
      zoom: '放大',
      rotate: '旋转',
      scale: '缩放',
      upgrade: '更新',
      ready: '准备好',
      active: '激活'
    }
    

    自定义事件

    在封装组件时提供的事件名除了参考DOM事件外,在命名上也可以参考Github Api 采用 动词过去时 + Event 的方式, Visual Studio Code Api的 `on +

    {
      assignedEvent: '分配事件',
      closedEvent: '关闭事件',
      labeledEvent: '标签事件',
      lockedEvent: '锁事件',
      deployedEvent: '部署事件'
    }
    

    此外,很多命名方式可以根据场景使用 元素 + click元素 + changeselect + 范围等方式灵活运用

    {
      selectAll: '选择所有',
      cellClick: '当某个单元格被点击时会触发该事件',
      sortChange: '当表格的排序条件发生变化的时候会触发该事件'
    }
    

    状态管理命名

    如果在项目中用到了状态管理(redux/vuex/ngrx),下面给出一些ActionType,Mutation, Action的命名参考。

    // Redux 的 actionType
    LOAD_SUCCESS
    LOAD_FAIL
    TOGGLE_SHOW_HISTORY
    ON_PLAY
    ON_LOAD_START
    FETCH_SONGS_REQUEST
    RECEIVE_PRODUCTS
    
    // ngrx
    const SET_CURRENT_USER = '[User] Set current';
    const ADD_THREAD = '[Thread] Add';
    const UPDATE_TRIP_SUCCESS = 'Update [Trip] Success';
    

    时间变量命名

    // 日期、时间
    // --------------------------------------------------------
    sentAt: '发送时间'
    addAt: '添加时间'
    updateAt: '更新时间'
    startDate: '开始日期'
    endDate: '结束日期'
    startTime: '开时时间'
    endTime: '结束时间'
    

    参考资料

    文章的写作过程中参考大量优秀的文章、优秀开源项目的源码、流行框架的最佳实践指南以及一些SDK的接口文档。

    展开全文
  • js命名规范

    2021-01-17 11:52:45
    命名规范:前缀为形容词 (函数前缀为动词, 以此来区分函数和变量) # 好的命名方式 let maxCount = 10; let tableTitle = '啦啦啦'; # 不好的命名方式 let setConut = 10; let getTitle = '啦啦啦'; 二、常量...

    js命名应遵循 简洁、语义化 的原则

    一、变量

    命名方法: 小驼峰式命名法
    命名规范:前缀为形容词 (函数前缀为动词, 以此来区分函数和变量)

     

    # 好的命名方式
    let maxCount = 10;
    let tableTitle = '啦啦啦';
    # 不好的命名方式
    let setConut = 10;
    let getTitle = '啦啦啦';
    

    二、常量

    命名方法:名词全部大写
    命名规范:使用大写字母和下划线来组合命名,下划线用来分割单词。

     

    const MAX_COUNT = 10;
    const URL = '//www.huifenqi.com';
    

    三、函数 & 方法

    命名方法: 小驼峰式命名法
    命名规范: 前缀应该为动词
    命名建议:常用动词约定

    JavaScript 代码规范


    所有的 JavaScript 项目适用同一种规范。


    JavaScript 代码规范

    代码规范通常包括以下几个方面:

    • 变量和函数的命名规则
    • 空格,缩进,注释的使用规则。
    • 其他常用规范……

    规范的代码可以更易于阅读与维护。

    代码规范一般在开发前规定,可以跟你的团队成员来协商设置。


    变量名

    变量名推荐使用驼峰法来命名(camelCase):

    firstName = "John";
    lastName = "Doe";

    price = 19.90;
    tax = 0.20;

    fullPrice = price + (price * tax);


    空格与运算符

    通常运算符 ( = + - * / ) 前后需要添加空格:

    实例:

    var x = y + z;
    var values = ["Volvo", "Saab", "Fiat"];


    代码缩进

    通常使用 4 个空格符号来缩进代码块:

    函数:

    function toCelsius(fahrenheit) {
        return (5 / 9) * (fahrenheit - 32);
    }

    Note不推荐使用 TAB 键来缩进,因为不同编辑器 TAB 键的解析不一样。

    语句规则

    简单语句的通用规则:

    • 一条语句通常以分号作为结束符。

    实例:

    var values = ["Volvo", "Saab", "Fiat"];

    var person = {
        firstName: "John",
        lastName: "Doe",
        age: 50,
        eyeColor: "blue"
    };

    复杂语句的通用规则:

    • 将左花括号放在第一行的结尾。
    • 左花括号前添加一空格。
    • 将右花括号独立放在一行。
    • 不要以分号结束一个复杂的声明。

    函数:

    function toCelsius(fahrenheit) {
        return (5 / 9) * (fahrenheit - 32);
    }

     

    循环:

    for (i = 0; i < 5; i++) {
        x += i;
    }

     

    条件语句:

    if (time < 20) {
        greeting = "Good day";
    } else {
        greeting = "Good evening";
    }


    对象规则

    对象定义的规则:

    • 将左花括号与类名放在同一行。
    • 冒号与属性值间有个空格。
    • 字符串使用双引号,数字不需要。
    • 最后一个属性-值对后面不要添加逗号。
    • 将右花括号独立放在一行,并以分号作为结束符号。

    实例:

    var person = {
        firstName: "John",
        lastName: "Doe",
        age: 50,
        eyeColor: "blue"
    };

    短的对象代码可以直接写成一行:

    实例:

    var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};


    每行代码字符小于 80

    为了便于阅读每行字符建议小于数 80 个。

    如果一个 JavaScript 语句超过了 80 个字符,建议在 运算符或者逗号后换行。

    实例:

    document.getElementById("demo").innerHTML =
        "Hello Runoob.";


    尝试一下 »


    命名规则

    一般很多代码语言的命名规则都是类似的,例如:

    • 变量和函数为小驼峰法标识, 即除第一个单词之外,其他单词首字母大写( lowerCamelCase
    • 全局变量为大写 (UPPERCASE )
    • 常量 (如 PI) 为大写 (UPPERCASE )

    变量命名你是否使用这几种规则: hyp-henscamelCase, 或 under_scores ?

    HTML 和 CSS 的横杠(-)字符:

    HTML5 属性可以以 data- (如:data-quantity, data-price) 作为前缀。

    CSS 使用 - 来连接属性名 (font-size)。

    Note- 通常在 JavaScript 中被认为是减法,所以不允许使用。

    下划线:

    很多程序员比较喜欢使用下划线(如:date_of_birth), 特别是在 SQL 数据库中。

    PHP 语言通常都使用下划线。

    帕斯卡拼写法(PascalCase):

    帕斯卡拼写法(PascalCase) 在 C 语言中语言较多。

    驼峰法:

    JavaScript 中通常推荐使用驼峰法,jQuery 及其他 JavaScript 库都使用驼峰法。

    Note变量名不要以 $ 作为开始标记,会与很多 JavaScript 库冲突。

    HTML 载入外部 JavaScript 文件

    使用简洁的格式载入 JavaScript 文件 ( type 属性不是必须的):

    <script src="myscript.js">


    使用 JavaScript 访问 HTML 元素

    一个糟糕的 HTML 格式可能会导致 JavaScript 执行错误。

    以下两个 JavaScript 语句会输出不同结果:

    实例

    var obj = getElementById("Demo")

    var obj = getElementById("demo")


    尝试一下 »

    HTML 与 JavaScript 尽量使用相同的命名规则。

    访问 HTML(5) 代码规范


    文件扩展名

    HTML 文件后缀可以是 .html (或 .htm)。

    CSS 文件后缀是 .css 。

    JavaScript 文件后缀是 .js 。


    使用小写文件名

    大多 Web 服务器 (Apache, Unix) 对大小写敏感: london.jpg 不能通过 London.jpg 访问。

    其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感: london.jpg 可以通过 London.jpg 或 london.jpg 访问。

    你必须保持统一的风格,我们建议统一使用小写的文件名。

     
      
      
      
      
      
      

     

    // 是否可阅读
    function canRead() {}
    // 获取名称
    function getName() {}
    

    四、类 & 构造函数

    命名方法:大写驼峰式命名法,首字母大写。
    命名规范:前缀为名称。

     

    class Persion {
      constructor(name) {
       ...
      }
    }
    
    let person = new Person('啦啦啦');
    

    五、类的成员

    类的成员包括:

    1. 公共属性和方法: 跟变量和函数命名一样。
    2. 私有属性和方法:前缀为下划线_, 后面跟公共属性和方法一样的命名方式。

     

    class Person {
      // 私有属性 
      _name: string;
      constructor() { }
    
      // 公共方法
      getName() {
        return this._name;
      }
      // 公共方法
      setName(name) {
        this._name = name;
      }
    }
    

    六、注释规范

    格式化插件推荐prettier
    6.1 单行注释

     

    // 设置标题
    setTitle()
    

    6.2 多行注释

     

    /*
     * 代码执行到这里后会调用setTitle()函数
     * setTitle():设置title的值
     */
    setTitle();
    

    6.3 函数 & 方法注释

     

    /**
     * 函数说明
     * @关键字
     **/
    

    常用关键字注释

    注释名语法含义示例
    @param@param {参数类型} 描述信息描述参数@param {String} name 传入名称
    @return@return {参数类型} 描述信息描述返回值@retun {Boolean} true: 可执行; false: 不可执行
    @author@author 描述信息描述作者@author 某某某 2018/04/24
    @example@example 示例代码演示函数的使用@example setTitle('啦啦啦');

    七、vue常用开发规范

    7.1 import

    import 应置于顶层, 引入组件名遵循大写驼峰式命名法。

     

    import ElInput form '***'
    import Emitter from '***'
    

    7.2 methods

    命名方法:同函数命名法
    命名建议:事件处理应以handle开头,如handleBlur
    其他建议:使用promiseasync/await处理异步逻辑,避免使用回调函数。

    7.3 少使用watch, 直接监听事件。

    7.4 合理利用style的scope属性,隔离页面样式。通用组件应避免使用scope.

    展开全文
  • js中变量、函数、属性参数命名规范

    千次阅读 2019-05-21 19:20:21
    1、区分大小写 2、第一个字符必须是字母、下划线( )或美元符号($) 3、其他字符可以是字母、下划线、美元符号或者数字
  • 命名规则: 只能由字母、数字、下划线、$组成; 必须以字母开头; 也可以以 “$” 和 下划线 开头(不推荐); 不能使用关键字和保留字 注:变量命名区分大小写 JavaScript中主要的关键字 关键字 描述 ...
  • JS函数定义及规范

    2020-12-17 21:40:15
    js中的函数 语法格式 第一种 function 函数名(形式参数列表){ 函数体 } 返回值类型不需要指定,可以返回任何类型的数据 函数必须调用才会执行 script的标签中,网页打开的时候遵循自上而下的原则 ...
  • https://www.cnblogs.com/Hsong/p/9016950.html 具体参照以上地址,由以上地址提供
  • 关于js中function的命名规则

    千次阅读 2018-05-23 16:53:40
    javascript:void(0)" onclick="addCart()" &gt; &lt;input style="background: url('${pageContext.request.contextPath}/images/product.gif') no-repeat scroll 0 -600px rgba(0, 0,...
  • 第一个单词应该用动词。
  • 命名函数表达式 命名函数表达式(NFE,Named Function Expression),指带有名字的函数表达式的术语。 eg:普通函数表达式: let sayHi = function(who) { alert(`Hello, ${who}`); }; 给它一个名字,就是命名函数...
  • JavaScript变量匈牙利命名法 匈牙利命名法语法: 变量名=类型+对象描述 类型指变量的类型 对象描述指对象名字全称或名字的一部分,要求有明确含义,命名要容易记忆容易理解。 提示: 虽然JavaScript变量表面上没有...
  • 总括: 函数创建的方式 1.声明式 - 有名函数(一种) 2.赋值式 - 匿名函数(三种) ...function 定义函数的关键字,createTable函数名称 ():参数,传递值,扩展函数的功能 创建表格的函数函数如果不调用,
  • 来源 |https://www.robinwieruch.de/javascript-naming-conventions今天跟大家分享的是JavaScript 命名约定示例介绍——它为...
  • 学习js的朋友一定要知道和注意,其实每种语言都有它的命名规则
  • Id 更加具体而且应该尽量少使用(例如, 页内书签),它是唯一的 阅读原文 结语 conclusion 本小节主要介绍了JavaScript中编程规范的8个点,文件夹项目命名规范,子项目目录名,javaScript文件名,css,less,sass,html,...
  • 英文原文:http://kangax.github.com/nfe/前言目前发现网上很少有人对命名函数表达式进去重复深入的讨论,正因为如此,网上出现了各种各样的误解,本文将从原理和实践两...
  • JavaScript变量命名规则

    2017-06-20 16:03:10
    良好的书写规范可以让你的JavaScript代码更上一个台阶,也更有利于团队的再次开发和阅读代码。 全名原则 变量名区分大小写,允许包含字母、数字、美元符号($)和下划线,但第一个字符不允许是数字,不允许包含...
  • 命名函数时,我从第二个单词开始把每个单词的第一 个字母写成大写形式(也就是所谓的驼峰命名法)。我这么做是为了能 够一眼看出哪些名字是变量,哪些名字是函数。 function convertToCelsius(temp) { var result...
  • 除非是通用的缩写,否则用描述性的名称,重要的是可读性而不是列宽问题。
  • js命名规则

    2018-07-19 14:48:20
    变量和函数为小驼峰法标识, 即除第一个单词之外,其他单词首字母大写( myFunction);
  • javascript函数 一、概念 函数:就是封装起来的可以重复被调用的代码块。 【在js中,函数是头等对象,因为它们可像任何其他对象一样具有属性、方法。区别在于函数可被调用function对象】 二、使用函数的优势 程序...
  • 本文将从原理和实践两个方面来探讨javaScript关于命名函数表达式的优缺点。 简单的说,命名函数表达式只有一个用户,那就是在Debug或者Profiler分析的时候来描述函数的名称,也可以使用函数名实现递归,但很快你就会...
  • js标识符命名规范

    千次阅读 2019-05-28 17:59:51
    js标识符命名规范js中所有的由我们自主命名的都可以称为标识符 例如:变量命,函数名,属性名都属于标识符 命名一个标识符需要遵守以下规范: 标识符中可以含有字母,数字,下划线,$ 标识符不能以数字开头 ...
  • 还有一种函数表达式不太常见,就是被括号括住的(function foo...如果function foo(){}是作为赋值表达式的一部分的话,那它就是一个函数表达式,如果function foo(){}被包含在一个函数体内,或者位于程序的最顶部...
  • javascript命名规则

    千次阅读 2016-12-09 10:41:12
    JavaScript命名规范 (2012-04-01 15:13:22) 转载▼ 标签: 杂谈 分类:javascript 转自http://blog.bingo929.com/dojo-javascript-style-guide.html 前言 良好的JavaScript...
  • JS命名规范

    千次阅读 2018-04-29 21:19:04
    基本规范sublime Text3请安装jshint插件以检查JS编写错误;安装教程:使用lint进行语法及风格校验异步加载文件命名require.ensure([],function(){ //异步加载内容 },'ensure/业务模块名_页面名_异步方法名_1...
  • JS中常量与变量以及命名规范

    万次阅读 2017-10-28 23:49:37
    顾名思义,变量即可变的量,在JS中我们使用var 关键词来定义一个变量,而变量存储的值可以改变的 值是可以改变的。 在ES6中定义变量使用的是let。 JS中变量本身没有什么意义,仅仅是一个名字而已变量只是一个无...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 81,758
精华内容 32,703
关键字:

js函数命名规范