前几天分享了一篇requirejs的规范,但是某位童鞋还是理解起来有点困难, 没办法,那今天再来详细的介绍一下,requirejs最简单的模板引用 首先要了解啥是模板,还有我为甚要引用模板? 相信好多
前几天分享了一篇requirejs的规范,但是某位童鞋还是理解起来有点困难,
没办法,那今天再来详细的介绍一下,requirejs最简单的模板引用
首先要了解啥是模板,还有我为甚要引用模板?
相信好多童鞋都遇到过在web开发的时候,有一块或者多块布局在很多页面上会重复用到,
比如说:顶上的导航栏,侧边的功能栏,底部的链接区域.....
这些在网页上会经常被用到,而他们的元素以及样式基本上是不会有变化的,
当然,最简单粗暴的方式就是每个页面我都手动加上去(说实话,其实就是傻b....)
而我们有了requirejs之后就可以不用写这么龊的coding了
好啦,介绍过了原因,下面就讲一下怎么使用吧
1.在项目中把requirejs给down下来
bower install requirejs --save还有一个插件也一起down下来,不要问为什么,后面你就知道啦
bower install text --save2.然后配置一下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
