2006年,由于微软的名声比SUN公司的名声要大,选择了asp.net,利用VS开发了很多项目,那个时候觉得自己真是很牛气,什么都能做;现在随着互联网和移动互联的冲击,这些传统技术也受到了冲击,由于ASP.NET不开源,市场迅速减少;让我也开始怀疑微软在做什么了?所以我不在等了,2014年,开始转行java;开启了java之路;互联网之旅,从此开始了。

一个项目团队,竟然没有做前端开发,把团队成员都当做特种兵,我又从服务端开始接触前端。

一个服务端程序员,开始专心研究前端,这是要转行的节奏吗?扯远了,开始我们今天的主题

随着JS越来越庞大,已经不仅仅是以前复制粘贴做特效的时代了,JS越来越偏向于业务逻辑与应用。JS在web开发中占有越来越重要的地位。由于JS代码庞大,文件数目多,传统的使用<script src=""></script>会带来很多性能的问题,因此requirejs可以为我们提供两种解决思路:

1、模块化组织JS;(避免网页失去响应)

2、异步加载JS文件;(便于代码的编写和维护)

核心文件 require.js和config.js(JS统一入口配置文件);

引用

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

data-main:配置文件入口(类似java中的main函数);data-*** 是HTML5规范中新增的html元素属性;

配置文件示例:

require.config({
baseUrl:"/public/jsFrame/",“根路径”

paths: {
"Main": 'Home/main/mainIndex'  “模块名称:路径”
},
map: {
'*': {
'css': 'bower/require-css/css',“优先加载”
},
},

shim: {“加载非AMD方式的JS文件代码”

'Page': {
deps:[
'css!/public/Css/Home' “代码加载依赖”
]
}
},

urlArgs: 't=随机数(解决业务JS代码的缓存问题)' //增加版本,解决js缓存
});

1、模块化文件,一般是一个功能是一个文件。文件的名字,就是上面requireconfig中配置的模块名字。require加载文件时,会自动加上.js后缀。

2、当某些模块依赖其他模块时,可以通过define([xxx],function(xxx){yyy});的方式添加依赖关系,require会在异步加载后,自动调整次序。

define是定义js模块,require是运行脚本;

require.js加载的模块,采用AMD规范。也就是说,模块必须按照AMD的规定来写。

具体来说,就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中。

 例如:require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){

    // some code here

  });

require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,上例就是['moduleA', 'moduleB', 'moduleC'],即主模块依赖这三个模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。

require.js会先加载moduleA、moduleB和moduleC,然后再运行回调函数

requirejs学习之路的更多相关文章

  1. jQuery学习之路(1)-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  2. Android开发学习之路-RecyclerView滑动删除和拖动排序

    Android开发学习之路-RecyclerView使用初探 Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析 Android开 ...

  3. RPC远程过程调用学习之路(一):用最原始代码还原PRC框架

    RPC: Remote Procedure Call 远程过程调用,即业务的具体实现不是在自己系统中,需要从其他系统中进行调用实现,所以在系统间进行数据交互时经常使用. rpc的实现方式有很多,可以通 ...

  4. webService学习之路(三):springMVC集成CXF后调用已知的wsdl接口

    webService学习之路一:讲解了通过传统方式怎么发布及调用webservice webService学习之路二:讲解了SpringMVC和CXF的集成及快速发布webservice 本篇文章将讲 ...

  5. [精品书单] C#/.NET 学习之路——从入门到放弃

    C#/.NET 学习之路--从入门到放弃 此系列只包含 C#/CLR 学习,不包含应用框架(ASP.NET , WPF , WCF 等)及架构设计学习书籍和资料. C# 入门 <C# 本质论&g ...

  6. Redis——学习之路四(初识主从配置)

    首先我们配置一台master服务器,两台slave服务器.master服务器配置就是默认配置 端口为6379,添加就一个密码CeshiPassword,然后启动master服务器. 两台slave服务 ...

  7. Redis——学习之路三(初识redis config配置)

    我们先看看config 默认情况下系统是怎么配置的.在命令行中输入 config get *(如图) 默认情况下有61配置信息,每一个命令占两行,第一行为配置名称信息,第二行为配置的具体信息.     ...

  8. Redis——学习之路二(初识redis服务器命令)

    上一章我们已经知道了如果启动redis服务器,现在我们来学习一下,以及如何用客户端连接服务器.接下来我们来学习一下查看操作服务器的命令. 服务器命令: 1.info——当前redis服务器信息   s ...

  9. 踏上Salesforce的学习之路(一)

    相信通过前面的学习,大家已经拥有了一个属于自己的Salesforce开发者账号,下面,我们将用这个账号正式踏上Salesforce的学习之路. 首先,点击网址:https://developer.sa ...

随机推荐

  1. jquery操作radio单选按钮、checked复选框。

    一.radio 取值: $('input[name=radio]:checked').val(); 二.checked 判断checked是否被选中 $("input[type='check ...

  2. CSS 属性 - 伪类和伪元素的区别

    伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...

  3. sharepoint 2013 文件“/_controltemplates/SPMRB/AllStatBookingsForm.ascx”不存在

    现象: 文件“/_controltemplates/SPMRB/AllStatBookingsForm.ascx”不存在. 分析: 此代码在sp2010好用,但是在sp2013则报以上错误. 解决办法 ...

  4. iOS扫一扫功能开发

    之前很多二维码扫描都是基于zxing做的,但是zxing用起来真的很麻烦,又一直不更新.随着iOS6退出历史舞台,终于可以使用iOS7以后,用系统的AVFoundation做的二维码扫描器了. 初始化 ...

  5. jvm运行时环境属性一览

    前言: 在web编程技术内幕中看到一个用apache组件进行文件下载的例子,对于DiskFileUpload类的setRepositoryPath方法,设置临时文件的存放路径,里面指出如果不调用该方法 ...

  6. iOS Technology Overview_Introduction

    关于iOS技术 iOS是运行在iPad,iPhone和iPod touch设备上的操作系统.这个操作系统管理着这些设备的硬件并且提供了实现原生APP所需的技术.这个操作系统也附带许多系统APP,例如P ...

  7. 听说你会打地鼠(动态规划dp)

    题目来源:https://biancheng.love/contest-ng/index.html#/41/problems G 听说你会打地鼠 时间限制:300ms   内存限制:65536kb 题 ...

  8. office2010安装报错

    有没有童鞋,在第一次安装office 2010的时候,中途不管是何原因导致中断或者未安装成功的 然后从第二次开始就一直安装报错??? 哈哈,我最近就遇到了 其他很简单,网上有很多方法,也有很多步骤,包 ...

  9. 评价网站UI--北京邮电大学首页

    首页给人的第一个印象是直观简洁,色调舒适.背景为北邮校内特色建筑美景,令人赏心悦目. 从布局看,结构层次分明.“北京邮电大学”及其校徽清晰明朗却不显突兀.并列着四个大标题:“北邮概况”.“学在北邮”. ...

  10. [转载] 关于PreparedStatement.addBatch()方法

    Statement和PreparedStatement的区别就不多废话了,直接说PreparedStatement最重要的addbatch()结构的使用. 1.建立链接(打电话拨号) Connecti ...