RequireJS实例分析

  随着JS越来越庞大,已经不仅仅是以前复制粘贴做特效的时代了,JS越来越偏向于业务逻辑与应用。恰逢Node的流行,JS在web开发中占有越来越重要的地位。由于JS代码庞大,文件数目多,传统的使用<script src=""></script>会带来很多性能的问题,因此requirejs可以为我们提供两种解决思路:

  1 模块化组织JS

  2 异步加载JS文件

  有了这两种解决办法,能有效的帮助我们解决前端代码库的组织难题。

  本文下面就模拟一个小例子,由于并没有应用实践,因此命名很戳,还请见谅。

  关于Require.js在多页面应用的实践,可以参考:multipage

层次组织

/public

  |------require.js、config.js、index.html

  |-------lib/

    |-------a.js、b.js

  |-------orthers/

    |-------c.js

文件功能

require.js:

  其中requirejs的核心代码就是require.js文件,可以从官方网站上下载:

config.js:

  用于配置requirejs的相关内容,可以设置文件目录,加载模块命名匹配,以及一些依赖关系等等。

index.html:

  我们的测试页面或者网址首页。

/lib/a.js和/lib/b.js 以及 /others/c.js

  是测试的模块js文件。

代码详情

index.html

<doctype html>
<html><head>
    <meta http-quiv="Content-Type" content="text/html;charset=UTF-8">
    <script data-main="config" src="require.js"></script>
</head>
<body>
    <h1>This is test for RequireJS</h1>
    <script type="text/javascript">
        alert("index");
    </script>
</body>
</html>
 

  其中,data-main指定主要的配置文件;src为requirejs的文件。

config.js

require.config({
    // baseUrl:‘/‘,
    paths:{
        "a":"lib/a",
        "b":"lib/b",
        "c":"others/c"
    }
    });
require([‘a‘,‘b‘,‘c‘],function(a,b,c){
    a.hello();
    b.hello();
    c.hello();
});

  baseUrl指定所有文件的主要目录,paths配置模块名字以及其匹配的加载路径。

  当有需要使用某些模块时,就可以通过require([xxx],function(xxx){xxx});的方式使用。

a.js

define([], function() {
  return {
    hello: function() {
      alert("hello, a");
    }
  }
});

b.js

define([], function() {
  return {
    hello: function() {
      alert("hello, b");
    }
  }
});

c.js

define([], function() {
  return {
    hello: function() {
      alert("hello, c");
    }
  }
});

  模块化文件,一般是一个功能是一个文件。文件的名字,就是上面requireconfig中配置的模块名字。require加载文件时,会自动加上.js后缀。

  当某些模块依赖其他模块时,可以通过define([xxx],function(xxx){yyy});的方式添加依赖关系,require会在异步加载后,自动调整次序。

  当访问index.html时,会先加载require.js然后把需要加载的文件都通过appendChild的方式,添加到index.html的底部。

  因此会先弹出index对话框,当执行config.js的后半部分代码时,会依次使用a.js b.js c.js,因此也会依次弹出三个对话框。

  这就是简单的模块化组织架构,如果需要参考实例项目,可以学习测试样例的源码,它主要为elasticsearch提供前端UI。

参考

【1】阮一峰requirejs:http://www.ruanyifeng.com/blog/2012/11/require_js.html

【2】requirejs中文文档:http://www.requirejs.cn/

时间: 2024-10-24 05:52:27

RequireJS实例分析的相关文章

【OpenGL】Shader实例分析(七)- 雪花飘落效果

转发请保持地址:http://blog.csdn.net/stalendp/article/details/40624603 研究了一个雪花飘落效果.感觉挺不错的.分享给大家,效果例如以下: 代码例如以下: Shader "shadertoy/Flakes" { // https://www.shadertoy.com/view/4d2Xzc Properties{ iMouse ("Mouse Pos", Vector) = (100,100,0,0) iChan

Apache漏洞利用与安全加固实例分析

Apache 作为Web应用的载体,一旦出现安全问题,那么运行在其上的Web应用的安全也无法得到保障,所以,研究Apache的漏洞与安全性非常有意义.本文将结合实例来谈谈针对Apache的漏洞利用和安全加固措施. Apache HTTP Server(以下简称Apache)是Apache软件基金会的一个开放源码的网页服务器,可以在大多数计算机操作系统中运行,是最流行的Web服务器软件之一.虽然近年来Nginx和Lighttpd等Web Server的市场份额增长得很快,但Apache仍然是这个领

java基础学习05(面向对象基础01--类实例分析)

面向对象基础01(类实例分析) 实现的目标 1.如何分析一个类(类的基本分析思路) 分析的思路 1.根据要求写出类所包含的属性2.所有的属性都必须进行封装(private)3.封装之后的属性通过setter和getter设置和取得4.如果需要可以加入若干构造方法 5.再根据其它要求添加相应的方法6.类中的所有方法都不要直接输出,而是交给被调用处调用 Demo 定义并测试一个名为Student的类,包括属性有"学号"."姓名"以及3门课程"数学".

第十七篇:实例分析(3)--初探WDDM驱动学习笔记(十)

续: 还是记录一下, BltFuncs.cpp中的函数作用: CONVERT_32BPP_TO_16BPP 是将32bit的pixel转换成16bit的形式. 输入是DWORD 32位中, BYTE 0,1,2分别是RGB分量, 而BYTE3则是不用的 为了不减少color的范围, 所以,都是取RGB8,8,8的高RGB5, 6, 5位, 然后将这16位构成一个pixel. CONVERT_16BPP_TO_32BPP是将16bit的pixel转换成32bit的形式 输入是WORD 16BIT中

第十七篇:实例分析(4)--初探WDDM驱动学习笔记(十一)

感觉有必要把 KMDDOD_INITIALIZATION_DATA 中的这些函数指针的意思解释一下, 以便进一步的深入代码. DxgkDdiAddDevice 前面已经说过, 这个函数的主要内容是,将BASIC_DISPLAY_DRIVER实例指针存在context中, 以便后期使用, 支持多实例. DxgkDdiStartDevice 取得设备信息, 往注册表中加入内容, 从POST设备中获取FRAME BUFFER以及相关信息(DxgkCbAcquirePostDisplayOwnershi

实例分析Robots.txt写法

题意:经典八数码问题 思路:HASH+BFS #include <iostream> #include <cstdio> #include <cstring> #include <algorithm> using namespace std; const int MAXN = 500000; const int size = 1000003; typedef int State[9]; char str[30]; int state[9],goal[9]={

Camera图像处理原理及实例分析-重要图像概念

Camera图像处理原理及实例分析 作者:刘旭晖  [email protected]  转载请注明出处 BLOG:http://blog.csdn.net/colorant/ 主页:http://rgbbones.googlepages.com/ 做为拍照手机的核心模块之一,camera sensor 效果的调整,涉及到众多的参数,如果对基本的光学原理及 sensor 软/硬件对图像处理的原理能有深入的理解和把握的话,对我们的工作将会起到事半功倍的效果.否则,缺乏了理论的指导,只能是凭感觉和经

HTTP的上传文件实例分析

HTTP的上传文件实例分析 由于论坛不支持Word写文章发帖. 首先就是附件发送怎么搞,这个必须解决.论坛是php的.我用Chrome类浏览器跟踪请求,但是上传的文件流怎么发过去没找到,估计流可能多或者什么的不好显示,只知道发送了文件名字.需要实际了解下post文件,不能只会后台或界面不了解前台数据处理和协议怎么传送数据. 图中:有些相关文章 HTTP请求中的form data和request payload的区别 AJAX POST请求中参数以form data和request payload

实例分析ELF文件静态链接

1.ELF文件格式概貌 readelf -h 查看elf文件头部信息可以看到Type值有三种:REL,EXEC,DYN. REL文件是只被编译没有被链接过的文件,其格式属于左边一种,elf header+section1,2,3...+section header table,每个section对应一个section header table entry,section header table为各个section提供索引.没有被链接过的文件没有program header,不能被加载到内存中运