Press "Enter" to skip to content

Tag: 前端编程

前端开发者的专业任务涵盖什么内容?

工程就是由专业分工不同的工程师协作完成的,每个专业都有自己的专业技能要求,和专职任务。那,我们平时常说的前端开发者,他的专业技能是什么呢?又负责怎么样的专业任务呢?这个问题非常重要,它对求职者准确定位自己的学习目标,和面试官准确锁定合格候选人都有重大意义。

源起

写作前文《不参加工作获得“三年经验”的一些策略》的契机,是我花了很长时间为前端开发打下基础,结果却被一个“缺乏项目经验”拒于门外后,反思如何获得所谓经验,并且开始发现那两本书很有参考价值,故作一分析和推荐。不过,那两本书虽然很薄,消化读通并不容易(后续会写文章介绍)。而,更关键的问题,那两本书的内容在丰富我们的开发经验上起到怎样的作用,这还要进行一步的分析和归纳。

关于面试官想要的“经验”,我在前一文给出一个初步的定义,还给出一些没法参加工作情况下获得与“三年经验”相当能力提升的策略[em]。然则,前一文其实还没有探讨完毕,例如 面试官想要什么样的经验,什么叫三年经验,经验可以用时间来衡量吗?

其实面试官要求所谓“丰富经验”是指,你作为专业开发者,能完成甚至最好高效高质量的完成自己的专业任务,只是由技术岗的困难而出现种刁难求职者的现象。所以,核心问题还是说,辨清前端开发者的专业任务,和完成它的专业技能。在有了这个前提之下,我们才有评估“丰富经验”的可能性。

从零开始为Web项目定制构建系统(四)——Hello XXXX的SPA版(下)

前一课小结SPA理论和工作前提,现在开始本课正题——多页网站改造为单页应用(MPA的SPA改造)。

根据前面的理论的指引,我们的改造概略以下几点:

  • 第一,将网页(或部分交互功能)转换为JS view对象,「界面渲染」 转到前端(使用JS 动态操作DOM);
  • 第二,创建全局的JS router对象,负责应用会话导航,将 「会话路由」 转到前端;
  • 第三,创建一个app的对象,表征应用程序主体,管理(初始化)前两个对象;

我们再看看这个常规完整的SPA体系结构图:

服务端交换和 Model都不是必须,本课简单交互功能不需这些组件。

从零开始为Web项目定制构建系统(四)——Hello XXXX的SPA版(上)

截至上一版本的项目实验,我们实例项目(a-wgp)的项目功能、构建系统和版本跟踪系统 都有了基本的构造,包括:

  • 第一,项目功能 是 一个简单的动态交互页;
  • 第二,构建系统丰富了build和start 构建任务的功能;
  • 第三,理顺了版本跟踪流程,包括本地私有分支、公共分支和远程库分支的管理;

这些基础功能构造,足以满足一个 由多人协作的中小型动态网站项目 的开发。接着这一版本我们将它转换SPA,一种最基础的SPA程序构造。

单页应用程序(SPA)形式理论及React应用一般结构

作为「前端开发者」或「Web应用设计师」,对 单页应用程序(SPA)的形式[注]和逻辑结构[注]有特别细致的了解 是他的专业基础。这些基础知识,有助于作为「开发者」精确的 对(设计方案上的)某种功能设计 进行技术实现,也有助于作为「设计师」更专业的将用户需求转化具体的容易技术实现的设计方案。

注:根据被认识的主体不同(矿物和生物),形式有静态属性,和动态规律,两种;程序是种被动弱智生命;

注:逻辑结构就是质料结构(构造)

「设计案」是设计师和开发者沟通的中间媒体,「设计案」全称构造设计案,Web应用程序(WGP)的构造设计案是对项目需求文档的技术具体,是对程序源码的逻辑概述。WGP构造设计案异常的重要,其制作(由设计师)和使用(由开发者)都是以WGP理论为基础的,是它的一种应用。

然,这里有个疑问,形式理论如何为「设计案」的基础呢?原因为,「某物理论」可指导认识和制造「某物」,以及「某物」的逻辑模型,逻辑模型就是设计案,算是某物成型的半成品。 「某物理论」可指导可举一个简单的例子,例如,GP界面程序的MVC结构模式,构件关系和构件逻辑都是基于GP理论的。

单页应用程序 发展有一段时间,然而纯粹的完整的 SPA理论[注],我还没有读到过。本文参考《Master React 2016》的部分与SPA理论相关的内容,我以为还不错,在其基础上丰富一下。

CSS进阶——对布局理论的渐进归纳

交互页面(网页)不是一张图片、图表或绘画,但是【现代交互页】漂亮的就像一副绘画,层次分明,色彩绚丽,还能响应用户。很难想象一张二维平面作品,背后的(起点)居然是一份结构化的HTML文档。动画不说,光页面格式化和二维空间布局都很复杂,将一条“树”转为一张平面图,CSS和浏览器需要做什么。

“布局”是一种任务(描述),布就是安排,局就是位置空间;按照最新的作业观,布局任务的产出(存在)是一张二维的交互界面,包括局部交互功能组件和全局的交互页。12/19/19 12:34 PM

标准CORS抹平跨域Ajax凸现了Web app多域分布式结构

跨域问题和任务应该是当下前端开者常规任务之一。跨域的全称是跨域Ajax请求(Cross-Domain Ajax Requests),它与「一般Ajax请求」有什么联系呢?按「技术与任务关系」的指引,如果跨域是新的Ajax任务,那跨域请求引入什么新任务内容,又有怎样的新技术呢?

我发现,由于缺乏一种全面的抽象的指导(我指的是一种理论),很多「有关跨域编程的文章」都流于表面和解释混乱,例如本文将略译的《Using CORS for Cross-Domain Ajax Requests》,标题“使用CORS技术实现跨域请求”,CORS是不是一种技术,是谁的技术,技术完成何种任务,这都是要相关解释的,当解释下来后发现,CORS并不是种技术(下面会提到),并不是前端开发者针对跨域编程任务的技术。本文先就跨域编程的问题小结一下自己的理解,并以此作为跟随前一文,对找到有关「技术和任务理论」的新特例。文未略这篇文章作为对CORS的介绍。

对Ajax更细致的理解

最近开始离开JS核心,研习JS的一些具体应用,主要是client-side,包括事件处理模型,异步处理等。本文进入Ajax的研习,在学习的过程中,下意识的尝试总结一种快速掌握一项应用技术的理论和方法——一种学习理论,利用Ajax作为一种特殊例子,找到有关理论、技术、任务和方案之间的原理。文未略译《Basic AJAX Request: XMLHttpRequest》,作为Ajax技术的HOWTO。

Ajax很流行,它指代什么?

Ajax,一个前端开发社区人尽皆知的技术名词,一个曾经被誉为推动Web进入新时代的关键技术,然而了解的人知道,Ajax不是个单一技术概念,它是一集相关技术的概括;随着HTML5,CSS3和JS的演化,Ajax有一点点昨日黄花的感觉,至少就Ajax这个字面,很早就outdate了。不过,Ajax所针对的问题,所完成的任务并没有过时,在当下流行的单页面程序中,Ajax所指代的任务依然重要,历久弥新。

JavaScript事件委托比你想像的简单

本文略译自《JavaScript Event Delegation is Easier than You Think》。

如果你有过一点前端JS开发的经验,一定听说过事件委托(event delegation)或事件代理。这个概念听起来很高级,事实上,如果你已经熟悉如何给页面元素添加事件处理程序(event handlers),你几乎已经知道如何编写事件委托。

JavaScript事件模型」是网页交互功能的技术基础,一般情况下,你需要一项交互功能(例如点击交互),就为交互元素安装一个事件处理程序。然而,事件处理程序的安装是会引起内存泄漏和性能下降的,你安装得越多,性能风险就越大。事件委托的目的是要「降低事件处理安装数量」,它原理就是,通过给DOM树的父元素安装单一个事件处理程序,来避免给多个子元素安装事件处理程序

浏览器执行JS的过程

客户端(client-side)JS的代码可以在HTML标签上定义,<script>可以放在<head>内,也常常被放</body>之前,也常使用<script>的src外部引入,现代浏览器对<script>甚至支持异步(async)和延迟(defer)加载的功能……所有这些种种的JS加载,对入新手,缺乏项目经验的人,该如何选择确实是个难题。

新手困难的原因有二:

  • 第一,新手对浏览如何加载JS程序的,了解不足;
  • 第二,新手对JS程序具体会做些什么,能做些什么,了解不足;

举个例子,把<script>放在被放</body>之前,与使用延迟式脚本有什么区别?该如何选择?使用何种加载方式,取决于JS脚本的任务性质(是构建交互界面、安装事件处理、还是准备交互计算),例如,脚本有构建交互页面内容(使用document.write),可使用同步加载;如果脚本主要安装事件处理函数,那完全可以使用延迟式脚本,等DOM完全初始化后再执行。

本文略译自《犀牛书》第六版,主要讲述第一个问题,文未有有关第二个问题的一些参考。