一、require
  了解requirejs之前首先明白什么是模块化;
  1、什么是模块化?
    模块化设计是指在对一定范围内的不同功能或相同功能不同性能、不同规格的产品进行功能分析的基础上,划分并设计出一系列功能模块,通过模块的选择和组合可以构成不同的产品,以满足市场的不同需求的设计方法。
    我的理解就是根据不同的功能和不同的产品属性分成不同的模块,然后模块之间相互关联,构成项目(粗浅实用);
  2、模块化的优点?
    ①、.相对独立性,可以对模块单独进行设计、制造、调试、修改和存储,这便于由不同的专业化企业分别进行生产;
    ②、性能稳定、结构简单、成本低廉;
    ③、便于维护,有利于团队开发;
  3、js中模块化有哪些产品?
    ①、sea.js
    ②、require.js
  4、require.js
    RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。
    require中的依赖是一个数组,即使只有一个依赖,你也必须使用数组来定义,
    requir API的第二个参数是callback,一个function,是用来处理加载完毕后的逻辑。
  5、加载文件

    ①、通过define函数定义了一个模块,然后再页面中使用:

    ②、加载模块

    require.config是用来配置模块加载位置;

    通过paths的配置会使我们的模块名字更精炼,paths还有一个重要的功能,就是可以配置多个路径;

    shim配置非AMD模块输出,没有用define来申明的模块;

    ③、requirejs提供了一种叫"主数据"的功能,我们首先创建一个main.js:
    然后再页面中使用下面的方式来使用requirejs:

    加载requirejs脚本的script标签加入了data-main属性,这个属性指定的js将在加载完reuqire.js后处理,我们把require.config的配置加入到data-main后,就可以使每一个页面都使用这个配置,然后页面中就可以直接使用require来加载所有的短模块名,data-main还有一个重要的功能,当script标签指定data-main属性时,require会默认的将data-main指定的js为根路径,是什么意思呢?如上面的data-main="js/main"设定后,我们在使用require(['jquery'])后(不配置jquery的paths),require会自动加载js/jquery.js这个文件,而不是jquery.js,相当于默认配置了:

    ④、main的设置

require.js(浅聊)的更多相关文章

  1. 记录:sea.js和require.js配置 与 性能对比

    最近有点忙,很久无写博客,记录一下之前的配置require.js和sea.js的配置.(有误有望提出 require.js 文件目录 /app(项目使用js) /lib(require.js jq存放 ...

  2. Javascript模块化编程(三):require.js的用法

    Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...

  3. javascript模块化编程(三):require.js用法

    本文来自阮一峰 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require ...

  4. require.js工作原理(初始)

    详情:请见阮一峰老师的日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html: 导入:<script data-main=" ...

  5. Javascript模块化编程(三):require.js的用法(转)

    这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的 ...

  6. require.js源码分析

    写的寥寥草草,博客园的布局怎么弄还没有研究,再保存一份草稿,日后在完善,深度研究 require.js 加载顺序 1:加载html主页,require.js文件 2:脚本执行到html中的script ...

  7. Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块

    传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...

  8. require.js

    日期: 2012年11月 7日 http://www.ruanyifeng.com/blog/2012/11/require_js.html 这个系列的第一部分和第二部分,介绍了Javascript模 ...

  9. require.js 入门笔记

    网站越来越庞大,JS也是越写越多. 当所有的JS 都集中在 HTML的 head 部分时,网页加载变得很慢,很多的 JS代码也并不是全都适用在当前的页面,造成了代码的冗余度非常高. 而且长长的JS代码 ...

随机推荐

  1. 求数组的最小数、最大值,求一组数的平均数,sort函数详解,类数组转数组

    求数组的最小值和最大值 //求数组当中最大值和最小值 var arr=[3,2,6,1,45,23,456,23,2,6,3,45,37,89,30]; //第一种方法 根据排序方法来求最大值和最小值 ...

  2. 关于DB2死锁处理

    昨天在修改字段类型的时候引起了死锁,我一般会使用REORG命令处理,在控制中心下 只需要执行 REORG TABLE TABLENAME  命令就可以, 但是在 RazorSQL 下执行此命令会报缺失 ...

  3. 解决shiro和quartz2 版本冲突问题

    修改build.gradle   compile ("org.quartz-scheduler:quartz:2.2.3") compile ("org.apache.s ...

  4. Lock(一)认识v$LOCK

    v$lock列出了数据库当前拥有的锁及未完成的锁请求. Column Description ADDR 被锁对象的地址 KADDR 锁的地址 SID session id(这里特指正在锁定对象或请求去 ...

  5. 建造者模式—设计角度重温DNF中的角色

    应用场景 假设现在我们要设计DNF中的人物角色(鬼剑士.神枪手.魔法师.圣骑士.格斗家).然而,利用面对对象的思想,必须先从实体入手,每一个角色都包含各种装备.武器.配饰,这些就当做要建造的零件,然后 ...

  6. Angular随笔第一课

    一.调用angular 加载angular.js库(可以从google的cdn中加载类库,https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/a ...

  7. pod出现include of non-modular header inside framework module 错误

    今天打包pod 的时候 出现的错误 -> AFNetworking+RX (3.1.0.18) - ERROR | [iOS] xcodebuild: Returned an unsuccess ...

  8. Unity与Android交互-Unity接入高德地图实现定位以及搜索周边的功能(使用Android Studio)详细操作

    刚进公司给安排的任务就是Unity接入高德地图,算是踩了不少坑总算做出来了,抽点时间写个博客记录一下 废话不多说 先上效果图 获取定位并根据手机朝向显示周边信息            使用的Unity ...

  9. STM8程序在IAR中报错 unable to allocate space for sections

    Error[Lp011]: section placement failed: unable to allocate space for sections/blocks with a total es ...

  10. 写JS自执行函数时要注意的

    JS是非强类型语言,且IDE也不够智能,所以经常会在语句结束时漏写了分号,一般情况下这是不影响运行的, 但如果后面跟上的是一段自执行的函数,就会报出 "..... is not functi ...