zoukankan      html  css  js  c++  java
  • requireJS入门基础

    参考  require.js详解

    1.引用requireJS的html文件

    1 <!DOCTYPE html>
    2     <head>
    3         <title>requireJS</title>
    4     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    5     </head>
    6     <body>
    7     <script data-main="js/main" src="js/require.js"></script>
    8     </body>
    9 </html>

    第7行,使用<script>和约定的属性data-main和src引入require.js模块, 所有的require配置在这里写在目录js下的main.js, 即require对象会到目录js下寻找main.js文件,require对象约定js文件可以省略.js扩展名.
    2.requireJS配置入口JS文件

     1 require.config({
     2     baseUrl: 'js',
     3     paths: {
     4         jquery: 'jquery-1.8.2.min'
     5     }
     6 });
     7 
     8 require(['monkey'],function(mk) {
     9     mk.init();   
    10 });

    如这里的  js/main.js文件

    1.调用require对象的config方法,对required对象进行基础设置, baseUrl指的require对象加载模块文件的根目录,可以是绝对路径或相对路径,对第8行产生影响.即当require对象执行第8行时, require对象会到js目录下加载monkey.js文件.paths的作用就是将一些常用的js文件,换成通用的名字。例如jquery-1.8.2.min.js,我们不用每次调用它都写这个长名字,就将jquery替代jquery-1.8.2.min.js,快捷方便。

    2.requireJS核心函数require([],function(x){});

    它接受两个参数, 第一个参数是一个数组,表示所依赖的框架,     第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块(如这里的mk), 所以,关键理解,monkey模块怎样设计.

    3.requireJS相关模块JS

    1 define(['jquery'],function($){
    2     var init = function(){
    3        console.log($.browser);
    4     };
    5     return {
    6         init: init
    7     };
    8 });

    使用requireJS的第3部分,就是按AMD规范, coding自己的JS 模块文件, 如这里的js/monkey.js文件

    define的第2个参数也封装成一个匿名函数, 这里第5行~7行又封装成一个匿名对象,将第2行定义的function返回出来.

  • 相关阅读:
    java基础篇3---变量值转换(不使用中间变量)
    java基础篇2---逆序输出
    Java基础篇1---数据类型转换
    java基础篇8-----字符大小写字母的转换
    java基础篇7----java.util中的Scanner类的使用
    java基础篇0----运算符
    java基础篇5---循环结构
    ECMAScript arguments 对象(摘自W3C)
    JS中的this的应用总结
    定时器 + 简单的动画效果
  • 原文地址:https://www.cnblogs.com/zhuji/p/7099744.html
Copyright © 2011-2022 走看看