前端框架

>这篇文章将从 AngularJS ReactJS Polymer 这几个流行的框架入手，分析前端框架在这几年发展中的关键技术点，作为2015前端技术选型的参考。摘要: - 初体验 - 技术特点 - 组件化 - 应用架构 ### 总结 **1. 初体验** 拿TODO来作为引子好了.  Angular 的实现  React的实现(非flux架构)  Polymer的实现 ![](//upload-images.jianshu.io/upload

前端架构： 1.前端工程化 web应用复杂度的增加，特别是单页面应用的风靡。组件化，工程化，自动化成了前端发展的趋势。或者说一线的互联网公司就是这么做的。 每个前端团队都在打造自己的前端开发体系，这通常是一个东拼西凑，逐渐磨合的过程，在技术发展日新月异的今天，这样的过程真的是不可抽象和复制的么？本文希望能够通过系统的拆解前端开发体系为大家提供体系设计思路参考。 前端工程的3个阶段 第一阶段： 库/框架选型 Animate.css jQuery vue.js underscore.js React.js Backbone.js Bootstarp zepto.js jade normalize.css compass Angular.js 解决开发效率 第二阶段： 简单构建优化 选择构建工具，对代码进行压缩，校验，之后再以页面为单位进行简单的资源合并。 第三阶段： JS/CSS模块化开发 解决维护效率 js的模块化方案 ADM/CDM/UMD/ES6 Module css的模块化：less，sass。 第四阶段: 前端是一个技术问题较少，工程问题较多的开发领域 当我们要开发一款完整的Web应用时，前端将面临更多的工程问题，比如： - 大体量：多功能、多页面、多状态、多系统； - 大规模：多人甚至多团队合作开发； - 高性能：CDN部署、缓存控制、文件指纹、缓存复用、请求合并、按需加载

第一阶段： HTML+CSS: HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础： Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。 JS基本特效： 常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。 JS高级特征： 正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、 JQuery：基础使用 悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。 第二阶段：HTML5和移动Web开发 HTML5： HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas. CSS3: CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。 Bootstrap: 响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。 移动Web开发： 跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem

黑马程序员：从零基础到精通的前端学习路线 随着互联网的深入发展，前端开发工程师一跃成为市场上非常抢手的人才。很多同学，包括以前做UI的、Java的、或者对于IT完全零基础的同学都想学习前端。下图是网上流传甚广的一张前端学习思维导图，很多初学者表示看到这些密密麻麻的知识点就已经晕了。确实，前端是一门涵盖面很广的学科。但是想学前端的你也不用慌张，内容虽多但有迹可循，只要循序渐进就不怕学不好前端！ 那么前端开发到底需要学什么？应该怎么学？接下来黑马程序员前端学院教你如何从零基础学习前端。 一、前端开发入门 在入门阶段，你首先要学会最基本的技能：根据UI的设计稿，实现HTML的静态页面制作。这就要求你得掌握HTML、CSS页面布局排版、样式美化等技能。 在这个阶段你需要学习： 1、HTML+CSS基础 掌握HTML的标签使用、排版技巧、CSS的布局定位、样式美化、浏览器兼容性。 2、JavaScript基础 掌握JS的基本语法、条件、语句、循环等，学会常用算法，增强逻辑性。 3、常用的前端工具 比如Webstrom、Sublime、Dreamweaver等。掌握其快捷键设置等技巧，可快速提高开发调试效率。 这个阶段的学习难度相对不高，学完这些之后，我们已经能完成静态页面的制作。当然，这只是入门，如果你想用这些技能找工作的话还是比较困难的。 二、前端开发初级 在接下来的这一个阶段

为什么想写这篇文章 工作这些年我所做的事情总是循环着，刚工作的时候html、js、jQuery用的也很溜，可是后面的七年都没写过前端代码。现在由于项目原因，时不时的需要去写点前端代码，可是前端的世界已经在nodejs的帮助下发生了翻天覆地的变化，一个又一个的框架层出不穷。这篇文章记录下我这一路披荆斩棘遇到的前端技术。一来帮助自己梳理知识体系，二来帮助前端新手明确学习路径和学习目标。 vue项目的技术栈 我目前的项目用的是vue2，这里罗列的也都是基于vue或者vue整合的技术。基本上按照顺序把一个一个技术搞懂了，用vue做个前端项目是没什么问题了。 nodejs Node.js 就是运行在服务端的JavaScript。是一个基于Chrome V8 JavaScript引擎的JavaScript运行环境。在node.js出现之前，JavaScript是只能在浏览器中运行的，Node.js的出现可以让开发像写python一样在命令行写JavaScript。 nvm nvm 是一个node.js的版本管理工具。可以帮助开发管理本地使用的多个node.js版本。 npm、yarn npm 是一个js的包管理工具，它的出现真的是让前端技术飞速发展。它做的事情就想java中的maven。 yarn 和npm一样是个js的包管理工具，不过它在下载依赖时会做全局缓存，不会重复下包。 vue vue

jQuery相关 三级菜单展示 $(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide') 直接操作css属性 // 两个参数设置属性 $('#p1').css('font-size','24px') // 一个参数获取属性 $('#p1').css('font-size') // 一次设置多个属性 $('#p1').css({"border":"1px solid black","color":"blue"}) 位置操作 // 不加参数获取位置参数 $(".c3").offset() // 加参数设置位置参数 $(".c3").offset({top:284,left:400}) // position只能获取值，不能设置值 // scrollTop获取当前滚动条偏移量 $('window').scrollTop(); $('window').scrollTop(0); // 设置滚动条偏移量 尺寸 // 盒子模型测试下列参数 height() width() innerHeight() innerWidth() outerHeight() outerWidth() // 加参数标签设置值 文本操作 // text() html() 不加参数获取值，加参数设置值 //

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，但可以与第三方库或既有项目整合。 尤雨溪 是Vue.js框架的作者，HTML5版Clear的打造人。他认为，未来App的趋势是轻量化和细化，能解决问题的应用就是好应用。而在移动互联网时代大的背景下，个人开发者的机遇在门槛低，成本低，跨设备和多平台四个方面。 尝试 Vue.js 可以创建一个 .html 文件，然后通过如下方式引入 Vue： <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 或者： <!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> 学习视频： https://scrimba.com/playlist/pXKqta 声明式渲染 Vue.js 的核心是一个允许采用简洁的 模板语法 来声明式地将数据渲染进 DOM 的系统： <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: {

bootstrap 样式框架 用于快捷开发 网页 app Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 ------------------------------------------------- 如何使用？ 1）去下载框架 https://v3.bootcss.com/ 中文官网 bootstrap-3.3.7-dist.zip 生产环境 解压 2）使用 BootCDN 提供的免费 CDN 加速服务（同时支持 http 和 https 协议 CDN 使用框架资源都是通过 网络动态使用的。本地项目不做任何引用。 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 3)bootstrap开发 iconfont使用 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8">

[译] Angular 2 VS. React： 血色将至： http://www.w3ctech.com/topic/1675 [原译] React vs Angular 2: 战争继续： http://jixianqianduan.com/article-translation/2016/04/07/react-vs-angular2-fight-rages-on.html Vue.js 对比其它框架: https://vuejs.org.cn/guide/comparison.html Angularjs双向绑定的研究： https://www.nihaoshijie.com.cn/index.php/archives/306 Angular 从 1 到 2 快速参考: https://angular.cn/docs/ts/latest/cookbook/a1-a2-quick-reference.html 知乎：react.js,angular.js,vue.js学习哪个好？ https://www.zhihu.com/question/39943474 React 简介和原理： http://anjia.github.io/2015/07/24/fe_react/ 浴火重生的Angular: https://github.com/xufei/blog/issues/9

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 对于 Web 开发人员来说，找到一些合适的工具，能让工作轻松许多。这其中，Web 框架更是提升工作效率的“利器”。但因为可选的 Web 框架非常多，如何选择也是一件令人头疼的事情。 本文列出了9款目前比较流行的 Web 框架，并对优缺点进行分析，希望能对大家有所帮助。（内容主要编译自Ken Mazaika的 The 9 Most In-Demand Web Frameworks And What You Need To Know About Them ） 首先， 什么是 Web 框架？ 当 Web 浏览器使用 HTTP 和在其他地方运行的服务器（计算机）通讯时，这些服务器会收到一些通知： 所选的 URL 如何输入网址（通过表单提交或只是在浏览器栏中输入网址） 服务器要干很多事情，比如： 读取数据库里的数据和添加数据 找到正确的结果（用户是否被允许查看试图访问的页面？是否要发送到不同的URL？等等） 构建用户将看到的网页 如果要提供更复杂的功能，就需要执行更多的步骤。作为开发人员，则需要对想要的功能列出一系列解决方案。Web 框架就是其中可选的解决方案之一。 进入正题： 1、Ruby on Rails 编程语言： Ruby 简介： Ruby on Rails 是一个已经被许多公司采用的 Web 框架，是 Ruby