前端架构 | 易学教程

一文读懂前端技术演进：盘点Web前端20年的技术变迁史

阅读更多关于一文读懂前端技术演进：盘点Web前端20年的技术变迁史

本文原文由作者“司徒正美”发布于公众号“前端你别闹”，即时通讯网收录时有改动，感谢原作者的分享。 1、引言 1990 年，第一个Web浏览器的诞生；1991 年，WWW诞生，这标志着前端技术的开始。在这将近20年的前端发展史中，我们经历了从最早的纯静态页面，到JavaScript跨时代的诞生；从PC端到移动端；从依赖后端到前端可自由打包开发；从早期的网景Navigator浏览器到现在各家浏览器百花齐放…… 我们经历了前端的洪荒时代、 Prototype 时代、jQuery时代、后jQuery时期、三大框架割据时代，这其中均是由国外开发者主导，直到如今的小程序时代，才是中国开发者独创的。这是漫长的技术储备下的成果，最终促成了良好的技术成长收获。期间的前端发展之路，崎岖艰难。（本文同步发布于： http://www.52im.net/thread-2719-1-1.html ） 2、相关文章《小程序技术始于微信？来看看移动端小程序技术的前世今生！》《盘点主流移动端跨平台UI技术：实现原理、技术优劣、横向对比等》《最火移动端跨平台方案盘点：React Native、weex、Flutter 》《快速了解Electron：新一代基于Web的跨平台桌面技术》 3、洪荒时代（1990~1994年）在1990~1994年期间，前端界发生的大事有：WWW（World

【互联网系统架构】前后段分离技术体系演变之路

阅读更多关于【互联网系统架构】前后段分离技术体系演变之路

今天算是归纳下互联网系统架构，记录下，作为了解 1、前后端未分离模式前后端未分离时代，页面逻辑处理以及页面渲染全部由后端完成，最有代表性的MVC三层框架，用户发起请求到服务器的控制层（Controller），控制层通过调用模型处理器（Model）以及渲染视图（View）并最终将页面返回给客户端 mvc架构上图是整个请求的架构，视图和模型均是放在后端处理，使前端代码无法独立运行，前端开发工程师完成html 等静态代码开发后，将代码传递给后端工程师，后端工程师完成后再发布上线整个过程开发流程相互牵制，开发效率很低缺点：此种架构，要求后端工程师关注前端html css 代码等，前端无法单独调试，前后段无法并行开发，后期维护成本比较高，前后端未分离架构存在很多的弊端 2、前后端未完全分离架构模式目前仍然有大部分前后段架构属于前后端未完全分离的模式，后端提供restful 风格的api 接口，通俗的讲（即传输json 数据的http api 接口），前端通过ajax请求调用后端 http api 接口并完成页面数据的绑定，最终由客户端浏览器完成页面的渲染，此种架构看似做到了前后端完全分离，其实不然后端接口依然需要关注前端ui的展示后端为前端接口定制化严重，对于多终端场景，后端需要实现多套api 接口，前后端数据以及业务耦合比较紧密，因为定义为此种架构为

为什么要用前后端分离？有什么优缺点

阅读更多关于为什么要用前后端分离？有什么优缺点

作者：Cherry300 链接：jianshu.com/p/c86cee16b418 一、前戏前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。在互联网架构中，名词解释： Web服务器：一般指像nginx，apache这类的服务器，他们一般只能解析静态资源。应用服务器：一般指像tomcat，jetty，resin这类的服务器可以解析动态资源也可以解析静态资源，但解析静态资源的能力没有web服务器好。一般都是只有web服务器才能被外网访问，应用服务器只能内网访问。二、术业有专攻（开发人员分离）以前的JavaWeb项目大多数都是java程序员又当爹又当妈，又搞前端，又搞后端。随着时代的发展，渐渐的许多大中小公司开始把前后端的界限分的越来越明确，前端工程师只管前端的事情，后端工程师只管后端的事情。正所谓术业有专攻，一个人如果什么都会，那么他毕竟什么都不精。大中型公司需要专业人才，小公司需要全才

从 0 开始创建一个属于你自己的 PHP 框架

阅读更多关于从 0 开始创建一个属于你自己的 PHP 框架

如何构建一个自己的 PHP 框架为什么我们要去构建一个自己的 PHP 框架？可能绝大多数的人都会说“市面上已经那么多的框架了，还造什么轮子？”。我的观点“造轮子不是目的，造轮子的过程中汲取到知识才是目的”。那怎样才能构建一个自己的 PHP 框架呢？大致流程如下：　　　　入口文件　----> 注册自加载函数 ----> 注册错误(和异常)处理函数 ----> 加载配置文件 ----> 请求 ----> 路由　 ---->（控制器 <----> 数据模型） ----> 响应 ----> json ----> 视图渲染数据除此之外我们还需要单元测试、nosql 支持、接口文档支持、一些辅助脚本等。最终我的框架目录如下：框架目录一览 app [PHP 应用目录] ├── demo [模块目录] │ ├── controllers [控制器目录] │ │ └── Index.php [默认控制器文件，输出 json 数据] │ ├── logics [逻辑层，主要写业务逻辑的地方] │ │ ├── exceptions [异常目录] │ │ ├── gateway 　　[一个逻辑层实现的 gateway 演示] │ │ ├── tools [工具类目录] │ │ └── UserDefinedCase.php [注册框架加载到路由前的处理用例] │ └── models

day-51前端

阅读更多关于 day-51前端

高级选择器：　　基础选择器的各种组合 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { font-size: 30px; } /*选择器高级：基础选择器的各种组合*/ #h1, .p, .a { /*1、群组选择器：可以控制多个标签( #h1, .p, .a),用逗号连接*/ /*注：每一个选择器位( #h1, .p, .a)，可以为id、class、标签、选择器组合*/ color: red; } body .div2 .p2 { /*2、后代选择器(经常用)：需要父类们中需要有一个.div2一个body，用空格连接控制一个标签，前方的都是修饰*/ color: orange; } .div2 > div > .p2 { /*子代 >，父子*/ /*3、子代选择器：.p2必须和div相连，div必须和.div2相连，用>连接，控制一个标签，前方的都是修饰*/ color: pink; } .p3 ~ .i3 { /*4、兄弟选择器：可相邻也可不相邻，且必须通过上方修饰下方，用~连接控制一个标签，前方的都是修饰*/ color: greenyellow; } .div3 + .i3 { /*5、相邻选择器，必须相邻，且必须通过上方修饰下方，用

聊前端对Python的重要性：Python的左膀右臂

阅读更多关于聊前端对Python的重要性：Python的左膀右臂

在聊前端对Python的重要性前，我们还是先了解一下Python的主流就业方向吧： WEB后端运维爬虫机器学习（人工智能）自动化运维云计算开发等目前，在社会上主流的就业方向就是以上几个随着人工智能的崛起，作为人工智能开发的首选语言之一， Python也蹭了一波热点，在14年时，Pytho在全球语言排行榜排名第四，一直到今天在这么多的主流放向里面，能和前端搭上边的就只有web开发和爬虫了接下来让我们来简单介绍一下web以及爬虫 1)web开发很多人说Python web 开发，不就是写一张网站吗？但是和前端程序员有什么区别呢？ Python web开发主要用三个框架来架构一个网页后台，也就是我们所说的后端，而前端，从字面上可以理解出来了吧，虽然说Python web开发用到前端知识，但是，Python web开发不等于前端开发，这个是有本质区别的。 2）爬虫爬虫，了解的人就知道，爬虫相当于一个黑客，爬去别人不想在网站上让你得到的信息，如：各种音乐的付费音乐，各种视频软件的VIP以及付费视频等，当然，想在网页上获取想爬去的信息，首先要对前端知识了解，如果想爬去那种付费的信息，则需要对前端知识精通，才能达到你的目的，当然，你也可以进阶成黑客。。在学习过程中有什么不懂得可以加我的python学习交流扣扣qun，784758214 里有不错的学习视频教程

一、认识Vue

阅读更多关于一、认识Vue

1.什么是Vue vue.js是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App，Vue语法也是可以用于进行手机App开发的，需要借助于Weex） Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架！ Vue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。前端主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果； 2.为什么要学习流行框架企业为了提高开发效率；在企业中，时间就是效率，效率就是金钱；提高开发效率的发展历程：原生js——>Jquery之类的库——>前端模板引擎——>Angular.js/Vue.js 在Vue中，一个核心的概念，就是让用户不再操作dom元素，释放了用户的双手，让程序员可以更多的时间去关注业务逻辑。 3.框架和库的区别框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。库（插件）：提供一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。 4.Node(后端)中的MVC与前端中的MVVM之间的区别来源： https://www.cnblogs.com/zhongbokun/p

web前端入门到实战：五个最新的CSS特性以及如何使用它们

阅读更多关于 web前端入门到实战：五个最新的CSS特性以及如何使用它们

虽然CSS简单，但CSS是一门非常有意思的语言，CSS每年都有变化，而且都有不同的博主都在不同的时间段总结一些CSS的新特性。虽然这些新特性无法立刻得到众多浏览器的支持，但总是随着时间的发展，这些特性都会得到浏览器的支持。哪怕未得到支持，也有一些方法让浏览器支持，比如最为出外的 cssnext ，就可以让很多未来的CSS特性就立马使用，并且不用花太多时间来考虑浏览器的兼容性。接下来要介绍的五个CSS新特性是： CSS Display Module Level 3 ： display:contents CSS Conditional Rules Module Level 3 ： @support(...){...} CSS Overscroll Behavior Module Level 1 ： overscroll-behavior: contain CSS Selectors Module Level 4 ： :focus-within ， :placeholder-shown CSS Containment Module Level 1 ： contain:paint 这些CSS特性，估计有些同学已经接触过了，如果你未接触过，建议你继续跟随着下面的步骤继续往下阅读。案例：创建一个新闻提要（Newsfeed）通过一个新闻提要为例

前端渲染与后端渲染方式大体对比

阅读更多关于前端渲染与后端渲染方式大体对比

前后端渲染方式对比说明项目是后端渲染, PHP直接吐出页面. 现在想移植到安卓上, 我用cordova做了一个壳子, 放下了.然后隐藏了导航栏. 但是这根本就称不上是应用, 就是在一个不同的地方打开了浏览器. 所以也就不能调用本地的硬件设备. 一期项目就这样了, 正在劝说负责人改架构, 然后就是写了篇对比的文章.希望一切顺利. 还有一点我是JavaScript的绝对拥护者.不服来辩. 抛开具体的使用场景, 讨论语言的好坏, 本身就是耍流氓. 来吧, 我们一起耍噻. 技术对比后端渲染传统后端渲染的优势与劣势分析优势: *. 开发速度快. 单独开发，不涉及前端端交互，第一次搭建网站的速度是非常明显的． SEO友好度较高: 能够一次性渲染页面,利于搜索引擎抓取在做营销类推广网站的时候, 这一点非常重要. 页面第一次呈现速度稍快. 第一次只加载一个页面, 以及第一个页面所需要的文件,速度很快.但是每一次加载的速度基本相同的. 可用缓存进行优化用户在网站中,停留时时间较长,点击较多时, 就会体现出劣势. 页面呈现消耗流量教低. 第一次加载时,前端渲染会多一个框架, 和其他的一些HTML模板.大约在100KB作用,现在的移动网络网速已经可以让这些大小忽略. 有更多的项目经验存在周期长, 项目中遇到的问题,基本都有人遇到过.容易找到例子.如果都容易解决,

electron 前端开发桌面应用

阅读更多关于 electron 前端开发桌面应用

electron 是由Github开发，是一个用Html、css、JavaScript来构建桌面应用程序的开源库，可以打包为Mac、Windows、Linux系统下的应用。快速开始接下来，让代码来发声，雷打不动的 hello world 创建文件夹，并执行 npm init -y ，生成 package.json 文件，下载 electron 模块并添加开发依赖 mkdir electron_hello && cd electron_hello && npm init -y && npm i electron -D 下载速度过慢或失败，请尝试使用cnpm，安装方式如下 # 下载cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org # 下载electron cnpm i electron -D 　创建index.js，并写入以下内容 const {app, BrowserWindow} = require('electron') // 创建全局变量并在下面引用，避免被GC let win function createWindow () { // 创建浏览器窗口并设置宽高 win = new BrowserWindow({ width: 800, height: 600 }) // 加载页面 win

订阅前端架构