前言

前段时间粗略的扫过一次require.js,当时没怎么在意,结果昨天看到index里面的代码就傻了,完全不知道从哪开始看啦,所以require与backbone的学习还要加紧才行。

由于前端所占业务越来越重,所以出现了模块化编程,但是js加载的先后顺序可能会给我们带来麻烦。

有时候我们为了解决页面堵塞会采用异步加载js的方式,这种方式往往带来了一些不确定因素。

为了解决这些问题,James Burke 便搞了一个AMD(Asynchronous Module Definition 异步模块定义)规范

异步加载模块,模块加载不影响后续语句执行。

我们这里要学习的require.js就是一个实现了AMD的库,他的提出解决了以下问题:

① 实现javascript异步加载,避免页面假死

② 管理模块之间的依赖性,便于代码编写与维护(这是重点啊)

于是我们一起来学习require.js吧

惊鸿一瞥

首先看一看我们的项目文件目录:

我们写下第一段代码:

现在我们的js就需要一个像C语音的main函数,所以我在htm目录再建一个main.js吧

1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title></title>
4 <script src="js/require.js" type="text/javascript" data-main="main"></script>
5 </head>
6 <body>
7 </body>
8 </html>

这样我们就成了一个require项目啦。。。需要注意的是这里的

data-main="main"

main指的就是main.js,这个main就是我们传说中的入口函数了。

我先随便在main中写点东西:

alert('刀狂剑痴')

最后我们看看我们的页面:

我们看到他自己引入了main.js,而且是异步的,不会出现阻塞哦。

现在我们换个写法:

 1 /// <reference path="js/require.js" />
2 /// <reference path="js/jquery.js" />
3
4 require.config({
5 paths: {
6 jquery: 'js/jquery',
7 test: 'js/test'
8 }
9 });
10
11 require(['jquery', 'test'], function ($) {
12 alert($().jquery);//打印版本号
13 });

因为我们js文件与htm不是一个目录,所以前面path就在设置目录了,这里首先会加载jquery然后加载我们自定义的test.js。

我们也可以这样写:

 1 require.config({
2 // paths: {
3 // jquery: 'js/jquery',
4 // test: 'js/test'
5 // },
6 baseUrl: 'js'
7 });
8
9 require(['jquery', 'test'], function ($) {
10 alert($().jquery);//打印版本号
11 });

反正最后我们完成了第一个例子,现在我们来阶段总结一番:

【阶段总结】

① main使用了config与require,config用于配制一些基本参数,常用:path、baseUrl

② require第一个参数为数组,数组项目为模块名,他们会依次加载,是有一定顺序的

小小实战接触define

我们这里来搞一个测试,原来不是写了一个图片延迟加载的东东么,我们使用require来试试:

HTML结构:

 html

核心代码:

<script src="js/require.js" type="text/javascript" data-main="main"></script>

main代码:

1 require.config({
2 baseUrl: 'js'
3 });
4
5 require(['jquery', 'test'], function ($, imgLazyLoad) {
6 imgLazyLoad($('#con')); //图片延迟加载
7 });

test.js:

 1 define(function () {
2 function imgLazyLoad(container) {
3 var imgLazyLoadTimer = null;
4 var resetImglazy = null;
5 container = container || $(window); //需要时jquery对象
6 var imgArr = {};
7 initImg();
8 lazyLoad();
9 autoLoad();
10 container.scroll(function () {
11 lazyLoad();
12 });
13 $(window).resize(function () {
14 initImg();
15 });
16 $(document).mousemove(function () {
17 clearTimeout(imgLazyLoadTimer);
18 if (resetImglazy) clearTimeout(resetImglazy);
19 resetImglazy = setTimeout(function () {
20 autoLoad();
21 }, 5000);
22 });
23 function initImg() {
24 $('img').each(function () {
25 var el = $(this);
26 if (el.attr('lazy-src') && el.attr('lazy-src') != '') {
27 var offset = el.offset();
28 if (!imgArr[offset.top]) {
29 imgArr[offset.top] = [];
30 }
31 imgArr[offset.top].push(el);
32 }
33 });
34 }
35 function lazyLoad() {
36 var height = container.height();
37 var srollHeight = container.scrollTop();
38 for (var k in imgArr) {
39 if (parseInt(k) < srollHeight + height) {
40 var _imgs = imgArr[k];
41 for (var i = 0, len = _imgs.length; i < len; i++) {
42 var tmpImg = _imgs[i];
43 if (tmpImg.attr('lazy-src') && tmpImg.attr('lazy-src') != '') {
44 tmpImg.attr('src', tmpImg.attr('lazy-src'));
45 tmpImg.removeAttr('lazy-src');
46 }
47 }
48 delete imgArr[k];
49 }
50 }
51 } //lazyLoad
52 function autoLoad() {
53 var _key = null;
54 for (var k in imgArr) {
55 if (!_key) {
56 _key = k;
57 break;
58 }
59 }
60 var _imgs = imgArr[_key];
61 for (var i = 0, len = _imgs.length; i < len; i++) {
62 var tmpImg = _imgs[i];
63 if (tmpImg.attr('lazy-src') && tmpImg.attr('lazy-src') != '') {
64 tmpImg.attr('src', tmpImg.attr('lazy-src'));
65 tmpImg.removeAttr('lazy-src');
66 }
67 }
68 delete imgArr[_key];
69 if (imgLazyLoadTimer) {
70 clearTimeout(imgLazyLoadTimer);
71 }
72 imgLazyLoadTimer = setTimeout(autoLoad, 3000);
73 }
74 } //imgLazyLoad
75 return imgLazyLoad;
76 });

演示地址,效果类似而已

http://sandbox.runjs.cn/show/7vpjps1r

【阶段总结】

这里我们使用了一个新的东西:define

define的参数是一匿名函数,他会有一个返回值,我这里直接返回了函数本身,然后在回调函数中调用之。
我们可以在define中定义一个对象然后返回对象名那么用法就更多了

补充

刚刚看到了一个shim,于是我们这里简单补充一下吧

 1 shim: {
2 $: {
3 exports: 'jQuery'
4 },
5 _: {
6 exports: '_'
7 },
8 B: {
9 deps: [
10 '_',
11 '$'
12 ],
13 exports: 'Backbone'
14 }
15 },

shim参数用于解决使用非AMD定义的模块载入顺序问题。

PS:这个是神马意思,我还没完全理解,大概是使用jquery插件时候需要先保证jquery下载才行吧?这里后面再补充。

总结

RequireJs还有许多东西需要学习,今天暂时到这,后面学习时会与backbone整合。

我们现在再回过头看看require解决了什么问题?

因为我们程序的业务由服务器端逐步转到了前端,所以我们的javascript开发变得越发庞大了。

我们需要模块化编程维护着一个个小的单元,比如我们一个复杂的逻辑可能分为几个js。

然后一个复杂的项目结束后可能会有上百个小文件,RequireJS提供了.js进行压缩。

关于压缩相关知识我们后面点再学习啦。。。

 
 
分类: Web前端
标签: require.js

Web前端Require.js的更多相关文章

  1. Web前端-Vue.js必备框架(五)

    Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...

  2. Web前端-Vue.js必备框架(四)

    Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...

  3. Web前端-Vue.js必备框架(三)

    Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...

  4. Web前端-Vue.js必备框架(二)

    Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...

  5. Web前端-Vue.js必备框架(一)

    Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  6. 【RSA】在 ASP.NET Core中结合web前端JsEncrypt.JS使用公钥加密,.NET Core使用私钥解密;

    有一个需求,前端web使用的是JsEncrypt把后端给的公钥对密码进行加密,然后后端对其进行解密: 使用的类库如下: 后端使用第三方开源类库Bouncy Castle进行RSA的加解密和生成PEM格 ...

  7. web前端----JavaScript(JS)简单介绍

    JavaScript(JS) 一.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEa ...

  8. Web前端开发--JS技术大梳理

    什么是JS      JavaScript是一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语 ...

  9. web前端——Vue.js基础学习

    近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...

随机推荐

  1. WebService它CXF注释错误(两)

    WebService它CXF注解 1.详细报错例如以下 五月 04, 2014 11:24:12 下午 org.apache.cxf.wsdl.service.factory.ReflectionSe ...

  2. JS正则替换字符串

    1.只替换第一次出现的字符: text.replace(/javascript/i, "JavaScript");  //正则用//来将正则包起来 i表示区分大小写 2.全局替换: ...

  3. SQL Server调优系列基础篇(常用运算符总结)

    原文:SQL Server调优系列基础篇(常用运算符总结) 前言 上一篇我们介绍了如何查看查询计划,本篇将介绍在我们查看的查询计划时的分析技巧,以及几种我们常用的运算符优化技巧,同样侧重基础知识的掌握 ...

  4. 泛型委托及委托中所涉及到匿名方法、Lambda表达式

    泛型委托及委托中所涉及到匿名方法.Lambda表达式 引言: 最初学习c#时,感觉委托.事件这块很难,其中在学习的过程中还写了一篇学习笔记:委托.事件学习笔记.今天重新温故委托.事件,并且把最近学习到 ...

  5. 由一个LED闪烁问题发现的MTK的LED driver中存在的问题

    今天依据最新的需求要对LED灯的提示闪烁频率进行改动,将之前默认的2000ms改为10000ms,可是改动之后没有产生预料中的效果,而是变成了常量,百思不得其解,最后还是read the fuckin ...

  6. PE文件结构(五岁以下儿童)基地搬迁

    PE文件结构(五岁以下儿童) 參考 书:<加密与解密> 视频:小甲鱼 解密系列 视频 基址重定位 链接器生成一个PE文件时,它会如果程序被装入时使用的默认ImageBase基地址(VC默认 ...

  7. knob.js进度插件

    关于knob.js进度插件的使用 关于这个插件,妹的,第一次使用坑死爹了,各种不会,幸亏我有持之以恒的精神,最终还是让其臣服于我的胯下.... 1.  引入 head  部分添加knob.js,同时引 ...

  8. java 学习List 的 add 与set差分法

    /** * 在List收集在许多方面.add(int index,Object obj)方法与set(int index,Object e)方法不易区分 * .通过以下实例.能够看出两个方法中的差别 ...

  9. hibernate在持久对象的生命周期(三州:自由状态,持久状态,自由状态 之间的转换)

    三种状态的基本概念: 1.  临时身份(Transient):也被称为自由状态,它只存在于内存中,并且在数据库中没有相应的数据. 使用new创建的对象,久化,没有处于Session中,处于此状态的对象 ...

  10. iOS基础 - 静态库

    一.什么是库? 库是共享程序代码的方式,一般分为静态库和动态库. 二.静态库与动态库的区别? 静态库:链接时完整地拷贝至可执行文件中,被多次使用就有多份冗余拷贝. 动态库:链接时不复制,程序运行时由系 ...