requirejs模板开发速成真的是速成哦.......

前几天分享了一篇requirejs的规范,但是某位童鞋还是理解起来有点困难,

没办法,那今天再来详细的介绍一下,requirejs最简单的模板引用

首先要了解啥是模板,还有我为甚要引用模板?

相信好多童鞋都遇到过在web开发的时候,有一块或者多块布局在很多页面上会重复用到,

比如说:顶上的导航栏,侧边的功能栏,底部的链接区域.....

这些在网页上会经常被用到,而他们的元素以及样式基本上是不会有变化的,

当然,最简单粗暴的方式就是每个页面我都手动加上去(说实话,其实就是傻b....)

而我们有了requirejs之后就可以不用写这么龊的coding了

好啦,介绍过了原因,下面就讲一下怎么使用吧

1.在项目中把requirejs给down下来

bower install requirejs --save

还有一个插件也一起down下来,不要问为什么,后面你就知道啦

bower install text --save

2.然后配置一下requirejs,新建一个app.js文件

requirejs.config({
  baseUrl:'/bower_components/',//基础路径
  paths:{//需要加载的类库文件
    'text':'text/text',
    'jquery':'jquery/dist/jquery.min'
  },
  shim:{
    'jquery':{//定义jquery的应用方式
       exports:'$'
    }
  }
});

先引入基础的类库文件,我这边还加了一个jquery,也可以用bower装一下

3.接下来我们写一个模板,就叫header吧,新建一个header.html文件,简单点,我就不写太多了

<h1>header</h1>

4.然后是index.html,我也写简单点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>嘿嘿</title>
</head>
<!-- 记住路径写你自己的,不要写错哦 -->
<script src="require.js"></script>
<script src="app.js"></script>
<body>
  <header></header>
</body>
</html>

嗯,就这样吧

5.然后再往app.js里面加点东西

requirejs([
  'text',
  'text!header.html'//记住这边要写header的绝对路径啊,还有text后面一定要加!,不要问为什么,这是规定
],function(text,headerHtml){
  $('header').html(headerHtml);//把header模板加到所有header标签里面去
});

好啦,这样就是最简单的一个模板应用啦,

如果有童鞋还是看不懂,那........

给我留言吧 T_T

来源：oschina

链接：https://my.oschina.net/u/2658398/blog/700309

标签

requirejs

模板开发简单上手

requirejs模板开发速成 真的是速成哦.......

requirejs模板开发速成真的是速成哦.......