文档章节

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

i5--lou
 i5--lou
发布于 2016/06/24 11:33
字数 567
阅读 56
收藏 3
点赞 0
评论 0

前几天分享了一篇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
博文 71
码字总数 33811
作品 0
杭州
程序员
abei2017/hou-admin

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

abei2017 ⋅ 04/24 ⋅ 0

CommonJS/AMD/CMD/UMD概念初探

1、CommonJS是一种规范,NodeJS是这种规范的实现。 1.1、CommonJS 加载模块是同步的,所以只有加载完成才能执行后面的操作。 参考: http://www.commonjs.org/ http://javascript.ruanyifen...

easonjim ⋅ 2016/12/12 ⋅ 0

Gulp和Webpack工具的区别

引用知乎的回答:https://www.zhihu.com/question/37020798 怎么解释呢?因为 Gulp 和 browserify / webpack 不是一回事 Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧。Gulp / Gr...

easonjim ⋅ 2016/12/24 ⋅ 0

云 GIS 网络客户端开发平台 - iClient-JS

SuperMap iClient JavaScript (简称 iClient-JS )是云 GIS 网络客户端开发平台。基于现代 Web 技术栈全新构建,是 SuperMap 云四驾马车和在线 GIS 平台系列产品的统一 JS 客户端。集成了领先...

ahnan ⋅ 2017/12/04 ⋅ 5

Learning TypeScript 读书笔记3

Chap 4 TypeScript中的面向对象编程 1.面向对象开发的一些原则SOLID: 单一职责原则SRP: 开闭原则OCP: 里氏替换原则LSP: 接口隔离原则ISP: 依赖翻转原则DIP: 2.T雨棚script支持类class、接口...

GunnerAha ⋅ 06/09 ⋅ 0

深入理解javascript系列(十):模块化与闭包

如果想在所有的地方都能访问同一个变量,那么应该怎么办呢? 在实践中这种场景很多,比如全局的状态管理。 但前面我们介绍过,在实际开发中,不要轻易使用全局变量,那又该怎么办呢?模块化的...

Panthon ⋅ 06/14 ⋅ 0

JavaScript define

AMD的由来   前端技术虽然在不断发展之中,却一直没有质的飞跃。除了已有的各大著名框架,比如Dojo,JQuery,ExtJs等等,很多公司也都有着自己的前端开发框架。这些框架的使用效率以及开发...

architect刘源源 ⋅ 04/23 ⋅ 0

我那个财富自由的程序员朋友

图片来自网络 今天凌晨我的死党William突然要来我家。 我还以为出什么事情了,急急忙忙准备了好吃好喝等着他。 进了屋,直接喝了两罐红牛。 然后就坐在椅子上,足足3分钟没说话。 我都吓傻了...

猫小乖不乖 ⋅ 01/22 ⋅ 0

很全很全的 JavaScript 模块讲解

模块通常是指编程语言所提供的代码组织机制,利用此机制可将程序拆解为独立且通用的代码单元。所谓模块化主要是解决代码分割、作用域隔离、模块之间的依赖管理以及发布到生产环境时的自动化打...

一个敲代码的前端妹子 ⋅ 05/11 ⋅ 0

搞笑视频:美国INR计算机培训学校招生宣传片

电视上经常会有多少天速成班的广告,其中不乏有计算机培训学校速成班,这种广告,这种学校,不仅国内有,美国也有,当然,大部分都知道,这些广告都是骗人的。这里推荐的这个搞笑的幽默广告片...

oschina ⋅ 2013/05/31 ⋅ 16

没有更多内容

加载失败,请刷新页面

加载更多

下一页

645. Set Mismatch - LeetCode

Question 645. Set Mismatch Solution 思路: 遍历每个数字,然后将其应该出现的位置上的数字变为其相反数,这样如果我们再变为其相反数之前已经成负数了,说明该数字是重复数,将其将入结果r...

yysue ⋅ 19分钟前 ⋅ 0

Confluence 6 从生产环境中恢复一个测试实例

请参考 Restoring a Test Instance from Production 页面中的内容获得更多完整的说明。 很多 Confluence 的管理员将会使用生产实例运行完整数据和服务的 Confluence 服务器,同时还会设置一个...

honeymose ⋅ 23分钟前 ⋅ 0

Python这么强?红包杀手、消息撤回也可以无视,手机App辅助!

论述 标题也许有点不好理解,其实就是一款利用Python实现的可以监控微信APP内的红包与消息撤回的助手。不得不说,这确实是一款大家钟意的神器。 消息撤回是一件很让人恶心的事,毕竟人都是有...

Python燕大侠 ⋅ 35分钟前 ⋅ 0

压缩打包介绍、gzip压缩工具、bzip2压缩工具、xz压缩工具

压缩打包介绍 压缩的好处不仅能节省磁盘空间而且在传输的时候节省传输时间和网络带宽 windows系统下文件带有 .rar .zip .7z 后缀的就是压缩文件 linux系统下则是 .zip, .gz, .bz2, .xz, ...

黄昏残影 ⋅ 39分钟前 ⋅ 0

观察者模式

1.利用java原生类进行操作 package observer;import java.util.Observable;import java.util.Observer;/** * @author shadow * @Date 2016年8月12日下午7:29:31 * @Fun 观察目标 **/......

Cobbage ⋅ 42分钟前 ⋅ 0

Ubuntu打印服务器配置

参考:https://blog.csdn.net/gsls200808/article/details/50950586 https://blog.csdn.net/jiay2/article/details/80252369 https://wiki.gentoo.org/wiki/HPLIP 由于媳妇儿要大量打印资料,......

大熊猫 ⋅ 48分钟前 ⋅ 0

面试的角度诠释Java工程师(二)

原文出处: locality 续言: 相信每一位简书的作者,都会有我这样的思考:怎么写好一篇文章?或者怎么写好一篇技术类的文章?我就先说说我的感悟吧,写文章其实和写程序是一样的。为什么我会...

颖伙虫 ⋅ 50分钟前 ⋅ 0

github中SSH的Key

https://help.github.com/articles/connecting-to-github-with-ssh/ https://help.github.com/articles/testing-your-ssh-connection/ https://help.github.com/articles/adding-a-new-ssh-k......

whoisliang ⋅ 51分钟前 ⋅ 0

only_full_group_by

我的mysql是在CentOS7.1下面的5.7.17 在 /etc/my.cnf 文件里加上如下: sql_mode='NO_ENGINE_SUBSTITUTION' 然后,重启Mysql服务 systemctl restart mysqld...

SunHacker ⋅ 今天 ⋅ 0

实际项目(SpringBoot项目)中集成Druid

参考网页 https://blog.csdn.net/liuchuanhong1/article/details/55050131 https://blog.csdn.net/CoffeeAndIce/article/details/78707819 https://www.pocketdigi.com/20170530/1577.html 为......

karma123 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部