欢迎来到[自学php网] ①群 AG亚游集团

AG亚游集团 > 网站前端 > javascript >

requirejs模块开发入门教程第一讲

来源:未知 ?? 时间:2017-04-18 14:25?作者:xxadmin

[导读] 随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作、模块复用、单元...

随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。

requirejs

RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K,堪称非常轻量。它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升。

requirejs能带来什么好处

官方对requirejs的描述:

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

大致意思:

在浏览器中可以作为js文件的模块加载器,也可以用在Node和Rhino环境,balabala...。这段话描述了requirejs的基本功能"模块化加载",什么是模块化加载?我们要从之后的篇幅中一一解释

先来看一段常见的场景,通过示例讲解如何运用requirejs

正常编写方式

index.html:

<!DOCTYPE html><html>
    <head>
        <script type="text/javascript" src="a.js"></script>
    </head>
    <body>
      <span>body</span>
    </body></html>

a.js:

function fun1(){
  alert("it works");}fun1();

可能你更喜欢这样写

(function(){
    function fun1(){
      alert("it works");
    }

    fun1();})()

第二种方法使用了块作用域来申明function防止污染全局变量,本质还是一样的,当运行上面两种例子时不知道你是否注意到,alert执行的时候,html内容是一片空白的,即<span>body</span>并未被显示,当点击确定后,才出现,这就是JS阻塞浏览器渲染导致的结果。

requirejs写法

当然首先要到requirejs的网站去下载js -> requirejs.rog
index.html:

<!DOCTYPE html><html>
    <head>
        <script type="text/javascript" src="require.js"></script>
        <script type="text/javascript">
            require(["a"]);
        </script>
    </head>
    <body>
      <span>body</span>
    </body></html>

a.js:

define(function(){
    function fun1(){
      alert("it works");
    }

    fun1();})

浏览器提示了"it works",说明运行正确,但是有一点不一样,这次浏览器并不是一片空白,body已经出现在页面中,目前为止可以知道requirejs具有如下优点:

  1. 防止js加载阻塞页面渲染

  2. 使用程序调用的方式加载js,防出现如下丑陋的场景

<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
<script type="text/javascript" src="e.js"></script>
<script type="text/javascript" src="f.js"></script>
<script type="text/javascript" src="g.js"></script>
<script type="text/javascript" src="h.js"></script>
<script type="text/javascript" src="i.js"></script>
<script type="text/javascript" src="j.js"></script>

代码中的具体含义和其他特性将在之后的篇幅进行讲解:

JS模块化工具requirejs教程(二):基本知识

RequireJS模块化加载插件教程详解

一篇文章掌握RequireJS常用知识

关于RequireJS的简单介绍即使用方法


文章来源:/githubaff4com/liuxey/blog/issues/1


最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号@版权所有AG亚游集团

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

外媒:印度女性遭网络暴力情况严峻 投诉难获回应 全国网信系统二季度关闭网站1888家 账号72万个 世界杯最佳进球公布!冠军飞翼天外飞仙当选|gif 贵州美女董事长解为何聘洋高管:扬长避短加强团队 观点:主裁判对VAR很生疏 当务之急提升自身水平 小伙2元机选中福彩1千万 销售员打错票成助攻 艾伦:能感受到奥沙利文的紧张 毕竟他也是人 强!天津悍将成打击和防范经济犯罪宣传大使 吉林省疾控:本省没有涉事批次百白破和狂犬病疫苗 定海神针复出!齐整恒大力争开胡 曾诚:已做好准备 幼儿园男童遭老师揪耳训斥 被吓得双手捂耳跪地 油价逼近80美元 亚洲面临一年万亿美元买油成本重担
川航:台北飞成都3U8978航班一切正常未发劫机信号 英特尔可能考虑向博通发出收购要约 李嘉诚旗下长和去年因汇率对冲操作损失12亿港元 北京晨报:生命面前 别让缴费争议延误救治时机 骑士恶汉推人险酿7人大冲突!1个恶犯2个技犯 特朗普宣布“特金会”时间地点 什么让他有点急? 巴基斯坦要派团来华学这两件事:扶贫和打击腐败 高盛分析师:特斯拉2020年前最多还需融资100亿美元 深度|有天赋就能为所欲为?76人这下终于懂了 支行副行长骗多人办“过桥贷” 银行回应:已离职 中国咖啡之战:快速增长的瑞幸咖啡对星巴克造成威胁 日媒鼓吹拉拢台湾加入CPTPP 蔡英文还曾想这么干
“阿尔法围棋”之父:人工智能仍有诸多哲学问题待解 27+12+5+2+净揍31分!是不是可以举报詹姆斯了 切尔西尤文酿大手笔!7500万锋霸换购伊瓜因+铁闸 一图流!跟库里击掌有风险,因为会被电晕! 中超名帅祝福托雷斯:马竞传奇 送上中国的祝福 呆萌机器人手机贴膜4分搞定 “月收入”轻松过万 利物浦强的不只萨拉赫 1v1防守最强之人也在红军 俄罗斯副防长:俄军用装甲车数量已世界第一 俄售中国S400导弹为何延迟交付 第3艘货船晚到5个月 女人开什么店比较好 三缺一棋牌游戏平台 手机可以做的打字兼职 如何利用微信挣钱 AG亚游集团