RequireJs入门1

RequireJs入门

随着Javascript在开发中占得比重越来越大,就需要一个团队来分工、协作,为了大家的代码可以更好的相互使用,这个时候模块化编程 就成为一个迫切的需求了。但是Javascript本身不是模块化的语言。它不支持类,更别说模块了。

既然模块如此重要,那团队开发中就应该去制定一种规范,来约束大家,这样就便于大家相互使用。如果每个人都按自己的写法,那肯定是乱了套的, 目前Javascript官方没有规范,通行的Javascript模块规范只有两种:CommonJs和AMD

CommonJs概述

CommonJs是服务器端模块规范,它加载模块顺序是同步的,必须等待一个加载完了在加载下一个,node.js就是遵守CommonJs规范

AMD

AMD是浏览器端模块,加载是异步的,无需等待。

两者的区别是:CommonJs是服务器端模块规范,加载模块顺序是同步的;AMD是浏览器端模块,加载是异步的。两者之间可以相互转化(在这就不做阐述了)。

RequireJs是什么

RequireJs是个Javascript文件、模块加载程序,在浏览器执行速度很快,它也可以用在其他Javascript环境里,像node等等

它遵循AMD模块规范

为什么要使用RequireJs

1.如第一段所讲的,Javascript模块化的需要,需求的需要

如下的代码想必大家都看过:

 <script src="1.js"></script>
 <script src="2.js"></script>
 <script src="3.js"></script>
 <script src="4.js"></script>

这样的写法有很大的缺点。首先,加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长; 其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序(比如上例的1.js要在2.js的前面),依赖性最大的 模块一定要放到最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难

2.实现js文件的异步加载,避免网页失去响应;

3.管理模块之间的依赖性,便于代码的编写和维护

如何使用RequireJs

1.去官网下一个RequireJs文件,像js文件一样添加

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

大家发现这段代码里多了一个data-main属性,这个就像C语言中的主函数一样,main.js会第一个被Require.js加载,由于require.js默认的 文件名后缀是js,所以可以把main.js简称成main

那我们看看main这个主函数是怎么写的

定义模块:一个模块名一个文件

1.假如这个模块没有任何依赖关系,仅仅是一些name/value的集合,就可以定义成object的形式

define({
      color:"black",
      size:"unisize"
 })

2.假如这个模块没有任何依赖关系,仅仅需要一个方法处理一些简单的逻辑

1 define(function(){
2        var a=1,b=2;
3        document.write(a+b);
4  })

3.定义一个有依赖关系的模块,第一个参数是数组,第二个参数是一个方法function,在第一个参数相对应的js文件全部加载完了,第二个参数的function才会执行

1 define(["./cart","./inventory"],function(cart,inventory){
2      return {                      //也可以返回一个function
3           cart:cart.add(3,4);
4           inventory:inventory.minus(3,4);
5      }
6  }) 

4.定义一个模块来转换CommonJs

1 define(function(require, exports, module) {   //方法中三个参数,需要按照顺序写和相对应的名字,否则会出现混乱,也可以舍弃exports和module,但是你要使用的使用,一定要按照顺序写
2         var a = require(‘a‘),
3             b = require(‘b‘);
4
5         //Return the module value
6         return function () {};
7     }
8 );

RequireJs入门1

时间: 2024-10-26 14:31:39

RequireJs入门1的相关文章

requirejs入门知识整理

使用模块化开发处理的三大问题: 1.命名冲突:2.繁琐的文件依赖 3.实现异步非阻塞的文件加载,避免网页失去响应 模块化的设计使得JavaScript代码在需要访问“全局变量”的时候,都可以通过依赖关系,把这些“全局变量”作为参数传递到模块的实现体里,在实现中就避免了访问或者声明全局的变量或者函数,有效的避免大量而且复杂的命名空间管理. requirejs以一个相对于baseUrl的地址来加载所有的代码.如果用了data-main属性,则该路径就是baseUrl,baseUrl亦可通过requi

RequireJS入门

RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系. 当然也不会有阻塞(blocking)的情况发生.好,以一个简单示例开始. 新建一个目录,结构如下 目录r1下有index.html.jquery-1.7.2.js.main.js.require.js.require.js和jquery-1.7.2.j

RequireJS入门(三)

这篇来写一个具有依赖的事件模块event.event提供三个方法bind.unbind.trigger来管理DOM元素事件. event依赖于cache模块,cache模块类似于jQuery的$.data方法.提供了set.get.remove等方法用来管理存放在DOM元素上的数据. 示例实现功能:为页面上所有的段落P元素添加一个点击事件,响应函数会弹出P元素的innerHTML. 创建的目录如下 为了获取元素,用到了上一篇写的selector.js.不在贴其代码. index.html 如下

RequireJS入门(一)

RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系. 当然也不会有阻塞(blocking)的情况发生.好,以一个简单示例开始. 新建一个目录,结构如下 目录r1下有index.html.jquery-1.7.2.js.main.js.require.js.require.js和jquery-1.7.2.j

RequireJS入门与进阶

RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系. 当然也不会有阻塞(blocking)的情况发生.好,以一个简单示例开始. 新建一个目录,结构如下 目录r1下有index.html.jquery-1.7.2.js.main.js.require.js.require.js和jquery-1.7.2.j

RequireJS 入门指南

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

RequireJS入门之二——第二例(调用自己的JS代码)

第一节遗留的问题: 中文乱码:  修改require.js文件,搜索charset 关键字,修改为GBK: 路      径:  仅介绍main.js中的路径设置:1. 可以设置baseUrl根路径:如,把jquery放在根目录下js文件夹,可以这样     若放在js/lib中,这样: ./ 可以省略:页面引入方式类似:引入时   data-main="./js/main"  属性是由RequireJS定义的,默认省略写.js 本节需求:编写一个选择器通过根据id.class.Tag

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

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

RequireJS入门指导 (转)

最近在百度实习做的一个项目用到了 Require JS 这个库,之前从来没有了解过,经过一番大概的搜索后找到一篇非常不错的文章,看完后能够让你对 Require JS 的运行机制.使用方法以及为什么使用 Require JS 有一个基础的认识.下面我就对这篇文章进行一个简单的翻译,如果有错漏的地方希望指正. 原文链接:http://undefinedblog.com/primer-for-require-js/ 谁适合读这篇文章 对 JavaScript 有一定的了解,写过一定规模的 JavaS