前端开发 | 易学教程

RESTful协议【软件架构】

阅读更多关于 RESTful协议【软件架构】

概述 REST（英文： Representational State Transfer ，简称 REST ）描述了一个架构样式的网络系统，比如 web 应用程序。它首次出现在 2000 年 Roy Fielding 的博士论文中，他是 HTTP 规范的主要编写者之一。在目前主流的三种Web服务交互方案中，REST相比于SOAP（Simple Object Access protocol，简单对象访问协议）以及XML-RPC更加简单明了，无论是对URL的处理还是对Payload的编码，REST都倾向于用更加简单轻量的方法设计和实现。值得注意的是REST并没有一个明确的标准，而更像是一种设计的风格。原则条件 REST 指的是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是 RESTful。 Web 应用程序最重要的 REST 原则是，客户端和服务器之间的交互在请求之间是无状态的。从客户端到服务器的每个请求都必须包含理解请求所必需的信息。如果服务器在请求之间的任何时间点重启，客户端不会得到通知。此外，无状态请求可以由任何可用服务器回答，这十分适合云计算之类的环境。客户端可以缓存数据以改进性能。在服务器端，应用程序状态和功能可以分为各种资源。资源是一个有趣的概念实体，它向客户端公开。资源的例子有：应用程序对象、数据库记录、算法等等。每个资源都使用 URI

何崚谈阿里巴巴前端性能优化最佳实践

阅读更多关于何崚谈阿里巴巴前端性能优化最佳实践

大家好，我现在在阿里巴巴园区采访阿里巴巴中文站架构师，兼B2B网站优化领域的负责人何崚。何崚你好，请简单介绍一下你自己。我叫何崚，2006年加入阿里巴巴。之前一直在中科院下属的两个基因方面的研究所，从事一些基因方面的研究。加入阿里巴巴对我来说是一次转行。我在加入阿里巴巴以后，主要是负责中文站的一些架构设计。我们知道何崚是阿里巴巴B2B网站优化领域的负责人。首先关于页面前端优化这部分，请谈一谈你的主要经验以及针对一些难点问题的解决方案。目前我们网站页面前端优化主要有两个方向。第一个方向是对网站核心页面基于Wise load的原则做定点性能优化，这方面无外乎就是减少HTTP请求，减少DNS请求时间，减少页面DOM的数量，做一些图片压缩等，大家的思路基本是一样的。值得一提的是，针对特定方向前端优化，阿里巴巴社区开发了一些自动化性能调优工具，例如刚才提到的减少HTTP请求的问题我们开发了一个自动合并CSS和JS静态文件的框架，对于刚才提到的减少页面DOM数这方面我们也有一个前端延迟加载框架，主要负责在页面加载时只加载首屏，用户滚动页面时才去加载二屏或三屏，这样对于网站的性能包括流量都是很大的提升和节约。我们知道Web I/O也是一个优化很重要的方面，有没有需要特别注意的或是有哪些好的解决方案？ Web I/O在我们网站高并发的应用场景下会有明显的瓶颈。为了提高网站高并发处理能力

01-css的引入方式

阅读更多关于 01-css的引入方式

引入css方式（重点掌握）行内样式内接样式外接样式　　　　　3.1 链接式　　　　　3.1 导入式 css介绍现在的互联网前端分三层： HTML：超文本标记语言。从语义的角度描述页面结构。 CSS：层叠样式表。从审美的角度负责页面样式。 JS：JavaScript 。从交互的角度描述页面行为 CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。 css的最新版本是css3，我们目前学习的是css2.1 接下来我们要讲一下为什么要使用CSS。 HTML的缺陷：不能够适应多种设备要求浏览器必须智能化足够庞大数据和显示没有分开功能不够强大 CSS 优点：使数据和显示分开降低网络流量使整个网站视觉效果一致使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。行内样式 1 <div> 2 <p style="color: green">我是一个段落</p> 3 </div> View Code

前端框架汇总

阅读更多关于前端框架汇总

Semantic UI Semantic UI—完全语义化的前端界面开发框架，跟 Bootstrap 和 Foundation 比起来，还是有些不同的，在功能特性上、布局设计上、用户体验上均存在很多差异。 Semantic UI 特点：文档和演示非常完善易于学习和使用配备网格布局支持 Sass 和 LESS 动态样式语言有一些非常实用的附加配置，例如inverted类。对于社区贡献来说是比较开放的。有一个非常好的按钮实现，情态动词，和进度条。在许多功能上使用图标字体。 Semantic UI 对浏览器的支持： Last 2 Versions FF, Chrome, IE (aka 10+) Safari 6 IE 9+ (Browser prefix only) Android 4 Blackberry 10 Bootstrap Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。 EasyUI jQuery EasyUI 为网页开发提供了一堆的常用UI组件，包括菜单、对话框、布局、窗帘、表格、表单等等组件。下图是一个具有布局效果的窗口： Extjs ExtJS 主要用来开发RIA富客户端的AJAX应用，主要用于创建前端用户界面

前端开发面试题－－html

阅读更多关于前端开发面试题－－html

Doctype作用？严格模式与混杂模式如何区分？它们有何意义? doctype是告诉浏览器我的html使用哪个版本的html协议写的，让浏览器按照神明的协议执行。区别：严格模式是浏览器根据规范去显示页面，混杂模式是一种向后兼容的方式去显示。意义：决定浏览器如何去渲染网站即浏览器使用哪种规范去解析网页。触发：浏览器根据doctype是否存在和使用的是那种dtd来决定。 HTML5 为什么只需要写 <!DOCTYPE HTML>？因为h5不基于SGML，因此不需要对DTD进行引用。但是需要doctype来规范浏览器的行为（让浏览器按照他的方式来运行）。而html4.0.1基于SGML，需要对DTD进行引用，才能告知浏览器文档所使用的文档类型行内元素有哪些？块级元素有哪些？空(void)元素有那些？ css中规定，每一个元素都有display属性。确定该元素的类型，每一个元素都有默认的display值，比如div的display为block：块级元素。span的display为inline：行内元素。行内元素有：a b span img input select strong 块级元素：div ul li ol p dl dt dd h1 h2 h3… 知名的空元素： <br> <hr> <img> <input> <link> <meta> 鲜为人知的还有： <area>

了解gulp

阅读更多关于了解gulp

简单了解gulp 在日常开发中，我们往往会用到很多前端的构造工具，我们常见的有Node,NPM,Grunt,Gulp…，很多很多，上一篇博客中已经简单的介绍了npm，这里再简单讲解一下gulp。什么是gulp gulp是一个前端自动化打包构建工具，主要用来帮我们把代码进行压缩、转码，gulp运行必须依赖 node 环境。 gulp 安装因为gulp是一个全局工具，所以直接使用npm安装gulp工具就ok了。当然也可以安装项目里的gulp，看个人需求。全局安装gulp： npm i -g gulp 项目安装gulp ： npm i gulp gulp 检测检测gulp： gulp --version 或者 gulp -v ，版本号为CLI version: 2.2.0就是对的。 gulp 卸载输入指令 npm uninstall --global gulp 或 npm un -g gulp 即可完成卸载 gulp 的方法 1. src ( ) => 用来找到你要打包的文件的 => src ( '你要打包的文件的地址' ) => 返回值就是一个二进制流 , 就可以继续去调用别的方法 2. pipe ( ) => 用来帮你做事情的 => pipe ( 你要做的事情 ) => 返回值 : 又是一个二进制流 , 可以继续使用方法 3. dest ( ) => 用来写入文件的 =>

Web前端团队开发规范文档

阅读更多关于 Web前端团队开发规范文档

为新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感谢, 片面及有误的地方, 希望大家指正. 另, 本文档部分规范是为我所在项目组所写, 使用时请根据实际项目需求修改. 以下为[WEB前端开发规范文档]正文点此查看WEB版本规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度. 文件规范 1. html, css, js, images文件均归档至<系统开发规范>约定的目录中; 2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面; 3. css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名.; 4

SUBLIME开发工具，前端开发EMMET（ZEN CODING）插件安装与使用技巧

阅读更多关于 SUBLIME开发工具，前端开发EMMET（ZEN CODING）插件安装与使用技巧

Sublime text 3下安装Emmet插件看清楚哦~~这是Sublime text 3不是2的版本，两者的安装还是有区别的，下面的方法是我感觉比较简单的，其他的要命令什么的感觉太复杂了，经测试是OK的。先关闭Sublime text 3：第一步：下载 sublime_package_control-master.zip ，解压命名文件夹为Package Control。(注意大小写) 第二步：下载 sublime_package_control-python3.zip ，解压后覆盖到刚刚的Package Control中，完成插件API函数的更新。第三步：打开Sublime Text 3，选择菜单：Preference–>Browse Package… 浏览插件第四步：把package control复制到此目录，重启 Sublime text 3。然后菜单Preferences就会多了两个Package..的东西如下： Package Control 安装成功第五步：点击菜单Preference–>Package Control 点击Install Package 等待几秒后再弹出如下内容，敲键盘emmet，选择如下：在 Emmet 安装完成后，会显示如下屏幕：然后会自动安装PyV8，安装完成，重启 Sublime Text 3。

前端小白也能开发vue电商项目（1）注册与登录

阅读更多关于前端小白也能开发vue电商项目（1）注册与登录

作为前端的初学者，学一个前端框架是必不可少的。因为对于新手而言，VUE相较于REACT更容易上手，所以作者选择了VUE。如果你正好也想学一个框架，那你走运了哦。跟着作者一起来发开发一个简单的电商项目，来学习VUE吧！这是一个基于 vue & axios & mock & token & stylus & Cube-UI的电商项目demo，面向 vue 初学者，场景虽简单，但五脏俱全。涵盖非常多的vue及其相关技术的基本操作。有详细的注释，帮助大家快速上手 vue 。且我整理了一些在vue开发过程中，有可能会用到的技术文章，希望大家能在这些前辈们身上有所收获。当然如果您觉得这篇文章or这个项目对您的学习有所帮助，请不吝点个star鼓励一下，当然如果存在问题，也非常希望您能跟我留言，一起学习，共同进步。 Github地址 vue-jingdong (不要吝惜你的小星星哦) 话不多说上效果图项目技术栈前台：vue & vue-router & vuex & vue-cli(webpack) & Cube-UI 后台：mock(用mock写模拟api) 前后台交互：axios 单点登录：token 学习VUE项目开发推荐阅读此处有引用大佬赢弱小金鱼的博客文章 vue-cli 生成项目主体框架 vue-cli官方文档 vue 全家桶 vue.js vue-router vuex

前端开发标签的属性和值 0228 需演练

阅读更多关于前端开发标签的属性和值 0228 需演练

a标签 target属性》普通的a标签》有属性的a标签 ul标签 type属性》效果》代码》type属性可以有的值 disc circle square ol标签 type属性》效果》代码》type属性可以有的值 1 a A i I img标签 title属性 alt属性》用法》效果鼠标划到图片上试一试其它标签》效果》标签小结 del sup u center 来源： CSDN 作者： ifubing 链接： https://blog.csdn.net/ifubing/article/details/104539947

订阅前端开发