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. Angular框架

    Angular 框架 Angular介绍 库和框架的区别 jQuery:库 库一般都是封装了一些常用的方法 自己手动去调用这些方法,来完成我们的功能 code $('#txt').val('我是小明' ...

  2. 关于原生的Javascript

    JQuery是个好工具,它做了太多的事. 以至于让人渐渐忘记原生的JS该怎么写了,导致连为了用个DOM选择器或者Ajax就直接加个JQuery,确实,JQuery太方便了. 坏处: 由于JQuery的 ...

  3. 设置ArcGIS的外观改回到出厂

    在一般的软件中,都可以在工具-选项中打开相关设置将应用程序的外观改回到出厂.但ArcGIS好像没有,但查帮助文档原来是这样: 配置的更改保存在模板文档中(例如,ArcMap 将其更改保存在 Norma ...

  4. App开发流程之状态栏和导航栏

    记录状态栏和导航栏的设置和控制,统一在基类视图控制器中完成. 状态栏. 状态栏高度为20,iOS7以后背景完全透明. 样式枚举如下: typedef NS_ENUM(NSInteger, UIStat ...

  5. iOS 按钮小知识点总结

    //设置按钮里面图片和文字的间距 btn.titleEdgeInsets=UIEdgeInsetsMake(0, 20, 0, 0); button.imageEdgeInsets = UIEdgeI ...

  6. IOS之KVC和KVO(未完待续)

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  7. 简单的Windows登陆界面设计

    要求: 1.用户名必须为字母. //限定用户名必须为字母 private void txtName_KeyPress(object sender, KeyPressEventArgs e) { if ...

  8. Effective Java 63 Include failure-capture information in detail message

    Principle To capture the failure, the detail message of an exception should contain the values of al ...

  9. javascript 特效实现(3)—— 鼠标滑过显示二级菜单效果

    1. 关键代码:使用 switch 或 if 判断语句,改变对应的二级菜单显示方式为 block 或 none function selectTabMenu(i){ switch(i){ case 7 ...

  10. [转载]UEditor报错TypeError: me.body is undefined

    本文转载来自:UEditor报错TypeError: me.body is undefined 今天在使用UEditor的setContent的时候报错,报错代码如下 TypeError: me.bo ...