JS模块与规范精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/chenyue19930712/article/details/103677220

js语法规范

一、Js模块化规范

1.commonjs规范

2.前端模块的规范是Amd规范，代表就是requirejs，他是异步的，很多前端框架都用amd规范如 jq angular 等

3.es6 用的最多

二、模块化的操作

1.commonjs的操作

所有的模块化都是两个方向，暴露模块接口和引入模块
module.exports={} 暴露的是一个叫exports的对象
require() 引入一个模块
这是后台的规范，在nodejs环境可以直接运行，在客户端不能直接运行。需要对文件打包解析 webpack gulp

2.前端模块

amd是前端模块化的一种规范，全称Asynchronous Module Definition，异步模块加载机制，所以需要按照这个规范去定义模块和使用模块
1.require()提供了一个全局的方法，叫define() 用来定义模块

这里的定义模块分为俩种：1.不依赖其他模块的定义 2.依赖其他模块的定义

不依赖其他模块
依赖其他模块

在这里插入图片描述

使用这些模块的话，需要配置一个主js文件，主文件里有俩部分，一部分是配置模块，一部分是使用模块

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了

ES5 只有两种声明变量的方法：**var命令和function**命令。

ES6中添加了**let,const命令,import命令和class**命令。所以，ES6 一共有 *6种* 声明变量的方法。

export

export用于输出模块的对外接口。

import

import命令用于引入其他模块提供的功能接口

import {}中的变量名是export {}的key值

变量名是export default输出import不需要{}

export能直接导出变量表达式，export default不行。

1. 使用{}导出模块
export { Hello, World } from './modules'
// 相当于
import { Hello, World } from './moudles'
export { Hello, World }

2. 改写模块的名字
export { Hello as Person } from './modules'
// 相当于
import { Hello as Person } from './modules'
export { Person }

3. 改写默认export default模块的名字
export { default as Person } from './modules'
// 相当于
import Person from './modoules'  // ./modules里的模块是通过export default导出的
export { Person }

三、命名规范

驼峰式命名法介绍

驼峰式命名法由小(大)写字母开始，后续每个单词首字母都大写。
按照第一个字母是否大写，分为：
① Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfo
② Camel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo

变量

命名方法：小驼峰式命名法
命名规范：前缀应当是名词。(函数的名字前缀为动词，以此区分变量和函数)
命名建议：尽量在变量名字中体现所属类型，如:length、count等表示数字类型；而包含name、title表示为字符串类型
```
// 推荐
var maxCount = 10;
var tableTitle = 'LoginTable';
// 不推荐
var setCount = 10;
var getTitle = 'LoginTable';
```

函数

命名方法：小驼峰式命名法
命名规范：前缀应当是名词。(函数的名字前缀为动词，以此区分变量和函数)
命名建议：参考下表

在这里插入图片描述

常量

命名方法：名称全部大写
命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词
```
var MAX_COUNT = 10;
var URL = 'http://www.xxx.com';
```

构造函数

命名方法：大驼峰式命名法，首字母大写

function Student(name) {
    this.name = name;
}
var st = new Student('tom');

类的成员

公共属性和方法：跟变量和函数的命名一样
私有属性和方法：前缀为_(下划线)，后面跟公共属性和方法一样的命名方式

function Student(name) {
    var _name = name; // 私有成员 
    // 公共方法
    this.getName = function () {
        return _name;
    }
    // 公共方式
    this.setName = function (value) {
        _name = value;
    }
}
var st = new Student('tom');
st.setName('jerry');
console.log(st.getName()); // => jerry：输出_name私有变量的值

变量赋值时的逻辑操作

逻辑操作符 || 和 && 也可被用来返回布尔值。
如果操作对象为非布尔对象，每个表达式将会被自左向右地做真假判断
基于此操作，最终总有一个表达式被返回回来，这在变量赋值时，可以用来简化代码

//不推荐
  if(!x) {
        if(!y) {
              x = 1;
        } else {
              x = y;
        }
  }
//推荐
    x = x || y || 1;
//这一小技巧经常用来给方法设定默认的参数
    a = a || 1;
    b = b || 1;

避免全局变量污染命名空间

全局变量定义：

在任何函数外面定义var语句：var a = ‘value’;
直接添加属性在全局对象上：window.a = ‘value’;
直接使用未经声明的变量：a = ‘value’;

避免方式：

采用闭包的立即执行的方式，不要污染全局变量；

（funcction(){        
        //  to do ...    
}）(window)

定义一个全局变量的命名空间
为了避免全局变量的污染，尽可能创建一个全局变量，让其他对象和函数存在其中

var variate={
          maxCount :'xxx',
          minCount :'xxx',
          canRead :function(){
    }
}

注意：即使包在函数中的未经声明的变量，在函数执行过后也会变成全局变量

function XX(){
      name = "abc"
};
console.log("----"+window.name)   //----


function XX(){
      name = "abc"
};
XX();
console.log(window.name)   //abc


function XX(){
        var name = "123ed"
};
XX();
console.log("----"+window.name)     //----

在匿名自执行函数中使用严格模式

(function(){
      'use strict';

      $(function() {
             //  to do ... 
        });
}());

避免声明全局变量，尽可能在函数体顶部声明局部变量

不要使用 eval()语句

不要使用 eval()语句,因为它存在安全隐患，导致脚本注入攻击，并且在不同的浏览器引擎下还有效率上的差异

不要在循环里面进行DOM操作

//推荐
var htmlString = "";

for(var i =0; i<length;i++){
    htmlString += html;
}

$(“.class”).append(htmlString);

//不推荐
for(var i =0; i<length;i++){
    $(“.class”).append(html);
}

使用事件委托

对于多个同性质同辈节点，避免逐个进行事件绑定。而应该利用冒泡原理，将事件委托给父节点。
事件委托要接近事件触发节点，避免将所有事件冒泡委托给body节点

//推荐
$("table").on("click","td",function(){

})

//不推荐
$("td").on("click",function(){

})
//jQuery on() 方法: $(selector).on(event,childSelector,data,function)