资讯专栏INFORMATION COLUMN

前端AMD规范

molyzzx / 404人阅读

摘要:如果是对象,此对象应该为模块的输出值在页面上使用函数加载模块函数接受两个参数第一个参数是一个数组,表示所依赖的模块第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。

个人总结:AMD规范主要是解决各个模块之间的依赖关系,可以顺序的加载js模块,但是却是异步加载,不会影响页面的css和html标签的加载。

AMD 即Asynchronous Module Definition,中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范
由于不是JavaScript原生支持,使用AMD规范进行页面开发需要用到对应的库函数,也就是大名鼎鼎RequireJS,实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出
requireJS主要解决两个问题
多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器
js加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长
看一个使用requireJS的例子
// 定义模块 myModule.js

define(["dependency"], function(){
    var name = "Byron";
    function printName(){
        console.log(name);
    }

    return {
        printName: printName
    };
});

// 加载模块
require(["myModule"], function (my){
  my.printName();
});

语法
requireJS定义了一个函数 define,它是全局变量,用来定义模块

define(id?, dependencies?, factory);
id:可选参数,用来定义模块的标识,如果没有提供该参数,脚本文件名(去掉拓展名)
dependencies:是一个当前模块依赖的模块名称数组
factory:工厂方法,模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值
在页面上使用require函数加载模块

require([dependencies], function(){});
require()函数接受两个参数

第一个参数是一个数组,表示所依赖的模块
第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块
require()函数在加载依赖的函数的时候是异步加载的,这样浏览器不会失去响应,它指定的回调函数只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。

推荐文章:http://www.cnblogs.com/dolphinX/p/4381855.html

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79950.html

相关文章

  • 前端模块化开发

    摘要:来源于阿贤博客模块化今天给大家写一篇关于前端模块化开发知识点。前端模块化开发那点历史模块化是指在解决某个复杂混杂问题时,依照一种分类的思维把问题进行系统性的分解以之处理。 来源于:阿贤博客 javascript模块化 今天给大家写一篇关于前端模块化开发知识点。 前端模块化开发那点历史 模块化: 是指在解决某个复杂、混杂问题时,依照一种分类的思维把问题进行系统性的分解以之处理。模块...

    tianhang 评论0 收藏0
  • 从 1 到完美,写一个 js 库、node 库、前端组件库

    摘要:从到完美,写一个库库前端组件库之前讲了很多关于项目工程化前端架构前端构建等方面的技术,这次说说怎么写一个完美的第三方库。使用导出模块,就可以在使用这个库的项目中构建时使用功能。 从 1 到完美,写一个 js 库、node 库、前端组件库 之前讲了很多关于项目工程化、前端架构、前端构建等方面的技术,这次说说怎么写一个完美的第三方库。 1. 选择合适的规范来写代码 js 模块化的发展大致有...

    rollback 评论0 收藏0
  • 从 1 到完美,写一个 js 库、node 库、前端组件库

    摘要:从到完美,写一个库库前端组件库之前讲了很多关于项目工程化前端架构前端构建等方面的技术,这次说说怎么写一个完美的第三方库。使用导出模块,就可以在使用这个库的项目中构建时使用功能。 从 1 到完美,写一个 js 库、node 库、前端组件库 之前讲了很多关于项目工程化、前端架构、前端构建等方面的技术,这次说说怎么写一个完美的第三方库。 1. 选择合适的规范来写代码 js 模块化的发展大致有...

    xiaolinbang 评论0 收藏0
  • 前端模块化进程,commonJS,AMD,CMD对比

    摘要:是另一种模块化方案,它与很类似,不同点在于推崇依赖前置提前执行,推崇依赖就近延迟执行。 commonJS规范 随着前端技术的不断发展,项目越来越大,越来越不好管理,多人开发越来让开发者头疼,于是出现了命名空间,这没有办法的办法,但是所有变量都是全局的话,管理非常混乱,而且在Node 出现前,javascript 在服务器端基本没有市场,经过javascript 不断努力,社区为 jav...

    firim 评论0 收藏0
  • 【JS基础】一文看懂前端模块化规范

    摘要:参考资料前端模块化详解完整版入门近一万字的语法知识点补充彻底搞清楚中的和和详解 前言 前端的模块化之路经历了漫长的过程,想详细了解的小伙伴可以看浪里行舟大神写的前端模块化详解(完整版),这里根据几位大佬们写的文章,将模块化规范部分做了汇总和整理,希望读完的小伙伴能有些收获,也希望觉得有用的小伙伴可以点个赞,笔芯。 什么是模块 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件)...

    HelKyle 评论0 收藏0
  • 前端模块化规范笔记

    摘要:目前通行的的模板规范共有两种和的模块系统,是参照规范实现的即为服务器端模块的规范。规范则是非同步加载模块,允许指定回调函数。 目前通行的Javascript的模板规范共有两种:CommonJS 和 AMD commonjs nodejs的模块系统,是参照commonjs规范实现的 commonjs即为服务器端模块的规范。 commonjs的规范: 根据commonjs规范,一个单独的...

    honmaple 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<