前端开发

前端模块化 在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀 这时候JavaScript作为嵌入式的脚本语言的定位动摇了，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，更不用说模块（module）了，JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码 模块 既然JavaScript不能handle如此大规模的代码，我们可以借鉴一下其它语言是怎么处理大规模程序设计的，在Java中有一个重要带概念—— package ，逻辑上相关的代码组织到同一个包内，包内是一个相对独立的王国，不用担心命名冲突什么的，那么外部如果使用呢？直接 import 对应的package即可 import java.util.ArrayList; 遗憾的是JavaScript在设计时定位原因，没有提供类似的功能，开发者需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码，我们称为模块化。 一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。模块开发需要遵循一定的规范，各行其是就都乱套了

一、什么是模块化开发 　　一个 模块就是一个实现特定功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么模块就加载什么模块 　　好处： 　　　 　1、避免变量污染，命名冲突 　　　　2、提高代码的复用性 　　　　3、提高维护性 　　　　4、依赖关系的管理 二、commonJS 　　commonJS由nodeJS发扬光大，这标志着js模块化正式登场 　　1、定义模块 　　　　根据commonJS规范，一个单独的文件是一个模块，每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非为global对象的属性。 　　 　　2、模块输出 　　　　模块只有一个出口，module.exports对象。 我们需要把模块希望输出的内容放入该对象。 　　3、加载模块 　　加载模块用require方法，该方法读取一个文件并且执行，返回文件内部的module.exports对象 var name = 'Byron'; function printName(){ console.log(name); } function printFullName(firstName){ console.log(firstName + name); } module.exports = { printName: printName, printFullName:

最近在研究cmd和amd，在网上看到一篇不错的文章，分享出来给大家一起看看。 在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀 这时候JavaScript作为嵌入式的脚本语言的定位动摇了，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，更不用说模块（module）了，JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码 模块 既然JavaScript不能handle如此大规模的代码，我们可以借鉴一下其它语言是怎么处理大规模程序设计的，在Java中有一个重要带概念——package，逻辑上相关的代码组织到同一个包内，包内是一个相对独立的王国，不用担心命名冲突什么的，那么外部如果使用呢？直接import对应的package即可 import java.util.ArrayList; 遗憾的是JavaScript在设计时定位原因，没有提供类似的功能，开发者需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码，我们称为模块化。 一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块

什么是vue.js 　　1.vue是目前最火的一个前端框架,react 是最流行的前端框架(react除了开发网站,还可以开发手机APP,vue语法也是可以进行手机app开发的,需要借助于weex) 　　2.vue.js 是前端的主流框架之一,和angular.js react.js 一起 并成为前端三大主流框架 　　3.vue.js是一套构建用户界面的框架,值关注视图层,不仅易于上手,还可便于第三方库或既有项目整合.(vue有配套的第三方库,可以整合起来做带向项目的开发) 　　4.前端的主要工作?主要负责MVC 的v这一层 主要工作就是和界面交道 为什么要学习流行框架 　　企业为了提高开发效率,在企业中,事件就是效率,效率就是金钱 　　提高开发的发展历程,原生js -> jquery类的类库 -> 前端模板引擎 -> angular/vue/ 　　在vue中,一个核心的概念,就是让用户不在操作DOM操作元素,解放了用户的双手,让程序员可以更多的时间去关注业务逻辑 　　增强自己就业时候的竞争力 框架和库 的却别: 　　框架:是一台完整的解决方案,对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目 　　node 中的 express 　　库(插件):提供某一个小功能,对项目的侵入性小,如果某个库完成某些需求,可以很容易切换到其他库的实现要求. node(后端)

名词介绍： 　　单页面应用（SinglePage Web Application，SPA） 　　多页面应用（MultiPage Application，MPA） 对比分析：　　 组成 一个外壳页面和多个页面片段组成 多个完整页面构成 资源共用(css,js) 共用，只需在外壳部分加载 不共用，每个页面都需要加载 刷新方式 页面局部刷新或更改 整页刷新 url 模式 a.com/#/pageone a.com/#/pagetwo a.com/pageone.html a.com/pagetwo.html 用户体验 页面片段间的切换快，用户体验良好 页面切换加载缓慢，流畅度不够，用户体验比较差 转场动画 容易实现 无法实现 数据传递 容易 依赖 url传参、或者cookie 、localStorage等 搜索引擎优化(SEO) 需要单独方案、实现较为困难、不利于SEO检索 可利用服务器端渲染(SSR)优化 实现方法简易 试用范围 高要求的体验度、追求界面流畅的应用 适用于追求高度支持搜索引擎的应用 开发成本 较高，常需借助专业的框架 较低 ，但页面重复代码多 维护成本 相对容易 相对复杂 来源： https://www.cnblogs.com/zhouqiaoyun/p/9198502.html

一直不能分别前端框架和类库（我这个前端也是假的吧？），结合各位前辈的思想，整理了一下： 前端框架与前端类库的区别 使用框架前，我觉得很重要的一点是弄清类库（诸如JQuery）和框架（诸如angularJS)的区别在何处。 简单而言，类库，解决的是代码或者是模块级别的复用或者对复杂度的封装问题，例如将一个解决复杂问题的功能模块封装成一个函数，提供一个简单的接口。库它是一种工具，它提供了很多封装好的方法，用与不用取决于我们自身，即使用了也不会影响我们呢的代码结构。 而框架，更多的是对模式级别的复用和对程序组织的规范。这里的模式是指比如MVC，为了实现M和V的解耦，把复杂的耦合关系由经常变化的业务代码转移到不经常变化的框架内部消化。是面向一个领域来提供一套解决方案，提高开发效率，如果我们选择了使用某框架，就应该遵循该框架所规定的规则。 二者最主要的区别是 ：JQuery以DOM操作为中心，框架，准确来说是MVC框架，是以模型（model）为中心，而DOM操作是附加的。所以，以模型为中心最终达到的目的是带来一整套工作流程的变更，使得后台工程师可以编写前端的模型代码，把后台与前端打通，交互设计师处理UI跟模型的互动关系，UI设计师可以专注、无障碍的处理HTML源码，把它们以界面模板的形式提交给交互工程师。这一整套协作机制能大大提高开发效率。使用MVC框架使得前端任务更好的被解耦。

一、定义 　　工程化即 系统化、模块化、规范化 的一个过程。 如果说计算机科学要解决的是系统的某个具体问题，或者更通俗点说是面向编码的，那么工程化要解决的是如何 提高整个系统生产效率 。 二、为什么需要前端工程化 　　前端越来越复杂，设计的问题和环节也越来越多，不采用工程化管理，就无法很好的实现团队协同和降低复杂性。 原因如下： 1. 前端范畴不断扩大 　　 早期的前端只需要适配桌面浏览器，而现在的前端，需要适配不同类型和尺寸的设备，包括移动端网页，app应用等。 2. 前后端分离 　　 早期的前端只是后端 MVC 框架的一层模块， 而现在的前端普遍是从后端接口获取数据，编写处理逻辑，各种前端mvc前端框架也层出不穷。 3. 模块化开发的出现 　　 现在的前端开发不再是从零写起，重复造轮子，而是会引用大量内部和外部的组件和模块，这也导致前端必须进行模块管理。 4. 转码器的盛行 　　 为了提高效率，前端工程往往不会直接写html,css,和js代码，而是改用其他格式书写，再用工具编译为目标格式。 　　比如用Jade 写HTML，用less、sass、stylus 编写CSS,用ES6、Typescript编写JavaScript。 5. 开发流程和团队 　　 早期的前端团队往往只有几个人，而现在的前端团队可以扩展到几十人，甚至上百人。每个人只负责自己的一块内容。 所以

需求确认 本地开发 构建发布 代码上线 一、项目开发的整体流程 1.1项目经理（PM）提出需求； 1.2项目经理（PM/UI）构建原型与设计图； 1.3开发工程师（FE/BE）前后端分离开发； 1.4测试（QA）代码，通过发布上线； 1.5用户访问。 二、日常开发 2.1基于代码服务器code server实现代码上传与下载； 2.2日常基于项目文档和设计文档开发，基于mock数据测试代码； 2.3代码开发完成以后，前后端接口对接联调，修正部署； 经过以上过程就可以交给测试（QA）开始测试功能了。 三、代码部署 代码通过开发测试以后，就是到了部署发布环节了，通常情况下是由发布服务器从代码服务器上拉取代码，构建打包发布到各个服务器上，可能这中间还有一个预发布环节，在这个预发布环境上进行再次测试，通过以后在发布到各个服务器上。所以，通常情况下会需要两份配置文件，一份是我们日常开发使用的配置文件，一份是代码发布后运行在服务器上的配置文件。 来源： https://www.cnblogs.com/ZheOneAndOnly/p/11065580.html

前端架构： 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部署、缓存控制、文件指纹、缓存复用、请求合并、按需加载

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的 数据双向绑定 。 Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。 强调前端为什么要用vue.js 为什么要用工程化 相对 HTML4 , HTML5 最大的亮点是 它为移动设备提供了一些非常有用的功能 ，使得 HTML5 具备了开发App的能力, HTML5开发App 最大的好处就是 跨平台、快速迭代和上线，节省人力成本和提高效率 ，因此很多企业开始对传统的App进行改造，逐渐用H5代替Native，到2015年的时候，市面上大多数App 或多或少嵌入都了H5 的页面。 Vue.js 和 jquery的区别 强调没有最好的，只有最适合的 jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的