require.js 入门笔记

  网站越来越庞大,JS也是越写越多. 当所有的JS 都集中在 HTML的 head 部分时,网页加载变得很慢,很多的 JS代码也并不是全都适用在当前的页面,造成了代码的冗余度非常高.

  而且长长的JS代码,没有很好的将他们 模块化,对以后的维护造成极大的困难.

  为此特地去了解下 require.js 的用途以及使用方法,为以后 代码重构 和 模块化 提供帮助.让后来者能更好的去管理代码.

1 为什么我要用require.js?

  最近在制作个网站.引入了

<script src="static/script/jquery.js"></script>
<script src="static/script/jquery.lazyload.min.js"></script>
<script src="static/script/swiper.js"></script>
<script src="static/script/laydate/laydate.js"></script>
    .
    .
    .
<script scr="static/script/common.js"></script>
<!--业务代码-->

  HTML里依次引入了 js 代码,在加载这些 js 的时候,页面将停止渲染,直到 js 文件加载完毕.

  不同的 js 之间存在依赖关系,必须保证 js 文件按顺序执行,当依赖关系变得复杂的时候, 编写和维护将会变得极其困难.

  为此我们引入 require.js, 正是为了解决这两个问题.

2 在页面中加载require

  先去官网下载 最新的 require.js.

  在 html 头部 引用该 JS

  

<script data-main="static/script/main" src="static/script/require.js"></script>

  data-main 是必要的属性, 指定 require.js 的入口文件.浏览器将会在 require.js加载完时 自动加载 该 入口文件

3 加载 JavaScript

  使用 require.config 来管理我们的 js

require.config({
	baseUrl: "static/script",
	paths:{
		jquery:‘jquery‘,
		lazy:‘jquery.lazyload‘
		common:‘common‘,
		swiper:‘swiper‘,
		laydate:‘laydate/laydate‘,
                //  测试
                test:‘test‘,
	}
});

  利用 require.config, 使用baseUrl及"paths" config去设置module ID.

4 定义模块

  在test.js 里 定义模块

  一个 js 文件里 应该只定义一个模块,模块里 云溪加载多个模块,顺序不定,但是 依赖的顺序 最终会是正确的.

define([‘jquery‘],function($){
	var width = 1000;
	return {
		//some function()
		setWidth():{
			width = $(window).width()
		},
		getWidth():{
			return width;
		}
	};
});

  

5 加载模块.

  

require([‘test‘],function(test){
    test.setWidth();
    //  输出宽度
    alert(test.getWidth());
});

6 加载非规范的模块

  当模块没有才用 规范的 define() 定义的时候,我们就需要 shim

require.config({
	paths:{
		jquery:‘jquery-2.1.4.min‘,
	},
	shim:{
		‘test‘:{
			//	该不规范的模块所需要的依赖
			deps:[‘jquery‘],
			exports:‘test‘,
		}
	},
});

  

时间: 2024-10-24 00:19:20

require.js 入门笔记的相关文章

Node.js入门笔记

第一步自然是安装了,我是用Webstorm这个ide,安装分2步: 1.安装nodejs,下载Windows下的安装版本,注意是以msi为扩展名的,然后下一步,没啥好说的,下载地址如下: 32位的msi:http://nodejs.org/dist/latest/ 64位的msi:http://nodejs.org/dist/latest/ 2.安装WebStorm8.0.3,好像会自动找到nodejs的安装路径,不需要配置啥东东: 装好WebStorm,启动它,然后创建项目(New Proje

【转】require.js学习笔记(二)

require.js遵循AMD规范,通过define定义模块,require异步加载模块,一个js文件即一个模块. 一.模块加载require1.加载符合AMD规范模块 HTML: <script src="js/require.js" data-main="js/main"></script> MAIN.JS require.config({ baseUrl: "js/lib", paths: { "jquer

require.js学习笔记

使用require.js的好处? 1 有效的防止命名冲突(可以将变量封装在模块内,通过暴露出的接口解决命名冲突) 2 解决不同JS文件中的依赖 3 可以让我们的代码以模块化的方式组织 官方网站http://www.requirejs.org/docs/download.html 下载require.js 进入官网后左边侧栏可以看到download,点击会看到有两个版本 minified withcomments 一个是开发版 一个是带有注释的版本 根据个人需求下载即可 require.js常用方

require.js入门指南(一)

最近,处于网站性能和维护的需求,开始学习require.js,把js代码模块化. 学习的过程中也遇到了很多让人烦恼的问题,网络上的解决办法五花八门,也是颇费周折,好在最终完成了. 先去下载require.js.并把它包含至项目中.目录结构如下: js文件夹中目前只有两个js文件.  require.js 和 main.js.先不用管main.js.我们先说require.js,学习要一步一步来. 我们在index.html中引入require.js <!DOCTYPE html> <ht

require.js 入门学习 (share)

以下内容转自阮一峰老师的网络日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html 更多学习资源: require.js官网:http://requirejs.org/docs/download.html 一篇不错的文章:http://www.csdn.net/article/2012-09-27/2810404 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.

require.js 入门学习

一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. <script src="1.js"></script> <script src="2.js"></script> <script src="3.js"></s

require.js入门指南(三)

下面我们来说说main.js. 前面没有用到,因为例子比较简单.当我们的js文件夹中包含多个文件时,每次require都要写 (路径名/文件名) 这样的require()参数,很麻烦.而且,直接把js代码写在页面中,也是不好的. 我们就可以用main.js设置参数,简化操作,并把页面需要的js代码写在其中. 现在我们在js文件夹下新建一个文件夹,命名为lib,并把jquery.js移动至这个目录下.这个文件夹就用来存放所有的库文件,也方便维护和管理. 目录结构变成了下面这样子: 如果我们不使用m

require.js读书笔记 2.usage

REQUIREJS API This is the RequireJS 2.0 API. If you want 1.0: Link to 1.0. Usage§§ 1-1.3 Load JavaScript Files  § 1.1 data-main Entry Point§ 1.2 Define a Module§ 1.3 Simple Name/Value Pairs§ 1.3.1 Definition Functions§ 1.3.2 Definition Functions with

require.js入门

1.需下载require.js; 2.requirejs有三个主要方法require.config;require;define,require.config方法主要是对文件进行配置,包括其路径,依赖,输出名称等等,下图所示: : require方法表示其依赖文件和回调函数,写法如下: : define文件是定义模块组件,可以将一个单独模块定义在此处,例如上图的ruquirejs就是一个单独定义的模块,如下图: 掌握了这三个方法,可以对require.js上手了