简书前端项目/vue开发方式的疑问

简书官网:http://www.jianshu.com/

问题概述:简书官网,使用的vue项目;为什么要多个vue项目一起混用?使用哪些技术的混搭,是为了处理什么场景的?

我能想到的情况是

  • 方便用户收藏标签/互联网传播
  • 方面多人合作
  • 方面SEO这些

具体为应对什么场景,就母鸡了。。。

先说下导航上有下面这些的连接入口

导航上有这些连接,对应的URL是下面这种;

  • 首页:http://www.jianshu.com/
  • 关注:http://www.jianshu.com/subscriptions#/recommendation
  • 消息相关:
    • 评论:http://www.jianshu.com/notifications#/comments
    • 简信:http://www.jianshu.com/notifications#/chats
    • 投稿:http://www.jianshu.com/notifications#/requests
    • 喜欢:http://www.jianshu.com/notifications#/likes
    • 关注:http://www.jianshu.com/notifications#/follows
    • 赞赏:http://www.jianshu.com/notifications#/money
    • 其它:http://www.jianshu.com/notifications#/others

可以看到,消息相关的页面都是有哈希路径,不同的二级菜单切换时候页面是不会有重载,就是点击切换浏览器不会刷新 (同属于http://www.jianshu.com/notifications这个下面)

关注页面 http://www.jianshu.com/subscriptions#/recommendation,

这种的下面“全部推荐”“推荐作者”“推荐专题”三个切换时候,没有页面重载;但是因为这个路径和消息页面不属于同一个目录下,所以消息页面和关注页面切换的时候,是会有页面重载(subscriptions#/ 和 notifications#/ 切换的时候);

下面这三个分别由三个不同的vue项目来实现的

  • 首页:http://www.jianshu.com/ (也就是”发现”页面)
  • 关注:http://www.jianshu.com/subscriptions#
  • 消息:http://www.jianshu.com/notifications#

【+++++我的疑问1+++++】:如果是三个不同的vue项目实现的,他们之间又是怎么做全局通信的,这种项目下全局通信有哪些需要注意的坑?为什么要分为3个项目来做,是想折中处理哪些可能的场景吗?

3个项目全局通信的例子:下面图中,这种全局状态设置,切换后,不同页面都是会多相应改变的,首页、关注,消息三个页面都会获取这个配置并做对应的显示;

用下面这种结构做例子,不同页面的结构如下,如何做多页的通信?

项目结构:

  • web 根目录
    • pages
      • home 首页/发现
      • subscriptions 关注
      • notifications 消息
      • search 搜索
        • http://www.jianshu.com/search?q=vue&page=1&type=note
      • user 用户相关
      • settings 用户设置
      • bookmarks 收藏的文章
      • wallet 我的钱包
      • faqs 帮助与反馈
      • collections 分类页面
        • http://www.jianshu.com/c/fcd7a62be697?utm_medium=index-collections&utm_source=desktop
      • notes 文章页面
        • http://www.jianshu.com/p/ee286ba1ee7f
      • recommendations 推荐页面
        • http://www.jianshu.com/recommendations/notes?category_id=56&utm_medium=index-banner-s&utm_source=desktop
        • http://www.jianshu.com/recommendations/users?utm_source=desktop&utm_medium=index-users
      • trending 热门
        • http://www.jianshu.com/trending/monthly?utm_medium=index-banner-s&utm_source=desktop
      • publications 出版
        • http://www.jianshu.com/publications
      • common
        • sign_in
        • sign_up

点击个人头像,在看看个人中心的;

下面这些切换都是会重载页面的,项目配置中,路径不是默认的哈希路径;是HTML5 History 模式

  • 我的主页:http://www.jianshu.com/users/92d8a8f21479/timeline
    • 其中,文章、动态、最新评论、热门、这些选项切换不会重载;
    • 我关注的专题和我喜欢的文章,
    • 这些切换,如果是点右侧青色区域的切换是会有页面重载的
      • 我关注的专题:http://www.jianshu.com/users/92d8a8f21479/subscriptions
      • 我喜欢的文章:http://www.jianshu.com/users/92d8a8f21479/liked_notes
    • 如果点中间区域红色区域切换,不会进行页面重载;
    • 我想到的结论:这么做可能是为了增加多入口,以及可以让用户方面的加入书签
  • 收藏的文章:http://www.jianshu.com/bookmarks
  • 喜欢的文章:http://www.jianshu.com/users/92d8a8f21479/liked_notes
  • 我的钱包:http://www.jianshu.com/wallet
  • 设置:http://www.jianshu.com/settings/basic
    • 个人设置下的二级菜单;
    • 【+++++我的问题2+++++】:下面这些二级菜单切换是没有页面重载的,属于一个vue项目,这种实现方法是不是设置HTML5路径模式,后端nginx协助跳转即可,有没有什么更好的处理办法?
    • 基础设置:http://www.jianshu.com/settings/basic
    • 个人资料:http://www.jianshu.com/settings/profile
    • 微博认证:http://www.jianshu.com/settings/weibo-auth
    • 黑名单:http://www.jianshu.com/settings/blacklist
    • 赞赏设置:http://www.jianshu.com/settings/reward-setting
    • 帐号管理:http://www.jianshu.com/settings/misc
  • 帮助和反馈;http://www.jianshu.com/faqs
  • 退出:http://www.jianshu.com/sign_out

一共三个疑问:

  • 1、问题概括(写在了开始的地方)
  • 2、我的疑问1
  • 3、我的问题2

未经允许不得转载:朱邦邦的博客 » 简书前端项目/vue开发方式的疑问

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址