webApp书城开发学习笔记

慕课网上的一个实战项目webApp书城整站开发，记录下学习的过程

webApp书城开发学习笔记

案例中的技术点

1.使用base64格式图片制作，参考【前端攻略】：玩转图片Base64编码

2.使用viewport布局移动端页面

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">

minimal-ui

属性，在网页加载时隐藏地址栏与导航栏

3.移动端性能陷阱和硬件加速

减少或避免repaint、reflow

尽量缓存可缓存的数据

使用CSS3的transform来代替dom操作，例如dom的动画和位移。

还有注意的点是：不要给非static元素使用增加css3动画

另外还可以适当使用硬件加速，使用手机的GPU来做页面的渲染，最简单的就是使用

canvas

画图片会触发硬件加速。如果不想使用

canvas

，在普通的展示层上使用硬件加速，可使用

transform

，所有使用css3的

transform

的变化都会被系统使用硬件加速，这时候不想做任何的变换，只想使用硬件加速可使用

transform: translate3d(0, 0, 0)

HTML5API和特性

1.使用

Web Workers

Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。

MDN介绍使用 Web Workers

2.跨域Ajax请求

跨源资源共享 (CORS)允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。启用此功能非常简单，只需由服务器发送一个响应标头即可。

//允许任何域向您提交请求
Access-Control-Allow-Origin: *

参考:

XMLHttpRequest2 新技巧

XMLHttpRequest Level 2 使用指南

3.HTML5触屏事件

Webkit内的触摸事件

事件名称	描述	包含touches数组
touchstart	触摸开始（用户把手指放在屏幕上）	是
touchmove	接触点改变（用户在屏幕上移动他的手指且手指不离开屏幕）	是
touchend	触摸结束（用户的手指离开屏幕）	是
touchcancel	触摸被取消（触摸被一些事情中断，比如通知）	否

介绍文章：

HTML5触摸事件

触摸事件

基本结构与实现

这实现页面结构的过程中，记录一些比较生疏的知识点

Meta标签中的

format-detection

format-detection

表示格式检查

在编写 HTML 时，有一个 meta 元素：这个页面有何用途呢？当该 HTML 页面在手机上浏览时，该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。

在 iPhone 上默认值是：

<meta name="format-detection" content="telephone=yes"/>

如果你不希望手机自动将网页中的电话号码显示为拨号的超链接，那么可以这样写：

<meta name="format-detection" content="telephone=no"/>

data-*属性

如在设置背景小圆圈时，使用data-*绑定了一些数据

<div class="bk-container" id="undefined" data-font="" data-bottomcolor="undefined" data-color="#a4a4a4" style="background-color:#a4a4a4">
<div class="bk-container-current" style="display: none;"></div>
<span style="display:none">浅灰</span>
</div>

data-*

属性允许我们在标准内于HTML元素中存储额外的信息，可参考Using data attributes中的介绍

本例使用的是

$("#test").data()

方式获取的

data-*

属性对应的值，如获取

data-font

值

var font = $(this).data('font');

另外需要注意的是，文档中关于

data(key)

的介绍：

Every attempt is made to convert the string to a JavaScript value (this includes booleans, numbers, objects, arrays, and null) otherwise it is left as a string.

jQuery 事件 - delegate() 方法

delegate()

方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

使用

delegate()

方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

语法

$(selector).delegate(childSelector,event,data,function)

如：

$("div").delegate("p","click",function(){
$(this).slideToggle();
});

数据请求与处理相关

由于需要跨域请求另一个站点的数据，所以使用使用了jquery-jsonp

很简单，就是利用

<script>

标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通讯的目的。当需要通讯时，本站脚本创建一个

<script>

元素，地址指向第三方的API网址，形如：

<script src="http://www.example.net/api?param1=1¶m2=2"></script>

并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。 第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如： callback({“name”:”hax”,”gender”:”Male”}) 这样浏览器会调用callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。 补充：“历史遗迹”的意思就是，如果在今天重新设计的话，也许就不会允许这样简单的跨域了嘿，比如可能像XHR一样按照CORS规范要求服务器发送特定的http头。

作者：贺师俊

链接：https://www.zhihu.com/question/19966531/answer/13502030

来源：知乎

jsonp原理：

JSONP

深入浅出JSONP–解决ajax跨域问题

返回的数据为base64编码过的，所以要解码，使用了jquery-base64

基本使用方式：

$.base64.encode( "this is a test" ) returns "dGhpcyBpcyBhIHRlc3Q="
$.base64.decode( "dGhpcyBpcyBhIHRlc3Q=" ) returns "this is a test"

在本例中，base64解码后的

data

数据为



其中包含中文字符，还需要进一步的处理

escape(data)

处理后的数据



再使用

decodeURIComponent(escape(data))

即可正常显示

escape()

函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。

url的三个js编码函数escape(),encodeURI(),encodeURIComponent()简介