本文为我之前总结的笔记,因为内容在面试中问得比较多,因而搬运过来,作为面试系列的文章之一。
我们知道最常见的模块化方案有CommonJS、AMD、CMD、ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的,所以有时候导致依赖还没加载完毕,同步的代码运行结束;CommonJS规范一般用于服务端,同步的,因为在服务器端所有文件都存储在本地的硬盘上,传输速率快而且稳定。
我们来说全局配置,我们知道导入require.js之后会设置data-main属性来执行入口文件,然后再入口文件中进行require的配置。
在javascript中,我们把比较复杂的都是用模块化,今天我们就来了解一下require.js来实现模块化开发
其实对前端模块化开发的接触时间并不多,很多见解都是别人的,或者是偏的, 还是乐意记录下来,谁让我一天一个念头 说到前端模块化开发,其实是说 javascript 模块化开发。 目前,大众讲到的 javascript模块化规范 有3种,CommonJS、AMD(异步模块定义)、CMD(通用模块定义)
对于web项目来说,打交道的不仅仅有后台,前台页面也是少不了的,而前台的页面js也常常是我们后台程序员必须要使用的语言, 今天说下项目中的js的组织方式。
相对于其他静态语言,JS最大缺陷就是天生不具有模块化,没有语言层面的命名空间的概念。问题如下:
1、为什么需要模块化 在JavaScript发展初期就是为了实现简单的页面交互逻辑,网页结构并不复杂,早期简单的网页结构是类似这样的: <!DOCTYPE html> <html> <head> <title></title> <link rel="dns-prefetch" href="xxx.css"> <script type="text/javascript" src="xxx.js"></script> ... </head> <body> ... </b
随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作、模块复用、单元测试等等一系列复杂的需求
javascript语言实现,ES6规范(使用babel编译器将es6转换为es5,webpack只支持部分es6):
前端的模块系统经历了长久的演变,对应的模块打包方案也几经变迁。从最初简单的文件合并,到AMD 的模块具名化并合并,再到browserify将CommonJS 模块转换成为浏览器端可运行的代码,打包器做的事情越来越复杂,角色也越来越重要。 在这样一个竞争激烈的细分领域中,webpack 以极快的速度风靡全球,成为当下最流行的打包解决方案,并不是偶然。它功能强大、配置灵活,特有的code spliting方案正戳中了大规模复杂Web 应用的痛点,简单的loader/plugin 开发使它很快拥有了丰富的配套工具
答:因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱了套!
webpack是前端打包工具,是大前端自动化工厂的重要组成部分,webpack的主要是打包,webpack作为自动化工具链的一部分集成更大的工具系统,而不是将一切需求的实现都寄望于webpack。
今天继续关于Go开发经验的分享,这次的主题是关于Go的交叉编译和条件编译,伴随着我对自己打不过、惹不起的壕同事小张还有运维们的碎碎念。
距离第八代酷睿移动处理器发布仅6个月,英特尔再次举办发布会,推出了第九代酷睿桌面处理器。
在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可;如今CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端(表单验证等),随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀,这时候JavaScript作为嵌入式的脚本语言的定位动摇了,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用说模块(module)了,JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码。
先说说什么是模块化,就是将独立的功能代码封装成一个独立的文件,其他模块需要使用,在进行引用。
这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战。 我采用的是一个非常流行的库require.js。 一、为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载。下面的网页代码,相信很多人都见过。 <script src="1.js"></script> <script src="2.js"></scrip
最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载。下面的网页代码,相信很多人都见过。
这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战。 我采用的是一个非常流行的库require.js。 一、为什么要用require.js? 最早的
简介 在最开始学习前端的时候只需要一个js文件就能玩转一个小的练手应用,但是随着自己不断的学习,ajax、jQuery等广泛应用,使得我们的代码量变得巨大,代码变得格外的混乱。现在迫切的需要我们将大段的代码分离开来。 前端最开始并没有像java中package概念以及import那样的引包工具。JavaScript源生代码是在ES6的时候才正式的引入import这个API,来调用其他文件。在这之前也同样出现了很多社区来实现模块化开发。 ---- 发展历程 注意下面会讲历史上面出现的一些类库,有一些现在已经没
requireJS(http://www.requirejs.cn/)是一个JavaScript模块加载器。它非常适合在浏览器中使用,使用RequireJS加载模块化脚本将提高代码的加载速度和质量。
早期的javascript版本没有块级作用域、没有类、没有包、也没有模块,这样会带来一些问题,如复用、依赖、冲突、代码组织混乱等,随着前端的膨胀,模块化显得非常迫切。
对每日A股数据取样,提取出包括时间序列类型指标,非时间序列类型指标以及股票分类属性指标;利用所提供的指标来预测T -1日的个股收益。
最近刚做了一个微信公众号H5项目,里面包含一个分享到朋友圈和分享给好友的功能。配置白名单以及公众号js安全域名这些就不赘述了,接下来简单介绍下实现这个功能的几个前端步骤
由于CommonJS和AMD都十分流行,但似乎缺少一个统一的规范。于是,UMD(通用模块规范)出现了,它可以同时支持这两种风格。
从jq官网down下最新的未压缩版代码并打开后,首先看下整体,这就是一个大型的自执行的匿名函数:
该文介绍了如何使用modJS来加载模块,并解决了一些常见的问题。
Undefined、Null、Boolean、Number和String,Object
最近在B乎看到了这么一个问题,能不能通俗地讲 Vite 到底是用来干嘛的,一开始觉得这个问题没什么意思,因为 Vite 这个话题有太多的人讲了。
模块化开发就是封装细节,提供使用接口,彼此之间互不影响,每个模块都是实现某一特定的功能。
近期把团队的项目构建迁移到fis3,同时把模块加载器也由之前的requirejs切换到了modJS。
模块化机制让我们能够把代码拆分成多个模块(文件),而编译时需要知道依赖模块的确切类型,那么首先要找到它(建立模块名到模块文件路径的映射)
理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。,require.js是否能够加载非规范的模块呢?回答是可以的。这样的模块在用require()加载之前,要先用require.config()方法,定义它们的一些特征。举例来说,underscore和backbone这两个库,都没有采用AMD规范编写。如果要加载它们的话,必须先定义它们的特征。shim属性,专门用来配置不兼容的模块。
本文包含两部分,第一部分通过简明的描述介绍什么是 CommonJS、AMD、CMD、UMD、ES Module 以及它们的常见用法,第二部分则根据实际问题指出在正常的 webpack 构建过程中该如何指定打包配置中的模块化参数。
通常我们写了一套自适应的 web 程序,想在多种环境中使用.比如 app 里,微信小程序里,各种 app 分享中, 假如只是能使用 app 浏览,问题不大,但是要在被嵌入 app 里面和 app 本身交互,就要做各种折腾, 如是就有了本文.
rollup.js是一个模块打包工具,可以使项目从一个入口文件开始,将所有使用到的模块文件都打包到一个最终的发布文件中,Rollup极其适合构建一个工具库,Vue.js源码就是通过Rollup打包构建的。
作为前端开发,模块化我们已经耳熟能详,我们平时接触到的 ES6 的 import,nodejs中的require他们有啥区别?
本文示例仓库地址: https://github.com/liuchenyang0515/Library_pack
webpack 命令可以在 package.json 中的 script 字段中添加命令,再使用 npm 执行:
今天的主要工作都在用react.js写一些前端界面,中间遇到了一些问题,这里解决这些问题的过程记录一下。 使用echarts图表组件 由于项目比较老旧,并没有使用webpack、gulp之类的前端编译工具进行编译,而是直接将依赖的javascript库引入,如下所示: <body> <script type="text/javascript" src="${ctx}/script/lodash/lodash.min.js"></script> <sc
CommonJS API定义很多普通应用程序(主要指非浏览器的应用)使用的API,从而填补了这个空白。 它的终极目标是提供一个类似Python,Ruby和Java标准库。 这样的话,开发者可以使用CommonJS API编写应用程序,然后这些应用可以运行在不同的JavaScript解释器和不同的主机环境中。
如果你是 JavaScript 的新手,一些像 “module bundlers vs module loaders”、“Webpack vs Browserify” 和 “AMD vs.CommonJS” 这样的术语,很快让你不堪重负。
UMD规范,就是所有规范里长得最丑的那个,没有之一!!!它是为了让模块同时兼容AMD和CommonJs规范而出现的,多被一些需要同时支持浏览器端和服务端引用的第三方库所使用。UMD是一个时代的产物,当各种环境最终实现ES harmony的统一的规范后,它也将退出历史舞台。
ES6初学者,通过阅读本文可对ES6知识点有个大体的概念,强烈建议阅读阮一峰大大的ES6入门。
洛伊安妮·格罗纳女士所著的《学习JavaScript数据结构与算法》第三版于2019年的5月份再次刊印发行,新版内容契合当下,实为JavaScript开发人员的必备之佳作。有幸重读此版,与诸君分享共勉。
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第30天,点击查看活动详情
领取专属 10元无门槛券
手把手带您无忧上云