前端

摘自 前端农民工的博客 让我们先来看几个网站： coding teambition cloud9 注意这几个网站的相同点，那就是在浏览器中，做了原先“应当”在客户端做的事情。它们的界面切换非常流畅，响应很迅速，跟传统的网页明显不一样，它们是什么呢？这就是单页Web应用。 所谓单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。 其实单页应用我们并不陌生，很多人写过ExtJS的项目，用它实现的系统，很天然的就已经是单页的了，也有人用jQuery或者其他框架实现过类似的东西。用各种JS框架，甚至不用框架，都是可以实现单页应用的，它只是一种理念。有些框架适用于开发这种系统，如果使用它们，可以得到很多便利。 开发框架 ExtJS可以称为第一代单页应用框架的典型，它封装了各种UI组件，用户主要使用JavaScript来完成整个前端部分，甚至包括布局。随着功能逐渐增加，ExtJS的体积也逐渐增大，即使用于内部系统的开发，有时候也显得笨重了，更不用说开发以上这类运行在互联网上的系统。 jQuery由于偏重DOM操作，它的插件体系又比较松散，所以比ExtJS这个体系更适合开发在公网运行的单页系统

文章摘自：https://github.com/xufei/blog/issues/5#issuecomment-136962500 单页应用：优点和缺点 http://stackoverflow.com/questions/21862054/single-page-application-advantages-and-disadvantages 单页应用是什么？ 让我们先来看几个网站： coding teambition cloud9 注意这几个网站的相同点，那就是在浏览器中，做了原先“应当”在客户端做的事情。它们的界面切换非常流畅，响应很迅速，跟传统的网页明显不一样，它们是什么呢？这就是单页Web应用。 所谓单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。 其实单页应用我们并不陌生，很多人写过ExtJS的项目，用它实现的系统，很天然的就已经是单页的了，也有人用jQuery或者其他框架实现过类似的东西。用各种JS框架，甚至不用框架，都是可以实现单页应用的，它只是一种理念。有些框架适用于开发这种系统，如果使用它们，可以得到很多便利。 开发框架 ExtJS可以称为第一代单页应用框架的典型

一、开发框架 　　ExtJS可以称为第一代单页应用框架的典型，它封装了各种UI组件，用户主要使用JavaScript来完成整个前端部分，甚至包括布局。随着功能逐渐增加，ExtJS的体积也逐渐增大，即使用于内部系统的开发，有时候也显得笨重了，更不用说开发以上这类运行在互联网上的系统。 　　jQuery由于偏重DOM操作，它的插件体系又比较松散，所以比ExtJS这个体系更适合开发在公网运行的单页系统，整个解决方案会相对比较轻量、灵活。 　　但由于jQuery主要面向上层操作，它对代码的组织是缺乏约束的。如何在代码急剧膨胀的情况下控制每个模块的内聚性，并且适当在模块之间产生数据传递与共享，就成为了一种有挑战的事情。 　　为了解决单页应用规模增大时候的代码逻辑问题，出现了不少MV*框架，他们的基本思路都是在JS层创建模块分层和通信机制。有的是MVC，有的是MVP，有的是MVVM，而且，它们几乎都在这些模式上产生了变异，以适应前端开发的特点。 　　这类框架包括Backbone，Knockout，AngularJS，Avalon等。 二、 组件化 　　这些在前端做分层的框架推动了代码的组件化，所谓组件化，在传统的Web产品中，更多的指UI组件，但其实组件是一个广泛概念，传统Web产品中UI组件占比高的原因是它的厚度不足，随着客户端代码比例的增加，相当一部分的业务逻辑也前端化

1组件化开发 组件分开发是非常重要的工程优手段。也是react开发必备技能。前端光有JS/CSS的模块化还是不够的。对于UI组件同样迫切的需求 前端组件化开发理念： 如上图所示这就是前端组件开发理念，下面我们来总结一下 1、页面上的每个独立的可视。可交互区域视为作一个组件; 2、每个组件对应一个工程目录，组件所需的各种资源(JS、Image、CSS)都在这个目录下就近维护; 3、由于组件具有独立性，因此组件与组件之间可以，自由组合; 4、页面只不过是组件的容器，负责组合组件形成功能完整的界面; 5、当不需要某个组件或者想要替换组件时，可以整个目录删除/替换 注：每二项中就近维护原则是工程化的体现。每个开发者都清楚知道，自己所开发维护的功能模块。因为代码必须存在于对应的组件目录，当前目录包函 CSS、JS、HTML、Image 根据上述描述我们将构造一个项目的基本流程 项目初期前端静态页面只包函CSS、HTML 目录名称：frontEnd less文件结构对应生成css文件 来源： https://www.cnblogs.com/pink-chen/p/11064733.html

　　先谈谈前端工程化，web前端越来越像“应用程序”，处理的业务繁杂，需要用的html，css，js等文件越来越多；因此不得不用工程化的思想去组织管理这些文件；当然关于前端工程化在细节上见仁见智；以下是个人的理解： 　　首先是业务需求文档的规范化； 　　其次是开发过程中的管理：版本控制(git/svn)，js模块化(AMD,CMD,ES6)，MVVM框架(react,vue)等 　　再其次是测试阶段：自动化测试js接口函数等(karma,mocha)，数据mooc 　　最后是打包部署：构建工具进行丑化、合并等 构建工具grunt && gulp 　　Grunt 是最先流行起来的前端工程，其核心思想是基于配置的工作流模式，定义一个配置文件，声明工作流各个环节的相关配置，调用 grunt 就能完成打包编译； 　　 Gulp 几乎取缔 Grunt ，成为前端的默认流程工具，其核心思想是基于内存的流的方式，提供高效的性能，极简的 API，定义不同的 task，然后将 task 串联起来； 　　 Gulp入门教程 开发效率 　　通常的前端开发过程是，修改前端代码，调用命令编译代码，然后浏览器 F5 刷新。这个过程可以做到自动化，通过代码监控工具，指定要监控的目录和文件，如果对应文件有改变，调用编译工具编译源码，然后通过 livereload 自动刷新浏览器； 数据mock 　

前端工程化 背景 前端工程化的概念近两年来被广泛的提及，究其原因，是前端工程师所负责的客户端功能逻辑在不断复杂化。PC网站、手机应用、桌面应用、微信小程序，前端开发的应用领域越来越广，前端工程师这个职位也不再是几年前被戏称的“切图仔”，在这种背景下，前端工程化应运而生。 聊到前端工程化，必然会有一些问题，本文会带着这几个问题去介绍前端工程化。 什么是前端工程化？ 为什么要做前端工程化？ 前端工程化怎么做？ 现有的前端工程化产品？ 什么是前端工程化？ 要知道什么是前端工程化，先来看看什么是工程化，维基百科对工程化的定义： 工程学、工程科学或工学，是通过研究与实践应用数学、自然科学、社会学等基础学科的知识，来达到改良各行业中现有材料、建筑、机械、仪器、系统、化學和加工步骤的设计和应用方式一门学科。 实践与研究工程学的人叫做工程师。 在前端领域，工程化是根据业务特点，将前端开发流程规范化，标准化。前端工程化包括开发流程、技术选型、代码规范、构建发布、性能优化、前端监控等内容，主要目的在于制定标准和提升效率。 为什么要做前端工程化？ 1990年诞生的网页脚本语言只能用于简单的表单校验，Web开发主要是后端开发。 2005年，AJAX异步请求技术改变了网页的交互模式，用户对网站的需求越来越多，客户端开发稍微重要了一些。 2008年，Google推出V8引擎之后，浏览器性能大大提升

完成一个页面请求的流程： 输入地址--> 域名解析--> 发送请求--> 后端代码运行--> 响应请求,浏览器拿到 html 代码--> 浏览器开始渲染页面,并请求页面中的资源（css、JS、img等）--> 渲染完成 每个阶段的性能优化： 传输阶段优化：代码压缩、图片压缩、建立长连接等 后台代码优化：后台逻辑优化、前后台合理分配功能等 sql查询优化：优化数据库、优化查询语句等 响应优化：缓存、CDN加速等 渲染阶段的优化：分三个模块考虑 HTML、CSS、JavaScript（前端优化重点） 　　 HTML代码优化： 　　　　 避免使用frame、iframe（页面加载阻塞、onload事件阻塞等） 　　　　避免空标签、空连接 src 、href 等（即使是空地址，浏览器也会添加默认地址发送请求） 　　　　减少节点深层次嵌套（占用内存多、节点查询费劲） 　　　　减少HTML文档大小（1、减少注释空格 2、避免table布局（节点太多） 3、使用html布局，节点少） 　　　　显示指定文档字符集（若不写，浏览器会先缓存代码，再去查询合适的解析字符集。为避免机器查询消耗，需手动明确指定好） 　　　　设置图片宽高（避免回溯重构） 　　　　避免js脚本阻塞（放底部、异步加载、延迟加载、使用模块管理插件 require.js、sea.js） 　　 CSS代码优化： 　　　　 避免使用

说起前端框架，我个人主张有框架不如无框架，这个观点要先从框架和库的区别说起。 　　我所理解的库，解决的是代码或是模块级别的复用或者对复杂度的封装问题;而框架，更多的是对模式级别的复用和对程序组织的规范，这里的模式是指比如 MVC，为了实现 M 和 V 的解耦，通过 IOC 或是 PubSub 等手段，把丑陋的耦合由经常变化的业务代码转移到不经常变化的框架内部消化。 　　对于前端来说，在 WebApp 概念兴起前，很少能看到所谓的框架，更多的是类似于 jQuery 、YUI 的库，因为前端的一路下来的发展历程和开发方式的特殊性决定了很难有什么通用的模式能满足多样化前端的开发需要。如果一定要说，也就是近些年伴随着 SPA(Single-page application)概念兴起而出现的所谓前端 MVC 的一系列衍生模式，但是即便如此，光靠一个框架还是解决不了什么问题。 　　这里要重点说一下 SPA 这个随着 AJAX 技术火起来的概念，SPA 的好处有哪些相信不用多说，网上一搜一大堆，接近原生 应用 的表现、和 HTML5 技术发展方向向契合等等。SPA 的出现让前端变得越来越重，代码组织、逻辑解耦等后端常常面对的问题也开始在前端出现，人们也开始在前端引入 MVC 去应对这样一些问题，确实很有成效。但是前端变重所面临的问题就仅仅是 JavaScript 层面的 MVC 能解决的吗？ 　

前端学习路线-基础上部分 1网页布局基础 无特效，不交互。主要是静态的布局，展示网页！ 目标 ：做几个静态网页实例！ 1.1HTML 1.1.1语义化标签 1.1.2盒子模型 1.2CSS 1.2.1选择器 1.2.2布局、浮动、定位 来源： CSDN 作者： Yslsql 链接： https://blog.csdn.net/qq_26983201/article/details/103825836

　　前端框架的理解误区 　　网站的价值在于它能为用户提供什么价值，在于网站能做什么，而不在于它是怎么做的，所以在网站还很小的时候就去追求网站的架构框架是舍本逐末，得不偿失的。前端框架同理，如果是一个简单的页面型产品，应用只是依赖服务器来生成Web页面和视图，并且只需要使用一些简单的Javascript或者JQuery来使应用更加具有互动性，那么一个JQuery前端类库就可以了，真的没必要用上一些高大上的框架。 　　当然，框架的确是很有用的，重点是我们要知道什么时候该用什么框架。大公司大项目的经验和成功模式固然重要，值得学习借鉴，但我们不能因此变得盲从。只有深刻去理解前端框架，知道什么时候该用什么什么框架解决什么问题，才能有的放矢，直击要害。 　　前端框架与前端类库的区别 　　使用框架前，我觉得很重要的一点是弄清类库（诸如JQuery）和框架（诸如angularJS)的区别在何处。 　　简单而言，类库，解决的是代码或者是模块级别的复用或者对复杂度的封装问题，例如将一个解决复杂问题的功能模块封装成一个函数，提供一个简单的接口。库它是一种工具，它提供了很多封装好的方法，用与不用取决于我们自身，即使用了也不会影响我们呢的代码结构。 　　而框架，更多的是对模式级别的复用和对程序组织的规范。这里的模式是指比如MVC，为了实现M和V的解耦