requireJS的基本使用
requireJS的基本使用
一、总结
一句话总结:
requireJS是js端模块化开发,主要是实现js的异步加载,和管理模块之间的依赖关系,便于代码的编写和维护
1、页面加载的js文件过多的缺点是什么?
|||-begin
为了提高代码的复用度,开发人员会按照功能把大量的js代码分成若干文件,这样在多个页面就可以使用同一个文件了
|||-end
1、网站加载js时会停止其它资源加载,并停止页面渲染(就是我们常说的白屏现象)
2、加载过多的js文件可能造成浏览器假死(浏览器一直在加载,不能进行页面操作)
3、假如文件有依赖关系,就是使用B.js需要先加载A.js,那我们还要小心翼翼的去引入js,不过这么多文件,鬼理得清依赖关系啊
2、网站的功能日益强大,js文件越来越多是必然的的事情,如何解决?
模块化开发:比如requireJS
3、js模块化 开发规范 分类?
1、服务器端(CommonJS):如Node.js
2、客户端(AMD、CMD):如requireJS 和 seaJS
4、什么是requireJS?
1、RequireJS是一个【JavaScript文件或者模块的加载器】。它可以提高JavaScript文件的加载速度,避免不必要的堵塞。
2、requireJS采用【异步方式加载模块】,可以简单理解为【加载js文件的一个工具】
3、requireJS是客户端模块化开发的一种规范,用于解决加载过多js文件导致浏览器白屏及假死及js文件引入的依赖关系的。
5、requireJS的作用?
1、实现js的异步加载
2、管理模块之间的依赖关系,便于代码的编写和维护
6、require.config方法中的baseUrl、paths、shim分别代表什么?
属性1:baseUrl:指定统一的路径
属性2:paths:每个模块的路径
属性3:shim:定义非AMD
require.config({baseUrl: '../resource/app',paths: {'hd': 'hd','css': '../lib/css.min','jquery': '../lib/jquery.min','angular': '../lib/angular.min','bootstrap': '../lib/bootstrap.min',},shim: {'hd': {// exports: 'modal',init: function () {return {modal: modal,success: success,}}},//houdunren.com'bootstrap': {'deps': ['jquery', 'css!../css/bootstrap.min.css', 'css!../css/font-awesome.min.css']}} });
二、requireJS的基本使用
参考或转自:【模块化开发】------requireJS的基本使用------【凡尘】
http://www.mamicode.com/info-detail-2285125.html
前言
为了提高代码的复用度,开发人员会按照功能把大量的js代码分成若干文件,这样在多个页面就可以使用同一个文件了。,下面是某个网站的js引用情况
虽然代码的复用度提升了,但是缺点也体现了出来
缺点:
<script src="require.js"></script>
第二步:异步加载require.js
<script src="require.js" defer async="true"></script> //async属性表明这个文件需要异步加载, IE不支持该属性,只支持defer所以把defer也写上
第三步:加载入口文件
<script src="require.js" data-main="js/index" defer async="true"/><script> data-main:用于加载入口文件(当require加载完毕后,需要引进主模块js文件)
第四步:使用require.config方法配置各个模块所加载的路径
require.config方法: 参数是一个对象:对象中有3个属性 属性1:baseUrl:指定统一的路径 属性2:paths:每个模块的路径 属性3:shim:定义非AMD require.config({//指定根路径js文件夹baseUrl:"js",//每个文件路径paths:{"jquery":"lib/jquery-1.11.3","layer":"plug/layer","swiper":"plug/swiper.min","banner":"list/banner","alert":"list/alert"},//非AMD文件的模块shim:{} })
第五步:AMD规范定义模块
//以下定义了一个swiper的轮播图define(["jquery","swiper"],function(){function init(){new Swiper (‘.swiper-container‘, {direction: ‘horizontal‘,loop: true,autoplay : 3000,speed:300,pagination: ‘.swiper-pagination‘,// 如果需要前进后退按钮nextButton: ‘.swiper-button-next‘,prevButton: ‘.swiper-button-prev‘,})}return {init:init} })
第六步:入口的核心文件
require(["config"],function(){require(["jquery","layer","swiper","banner","alert"],function($,layer,swiper,banner,alert){banner.init()alert.init()}) })
第七步:如果遇到非AMD规范的模块
shim:{模块名:{ deps:[""],//所依赖的模块 exports:模块名//导出模块的名称 } }
转载于:https://www.cnblogs.com/Renyi-Fan/p/11590199.html
requireJS的基本使用相关推荐
- 基于angularJS和requireJS的前端架构
1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来 ...
- RequireJS学习笔记(转)
前言 进入移动前端是很不错的选择,这块也是我希望的道路,但是不熟悉啊... 现在项目用的是require+backbone,整个框架被封装了一次,今天看了代码搞不清楚,觉得应该先从源头抓起,所以再看看 ...
- RequireJS示例
建议项目结构: HTML文件结构: <!DOCTYPE html> <html> <head lang="en"><meta charse ...
- requirejs模块化html,requirejs模块化-入门
先创建5个js文件,放在js文件夹下,分别是: 1.js define(function(){ return a=1; }); 2.js define(function(){ return a=2; ...
- 提高性能:用RequireJS优化Wijmo Web页面
上周Wijmo 2014 V2版本刚刚发布(下载地址), 有网友下载后发现仅仅使用了40个Widgets的一小部分,还需要加载全部的jquery.wijmo-pro.all.3.20142.45.m ...
- RequireJS和AMD规范
目录 概述 define方法:定义模块 require方法:调用模块 AMD模式小结 配置require.js:config方法 插件 优化器r.js 参考链接 概述 RequireJS是一个工具库, ...
- requirejs搭建前端框架
1. 文件结构 2. base.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 requirejs.config({ b ...
- JS模块化工具requirejs教程02
基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出 ...
- 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi
一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...
- [知识储备]用RequireJS +zepto开发微信公众号
2019独角兽企业重金招聘Python工程师标准>>> 一.了解RequireJS 和zepto 1.RequireJS的目标是鼓励代码的模块化,其遵循 AMD(异步模块定义)规范. ...
最新文章
- 整理一份详细的数据预处理方法
- jQueryEasyUI 的入门
- 安卓8.1 字体 ——现在6.0,7.0,8.0都可以体验
- 20170728xlVBA改转置一例
- boost::fusion::back_extended_deque用法的测试程序
- Centos 利用yum源安装 nginx stream模块
- OPENCV图像轮廓检测
- __call、__set 和 __get的用法
- mysql在jsp的导包语句_JSP+MYSQL中如何正确使用JDBC包?
- 电大本科免考英语和计算机,网络教育本科英语和计算机统考免考条件是什么?...
- 如何在计算机管理路由器,怎么查看路由器的管理IP地址?
- VS技巧 使用Visual Studio Icon Patcher将2010的图片注入到2012中
- Word如何插入图片
- 宏碁Aspire 4560试用手记
- 孔子称他为贤,孟子尊他为圣,柳下惠何德何能?2700年家谱揭露真相
- 判断一个正整数是否为2的整数次幂的宏定义
- javascript汉字转拼音代码
- element中滑块组件Slider展示一天24小时的时间问题
- Caused by: java.sql.SQLException: Value ‘0000-00-00‘ can not be represented as java.sql.Date
- 手机通过usu共享给电脑网络(win10),电脑变卡的解决办法
热门文章
- HDU 3555 Bomb (数位DP-记忆化搜索模板)
- C++基本语法( Visual Studio 2015 )【个人 见解】
- Hive应用:外部分区表
- c语言程序设计第3周编程作业(数字特征)
- win 7 DHCP获取不到ip的解决办法
- linux下的QQ执行玩法:pidgin-lwqq
- Linux基础命令的操作(时间与日期,日历,计算器)
- java enum(枚举)的使用
- 2014/12/05 随笔 2014-12-05 12:50 26人阅读 评论(0) 收藏...
- ORACLE NOT EXISTS不等值 改写成hive