分类 前端 下的文章

assets和static目录的区别

处理静态资源

你会注意到,项目中我们有两个目录存放静态资源:src/assetsstatic/。这两者有什么区别呢?

打包资源

为了回答这个问题,我们首先要理解 webpack 如何处理静态资源。在 vue 组件中,所有的模版和 CSS 都是通过 vue-html-loadercss-loader 分析静态资源 URL。例如,在 <img src="./logo.png">background: url(./logo.png)"./logo.png" 是一个相对路径,会被 webpack 作为依赖模块处理

- 阅读剩余部分 -

我的HTML会说话——从实用出发,谈谈HTML的语义化

语义化HTML是什么?有什么意义?

所谓语义化HTML,就是从代码层次表达程序员的想法、思路,同时描绘出网站页面的结构:

  1. 与同为人类的程序员沟通,帮助程序员快速掌握当前代码。这一点其实是可以通过注释来实现的,不过用上语义化HTML多多少少可以省点注释,哈哈。

  2. 与同为代码构筑的系统(例如残疾人士阅读器以及搜索引擎爬虫等)沟通,帮助其快速、准确达到目的。由于这类系统与人类的智能相比起来实在有限,因此需要协定好通过什么样的方式来进行沟通,而W3C的决议就是语义化HTML的标准了。

最近在恶补前端基础时,碰到这一个知识点,发现市面上的资料大多杂乱,而且往往只能意会而不能言传,很难找到其中有什么实用的价值,因此特写此文,不妄求全面剖析,只求实用至上。

- 阅读剩余部分 -

[系列教程]Web框架如何快速入门

Web框架正如前文所述, 在整个项目结构中处于一个承上启下的位置, 是整个项目的核心组件, 所以这次来聊聊Web框架的一些普适性特性和如何快速的入门.

为什么Web框架需要快速入门?

Web框架是一组工具的集合, 为你的Web应用开发提供了基础环境, 从如何获取参数, 到如何返回结果, 从如何获取cookie到如何修改返回的http header. Web框架帮你隐藏了HTTP协议的细节, 你作为一个使用者只需要关心如何使用, 而毋须去了解细节( 当然如果你打算自己实现一个Web框架除外 ).

第二个原因是Web框架很多, 不同的语言都有自己实现的不同的Web框架(Python尤其的多). 每一种都有各自不同的实现思路, 有不同的开发哲学, 不管是就换工作换开发栈的需要, 还是学习本身的需要, 快速的多掌握几个框架还是很有必要的.

继续阅读本文需要掌握HTTP协议的基本知识, 如果不了解请前往 <关于HTTP协议,一篇就够了>

以下是一个Web框架的通用Guide, 基本上你能涉及到的大多数Web框架都是遵循下面的模式来的, 少数奇葩不在本文描述的范畴, 但是需要理解的知识点和问题领域是大致相同, 你可以参考着来.

- 阅读剩余部分 -

[系列教程]02.Web项目的结构

一个Web项目, 可大可小, 大到整个阿里巴巴, 小到你自己的博客, 留言板. 虽然所采用的技术不一样, 规模不一样, 但是都由一些执行相同作用的组件所构成的, 当然根据规模的不同, 要实现的功能的不同, 有一些组件并不一定是必须, 但是当一个项目从小到大的演变过程中, 需要加入的组件都是大致功能类似的. 下面我们就从最简单的Web项目开始, 到随着功能, 规模的递增, 看看有那些组件需要加入, 和各自的作用.

1. 种子规模

这个规模的项目最好的实例就是个人博客, 留言板, 公司介绍网站等, 基本结构如下
种子规模项目结构 code.78.01.jpeg

这是最简单的模式, 基本上可以概括为  请求-响应 模式. 主要的组件是由 Web框架 和 数据库 两个部分组成, Web框架负责为开发者提供基础的应用程序结构和功能: 1. 接收HTTP请求 2.渲染返回的HTML页面, 数据库则负责持久化数据: 比如留言的内容.

随着使用人数的上升, 性能很快入不敷出, 你开始觉得访问的时候速度不如原来快了. 但是你在用top命令查看系统开销的时候会发现, 其实系统的CPU占用并不是很高. 原来这个时候大部分的时候CPU都在等带数据库查询的结果, 而数据库查询结果很多时候是重复的, 比如当没有人留言的时候, 返回的最新留言列表. 为了避免无谓的IO开销, 我们需要用一个比数据库快N倍的存储设备来缓存查询的结果, 这样当我们发现查询结果不会有变化的时候, 就能通过更快的存储设备拿到结果, 比如内存就是用户级应用程序能访问的最快, 而且现在看来容量也够大(将来会越来越大)的存储设备了. 这个时候我们需要引入一个新的组件: 内存缓存


- 阅读剩余部分 -

[系列教程]01.前言

Web现在是互联网的通用性语言, 无论是网站也好App的后端也好, 都是基于Web技术来构建的.围绕着Web技术是一大堆庞杂的各式各样的技术栈. 我们笼统的可以划分为两类: 1. 前端技术 2.后端技术. 详细的分解如下图:
code.76.01.jpg

要能全须全尾从头到脚的把一个能拿出来见人的Web项目做完, 上面这棵书每一个根须都要触及到最根部才行. 否则随着规模的增大, 技术债是迟早要还的.

看完了有如此多的技术需要学习, 是不是感觉人生很绝望? 不要灰心, 本书的目的, 就是为了给没有行业经验的小白同学一个入门的路书, 你可以把此书看作是独孤九剑的总诀式. 接下来我会一一分解, 告诉你Web技术的每一个触角如何快速入门. 我并不能精通每一门技术, 事实上, 图中的技术我能说得上精通的不过寥寥数个, 但是技术的一般性原理是一致的, 我会给出这些技术的共性, 只要掌握就能够上手实践开发的最根本的技术点. 然后剩下的你可以自己选择自己喜欢的技术去深入学习.


- 阅读剩余部分 -