为什么需要web模块

这是原文的地址:why web modules?

这篇文章是摘自requirejs官网里的一篇文章,个人觉的从这里可以找出前端为什么需要引入模块思想

我们先来看看,没引入模块之前,将要面临的问题: web 站点向 web app发展 代码越来越大 构建越来越困难 开发者想分离JS文件 开发者想优化代码以提高http性能

这些方法都可以加载指定的JS文件,理想情况下，我们可以使用commonJS语法来加载JS,因为以后越来越多的库使用它,而且我们想我们的代码可以重用.我们还需要某种语法，将允许装载今天存在纯JavaScript文件 - 开发人员不应该重写他们的JavaScript来获取脚本加载的好处。

但是我们需要一个在浏览器端运行的很好的加载库,commonJS require()是一个同步方法,默认是立即返回的,但是这个在浏览器内是不可能的.

异步与同步

下面的例子表明异步与同步的一个区别

var person = require(module/person);

function Manager(){

 this.reports = [];

Manager.prototype = new person; // -- browser is error

假如这个在NodeJS里运行是没问题的,模块会同步执行返回,但是在浏览器端,脚本显然会异步返回,这时候调用它的实例就会报错,那么我们怎么处理浏览器端的异步呢?

XHR 加载脚本

我们可以临时使用XMLHttpRequest(XHR)来加载脚本--通过正则获取到上面内容中的的模块,然后利用eval()或者script元素来把XHR返回的内容添充到text属性中或者eval执行它.

使用eval方法是不规范的:

开发者从一开始就被教导不能使用eval 有些执行环境不允许使用eval eval很难调试,目前只有firbug,chrome提供的inspector有选项来指定eval文本的路径 eval上下文很难跨浏览器,也许只有在ie中使用execScript方法,这些就会导致代码块的差异

使用script标签来包含XHR的内容也是不对的:

当调试出现bug的时候，出现的错误代码行号跟原始文件行号不一致

使用XHR来加载文件本身就有跨域的限制,虽然现在的浏览器已经支持跨域请求,但是IE是通过使用XDomainRequest对象,显然不规范导致的代码越多就越容易出问题;而且为了保证跨域访问被对允许,必须发送标准的请求头.

Dojo目前就是以XHR为基础然后使用eval来加载模块的,针对跨域使用xdomain来处理,所以XHR加上eval是可以用来加载模块的,只是这样对开发者来说负担太大了.

如果我们想创建一个模块加载器的话,其实我们可以做的更好的

Web Worker 加载脚本

web worker 有可能是加载JS模块的另一种方法, 但是:

不能跨浏览器 web worker是以消息机制来通讯的,在worker线程内的JS是不能访问DOM的,所以只能通过eval或者script标签来解析内容,这样的话就会出现上面XHR方式带来的问题 Document.write 加载脚本

document.write能够用来加载脚本,因为它支持跨域,而且能够正常的显示脚本,方便调试

不过它不能立即执行,虽然理想情况下能保证依赖全部加载,但是只能在脚本执行完之后才能访问到里面的JS代码

而且document.write在页面加载完成之后就不会再执行,这样就不能实现按需加载,通常只在用户需要某个功能的时候再加载JS是能够有效的提高网站性能

Head.appendChild 加载脚本

先看下面的代码片段:

var script = document.createElement(script);

script.src = feenan.js;

document.getElementsByTagName(head)[0].appendChild(script);

head.appendChild相比于上面的方式来说有一点复杂,不过这只是基本的想法,跟document.write相比,它不会阻塞页面渲染而且页面加载完之后还能继续调用

不过也有一个致命的问题,跟同步相比不能立马执行完,理想的情况是,模块加载有保证所有的依赖在执行脚本之前就加载完毕.

了解了上面的几种方案,都有几个相同的问题,所以我们需要自己构建模块加载,处理依赖关系,像下面这样的:

defind(

 // 模块名称

 feenan,

 // 模块依赖

 [zepto], 

 // 传递依赖参数

 function($){

 return {

 init: function(){

 console.log(hello feenan!);

上面的是requirejs的语法,假如只是想请求简单的JS文件,可以像下面这样写,不需要define关键字.

require([zepto], function($){

 // 此处就可以调用zepto的方法了,$只是别名

选择这种语法是因为这比较简单，并且允许使用像head.appendChild那样来加载JS

浏览器端的commonJS跟上面不一样的是,需要额外对现有的代码包装一层,这个会影响调试

想了解更多的关于AMD规范的模块机制，可以参考这篇文章,why AMD 有空再来篇中文版的!

SpringBoot2.x入门：引入web模块 这篇文章是《SpringBoot2.x入门》专辑的「第3篇」文章，使用的SpringBoot版本为2.3.1.RELEASE，JDK版本为1.8。 主要介绍SpringBoot的web模块引入，会相对详细地分析不同的Servlet容器（如Tomcat、Jetty等）的切换，以及该模块提供的SpringMVC相关功能的使用。
前端培训-中级阶段(48）- Node10.x之HTTP模块，WEB开发框架介绍 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。 HTTP模块、WEB开发框架介绍、URL & querystring