Press "Enter" to skip to content

Tag: 前端编程

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完全初始化后再执行。

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