快速构建App界面的框架(●'◡'●) -----SalutJs

时间 2019-11-19

标签快速构建 app 界面框架 salutjs 繁體版

原文原文链接

前言

卤煮在公司之初接触到的是一个微信APP应用。前端技术采用的是Backbone+zepto等小型JS类库。在项目开发之初，这类中小型的项目采用这两种库能够知足基本的需求。然而，随着迭代的更新和业务的增长，成堆的代码被覆盖到项目中去了，使得这样一种技术架构方式变得异常的臃肿，不少界面变得异常的难以维护，所以卤煮打算重构公司前端架构。css

卤煮的想法是：采用异步模块的加载方式，将不一样微信菜单进入的界面分红若干的模块文件，这样的好处是按照需求加载界面，并且每一个界面都单独成模块，便于维护和独立开发。因而卤煮花了大概一个月的时间重构了前端。也就是从那时起以backbone的框架为基础，封装成一套配置框架。就这样，项目通过改良，变得比较容易维护，卤煮也从其中学到了若干经验，积累了一些有用的代码，最后逐步通过改进，在通过实践的考验（用此框架完成了其余两个中小项目），整理成了一套本身的小型框架出来，卤煮将之命名为SalutJs。它刚刚诞生，它并不怎么成熟，文档写得比较马虎，具体得看开发实例，卤煮都放到github上去了。卤煮用它作过三个项目，但整体感受是比较不错的，它很是适合作这样的相似微信app中小型单页应用。本篇博文就是向诸位分享卤煮的一些经验和框架知识，但愿可以帮助正在最相似web应用而不知道怎么下手的诸君一些小小的帮助。html

架构思路

如卤煮以前说的那样，随着业务和界面的增长，代码回变得愈来愈难以维护。碰到此类问题，第一件想到的事情就是一个字“分”。但如何分呢？这个问题卤煮考虑了许久。卤煮作的微信开发，一个线上的点餐项目，它包含以下功能：点餐，会员中心，优惠，砍价，呼叫等等十几个，这些功能里面，每一个功能里面进去会有相关的若干界面。能够想见，若是把全部的界面业务代码放在一个文件里面，整个项目会变得异常的臃肿最后奔溃。卤煮考虑的是将每一个功能里面的若干界面的代码放到同一份js里面，这样，当用户使用其中一个功能的时候只须要加载一个js而不是十几个界面代码。当咱们须要从一个功能里面的界面切换到另一个功能模块里面的界面时，咱们运用requirejs的异步加载方式，异步载入须要加载的文件。这样便解决了代码耦合和臃肿的问题了。值得一提的是咱们结合界面的原则是根据业务需求来的。卤煮举个例子：在点菜功能里面有若干界面，但点菜功能不必定会须要会员卡功能界面，因此，咱们在写点菜功能文件的时候，是不须要把会员卡界面业务包含进去的。前端

html模板

在渲染功能上，卤煮没有作何改变，沿用的是underscore的template方法渲染。因为界面的业务已经分开，那么html结构也对应的能够分开。没必要要一开始就将没必要要的html代码放入咱们的主体文件中。卤煮加载html模板的原则是跟js有些同样的，方法则是用ajax讲html以文本的形式下载下来，而后渲染到界面中去。在require的时候，咱们会去服务器拉去对应的模板文件，也就是说咱们实现不一样大功能之间的跳转须要请求两个文件，一个是xx.js,另一个是xx.html。实际开发过程当中，你不须要本身去调用这些文件，使用route.myNavigate方法，框架会自动帮助你去下载js和html文件:node

目录结构

在使用Salut的时候须要按照既定的一些目录规则来建立文件结构。咱们的项目大体分为若干目录：git

construction:配置文件以入口文件github

css：样式文件web

fonts：字体文件ajax

img：存放路径服务器

js：存放全部基础架构js和业务代码以及模板文件微信

node：运行测试项目node文件（实际开发中请无视）

page_main.html：主题html文件

run.js: node文件，运行便可将项目跑起来

js文件夹下面又分了若干文件夹，存放了不一样的js文件

base：salut的核心代码

core：backbone和zepto等底层代码

plugins：若干插件

tpl：模板文件

use：每一个功能的业务代码文件

config：配置文件

map.html：须要用到的地图文件

入口：

page_main.html是整个项目的html，若是没有其余特殊的业务需求，全部的单页面都在此html中实现，不会有url的跳转。它的最外层是一层div包裹着的，做为最外层的容器。而后是用require引入的入口js的文件：

<body>
<!-- 最外层容器 -->
<div id="pageWindow"></div>
<!-- 引入require 载入入口文件 -->
<script data-main="construction/app" src="construction/require.js"></script>
</body>

咱们看到，只要当界面一开始加载，而后开始引入了app.js文件，在app.js中，咱们会判断当前界面的地址，配置好require的默认配置，引入自定义配置，开始拉取对应的界面业务代码下来:

命名规则

Salut的命名有本身的一套规则：主要体如今文件命名上：在命名业务文件上采用大写字母开头，而在命名html文件上规则是tpl加小写字母开头的对应js业务文件。在为每一个节目注册路由时，路由的名称为大写字母开头，界面名则为小写字母开头，但名称都是同样的。每次你创建一个新功能的时候，必须去config里配置这个功能模块文件的名字和里面对对应的界面名称的关系，在github的例子中你会看到。这样作的缘由就是js没有读取本地文件的能力，因此你必须把其余功能文件中的界面写在配置文件里面，这样，当须要去load另一个界面的时候，才知道咱们是须要加载哪个js。

路由规则

Salut并无改变backbone的路由规则，它沿用了以前的hash作法，在backbone源码中，你能够看到有多种方式实现路由推进事件，他们是hash、pushstate、和定时函数。Salut的初衷也是分界面，每个路由对应着每个界面，在地址栏中改变hash值（#号后面那部分，对应不一样界面）从而跳转不一样的界面。这个卤煮在以前的博文中已经讲到过了，这里就再也不提。路由的名称是和界面模块的名称有关系的，在命名规则里面咱们也已经提到过了。

总结

Salut在构建相似以上提到的相似微信app的应用时很是适合，也很是简单。它对于中小型的app应用来讲是比较合适的。学会规则后几乎只要简单的配置就能完成加入一个界面到项目中的工做。卤煮本身考虑后续把requirejs这样的模板加载文件替换掉（已经写完），最后把backbone底层框架也换调，把他作成一套彻底自主的js框架。不过这是一条比较漫长的道路了。卤煮已经把相关的文档上传到了github上，里面有一整套demo，注释也写得比较详尽。诸君若是有兴趣，请关注一下。海纳百川，有容乃大。Saultjs做为初生的一套轻框架存在或多或少的问题，也因为他的实践经验很少，要求它不断的在实践中不断地进步完善。固然，凭借卤煮一人之力，实在微不足道，为此特将其开源，但愿诸君为它添砖加瓦，使得它更增强大。或者能够提供本身的意见，也很是欢迎贡献代码。总而言之，卤煮在此并非推广本身的框架，只是分享一下工做中总结起来的一些代码工具而已。若是你什么疑问，请发邮件到alberteinstein007@126.com或者在博客评论区留下你的意见，卤煮看到后会及时回复的。

唔。。。。。凌晨一点半写完，诸君能看到这里给个推荐吧。

SalutJS的github地址

遇到问题或者建议加群：461636182