首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Require.Js 前端模块化

前端模块化 (Require.js) ? 为什么要用 前端模块化 早期,js代码量小, 所有Javascript代码可以都写在一个文件里面,只要加载一个js文件就够了。...插件引入也会有依赖关系: 为了解决这两个问题 : 实现js文件的异步加载,避免网页失去响应; 管理模块之间的依赖性,便于代码的编写和维护。...通用模块定义 sea.js 依赖延迟:在需要的时候才去加载依赖项 模块化的实现(require.js) 下载后,把它放在目录下面,就可以加载了  <script src="<em>js</em>/require.<em>js</em>.../modules/a"]) 如果设置了data-main属性,那么模块的查找,会以data-main指定的文件的路径作为基础(几乎不用) data-main是一个属性,是引入require.js的script...文件路径 以 http:// 或者 https:// 开头的 第三方插件使用 支持模块化模块化语法引入 不支持模块化 没有依赖项,没有导出项,require直接引入 有依赖项,没有导出项 shim属性中进行配置

3.8K40

前端模块化-总结_前端模块化规范

先说说什么是模块化,就是将独立的功能代码封装成一个独立的文件,其他模块需要使用,在进行引用。 模块化有利于代码的拆分和架构上的解耦,模块化在服务端领域已经早已成熟,nodejs 也已经支持模块化。...因此前端早早就有了模块化技术,可每天醒来前端就多一个名词多一个框架的,发展实在迅猛,就前端模块化这些年的积累就有好几种,我们依次来看看。...(引用阮一峰老师的描述) 举个栗子看看模块化后的文件该怎么写 // util\index.js let name = 'now'; let age = 18; let fun = () => {...个人认为,ES6模块化是以后的主流。...还是上面的栗子,用ES6模块化改写,改动上并不大,几个关键字做下修改即可 // util/index.js let name = 'now'; let fun = () => { name =

61520
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    前端模块化

    前端模块化: 在前面学习中,我已经用了大量的篇幅解释了为什么前端需要模块化。 而且我也提到了目前使用前端模块化的一些方案:AMD、CMD、CommonJS、ES6。...在ES6之前,我们要想进行模块化开发,就必须借助于其他的工具,让我们可以进行模块化开发。 并且在通过模块化开发完成了项目后,还需要处理模块间的各种依赖,并且将其进行整合打包。...这就是webpack中模块化的概念。 打包如何理解呢? 理解了webpack可以帮助我们进行模块化,并且处理模块间的各种复杂关系后,打包的概念就非常好理解了。...所以grunt/gulp也被称为前端自动化任务管理工具。 我们来看一个gulp的task 下面的task就是将src下面的所有js文件转成ES5的语法。 并且最终输出到dist文件夹中。...grunt/gulp更加强调的是前端流程的自动化,模块化不是它的核心。 webpack更加强调模块化开发管理,而文件压缩合并、预处理等功能,是他附带的功能。

    22000

    深圳Web前端学习:js中的模块化--【千锋】

    深圳Web前端学习:js中的模块化--【千锋】 0.前言 我们知道最常见的模块化方案有CommonJS、AMD、CMD、ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的...1.script标签引入 最开始的时候,多个script标签引入js文件。但是,这种弊端也很明显,很多个js文件合并起来,也是相当于一个script,造成变量污染。.../a');     //要用到a,于是引入了a     //做一些和模块a有关的事情 }); 复制代码 对于b.js依赖a.js //a.js define(function(require, exports...他最终会被js引擎编译,也就是可以实现编译后就引入了模块,所以ES6模块加载是静态化的,可以在编译的时候确定模块的依赖关系以及输入输出的变量。...假设我们定义两个js:app.js是主入口文件,a.js、b.js是app依赖文件,用的是COMMONJS规范 webpack首先会从入口模块app.js开始,根据引入方法require把所有的模块都读取

    66630

    webpack前端模块化

    模块化什么是模块呢? 举个例子:一个公司需要正常运转,就有市场部,技术部,人事部等等,这每个部门就相当于一个模块,在前端项目中也就有比如专门网络请求的模块,错误处理的模块,专门渲染的模块。...传统做法会引入多个js脚本,它们共处于全局作用域下,就容易导致全局作用域变量冲突(例如同名变量冲突),而发生一些不可预测的事情。.../moduleA.js"> <script src="....<em>前端</em><em>模块化</em>主要解决了两个问题: “命名空间冲突”,“文件依赖管理” 。 和介绍webpack又有什么关系呢? 在webpack中,一切皆模块。...我们在<em>模块化</em>开发的时候,通常会使用`ES Module或者CommonJS规范导出或<em>引入</em>依赖模块,webpack打包编译的时候,会统一替换成自己的webpack_require`来实现模块的<em>引入</em>和导出,

    33130

    前端模块化开发

    其实对前端模块化开发的接触时间并不多,很多见解都是别人的,或者是偏的, 还是乐意记录下来,谁让我一天一个念头 说到前端模块化开发,其实是说 javascript 模块化开发。...目前,大众讲到的 javascript模块化规范 有3种,CommonJS、AMD(异步模块定义)、CMD(通用模块定义) CommonJS CommonJS在 node 端模块采用的规范。...当执行到这一段代码的时候, 浏览器会先 加载 math 模块,在math模块加载成功后, 再执行后面的回调函数 math.add(2,3) require.js 说道AMD 就不得不提 require.js...首先下载最新require.js ,然后在 html 底部写上如下代码: data-main...(至少我是通过 react.js 认识到 webpack 的) react.js 可以说是前端(浏览器)项目,可是在编程风格上,确实不折不扣的 CommonJS 风格。

    1.2K00

    前端工程模块化

    前端工程\模块化本篇文章,学习记录于:尚硅谷,紧接前文:邂逅Node.JS的那一夜→博客 无论是前端、后端、甚至非编程领域都有模块化的概念,只是不同的领域叫法不同,不过,新技术的产生一定是有原因的:模块化的概念为什么需要模块化技术...这样的设计使得模块可以在不同的项目中重复使用;实现代码按需加载、提高团队协作、代码灵活性、降低代码复杂性… … 等: 模块化使前端更易于管理、扩展和维护;模块化技术发展前端模块化技术的发展历史经历了多个阶段...;于是官方在 ES6 引入了 ESModule 模块化规范来解决这些问题:ESModule 模块化规范是一种静态的模块化方案:它允许开发者将代码分割成小的、独立的模块,每个模块都有自己的作用域,ESModule...前端页面引入:最终browserify 包管理工具生成的: main.js 主文件模块入口ESM 引入NPM包:Demo: 使用 NPM 安装 Jquery包,并使用Jquery修改页面背景颜色;resource/JS/mapp.js: 麻烦:前端工程化之后,代码更新也需要随之进行更新

    8210

    前端模块化理解

    发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可;如今CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端(表单验证等),随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷...,前端代码日益膨胀,这时候JavaScript作为嵌入式的脚本语言的定位动摇了,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用说模块(module)了,JavaScript...规范形成的过程是痛苦的,前端的先驱在刀耕火种、茹毛饮血的阶段开始,发展到现在初具规模,简单了解一下这段不凡的历程。...,第一个流行的模块化规范却由服务器端的JavaScript应用带来,CommonJS规范是由NodeJS发扬光大,这标志着JavaScript模块化编程正式登上舞台。...requireJS主要解决两个问题: 一,多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器; 二,js加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长。

    59820

    前端模块化规范

    AMD / CMD 有什么异同 ESM 是什么 模块化解决了什么问题/痛点 回答关键点 CommonJS AMD CMD UMD ESM CommonJS1: 主要是 Node.js...为什么需要模块化模块化规范 模块化可以解决代码之间的变量、函数、对象等命名的冲突/污染问题,良好的模块化设计可以降低代码之间的耦合关系,提高代码的可维护性、可扩展性以及复用性。...各种模块化规范的细节 2.1 CommonJS CommonJS 主要是 Node.js 使用,通过 require 同步加载模块,exports 导出内容。...官方模块化规范,现代浏览器原生支持,通过 import 加载模块,export 导出内容。...模块化与工程化:webpack webpack 同时支持 CommonJS、AMD 和 ESM 三种模块化规范的打包。根据不同规范 webpack 会将模块处理成不同的产物。

    73911

    js 模块化发展

    从语言层面到文件层面的模块化 从 1999 年开始,模块化探索都是基于语言层面的优化,真正的革命从 2009 年 CommonJS 的引入开始,前端开始大量使用预编译。...这篇文章所提供的模块化历史的方案都是逻辑模块化,从 CommonJS 方案开始前端把服务端的解决方案搬过来之后,算是看到标准物理与逻辑统一的模块化。但之后前端工程不得不引入模块化构建这一步。...但文章中的 JS模块化还不等于前端工程的模块化,Web 界面是由 HTML、CSS 和 JS 三种语言实现,不论是 CommonJS 还是 AMD 包括之后的方案都无法解决 CSS 与 HTML 模块化的问题...对于 css 模块化,目前不依赖预编译的方式是 styled-component,通过 js 动态创建 class。而目前 css 也引入了与 js 通信的机制 与 原生变量支持。...Js 模块化的目的是支持前端日益上升的复杂度,但绝不是唯一的解决方案。

    2.2K20

    前端工程模块化

    模块化的概念 为什么需要模块化技术: 随着 Web 技术的发展,各种交互以及新技术等使网页变得越来越丰富,前端工程师登上了舞台 同时也使得我们前端的代码量急速上涨、复杂性在逐步增高,越来越多的业务逻辑和交互都放在...这样的设计使得模块可以在不同的项目中重复使用; 实现代码按需加载、提高团队协作、代码灵活性、降低代码复杂性… … 等: 模块化使前端更易于管理、扩展和维护; 模块化技术发展 前端模块化技术的发展历史经历了多个阶段...; 于是官方在 ES6 引入了 ESModule 模块化规范来解决这些问题: ESModule 模块化规范是一种静态的模块化方案: 它允许开发者将代码分割成小的、独立的模块,每个模块都有自己的作用域,ESModule...前端页面引入:最终browserify 包管理工具生成的: main.js 主文件模块入口 ESM 引入NPM包: Demo: 使用 NPM 安装 Jquery包,并使用Jquery修改页面背景颜色; resource/JS/mapp.js: 麻烦:前端工程化之后,代码更新也需要随之进行更新

    7910
    领券