前端开发

前端学习路径 1.WEB前端快速入门 在本阶段，我们需要掌握 HTML 与 CSS 基础，当然，也包含 H5 和 C3 的新特性。这个部分内容非常简单，而且非常容易掌握。相信你也更愿意学习这个部分，毕竟他可以让你最直观的感受到前端的魅力。为了锻炼大家写代码，可以根据你喜欢的站点去实现效果。这一阶段是非常重要的基础阶段，所谓基础就是可能这个阶段我们的学习的内容，可以让我们开发出来绚丽网站站点，但是功能丰富却暂时做不到。 为了完成更绚丽的站点，我们需要掌握常见特效的实现，利用 css3 和 h5 的新特性实现动画，布局，雪碧图，滑动门，tab 切换等特效。并且掌握基础的站点优化内容。例如 sprite 等。虽然我们还不能完成更多交互内容，但是我们会学习到很多的知识模型和理论，而这些知识模型和理论是我们后期工作和学习的基石。扎实的基础有了，我们才能走的更稳更快。 注：本阶段不涉及到编程，主要是熟悉 HTML5 各种标签用法、CSS3 各种属性的用法。 2.JavaScript 基础与深入解析 JavaScript 语言非常重要，可以说学习前端本质就是学习“JavaScript”编程。后面学全部都是基于JavaScript 的。JavaScript 语言可以让网页元素具备动态效果，让体验度更加流畅。这在目前流行的 B/S 架构体系下，是极端重要的事情。这也是为什么前端工程师大行其道

前端在发展，那不是一点快啊，现在的前端项目不再是拼凑几个html页面和写上一堆Jquery就能完成的，web业务正在变得日益复杂，一个Web App的开发难度，类似于开发一个简易型的native app，随之带来了一系列的问题，如何进行高效的多人开发，如何保证优秀的性能，还有如何减少加班时间等等。 前端工程化的内容有哪些？ 模块化 规范化 自动化 组件化 一、模块化 模块化是多人协作的基础。 简单来说，模块化就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。只有这样，才有多人协作的可能。 想一想，为什么模块很重要？ 因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。 但是，这样做有一个前提，那就是大家必须以同样的方式编写模块，否则你有你的写法，我有我的写法，岂不是乱了套！ js的模块化 在es6之前，有commonJS，AMD，CMD规范，现在有es6的模块系统 commonJS规范 根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在一个文件定义的变量（还包括函数和类），都是私有的，对其他文件是不可见的 而且：CommonJS 加载模块是同步的，所以只有加载完成才能执行后面的操作 服务端NodeJS采用了commonJS规范 AMD规范 服务端模块有了，那么客户端模块呢，

前端工程化—部署 使用脚手架创建初始项目，在本地搭建开发服务器进行项目开发。编码完成后，经过构建生成目标环境可用的代码，到此阶段的所有工作都属于开发环节。下一步的工作需要将代码部署到指定的环境中，方便进一步的联调测试工作。 在部署一些个人项目或者小团队的项目时，可能就是使用一些工具（如FTP上传工具）将文件上传到指定的服务器，然后交给运维人员发布上线即可。 这种发布方式简单快速，适合于个人项目或者小规模团队。但是对于用户量庞大的产品和拥有多种开发体系的技术团队，项目部署必须考虑协作、速度、安全等多方面因素，需要一套完整的流程实现项目部署。 先来看三个场景，从实际场景出发考虑前端部署需要注意哪些因素。 1、开发人员使用FTP工具上传代码到服务器。在测试阶段，测试人员提了一个Bug给开发同学，开发人员修复完成后需要打开FTP工具，定位到指定目录然后上传代码。每次的Bug修复都需要重复这个过程。 2、多人协作的项目中，如果A同学在修复一个Bug后没有将代码提交到代码仓库，其他开发在旧代码基础上进行改动，部署后发现A修复的Bug又出现了。 3、开发同学失误将代码部署到其他应用的目录中，导致其他应用功能故障。 以上三个场景分别对应了部署流程中需要考虑的3个因素：速度、协作和安全。不同结构、不同规模的团队有着不同的侧重点，小团队注重速度，大团队注重于协作和安全。 部署工具

1、 在ES5中， 变量声明有两种方式，分别是var和function， var用于声明普通的变量，接收任意类型，function用于声明函数。另外ES6新增了let、const、import和class等声明方式，let用于声明普通变量（与var的区别在于拥有块级作用域，在作用域内不能重复声明），const用于声明静态变量，import用于声明模块，class用于声明类。 2、JS数据类型共有7种，分别是（1）数值Number、（2）字符串String、（3）布尔Boolean、（4）符号Symbol、（5）Null、（6）Undefined、（7）对象Object。其中Object是引用类型，其他都是原始类型，原始类型也成为基本类型或者是简单类型，因为其占用空间固定，是最简单的数据段，为了便于提升变量查询速度，将其存储在栈中（按值访问）。引用类型由于其值的大小会改变，所以不能将其存放在栈中，否则会降低变量的查询速度，因此其存储在堆中，存储在变量处的值是一个指针，指向存储对象的内存处（按址访问），对于引用类型的值，可以为其添加属性和方法，也可以改变和删除其属性和方法，但基本类型不可以添加属性和方法 3、javasrcipt可以通过typeof来判断原始数据类型，但不能判断引用类型，要知道引用类型的具体类型，可以通过Object原型上的toString来判断。 4

前端作为互联网时代直接触达用户的窗口，大到我们每天浏览到的网站，小到一次点击按钮的页面，前端无处不在。并且在产品的众多开发环节之中，最能让用户直观感受到的就是前端开发。因而前端行业的广阔发展前景也吸引了不少人的转业学习。那么，零基础如何学好前端呢？有什么建议吗？本文将为初学者详细解答一下这两个问题，下面一起来看看吧！ 1、前端行业趋势 目前，前端工程师的工作领域十分广泛，可以说所有用户终端产品与视觉和交互有关的部分都在这个范围。再说具体一点，前端包括了用户PC端、移动端等网页，处理视觉和交互问题。总的来讲，前端开发存在于方方面面。比如网站设计优化、各色各样H5和app/小程序开发等等。因此，市场对专业的前端开发需求日益迅速增长。一些人担心前端行业的就业市场会饱和，这完全是杞人忧天。要知道技术无论怎么发展，整体市场是不会饱和的，饱和的也只会是低端饱和，高端始终缺人。在未来，专业的前端开发工程师才是企业真正争夺的香饽饽。而被淘汰的不是前端开发，而是淘汰技术落后和技术不精的开发者。这对许多前端学习者的启示是只有掌握更加过硬的技术，才能让自己具备更强的竞争力。 2、前端岗位的招聘要求 给许多零基础想要转业到这个岗位的小白一个非常重要的建议是，在学习前端之前，首先要了解各大企业公司对前端岗位的用人标准，才能能清楚自己要努力的标椎在哪里。简单来说，Web前端所包含的知识模块很多，就目前而言

1、MVC设计模式 MVC是一种设计模式，它将应用划分为3个部分：数据（模型）、展现层（视图）和用户交互（控制器）。换句话说，一个事件的发生是这样的过程： （1）用户和应用产生交互。 （2）控制器的事件处理器被触发。 （3）控制器从模型中请求数据，并将其交给视图。 （4）视图将数据呈现给用户。 V层是视图层，控制界面显示，将界面与数据连接。M层存放数据，处理逻辑，比如处理从数据库调用的数据，还有业务逻辑处理。C层用于连接M和V，Controller 负责显示界面、响应用户的操作以及与 Model 交互，比如操作DOM、对事件的监听。这就导致了Controller和 View 紧耦合、逻辑复杂，难以维护。 2、MVVM设计模式 MVVM与MVC最大的区别就是：它实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再自己手动操作Dom元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变。 由此和view层分开来，只是注重数据的改动即可。 MVVM设计模式中最重要的就是实现了View和Model的自动同步，所以可以不用频繁地手动操作DOM元素。 比如说Vue框架，Vue实例中的data相当于Model层，而ViewModel层的核心是Vue中的双向数据绑定，即Model变化时VIew可以实时更新，View变化也能让Model发生变化。

由 OpenDigg 出品的前端开源项目周报第二期来啦。我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开发方面的开源项目，方便前端开发人员便捷的找到自己需要的项目工具等。 react-fix-it 根据error自动生成测试 siema 轻量级轮播框插件 css-loader CSS加载器 rexxar-android 针对移动端的混合开发框架 react-decoration React组件装饰集合 pxq 基于 react + redux + immutable + ES6 的单页面项目 docute 无需生成过程直接编写文档 styles-debugger CSS-in-JS应用的调试样式可见辅助器 css-pokemon 低聚合的动画Pokemon angular2-idle-preload 使用请求IdleCallback用于预加载异步/lazy路线 wecqupt 在微信内被便捷地获取和传播 RNPolymerPo 基于React Native 的生活类聚合实战项目 css-constructor React组件的CSS构造函数 wx-charts 微信小程序图表工具 wemark 微信小程序Markdown渲染库 ios7-vue 使用vue2.0 vue-router vuex模拟ios7 vue-quill-editor 基于Quill

HTML + CSS 就是当代网页的基石 。全世界的网站，无论其服务器端的语言是什么，前端都使用了 HTML + CSS。 随着互联网行业的快速发展，前端这一职位也越来越火热，前端工程师的高薪资，也让越来越多的人想要进入这个行业。 那么，零基础小白如何才能成为一名前端工程师呢？ 首先大家要了解的是，Web 前端工程师都需要掌握什么？首先，一定要精通 HTML、CSS、JavaScript，只懂其中的一种或者是两种肯定是不行的，必须要三个全部掌握。 HTML ：HTML 是一种标记语言，类似于 markdown，可以理解为通过特定的语法，对文档的格式进行调整和统一。 CSS (Cascading Style Sheets): 如果说 HTML 是网页的骨架，那 CSS 就是网页的美容师，用来给 HTML 添加样式（如字体、颜色、大小等），还可以配合各种脚本语言对网站元素进行格式化。 JavaScript ：简称 JS，是前端必须掌握的编程语言，主要用于开发网页的脚本，但目前看起来要无所不能了…… HTML HTML + CSS HTML + CSS + JavaScript 需要注意的是，一定要将学习和练习同时进行，只有通过自己亲手的练习，才可以让自己理解吸收掉这些知识。 因此，我给大家推荐两门前端新课——「 HTML5 简明教程 」、「 CSS3 简明教程 」

3 月，跳不动了？>>> 从事android开发快有三年了，从学校毕业出来就一直在搞安卓，现在慢慢的发现安卓的开发难度也已经没有想刚出道的时候那么的困难了。特别时AS出现之后，安卓的开发似乎变得上手简单，傻瓜式开发。 前段时间刚刚找了一家公司，就在家附近不到5分钟的路程，其实也是缘分吧。刚刚好撞到我了，进去之后也从之前的普通程序员开启了转型管理的新路程。 后面要去的这家公司，也有接一些外包的项目，一个后端的合伙人想让我尝试用h5去开发一下webApp，说这样能够节省不少时间。其实前两年就发现H5他们在用这个东西搞webapp，但是毕竟是要通过访问web才能展现在屏幕上的，所以有网速限制的大缺陷，所以就没有太去在意。 但是现在不同，react native的出现打破了这个局限。所以现在要开始学习相关的前端的开发技术。 未来的app开发必然是走向跨平台跨终端的，所以要好好的紧跟潮流。 那么从现在开始要从javascript开始学习，接着会学习react.js 后面再直接转型react native开发 来源： oschina 链接： https://my.oschina.net/u/2419251/blog/518311

3 月，跳不动了？>>> 简介 ---- CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。 作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。 原理 ---- 本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。 LESS 可以直接在客户端使用