前端技术介绍

前端技术介绍ANNUALWORKSUMMARYOFTHEINTERNET010203点击添加标题点击添加标题点击添加标题目录0102前端基础知识前端类库与框架1一.前端基础知识Clickheretoaddatitle前端技术的发展•Web前端开发是从网页制作演变而来的，早期的前端其实就是Table布局，后来发展到所谓的Div+CSS网站重构，再到现在的让人眼花缭乱的各种各样的新技术，Web前端技术发展是非常快速的。随着人们对用户体验的要求越来越高，前端开发的技术难度越来越大。•前端技术相对于后台技术，代码是开源的，前端用户使用的浏览器不可预知，而且前端技术更关注页面性能和用户体验前端开发的核心•前端开发的核心是HTML+CSS+JavaScript•原则：结构、表现、行为分离•通俗的讲，他们代表了“结构”、“表现”和“行为”。HTML决定网页的结构和内容，CSS用来设定网页的表现形式，JavaScript用来控制网页的行为•本质上它们构成一个MVC框架，即HTML作为信息模型（Model），CSS控制样式（View），JavaScript负责调度数据和实现某种展现逻辑（Controller）。WEB三项组成-结构•HTML/XHTML/XML•html：超文本标记语言•xml：可扩展标记语言•xhtml：可扩展超文本标记语言•HTML•用于将普通文本转化为活动文本以便显示在Web上，并为普通的无结构文本提供结构•由一些称为标签的经过编码的标记符组成，标签包围着文本，并且标明所标记文本的功能和用途。标签直接嵌入普通文本文档中，并在计算机处理文档的时候得以理解。标签自身不会显示。WEB三项组成-结构•HTML5：最新一代的超文本标记语言•可以简单点理解成：h5≈html+CSS3+js+API。•html:没有体现结构语义化的标签，我们通常都是这样来命名的divid=header/div.这样表示网站的头部。•html5:在语义上却有很大的优势。提供了一些新的标签，比如:headerarticlefooter•提供了语义化标签可以更好地支持搜索引擎的读取便于seo的蜘蛛的爬行。WEB三项组成--表现•CSS层叠样式表：是一种用来表现HTML或XML等文件样式的计算机语言•CSS3是CSS（层叠样式表）技术的升级版本，CSS3规范的一个新特点是被分为若干个相互独立的模块。分成若干较小的模块较利于规范及时更新和发布，及时调整模块的内容。WEB三项组成-行为•JavaScript•是一门运行在客户端（浏览器）的脚本语言•边解释边执行•实现了网页实时的、动态的、可交互的表达能力浏览器兼容性问题-JavaScript引擎•JavaScript引擎是一个专门处理JavaScript脚本的虚拟机，附在浏览器中•“读懂”JavaScript代码，并准确地给出代码运行结果的一段程序。•一般情况下JavaScript引擎都是浏览器开发商自行开发的。•各大浏览器对W3C标准的支持程度不同，因此，在CSS样式、DOM操作、XML解析等操作上存在很多兼容性问题•由于浏览器的js引擎不同，导致js的各种兼容性问题浏览器兼容性问题-浏览器与内核•目前最为主流浏览器有五大款，分别是IE、Firefox、GoogleChrome、Safari、Opera•四大内核分别是：Trident（也称IE内核）、webkit、Blink、Gecko•五大浏览器采用的都是单内核•随着浏览器的发展现在也出现了双内核。像360浏览器、QQ浏览器都是采用双内核。浏览器兼容性问题-浏览器与内核对应列表•1、IE浏览器内核：Trident内核，也是俗称的IE内核；•2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；•3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；•4、Safari浏览器内核：Webkit内核；•5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；•6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；•7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；•8、百度浏览器、世界之窗内核：IE内核1二.前端类库与框架介绍Clickheretoaddatitle二.前端类库与框架什么是类库和框架•类库•类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等•框架•框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：augular.js等。•任何框架和库的出现，都是为了满足我们日常开发的效率和设计，是对已有方式的一种改进和补充BootStrap•Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。•Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。•响应式布局•响应式布局简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。Vue.js•Vue.js是一个构建数据驱动的web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件•它可通过script标签添加到HTML页面，就可以使用Vue.js了。Vue示例js文件html文件运行结果代码解读•Vue采用简洁的模板语法来声明式地将数据渲染进DOM的系统•本例中，数据和DOM已经被建立了关联，所有东西都是响应式的。•打开你的浏览器的JavaScript控制台(就在这个页面打开)，并修改app.message的值，你将看到上例相应地更新。app.message='bocins'•响应式编程•是一种面向数据流和变化传播的编程范式。这意味着可以在编程语言中很方便地表达静态或动态的数据流，而相关的计算模型会自动将变化的值通过数据流进行传播。例如，在命令式编程环境中，a:=b+c表示将表达式的结果赋给a，而之后改变b或c的值不会影响a。但在响应式编程中，a的值会随着b或c的更新而更新。THANKYOU•THANKFORYOUWATCHING