文档章节

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

i5--lou
 i5--lou
发布于 2016/06/24 11:33
字数 567
阅读 70
收藏 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 入门指南

简介 如今最常用的JavaScript库之一是RequireJS。最近我参与的每个项目,都用到了RequireJS,或者是我向它们推荐了增加RequireJS。在这篇文章中,我将描述RequireJS是什么,以及它的一些基础...

oschina
2013/08/15
70.2K
37
使用 RequireJS 优化 Web 应用前端

基于 AMD(Asynchronous Module Definition)的 JavaScript 设计已经在目前较为流行的前端框架中大行其道,jQuery、Dojo、MooTools、EmbedJS 等纷纷在其最新版本中加入了对 AMD 的支持。本文...

IBMdW
2012/09/11
8.6K
16
优化 RequireJS 项目(合并与压缩)

本文将演示如何合并与压缩一个基于RequireJS的项目。本文中将用到苦干个工具,这其中就包括Node.js。 因此,如果你手头上还没有Node.js可以点击此处下载一个。 动机 关于RequireJS已经有很多...

jinker
2013/05/01
31.9K
12
使用 RequireJS 实现 JavaScript 的延迟加载

无论简单还是复杂的Web应用,都由一些HTML、JavaScript、CSS文件组成。通常开发者会通过JQuery、Knockout、Underscore等等这样的第三方JavaScript框架来提高开发速度。由于这些JavaScript框架...

oschina
2013/01/12
3.2K
2

没有更多内容

加载失败,请刷新页面

加载更多

新手也能看懂,消息队列其实很简单

该文已加入开源项目:JavaGuide(一份涵盖大部分Java程序员所需要掌握的核心知识的文档类项目,Star 数接近 16k)。地址:https://github.com/Snailclimb/JavaGuide. 本文内容思维导图: 消息...

阿里云官方博客
36分钟前
5
0
如何在Chrome浏览器中启动deviceready事件(尝试调试phonegap项目)?

我正在开发PhoneGap应用程序,我希望能够在Chrome中调试它,而不是在电话上调试。但是,我在onGetReady()函数中初始化我的代码,该函数在PhoneGap触发“deviceready”事件时触发。由于Chr...

kisshua
今天
9
0
nginx中部署vue打包后的静态文件

如何在nginx中部署静态资源就不描述了, 请看我的这篇博客 将vue脚手架项目打包后的静态文件放到nginx上, 发现有个问题, 即url上有#, 怎么去掉这个#呢. 1 项目中router的mode 路由的mode要为h...

克虏伯
今天
13
0
JS容易理解错误的地方

在这端代码执行的末尾,你会不会hi变量回事函数中的hi了?你会不会认为这不是按引用传递了? 对值传递和引用传递产生质疑了? 1 var hi = {};2 function sayHello(hi) { ...

器石_
今天
10
0
Java开发学习--MongoDB

之前只学过sql,第一次使用非关系型数据库。以前对于关系型数据库与非关系型数据库的概念很模糊,通过这次的学习对这两者有了一个清晰的概念。 主键 在MongoDB中,主键名叫"_id",如果在生成...

微笑向暖wx
今天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部