require.js配合插件text.js实现最简单的单页应用程序
2016-09-21 00:00
375 查看
这篇文章主要介绍了require.js配合插件text.js实现最简单的单页应用程序,需要的朋友可以参考下
写了一个测试代码,用require.js配合它的一个插件text.js实现了最简单的单页应用程序,简单的记录一下,方便以后复习,
git地址:https://github.com/lily1010/requireSPA
下面来看一下目录
从上面项目可以看出,我将css单独抽离出去,实现了按需加载,即加载test1.html时会加载test1.css,加载test2.html时会加载test2.css.
一、先来看入口index.html代码
上面很简单,先定义requirejs入口data-main,另外为了按需加载css,我定义了一个类css-attribute.
二、在main.js配置路径和做逻辑处理
?
上面都是最基础的require配置,注意text.js用法就可以了,很简单的
三、来看看2个页面结构以及样式
①test1.html代码如下:
?
②test1.html的css,即test1.css代码如下:
实现效果如下:
CGWANG王氏教育集团
③test2.html代码如下:
?
④test2.html的css,即test2.css代码如下:
?
实现效果如下:
智能生产管理系统就找华宇兄弟
【点击进入】
简洁好用!便捷管理!低成本!标准的行业专属解决方案与咨询服务
查看
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
写了一个测试代码,用require.js配合它的一个插件text.js实现了最简单的单页应用程序,简单的记录一下,方便以后复习,
git地址:https://github.com/lily1010/requireSPA
下面来看一下目录
从上面项目可以看出,我将css单独抽离出去,实现了按需加载,即加载test1.html时会加载test1.css,加载test2.html时会加载test2.css.
一、先来看入口index.html代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
二、在main.js配置路径和做逻辑处理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
三、来看看2个页面结构以及样式
①test1.html代码如下:
1 2 3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
③test2.html代码如下:
1 2 3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章推荐
- require.js配合插件text.js实现最简单的单页应用程序
- 使用require.js和backbone实现简单单页应用实践
- require简单实现单页应用程序(SPA)
- JS简单实现城市二级联动选择插件的方法
- 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
- 利用JS实现简单的日期选择插件
- jQuery插件zepto.js简单实现tab切换
- JS简单实现文件上传实例代码(无需插件)
- 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
- requirejs结合text.js及css.js等插件实现模块依赖开发(打包案例)
- require实现单页应用程序(SPA)
- require.js实现单页web应用(SPA)
- JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
- JS简单实现文件上传实例代码(无需插件)
- jstl+js+jsp 实现最简单的分页(附插件)
- require.js插件-text.js使用
- [require.js插件] text.js异步加载文本资源
- Textillate.js – 实现动感的 CSS3 文本动画的简单插件
- js实现一个简单的Chrome刷票插件
- jquery textSearch实现页面搜索 注意!!!!调用这个插件后,js事件绑定如,on、bind、live delegate全部失效,折腾了我一整天!!!