本文将演示如何合并与压缩一个基于RequireJS的项目。本文中将用到苦干个工具,这其中就包括Node.js。 因此,如果你手头上还没有Node.js可以点击此处下载一个。 动机 关于RequireJS已经有很多文章介绍过了。这个工具可以将你的JavaScript代码轻易的分割成苦干个模块(module)并且保持你的代码模块化与易维护性。这样,你将获得一些具有互相依赖关系的JavaScript文件。仅仅需要在你的HTML文档中引用一个基于RequireJS的脚本文件,所有...
无论简单还是复杂的Web应用,都由一些HTML、JavaScript、CSS文件组成。通常开发者会通过JQuery、Knockout、Underscore等等这样的第三方JavaScript框架来提高开发速度。由于这些JavaScript框架都针对特定的用途开发而且已经得到了“验证”,所以直接使用它们就比自己从头实现所需要的功能显得更为合适。然而,伴随着应用的复杂度不断上升,写出干净、低耦合、可维护的代码变得越来越重要。在这篇文章里,我将解释 RequireJS框架如何...
为什么学习RequireJS? 像我这种菜鸟,会提到海量文章里提到的AMD、JS模块化编程、异步... ... 等等 RequireJS会让你以不同于往常的方式去写JavaScript。你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系。 RequireJS是一个Javascript 文件和模块框架,它可以帮我们去管理js代码(我的理解)。 深入学习,我们便会被迫接受一系列的名词:data-main、require、define、baseUrl、paths、shims、...
在项目使用了AngularJS框架,用RequireJS做异步模块加载(AMD),在做文件合并压缩时,遇到了一些坑,有些只是解决了,但不明白原因。 那些坑 1. build.js里面的paths必须跟main.js里面的保持一致。 这个build.js就是r.js使用的配置文件,而main.js就是RequireJS的main文件。在合并压缩时候,build.js文件里面也需要写paths,而且还是跟main.js一样,我很奇怪为什么就不能识别main里面的require.config的paths,省得合并的时候还要...
本文采取循序渐进的方式,从理论到实践,从RequireJS官方API文档中,总结出在使用RequireJS过程中最常用的一些用法,并对文档中不够清晰具体的内容,加以例证和分析,分享给大家供大家参考,具体内容如下 1. 模块化 相信每个前端开发人员在刚开始接触js编程时,都写过类似下面这样风格的代码:var a = 1;var b = 2;var c = a * a + b * b;if(c> 1) {alert('c > 1');}function add(a, b) {return a + b;}c = add(a,b);请点击这些代码...
项目中大都使用模块化开发,requireJS作为AMD模块开发的典范,所以有必要学习下。通过一步步利用requireJS编写demo,从而学习requireJS的一个整体开发流程以及自我使用requireJS的一些感受。 AMD:一种基于模块的异步加载JavaScript代码的机制,它推荐开发人员将JavaScript代码封装进一个个模块,对全局对象的依赖变成了对其他模块的依赖,无须再声明一大堆的全局变量。通过延迟和按需加载来解决各个模块的依赖关系。模块化的JavaS...
本文实例讲述了seajs和requirejs模块化。分享给大家供大家参考,具体如下: 如今,webpack、gulp等构件工具流行,有人说seajs、requirejs等纯前端的模块化工具已经被淘汰了,我不这么认为,毕竟纯前端领域想要实现模块化就官方来讲,还是有一段路要走的。也因此纯前端的模块化工具依然有价值,而且就我了解一些中小企业一直都在用纯前端的模块化手段。 如今,重新关注seajs和requirejs,不求理解多么深刻,要求会用能用就可以。 模...
本文实例讲述了RequireJS用法。分享给大家供大家参考,具体如下: 建立如下工程目录:|-test |-index.html |-index.js |-main.js |-require.min.js |-test.js其中,index.html如下: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Index</title> </head> <body> <script type="text/javascript" data-main="main.js" src="require.js"></script> </body> </html>data-main为入口。 main.js...
requireJs简介参数配置requireJS 常用的方法与命令也就两个,因此requireJS使用起来非常简单。require define其中define是用于定义模块,而require是用于载入模块以及载入配置文件。 define([id,deps,] callback); require(deps[,callback]);加载配置文件独立的引入配置文件也有两种方式,一种是通过script标签加载外部JS文件形式: <script src="js/require.js"></script> <script src="js/app.js"></script>另一种方式则是使用 r...
在前文中我们不止一次强调过模块化编程的重要性,以及其可以解决的问题: ① 解决单文件变量命名冲突问题 ② 解决前端多人协作问题 ③ 解决文件依赖问题 ④ 按需加载(这个说法其实很假了) ⑤ ...... 为了深入了解加载器,中间阅读过一点requireJS的源码,但对于很多同学来说,对加载器的实现依旧不太清楚 事实上不通过代码实现,单单凭阅读想理解一个库或者框架只能达到一知半解的地步,所以今天便来实现一个简单的加载器 加载器...
1.使用 1.1 加载 JavaScript 文件 RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签的脚本加载步骤。可以用它来加速、优化代码,但其主要目的还是为了代码的模块化。 RequireJS以一个相对于baseUrl的地址来加载所有的代码。 页面顶层<script>标签含有一个特殊的属性data-main,require.js使用它来启动脚本加载过程,而baseUrl一般设置到与该属性相一致的目录。 baseUrl亦可通过RequireJS config手动设置。如果...
本文实例讲述了requireJS模块化实现返回顶部功能的方法。分享给大家供大家参考,具体如下: 引用requireJs <script src="require.js" data-main="main"></script>html部分 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>body{padding: 0; margin: 0; height: 3000px}.btn{width: 80px; height: 80px;position: fixed; bottom: 0; left: 50%; background: #ddd}</style><script src="requir...
requirejs是干啥的啊? 曾经,我们将一些js组件放到不同的文件,然后通过script标签引入,如果几个组件有依赖,那么要小心了,你必须将被依赖的放到前面,否则的话会出现啥啥啥is undefined或者啥啥啥is not a function之类的错误。比如一个jquery的插件显然是依赖jquery核心库的,所以jquery核心库文件必须先引入。项目小组件少依赖简单还好,要是项目大组件多依赖复杂就糟糕了。咋办?用requirejs啊! 只要按照requirejs规范写,...
以前都是支持 司徒正美 的,毕竟咱们也是跟着 司徒正美 一起走进了前端的世界。所以一般MVVM都是用avalon的,当然也是考虑到项目需要支持IE6,7,8的考虑。当然在用的时候也有一些小坑和bug,都处理了。今年正美正好升级avalon2.0,加入虚拟dom的时候,不稳定了,就考试寻找其他的mvvm框架。 看了比较流行的一些框架,最后选择了vue。选择他的原因是 文档比较全,而且还有中文的(你懂的),生态圈比较好,有vux, vue-loader, vue-rou...
描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置。但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多。理论这样其实也没什么,但是到后面用grunt进行合并压缩就会有很多入口js,虽然这个入口js都把配置的模块内容都压缩到里面了,但是各个入口合并压缩后的文件中其实都有很多重合的代码,所以考虑到这个就想到把所以的入口文件都统一了,使用...