前端架构

本文适合的读者?‍?‍?‍? 现在在手淘，京东，今日头条，美柚等过亿用户的手机app中的，都常见h5网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个h5的例子：（ 手淘 ， 美柚 ）。这些app中都嵌者数以百计，千计的h5网页。 背后他们开发这些h5的框架是怎么样的呢？ 或许你也想开发一些h5，或者简单的react，vue应用，做些广告，做些互动和营销，发布到微信朋友圈传播， 那如何快速的搭建和发布这些h5呢？ 或许你是前端工作不久的初学者，搭建这样的多页h5网站， 怎么样的架构才是正确的打开方式呢？ 或许你想学习下充斥耳边的 webpack,vue,nodejs,es6,MERN框架的另类玩法 ，那这篇文章也适合你！ 最重要的是，你烦透了 移动端适配，移动端性能优化 ，你只想专注于功能开发，那这篇文章就是为你而准备的！ 如果让你现在从零开始搭建工程开发一个h5页面并且发布到线上，需要多久？ 滴答滴答滴答！～ 你可能需要做以下这些事件?？ 搭建服务端工程，分好目录结构，配置要数据库mysql，mongodb，redis; 搭建前端工程，划分目录结构 前端，服务端划分dev，test，prod环境 前端配置webpack做编译，多个h5是多页面的，可能你还要倒腾下webpack多页面的配置方案 好了，可以开始开发了，mobile h5还有适配问题

NodeJS基础知识 1. Node的全局对象和全局变量 1.1 全局对象：所有模块都可以调用的 global：表示Node所在的全局环境，类似于浏览器的window对象。 process：该对象表示Node所处的当前进程，允许开发者与该进程互动。 console：指向Node内置的console模块，提供命令行环境中的标准输入、标准输出功能。 1.2 全局函数 定时器函数：共有4个，分别是setTimeout(), clearTimeout(), setInterval(), clearInterval()； require：用于加载模块； Buffer()：用于操作二进制数据。 1.3 全局变量 __filename：指向当前运行的脚本文件名。 __dirname：指向当前运行的脚本所在的目录。 2. Node的三大特点 2.1 单线程 Node.js不为每个客户连接创建一个新的线程，而仅仅使用一个线程。当有用户连接了，就触发一个内部事件，通过非阻塞I/O、事件驱动机制，让Node.js程序宏观上也是并行的。 2.2 非阻塞I/O 由于Node.js中采用了非阻塞型I/O机制，因此在执行了访问数据库的代码之后，将立即转而执行其后面的代码，把数据库返回结果的处理代码放在回调函数中，从而提高了程序的执行效率。 当某个I/O执行完毕时，将以事件的形式通知执行I/O操作的线程

1，要有自己的思想，思辨能力 //重深度发展，不要横向扩展！！！ 2，两门语言 ：java+php / java+python(起点太高，适合有情怀的程序员) 3, 服务端相比前端省心，成本低一些(喜欢那个选哪个) 4，前端一定要有一定的审美能力 5，服务端要有一定的大局观，架构能力！！！ 6，举棋不定选服务端，因为前端变化快 7，服务端更接近编程本质，前端会浪费大量时间在UI 8，踏踏实实做好手头工作最重要，不要异想天开，杞人忧天 9，对自己要高要求 10，人生很多的困境，都是因为适当的年龄没有干适当的事情 11，少玩游戏，要玩就玩大制作单机游戏，3A游戏.......... 12，甘于平淡，耐得住寂寞 13，成就感，做出有人用的东西！！！ 14，程序员的独立性：过去不分前后端的，现在分离了让程序员变脆弱了，应该前后端都要会，一个完整的产品是前后端都有的！（从产品的角度没有前后端） sku（复杂的业务逻辑）？spu？cms？ 15，学习(一门课程)不仅要学习技术，还要用这个技术写一个项目，才能有收获，有成就感！！！ 16，程序员确实辛苦，需要不断学习，不断历练（及时当勉励，岁月不待人） 17，代码大全2，黑客与画家，浮生六记（原版） 18，语言看书，框架看视频 职场： 19：提问是一个人综合素质的体现，要学会提问题！（准确，描述清晰） 20，80%可以debug解决，19

一、团队组织 网站 说明 腾讯 AlloyTeam 团队 腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾讯社交用户体验设计，简称ISUX，腾讯设计团队网站 CDC 腾讯用户研究与体验设计部 FEX 百度Web前端研发部出品 淘宝前端团队（FED） 用技术为体验提供无限可能 凹凸实验室 京东用户体验设计部出品 奇舞团 奇虎360旗下前端开发团队出品 阿里巴巴国际UED团队 在更新的屏幕里创造出更好的产品和更优的体验 EFE 由百度多个遵循统一技术体系的前端团队所组成 UXC 覆盖了百度85%以上的产品体验设计 二、开发社区 网站 说明 StackOverflow 加入世界上最大的开发者社区 SegmentFault 中文领域最大的技术问答交流社区平台 知乎 中文互联网最大的知识分享和社交平台 开源中国 目前国内最大的开源技术社区 w3ctech 中国最大的前端技术社区 掘金 一个帮助开发者成长的社区 V2EX 创意工作者们的社区 博客园 一个面向开发者的知识分享社区 CNode 国内最大最具影响力的 Node.js 开源技术社区 Ruby China 由众多爱好者共同维护的 Ruby 中文社区 三、前端门户 网站 说明 前端网 一个专注于Web前端开发行业的综合性门户网站 大前端 一个集前端开发和Wordpress内容为一体的双轨独立网站 四、前端大牛

H5 新特性 新增标签 本地存储 webStorage websocket webworkers 新增地理位置 对css3的支持 canvas 多媒体标签 新增表单元素类型 结构标签：header nav article aside footer 表单标签：email url range date 媒体标签：video audio navigator.geolocation.getCurrentPosition(success,error,option); css3 新特性 圆角 阴影 背景渐变 弹性盒布局 过渡 动画 2D/3D转换 媒体查询 border-image background: linear-gradient(direction, color1, color2 [stop], color3...); background: radial-gradient(shape size at position, start-color, ..., color [stop] ..., last-color); transition 需要触发条件，而且只有开始和结束之间的过渡。 animation：不需要触发，中间可以插入无数关键帧。 transform: translate3d(0px,0px,400px); webstorage 和cookie的区别 容量 cookie 4k

  2017年很快又过去了几个月，在过去的一年里，前端技术迅猛发展，前端各类技术都在优化升级，”大前端”的概念进一步体现，前端人才需求量进一步扩大，但优秀的前端工程师却如大海捞针，一将难求，那么在未来一年里我们应该做好怎样的准备才能成为一名优秀(不仅仅是合格)的前端工程师呢？ 一.现代前端技术知识体系)一 、现代前端技术知识体系   我们先看看2017～2018前端技术知识体系图，这也是现代前端技术体系结构图的第二版。 [查看code部分下载大图]   大家也可以对比2016年的知识技术体系来看看： 2015-2016前端知识体系 。在这次更新中，主要完善了原有的部分知识内容的原理解析，增加了新的领域内容。   可能大家觉得体系图中内容还是过于抽象，没有有经验的人带，仍不能在实践中深入学习，或者需要自己花更多的时间搜索资料才能了解，亦或是网上的学习资料不够全面深入。   幸运的是，对于现代前端技术知识体系图，现在已经推出了 《现代前端技术解析》 一书，针对2017年～2018年前端技术知识体系内容深入原理，展开剖析，体系化、全面地帮助前端读者们解决了这些问题。我们不妨先来看看[本书目录]，再回头来看。 二.现代前端技术解析适读人群)二、《现代前端技术解析》适读人群   前端入门极其简单，但要学习提升成为一名优秀的前端的工程师又极其不易，因为涉及的技术点很多

团队介绍 乐视云计算大前端，目前团队人数20+，负责公司全部业务线的前端工作，包括官网、商业平台的前端构建，flash、html5播放器的SDK，以及还处于Alpha阶段的React Native打包App的平台工具——LeVally，包括PC端、移动端的前端项目。 在大量的业务实践中，我们团队的人员，经过各种探索、踩坑，形成了如今的技术架构，并且在不断的更新完善中 前端规范 代码未动，规范先行。可以在上图的最左面看到，一大排的规范列表 接活规范 其实是规范了大前端团队从接活、评估、开发、联调、UI还原、测试、部署( Vue 部署 )、上线等一系列的前后串联的工作，由于我们团队面向各个业务线，之前经常有被工期打断、delay背锅的情况，所以需要内外统一工作规范。 代码规范 团队一开始采取的是普通的eslint来约束代码，随着时间的增长，进化为选择并自定义了 Airbnb的严格eslint 来约束代码。 同时，团队对项目各种命名、git分支、注释、ReadMe、vue组件，包括之前的jquery编写，都进行了不同程度的规范约束，以达到团队的内部统一 接口规范 对于不同的后台团队，统一了接口，使我们的项目、组件，可以最大程度的复用 SEO规范 对于需要SEO的界面，有自己的SEO规范 兼容性规范 H5 、 PC 时间、精力是宝贵的，我们不可能去兼容IE6、7那些大爷了，针对不同的项目

资深前端知识体系 从招聘信息看 精通Javascript 掌握js核心技术DOM,BOM,Ajax,JSON 熟悉js面向对象机制,能用原生js进行DOM编程 有复杂js开发经验 熟悉各种js框架 (jQuery/Backbone/Angular/ext/Dojo/Prototype等) 精通html+css,包括html5+css3 快速 体验一致 无差异化 精通DIV+CSS网页布局 能够根据需求快速提供基于HTML5的技术的解决方案 熟悉手机浏览器中HTML5中的兼容性 具有解决多浏览器,多终端兼容性问题的经验 多浏览器兼容性问题 熟悉手机浏览器h5的兼容性问题 具有调试各浏览器兼容性经验 熟悉IE各版本开发特性,保持浏览器体验一致 对浏览器差异有深入了解，熟悉浏览器原理，能根据需求提供兼容方案 熟悉各种web标准 熟悉W3C标准,对表现和结构分离、HTML语言化等有深刻理解 熟悉es5,es6规范 架构能力 对符合web标准的网站重构有经验 组件化，模块化，能独立完成复杂前端模块设计和实现的经验 了解模块化开发及工具使用 有一定的设计能力 了解PHP/Python/Ruby等一种或者多种服务端语言 熟悉大型网站架构和性能优化,熟悉各种Web缓存技术 知识体系 基础  计算机知识储备 优化协作

网上学习资源参差不齐、分散无系统，给爱学习、努力想提高的你是不是造成很多困扰呢？ 与其他学习平台不同，CSDN知识库不是随机地、一股脑地向您推算大量文章，而是首先梳理各技术领域知识图谱，再以此为基础，收集、筛选出每个技术分支所涉及的各个技术点的解析类、动手实践类文章，内容更系统化、更有针对性。无论您正关注哪个技术领域，这里都可以找到你所需要的。（ 如果没找到您所需要的，欢迎向我们反馈，我们不会让您等太久。 ） 今天我们先从前端开发领域着手，看看前端开发者可以在这里得到什么？ 各核心技术知识图谱大曝光，知识库精华资源强力推荐 HTML5知识库 HTML5知识图谱 知识图谱由前端技术专家、CSDN博客专家侯志强（ @yisuowushinian ）绘制，全栈工程师、架构师、Android和HTML5专家张西涛（ @offbye ）、HTML5研发工程师谷震平（ @guzhenping ）等多位HTML5领域专家、开发高手担任特邀编辑参与内容审核，已收录各核心技术点下精华文章145篇及其他优秀学习资源（视频课程、实践Demo、图书）。 想为HTML知识库贡献一份力，马上申请成为HTML5知识库特邀编辑>> 内容精选： HTML5+CSS3实现类似网易云音乐的移动版播放器 逼真的HTML5 3D水波动画 可多视角浏览 HTML5 Canvas绘制转盘抽奖 HTML网页之坦克大战游戏

1.为什么我们前端自动化开发 应该任何学开发的，不管学什么语言，老师都这样讲过，作为一名开发人员，你最大的精力应该是放在创造力上面，don't you repeat myself 不要重复自己，而在我们开发过程中，往往存在很多大量的重复操作，所以我们需要为这些操作省去时间，腾出更多的时间来让我们创造。 而自动化开发能带来哪些自动化： 1.自动编译（将less，sass等自动编译） 2.自动合并（将页面引入的多个js文件，或者css文件，合并为同一个且压缩） 3.自动刷新（IDE保存，浏览器不用刷新，自动看到效果） 4.自动部署（自动将项目打包部署到指定目录） 5.自动同步（能够方便实现多个浏览器窗口，同步点击，输入，调试） 有没有感觉很心动额，能够帮我们做这么多事情，所以下面我们就来搭建吧，此次搭建，包括环境搭建，工具搭建，项目架构搭建，连载，今天这篇，将环境搭建的初步，nodejs环境搭建。 2.Node.js是个什么东西？ Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js’