requirejs学习

RequireJS的目标是鼓励代码的模块化，它使用了不同于传统<script>标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。

优点

防止js加载阻塞页面渲染(<head>中写<script>会阻塞中内容的加载)
使用程序调用的方式加载js,防出现大量<script>加载代码

例子

目录结构

index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><script data-main="js/data_main.js" src="js/lib/require.js"></script><title></title></head><body></body>
</html>

data_main.js

requirejs.config({baseUrl:'js',paths:{app:'app',app1:'/requireJsWeb/js/app1',jquery : ["http://libs.baidu.com/jquery/2.0.3/jquery"]}
});
//建议写在html中,不同html加载不同js
require(['jquery','app','app1'],function($){$(function(){alert("load finished");  })
});

require中的依赖是一个数组，即使只有一个依赖，你也必须使用数组来定义，require API的第二个参数是callback，一个function，是用来处理加载完毕后的逻辑。
baseUrl亦可通过RequireJS config手动设置。如果没有显式指定config及data-main，则默认的baseUrl为包含RequireJS的那个HTML页面的所属目录。
RequireJS默认假定所有的依赖资源都是js脚本，因此无需在module ID上再加".js"后缀，RequireJS在进行module ID到path的解析时会自动补上后缀。
有时候你想避开"baseUrl + paths"的解析过程，而是直接指定加载某一个目录下的脚本。此时可以这样做：如果一个module ID符合下述规则之一，其ID解析会避开常规的"baseUrl + paths"配置，而是直接将其加载为一个相对于当前HTML文档的脚本：

以 “.js” 结束.
以 “/” 开始.
包含 URL 协议, 如 “http:” or “https:”.

app.js

(function app(){alert('app.js')}());

模块不同于传统的脚本文件，它良好地定义了一个作用域来避免全局名称空间污染。它可以显式地列出其依赖关系，并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入，而无需引用全局变量。RequireJS的模块是模块模式的一个扩展，其好处是无需全局地引用其他模块。

app1.js

(function app1(){alert('app1.js');})();

参考：
http://www.runoob.com/java/java-collections.html
http://www.requirejs.cn/

requirejs学习相关推荐

RequireJS学习笔记（转）
前言进入移动前端是很不错的选择,这块也是我希望的道路,但是不熟悉啊... 现在项目用的是require+backbone,整个框架被封装了一次,今天看了代码搞不清楚,觉得应该先从源头抓起,所以再看看 ...
requirejs学习之-- 初始化（一）
为了规范在项目中使用的javascript代码,我们使用了requirejs框架. 初始阶段,我们在按钮的点击事件中调用创建的模块,代码如下: function button_click() {_th ...
requirejs 学习笔记 0
2019独角兽企业重金招聘Python工程师标准>>> require.config({waitSeconds : 12,paths:{jquery : "https:// ...
requireJs学习06requirejs引入
项目常见目录结构:js目录.index.html js目录下:apps目录.libs目录.main.js文件(主入口文件) index.html <!DOCTYPE html> <h ...
requireJs学习心得
记录自己requireJs的开发心得,大神勿喷! 1.几种依赖注入方式 define([require,path/myMod1,path/moMod2], function(require,mod1, ...
requirejs加载顺序_【requireJS源码学习03】细究requireJS的加载流程
前言这个星期折腾了一周,中间没有什么时间学习,周末又干了些其它事情,这个时候正好有时间,我们一起来继续学习requireJS吧还是那句话,小钗觉得requireJS本身还是有点难度的,估计完全吸收 ...
requireJS文件夹
前言对于像我这样的requireJS刚開始学习的人而言,requireJS最难理解的部分应该是它的路径问题.晚上随便折腾了一下,算是略微理清了这个文件夹问题吧. requireJS学习网址:requ ...
最全前端资源---快过来最新鲜的资源这里都有
如果您阅读之后,感觉有缺失:麻烦您告诉我我进行补充.谢谢综合类综合类地址前端知识体系前端知识体系 - naniJser - 博客园前端知识结构 https://github.com/Ja ...
前端资源分享-只为更好前端
一.团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队,代表作品WebQQ,致力于前端技术的研究 ISUX 腾讯社交用户体验设计,简称ISUX,腾讯设计团队网站 CDC 腾讯用户 ...

requirejs学习

优点

例子

requirejs学习相关推荐

最新文章

热门文章