require.js的使用的坑!

Posted Modle_Sherlock

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了require.js的使用的坑!相关的知识,希望对你有一定的参考价值。

require.js的使用心德:

都是自我的理解所得:

first:为什么使用?

  1,web开发js的占用比例越来越大,引入的插件也越来越多,维护困难,一个一个的script的写要废

  2,模块开发的需求

  3,有时候javascript的运用是有依赖的需求的,大量的使用难以保证依赖顺序,出现不存在的问题

second:这是个坑,使用前的提示:

  使用的环境是服务器的web环境,单纯的没有服务器的静态页面使用根本没有反应!

third:废话不多说,直接上图片:

     step:首先是目录结构:

       技术分享

index.html是我的页面,这个require是一个服务器的根目录,require是require.js的库

   step2:主要的index.html的样子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this in index</title>
    <div id="modle">asdafdfad</div>
  <!--注意:src是require的库,defer是ie异步,async是异步,data-main是js入口文件,config,主要的require.config都在里面写各种调用--> <script src="require.js" defer async="true" data-main=‘config‘ ></script> </head> <body> <h1>this is index</h1> </body> </html>

    step3的config.js文件如下:

require.config({
    paths:{
        a:‘lib/a‘,
        b:‘lib/b‘,
        c:‘others/c‘,
jQuery:
‘lib/jquery.min‘ }, waitSeconds:5,
//jquery等各种外部库要使用,当要如此,是做兼容的 shim:{ jQuery:{ exports:
‘$‘ } } }) require([‘a‘,‘b‘,‘c‘,‘jQuery‘],function(a,b,c,$){ a.a();//输出this is module a b.b();//输出this is module b c.c();//输出this is module c in others console.log(c.c2);//有时候有时候我会相信一切有尽头 a.show();//背景变红 $(‘#modle‘).html(‘d‘);//文本变为d })

各个模块文件如下:a.js

define([‘jQuery‘],function($){
    function a(){
        console.log(‘this is module a ‘);
    }
    function jqueryShow(){
        $(‘#modle‘).css(‘background‘,‘red‘);
    }
    return {
        a:a,
        show:jqueryShow
    }
})

b.js

define(function(){
    return {
        b:function(){
            console.log(‘this is module b‘);
        },
        care:function(){
            console.error(‘刚刚引入的jquery不是一个模块,不能在define处搞‘);
        }
    }
})

c.js

define([],function(){
    return {
        c:function(){
            console.log(‘this is module c in others‘);
        },
        c2:‘有时候有时候我会相信一切有尽头!‘
    }
})

 

以上是关于require.js的使用的坑!的主要内容,如果未能解决你的问题,请参考以下文章

javascript Url 传参的坑,base64参数和url参数之间的转移

使用 r.js 来优化 require.js 文件

Blender制作多个动画片段时踩的坑

require.js 入门笔记

require.js的使用

覆盖 require.js 中的 setTimeout