requirejs 小结

1,“生搬硬套”-----js依赖的写法,依赖关系如这里的嵌套关系:

  

 1 /**
 2  * 模块化加载,注意各个js文件的依赖关系(嵌套)
 3  */
 4
 5 require(["jquery"], function ($) {
 6     console.log($)
 7     require(["bootStrap"], function () {
 8     });
 9     require(["common"], function () {
10         require(["echarts"],function(){
11             require(["zb_charts_func","common_src"],function(){
12                 init_page_charts(echarts);
13                 init_common_charts(echarts);
14                 require(["changeCharts"],function(ut){
15                 });
16             });
17         });
18         require(["tagcanvas"], function () {
19             require(["app", "index"], function () {
20                 $(function () {
21                     App.getName();
22                     Index.initPage();
23                 });
24             });
25         });
26     });
27 });

2,如果在一个项目规划的时候就计划使用requirejs,那么建议你使用AMD规范的写法,然后使用模块的对象回调,如:

/**
*index.js
**/
define(function(){
    var name="张三";
    var getName=function(){
      return name;
    }
    return{
      getName:getName
    }
});
/**
*app.js
**/
define(function(){
    var initPage=function(){
      console.log("page init success!")
    }
    return{
      initPage:initPage
    }
});
/**
*主文件main.js
**/
 require(["app", "index"], function (app,index) {
         app.getName();
         index.initPage();

 });

这里将app.js和index.js模块输出为对象app和index两个回调参数,可以直接使用,

需要注意的是:一些主流的(如jquery)是直接支持AMD规范的,那么不支持规范的怎么办呢?这里requirejs提供了解决的方案,如下:

require.config({
    shim: {
      ‘jScroll‘:{
                        deps: [ ‘jquery‘],
        exports: ‘jScroll‘
      }
    }
  });                

这里的deps表示jScroll所依赖的库,exports表示对外开发的对象名称

时间: 2024-10-14 21:07:00

requirejs 小结的相关文章

RequireJS 入门指南

简介 如今最常用的JavaScript库之一是RequireJS.最近我参与的每个项目,都用到了RequireJS,或者是我向它们推荐了增加RequireJS.在这篇文章中,我将描述RequireJS是什么,以及它的一些基础场景. 异步模块定义(AMD) 谈起RequireJS,你无法绕过提及JavaScript模块是什么,以及AMD是什么. JavaScript模块只是遵循SRP(Single Responsibility Principle单一职责原则)的代码段,它暴露了一个公开的API.在

requireJS的基本用法

引言 目前项目中的前端架构采用的是RequireJS+AngularJS,小编在工作之余对这个前端框架比较感兴趣,在开始的 时候对这个框架不是很懂,因为里面有很多平台自己封装的东西,所以在理解起来不是很容易,经过这一段时间在项 目中的运用有了一定的理解,下面先来总结总结一下其中的一个技术点--RequireJS的基本用法. 基本介绍 RequireJS是一个JavaScript文件或者模块的加载器.它可以提高JavaScript文件的加载速度,避免不必要的 堵塞.它针对于在浏览器环境中使用做过专

RequireJS入门之一——实现第一个例子

为什么学习RequireJS? 像我这种菜鸟,会提到海量文章里提到的AMD.JS模块化编程.异步... ... 等等 RequireJS是一个Javascript 文件和模块框架,它可以帮我们去管理js代码(我的理解). 深入学习,我们便会被迫接受一系列的名词:data-main.require.define.baseUrl.paths.shims.deps...等等: 总之,很多文章都在向我们推销一些自己都说不明白的名词和概念. 简单点,现在我们要做一个简单的需求,用RequireJS管理我们

RequireJS和AMD规范

概述 RequireJS是一个工具库,主要用于客户端的模块管理.它可以让客户端的代码分成一个个模块,实现异步或动态加载,从而提高代码的性能和可维护性.它的模块管理遵守AMD规范(Asynchronous Module Definition). RequireJS的基本思想是,通过define方法,将代码定义为模块:通过require方法,实现代码的模块加载. 首先,将require.js嵌入网页,然后就能在网页中进行模块化编程了.  <script data-main="scripts/m

简述WEB项目前端脚本的一次重构历程,labJs,requireJs实践[转载]

重构前的状态:    大量的js代码混在繁多的Jsp文件中,对第三方的js库依赖也很杂乱.虽然在部分交互性较强的页面中,将js代码分离到了独立的js文件中,但是代码结构及依赖管理依然很乱.不说新人来了无所适从,就是我自己看了,也会一头雾水.不是代码有多深奥,是看着实在太累.于是,一次重构工作开始了. 重构中的事情:    1.首先,整个项目的页脚页头都有用到一些js和js库,这些具有共性的js先抽离到一个独立的head.js与foot.js中,放到include文件夹下.    2.对于公用的j

【源码学习】之requirejs

对于现在的前端生态来说,requirejs是有点过时了,webpack帮我们包干了一切.但是对于学习源码这件事情来说,永远是不过时的! 最近稍微闲下来了一点,就着以前做过的项目,我也来看看requirejs的源码.希望能涨点姿势! 1.html中的data-main是个什么鬼? //address.html<script type="text/javascript" data-main="${base}/static/js/app/userCenter/address&

css面试试题小结

行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效.告知浏览器的解析器用什么文档标准解析这个文档.DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现.link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用:而@import是CSS提供的,只能用于加载CSS.link写在html页面中,@import写在CSS页面中页面被加载的时,link会同

bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

转自:http://www.cnblogs.com/jesse2013/p/a-sample-of-single-page-applicaton.html 也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序一样.特别是在当今的移动时代,单页程序如果放在移动设备上去浏览就能够拥有像native app一样的体验,也许我们web开发者们应该期待这种技术

RequireJS 入门(二)

简介 如今最常用的JavaScript库之一是RequireJS.最近我参与的每个项目,都用到了RequireJS,或者是我向它们推荐了增加RequireJS.在这篇文章中,我将描述RequireJS是什么,以及它的一些基础场景. 异步模块定义(AMD) 谈起RequireJS,你无法绕过提及JavaScript模块是什么,以及AMD是什么. JavaScript模块只是遵循SRP(Single Responsibility Principle单一职责原则)的代码段,它暴露了一个公开的API.在