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. 112、如何使用stack （Swarm19）

    参考https://www.cnblogs.com/CloudMan6/p/8135714.html   定义好了 stack YAML 文件,就可以通过 docker stack deploy 命令 ...

  2. vue组件之事件

    自定义事件 通过prop属性,父组件可以向子组件传递数据,而子组件的自定义事件就是用来将内部的数据报告给父组件的. <div id="app3"> <my-com ...

  3. liboqs-量子安全密码算法开源C库

    liboqs是一个用于量子安全密码算法的开源C库. 一,概述 liboqs提供: 量子安全 密钥封装机制(KEM)和数字签名算法的开源实现的集合: 这些算法的通用API: 测试工具和基准测试例程. l ...

  4. angular.js，IE7,8,9兼容性的处理

    转........... 这段时间详细了解了谷歌新出的MVVM框架angular.js,并直接在本人所从事的项目中使用了.但是使用新东西都是有风险的,这不,采用了新框架的页面IE7,8各种显示不出来… ...

  5. CentOS MySql5.6编译安装

    生产环境中,mysql服务器上边最好什么服务都不要再安装!!! 一.准备工作: # yum -y install make gcc-c++ cmake bison-devel ncurses-deve ...

  6. deep_learning_Function_numpy.linspace()

    numpy.linspace()等差数列函数 在numpy中的linspace()函数类似与arange().range()函数: arange() .range() 可以通过指定开始值.终值和步长创 ...

  7. Linux硬件访问技术

    在Linux系统中,无论是内核程序还是应用程序,都只能使用虚拟地址,而芯片手册中给出的硬件寄存器地址或者RAM地址则是物理地址,无法直接使用,因此,我们读写寄存器的第1步就是将将它的物理地址映射为虚拟 ...

  8. usb四种传输模式bulk

    当USB插入USB总线时,USB控制器会自动为该USB设备分配一个数字来标示这个设备.另外,在设备的每个端点都有一个数字来表明这个端点.USB设备驱动向USB控制器驱动请求的每次传输被称为一个事务(T ...

  9. C#基础进阶

    观看C#高级教程进行学习.巩固基础,进阶学习. 1.委托 把方法当做参数来传递就是委托.委托的关键字是delegate. class Program { private delegate string ...

  10. BZOJ1257 [CQOI2007]余数之和[规律]

    被zcr和yy轮流嘲讽了一番,感觉自己智商日渐下降...\TヘTツ 先拆mod变成整数除法,然后就是$nk- \Sigma_{i=1}^{n} i * \lfloor \frac{k}{i} \rfl ...