行业资讯
web前端的模块化开发是什么?
    通过本文,可以知道流行的前端开发模式,模块化(开发)规范是什么?Webpack构建工具为什么会出现?起到什么作用?
 
    随着Web技术的应用越来越复杂和庞大,应用的范围也越来越广,从PC端扩展到移动端。直接编写JavaScript、CSS、HTML在面临大型应用的时候已经力不从心,因此前端技术的新思想与框架不断涌现。
 web前端的模块化开发是什么?
    模块化开发
 
    模块化开发目前是当下比较流行的前端开发思想。
 
    模块化将代码分为不同的模块进行开发和维护。其发展如下:
 
    根据功能不同,把代码通过函数或者文件进行划分
 
    通过命名空间的不同来区分,例如很多插件会用到window.$来作为命名空间。
 
    IIFE模式:通过闭包来达到某些变量的私有化
 
    模块化规范
 
    1.CommonJS规范,以同步方式去加载模块
 
    接口:module.exports属性
 
    导入:require(模块)
 
    代码必须必须通过工具转换成标准的ES5
 web前端的模块化开发是什么?
    2.AMD规范,以异步的方式去加载模块,require.js是一个AMD规范的模块加载器
 
    接口:define('module',['dep'],function(dep){returnexports;});
 
    导入:require(['module'],function(module){});
 
    3.CMD规范
 
    CMD模块的加载是异步的。CMD结合了CommonJS和AMD规范的特点。在Sea.js是CMD规范的模块加载器
 
    接口:define();
 
    导入:require();
 
    4.ES6模块化
 
    ES6在语言的层面上实现了模块化,是欧洲计算机制造联合会ECMA提出的JavaScript模块化规范
 
    接口:export{};
 
    导入:import{x,y}from();
 
    ES6由于浏览器中的兼容性问题,必须通过工具转换成标准的ES5后才能正常运行
 web前端的模块化开发是什么?
    构建工具Webpack
 
    Webpack这类工具的使用,解决了ES6在浏览器中的兼容性问题。
 
    构建就是把源代码转换成浏览器可执行JavaScrip、CSS、HTML代码,并进行优化、打包。
 
    Webpack通过递归的方式寻找出入口文件的所有依赖,并打包到目标文件中。支持模块化规范ES6、CommonJS、AMD。