AMD-requireJS

require.js是AMD的一种实现形式。

加载:

  <script src="require.js" data-main="main"></script>(有时可加载文件可能造成页面失去响应,吧加载写在网页底部 )

main.js

  主模块,依赖于其他模块。

  require([‘m1‘,‘m2‘,‘m3‘],function(m1,m2,m3){

    代码

  }) 第一个参数是加载的依赖,必须是数组;第二个参数是回调函数,加载成功后会被调用

模块的加载

  需要使用require.config()方法,主要是加载例如jQuery这样的js文件写在main.js的头部;

  require.config({

    //比如说现在m1,m2,m3与main.js在同一级目录下,加载路劲为:

    paths:{      //模块路劲

      m1:‘m1‘,

      m2:‘m2‘,

      m3:‘m3‘

    }

    //如果不在同一级目录下,可以修改基目录baseUrl,加入都在JS中lib文件下

    baseUrl:"js/lib"  

    paths:{      //模块路劲

      m1:‘m1‘,

      m2:‘m2‘,

      m3:‘m3‘

    }

    //如果在另一台主机上,直接后面接网址就可以了

  })

加载非规范的模块

  require.config({

    shim:{

      ‘underscore‘:{
        exports: ‘_‘

      },

      ‘backbone‘: {
        deps: [‘underscore‘, ‘jquery‘],
        exports: ‘Backbone‘
      }

    }

  })

  shim属性:专门用来配置不兼容的模块;exports:标明这个模块外部调用时的名称;deps:标明该模块的依赖性,主要依赖的什么文件

时间: 2024-10-24 21:39:52

AMD-requireJS的相关文章

CommonJS,AMD,RequireJS的区别

RequireJS实现了AMD的API. CommonJS是使用exports对象来定义模块的一种方法,它定义了模块的内容.简单地实现一个CommonJS的定义就像下面这样: // someModule.js exports.doSomething = function() { return "foo"; }; //otherModule.js var someModule = require('someModule'); // in the vein of node exports.

CommonJS,AMD,RequireJS的差别

RequireJS实现了AMD的API. CommonJS是使用exports对象来定义模块的一种方法,它定义了模块的内容.简单地实现一个CommonJS的定义就像以下这样: // someModule.js exports.doSomething = function() { return "foo"; }; //otherModule.js var someModule = require('someModule'); // in the vein of node exports.

CommonJS和AMD/CMD

JS中的模块规范(CommonJS,AMD,CMD) 一,CommonJS NodeJS是CommonJS规范的实现,webpack也是以CommonJS的形式来书写. 在浏览器环境下,没有模块也不是特别大的问题,毕竟网页程序的复杂性有限,但在服务器端,一定要有模块,与操作系统和其他应用程序互动,否则根本没法编程. node.js的模块系统,就是就是参照CommonJS规范实现的.在CommonJS中,有一个全局性方法require(),用于加载模块. 二,AMD RequireJS实现了AMD

结构-行为-样式 - Angularjs 环境下Ztree结合JqueryUI实现拖拽

新的项目中有一个需求是要求客户标签可以自定义,于是就想到了客户体验,让客户自己拖拽标签进行组合查询.但是理想很丰满,现实很骨感.一开始就遇到了问题,各个插件之间的结合问题,折腾一翻之后终于实现了这个功能,这里记录一下. 首先,在Angularjs+AMD+RequireJs的环境下引入插件: require.config({ baseUrl: "", urlArgs: 'ver=' + (+new Date()), waitSeconds: 0, paths: { 'jqueryUI'

JS模块化历程

这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生与变迁,展望ES6模块化标准的未来.经历过这段历史的人或许会感到沧桑,没经历过的人也应该知道这段历史. 一.无模块时代 在ajax还未提出之前,JS还主要用来在网页上进行表单校验.实现简单的动画效果等等,你可以回想一下那个网页上到处有公告块飘来飘去的时代. 这个时候并没有前端工程师,服务端工程师只需在页面上随便写写js就能搞定需求.那个时候的前端代码大概像这样: if(xx){ //....... } else{ //xxxxxx

JS模块化规范CMD之SeaJS

1. 在接触规范之前,我们用模块化来封装代码大多为如下: ;(function (形参模块名, 依赖项, 依赖项) { // 通过 形参模块名 修改模块 window.模块名 = 形参模块名 })(window.模块名 || {}, 依赖项, 依赖项) 分号是什么作用? 答:为了防止前面的代码没有添加分号造成语法解析错误,也可能会是 "!", "+" 等 为什么要将代码放入一个自执行函数中 答:为了避免全局命名空间污染,核心就是利用函数的私有作用域 为什么将依赖项作

JS模块化

1.简介 来自nodejs 分类: AMD -- RequireJS CMD -- Sea.js 2.AMD 特点:异步加载模块,依赖前置,提前执行 define定义模块 define(['require', 'foo'], function( ){ return }); require加载模块,依赖前置 require(['foo', 'bar'], function(foo, bar){ }); 3.CMD 特点:同步加载,依赖就近,延迟执行 difine定义export导出 define(

AngularJS模块规范和性能优化

模块化规范 概念:根据我们写的不同的功能按照不同的类型划分,分工协作 作用:辅助的作用,能将我们编写好的js分为模块,是我们代码的编写更加专业 come on js 引入模块是同步进行的:前面记载以后,后面才能使用,所以不适合前端,主要是适用于后台 nodejs用的最多 amd 概念:a异步,m模块,d定义(异步模块化规范),引入模块可以异步加载 jquery和bootstrap都支持amd requirejs运用的最多 require js 主模块引入:data-main="url"

javascript中模块化知识总结

JavaScript 模块化开发 1. 模块化介绍 掌握模块化基本概念以及使用模块化带来的好处 当你的网站开发越来越复杂的时候,会经常遇到什么问题? 恼人的命名冲突 繁琐的文件依赖 历史上,JavaScript一直没有模块(module)体系, 无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来. 其他语言都有这项功能,比如Ruby的 require.Python的 import , 甚至就连CSS都有 @import , 但是JavaScript任何这方面的支持都没有,这对开发大型

第一次写jquery插件,来个countdown计时器吧

之前同学做个购物商城秒杀活动需要计时器的功能,在用jquery提供的countdown插件时,一直报错,貌似还需要依赖除jquery之外的其他插件,搞了半天也没搞成功,就叫我帮忙写个.然而我并没有写过插件,不过刚好趁这次端午好好地锻炼一把吧,顺便在这儿存个代码,自己的思路不好,大神们请不要见笑哈... 废话不多说,直接上代码: =======================================请叫我华丽的分割线=====================================