西西河

主题:【原创】jquery 和 vue -- 铁手

共:💬13 🌺94 新:
分页树展主题 · 全看
  • 家园 【原创】jquery 和 vue

    西西河的网站前端开发,我以前主要用 jquery。因为前端后端都是自己做,所以知道该在什么地方用 jquery 作什么事情,自我感觉逻辑清晰,问题分隔比较清楚,一旦有什么问题,基本上能够很快找到地方,然后进行适当的修改,完工。

    总体而言,我觉得 jquery 的主要好处是定点精细操作,不好的地方是如果程序大了,这些定点的唯一性比较难以把握,特别是在定型后添加新东西的时候。

    本来我觉得用 jquery 基本上够用,只是最近几年来更新似乎停顿,网上有说法因为一些其他的前端工具的兴起,jquery 逐渐的被人放弃,我也只好看看其他的选择。其实,在我看来 jquery 简单明了,功能强大,不维持有点可惜。不过,也许是我的思维方式比较老套。

    我现在决定选择用 vue js 作前端,主要原因是看起来容易上手,设计理念上也比较符合我的思路。

    jquery 的时候,是对网页里的 dom 直接操作,需要通过选择定位,然后对那个定位进行操作,比如动画,比如添加新内容,取消旧内容,特别是通过 ajax 获得后台新内容时,直接了当。

    用 Vue 的时候,思路上需要有一个比较根本性的转变。它的基本概念是:数据驱动的界面元素改变。我要做的,主要是提供数据,然后这些数据来驱动设定的模板来显示内容。最大的好处是,我只需要关心数据和显示的模板,具体的显示则交给 Vue 去实现,包括数据变动时的即时更新。 jquery 的时候,要自己去更新,除此之外,jquery 也基本上不做什么,所以客户端有没有瓶颈,瓶颈在什么地方,也容易知道。Vue 的话,显然它需要不断检测数据是否变动,所以除了更新显示以外,应该还需要消耗额外的资源来监测。但是没有看到有人抱怨这个,估计对性能没什么不良影响。

    眼下看来,Vue 的确也很方便,对于单个页面来说,用 component 来组织页面,动态显示和更新的确很容易。不幸的是,我现在卡壳在怎么显示通过 ajax 载入的内容。

    比如以一个弹出窗口为例子。如下的格式:

    -- 标题 --

    -- 内容 --

    用 jquery 的话,就用 ajax 获得的内容直接更新就行了。Vue 不太好这么作。按我目前的理解,最好是建立一个模板,然后 ajax 更新的是其中相关的数据。问题是,jquery 可以用一个格式来塞各种内容。用 vue 的话,就需要对不同的内容套用不同的模板,感觉有些复杂。但话说回来,jquery 的时候,也可以看作是服务器在套各种模板,vue 则是简化服务器,客户端多了一些工作。也能说的过去。

    最大的问题,目前还没有想通的是,比如以下的内容:

    <vue-component1></vue-component1>

    一些内容

    <vue-component2></vue-component2>

    一些内容

    <vue-component3></vue-component3>

    如果在一个完整页面上,显示没问题。vue 在页面载入后对这些 vue 相关的内容进行了处理,这些 component 被转换成相应的html来显示。那如果这段内容是通过 ajax 载入的话,怎么让它正常显示呢?

    关键词(Tags): #jquery#vue通宝推:hullo,黄锴爱李莹,桥上,mezhan,
    • 家园 VUE的设计理念比较适合国人思维。
    • 家园 jquery 过时是因为它提供的便利性已经成为语言特性

      新的JS语言标准已经内置了功能。比如 Fetch。并且浏览器现在基本就两大阵营:Chrome 和Firefox。这两家更新很快,对新标准支持很快。

      我一般设计网站的方式是服务器只提供JSON数据。前端基于json数据画界面。这样前后端解耦合,可以独立开发验证。

      用vue的时候,建议用axio做ajax。它的API是async。取回后可以绑定component的data或者用method预处理一下。可以针对一页(比如全看)一次取出,然后用一组嵌套的component一次render。也可以每一个component自己调一次axios(比如每一贴)。前者io交互少,后者数据流量小。

      通宝推:敲门,mezhan,
      • 家园 正解,前端就像时装,不断有潮流

        vue的话,更多开发理解落在业务逻辑上,将细节的渲染脱藕了。我做的项目基本上前端就是个静态页面,靠数据来刷新,负载均衡什么变得容易多了。

        可惜我的工作是一阵阵的,一会儿这一会儿那,VUE已经快一年多没有去摸了,虽然开发还是我去指导,细节这个只能是具体干活时候才会深入。

      • 家园 太感谢了,一并请教

        初学 Vue,还没仔细看 Vuex 和 Vuerouter。现在也不敢大规模改,只是对部分地方用 Vue 来实现一些功能的加强。

        曾经考虑过服务器端只取数据,然后完全交给客户端来做显示,但是考虑到搜索引擎,我现在大致确定所有需要被搜索引擎检索的内容由服务器端送出,Vue 在客户端做一些点缀。

        本来以为可以用 slot,只要搜索引擎 bot 能看到 slot 里面的内容就可以,不过看起来也只能是一个 slot 的情况下。用 named slot,那些内容就被忽略了。

        所以暂时不能采用服务器送所有数据,然后由客户端的component 来显示。这个方案看上去的确很诱人,但是我不知道怎么对付搜索引擎的检索。按我的理解,目前为止,大概也就是google才会解析检索 javascript 形成的内容。或者专门做一个版本供搜索引擎检索?

        你和 @少侠请留步 都提到 每个 component 自己调一次 ajax 来获得数据。我之前没想到这点,你们一提,有茅塞顿开的感觉,估计能解决我现在的问题。

        以看单帖跳出来的这个窗口为例子。

        现在的做法是,ajax 获得服务器来的内容,直接塞到弹出窗口里的一个 div。如果用 Vue 的话,是不是用一个 watcher 来响应用户的点击,然后去后台去数据?因为前面提到的搜索引擎的考虑,我现在没法在每个帖链接上做 vue 的 v-on:click。

        单帖内容里,有一部分是另外的 component,这些也需要显示。现在大概有两个思路,一个是在前台做组件搭模板,后台只提供数据。不好的地方是,后台需要根据情况准备两个版本,完整页面一个版本,弹出一个版本。另外一个思路,应该是老思路了,就是后台只有一个版本,ajax 抓回来的内容想法让它融入到 Vue里,包括里面的 vue component。眼下这些返回的内容只被看作是纯字符串。我又看了一下 Vue 的文档,也许 Vue.extend() 再加上 $mount 可以实现这个方案? Vue.extend, Vue.compile 有什么差别?

        通宝推:mezhan,
        • 家园 我不是一个vue的重度使用者,虽然vue会是首选。

          另外我开发企业内部网站比较多。对于大流量像西西河这样不是很有经验。

          下面是我的理解,没有读过vue源码,不一定正确,主要是建立一个理解它思想模型。

          1. Vue vs. div

          一个Vue相当于一个div元素的。一个HTML通常从一个div开始嵌套,一个Vue工程也是一个new Vue()开始,然后里面再一个个Vue对象嵌套。Component 是一个定制化的Vue对象。当你开始用脚手架开始,用.vue文件来开发时,表现得特别明显。

          一个.vue文件包含 模板(HTML), JS代码(预先定义好原形的类method), css 。模板顶级element有并且,只能有一个顶级div.

          总结一下, vue 就是一个加强版的div, 使得对这个div的style,attributes, event等好处理。把Vue对象一一对应起来有助于整齐思考网页的设计。

          2. vue.component(), vue.extend(), vue.component()

          一个.vue文件对应于一个component,这是一种IDE友好的可视化写法,比vue.component()这种纯代码直观的多。也有利于组织源代码。

          但是这不是标准的js语法,所以Vue需要先把这个文件作为普通的字符串,装载再语法解析,翻译成标准的js文件,再生成DOM树,当然夹杂很多优化,不然就没有意义了。这个事情有vue.compile()来完成。

          所以如果你用.vue文件来写component, 基本不需要使用compile, extend etc. 脚手架就是一个自动调用这些api的框架,用来解释自己的DSL(domain specific language),那些.vue文件。

          3. vuex,router

          这些客户端路由主要用于SPA(single page application),西西河更类似行为网站,而不是应用Application,没有太多客户端状态需要保留和切换,不是很有用。这些客户端路由基本上是利用业内跳转(#),或者history api(浏览器的前进后退按钮来实现)。西西河目前的API挺好,只需要把他们转换成返回数据I,用component发送ajax访问就好了。

          4. SEO

          我做intranet网站多,所以没什么经验。

          Google 的爬虫是爬下来,用chrome render后才索引的,我觉得西西河不用担心js使用太多这个问题。其他主流估计也差不多。

          另外vue也只支持server 端 render。但是要用node js。不知道西西河的后端是是什么。

          通宝推:铁手,
          • 家园 多谢。前面的问题通过 vue.extend 暂时解觉了

            你的第一点看得相当透彻。这些天下来,碰壁无数次后,我也是有这个模糊印象,铁手:【原创】菜鸟初学 Vue js,之一,为什么是它,不过你说的更清楚。特别是 vue component 基本上就是个加强版的 div 这点。

            我前面的问题现在用 vue.extend,然后 $mount 暂时解决了。感觉上基本就是 .innerHTML="内容" 的加强版。不同的是,$mount 是用返回的内容完全替代 mount 点,而不是填入。还有一个关键点是里面的data用了全局变量,后台不用变化。这种做法大概和推荐的 vue 做法不太合路,所以我网上找了半天,都没有提到用 vue.extend 的方式来解决这类问题。但是初学者估计很容易会碰到这类问题。现在暂时解决了,以后再考虑专门的组件,然后在组件内去 ajax 取内容。

            component 我现在是直接塞的,以后用单个的 vue,看来要涉及到 webpack,需要学习。

            vuex, vuerouter 也要找时间学习。

            seo 那块,我想多照应一下 duckduckgo。根据我现在的理解,只有 google 会在检索的时候同时运行 javascript。另外,也不知道 web archive 是怎么检索的,我觉得它的这个功能很有意思,所以也最好能照顾到。

            后台没用 nodejs,一段时间内估计也不考虑ssr,除非我对 vue 已经很熟悉了。眼下来看,估计需要一段时间才能考虑。

            通宝推:mezhan,
        • 家园 一个版本足以,CSS这块估计要综合考虑

          vue这块侧重于业务逻辑,具体到手机还是PC机浏览器这里,这还是CSS编程的范畴,图省事,上bootstrap,有grid编排布局,响应式的,对各种终端有比较好的适配。复杂一点,应该是css-less这种,将CSS当做编程语言对待,需要编译一下,作为生产环境使用。

          不要把VUE当做样式布局对待,除非对布局没啥追求,土土的干也行,比如硬插一个DIV;VUE侧重于业务逻辑,数据驱动逻辑。

          • 家园 嗯,前面提的版本主要是针对搜索引擎

            是一个版本供人和引擎一起用,还是人一个版本,引擎一个版本。我眼下考虑就一个版本算了,只要保证搜索引擎忽略 javascript 的情况下,能够检索到干货内容就可以。

            css 上目前也是有些问题,主要是桌面上的 hover 效果怎么更方便的在触摸设备上能够简便体现。

            • 家园 hover是交互工程师需要考虑的问题

              PC网页这种hover觉得正常,但是在移动设备上,就很怪异了,UI设计从拟物转向扁平化已经很长时间了,这个还真要费心思推敲下,好维护,又能把要素表达清楚。

              关于搜索引擎的友好问题,没有什么好办法,vue使得我们开发这个角度,语义抽象的不错,数据(文章内容)是动态的,你有期望传播的意图,我们做业务程序的除了推广页,不考虑这个需求。也许最质朴的办法是最合适的,那就定时or同步生成静态页面feed搜索引擎好了。

        • 家园 vue其实也有SEO方案的

          https://segmentfault.com/a/1190000019623624 可以参考这篇文章。我没有在实际案例中使用过,所以不敢保证是否有大坑,仅供参考。

          • 家园 多谢,我看了一下,觉得有点复杂

            对于搜索引擎,我最大的顾虑,一是内容能不能被检索,二是搜索引擎会不会因为特定版本认为我作弊。

            眼下我考虑暂时还是用网页骨干内容 + VUE前面动态或点缀的方式,可惜不能完全利用 Vue 的优势。

    • 家园 组件里面请求数据并渲染就可以了

      组件里面,加载时,发起网络请求,然后用数据填充html模版就可以了。这样的组件可以全站复用

分页树展主题 · 全看


有趣有益,互惠互利;开阔视野,博采众长。
虚拟的网络,真实的人。天南地北客,相逢皆朋友

Copyright © cchere 西西河