页面仔初窥"前端工程化"

时间：2022-06-26 04:06:02

今天看了几篇前端界的一位大牛--张云龙的文章，其中一篇在自己的理解范围内看得懂一些，有所收获，说的是前端工程化的事，看完算是对前端工程形成了一个模糊的概念。

现在我所接触到的前端开发，还是张云龙大神所说的“茹毛饮血”的前端时代，但是关于前端工程的概念，在我了解前端的过程中却不绝于耳。现在我所做的项目，应该还算不上复杂的工程，技术选型方面，可能还停留在选哪个UI框架上。目前所使用的*的工具，也只是avalon，甚至连avalon的组件化都使用甚少，只是做了一个通用的下拉选择组件。但这与文章中言明的前端工程还相差甚远，接下来我说下自己看完文章后，对前端发展为一个工程的理解。

从jQuery加Bootstrap说起

jQuery加Bootstrap，需要哪里搭哪里，复用极低，资源的依赖关系基本靠开发人员脑力记忆，这是最初级的前端开发方案，也是我现在比较熟练的方案。JS的复用，是一个public.js文件，里面是我写的一个_public模块，模块在匿名函数空间内运行，向外暴露出一个_public对象作为接口，避免污染全局的运行空间，里面是一些自己写的好用的函数和一些兼容低版本浏览器的polyfill。CSS的复用是一个public.css文件，里面根据不同的作用对象，定义了不同class，用于各个页面去复用这些样式。另外引入的各种插件的依赖关系和引入顺序，主要由人工记忆。这种方式下，我自己可以明显感觉到的缺点是：1.复用性太低，能复用的除了一些功能函数和简单的样式，没有可复用的组件，比如一个日期选择的组件都没有，于是每次需要一个功能，就要手写一个功能，最多从别处粘贴一下代码完成"复用"……2.资源的引入很复杂，不能一个import搞定一个资源，引用路径和依赖关系每次都很麻烦。比如引用一个jQuery的插件，一定要先引入JQuery，再引入插件，且有些插件会要引入多个文件，加上写这些插件的路径，事情就变得一点也不"智能"了。

avalon-我自己迈出的第一步

因为React,Angular,Vue的流行，我也接触到了这些看起来更高级一些的框架，由于Vue的文档被大家所推崇，并且还是国人尤雨溪大神的作品，所以我选择从Vue开始学起，第一次看文档是比较痛苦的，文档中说到的很多概念都没有，反反复复看了一遍又一遍，结合一些实例，总算理解了组件，父子组件的通信，组件的生命周期，路由，状态管理这些是什么，这个过程是有点痛苦的，因为从没接触过webpack, npm这些，为了能知道自己粘贴的命令行是在干什么，自己粘贴的这个webpack.config.js是在干什么，经历了一个这样的过程：

Vue里的这些都是个啥？-->不管了，弄个例子下来看看-->github上弄下来，发现不知道怎么运行起来-->原来需要用webpack啊-->原来还要npm install各种依赖包啊。这些东西一次性突然蹦出来的时候，其实我是凌乱的，之前连Node是什么都不知道啊……在这期间，发现了一篇好文章，照着做了一遍以后，很有收获，也理解了这些是在干什么了。推荐如果同样不懂这些的前端同学也可以看一看。

Vue懂了是什么，该怎么用，怎么学以后，我就跃跃欲试打算用在公司的项目中了。可是后来得知了一个噩耗，因为我们服务的客户主要还是原始人类（仅本人观点，与公司无关，客户你要怼就怼我吧），用的机器和系统所限，我们必须要兼容IE8，我了解到的Vue应该是基于getter, setter的，这些特性IE9才支持，换句话说，使用Vue是不可能了。不过我依然贼心不死，想找找有没有兼容IE8的MVVM框架，这一找还真找到了，是司徒正美大神写的avalon，看了下大神处理issue的速度，惊为天人，于是就决定使用avalon了。说实话，avalon的文档的确对新手很不友好……可能是因为版本更新飞快吧……不过大神写的教程可比文档要好，因为还带着版本更新日志，看完以后总算能开始做事了。其实这也是我第一次了解到设计模式，用了avalon以后，比如想写一个面板切换，是这样的：

main.html:

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <title>test</title>

  <script type="text/javascript" src="avalon.js"></script>

  <script type="text/javascript" src="main.js"></script>

</head>

<body>

  <div ms-controller="app" class="ms-controller">

    <button type="button" ms-click="@panel = 'panel1'">面板1</button>

    <button type="button" ms-click="@panel = 'panel2'">面板2</button>

    <button type="button" ms-click="@panel = 'panel3'">面板3</button>

    <div ms-visible="@panel === 'panel1'"></div>

    <div ms-visible="@panel === 'panel2'"></div>

    <div ms-visible="@panel === 'panel3'"></div>

  </div>

</body>

</html>

main.js:

var appVm = avalon.define({

  $id: 'app',

  panel: 'panel1'

})

ms-click是绑定click事件，ms-visible将根据它的表达式的值，控制它所在的元素的显示隐藏，这样就很容易看懂了。这么做有一个好处，我们可以将注意力更多地关注在虚拟模型"appVm"上，控制它的内容的值就可以了，avalon将自动为我们完成从虚拟视图到视图的渲染。avalon还有一个组件的模块，可以生成自定义的组件，不过这个组件没有那么多指令可以用，也没有那么灵活，但是有生命周期，所以还是可以提高一些代码的复用性的。我也是刚学习MVVM框架，我相信用先进的设计模式，能够做的事情肯定不止这点，用得好将会非常厉害！

回到前端工程化 - 压缩和资源合并

以下的内容都是我还不了解，正在或者将要学习的，更多是记录和摘要。

当技术选型完成以后，除了开发，代码的运行效率也成了前端需要关注的点，于是就引出了代码的压缩，校验，和资源合并的问题。我所理解的代码压缩可以让文件变得更小，用于开发的日志功能和debug功能都会被压缩掉，这样才可以刚才地用于生产环境。代码校验其实我是不懂的，在将来接触到之前，我暂时把它理解成每个资源都有自己的版本，对应有签名标识和完整性问题，于是就需要对资源进行校验才能更好地构建和进行资源的整合。资源合并以后，最起码的，发送的请求的次数就减少了。做完这一步，代码的运行效率就提升了。这件事人力完成压缩在合并显然是不可能的，这样改一次源码就要手动更新一次用于生产环境的压缩后的代码，还要整合在一起，所以这些必须借助工具自动完成，这样前端工程自动化的道路才开始了。

模块化开发

这是一个我觉得很有意思的部分，模块化开发，像大神所说的，模块化开发的最大价值应该是分治。那么一个大的系统被拆成了一个个小系统，再被拆成一个个组件，这样不论是对于不同人员进行并行开发，维护，还是复用性，都是有大好处的。需要哪个JS模块或者CSS模块就直接引入，想想都觉得会减少很多重复性工作的时间。

组件化开发和资源管理

以上两点已经超出了目前我的能力范围了，之前的我还能想一想也许怎样就能实现，但这里的内容我暂时是想不到怎么实现的，所以只得先在此留坑，等我走到这一步的时候再回来填坑啦！

页面仔初窥"前端工程化"的更多相关文章

  1. 初窥css---包含一些概念和一些文字样式

    初窥css CSS相关概念 全称是层叠式样式表.规定了html在网页上的显示样式.我们都知道css主要是负责装饰页面的,但是其实在HTML4之前,网页的样式与架构全部都是写在一起的,也是在HTML4之 ...

  2. Scrapy001-框架初窥

    Scrapy001-框架初窥 @(Spider)[POSTS] 1.Scrapy简介 Scrapy是一个应用于抓取.提取.处理.存储等网站数据的框架(类似Django). 应用: 数据挖掘 信息处理 ...

  3. 前端工程化开发之yeoman、bower、grunt

    上两遍文章介绍了前端模块化开发(以seaJs为例)和前端自动化开发(以grunt为例)的流程,参见: http://www.cnblogs.com/luozhihao/p/4818782.html ( ...

  4. scrapy2&lowbar;初窥Scrapy

    递归知识:oop,xpath,jsp,items,pipline等专业网络知识,初级水平并不是很scrapy,可以从简单模块自己写. 初窥Scrapy Scrapy是一个为了爬取网站数据,提取结构性数 ...

  5. 基于webpack的前端工程化开发解决方案探索（一）：动态生成HTML（转）

    1.什么是工程化开发 软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行 ...

  6. 前端工程化（二）---webpack配置

    导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...

  7. 前端工程化（三）---Vue的开发模式

    从0开始,构建前后端分离应用 导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord ...

  8. Flutter 即学即用系列博客——04 Flutter UI 初窥

    前面三篇可以算是一个小小的里程碑. 主要是介绍了 Flutter 环境的搭建.如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter. 这一篇我们来学习下 Flutte ...

  9. python爬虫 scrapy2&lowbar;初窥Scrapy

    sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction.htm?courseId=1005269003&utm_campai ...

随机推荐

  1. 关于获取、设置css样式封装的函数入门版

    <html> <head> <meta charset="UTF-8"> <title>CSS样式的获取和设置:简单版</ti ...

  2. Key Task

    Problem Description The Czech Technical University is rather old - you already know that it celebrat ...

  3. Swift 中的 Runtime

    即使在 Swift APP 中没有一行 Object-c 的代码,每个 APP 也都会在 Object-c runtime 中运行,为动态任务分发和运行时对象关联开启了一个世界.更确切地说,可能在仅使 ...

  4. python面向对象&lpar;二&rpar;——类成员

    Python面向对象    类成员 1.字段         普通字段    属于对象         静态字段    属于类   2.方法 普通方法   触发者是对象    括号里至少一个参数 se ...

  5. POJ 2155 Matrix（二维树状数组）

    与以往不同的是,这个树状数组是二维的,仅此而已 #include <iostream> #include <cstdio> #include <cstring> # ...

  6. AlloyTouch&period;js 源码 学习笔记及原理说明

    alloyTouch这个库其实可以做很多事的, 比较抽象, 需要我们用户好好的思考作者提供的实例属性和一些回调方法(touchStart, change, touchMove, pressMove, ...

  7. 201521123021第二周Java学习总结

    1.本章学习总结 ①初步掌握了Java程序简单的输入和输出. ②回顾了运算符和表达式的使用. ③在数据类型的学习的中,要注意各类型的取值范围,特别是byte型范围很小,若为128即溢出. ④在Java ...

  8. 【翻译】Ext JS 5的平板支持

    原文:Ext JS 5 Tablet Support Ext JS已被公认为桌面Web应用程序的领先框架.自从平板开始在全球挑战PC的销售,无论是个人还是企业,电脑横向的应用已经产生急剧的变化.Sen ...

  9. My97DatePicker日期控件&comma;开始时间不能大于结束时间&comma;结束时间不能小于开始时间

    在只做项目的时候,需要用到一个日期控件,之前用到过my97,感觉挺好的,兼容性很强,配置也比较容易 当开始时间不能大于结束时间和结束时间不能小于开始时间,这个需要一个判定的,要不然不就乱套了 在my9 ...

  10. 计算机网络之iframe内联框架跨域

    iframe框架同源下的数据调用 iframe框架非同源下的数据传输 一.iframe框架同源下的数据调用 1.父窗口向子窗口获取数据 //html1父级窗口 <iframe src=&quot ...

相关文章