config 函数用于requirejs的配置信息.主要包括:baseUrl.paths: 一.baseUrl: 待续…

2017 新年好 ! 新年第一天对我来说真是悲伤 ,早上兴冲冲地爬起来背着书包跑去实验室,结果今天大家都休息 .回宿舍的时候发现书包湿了,原来盒子装的牛奶盖子松了,泼了一书包,电脑风扇口和USB口都进牛奶了,赶紧拔掉电池,用风扇吹啊吹.强行开机,无线网卡坏掉,屏幕里面进牛奶,难看死啦 ~ 鼠标也坏掉了,谁能赠送我一个鼠标啊 ..O... 中午吃完饭,就开始完善模块加载器了.到傍晚,差不多了,出去浪了一会儿 ~ my-Require.js 回顾 在 使用RequireJS 并实现一个自己的Requ…

RequireJS & SeaJS 在 模块化开发 开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺序来确定,项目会变得复杂难以维护. 复杂的脚本会暴露很多全局变量, 比如 $,_. ... . 同步加载的时候,网页会停止渲染,加载时间越长,网页失去响应的事件就越长. 于是,AMD 规范就诞生了,AMD 即为异步模块定义,有效避免同步加载导致页面的假死现象.RequireJS 是一个 AMD 的实现,后来…

前言 进入移动前端是很不错的选择,这块也是我希望的道路,但是不熟悉啊... 现在项目用的是require+backbone,整个框架被封装了一次,今天看了代码搞不清楚,觉得应该先从源头抓起,所以再看看require了. 上午是到处搜集的资料,下午我们来看原生的API吧: http://www.requirejs.org/docs/api.html#config PS:我英语很烂,各位将就着看吧,看到红色就说明老夫拿不准...... 加载javascript文件 RequireJS采用不同的方法来…

没有requireJS框架之前,如果我们想使用jquery框架,会在HTML页面中通过<script>标签加载, 这个时候jquery框架生成全局变量$和jQuery等全局变量.如果项目中引用了requireJS框架,采用模块化的方式加载jquery,那么 jquery不会再添加全局变量$和 jQuery .现在问题来了,虽然jquery框架已经开始支持AMD规范,但是jquery的众多插件还是不支持AMD,仍然像以前一样需要使用全局变量$.jquery插件大多都是如下结构: (functio…

这两天正好看到了程序员小卡同学的一篇博客,里面对requireJS路径的解析做了一些说明,里面有点问题待解决,我这里正好知道一点,所以整理成文,不知对小卡同学是否有帮助. http://www.cnblogs.com/chyingp/p/3677425.html http://www.cnblogs.com/chyingp/p/requirejs-path-resolve.html   首先以其例子为例: requirejs.config({ baseUrl: 'js' }); // 依赖lib…

一.seajs 1. 使用seajs的一般步骤 a)在主页面引入sea.js b)写模块 c)在主页面使用模块 2.模块的写法 math.js define(function(require, exports, module){ var squareObj=require("square"); module.exports={ add:function(a,b){ return a+b; }, cube:function(a){ return squareObj.square(a)*a…

RequireJs已经流行很久了,我们在项目中也打算使用它.它提供了以下功能: 声明不同js文件之间的依赖 可以按需.并行.延时载入js库 可以让我们的代码以模块化的方式组织 初看起来并不复杂. 在html中引入requirejs 在HTML中,添加这样的 <script> 标签: <script src="/path/to/require.js" data-main="/path/to/app/config.js"></script&…

原文地址:http://www.tuicool.com/articles/7JBnmy 接触过requirejs的童鞋可能都知道,无论是通过define来定义模块,还是通过require来加载模块,模块依赖声明都是很重要的一步.而其中涉及到的模块路径解析,对于新手来说,有的时候会让人觉得很困惑. 假设我们的目录结构如下: demo.html js/main.js js/lib.js js/util.js js/common/lib.js js/common/jqury/lib.js common…

实现模块化.按需加载. 一.配置参数. 1.baseUrl:以一个相对于baseUrl的地址来加载所有的代码.   data-main,使用它来启动脚本加载过程,而baseUrl一般设置到与该属性相一致的目录.也可以通过config来配置.如下: 如果没有显式指定config及data-main,则默认的baseUrl为包含RequireJS的那个HTML页面的所属目录. <script data-main="scripts/main.js" src="scripts/…

requirejs的优点: 1.防止在js的加载过程中,阻止页面的渲染: 2.可以引入多个js文件: 3.可以写出重复使用的js模块: 4.有效的防止命名的冲突,通过将变量分装在模块中的方式实现: requirejs的方法: 1.  requirejs.config  用于指定模块的别名,方便模块的引入: 其常用path属性来定义文件的位置: 例如: require.configuration({ paths:{ "jquery":["文件的位置,可以使本地的,也可以使网上的…

上周Wijmo 2014 V2版本刚刚发布(下载地址),  有网友下载后发现仅仅使用了40个Widgets的一小部分,还需要加载全部的jquery.wijmo-pro.all.3.20142.45.min.js包? 即对仅使用部分的Widget,有无办法优化而提高网络性能呢. 答案是肯定的,有办法. 其中针对这种情况,使用Require.JS再合适不过了,实际上Wijmo 2013年已经开始支持Require.JS了,如下是Wijmo支持的JavaScript类库的全图. 本文就通过对比的方式说…

本节将简述RequireJS常用的功能 RequireJS 实现了 Asynchronous Module API. 目录: 为什么使用RequireJS 加载RequireJS Hello World 自定义模块 引入第三方插件 多版本js库处理 RequireJS插件 Nuget:Install-Package RequireJS(会包含2个文件.r.js是用来通过nodejs压缩js的) 为什么使用RequireJS 加载script标签会停止响应 js文件存在依赖性 模块化开发 加载Re…

通过本文,你可以对模块化开发和AMD规范有一个较直观的认识,并详细地学习RequireJS这个模块化开发工具的常见用法.本文采取循序渐进的方式,从理论到实践,从RequireJS官方API文档中,总结出在使用RequireJS过程中最常用的一些用法,并对文档中不够清晰具体的内容,加以例证和分析,希望本文的内容对你的能力提升有实质性的帮助. 1. 模块化 相信每个前端开发人员在刚开始接触js编程时,都写过类似下面这样风格的代码: <script type="text/javascript&q…

这里只是调侃一下,“杏仁”其实指的是almond,requirejs作者的另一个开源项目,它的定位是作为requirejs的一个替代品. 本文概要: 1. 使用场景 2. 打包例子:未使用almond 3. 打包例子:使用almond 4. 如何暴露公共API 5. 限制 & 支持的特性 6. 写在后面 & demo下载 使用场景 什么情况下需要使用almond呢?假设你手头有个基于requirejs的小项目,所有业务代码加起来就几十K(压缩后可能更小).出于性能优化的考虑,你可能在想:如…

接触过requirejs的童鞋可能都知道,无论是通过define来定义模块,还是通过require来加载模块,模块依赖声明都是很重要的一步.而其中涉及到的模块路径解析,对于新手来说,有的时候会让人觉得很困惑. start up 假设我们的目录结构如下: demo.htmljs/main.jsjs/lib.jsjs/util.jsjs/common/lib.jsjs/common/jqury/lib.jscommon/lib.js 下面的这两个例子,看着很简单吧,但应该大部分的人跟我一样没办法一眼…

使用RequireJS做异步模块加载,有几点值得注意的地方: 1.模块定义两种写法 1. 存在依赖的函数式定义 如果模块存在依赖:则第一个参数是依赖的名称数组:第二个参数是函数,在模块的所有依赖加载完毕后,该函数会被调用来定义该模块,因此该模块应该返回一个定义了本模块的object.依赖关系会以参数的形式注入到该函数上,参数列表与依赖名称列表一一对应. define(['a'], function(aJ) { var hello = function(){ aJ.hello('i am c.js…

随着JS越来越庞大,已经不仅仅是以前复制粘贴做特效的时代了,JS越来越偏向于业务逻辑与应用.JS在web开发中占有越来越重要的地位. 由于JS代码庞大,文件数目多,传统的使用<script src=""></script>会带来很多性能的问题,因此requirejs可以为我们提供解决思路,它有以下的功能: 1.声明不同js文件之间的依赖 2.可以按需.并行.延时载入js库 3.可以让我们的代码以模块化的方式组织 下面进行实战: 文档结构是这样的 .js/app/…

之前有介绍过requireJS(模块化开发),可以看看 ,但是不详细,所以今天参考官网来详细介绍一下: 1.加载js文件: RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签的脚本加载步骤.可以用它来加速.优化代码,但其主要目的还是为了代码的模块化.它鼓励在使用脚本时以module ID替代URL地址. RequireJS以一个相对于baseUrl的地址来加载所有的代码. 页面顶层<script>标签含有一个特殊的属性data-main,requir…

使用requireJS的shim参数,完成jquery插件的加载 时间 2014-10-31 13:59:10  CSDN博客 原文  http://blog.csdn.net/aitangyong/article/details/40653335 主题 jQueryRequireJS 没有requireJS框架之前,如果我们想使用jquery框架,会在HTML页面中通过<script>标签加载,这个时候jquery框架生成全局变量$和jQuery等全局变量.如果项目中引用了requireJS…

现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可重用的Js代码,并共享构建工具.但很多时候我们可能采用别的语言,如ruby/java/scala等,此时前后端代码基本上是完全独立的.虽然大家都在同一个项目中,但可以分成互相独立的两块,并且前后端通常使用不同的构建工具. 比如当后端使用Scala时,我们会使用sbt进行项目构建,对scala代码进行…

requireJS使用教程 2.0 常用方法 requirejs.config : 为模块指定别名 requirejs : 将写好的模块进行引入,根据模块编写主代码 define : 编写模块 html <script src="../js/require.js" data-main='../js/main.js'></script> main.js require.config({ paths: { jquery: 'jquery-2.1.4' } }); r…

在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理.这里就介绍下如何通过requirejs,实现html代码的模块化开发. 如何使用requirejs加载html Reuqirejs有一个text的插件,它可以读取指定文件的内容,读取到的内容就是文本. 如何下载text插件 第一种方法,可以通过npm下载: npm install requirejs/text 第二种方法,也可以直接去官方github上面直接下载. 直接拷贝内容到text.js中即可. 如何安装t…

由于js的代码逻辑越来越重,一个js文件可能会有上千行,十分不利于开发与维护.最近正在把逻辑很重的js拆分成模块,在一顿纠结是使用requirejs还是seajs的时候,最终还是偏向于requirejs.毕竟官方文档比较专业嘛... 不过即便是有完整的官方文档,仍然遇到不少的问题,比如jquery-ui的使用. 下面就循序渐进的讲解一下我遇到的问题,以及解决的办法. 关于AMD和CMD的理解 AMD(异步模块定义)的典型就是requirejs,而CMD(通用模块定义)的典型是淘宝的seajs.…

前言 前端模块化能解决什么问题? 模块的版本管理 提高可维护性 -- 通过模块化,可以让每个文件职责单一,非常有利于代码的维护 按需加载 -- 提高显示效率 更好的依赖处理 -- 传统的开发模式,如果B依赖A,那么必须在B文件前面先加载好A.如果使用了模块化,只需要在模块内部申明依赖即可. AMD规范 & CMD规范 说到前端模块化,就不得不提AMD规范(中文版.英文版)和CMD规范(英文版) 它们的区别: http://www.zhihu.com/question/20351507 http:…

RequireJS Optimizer 是 RequireJS 自带的前端优化工具,可以对 RequireJS 项目中的 JavaScript & CSS 代码使用 UglifyJS 或者 Closure Compiler 进行压缩合并.这篇文章介绍RequireJS Optimizer 的使用和配置方法,帮助大家解决使用中碰到的问题. 您可能感兴趣的相关文章 12款很棒的浏览器兼容性测试工具推荐 2012年最佳 Web 前端开发工具和框架 构建杀手级应用 JavaScript 工具和技术 推荐…

任何一门语言在大规模应用阶段,必然要经历拆分模块的过程.便于维护与团队协作,与java走的最近的dojo率先引入加载器,早期的加载器都是同步的,使用document.write与同步Ajax请求实现.后来dojo开始以JSONP的方法设计它的每个模块结构.以script节点为主体加载它的模块.这个就是目前主流的加载器方式. 不得不提的是,dojo的加载器与AMD规范的发明者都是james Burke,dojo加载器独立出来就是著名的require.本章将深入的理解加载器的原理. 1.AMD规范…

//index.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <!-- <script data-main="js/main" src="require.js"></script> --> <script data-main…

什么是RequireJS? /* --- RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJS加载模块化脚本将提高代码的加载速度和质量. IE 6+ .......... 兼容 ✔Firefox 2+ ..... 兼容 ✔Safari 3.2+ .... 兼容 ✔Chrome 3+ ...... 兼容 ✔Opera 10+ ...... 兼容 ✔…

上面release是执行命令 node r.js -o build.js 生成的,需要切换到目录require/tools下面,也就是 有r.js和build.js的目录,才能执行命令 代码目录如上: main.html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello RequireJS</title> </head…