【实践】用路由为webApp单页应用提供多入口

最新推荐文章于 2023-04-22 21:44:50 发布

Jafeney

最新推荐文章于 2023-04-22 21:44:50 发布

阅读量4.3k

点赞数 1

分类专栏： web前端文章标签： web app

本文链接：https://blog.csdn.net/u011413061/article/details/50325015

版权

前言

我1个月前开发的webApp是个单入口的单页应用，那个时候需求没有很复杂，仅仅是一个购物的站点，但后来不停地添加功能，而且近期还提出需要把webAPP的部分页面分享到 IOS webView、微信朋友圈，并且能完成完整的业务逻辑。

我的策略

拆模块，分多页

这个需求下来，我第一反应是“拆”——把单页的webAPP根据模块拆分成多页，以一个新的html页面的形式提供给iOS和微信端。这么做的好处很明显：

思路简单，不需要很复杂的js架构
可以利用浏览器的历史记录来做返回跳转，避免了原先的靠判断状态码来实现 返回 更简便且易维护。
以模块拆分页面，方便团队开发和维护。

此法虽好，但是不太适合眼前的情况：

放弃单页的思路，那么之前的架构就得重新整合，这会是一个大工程，因为现有的代码光js已经超过了4500行，公司追求速度，不太情愿花过多的时间在架构上。

这里写图片描述

放弃单页的思路，那么对模块化的要求就变得更高，单页内资源共享的优势就荡然无存，需要花费不少时间去封装原有的模块，单一职责，充分解耦。这又是一个时间投入比较大的工作，公司又不情愿了。
当前公司人才短缺，整个webAPP项目能实际参与开发的就我一人，而我，不久前也找好了新东家，明年过完春节就去入职，所以留给这个项目的时间已然不多。虽然条件苛刻，但还是要去做。

如何在有限的时间里把这个问题解决呢？我最后想来想去，觉得可以参考 AngularJS里 路由 的思路。

换路由，多入口

之前做项目架构的时候我还没来得及学习AngularJS，所以在设计上有不少的“笨思路”，没有很好地站在巨人的肩膀上去思考问题。唉，好在现在已经意识到这一点了，以后做每件事都不应该“闭门造车”，而且多参考一些成功的案例，借鉴别人成功的经验，少走弯路才好。

路由的好处：

以url作为页面跳转的媒介，这样的思路可能和原先的 状态码 类似，但是状态码是只能通过JS内部调用，无法外部操作，而url则不然，不仅可以外部操作，多口入进入，而且对SEO友好性上也提升了一些。
改用路由的方式，原先的很多模块不用做太多的改动，仅仅是 controller层的 状态码 写入需要做相应的改动。这样就节省了 “大手术”的开发成本和风险。

可能方法没有好坏之分，只有适合不适合当前的现状吧。伟人云“黑猫白猫能抓到老鼠的就是好猫”，这一理论在小公司特别明显。没办法，我们的项目需求变动地很快，老板要求的时间也很紧张，没有很多的时间让我去学习和思考技术的好坏，只要能快速地出成果就OK。这样的现状使得小公司出来的技术人才在技术理论层面或者深度上会不及大公司的同类人才，但是论项目经验和碰壁的次数也是没的比的。在这个公司，作为前端的我，不仅要把前端的工作做好，PS、Linux、PHP、Java方面的问题都要接触不少。而我们的原则就是“既然碰壁，那就努力把它碰穿”，无论什么问题，解决就可以了！

既然目前的趋势是“大前端”，那我并不觉得小公司出来的人才在能力上会比大公司出来的差，还是要看一个人的品质和他努力的程度的，我始终相信成功靠坚持，一个人肯在一个领域里不停地摸索滚爬，那么终有一天能成为该领域的领军人物的。

具体实施

get方式做路由

get方式的url参数传递是比较好理解的，而且取值操作也很容易，重要的是这样的参数方式不会对页面产生任何影响。

function queryString(){
   
    var url = location.search;
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for(var i = 0; i < strs.length; i ++) {
            theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
        }
    }
    return theRequest;
}