初学者接触web前端须要注意什么？避免走上弯路

初学Web前端要注意什么？如何学好JS模块化编程？JavaScript是前端三要素之一，也是不少初学Web前端的人遭遇的第一条拦路虎。不少同窗表示JavaScript涵盖的知识点太多太复杂、应用也是五花八门彻底摸不着头脑。但只要咱们一点一点由基础到进阶的学习，就必定能学好JavaScript，接下来小编就给你们分享有关JavaScript模块化编程的知识。

模块是实现特定功能的一组方法，模块化是一种规范、一种约束，这种约束会大大提高开发效率。JS模块化思想是将每一个JS文件看做是一个模块，每一个模块经过固定的方式引入，而且经过固定的方式向外暴露指定的内容。

模块化须要实现的功能

1.解决命名冲突。当代码达到必定规模，功能不少的时，命名冲突就会出现，模块化能够很好的解决命名冲突的问题。

在这里小编建了一个前端学习交流扣扣群：132667127，我本身整理的最新的前端资料和高级开发教程，若是有想须要的，能够加群一块儿学习交流

2.实现依赖管理。当一个页面要加载多个JS而且他们之际有些还有依赖关系，这时候就须要慎重仔细的排列这些JS的顺序，以保证每一个组件都能正常运行，而模块化以后就不用为此多费心思。

3.提升复用性和代码可读性。一个功能为一个模块，每一个模块相互独立，互不影响，代码组件封装能够重复利用，去除这个模块不影响其它的。

JavaScript模块化发展

闭包与命名空间

这是最容易想到的也是最简便的解决方式，早在模块化概念提出以前不少人就已经使用闭包的方式来解决变量重名和污染问题。这样每一个JS文件都是使用IIFE包裹的，各个JS文件分别在不一样的词法做用域中，相互隔离，最后经过闭包的方式暴露变量。每一个闭包都是单独一个文件，每一个文件仍然经过script标签的方式下载，标签的顺序就是模块的依赖关系。

面向对象开发

这种方法只是闭包方式的小改进，约束js文件返回必须是对象，对象其实就是一些个方法和属性的集合。这样的优势：1)规范化输出，更加统一的便于相互依赖和引用;2)使用‘类’的方式开发，便于后面的依赖进行扩展。本质上这种方法只是对闭包方法的规范约束，并无作什么根本改动。

YUI

雅虎出品的一个工具，模块化管理只是一部分，其还具备JS压缩、混淆、请求合并(合并资源须要server端配合)等性能优化的工具，可谓是现有JS模块化的鼻祖。经过YUI全局对象去管理不一样模块，全部模块都只是对象上的不一样属性，至关因而不一样程序运行在操做系统上。

CommonJs

2009年Nodejs发布，Commonjs发布以后，就成了Node里面标准的模块化管理工具。同时Node还推出了npm包管理工具，npm平台上的包均知足Commonjs规范，随着Node与npm的发展，Commonjs影响力也愈来愈大，而且促进了后面模块化工具的发展，具备里程碑意义的模块化工具。

AMD和RequireJS

AMD是"AsynchronousModuleDefinition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。全部依赖这个模块的语句，都定义在一个回调函数中，等到全部依赖加载完成以后(前置依赖)，这个回调函数才会运行。

RequireJs是JS模块化的工具框架，是AMD规范的具体实现。可是有意思的是，RequireJs诞生以后，推广过程当中产生的AMD规范。RequireJs的优势：1)动态并行加载js，依赖前置，无需再考虑js加载顺序问题;2)核心仍是注入变量的沙箱编译，解决模块化问题;3)规范化输入输出，使用起来方便;4)对于不知足AMD规范的文件能够很好地兼容。

CMD和SeaJs

CMD规范由国内(阿里)诞生，借鉴了Commonjs的规范与AMD规范，在二者基础上作了改进。特色：1)define定义模块、require加载模块、exports暴露变量;2)不一样于AMD的依赖前置，CMD推崇依赖就近(须要的时候再加载);3)推崇api功能单一，一个模块干一件事。

SeaJs是CMD规范的实现，跟RequireJs相似，CMD也是SeaJs推广过程当中诞生的规范。CMD借鉴了不少AMD和Commonjs优势，一样SeaJs也对AMD和Commonjs作出了不少兼容。

ES6中的模块化

ES6规范中终于将模块化归入JavaScript标准，今后JS模块化被官方扶正，也是将来JS的标准。ES6中的模块化在Commonjs的基础上有所不一样，增长了关键字import、export、default、as、from，而不是全局对象。两者有两点主要的区别：1)CommonJS模块输出的是一个值的拷贝，ES6模块输出的是值的引用;2)CommonJS模块是运行时加载，ES6模块是编译时输出接口。