快速构建SPA框架SalutJS--项目工程目录 一
起因
刚进公司那会儿,接的是一个微信APP应用,SPA是前人搭起来的,用到的技术主要是backbone和zepto。后来那人走了,就卤煮一个人把项目接了下来。项目越是到后面,越发觉了诸多弊端,不停的增加界面和业务使得整个应用看起来臃肿不堪。于是觉得是时候重构了。那时也巧是正好认识requireJS,认为界面嘛,总可像那模块一样,异步加载进来。于是就在旧瓶子里装了新酒,除了界面,代码结构就完全重写了。后来私底下又接了别人的活,也是微信APP应用,觉着跟咱之前的差不多,也就把重构后的代码一并用上,发现效果很不错。完成后渐渐的生出自己写框架的想法,于是便抽出代码,修改,优化。积累起来一个基于backbone的快速开发的代码库。用来开发html的单界面应用。
简介
目前就将它命名为SalutJS吧。它的作用主要是让开发人员关注具体的业务,快速的搭建基础框架。如果你使用了Salut,你可以在两分钟内搭建起来一个简单的单页应用。当然,所谓的单页是指不刷新界面的情况下切换视图界面,是用户感觉整个应用的界面是流程的,无刷新的。我们是利用浏览器的hash变化值和div隐藏切换实现的这个功能。通过检测浏览器的hash值变化,从而改变div(一个完整的界面)的显示和隐藏,从而达到无刷新切换界面的效果。一开始有个疑问,那就是如果界面越来越多,会不会影响加载性能呢?我想这是每个做移动开发的人员都回去考虑的问题。SalutJS为你解决了这个问题。界面是可以拆分,组合,并且是异步加载的。你可以在一开始只load出第一个界面,然后再需要的时候异步load其他界面。资源文件(js,template)都是异步加载到客户端的。这样就解决了业务提示从而导致首屏加载速度慢的问题了。其次,SalutJS的所有节目几乎是只需要几行配置就可以展示出来,等于是将界面开发配置化了,你需要做的事建的业务需求和界面css代码的编写。通过它的简单的API,你可以快速简介地串联起各个界面。
示例
卤煮将在以后几篇博文中陆续介绍SalutJs。通过制作一个简单的单页应用,展示它的具体用法。下面是实例部分的截图。可以改变地址栏改变了hash值推动界面变化。
结语
SalutJS只为快速开发SPA这个简单的目的。当然,里面的错误和欠考虑之处在所难免。你可以去github上fork一下,通过阅读代码,发现问题并且@我提出你的宝贵意见,一起完善它,将其造福于广大的程序员。另外,虽然现在用的是requireJS,然而异步模块加载的模块卤煮已经重写一次,用起来虽然差强人意,单比起requireJS,确实没有其成熟,不过体积却只有它的四分之一,为了精简代码,卤煮后续会替换掉之。还有,卤煮到最后也是希望替换掉backbone的,真正实现自己的一套原生框架。这项工程较大,需要花很多时间。也需要诸位的慷慨相助。
源码地址
https://github.com/constantince/Salut
快速构建SPA框架SalutJS--项目工程目录 一的更多相关文章
- 快速构建SPA框架SalutJS--项目工程目录 二
目录结构 上面这张图是salut的目录文档,从github上将其下载后直接运行node run和 node json 可以直接启动项目.下面逐个介绍每个目录的存放的文件和作用. constructio ...
- 快速构建SPA框架SalutJS--项目工程目录 三
配置文件 在开始我们的第一个界面之前,我们需要把初始的html和config文件配置好.html非常简单,只需要一个div作为最外部的容器包裹着所有界面即可: <!DOCTYPE html> ...
- 使用 Spring Boot 快速构建 Spring 框架应用--转
原文地址:https://www.ibm.com/developerworks/cn/java/j-lo-spring-boot/ Spring 框架对于很多 Java 开发人员来说都不陌生.自从 2 ...
- 使用 Spring Boot 快速构建 Spring 框架应用,PropertyPlaceholderConfigurer
Spring 框架对于很多 Java 开发人员来说都不陌生.自从 2002 年发布以来,Spring 框架已经成为企业应用开发领域非常流行的基础框架.有大量的企业应用基于 Spring 框架来开发.S ...
- 使用 Spring Boot 快速构建 Spring 框架应用
Spring 框架对于很多 Java 开发人员来说都不陌生.自从 2002 年发布以来,Spring 框架已经成为企业应用开发领域非常流行的基础框架.有大量的企业应用基于 Spring 框架来开发.S ...
- Myeclipse项目工程目录中各种Libraries的含义
MyEclipse工程目录下一般会有以下几类Libraries,如图: 各种Libraries的含义如下: JRE System Library:Java SE 的常用库文件集合,构建任何Java项目 ...
- Maven项目工程目录
maven工程目录规范: src/main/java 存放项目的.java文件 src/main/resources 存放项目的资源文件,如spring.hibernate配置文件 src/t ...
- maven项目工程目录约定
使用maven创建的工程我们称它为maven工程,maven工程具有一定的目录规范,如下: src/main/java —— 存放项目的.java文件 src/main/resources —— 存放 ...
- 快速构建hibernate框架
手动配置Hibernate框架的配置,极易出现问题,在Eclipse的web项目中,我们可以快速配置,方便快捷 一.导入Hibernate框架所需要的jar文件 二. 窗口—Perspective—打 ...
随机推荐
- ubuntukylin18.04Lts和deepin15.5与win10 1803双系统安装
我首先安装的是ubuntu kylin(中文名优麒麟) 1.计算机右键选择管理磁盘,压缩卷设置空闲空间(第7步分区用) 2.重启时fn+f1进入bios设置界面. 3.关闭安全模式和快速启动,将boo ...
- Git协作流程
Git 作为一个源码管理系统,不可避免涉及到多人协作. 协作必须有一个规范的流程,让大家有效地合作,使得项目井井有条地发展下去."协作流程"在英语里,叫做"workflo ...
- spring MVC(十)---spring MVC整合mybatis
spring mvc可以通过整合hibernate来实现与数据库的数据交互,也可以通过mybatis来实现,这篇文章是总结一下怎么在springmvc中整合mybatis. 首先mybatis需要用到 ...
- IntelliJ IDEA(十) :常用操作
IDEA功能详细,快捷键繁多,但是实际开发时不是所有都能用上,如果我们熟悉一些常用的也足够满足我们日常开发了,多的也只是提高我们的B格. 1.自定义主题 IDEA默认的主题有三款,分别是Intelli ...
- Elasticsearch笔记七之setting,mapping,分片查询方式
Elasticsearch笔记七之setting,mapping,分片查询方式 setting 通过setting可以更改es配置可以用来修改副本数和分片数. 1:查看,通过curl或浏览器可以看到副 ...
- BZOJ_1407_[Noi2002]Savage_EXGCD
BZOJ_1407_[Noi2002]Savage_EXGCD Description Input 第1行为一个整数N(1<=N<=15),即野人的数目. 第2行到第N+1每行为三个整数C ...
- 虚拟机console基础环境部署——系统基础环境
1. 概述2. 工具类安装2.1 安装vim2.2 安装tree2.3 安装expect2.4 安装lsof3. 编译环境类安装 1. 概述 本系列博客是在最小化安装CentOS6.5的基础上,通过配 ...
- sublime text3简体中文版汉化教程
今天突然想到好像还有一个强大的编译器sublime text 3可是这个是外国的编译器,不过各位不用担心 这个编译器,已经支持中文编译了: 下面就是我关于汉化为中文方面的一些了解以及汉化方式(由于我的 ...
- String去重方法
思路:利用集合的contains方法将某个字符串中的集合中没有的单个字符添加到集合中,然后再将集合中每个元素做拼接 @Test public void aa5(){ String aa="a ...
- 从壹开始微服务 [ DDD ] 之十一 ║ 基于源码分析,命令分发的过程(二)
缘起 哈喽小伙伴周三好,老张又来啦,DDD领域驱动设计的第二个D也快说完了,下一个系列我也在考虑之中,是 Id4 还是 Dockers 还没有想好,甚至昨天我还想,下一步是不是可以写一个简单的Angu ...