1,模块化require的载入步骤

　　1,一个总文件夹,,里面三个子文件夹 ,, 分别是

　　　　　　　　

　　　2,common 里面是放一些公共方法和自己封装的方法     js里面是放自己的业务逻辑js文件和一些模块化的入口和模块化的配置文件   lib里面放的是一些库..和框架的引入地址

　　3,

list.html
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <ul id="ul">

        </ul>

    </body>

    <script type="text/javascript" src="lib/require.min.js" data-main="js/main.js" data-path="js/list"></script>

</html>

　　这里呢 前面的src是引入的模块化的载入工具,也称作为AMD规则,要模块化就得按他的规则来, data-main = "js/main.js"  ,这里是等模块化执行后执行的模块化入口文件 :就是你这个页面要执行的业务逻辑代码都在这里执行 , 后面的data-path="js/list" ,这个是你真正要引用的页面js文件,里面是写好的页面逻辑代码 , 也许你会问那我这个文件用的jq方法或者其他框架的方法呢, 这里不要着急慢慢往下看.

config.js//这个是模块化的配置文件
requirejs.config({   //这个是模块化的配置文件

    urlArgs : 'v1.3',//版本号

    baseUrl : '/amd',//配置baseUrl,其他文件的路径都是相对于此路径

    paths : {    //配置短路径

        jquery : 'lib/jquery.min',//获取jquery.min.js的短路径

        underscore : 'lib/jquery-ui',//获取underscore.js的短路径

        common : 'common/common',  //获取common.js的短路径,这个是我们用来存放公共使用的js文件

        jqueryui : 'lib/jquery-ui' //获取juqery-ui.js的短路径

    },

    shim : {  //配置非amd规范 的模块和模块依赖

        jquery : {  //这里是配置有些不能识别的方法,不然会报错

            exports : '$' //有的AMD不能识别比如$符号

        },

        jqueryui : {  //这里是依赖 ,就是说jqueryui这个短路径是依赖于jquery来编写的

            deps : ['jquery']  //这个是你要依赖的那种库或者框架的方法,也是用短路径的依赖方式

        }

    }

})

/*

 * 1.urlArgs : 里面的是版本号,版本号就是你写的这个版本的备注

 * 2.baseUrl : '/amd'这个是配置那些文件的路径,意思是从/amd这个文件夹下面开始寻找你要配置短路径的文件地址

 * 3. paths 为什么要配置短路径呢,这是因为如果你有个模块要用到jq或者用到其他框架,那么你要引入的文件地址将会很长

如果我们这里配置好了,就直接用短的配置路径.

*  4.shim :{} 这里是配置非AMD规范的模块和模块依赖,具体的我编写到页面注释

*/

　　　　这是配置模块化的各种信息,里面的注释信息也得很详细. 总的来说就是设置一些库与框架的引用名字的设置简写,方便后面依赖的设置 (所有的设置都是为了能更好的嵌套下一个步骤,和完美上一步).

　　

main.js
//main.js这里是html文件要加载js模块的入口

require(['config'],function(){

    var path = document.querySelector('[data-path]').dataset.path;//获取要加载的js路径,根据不同的页面加载不同的页面

    require([path],function(){  //这里是那些html文件引入main所真正引入的页面方法

    });

})

　　这里就是模块化载入后第二载入的js文件啦,这里就是你这个html文件所要真正执行的文件 , 里面注释很清楚 ,var那段就是获取的html文件最后引入data-path那后面的值.

list.js文件
//定义list模块 ,用来被manin执行

define(['jquery','common'],function($,common){  //这里是一个模块的开始标准写法,[]里面写的是你要依赖于那种插件或者框架在或者你

    //自己封装的公共方法,里面的参数是要被return出来的不然不能被使用

    var list = {   //模块化对象

        init : function(){ //要调用的初始化的函数

            this.bindEvent();    //执行的点击事件

            this.render();//页面渲染的初始调用

        },

        bindEvent : function(){   //点击事件的绑定

            $('#ul').on('click','li',function(){ //给父元素绑定点击事件,因为li还没加载出来,用事件托管

                var index = $(this).index();  //获取这个点击的li的下标

                location.href = 'detail.html?index='+ index;  //点击跳转的页面,加上点击的这个li的下标

            })

        },

        render : function(){     //页面渲染的事件

            var htmlStr = '';   //定义一个空来接收字符串li

            for(var i=0;i<5;i++){   //循环出5个li

                htmlStr += `<li>这是第${i+1}个li元素</li>`;  //把五个li的字符串赋值到htmlStr

            }

            $('#ul').html(htmlStr);   //把这个带有li的变量插入的ul里面

        }

    }

    list.init();  //这里执行要渲染和初始化的事件

});

　　　　这里就是页面的业务逻辑文件,里面也有详细注释

　　

//定义detail模块

define(['common','jquery','jqueryui'],function(common,$){   //模块的标准写法,[]里面要用到的方法

    var datail = {   //模块化对象

        init : function(){  //初始化函数

            this.render();    //执行页面渲染

        },

        render : function(){   //页面渲染方法

            var index = common.getUrlParam('index')  //获取网址里面的下标getUrlParam(方法是自己封装的)

            $('#p').html(`你点击的是第${Number(index)+1}个li元素`); //把这个添加到html里面

            $('#date').datepicker();  //这是juqeryui的一个日历方法

        }

    }

    datail.init(); //调用初始化的函数

})

　　　　　　这是页面二要引入的业务逻辑文件,也就是点击跳转页面要引入的文件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">

    </head>

    <body>

        <p id="p"></p>

        <input type="text" name="date" id="date"/>

    </body>

    <script type="text/javascript" src="lib/require.min.js" data-main ="js/main.js" data-path='js/detail'></script>

</html>

　　　　　　这个就是页面2所有的内容和引入的文件格式 , 有人可能会纳闷有的地方为什么不要.js后缀 , 这是因为这歌模块化工具会帮我们添加进来,如果你不想麻烦他还不行,还给你报错 , 我觉得这些嵌套关系最容易错的地方就是链接的地址的问题了,很容易出错,所以要仔细在仔细..

　　　　

require模块化载入的更多相关文章

  1. require'模块化jquery和angular问题

    require 模块化开发问题,正常自己写的模块 是exports 导出一个模块 //模块化引入jquery 不同和问题 require 引入jquery swiper .... 插件和库的时候需要 ...

  2. 轻轻谈一下seaJs——模块化开发的利器

    "仅做一件事,做好一件事." 这个应该就是seaJs的精髓了. 我在自己的一些项目中使用过seaJs.对其算是了解一二.如今就班门弄斧.轻轻地谈一下. 首先上一段度娘的话: &qu ...

  3. Javascript模块化简史

    Script标签和闭包 RequireJS, AngularJS以及依赖注入 Node.js以及CommonJS的出现 ES6, import, Babel和Webpack https://ponyf ...

  4. 浅析 Nodejs 模块化

    本文只讨论 CommonJS 规范,不涉及 ESM 我们知道 JavaScript 这门语言诞生之初主要是为了完成网页上表单的一些规则校验以及动画制作,所以布兰登.艾奇(Brendan Eich)只花 ...

  5. 项目开发（Require + E.js）

    最近在做的几个项目,分别用了不同的框架跟方式,有个H5的项目,用了vue框架, 这个项目我还没有正式加入进去, 等手头的这个项目完成就可以去搞vue了, 现在手头的这个项目是一个招聘的项目, 用到了N ...

  6. include、include_once、require、require_once其区别

    1.include: 载入文件.未找到文件,则产生E_WARNING 级别的警告错误,脚本继续运行. 2.include_once: 与include 语句作用相同,区别只是如果该文件已经被包含过,则 ...

  7. JavaScript模块载入框架sea.js 学习一

    简单总结sea.js 学习 文件文件夹结构   /sea/sea.js      下载地址  http://seajs.org/docs/#downloads   /sea/jquery-sea.js ...

  8. PHP内的包含语句（include(),require(),include_once(),require_once()）

    背景:继续总结PHP内的函数. 在一般的程序中,我们经常重复用到一些代码,但是如果只是简单的进行代码复制,则会增加代码的冗余度,不便于程序的运行.因此,我们可以把重复性的代码分离出来,以外部文件的方式 ...

  9. js中require()的用法----JS如何连接数据库执行sql语句或者建立数据库连接池

    var vue = require('vue'); 引入vue的意思,commonjs的写法.node都是用require来载入模块的,可以看看webpack+vue. require()可以调用模块 ...

随机推荐

  1. 18_使用react脚手架构建应用

    一.什么是脚手架 1.脚手架:用来帮助程序员快速创建一个基于xxx项目的模板仓库(可以理解为网上的大神写好了基础模板直接下载无需自己配置) 1)包含了所有需要的配置 2)指定好了所有依赖 3)可以直接 ...

  2. Servlet基本_サーブレットのライフサイクル、スレッドセーフ

    1.サーブレットのライフサイクル初期化時 ⇒ init() [初回リクエスト時] ↓リクエスト時 ⇒service() ⇒doGet() [Httpリクエストメソッドにより振り分け] 或は⇒doPos ...

  3. Zookeeper 3、Zookeeper工作原理（转）

    1.Zookeeper的角色 » 领导者(leader),负责进行投票的发起和决议,更新系统状态 » 学习者(learner),包括跟随者(follower)和观察者(observer),follow ...

  4. python语言中的数据类型之元组

    数据类型 元组       tuple 元组:不可变类型 用途:元组就是一个不可变的列表,当需要存不改动的值时可用元组 定义方式:在()内用逗号分隔开多个任意类型的元素 t=(1,2.2,'aa',( ...

  5. 知识点6: v-for列表循环

    效果图: 只手写了第一个dom: 剩下4个dom由v-for生成. html <div class="item" id="item"> <di ...

  6. AAPTEXECPTION

    Error:java.util.concurrent.ExecutionException: com.android.builder.\files-.aar\a234c5f0534a8da0e4db0 ...

  7. Struct2.0学习笔记1

    为了更好的配合队友写项目 现在学习如下 1.目录 2. 3. Struct2-Action 配置环境 4. 改action 名字 不用重启服务器(从上面粘贴) 改成true 即开发模式 5.想看源码 ...

  8. 第三条博客 你好 Java web！

    今天周五了,明天就是周末!第一个周末就这样结束了 今天我学习了MyEclipse开发 Javaweb 程序,学的是最基础的那一部分 首先先创建了自己的项目,展开项目标签,编辑index.jsp. 我还 ...

  9. windows中 git 命令使用记录

    建议国内开发安装淘宝npm镜像cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 或者每次执行安装时 npm ins ...

  10. C# windows服务：C#windows服务中的Timer控件的使用

    C# windows服务程序中的Timer控件的使用问题是如何解决的呢? 今天和同事一起研究了下C# windows服务程序中的Timer控件的使用的写法. 我们在建立一个C# windows服务程序 ...