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>
 

hdjs---后盾网requireJS课程的更多相关文章

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

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

  2. 后盾网VIP美团网开发(基于HDPHP)（全套38课）

    教程简介 本教程由后盾网讲解,共40节,主要介绍了美团网的开发,从需求分析出发,对商铺的建立.购物流程的构建及订单处理等都做了详细的介绍,非常适合做电子商务开发的朋友和同学参考学习使用,完整教程可以在 ...

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

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

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

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

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

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

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

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

  7. 后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件

    后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件 一.总结 一句话总结: vue中的插件的使用和js插件的使用一样的简单,只是vue插件的引入过程有些不同 ...

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

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

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

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

随机推荐

  1. katalon设置Android SDK路径

    本文链接:https://blog.csdn.net/feiniao8651/article/details/82809147文章允许转载,请注明来源:https://blog.csdn.net/fe ...

  2. postgres日常操作

    1.启动pgsl数据库 [postgres@master ~]$ pg_ctl start [postgres@master data]$ pg_ctl -D /usr/local/pgsql/dat ...

  3. Systemctl和service、chkconfig命令的关系

      systemctl命令:是一个systemd工具,主要负责控制systemd系统和服务管理器. service命令:可以启动.停止.重新启动和关闭系统服务,还可以显示所有系统服务的当前状态. ch ...

  4. Python数据驱动DDT的应用

    在开始之前,我们先来明确一下什么是数据驱动,在百度百科中数据驱动的解释是:数据驱动测试,即黑盒测试(Black-box Testing),又称为功能测试,是把测试对象看作一个黑盒子.利用黑盒测试法进行 ...

  5. 标准C语言(12)

    一个存储区的地址应该是它自身大小的整数倍(双精度浮点类型存储区的地址只需要是4的整数倍),这个规则叫数据对齐,结构体内部的存储区通常也需要遵守数据对齐的规则,数据对齐有可能导致结构体相邻子存储区之间有 ...

  6. CUDA升级后

    打开工程文件.vcxproj,找到 <Import Project="$(VCTargetsPath)\BuildCustomizations\CUDA 10.0.props" ...

  7. python+Appium自动化：logging配置代码分离

    配置文件信息log.conf: [loggers]keys=root,simpleExample [logger_root]level=DEBUGhandlers=consoleHandler,fil ...

  8. MongoDB的优势应用场景和配置

    一:MongoDB的简介: MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案 MongoDB是一个介于关系数据库和非关系数据库之间的 ...

  9. 【POJ2376】Cleaning Shifts

    题目大意:区间最小覆盖问题. 题解:本身是一道贪心水题,但是细节还是比较多的,记录一下. 由于每个奶牛对答案的贡献是一样的,肯定要选择在满足条件的基础上能够拓展最多的那个奶牛.为了满足条件,对区间左端 ...

  10. shell中的控制流结构

    shell中的控制流结构 1.if...then..else..fi语句 2.case语句 3.for循环 4.until 语句 5.while循环 6.break控制 7.continue 控制 1 ...