requireJS

1.用于ADM(基于模块的异步加载JavaScript代码的机制)js模块开发

2.下载requireJS

3.好处:

  1)有效防止命名冲突(js多时可能很多全局变量容易重复)

  2)声明不同的js文件之间的依赖

  3)模块化的开发  

4.常用方法:

  requirejs.config:为模块指定别名

  requirejs:将写好的模块引入并编写主代码

  define;编写模块,在相应地方来引用

5.例子:

  1)引入模块入口data-main是入口;<script data-main="js/main" src="js/require.js"></script>

  2)入口js文件中两个方法requirejs.config配置baseUrl;paths;requirejs([],function(){})

require.config({
    baseUrl: ‘js‘,
    paths: {
        jquery: ‘jquery-1.8.2.min‘
    }
});
/*
  jquery是定义好的模块;validate也是在validate.js中定义的模块;
  $代表jquery模块;validate代表define定义的模块
*/
require([‘jquery‘,‘validate‘],function($,validate) {
    $(‘body‘).css(‘background-color‘,‘red‘);
    console.log(validate.isEqual(12,23));
});

  3定义的模块外部不能访问只能防护出结果:

//这里是一个私有的只能内部自己放回数据
define([‘jquery‘],function($){
    return{
        isEmpty:function(){},
        checkLength:function(){},
        isEqual:function(str1,str2){
            return str1===str2;
        }
    }

})

  

时间: 2024-12-20 18:06:23

requireJS的相关文章

requireJS(一)

一:为什么要使用requireJS? 很久之前,我们所有的JS文件写到一个js文件里面去进行加载,但是当业务越来越复杂的时候,需要分成多个JS文件进行加载,比如在页面中head内分别引入a.js,b.js,c.js等,如下所示: <script src="js/app/a.js"></script> <script src="js/app/b.js"></script> <script src="js/

JS模块化工具requirejs教程02

基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出这个api是用来定义一个模块 require 加载依赖模块,并执行加载完后的回调函数 前一篇中的a.js: define(function(){ function fun1(){ alert("it works"); } fun1(); }) 通过define函数定义了一个模块,然后再页面

Angular-ui-router + oclazyload + requirejs实现资源随route懒加载

本文主要说明在用AngularJS开发web应用中如何实现lazyload,使用AngularJS需要在前端实现路由功能,本文就介绍利用此点实现前端资源的懒加载. 问题 目前大部分AngularJS的应用用requirJS组织模块,但是很多都没有使用lazyload功能,在app.js中启动时将全部依赖加载进来,在模块功能较少,前端资源少的情况下没问题.那么问题来了,依赖资源过多时怎么办? build时利用grunt-contrib-requirejs提取合并文件,减少http请求,但是存在问题

requirejs下载与配置

写在开始: requirejs有中文版api文档,可以访问http://www.requirejs.cn/home.html 下载requirejs 访问http://www.requirejs.cn/docs/download.html 下载require.js(可以下载原版或压缩版,压缩版体积小,原版未压缩,便于开发人员阅读) 这里下载到scripts目录 参考资料: http://www.requirejs.cn/

requirejs一 加载JavaScript文件

首先,目录如下(根目录有一个index.html文件.有一个scripts文件夹): scripts文件夹有如下的文件 以下是index.html代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>My Sample Project</title> 5 <!-- data-main attribute tells require.js to load 6 scripts/main.js after

浅谈HTML5单页面架构(三)—— 回归本真:自定义路由 + requirejs + zepto + underscore

本文转载自:http://www.cnblogs.com/kenkofox/p/4650310.html 不过,这一篇,我想进一步探讨一下这两个框架的优缺点,另外,再进一步,抛开这两个框架,回到本真,自己搞个简单的路由一样可以实现单页面. 这个对于刚做前端开发的新同学来说就最好不过了,如果一来到岗位就一大堆angular.backbone.requirejs,看资料都看一两周.其实大家最熟悉的东西还是那个美元$,用美元能解决的问题,就不要麻烦到angular.backbone大爷了. 事先说明,

浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore

本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)——requirejs + angular + angular-route>探讨了angular+requirejs的一个简单架构,这一篇继续来看看backbone如何跟requirejs结合. 相同地,项目架构好与坏不是说用了多少牛逼的框架,而是怎么合理利用框架,让项目开发更流畅,代码更容易管理.那么带着这个目的,我们来继续探讨backbone. 首

浅谈HTML5单页面架构(一)——requirejs + angular + angular-route

本文转载自:http://www.cnblogs.com/kenkofox/p/4643760.html 心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验最好,更像原生app.简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多. 废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1.requirejs

RequireJS对文件合并与压缩实现方法

RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJS加载模块化脚本将提高代码的加载速度和质量. 本文为大家讲解的是requireJS对文件合并与压缩的实现方法,感兴趣的同学参考下. RequireJS提供了一个打包与压缩工具r.js,r.js的压缩工具使用UglifyJS进行压缩的或Closure Compiler.r.js下载 requireJS