hdjs---后盾网requireJS课程

一、总结

一句话总结：

requireJS是js端模块化开发，主要是实现js的异步加载，和管理模块之间的依赖关系，便于代码的编写和维

1、requireJS目录结构中的app目录和lib目录的作用是什么？

app目录：存用户自己写的js（自定义模块）
lib目录：存依赖的js文件

2、requireJS最简单实例？

在main.js的paths中配置好jquery，在页面中中使用：require(['jquery'], function ($) {
main.js
require.config({paths: {'jquery': '/lib/jquery.min',},
});页面代码
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><script data-main="../resource/main" src="../resource/require.js"></script>
</head>
<body>
<button onclick="test()">测试</button>
<script>function test() {require(['jquery'], function ($) {$('body').css({'backgroundColor': 'red'});})}
</script>
</body>
</html>

3、如下代码会出现什么问题以及解决方式？

|||-begin

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><script data-main="../resource/main" src="../resource/require.js"></script>
</head>
<body>
<button onclick="test()">测试</button>
<script>require(['jquery'], function ($) {$('body').css({'backgroundColor': 'red'});})
</script>
</body>
</html>

|||-end

问题：require.js加载完之后，main.js的加载和下面的script中的代码会同时运行，所以会出现jquery找不到的情况（就是运行到下面代码的时候jquery还没来得及加载）
解决方式：加载main.js的代码可以放到加载require.js后面
原理：main.js中是放置的配置，执行的代码放在配置的代码之后就可以解决问题
<script src="../resource/require.js"></script>
<script src="../resource/main.js"></script>

4、require.js自定义模块实例？

- 前一个参数表示依赖的模块，这里依赖jquery，回调函数里面就写模块定义的函数
- 使用的时候会将define中return部分的值给b，所以b.change()就可以执行
define(['jquery'], function () {return {change: function () {$('body').css({'backgroundColor': 'red'});},show: function () {alert('后盾人')},message: function () {alert('houdunren.com')}}
});使用
<script>
require(['util'],function(b){b.change();
})
</script>

5、自定义模块引用依赖的两种方式？

+ 当后面所有的方法都需要jquery的时候，可以在define中引入：define(['jquery'], function () {
+ 只有某个方法需要jquery的时候，就在某个方法里面引入：require(['jquery'],function($){
当后面所有的方法都需要jquery的时候，可以在define中引入
define(['jquery'], function () {return {change: function () {$('body').css({'backgroundColor': 'red'});},}
});只有某个方法需要jquery的时候，就在某个方法里面引入
define([], function () {return {change: function () {require(['jquery'],function($){$('body').css({'backgroundColor': 'red'});})},}
});

6、require.js如何解决多个模块之间的依赖关系（比如bootstrap需要依赖jquery，还有css）？

在shim中：'bootstrap': { 'deps': ['jquery', 'css!../css/bootstrap.min.css', 'css!../css/font-awesome.min.css'] }
require.config({baseUrl: '../resource/app',paths: {'css': '../lib/css.min','bootstrap': '../lib/bootstrap.min',},shim: {'bootstrap': {'deps': ['jquery', 'css!../css/bootstrap.min.css', 'css!../css/font-awesome.min.css']}}
});'css': '../lib/css.min' 是因为后面bootstrap需要引css，所以要把css库加进来

7、bootstrap库依赖jquery，后面比如自定义模块util.js依赖bootstrap，那么util加载的时候也会自动加载jquery库么？

会：会加载这些依赖的库，无论直接依赖还是间接依赖

8、非标准化的AMD的模块怎么使用？

exports或者init
/app/hd.js
function modal() {alert('后盾人 modal');
}
function success() {alert('后盾人 success');
}main.js
require.config({baseUrl: '../resource/app',paths: {'hd': 'hd',},shim: {'hd': {// exports: 'modal',init: function () {return {modal: modal,success: success,}}},}
});页面
<script>
require(['hd'],function(f){f.modal();
})
</script>

9、标准化的AMD模块长什么样？

define定义，return返回：define(['bootstrap'], function () {
define(['bootstrap'], function () {return {change: function () {$('body').css({'backgroundColor': 'red'});},show: function () {alert('后盾人')},message: function () {alert('houdunren.com')}}
});

10、老的版本的jquery不是标准化的AMD模块，那么require.js怎么引用？

因为只有一个$对象，所以直接exports: '$'即可
require.config({baseUrl: '../resource/app',paths: {'jquery': 'jquery',},shim: {'jquery': {exports: '$',},}
});

二、后盾网requireJS课程

代码地址：链接：https://pan.baidu.com/s/1ztIk2BQL0XWJWUQXBMsnFw
提取码：53ln

1、目录结构

2、代码

配置main.js

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']}}
});
// require(['jquery', 'angular'], function ($, angular) {//     $('body').css({'backgroundColor': 'red'});
// })

自定义模块app/hd.js

function modal() {alert('后盾人 modal');
}
function success() {alert('后盾人 success');
}

自定义模块app/util.js

define(['bootstrap'], function () {return {change: function () {$('body').css({'backgroundColor': 'red'});},show: function () {alert('后盾人')},message: function () {alert('houdunren.com')}}
});

1、加载require.js

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><script data-main="../resource/main" src="../resource/require.js"></script>
</head>
<body></body>
</html>

2、require.js简单实例

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><script data-main="../resource/main" src="../resource/require.js"></script>
</head>
<body>
<button onclick="test()">测试</button>
<script>function test() {require(['jquery', 'angular'], function ($, angular) {$('body').css({'backgroundColor': 'red'});})}
</script>
</body>
</html>

3、异步加载实例

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><script src="../resource/require.js"></script><script src="../resource/main.js"></script>
</head>
<body>
<button onclick="test()">测试</button>
<script>//        function test() {//            require(['jquery', 'angular'], function ($, angular) {//                $('body').css({'backgroundColor': 'red'});//            })//        }//    require(['lib/jquery.min', 'lib/angular.min'], function () {//        $('body').css({'backgroundColor': 'red'});//    })
require(['jquery', 'angular'], function ($, angular) {$('body').css({'backgroundColor': 'red'});})
</script>
</body>
</html>

问题：require.js加载完之后，main.js的加载和下面的script中的代码会同时运行，所以会出现jquery找不到的情况（就是运行到下面代码的时候jquery还没来得及加载）
解决方式：加载main.js的代码可以放到加载require.js后面
原理：main.js中是放置的配置，执行的代码放在配置的代码之后就可以解决问题

4、自定义模块

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><script src="../resource/require.js"></script><script src="../resource/main.js"></script>
</head>
<body>
<script>
require(['util'],function(b){b.change();
})
</script>
</body>
</html>

5、非AMD标准化的模块

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><script src="../resource/require.js"></script><script src="../resource/main.js"></script>
</head>
<body>
<script>
require(['hd'],function(f){f.modal();
})
</script>
</body>
</html>

转载于:https://www.cnblogs.com/Renyi-Fan/p/11593493.html

hdjs---后盾网requireJS课程相关推荐

  1. 后盾网lavarel视频项目---3、lavarel中子控制器继承父控制器以判断是否登录

    后盾网lavarel视频项目---3.lavarel中子控制器继承父控制器以判断是否登录 一.总结 一句话总结: 在common控制器的构造方法中验证登录中间件,其它的控制器继承common控制器 p ...

  2. 后盾网lavarel视频项目---lavarel多表关联一对多操作实例

    后盾网lavarel视频项目---lavarel多表关联一对多操作实例 一.总结 一句话总结: 1.一对多中多那个部分的数据前端通过json弄到服务器 2.所有通过一操作多的时候,都要用上模型中定义的 ...

  3. 后盾网lavarel视频项目---图片上传

    后盾网lavarel视频项目---图片上传 一.总结 一句话总结: 前端还是普通的前端操作,前端上传图片的地址就是图片上传的路由,后端代码也很简单 public function uploader(R ...

  4. 后盾网lavarel视频项目---vue实现动态添加和删除板块

    后盾网lavarel视频项目---vue实现动态添加和删除板块 一.总结 一句话总结: 原理就是:列表时根据vue中的videos变量中的元素来遍历的,初始时videos:[{title:'',pat ...

  5. 后盾网lavarel视频项目---2、phpstorm显示类中的方法快捷键

    后盾网lavarel视频项目---2.phpstorm显示类中的方法快捷键 一.总结 一句话总结: ctrl + f12 1.npm安装js插件? npm install hdjs 2.phpstor ...

  6. 后盾vip php框架,后盾网实战VIP教程之ThinkPHP微博项目系列培训

    php教程 当前位置:主页 > php教程 > 后盾网实战VIP教程之ThinkPHP微博项目系列培训 后盾网实战VIP教程之ThinkPHP微博项目系列培训 教程大小:1.56GB   ...

  7. 后盾php框架下载,后盾网HD框架下载_后盾网HD框架官方下载-太平洋下载中心

    后盾网HD框架是Php源码频道下深受用户喜爱的软件,太平洋下载中心提供后盾网HD框架官方下载.HDPHP 后盾网HDPHP框架是一个为用PHP程序语言编写网络应用程序的人员提供的软件包. 提供强大的. ...

  8. 后盾网MySQL系列教程

    课程简介: 后盾网MYSQL视频教程 ,总共八集 ,向军主讲,视频清晰,很实用的数据库教程,希望大家共同学习.每天一小步,人生一大步! 课程讲师:向军 讲师介绍:HDPHP&HDCMS作者,现 ...

  9. 后盾网lavarel视频项目---lavarel中的tinker是什么

    后盾网lavarel视频项目---lavarel中的tinker是什么 一.总结 一句话总结: 是用来调试laravel,可以打印变量或对象信息,显示函数代码,对数据库写入和查询数据 laravel中 ...

  10. 尚学堂requireJs课程---3、私有和公有属性和方法

    尚学堂requireJs课程---3.私有和公有属性和方法 一.总结 一句话总结: 在 [模块] 的基础上,在return对象里面的方法和属性就是公有的(因为外部可以访问),不在的就是私有的 < ...

最新文章

  1. 程序员成熟的几个标志
  2. jenkins和docker实现自动化构建部署
  3. laravel5.8笔记六：公共函数和常量设置
  4. c#使用HttpClient调用WebApi
  5. vue.js devtools的安装
  6. Druid-目前最好的连接池
  7. enctype=multipart/form-data的表单无法获取表单中除了type=file以外的其他参数 commons-fileupload 获取除file外其他参数...
  8. lingo程序与c语言的区别,lingo与高级语言连接（以C++）为例
  9. C++课程设计班级管理系统
  10. 【入坑树莓派】烧录系统都烧录了三次（树莓派默认账户密码错误/已删除）
  11. 读书笔记_《深度学习与计算机视觉》.叶韵 编著.田疆 西门子高级研究员 作序.机械工业出版社
  12. 模式识别复习 思维导图
  13. 自然语言分析包NLTK安装及入门
  14. Audio Hijack教程：轻松捕获iOS设备中的音频
  15. 打开U盘 提示 服务器无法运行,win10打开u盘提示“系统资源不足 无法完成请求的服务”怎么办...
  16. loss 加权_为每个类别/实例编写自定义损失加权,对,的,loss
  17. 2018最新微信小程序经典案例开发视频教程合集
  18. 【毕业设计】STM32单片机的智能手环 - 蓝牙手环 物联网
  19. Excel小技巧：合并单元格且不丢失数据
  20. Java violate变量

热门文章

  1. android 免root 免流,安卓无需Root一键免流软件合集，具体哪个能用自测
  2. MySQL over函数的用法
  3. qq互联登录授权php配置,开通qq互联开放平台登陆功能的步骤
  4. python 多行注释 字符串_python多行注释和跨行字符串
  5. vs2017 安装Qt VS Tools ，新建项目没有Qt GUI Application选项 ，解决方法
  6. 《Python程序设计实验指导书》81个实验项目选做参考
  7. 模2除法(CRC校验码计算)模2除法和算数除法不同，文中例子120/13用模2除法结果：商11余数7，而算数除法结果：商9余数3
  8. 中级网络工程师是什么？主要是考什么，有什么用？
  9. sap服务器的文件管理,SAPPLM 文档管理介绍
  10. ftp服务器显示密码,Ftp服务器怎么查看密码