前端开发 | 易学教程

前端基础之JavaScript

阅读更多关于前端基础之JavaScript

JavaScript概述 ECMAScript和JavaScript的关系 1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。 ECMAScript的历史年份名称描述 1997 ECMAScript 1 第一个版本 1998 ECMAScript 2 版本变更 1999 ECMAScript 3 添加正则表达式添加try/catch ECMAScript 4 没有发布 2009 ECMAScript 5 添加"strict mode"严格模式添加JSON支持 2011 ECMAScript 5.1 版本变更 2015 ECMAScript 6

【华为云技术分享】大前端的自动化工厂— babel

阅读更多关于【华为云技术分享】大前端的自动化工厂— babel

一. 关于babel babel是ES6+语法的编译器，用于将旧版本浏览器无法识别的语法和特性转换成为ES5语法，使代码能够适用更多环境。最初的babel使用起来是非常方便的，几乎仅使用少量的配置就可以使用，但随着工具的快速升级和代码架构的转变，babel已经裂变成非常多的部分，每个部分各司其职，这样做的好处是可以缩小生产环境的正式包的代码体积（因为可以按需引用）而加重了开发环境（开发阶段需要引入更多碎片化的插件），但劣势就是将其使用门槛提得非常高，对软件架构不熟悉的开发者难以使用。比如babel官方网站在webpack配置的章节，提及了babe-loader,babel-core和babel-preset-env三个插件，而当开发者在webpack中实际进行配置时除了上述三个基本插件外，又会遇到babel-polyfill,babel-runtime,babel-plugin-transform-runtime等等一系列插件，或许通过查看插件说明能够理解插件的功能，但开发者却很难判断自己是否该使用这个功能或者什么时候使用。二. 基本需求推演我们从工具设计的角度，通过问题推演的方式来看看 babel 的变化。在 ES6 标准推出时，浏览器还不能很好地支持，但 ES6 的许多特性和语法又很诱人，所以大家想了个办法，那就是用 ES6 编写代码，然后出包的时候拿个工具转换一下

如何学习前端？前端学习路线总结

阅读更多关于如何学习前端？前端学习路线总结

随着多屏互动和多端兼容友好的界面变得越来与重要，前端工程师也成为了热门的研发技术岗位之一。随着就业市场大环境的改变，一方面是前端人才的紧缺，另一方面是对前端求职者的要求增高，所以我们需要学的东西也不能仅仅只停留在基础层面。那么，我们应该如何学习前端呢？下面为大家总结了一条前端学习路线，大家可以参考一下。 1、 CSS和HTML 刚入门的朋友，应该把重点放在 CSS和 HTML基础知识的学习上。关于 CSS(3) 你需要了解以下一些知识点： web标准、 HTML相关概念、 HTML标签、路径相关概念、锚点及其他、表格标签、表单标签、综合案例，注册页面、 CSS选择、 CSS字体样、 CSS外观属性、调式、 CSS复合选择器、标签显示模式、 CSS背景、 CSS三大特性等等。总的来讲， CSS和 HTML的学习还是比较简单的。 2、 JavaScript JavaScript一直都是前端工程师进步的基石， JavaScript 的理解深度决定了前端开发者的职业发展。关于 JavaScript的学习内容包括了浏览器执行 JS过程、 JS变量、数据类型、运算符、流程控制语句（ if else 、三元表达式、 switch）、循环（ for、 while、 do while）、数组、冒泡排序、函数、作用域、预解析、对象、内置对象、简单类型和复杂类型等。只有在熟悉了

前端优化带来的思考，浅谈前端工程化

阅读更多关于前端优化带来的思考，浅谈前端工程化

这段时间对项目做了一次整体的优化，全站有了20%左右的提升（本来载入速度已经1.2S左右了，优化度很低），算一算已经做了四轮的全站性能优化了，回顾几次的优化手段，基本上几个字就能说清楚：传输层面：减少请求数，降低请求量执行层面：减少重绘&回流传输层面的从来都是优化的核心点，而这个层面的优化要对浏览器有一个基本的认识，比如： ① 网页自上而下的解析渲染，边解析边渲染，页面内CSS文件会阻塞渲染，异步CSS文件会导致回流 ② 浏览器在document下载结束会检测静态资源，新开线程下载（有并发上限），在带宽限制的条件下，无序并发会导致主资源速度下降，从而影响首屏渲染 ③ 浏览器缓存可用时会使用缓存资源，这个时候可以避免请求体的传输，对性能有极大提高衡量性能的重要指标为首屏载入速度（指页面可以看见，不一定可交互），影响首屏的最大因素为请求，所以请求是页面真正的杀手，一般来说我们会做这些优化：减少请求数 ① 合并样式、脚本文件 ② 合并背景图片 ③ CSS3图标、Icon Font 降低请求量 ① 开启GZip ② 优化静态资源，jQuery->Zepto、阉割IScroll、去除冗余代码 ③ 图片无损压缩 ④ 图片延迟加载 ⑤ 减少Cookie携带很多时候，我们也会采用类似“时间换空间、空间换时间”的做法，比如： ① 缓存为王，对更新较缓慢的资源&接口做缓存（浏览器缓存

前端HTML基础知识学什么？

阅读更多关于前端HTML基础知识学什么？

前端HTML基础知识学什么？初学HTML从基础知识入手，学习浏览器内核、HTML基本结构标签、HTML语法规范、VSCode编辑器、HTML常用标签、相对路径、锚点定位、表格、列表、表单等内容。前端HTML基础知识学习路线： 1 浏览器与浏览器内核　　HTML 简介导读　　网页的相关概念　　常用浏览器以及内核　　web标准　　 HTML标签导读　　2 HTML基本结构　　HTML语法规范　　HTML基本结构标签　　VSCode工具创建页面　　DOCTYPE和lang以及字符集的作用　　标签语义　　3 HTML常用标签　　标题标签　　段落标签和换行标签　　体育新闻案例　　文本格式化标签　　div和span标签　　图像标签　　图像标签注意点　　4 路径和锚点定位　　目录文件夹和根目录　　相对路径　　绝对路径　　链接标签　　锚点链接　　注释标签和特殊字符　　5 HTML 综合案例　　6 表格和列表标签及案例　　HTML标签　　表格标签基本使用　　表头单元格标签　　表格相关属性(了解) 　　小说排行榜案例　　表格结构标签　　合并单元格　　表格总结　　无序列表有序列表自定义列表　　列表总结　　7 表单相关元素及属性　　表单使用场景以及分类　　表单域　　input之type属性文本框和密码框　

前端 -- javas-基本语法/引用等

阅读更多关于前端 -- javas-基本语法/引用等

javas-基本语法/引用等 JavaScript介绍 JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等。 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript 微软随后模仿在其IE3.0的产品中搭载了一个JavaScript的克隆版叫Jscript. 为了统一三家,ECMA(欧洲计算机制造协会)定义了ECMA-262规范.国际标准化组织及国际电工委员会（ISO/IEC）也采纳 ECMAScript 作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同的程度的成功和失败）将 ECMAScript 作为 JavaScript 实现的基础。EcmaScript是规范. 前端三大块 1

JavaScript 进阶（一）JS的\"多线程\"

阅读更多关于 JavaScript 进阶（一）JS的\"多线程\"

这个系列的文章名为“JavaScript 进阶”，内容涉及JS中容易忽略但是很有用的，偏JS底层的，以及复杂项目中的JS的实践。主要来源于我几年的开发过程中遇到的问题。小弟第一次写博客，写的不好的地方请诸位斧正，觉得还有一些阅读价值的请帮忙分享下。这个“JavaScript 进阶”是一个系列文章，请大家鼓励鼓励，我尽快更新。另外，如果你有比较好的话题，也可以在下面评论，我们一起研究提高。 JS是多线程的吗？多线程编程相信大家都很熟悉，比如在界面开发中，如果一个事件的响应需要较长时间，那么一般做法就是把事件处理程序写在另外一个线程中，在处理过程中，在界面上面显示类似进度条的元素。这样界面就不会卡住，并且能够显示任务执行进度。记得刚开始做前端的时候，老板交代在界面上面做一个定时器，每秒更新用户的在线时间。当时拥有Java和C++开发经验的我自信满满的说我加一个线程就可以分分钟搞定了。所以查阅文档，发现setTimeout和setInterval可以很方便的实现该功能。那时候我就认为这就是JS中的多线程。setTimeout相当于启动一个线程，等待一段时间后执行函数，setInterval则是在另外的一个线程中，每隔一段时间执行函数。这个观念在我的头脑中存在了一年左右，直到遇到了这样的一个问题。测试人员发现一个按钮的点击响应时间较长，在响应过程中，界面卡住了

准备转行web前端，该怎么从头学好？

阅读更多关于准备转行web前端，该怎么从头学好？

web前端的薪资是让大多数人所向往的，如果一个项目能胜任得很好的话那么就业便跟学历无关了，是真正看技术的一份工作。据统计：web前端开发工程师平均月薪10400。按照工作经验来统计的计算的话，应届生工资4280，1-3年工资8770，3-5年工资12910，5-10年工资19730。从这薪资可以看出，程序员的确是一个高薪行业啊。学习Web前端开发应该从基础的Html开始学起，学习Html还是比较简单的，主要是理解并记住一些常见标签的使用，在学习的初期应该多动手敲一下代码，这样会加深理解。在学习完Html语法之后，需要学习CSS，CSS的内容也并不复杂，CSS主要解决Html中样式设计的问题和复用的问题。接着应该系统的学习一下JavaScript，JavaScript语言自身还是具有一定难度的，而且JavaScript涵盖的内容比较多，需要一个较为系统的学习过程才能逐渐掌握。 HTML是构成网页的骨架，所有的信息显示都要靠HTML实现。一个网页可以没有CSS代码，没有JavaScript代码，但绝对不能没有HTML代码，HTML是web页面的核心。现在HTML发展到了HTML5，新版本增加了很多特性，使得HTML功能更加完善。 CSS在一个网页中起到的作用就像是一个化妆师，它可以让网页变的更加漂亮，更加易于浏览阅读。一个看脸的时代，CSS就是网页的化妆师

AngularJS从构建项目开始

阅读更多关于 AngularJS从构建项目开始

AngularJS体验式编程系列文章，将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，MVC，模板。Angular.js创新地把后台技术融入前端开发，扫去jQuery一度的光芒。用angularjs就像写后台代码，更规范，更结构化，更可控。关于作者张丹(Conan), 程序员Java,R,PHP,Javascript weibo：@Conan_Z blog: http://blog.fens.me email: bsspirit@gmail.com 转载请注明出处： http://blog.fens.me/angularjs-yeoman-project/ 前言随着AngularJS被越来越多的开发人员所了解，AngularJS的应用受到市场的好评。AngularJS是一种新型的以Javascript为基础的框架，以后台的编程思路影响着web前端的开发。在扎根细节之前，让我们先了解AngularJS项目构架。自顶向下的开始，就是不一样的开发。Angular体验式编程从此开始。目录 AngularJS介绍构建AngularJS项目（Yeoman，angular-seed）