1.页面在移动端及其它主流浏览器上保持良好的兼容性
Zepto 是一个轻量级的 JS 库,从当初 2~5k 大小到正式发布,仍保持不到 10k 的体积,能减少下载和与运行时间;兼容大多数移动浏览器和主流桌面现代浏览器,支持 Detect 和
Touch 模块实现浏览器检测和触屏事件,对 PhoneGap、Firefox OS 等浏览器环境的 WebApps 支持更加友好。Zepto 借鉴了 jQuery 的语法并实现了 jQuery 的大部分功能,减少学习成本,
会 jQuery 就知道怎么用 Zepto。
2.css3动画
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式
把它绑定到一个选择器,否则动画不会有任何效果。animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、
animation-direction;
3.浏览器的兼容性问题
(1)浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同;
(2)浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大;解决方案:在这个div里面加上display:inline;
(3)浏览器兼容问题五:图片默认有间距;解决方案:使用float属性为img布局
(4)浏览器兼容问题六:标签最低高度设置min-height不兼容;解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !
important; height:200px; overflow:visible;}
(5)浏览器兼容问题七:透明度的兼容CSS设置;IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 FF:opacity:0.6。
4.HTML5
(1)新标签:header、nav、progress、section、source、embed、video;
(2)新的控件:email、url、number、range、date、search、color;
(3)多媒体音视频;
(4)拖拽:首先,为了使元素可拖动,把 draggable 属性设置为 true
拖动什么 - ondragstart 和 setData()
放到何处 - ondragover默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式
进行放置 - ondrop
(5)画布:canvas 元素使用 JavaScript 在网页上绘制图像
创建 Canvas 元素
JavaScript 使用 id 来寻找 canvas 元素
然后,创建 context 对象
线条、圆形、渐变、图像
(6)svg:可伸缩矢量图形,SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失,可伸缩的,
把 SVG 直接嵌入 HTML 页面;
(7)地理定位: Geolocation(地理定位)用于定位用户的位置。
navigator.geolocation支持性检测;
使用 getCurrentPosition() 方法来获得用户的位置,getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数
如需在地图中显示结果,您需要访问可使用经纬度的地图服务,比如谷歌地图或百度地图
watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置,clearWatch() - 停止 watchPosition() 方法
(8)Web存储:在客户端存储数据的新方法
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
(9)应用缓存:创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本;
如需启用应用程序缓存,请在文档的 标签中包含 manifest 属性,请注意,manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web
服务器上进行配置
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面
(10)web workers是运行在后台的 JavaScript,不会影响页面的性能;
在创建 web worker 之前,请检测用户的浏览器是否支持它
创建 web worker 文件
创建一个新的 web worker 对象,然后运行 "demo_workers.js" 中的代码
向 web worker 添加一个 "onmessage" 事件监听器,event.data 中存有来自 event.data 的数据
终止 Web Worker,terminate() 方法
8.css3
(1)边框:border-radius、box-shadow、border-image
(2)背景:background-size、background-origin
(3)文字效果:text-shadow、word-wrap允许对长的不可分割的单词进行分割并换行到下一行;
(4)字体:@font-face;
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
(5)转换:对元素进行移动、缩放、转动、拉长或拉伸;translate()、rotate()、scale()、skew()
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
(6)过渡:当元素从一种样式变换为另一种样式时为元素添加效果
div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
CSS 属性改变的典型时间是鼠标指针位于元素上时
如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开
(7)动画:@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果
@keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果
animation: myfirst 5s linear 2s infinite alternate;
(8)box-sizing:属性允许您以确切的方式定义适应某个区域的具体内容。
vuejs:
(1)Vue.js是JavaScript MVVM(Model-View-ViewModel)库,十分简洁,Vue核心只关注视图层,相对AngularJS提供更加简洁、易于理解的API。Vue尽可能通过简单的API实现响应
的数据绑定和组合的视图组件
(2)特点:数据驱动、组件化、轻量、模板友好(可通过npm安装)
(3)声明式渲染:HTML模板(View)+Json数据(Model)+Vue实例(ViewModel)组成。创建Vue的实例,需传入一个选项对象,如:数据、挂载元素、方法、模生命周期钩子等。
(4)双向绑定:在Vue中使用v-model在表单元素上实现双向绑定。当在输入框输入的信息发生变化,
...
中的信息随之变化;当通过控制台中的Console,修改
exampleData.message的值,输入框中的信息也随之变化。
(5)常用指令:v-if、v-show、v-for、v-bind、v-on、
9.webpack:
(1)webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应
用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只有一个,由浏览器加载。
(2)它是高度可配置的,但是,在开始前你需要先理解四个核心概念:入口(entry)、输出(output)、loader、插件(plugins)。
(3)webpack 创建应用程序所有依赖的关系图(dependency graph)。图的起点被称之为入口起点(entry point)。入口起点高速 webpack 从哪里开始,并根据依赖关系图确定需要打
包的内容。可以将应用程序的入口起点认为是根上下文(contextual root) 或 app 第一个启动文件。
(4)将所有的资源(assets)归拢在一起后,还需要告诉 webpack 在哪里打包应用程序。webpack 的 output 属性描述了如何处理归拢在一起的代码(bundled code)
(5)webpack 把每个文件(.css, .html, .scss, .jpg, etc.) 都作为模块处理
在更高层面,在 webpack 的配置中 loader 有两个目标。
识别出(identify)应该被对应的 loader 进行转换(transform)的那些文件。(test 属性)
转换这些文件,从而使其能够被添加到依赖图中(并且最终添加到 bundle 中)(use 属性)
(6)然而由于 loader 仅在每个文件的基础上执行转换,而 插件(plugins) 更常用于(但不限于)在打包模块的 “compilation” 和 “chunk” 生命周期执行操作和自定义功能
;
想要使用一个插件,你只需要 require() 它,然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用
同一个插件,这时需要通过使用 new 来创建它的一个实例。
10.ES6:
(1)在使用时仍然需要经过babel编译。
(2)一、新的变量声明方式 let/const;使用let来声明一个值会被改变的变量,而使用const来声明一个值不会被改变的变量,也可以称之为常量。
(3)二、 箭头函数的使用
// es5
var fn = function(a, b) {
return a + b;
}
// es6 箭头函数写法,当函数直接被return时,可以省略函数体的括号
const fn = (a, b) => a + b;
箭头函数可以替换函数表达式,但是不能替换函数声明
箭头函数中,没有this。如果你在箭头函数中使用了this,那么该this一定就是外层的this。
也正是因为箭头函数中没有this,因此我们也就无从谈起用call/apply/bind来改变this指向。
(4)模板字符串是为了解决使用+号拼接字符串的不便利而出现的。
// es6
const a = 20;
const b = 30;
const string = `${a}+${b}=${a+b}`;
// es5
var a = 20;
var b = 30;
var string = a + "+" + b + "=" + (a + b);
使用 `` 将整个字符串包裹起来,而在其中使用 ${} 来包裹一个变量或者一个表达式
(5)解析结构:
数组与序列号一一对应,这是一个有序的对应关系。
而对象根据属性名一一对应,这是一个无序的对应关系。
根据这个特性,使用解析结构从对象中获取属性值更加具有可用性。
(6)函数默认参数:
function add(x = 20, y = 30) { return x + y; } console.log(add());
(7)展开运算符:
(8)对象字面量 与 class
当属性与值的变量同名时
const name = 'Jane'; const age = 20 // es6 const person = { name, age } // es5 var person = { name: name, age: age };
在一个模块对外提供接口时
(9)Promise
const getName = () => person.name; const getAge = () => person.age;// commonJS的方式module.exports = { getName, getAge } // ES6 modules的方式 export default { getName, getAge } ES6为我们创建对象提供了新的语法糖,这就是Class语法。 // ES5 // 构造函数function Person(name, age) { this.name = name; this.age = age;}// 原型方法 Person.prototype.getName = function() { return this.name}// ES6 class Person { constructor(name, age) { // 构造函数 this.name = name; this.age = age; } getName() { // 原型方法 return this.name }}
11.组件和模块划分:组件强调复用,模块强调职责(内聚、分离),或者说组件是达到可复用要求的模块;
12.性能优化:(1)html结构语义化;(2)css,js文件数量及大小的优化;(3)背景图片数量及大小的优化;(4)把样式表置于顶部,把脚本置于页面底部,避免使用 CSS 表达式(Expression),使用外部 JavaScript 和 CSS,削减 JavaScript 和 CSS,用 代替 @import,避免使用滤镜,剔除重复脚本,减少DOM访问;
13.表现和数据分离:表现和数据分离就是javascript中的MVC,将数据的获取与数据的显示分离,表现和数据分离就是javascript控制数据填充,html负责表现;
14.web语义化:Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让任何搜索引擎都容易理解。
15.面相对性编程思想: 采用封装、继承、抽象等设计方法,用this给对象添加属性,prototype添加方法;
16.浏览器的渲染机制:
(1、浏览器请求到HTML代码后,在生成DOM的最开始阶段并行发起css、图片、js的请求,无论他们是否在HEAD里。
2、CSS文件下载完成,开始构建CSSOM
3、所有CSS文件下载完成,CSSOM构建结束后,和 DOM 一起生成 Render Tree。
4、下一步操作称之为Layout,顾名思义就是计算出每个节点在屏幕中的位置。
5、就进入了最后一步:Painting,按照算出来的规则,通过显卡,把内容画到屏幕上。
Layout 和 Painting 也会被重复执行,除了DOM、CSSOM更新的原因外,图片下载完成后也需要调用Layout 和 Painting来更新网页。)
17、微信小程序开发
(1)最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件
(2)app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。
(3)app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。
(4)app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
18.微信小程序框架
(1)框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统
(2)响应的数据绑定:框架的核心是一个响应的数据绑定系统。
整个系统分为两块视图层(View)和逻辑层(App Service)。框架可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新
(3)页面管理:框架 管理了整个小程序的页面路由,可以做到页面间的无缝切换,并给予页面完整的生命周期。开发者需要做的只是将页面的数据,方法,生命周期函数注册进 框架 中,其他的一切复杂的操作都交由 框架 处理。
(4)基础组件:一套基础的组件,这些组件自带微信风格的样式以及特殊的逻辑,开发者可以通过组合基础组件,创建出强大的微信小程序 。
(5)丰富的API:提供丰富的微信原生 API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。
19.微信小程序文件结构
(1)小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
(2)一个小程序主体部分由三个文件组成,必须放在项目的根目录,是 app.js、app.json、app.wxss 这三个;
(3)一个小程序页面由四个文件组成js、wxml、wxss、josn(页面配置);(注意:为了方便开发者减少配置项,我们规定描述页面的这四个文件必须具有相同的路径与文件名。)
20.微信小程序配置
(1)使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
(2)pages:接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息,数组的第一项代表小程序的初始页面。小程序中新增/减少页面,都需要对 pages 数组进行修改。文件名不需要写文件后缀,因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。
![2cdcca1dd7deb236cd543494bc05ba50.png](https://i-blog.csdnimg.cn/blog_migrate/647e9ffc400a5b7f5927ba383f66ca8e.jpeg)