前端开发

Web前端技术由 html、css 和 javascript 三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。 一、JAVASCRIPT 篇 0、基础语法 Javascript 基础语法包括：变量声明、数据类型、函数、控制语句、内置对象等。 在ES5 中，变量声明有两种方式，分别是 var 和 function ，var 用于声明普通的变量，接收任意类型，function用于声明函数。另外，ES6 新增了 let、const、import 和 class 等四个命令，分别用以声明 普通变量、静态变量、模块 和 类 。 JS数据类型共有六种，分别是 String、Number、Boolean、Null、Undefined 和 Object 等， 另外，ES6新增了 Symbol 类型。其中，Object 是引用类型，其他的都是原始类型(Primitive Type)。 原始类型也称为基本类型或简单类型，因为其占据空间固定，是简单的数据段，为了便于提升变量查询速度，将其存储在栈

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

自从去年12月份淘宝UED(User Experience Design)团队首次发起一个名为D2的前端开发论坛，第一届仅仅过去3个月，又宣布下个月在北京召开第二届的D2，效率不可说不高。 D2(Designer and Developer)前端技术论坛(简称D2)，为国内前端开发者和网站设计师提供一个交流的机会，一起分享技术的乐趣，探讨行业的发展，以技术会友。这个论坛主要关注于讨论各种前端技术的发展与实践，包括JavaScript、ActionScript、CSS、xHTML等“传统”技术与Adobe AIR、Google Gears等“新兴”技术。 第一届是在杭州举行的，主题为： 《前端技术：未来一两年的发展与实践》。 第二届将在4月26和27日举行，主题为：“ 现代前端技术在网站中的应用 ”。 目前很多公司可能由于成本或资源的限制，大部分UI上的工作都由网站开发人员兼任了，很少有专门的美工，UI开发工程师。但是UI却是客户(包括公司高层或投资者，他们只看结果的)最关注的地方，用我们项目组的时髦话说就是要“外部简单内部强大复杂无比”。 有关淘宝UED团队的Blog，可以访问： http://ued.taobao.com/blog/ 相关文章： 12月18日，前端开发论坛“D2”邀请函 第一届D2前端技术论坛（照片、讲稿、视频） 第二届D2前端技术论坛将在北京举行 来源：

Web前端技术由 html、css 和 javascript 三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。 一、JAVASCRIPT 篇 0、基础语法 Javascript 基础语法包括：变量声明、数据类型、函数、控制语句、内置对象等。 在ES5 中，变量声明有两种方式，分别是 var 和 function ，var 用于声明普通的变量，接收任意类型，function用于声明函数。另外，ES6 新增了 let、const、import 和 class 等四个命令，分别用以声明 普通变量、静态变量、模块 和 类 。 JS数据类型共有六种，分别是 String、Number、Boolean、Null、Undefined 和 Object 等， 另外，ES6新增了 Symbol 类型。其中，Object 是引用类型，其他的都是原始类型(Primitive Type)。 原始类型也称为基本类型或简单类型，因为其占据空间固定，是简单的数据段，为了便于提升变量查询速度，将其存储在栈

为什么想写这篇文章 工作这些年我所做的事情总是循环着，刚工作的时候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

项目起源 　　还记得@jayli 的这幅前端知识结构图么。 　　图片的形式具有诸多的不便。缺失源图的我们，无法为此图贡献些什么，随着时间的迁移，或许有些技术点会发生改变，所以有了这个GitHub项目。我们可以通过协作的方式来共同维护这个项目。Git的历史记录也可以见证前端行业的一些变迁。 　　 可视化效果 　前端开发知识结构 前端工程师 浏览器 IE6/ 7 / 8 / 9 / 10 / 11 (Trident) Firefox (Gecko) Chrome / Chromium (Blink) Safari (WebKit) Opera (Blink) 编程语言 JavaScript / Node.js CoffeeScript TypeScript 切页面 HTML / HTML5 CSS/CSS3 Sass / LESS / Stylus PhotoShop / Paint.net / Fireworks / GIMP / Sketch 开发工具 编辑器和IDE VIM / Sublime Text2 Notepad++ / EditPlus WebStorm Emacs EmacsWiki Brackets Atom Lime Text Light Table Codebox TextMate Neovim Komodo IDE / Edit Eclipse Visual

Frontend Knowledge Structure 项目起源 还记得@jayli 的这幅前端知识结构图么。 图片的形式具有诸多的不便。缺失源图的我们，无法为此图贡献些什么，随着时间的迁移，或许有些技术点会发生改变，所以有了这个GitHub项目。我们可以通过协作的方式来共同维护这个项目。Git的历史记录也可以见证前端行业的一些变迁。 尽管会变成文字的方式来维护这些内容，但是我承诺写一个小工具帮大家生成更好玩的图形（基于DataV项目）。 前端开发知识结构 前端工程师 浏览器 IE6/ 7 / 8 / 9 / 10 / 11 (Trident) Firefox (Gecko) Chrome / Chromium (Blink) Safari (WebKit) Opera (Blink) 编程语言 JavaScript / Node.js CoffeeScript TypeScript 切页面 HTML / HTML5 CSS/CSS3 PhotoShop / Paint.net / Fireworks / GIMP 开发工具 编辑器和IDE VIM / Sublime Text2 Notepad++ / EditPlus WebStorm Emacs EmacsWiki Brackets Komodo IDE / Edit Eclipse Visual Studio

一：SpringMVC的工作原理图 二：SpringMVC流程 用户发送请求至前端控制器DispatcherServlet。 DispatcherServlet收到请求调用HandlerMapping处理器映射器。 处理器映射器找到具体的处理器(可以根据xml配置、注解进行查找)，生成处理器对象及处理器拦截器(如果有则生成)一并返回给DispatcherServlet。 DispatcherServlet调用HandlerAdapter处理器适配器。 HandlerAdapter经过适配调用具体的处理器(Controller，也叫后端控制器)。 Controller执行完成返回ModelAndView。 HandlerAdapter将controller执行结果ModelAndView返回给DispatcherServlet。 DispatcherServlet将ModelAndView传给ViewReslover视图解析器。 ViewReslover解析后返回具体View。 DispatcherServlet根据View进行渲染视图（即将模型数据填充至视图中）。 DispatcherServlet响应用户。 三：组件说明 以下组件通常使用框架提供实现： DispatcherServlet：作为前端控制器，整个流程控制的中心，控制其它组件执行，统一调度，降低组件之间的耦合性

　　本人一直在从事.net的开发，界面都是采用的WPF，近期花了一个多月进行HTML前端的学习，在这里呢进行学习总结和归纳。 　　本系列将主要分为4个模块： 　　　　控件 　　　　样式 　　　　布局 　　　　JavaScript 　　根据多年WPF的开发经验，界面就是控件及样式与布局的组合，再加上代码来控制交互逻辑，本期先对HTML常用的控件进行归纳。 　　div : 区块 1 <div class="***"> 2 </div> 　　div的概念与WPF中的Border类似，一般作为一个局部控件的容器，可通过css来设置它的各个属性，比如宽、高、背景色 1 div { 2 height: 160px; 3 width:200px; 4 background-color: #fff; 5 } 　　通过上面的css即可得到如下结果 　　我们也可以将div的背景色改为图片，只需在css中加如下一句即可 　　　　　　background-image:url(图片路径 ); 　　　　　　 background-repeat:no-repeat; 注：如果不加这句图片会通过重复来进行填充 　　因为div经常被当作局部控件的容器，所以我们可以在它的内部添加其他控件， 1 <div> 2 <p>叫爸爸</p> 3 </div> 　　 　　 input : 用户输入区 　

总结一下目前在用的前端代码规范，可作为开发参考 一、基础规范 开发规范 项目目录和文件的命名使用小写字母，避免使用大写或驼峰，多个单词以下划线 _ 分隔 如：my_project/cast_detail.js 目录有复数意义的时候，使用复数命名 如 scripts images 某些第三方插件可直接使用中划线 - 作为文件名单词的间隔 如 bootstrap-datepicker 某些特殊文件可以使用点号 . 作为文件名单词的间隔 如 webpack.config.dev.js jquery.cookie.min.js 使用有意义的英文单词式命名，避免使用拼音式（如 tupian.png ）命名 编辑器设置文件保存格式为 utf-8，以四个空格作为缩进（包括HTML，CSS，JS等），文件末尾空一行，行尾去掉空格 单个函数行数，以不超过一个屏幕为宜（50行左右），超出一个屏幕的，就要考虑拆分成更少的函数 每行代码量不要太长，要适当进行分行（自己也可以在编辑器设置超长自动换行） 在 sublime 中的配置 { "default_encoding": "UTF-8", "ensure_newline_at_eof_on_save": true, "trim_trailing_white_space_on_save": true, "tab_size": 4, "translate