文档章节

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

i5--lou
 i5--lou
发布于 2016/06/24 11:33
字数 567
阅读 64
收藏 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极简入门教程

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular s......

程序员诗人
2017/03/30
0
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

没有更多内容

加载失败,请刷新页面

加载更多

Dubbo分析之Transport层

前言 上一篇文章Dubbo分析之Serialize层,介绍了最底层的序列化/反序列化层,本文继续分析Serialize层的上一层transport网络传输层,此层使用了现有的一些通讯开源框架(ex:netty,mina,grizzl...

ksfzhaohui
21分钟前
1
0
通告!Android 9 Pie未适配应用公示

8月7日,谷歌正式发布Android 9 Pie,至今已两月有余。近日,华为终端开放实验室对国内主流应用在Android 9 Pie的兼容性进行测试,结果显示:目前TOP3000应用兼容率已经超过95%,但仍有少量应...

安卓绿色联盟
24分钟前
1
0
Linux下多网卡绑定模式详解

在我们日常Linux使用中,一般对于生产网都会使用双网卡或多网卡接入,这样既能添加网络带宽,同时又能做相应的冗余,可谓好处多多。而一般我们都会使用Linux操作系统下自带的网卡绑定模式。这...

openthings
25分钟前
1
0
SylixOS中AARCH64跳转表实现原理

1. 跳转表存在的意义 1.1 内核模块反汇编 如下的程序清单,为一个内核模块的源码。 #define __SYLIXOS_KERNEL#include <SylixOS.h>#include <module.h> /* * SylixOS call module_i......

zhywxyy
26分钟前
2
0
聊一聊 Spring 中的线程安全性

本文摘自ImportNew公众号,摘录做学习资料,向大家推荐该公众号 Spring与线程安全 Spring作为一个IOC/DI容器,帮助我们管理了许许多多的“bean”。但其实,Spring并没有保证这些对象的线程安...

木子SMZ
27分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部