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>
    <meta http-quiv="Content-Type" content="text/html;charset=UTF-8">
    <script data-main="config" src="require.js"></script>
</html>
<body>
    <h1>This is test for RequireJS</h1>
    <script type="text/javascript">
        alert("index");
    </script>
</body>
复制代码

  其中,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/

本文转自博客园xingoo的博客,原文链接:RequireJS实例分析,如需转载请自行联系原博主。
相关文章
|
SQL 关系型数据库 测试技术
Mysql数据库Slow_log中的lock_Time和Query_time
主要用简单的例子来说明,slow log里的lock_time和query_time的关系,得出的结论是: 当一个sql的执行时间(排除lock_time)大于long_query_time的时候,才会被记录到slow log中,并且query_time是累计了lock_time的(如果有lock.
10983 0
|
程序员
这是我经历过最惨的转正答辩了
Hello 大家好,我是鸭血粉丝,试用期是每个刚入职的人都会经历的一段时间,时间不固定,少则一两月多则半年,具体的时间长短根据公司和个人表现不尽相同。而且试用期过后一般都会有一个转正答辩,这不阿粉最近就接到一个小伙伴的哭诉说转正答辩太难了,事情是这个样子的。
3088 0
这是我经历过最惨的转正答辩了
|
9月前
|
存储 SQL 监控
阿里云数据库 SelectDB 版全面商业化!开启现代化实时数据仓库新篇章
2024 年 5 月 21 日,由阿里云联合飞轮科技共同举办的「阿里云数据库 SelectDB 版商业化产品发布会」于线上召开。阿里巴巴集团副总裁、阿里云数据库产品事业部负责人李飞飞宣布,阿里云数据库 SelectDB 版在中国站及国际站全面发布,正式开启商业化的全新篇章!
679 3
|
缓存 NoSQL 安全
Redis的AOF持久化
本篇文章介绍1.AOF 日志、2.AOF 持久化的实现原理、3.AOF 的写回策略、4.AOF 文件重写
144 0
Redis的AOF持久化
|
人工智能 算法 物联网
|
JSON JavaScript 前端开发
学习JavaScript笔记
学习JavaScript笔记
49 0
如何解决URLerror中的异常?原来这样也行
前言 我们每次编写爬虫程序的时候,总会遇到一些异常,相信大家都很头疼的去百度,却没什么效果,本节为你们介绍两个普通的异常,,,,,URLError还有HTTPError,以及对它们的一些处理。 1.URLError 首先解释下URLError可能产生的原因: · 网络无连接,即本机无法上网 · 连接不到特定的服务器 · 服务器不存在 在代码中,我们需要用try-except语句来包围并捕获相应的异常。
1817 0
|
消息中间件 设计模式 Java
Spring 源码学习(七)扩展功能 下篇(二)
在前面的 Spring 源码学习系列的文章中,深入分析和学习了 BeanFactoryPostProcessor ,主体是 BeanFactory 的后处理器,这次来学习主体是 Bean 的后处理器:BeanPostProcessor。
|
JavaScript 前端开发 Java
PHP、Python、JavaScript、Java分别对字符串取MD5值
PHP、Python、JavaScript、Java分别对字符串取MD5值
220 0
|
C语言
第四章:C语言的分支与循环
说起分支与循环呀,其实生活中充满着分支与循环,比如说当我们面临一个问题与抉择时,我们会选择,会做出规律性的生活方式。人生处处有选择,会有不同的道路,选择自己合适的道路,并保持下去。而C语言也有相关的分支与循环,如 if,if-else,switch,for循环,while循环,do-while循环,今天我们所要讲的是C语言:分支与循环。
59 0

热门文章

最新文章