文档章节

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

i5--lou
 i5--lou
发布于 2016/06/24 11:33
字数 567
阅读 62
收藏 3

前几天分享了一篇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

© 著作权归作者所有

共有 人打赏支持
i5--lou
粉丝 19
博文 72
码字总数 33811
作品 0
杭州
程序员
RequireJS与SeaJS模块化加载示例

web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有Package的Javascript语言变得难以管理,于是出现CommonJS项目...

nosand
2014/05/04
0
10
Angular项目构建指南 - 不再为angular构建而犹豫不决

前言 接触Angular也有小半个月了,虽然没有使劲折腾,不过正所谓"no zuo no die".学一门新东西,不好好折腾一下总觉得对不起祖国,最不起人民...好像扯远了,想写前言来着.为什么要写这篇构建指南...

顽Shi
2014/06/16
0
16
abei2017/hou-admin

一套免费的基于JQ + RequireJS + Semantic-UI的后台管理系统 感谢下面伙伴的支持 除了代码,还有诗和远方。扫码关注我的公众号。 Hou-Admin Hou-Admin是一套由JQ + RequireJS + Semantic-UI实...

abei2017
04/24
0
0
RequireJS + AngularJS Seed 03 _RequireJS

在 index.html 里面引用 Requirejs。 这里第一部分src当然就是指requirejs的库文件。第二部分data-main是指入口配置。当前我指定的是scripts下面的bootstrap。requirejs默认的是js文件作为存...

开源中国匿名会员
2014/05/08
0
0
JavaSript模块规范 - AMD规范与CMD规范介绍

JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性...

大糊涂
2015/06/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JS:异步 - 面试惨案

为什么会写这篇文章,很明显不符合我的性格的东西,原因是前段时间参与了一个面试,对于很多程序员来说,面试时候多么的鸦雀无声,事后心里就有多么的千军万马。去掉最开始毕业干了一年的Jav...

xmqywx
今天
0
0
Win10 64位系统,PHP 扩展 curl插件

执行:1. 拷贝php安装目录下,libeay32.dll、ssleay32.dll 、 libssh2.dll 到 C:\windows\system32 目录。2. 拷贝php/ext目录下, php_curl.dll 到 C:\windows\system32 目录; 3. p...

放飞E梦想O
今天
0
0
谈谈神秘的ES6——(五)解构赋值【对象篇】

上一节课我们了解了有关数组的解构赋值相关内容,这节课,我们接着,来讲讲对象的解构赋值。 解构不仅可以用于数组,还可以用于对象。 let { foo, bar } = { foo: "aaa", bar: "bbb" };fo...

JandenMa
今天
1
0
OSChina 周一乱弹 —— 有人要给本汪介绍妹子啦

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享水木年华的单曲《中学时代》@小小编辑 手机党少年们想听歌,请使劲儿戳(这里) @须臾时光:夏天还在做最后的挣扎,但是晚上...

小小编辑
今天
18
4
centos7安装redis及开机启动

配置编译环境: sudo yum install gcc-c++ 下载源码: wget http://download.redis.io/releases/redis-3.2.8.tar.gz 解压源码: tar -zxvf redis-3.2.8.tar.gz 进入到解压目录: cd redis-3......

hotsmile
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部