基于前后端分离的多终端适配

前言

近年来各站点基于 Web 的多终端适配进行得如火如荼,行业间也发展出依赖各种技术的解决方案。有如基于浏览器原生 CSS3 Media Query 的响应式设计、基于云端智能重排的「云适配」方案等。本文则主要探讨在前后端分离基础下的多终端适配方案。

关于前后端分离

关于前后端分离的方案,在《前后端分离的思考与实践(一)》中有非常清晰的解释。我们在服务端接口和浏览器之间引入 NodeJS 作为渲染层,因为 NodeJS 层彻底与数据抽离,同时无需关心大量的业务逻辑,所以十分适合在这一层进行多终端的适配工作。

UA 探测

继续阅读

前后端分离模式下的安全解决方案

前言

在前后端分离的开发模式中,从开发的角色和职能上来讲,一个最明显的变化就是:以往传统中,只负责浏览器环境中开发的前端同学,需要涉猎到服务端层面,编写服务端代码。而摆在面前的一个基础性问题就是如何保障Web安全?

继续阅读

Midway-ModelProxy — 轻量级的接口配置建模框架

前言

使用Node做前后端分离的开发模式带来了一些性能及开发流程上的优势(见《前后端分离的思考与实践 一》), 但同时也面临不少挑战。在淘宝复杂的业务及技术架构下,后端必须依赖Java搭建基础架构,同时提供相关业务接口供前端使用。Node在整个环境中最重要的工作之一就是代理这些业务接口,以方便前端(Node端和浏览器端)整合数据做页面渲染。如何做好代理工作,使得前后端开发分离之后,仍然可以在流程上无缝衔接,是我们需要考虑的问题。本文将就该问题做相关探讨,并提出解决方案。

继续阅读

基于前后端分离的模版探索

前言

在做前后端分离时,第一个关注到的问题就是 渲染,也就是 View 这个层面的工作。

在传统的开发模式中,浏览器端与服务器端是由不同的前后端两个团队开发,但是模版却又在这两者中间的模糊地带。因此模版上面总不可避免的越来越多复杂逻辑,最终难以维护。

继续阅读

也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)


前言

为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异。痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的NodeJS,试图探索一条全新的前后端分离模式。

继续阅读

T1RF3nXdxiXXc5aNTo-600-316.jpg

随着Retina屏幕的逐渐普及,网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢?

继续阅读

1.针对无特殊样式覆盖

特殊样式指圆角,背景,以及图标的修复。

利用这种方式是因为autofill的部分属性无法替换,甚至添加!important也没有任何作用。故利用内阴影将背景颜色覆盖,其中100px足够覆盖背景足以。
2.针对有图标样式修改
此方法为上个方法的晋级用法,利用css伪类选择器:before将图标盖在input之上,此方法最好在制作之初进行特别制作,否则修改量较大。

3.利用html5属性禁止游览器保存密码

4.利用jquery重构input

这部分是因为低端游览器不支持autocomplete属性,而我们还想禁用掉自动填充功能的时候使用。

当input获得焦点时将其类型转换为password,这样游览器就无法进行密码填充也就变相的将保存密码功能禁用掉了。其中$.support.leadingWhitespace是新版jquery判断游览器的新规则,主要针对IE9以下游览器,添加locked是防止二次修改。至于为什么这么费劲巴拉的写这么多而不是直接修改type,完全是因为IE8及以下版本将type视为只读属性,修改无效。