ExtJS可以称为第一代单页应用框架的典型,单页应

您早晚是闲得蛋疼才重构的吗

2018/07/25 · 底子手艺 · 重构

初藳出处: 奇舞团 - hxl   

乘胜“公布”过程条走到百分之百,重构的代码终于上线了。作者发自了老妈亲般的围笑……

新近看了大器晚成篇随笔,叫《史上最烂的开荒品种长啥样:苦撑12年,600多万行代码》,讲的是高卢鸡的一个软件项目,因为各类奇葩的来由,导致代码品质惨无人道,项目多年不恐怕提交,最后还会有企业决策者入狱。里面有局地细节令人为难:叁个右键响应事件需求花45分钟;读取700MB的数量,必要花7天时间。足见这些软件的质量有多闹心。

假诺让笔者来接任那“坨”代码,内心已经飘过无数个敏感词。其实,作者本人也珍重着后生可畏套陈酿了相近7年的代码,随着后辈的添枝加叶……哦不,保驾护航,功用逻辑日益复杂,代码也变得肥胖,维护起来进退维谷,质量也不及愿。终于有一天,小编听到了心里的妖魔在呼唤:“重构吧~~”

重构是意气风发件磨人的业务,轻易使不得。幸亏兄弟们众志成城,各个地方能源也协作到位。我们小步迭代了大半年,最终一呵而就,终于幸不辱命了。后日跟我们分享一下这一次重构的阅世和收益。

  • Vue2简单入门
  • Vue.js再入门
  • Vue.js使用vue-router营造单页应用
  • Vue.js状态管理工科具Vuex火速上手

现前端框架情形, angular、vue(相当红)、react。react因目前license合同,百度供给内部截至使用react。

摘自前面三个乡下人工的博客

让大家先来看多少个网站:

coding

teambition

cloud9

潜心那多少个网址的类似点,那就是在浏览器中,做了原先“应当”在客商端做的作业。它们的分界面切换特别流利,响应很迅猛,跟守旧的网页明显差异样,它们是何等啊?那正是单页Web应用。

所谓单页应用,指的是在二个页面上并轨三种功力,以至整个种类就唯有四个页面,不论什么事体功效都以它的子模块,通过特定的艺术挂接到主分界面上。它是AJAX本事的一发进步,把AJAX的无刷新机制发挥到十二万分,由此能作育与桌面程序比美的余音回旋不绝客商体验。

事实上单页应用大家并不生分,相当多个人写过ExtJS的品种,用它实现的类别,很自然的就曾经是单页的了,也可以有人用jQuery可能别的框架达成过形似的东西。用各样JS框架,以至不用框架,都以可以完结单页应用的,它只是风姿浪漫种观点。有个别框架适用于付出这种系统,如若使用它们,能够拿走不罕有帮助。

学学进度中痴心图谋

  • 程序语言都以管理0和1 一定比相当多地方是相同的,那么分明有书教你怎么写程序
  • 学学编制程序的率先要素是要语文好,语文好了解技术,看文书档案才干懂
  • vue模板什么意思?
    //HTML 模板应该指的是原生HTML,通过 el 挂载到 Vue 实例上。如在 DOM-模版分析表明 章节事关的 HTML 模板拆解解析的生机勃勃对约束
    <table>
    <my-row>...</my-row>
    </table>
    //字符串模板,即JavaScript内联模版字符串
    Vue.component('my-component', {
    template: '<div>A custom component!</div>'
    })
  • 据说地点的知识点启示,貌似运维遇到蒙受不认知的语法,都暗中认可把代码当成字符串
  • 镜像便是别本的情致,因为国内有墙,所以用npm下载东西不常候会太慢以至挂掉,所以有个别大杂货店会镜像也正是copy一模二样常用的框架和库提必要本国互连网开采者

挑战

此次重构的对象是几个特大型单页应用。它实现了云端文件管理效果,共有拾个路由页面,涉及文件上传、音摄像播放、图片预览、套餐购买等几12个职能。前端接纳QWrap、jQuery、RequireJS搭建,HTML使用PHP模板引擎Smarty编写。

大家筛选了Vue.js、vue-router、vuex来退换代码,用webpack实现模块打包的行事。就如一下子从原有社会迈向了新世纪,是还是不是很康健?

图片 1

(图片来自互联网卡塔 尔(英语:State of Qatar)

鉴于连串相比宏大,为了急忙迭代,重构的过渡期允许新旧代码并存,开拓完部分就测验上线一片段,直到最终完全替代旧代码。

然鹅,我们连忙就开掘到二个主题材料:重构部分跟新扩充须求无法确定保证平等。比方重构到贰分一,线上效果与利益变了……成品不会等重构完再往前发展。难不成要在新老代码中互相迭代相像的须要?

别慌,一定能想出更火速的消弭办法。稍稍解析一下,发现我们要拍卖二种情状:

1. 出品须要新添一个效能。比如一个移动掸窗或路由页面。

缓和格局:新功功用vue组件完成,然后手动加载到页面。比方:

JavaScript

const wrap = document.createElement('div') document.body.appendChild(wrap) new Vue({ el: wrap, template: '<App />', components: { App } })

1
2
3
4
5
6
7
const wrap = document.createElement('div')
document.body.appendChild(wrap)
new Vue({
  el: wrap,
  template: '<App />',
  components: { App }
})

风流浪漫旦那么些组件必需跟老代码交互作用,就将零器件暴光给全局变量,然后由老代码调用全局变量的情势。比方:

JavaScript

// someApp.js window.someApp = new Vue({ ... methods: { funcA() { // do somthing } } })

1
2
3
4
5
6
7
8
9
// someApp.js
window.someApp = new Vue({
  ...
  methods: {
    funcA() {
      // do somthing
    }
  }
})

JavaScript

// 老代码.js ... window.someApp.funcA()

1
2
3
// 老代码.js
...
window.someApp.funcA()

注意:全局变量名须求人工和谐,幸免命名矛盾。PS:那是过渡期的低头,不是最终状态

增加生产总量二个路由页面时更吃力。聪明的读者必定会想到让新扩展的路由页面独立于原来就有的单页应用,单身分配二个U索罗德L,那样代码会更透彻。

假如新扩充的路由页面须求贯彻十多个效果与利益,而这个效应已经存在于旧代码中吗?衡量了必要的紧慢性和对代码整洁度的追求,大家再一次迁就(PS:那也是过渡期,不是最后状态卡塔 尔(阿拉伯语:قطر‎。大家不要任性模仿,假使基准允许,依然新起三个页面吗,心绪会恬适超多哦。

2. 出品需求纠正老代码里的单独组件。

解决措施:假设这一个组件不是特地复杂,大家会以“夹带走私物品”的诀要重构上线,那样还是能够顺便让测量试验童鞋援助验一下重构后有未有bug。具体贯彻参考第大器晚成种情景。

3. 出品需求改过整站的公家部分。

我们的网址满含比比较多少个页面,这次重构的单页应用只是内部之风流浪漫。它们共用了顶端导航栏。在此些页面模板中通过斯马特y的include语法加载:

JavaScript

{%include file="topPanel.inc"%}

1
{%include file="topPanel.inc"%}

付加物在叁次分界面改版中建议要给导航栏加上一些职能的全速入口,比如导入文本,购买套餐等。而那一个意义在单页应用中早已用vue达成了。所以还得将导航栏完毕为vue组件。

为了越来越快渲染导航栏,要求保留它原来的标签,并不是在JS里以组件的格局渲染。所以供给利用特殊手腕:

  • 在topPanel.inc里写上自定义标签,对应到vue组件,举例上面代码里的``。当JS未加载时,会立即渲染导航栏的常规标签以至自定义标签。

<div id="topPanelMountee"> <div id="topPanel"> <div>一些页面直出的剧情</div> ... <import-button> <button class="btn-import"> 导入 </button> </import-button> ... </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
<div id="topPanelMountee">
  <div id="topPanel">
      <div>一些页面直出的内容</div>
      ...
      <import-button>
        <button class="btn-import">
          导入
        </button>
      </import-button>
      ...
  </div>
</div>
  • 导航栏组件:topPanel.js,它含有了ImportButton等子组件(对应上边的<import-button>)。等JS加载后,ImportButton组件就能够挂载到<import-button>上并为那个按键绑定行为。其它,注意上面代码中的template并不是<App />,而是一个ID接受器,那样topPanel组件就能够以#topPanelMountee里的内容作为模板挂载到#topPanelMountee要素中,是否很机智~

JavaScript

// topPanel.js new Vue({ el: '#topPanelMountee', template: '#topPanelMountee', components: { ... ImportButton } })

1
2
3
4
5
6
7
8
9
// topPanel.js
new Vue({
  el: '#topPanelMountee',
  template: '#topPanelMountee',
  components: {
    ...
    ImportButton
  }
})

根本重构后,我们还做了更为的品质优化。

金钱观的网页应用

新的框架多如牛毛:它难吗?它写得快吧?可维护性怎么样?运营质量如何?社区怎样?前程怎样?好就业吗?高招人吗?创立公司轻巧吧?不管哪个,采纳一个实行就好。

支付框架

ExtJS可以称作第一代单页应用框架的超人,它包裹了各样UI组件,顾客首要接纳JavaScript来产生全套前端部分,以至富含布局。随着效率逐步扩张,ExtJS的体积也日趋增大,纵然用于内部系统的付出,临时候也展示笨重了,更不用说开辟上述那类运转在互联英特网的系统。

jQuery由于爱抚DOM操作,它的插件连串又相比松散,所以比ExtJS那一个种类更相符开垦在公网运维的单页系统,整个应用方案会相对相当轻量、灵活。

但由于jQuery首要面向上层操作,它对代码的团组织是干涸自律的。如何在代码能够膨胀的情形下决定各样模块的内聚性,何况特别在模块之间爆发多少传递与分享,就改成了意气风发种有挑衅的事务。

为了消除单页应用规模增大时候的代码逻辑难点,现身了好多MV*框架,他们的基本思路都以在JS层成立模块分层和通讯机制。有的是MVC,有的是MVP,有的是MVVM,况且,它们差不离都在这里些方式上发出了变异,以适应前端开采的性子。

那类框架包含Backbone,Knockout,AngularJS,Avalon等。

安装

  • 一时一刻最安静2.5.16本子/直接下载并用 <script> 标签引进,Vue 会被注册为一个全局变量。
    //认为和在此以前学的jQuery相通,利用命名空间把具备东西封装进一个全局变量里面,源码应该return八个指标出来让大家选拔,直接Vue.XXXX
  • 在付出条件下毫不接收压缩版本,不然你就失去了富有大范围错误相关的警戒!
  • Vue有七个版本下载,开辟和临蓐
  • Vue 提供了配套工具来开荒单文件组件
  • Vue 提供贰个法定命令行工具,(cli)
    //可急忙搭建大型单页应用。
    //该工具为今世化的前端开垦职业流提供了开箱即用的塑造配置。
    //只需几分钟即可创设并运维多个带热重载、保存时静态检查以至可用于临盆意况的塑造配置的品种
    //vue与Cli的关联应该和git 与gitbash的关系近乎
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm run dev
  • 合法说通读vue指南文书档案之后再用cli
  • 差异的营造版本应该就是区别版本的vue的意思....
    //相当于说vue团队连连优化本身的代码,恐怕会引致个别API的使用格局改正

进而优化

单页应用

一、Angular 基础

组件化

这么些在前面二个做分层的框架带动了代码的组件化,所谓组件化,在思想的Web产物中,更加多的指UI组件,但实际组件是叁个普及概念,守旧Web产物中UI组件占比高的案由是它的厚度不足,随着客商端代码比例的加码,特别生机勃勃部分的业务逻辑也前端化,由此催生了许多非分界面型组件的现身。

支行带给的一个优势是,每层的天职更专心了,由此,能够对其作单元测验的覆盖,以保证其质量。古板UI层测量检验最头痛的题目是UI层和逻辑混杂在一块,比如往往会在长间隔要求的回调中退换DOM,当引进分层之后,那么些事物都能够独家被测量试验,然后再经过情景测验来确定保障完全流程。

Vue术语

  • 完整版
    //Vue的完全版本,包罗编写翻译器和周转时的本子
  • 编写翻译器:用来将模板字符串编写翻译成为 JavaScript 渲染函数的代码。
    //编写翻译器是代码,是将模板字符串编写翻译成JavaScript渲染函数的代码,因为vue是写在html 和 JavaScript下边包车型大巴,vue的语法是不符合JavaScript和html语法的,所以须求编译器来把Vue代码翻译成契合html,JavaScript代码,那样浏览器技能清楚,况且操作页面
  • 运作时:用来创设 Vue 实例、渲染并拍卖设想 DOM 等的代码。基本上正是除了编译器的别的一切。
    //就是分别于编写翻译器的Vue代码,因为编写翻译器是内置在vue这么些框架代码内的,客商是永不操作的,客户操作的vue代码都以运营时
    //总来讲之,vue代码就是运维时,编写翻译器正是翻译vue代码的用JavaScript写的三个库(平常的话是函数)
  • UMD(vue的UMD版本)
    UMD 版本能够通过 <script> 标签直接用在浏览器中。jsDelivr CDN 的https://cdn.jsdelivr.net/npm/vue 暗中认可文件正是运维时 + 编写翻译器的 UMD 版本 (vue.js)。
    //也便是说UMD有完整版和残缺版,他的特性在于能够平素通过script标签引进
  • 而外UMD还应该有commonJS,ESmodule 后生可畏共七个本子的vue,前面一个包容webpack1.0继承者宽容webpack2.0

1. HTML瘦身

在行使组件化开垦以前,HTML中预置了不计其数标签成分,举个例子:

JavaScript

<button data-cn="del" class="del">删除</button> <button data-cn="rename" class="rename">重命名</button> ...

1
2
3
<button data-cn="del" class="del">删除</button>
<button data-cn="rename" class="rename">重命名</button>
...

当状态改造时,通过JS操作DOM来支配预置标签的剧情或显示隐瞒状态。这种做法不仅让HTML很痴肥,JS跟DOM的紧耦合也让人头大。改成组件化开拓后,将那一个因素统统删掉。

事情未发生前还动用了重重全局变量寄存服务端输出的数额。比如:

<script> var SYS_CONF = { userName: {%$userInfo.name%} ... } </script>

1
2
3
4
5
6
<script>
    var SYS_CONF = {
        userName: {%$userInfo.name%}
        ...
    }
</script>

趁着岁月的推移,那些全局变量更加的多,管理起来很费力。还会有意气风发部分生机勃勃度甩掉的变量,对HTML的体量做出了“进献”。所以重构时只保留了必备的变量。更大多据则在运作时加载。

除此以外,在并未模板字面量的时代,HTML里多量行使了script标签寄存运转时所需的模板成分。举个例子:

<script type="text/template" id="sharePanel"> <div class="share"> ... </div> </script>

1
2
3
4
5
<script type="text/template" id="sharePanel">
    <div class="share">
        ...
    </div>
</script>

固然上线时会把那么些标签内的字符串提取成JS变量,以减小HTML的体量,但在开荒时,这几个script标签会大增代码阅读的难度,因为要不停地切换HTML和JS目录查找。所以重构后删掉了大气的<script>标签,使用vue的<template>以至ES6的沙盘模拟经营字面量来管理模板字符串。

单页应用的优劣点

每个本领都有其利弊,单页应用也是这么。

  • 无刷新体验,那么些相应是最分明的多少,由于路由分发间接在浏览器端完毕,页面是不刷新,对顾客的响应特别及时,因而进步了客商体验;
  • 全盘的前端组件化,前端开垦不再以页面为单位,更加的多地运用组件化的思想,代码结商谈团伙章程越来越规范化,便于订正和调动;
  • API 共享,假设您的服务是多端的(浏览器端、Android、iOS、Wechat等卡塔 尔(阿拉伯语:قطر‎,单页应用的形式便于你在多个端共用 API,能够不在话下减弱服务端的职业量。轻松变化的 UI 部分都早就嵌入到了多端,只受到业务数据模型影响的 API,更易于稳定下来,便于提供鲁棒的服务;
  • 构件分享,在好几对品质体验须求不高的地方,大概成品处在神速试错阶段,依靠于一些本领(Hybrid、React Native卡塔尔国,能够在多端分享组件,便于付加物的高效迭代,节约财富。

缺点:

  • 第三次加载多量能源,要在一个页面上为客商提供成品的持有机能,在此个页面加载的时候,首先要加载多量的静态财富,那几个加载时间相对比较长;
  • 较高的前端开辟门槛,MVC 前置,对前面贰个技术员的须求压实了,不再是『切切图,画画页面这么轻松』;同不时候职业量也会扩充好几倍,开荒那类应用前端技术员的多少往往多于后端;
  • 不利于 SEO,单页页面,数据在前面两个渲染,就意味着未有SEO,或然要求使用变通的方案。

1、AngularJS核心

AngularJS 通过 指令 扩充了 HTML,且经过 表达式 绑定数据到 HTML。AngularJS主旨是:MVVM、模块化、自动化双向数据绑定、语义化标签、重视注入等等。

AngularJS更尊崇数据彰显本身,更新时会尽大概降低对DOM的磨损和重构。
注:jQuery是dom驱动,AngularJS是数额驱动。

代码隔断

与开支守旧页面型网址相比较,完结单页应用的历程中,有大器晚成对比较值得特意关注的点。

从单页应用的特征来看,它比页面型网址尤其依赖于JavaScript,而由于页面包车型客车单页化,各个子效应的JavaScript代码集中到了同壹个成效域,所以代码的隔绝、模块化变得非常重大。

在单页应用中,页面模板的采用是很普及的。比相当多框架内置了特定的模板,也部分框架需求引进第三方的沙盘模拟经营。这种模板是分界面片段,我们能够把它们类比成JavaScript模块,它们是另大器晚成种档案的次序的构件。

模板也一样有隔断的内需。不隔开分离模板,会引致如何难点吗?模板间的矛盾首要设有于id属性上,假诺多少个模板中包蕴固定的id,当它被批量渲染的时候,会形成同三个页面包车型客车功能域中现身多少个同样id的要素,产生不可预测的结局。因而,大家必要在模板中防止使用id,如若有对DOM的寻访须求,应当经过其余接收器来产生。若是二个单页应用的组件化程度相当的高,异常的大概整个应用中都从未有过成分id的行使。

修改下边包车型大巴局地清楚

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})
  • vue有组件,运用组件要把定义标签写在html上边,那么就必要编写翻译器了,因为html页面不认得JavaScript代码啊,因为vue是用JavaScript写的呗
  • 运行时,正是指的是不涉及html页面上的vue代码,都叫运转时,因为不关乎html就无需编写翻译啊...
  • 因为浏览器只认知.js.css那一个后缀的文件,所以您用到vue也是要编写翻译成JavaScript代码浏览器工夫通晓,技巧渲染页面,webpack这种打包工具正是将种种前端开荒中境遇的难点打包管理的工具,不要太爽啊

本文由必威发布于必威-前端,转载请注明出处:ExtJS可以称为第一代单页应用框架的典型,单页应

相关阅读