模块化在项目中十分的重要，一个复杂的项目肯定有很多相似的功能模块，如果每次都需要重新编写模块肯定既费时又耗力。但是引用别人编写模块的前提是要有统一的“打开姿势”，如果每个人有各自的写法，那么肯定会乱套，下面介绍几种JS的模块化的规范。

模块化进程一：script标签

这是最原始的 JavaScript 文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在 window 对象中，不同模块的接口调用都是一个作用域中，一些复杂的框架，会使用命名空间的概念来组织这些模块的接口。

缺点:
1、污染全局作用域
2、开发人员必须主观解决模块和代码库的依赖关系
3、文件只能按照script标签的书写顺序进行加载
4、在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪

包装对象

JS基于原型的程序
基本类型都有自己的包装对象：
String Number Boolean

1
2
3
4
5
6
7
8
9
10
11

var str = 'hello';
str.charAt(0);  //基本类型会找到对应的包装对象类型，然后包装对象把所有的属性和方法给了基本类型，然后包装对象消失
console.log(str.charAt(0)) //h
var str = 'hello';
str.number = 10;
console.log(str.number) //undefined
var str = 'hello';
String.prototype.number = 10;
console.log(str.number) //10

什么是面向对象编程

用对象的思想去写代码，就是面向对象编程
数组 Array 时间 Date

面向对象编程(OOP)的特点

抽象：抓住核心问题
封装：只能通过对象来访问方法
继承：从已有对象上继承出新的对象
多态：多对象的不同形态

对象的组成

方法（行为、操作）——函数：过程、动态的
属性——对象下面的变量：状态、静态的

javascript介绍

JavaScript操作DOM的本质是=获取+触发+改变
目的：就是用来操作内存中的DOM节点

变量

变量本质是一个空盒子，里面记录了一个内存地址，使能找到内存中的对象，保存了指向具体的实在的东西的地址
变量存在栈中，对象存在堆中
变量的意义：方便我们去操作对象

window作用域

只要在script标签中定义的变量，默认就在window的作用域之下
默认就是window这个对象里面写代码

数据类型

如何判断js中的数据类型：
typeof、instanceof、 constructor、 prototype方法比较

1. 前言

本文档的目标是使JavaScript代码风格保持一致，容易被理解和被维护。
虽然本文档是针对JavaScript设计的，但是在使用各种JavaScript的预编译语言时(如TypeScript等)时，适用的部分也应尽量遵循本文档的约定。

2. 代码风格

2.1. 文件

[建议] JavaScript 文件使用无 BOM 的 UTF-8 编码。
解释
UTF-8 编码具有更广泛的适应性。BOM 在使用程序或工具处理文件时可能造成不必要的干扰。
[建议] 在文件结尾处，保留一个空行。

2.2. 结构

2.2.1. 缩进

[强制] 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。
[强制] switch 下的 case 和 default 必须增加一个缩进层级。

1. 前言

文档目标是使CSS代码风格保持一致，容易被理解和被维护。
虽然本文档是针对CSS设计的，但是在使用各种CSS的预编译器(如less、sass、stylus等)

2. 代码风格

2.1. 文件

[建议] CSS 文件使用无 BOM 的 UTF-8 编码。
解释
UTF-8 编码具有更广泛的适应性。BOM 在使用程序或工具处理文件时可能造成不必要的干扰。

2.2. 缩进

[强制]使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。
示例

1
2
3
4

.selector {
    margin: 0;
    padding: 0;
}

1. 前言

文档的目标是使HTML代码风格保持一致，容易被理解和被维护。

2. 代码风格

2.1. 缩进与换行

[强制] 使用 4个空格做为一个缩进层级，不允许使用 2个空格 或 tab字符。
[建议] 每行不得超过 120个字符。
解释
过长的代码不容易阅读与维护。但是考虑到 HTML 的特殊性，不做硬性要求。

2.2. 命名

[强制] class 必须单词全字母小写，单词间以 - 分隔。
[强制] class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。
示例

1
2
3
4

<!-- good -->
<div class="sidebar"></div>
<!-- bad -->
<div class="left"></div>

[强制] 元素 id 必须保证页面唯一。
解释
同一个页面中，不同的元素包含相同的 id，不符合 id 的属性含义。并且使用 document.getElementById 时可能导致难以追查的问题。