英特尔异步模块定义介绍和Require

By admin in 4858美高梅 on 2019年7月28日

AMD 模块

require的总结:


1.require用来将js文件模块化,能够幸免二个html文件引进过多的js文件。因为大气的加载js文件会使网页响应时间过长,並且在页面引进js文件时还要严厉注意先后顺序。

而require.js的产出能够成功在网页中只加载三个js文件,将别的的js文件作为模块引进就足以选取了。


2.js的模块化标准有三种:commonJS、速龙

commonJS适用于服务器端,是联合具名加载,服务器端所运用到的模块都以身处服务器硬盘上就此加载速度是快速的。

大致结构:

var module1 = require(‘module1’)

module1.fnName()

英特尔是适用于浏览器端的科班,因为浏览器加载所必要的js文件都在服务器上,所以同步加载模块就会让浏览器进入假死状态,而英特尔是异步加载规范。

require([module],callback)

英特尔异步模块定义介绍和Require。即

require([‘module1’],function(module1){

module1.fnName()

})


3.require.js就是适用于浏览器端的速龙规范的js库

行使手续:

a.首先定义js文件输入:

在html页面引进标签:

src=”../js/require.js” data-main=”../js/index”>

data-main定义了文件输入,require.js暗中同意文件后缀名称为.js所以只供给写index就足以

b.写index.js:

写index.js时索要铺排注重消息、加载正视等步骤

指出先从加载重视开头写,在写的长河中必要用到哪些模块的时候再回头增多,这样能够达成胸中有数,这一个是创建在模块是现有的底子上,当然若无模块一定是要策画好模块。


4.亟需注意的点:

即便很早在此之前就接触到一丁点require.js,可是有众多地点都以居于模糊不清,今日在商店决定把写过的贰个选用require.js项目重构一下,进度中看了阮一峰的稿子今后一语成谶。

在重构时遇见的多少个难点:

a.require毕竟会不会加载不切合英特尔规范的js文件:

答案是会的。

在查资料时观望一篇博客讲怎么在requirejs中运用非英特尔规范的js文件时提到,即便js文件不吻合英特尔标准,只要被抬高依赖,就能够被加载到html页面中去,只是模块不能够在主文件中选用而已,于是窃喜,并在投机代码中尝试,代码中应用了三个jquery插件,并不相符AMD标准,于是在html中写了相应代码,js文件是被加载了,但是提醒$
is
undefined,当即感到是博客说的狼狈,遂放任,不可能继承纠缠不然轻巧陷入死胡同。

转而解决另八个难点:

将另外一段不吻合英特尔规范的js文件内的代码直接放入index.js中去。该文件是对window方法requestAnimationFrame做了一个对各种浏览器的相配,由于代码是在张鑫旭小弟这里复制的所以并不知道该怎么去改成英特尔标准。索性间接获得index里面去啊。

然后稍稍研商了须臾间,以为那些实际是对window.requestAnimationFrame和window.cancelAnimationFrame那四个法子接受不了或然收受景况不等同的浏览器进行了分歧景况的管理。并不太属于模块,所以大胆认为实际不是英特尔标准改写,于是删掉index里面相关代码发掘,居然能用!!申明下边那篇博客讲的是对的!

b.于是反过头去观念为何jquery插件无法用,获得的答案是:

jquery源码中有诸有此类一段

if(typeofdefine===“function”&&define.amd&&define.amd.jQuery)
{

define(“jquery”, [],function() {return*jQuery*; } );

}

乐趣便是一旦检查测试到必要采用英特尔规范的话,就接纳英特尔标准,换言之,在html页面中我们得不到全局的jquery对象,浏览器报错。

c.那么怎么着运用不是AMD规范的jquery插件呢?

答案是:将它产生符合Intel标准

在百度上找到书写标准:

诚如的jQuery插件格式:代码如下:

(function ($) {

$.fn.myPlugin = function () {

//

您自身的插件代码

};

})(jQuery);

然则有一点点修改一下就可以运用Require.js加载三个jQuery插件:代码如下:

;(function (factory) {

if (typeof define === “function” && define.amd) {

// AMD

模式

define([ “jquery” ], factory);

} else {

//

大局格局

factory(jQuery);

}

}(function ($) {

$.fn.jqueryPlugin = function () {

//

插件代码

};

}));

好不轻松在修改以后,jquery插件也足以投入使用啦!

美滋滋

那正是说下二个标题来了

d.据书上说require还足以加载css文件!

试试咯

require.config({

map:{

‘*’:{

‘css’:‘css’

}

},

paths:{

“jquery”:“jquery.min”,

“requestAnimationFrame”:“requestAnimationFrame”,

“unslider”:“unslider.min”,

“rem”:“rem”,

“common”:“common”

},

shim:{

fontAwesome:{

deps:[‘css!’]

},

common:{

deps:[‘css!../css/common.css’]

},

index:{

deps:[‘css!../css/index.css’]

}

}

})

那是require的布署代码

在map中引进了require插件css.js

map的功用是不管在怎么样情状下都优先加载当中的文本

shim则是报告浏览器在加载文件在此以前供给引进的重视

我们在这里通过shim引入了css文件,经测验,本地css文件成功引进,而远程css样式表并未有引用成功,在此地也求教大家,借使领悟请留言告知,先多谢您!!

使用require.js时,解决AMD封装jquery1.4.1的问题。,jquery1.4.2.js下载

4858美高梅 1require.config({
baseUrl: “js/”, paths: { “jquery”: “jquery-1.4.1.min”//jquery-1.10.2.min
} }); require([“jquery”], function (jQ) { console.log(“JQ:” + jQ);
jQ(“#qq”).css(“color”, “#f00”); }); View Code

在高版本的jquery中,一般会活动封装AMD,然则在jquery1.4.1版本中并从未封装AMD,所以要求协和来封装英特尔.

1、张开jquery1.4.1.js文件,在文件的最下边注入一下代码:

4858美高梅 2
//自定义封装amd if (typeof module === “object” && module && typeof
module.exports === “object”) { module.exports == jQuery; } else {
window.jQuery = window.$ = jQuery; if (typeof define == “function” &&
define.amd) { define(“jquery”, [], function () { return jQuery; }) } }
// View Code

2、完成。

 

是或不是很简短!

require.config({ baseUrl: “js/” , paths: { “jquery”: “jquery-1.4.1.min”
// jquery-1.10.2.min }})…

英特尔(异步模块定义,Asynchronous Module
Definition)格式总体的靶子是为以后的开垦者提供二个可用的模块化
JavaScript 的化解方案。

一条注意:

透过require引进了css之后察觉页面加载的时候会闪过一下从未样式的页面,这样用户体验其实并倒霉,在随后的学习中须要缓慢解决此难点。

e.万恶的ie8————-假若想依照浏览器版本不一致援用差异版本jquery怎么破

其实并非非要叫人家万恶的ie8,可四实际上是实至名归啊

这次项目中央银行使的是jquery1.9.1,并从未对准ie8用到更低版本的jquery

可是之后难免会使用到

原来策画是用自个儿的笨方法,一查资料,原来能够如此玩

varpathToJQuery

if(‘querySelector’indocument

&& ‘localStorage’inwindow

&& ‘addEventListener’inwindow) {

pathToJQuery= ‘jquery/jquery-2.1.1.min’

}else{

pathToJQuery= ‘jquery/jquery-1.11.1.min’

}

接下来在path中如此用就能够了

paths: {

jquery: pathToJQuery

}

终极的考虑:

实在后天重构的门类不大,js代码量也比比较少,在整治完事后,开掘实际上代码量是充实的。require显得壮志难酬。

之所以在部分小的体系中是还是不是用部分节约财富的格局就足矣。

工夫虽好用,也要伏贴才行。

以上正是今天的获得。谨在此记录。希望每一天升高级中学一年级丢丢~

英特尔模块格式自个儿是贰个有关什么定义模块的提案,在这种概念下模块和依据项都可以异步地拓展加载。它有为数相当多奇特的优势,包含自然的异步及中度灵活等特色,那些特色能够排除常见的代码与模块标志间的这种紧凑耦合。方今它曾经被广大类型所抽出,包括jQuery(1.7)。

**RequireJS

**RequireJS是贰个工具库,首要用来客户端的模块管理。它可以让客户端的代码分成贰个个模块,实现异步或动态加载,进而巩固代码的品质和可维护性。它的模块管理坚守英特尔标准。

**jQuery 对AMD的支持

**jQuery 1.7 先河援救将 jQuery
注册为三个速龙异步模块。有那多少个十一分的本子加载器(包蕴 RequireJS 和
curl)都足以用二个异步模块格式来加载模块,那也就表示没有要求太多 hack
就能够让一切运维起来。能够看看jQuery 1.7 中的源码:

复制代码 代码如下:

// Expose jQuery as an AMD module, but only for AMD loaders that
// understand the issues with loading multiple versions of jQuery
// in a page that all might call define(). The loader will indicate
// they have special allowances for multiple jQuery versions by
// specifying define.amd.jQuery = true. Register as a named module,
// since jQuery can be concatenated with other files that may use
define,
// but not use a proper concatenation script that understands
anonymous
// AMD modules. A named AMD is safest and most robust way to register.
// Lowercase jquery is used because AMD module names are derived from
// file names, and jQuery is normally delivered in a lowercase file
name.
if ( typeof define === “function” && define.amd && define.amd.jQuery )
{
 define( “jquery”, [], function () { return jQuery; } );
}

其行事的原理是,所运用的剧本加载器通过点名叁性子质,即 define.amd.jQuery
为 true,来表明自身能够支撑四个 jQuery
版本。要是有意思味通晓特定的贯彻细节的话,我们得以将 jQuery
注册为三个具名模块,因为恐怕会有与上述同类的风险,即它恐怕被与任何使用了 AMD的 define() 方法的文本拼合在共同,而未有动用二个相宜的、驾驭无名 AMD模块定义的拼合脚本。

高版本的jQuery (1.11.1) 去掉了define.amd.jQuery剖断:

复制代码 代码如下:

if ( typeof define === “function” && define.amd ) {
 define( “jquery”, [], function() {
  return jQuery;
 });
}

Require.js中使用jQuery

Require.js中使用jQuery特别有利,简单布置就足以了,比如:

复制代码 代码如下:

// 轻便的配置
require.config({

    // RequireJS 通过贰个相对的渠道baseUrl来加载全体代码。baseUrl常常棉被服装置成data-main属性内定脚本的同级目录。
    baseUrl: “./js”,

    //
第三方脚本模块的小名,jquery比libs/jquery-1.11.1.min.js简洁明了;
    paths: {

        “jquery”: “libs/jquery-1.11.1.min.js”

    }

});

// 开首应用jQuery 模块
require([“jquery”], function ($) {

    //你的代码
    //这里一贯能够接纳jquery的法门,比方:$( “#result” ).html( “Hello
World!” );

});

Require.js中使用jQuery 插件

即使jQuery的支撑英特尔的API, 那并不意味着jQuery插件也是和英特尔包容的。

一般的jQuery 插件格式:

复制代码 代码如下:

(function ($) {
    $.fn.m​​yPlugin = function () {
        //你和煦的插件代码
    };
})(jQuery);

唯独我们多少修改一下就足以应用Require.js加载三个jQuery插件:

复制代码 代码如下:

4858美高梅,;(function (factory) {
    if (typeof define === “function” && define.amd) {
        // AMD模式
        define([ “jquery” ], factory);
    } else {
        // 全局格局
        factory(jQuery);
    }
}(function ($) {
    $.fn.jqueryPlugin = function () {
        //插件代码
    };
}));

Require.js中使用jQuery UI组件

Require.js中利用jQuery UI组件也周围的,只要改变一下jQuery Widget Factory
代码就足以了,何况认为jQuery UI的注重性关系加载就可以了。比如:

复制代码 代码如下:

(function (widgetFactory) {

    if (typeof define === “function” && define.amd) {
        // AMD模式
        define(“jquery.ui.widget”, [“jquery”], function () {

            widgetFactory(window.jQuery);

        });
    } else {
        // 全局形式
        widgetFactory(window.jQuery);
    }
}
(function ($, undefined) {

    // jQuery Widget Factory 代码

}));

你恐怕感兴趣的篇章:

  • js异步加载的三种缓和方案
  • jQuery
    Ajax异步处理Json数据详解
  • jquery的ajax异步央求接收重返json数据实例
  • js中联手与异步管理的法子和差异总计
  • Nodejs异步回调的幽雅处理措施
  • 详谈 Jquery
    Ajax异步管理Json数据.
  • angularjs
    处理三个异步哀求方法汇总
  • Javascript
    异步加载详解(浏览器在javascript的加载情势)
  • 选择jquery.upload.js达成异步上传示例代码
  • 写给小白看的JavaScript异步

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有