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的使用的坑!的主要内容，如果未能解决你的问题，请参考以下文章