前端开发

随着5G技术的逐渐发展和成熟，未来大量的应用场景都需要前端进行呈现，所以未来前端开发将得到更多的重视。想要不被时代所淘汰，我们就需要不断学习，不断完善自己。未来相信所有的网站都会升级成HTML5网站，我们再也不用为了浏览网站去安装各种各样的插件了，并且它的效果会更加的炫酷。 之前界限分明的前端开发和后端开发，未来开始模糊。从趋势上来看，开发团队的人员配备都在向前端倾斜，包括Android开发、iOS开发、PC端开发、小程序开发等，前端工程师承担的角色不断扩大。 另外，Javascript开始向嵌入式领域进军，进一步促进了前端开发的普及化。与此同时，对安全，可靠等的要求越来越高，这都对前端开发提出更新和更严格的要求。虽然网页设计是网站的外观，但前端开发是将该设计的页面通过代码的形式在网络上进行展现，并加入一些功能特效 !使之具有一定的交互性!前端Web开发人员通过HTML，CSS和JavaScript等编码语言实现Web设计的人。 虽然它不再那么常见，但是前端开发人员有时被称为“客户端开发人员”，以区别于后端开发人员，后端是对数据库等幕后工作进行编程。如果您前往任何站点，您可以在导航，布局中查看前端开发人员的工作，甚至可以看到PC页面与手机页面不同的展现方式。 前端Web开发人员使用三种主要编码语言来编写由Web设计人员创建的网站和Web应用程序设计：HTML、CSS

闲来无事，整理下目前常见的移动端页面布局。主要有流式布局、响应式布局、固定宽度做法、设置viewport进行缩放、rem等比例适配等。下文只是个人及网络上对各布局的看法，如有不当之处或其它方法，可回复。 1、流式布局 流式布局的解决方案有不少弊端，它虽然可以让各种屏幕都适配，但是显示的效果极其的不好，因为只有几个尺寸的手机能够完美的显示出视觉设计师和交互最想要的效果。在页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下 显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点，往往只有几个尺寸的手机下看 到的效果是令人满意的，其实很多视觉设计师应该无法接受这种效果，因为他们的设计图在大屏幕手机下看到的效果相当于是被横向拉长来一样。 流式布局并不是最理想的实现方式，通过大量的百分比布局，会经常出现许多兼容性的问题，还有就是对设计有很多的限制，因为他们在设计之初就需要考虑流式布局对元素造成的影响，只能设计横向拉伸的元素布局，设计的时候存在很多局限性。 2、固定宽度做法 还有一种是固定页面宽度的做法，早期有些网站把页面设置成320的宽度，超出部分留白，这样做视觉，前端都挺开心，视觉在也不用被流式布局限制自己的设计 灵感了，前端也不用在搞坑爹的流式布局。但是这种解决方案也是存在一些问题

前端生成图片功能及相关插件调研 首先丢出几个业务调研的相关插件，后续再详细介绍各个插件的坑 html2canvas https://github.com/niklasvh/html2canvas/ domtoimage https://github.com/tsayen/dom-to-image#readme rasterizehtml https://github.com/cburgmer/rasterizeHTML.js canvg https://github.com/canvg/canvg 序言： 生成图片功能调研 各插件底层逻辑最终都是调用JS原生canvas.toDataURL（）将canva转为image 展示在前端 注：可自行设置图片质量，设置个参数即可，详情看文档（清晰度） MDN文档： https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL Html2canvas 插件调研 star: 19.1K Html2canvas是调研的几款插件github star数最高的插件。 原理是将传入的HTML ---> canvas 再调用canvas.toDataURL转为image 问题 ： 此包问题较多，而最令人心碎的就是每个版本都有不同的坑，呈现的效果都不一样

队名：不等式方程组 组长博客 作业博客 团队项目进度 组员一：张逸杰（组长） 过去两天完成的任务： 文字/口头描述： 制定了初步的项目计划，并开始学习一些推荐、搜索类算法 GitHub签入纪录： 暂无 接下来的计划： 下一周督促负责前端的组员赶快完工，同时开始后端的编写 燃尽图： 还剩下哪些任务： 各模块编码、测试、项目管理同步推进、各模块完成后进行对接 实景测试反馈优化 根据测试反馈优化 遇到哪些困难： 队员对开发软件运用还不熟练 比较多队员没有java的基础，需要临时自学 调整时间安排表比较困难 有哪些收获和疑问： 收获： 可以和队友一起学习新的算法知识、数据库知识，自学了一些有关于团队管理方面的知识。 疑问： 都是一些技术上的疑问 组员二：林家伟 组员二：林家伟 过去两天完成的任务： 文字/口头描述： 完成了数据库的构建 学会了如何构建web框架和前后端交互 GitHub签入纪录： 暂无 接下来的计划： 燃尽图： -实现后端对数据库的操作，并将数据反馈给前端显示 还剩下哪些任务： 真正实现Web框架的构建 完成Python对数据库的操作 遇到哪些困难： 课程压力大，考试较多，时间不足 实践较多，很难进行时间安排 有哪些收获和疑问： 收获： 学会了python的Flask框架 疑问： 需要解决如何在渲染界面的同时完成数据加载 组员三：吴智勇 过去两天完成的任务： 文字/口头描述

队名：不等式方程组 组长博客 作业博客 团队项目进度 组员一：张逸杰（组长） 过去两天完成的任务： 文字/口头描述： 制定了初步的项目计划，并开始学习一些推荐、搜索类算法 GitHub签入纪录： 暂无 接下来的计划： 下一周督促负责前端的组员赶快完工，同时开始后端的编写 燃尽图： 还剩下哪些任务： 各模块编码、测试、项目管理同步推进、各模块完成后进行对接 实景测试反馈优化 根据测试反馈优化 遇到哪些困难： 队员对开发软件运用还不熟练 比较多队员没有java的基础，需要临时自学 调整时间安排表比较困难 有哪些收获和疑问： 收获： 可以和队友一起学习新的算法知识、数据库知识，自学了一些有关于团队管理方面的知识。 疑问： 都是一些技术上的疑问 组员二：林家伟 组员二：林家伟 过去两天完成的任务： 文字/口头描述： 完成了数据库的构建 学会了如何构建web框架和前后端交互 GitHub签入纪录： 暂无 接下来的计划： 燃尽图： -实现后端对数据库的操作，并将数据反馈给前端显示 还剩下哪些任务： 真正实现Web框架的构建 完成Python对数据库的操作 遇到哪些困难： 课程压力大，考试较多，时间不足 实践较多，很难进行时间安排 有哪些收获和疑问： 收获： 学会了python的Flask框架 疑问： 需要解决如何在渲染界面的同时完成数据加载 组员三：吴智勇 过去两天完成的任务： 文字/口头描述

队名：不等式方程组 组长博客 作业博客 团队项目进度 组员一：张逸杰（组长） 过去两天完成的任务： 文字/口头描述： 制定了初步的项目计划，并开始学习一些推荐、搜索类算法 GitHub签入纪录： 暂无 接下来的计划： 下一周督促负责前端的组员赶快完工，同时开始后端的编写 燃尽图： 还剩下哪些任务： 各模块编码、测试、项目管理同步推进、各模块完成后进行对接 实景测试反馈优化 根据测试反馈优化 遇到哪些困难： 队员对开发软件运用还不熟练 比较多队员没有java的基础，需要临时自学 调整时间安排表比较困难 有哪些收获和疑问： 收获： 可以和队友一起学习新的算法知识、数据库知识，自学了一些有关于团队管理方面的知识。 疑问： 都是一些技术上的疑问 组员二：林家伟 组员二：林家伟 过去两天完成的任务： 文字/口头描述： 完成了数据库的构建 学会了如何构建web框架和前后端交互 GitHub签入纪录： 暂无 接下来的计划： 燃尽图： -实现后端对数据库的操作，并将数据反馈给前端显示 还剩下哪些任务： 真正实现Web框架的构建 完成Python对数据库的操作 遇到哪些困难： 课程压力大，考试较多，时间不足 实践较多，很难进行时间安排 有哪些收获和疑问： 收获： 学会了python的Flask框架 疑问： 需要解决如何在渲染界面的同时完成数据加载 组员三：吴智勇 过去两天完成的任务： 文字/口头描述

壹 ❀ 引 早在大半年前，我在负责整理定义了前端组JavaScript开发规范与less、css样式开发规范。一直想将两个规范整理成文章，但在整理了JavaScript规范后，我花了较多的时间在学习JavaScript基础知识，所以对于样式规范一直处于放置状态。直到上周我收到了一条关于JavaScript规范的评论，提醒了我样式规范不能再拖了，那么在放假前花点时间整理一遍作为复习也算不错。 说在前面，本文虽然作为规范但对于less与css写法也给出了部分建议，所以在阅读本规范前建议读者先掌握less基本用法，而对于规范这里也只是给出建议，毕竟适合自己的才是最好的，本文开始。 贰 ❀ 命名规范 贰 ❀ 壹 class、id命名 JavaScript变量我们推荐使用小驼峰，但样式命名得做点改变，这里我们推荐使用 - 分隔符拼接。 /* good */ #foo-bar;.foo-bar /* bad */ #fooBar;.fooBar 贰 ❀ 贰 less变量命名 我们知道less提供了样式变量可供复用，对于多单词变量命名推荐采用 @ 开头并以 - 分隔符拼接的命名方式。 /* good */ @border-color:#fff; /* bad */ @borderColor: #fff; 贰 ❀ 叁 less函数命名 除了变量，less还提供了函数用于复用多属性class样式类

　　一曲肝肠断 ，天涯何处觅知音。 　　借用星爷电影的一句台词作为开篇，形容下自己的心境，年终将至，回首2019，也不算太亏欠自己，明年继续努力生长。 　　这是自己第一次在博客介绍自己，目前坐标长沙，三流大专，市场营销专业，是的，毫不相干的专业，也让我在转行前端途中吃了比一般人多一点的苦头，为什么转行呢，自然是找不到合适的工作，加上性格内敛，而且听说互联网高工资，考虑了两个多月，报了一家培训机构，学习大约半年（然而并未真正入门，虽然此前几乎每天熬夜学到凌晨），找了半个多月工作，只拿到一个offer，公司是做的是货运车GPS系统，去的时候公司之前的唯一一个前端已经离职三个多月，公司有两个后台java,一个.net，看来人家是实在没办法了才招的我 o(╥﹏╥)o。入职后我HTML和CSS相对熟练，写页面没太大困难，js非常困难，常常跑去问后台怎么写JQ，想想自己真是菜鸡，公司是前后端不分离，jsp后台渲染的模式，代码非常不规范，工作了近三个月，因为压力山大，加上没有人带，技术也没有任何成长，提出了离职。其实自己技术太菜才是主要原因，混不下去了。 　　而后消沉了一整子，也被女朋友嫌弃了好一阵子，心理着实难受，自己也不想继续这样，想想还是得继续工作啊，又重新捡起JS基础，闭包原型ES6，JQ重新学了一遍，vue刷了几遍视频，第二份工作自带运气buff成功入职一家中大型互联网企业

一、目标 1、提升开发速度 2、更好的响应需求变化 二、面临的问题 业务需求的变化是永恒的，而变化势必会引发代码的变化，新增代码或修改代码。 改动的地方越多，引入新的错误几率就越大。 三、应对思路 最小化原则，确保每次业务需求变化可以用最小的代价来完成。 1、视图模板化，组件化 2、逻辑代码对象化、版本化 3、事件传递参数化、代理化 四、架构模型 1、视图 2、逻辑与事件通信 视图层需要传递一组参数（对象名、方法名、方法需要的参数） 五、代码示例 //wxml代码 <view bindtap='bindViewEvent' data-model="user" data-method="sayhello" data-text="hi,nihao">sayhello</view> //js代码，page页里只有一个事件路由业务函数 bindViewEvent:function(e){ app.excute(this,e); } //app.js /* * 事件路由函数 */ excute:function(that,e){ new umitech(that,this.config).extend(e);//动态加载对象，并调用相关方法 } github示例代码 来源： 51CTO 作者： 沙耶博士 链接： https://blog.51cto.com/12008764/2142095

1. hidden hidden是一个布尔属性，表示当前的网页元素不再跟页面相关，因此浏览器不会渲染这个元素，所以就不会在网页中看到它。相当于display:none <p hidden>本句不会显示在页面上。</p> 2. contenteditable 允许用户修改内容 <p contenteditable="true"> 鼠标点击，本句内容可修改。 </p> 3. draggable 是否可以 使用 Drag and Drop API 拖动元素 <div draggable="true">按住鼠标左键拖动试试</div> 4. title 用来为元素添加附加说明。大多数浏览器中，鼠标悬浮在元素上面时，会将title属性值作为浮动提示，显示出来。 <div title="版权说明"> <p>本站内容使用创意共享许可证，可以自由使用。</p> </div> 专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划） 5. 事件处理属性 onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange,