js高级

一、项目迭代涉及到的问题：

重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随重排。

重排是更明显的一种改变，可以理解为渲染树需要重新计算。

重构就是通过调整程序代码改善软件的质量、性能，使其程序的设计模式和架构更趋合理，提高软件的扩展性和维护性。

二、购物车的实现步骤：

思路：

第一步：获取所要操作的节点对象

第二步：当页面加载完后，需要计算本地cookie存了多少【个】商品，把个数赋值给ccount(总数量)

第三步：为每一个商品对应的添加购物车按钮绑定一个点击事件onclick

更改本地的cookie

获取当前商品的pid

循环遍历本地的cookie转换后的数组，取出每一个对象的pid进行对比，若相等则该商品不是第一次添加

从购物车中取出该商品，然后更pCount值追加1

否则：创建一个新的对象，保存到购物中。同时该商品的数量为1

三、组件化模块化：

模块化中的模块一般指的是javascript的模块

组件则包含了 template、style 和 script，而它的 Script 可以由各种模块组成。比如一个显示时间的组件会调用上面的那个格式化时间的模块

四、优化：

如何对网站的文件和资源进行优化?

文件合并

(目的是减少 http 请求):Web 性能优化最佳实践中最重要的一条是减少 HTTP 请求,它也是 YSlow 中比重最大的一条规则(YSlow 是雅虎发布的基于 firefox 的网站性能平分工具,共 23 条规则).减少 HTTP 请求的方案主要有合并 JavaScript 和 CSS 文件、CSS Sprites、图像映射 (Image Map,一幅图中多个区域指定不同 url)、使用 Data URI 来编码图片(包含页面但无需额外 http 请求的 url,IE 不支持)、字体图标(将所有图标打包成字体库,减少请求;具有矢量性,可保证清晰度;使用灵活,便于维护,@font-face 声明字体)

文件最小化/文件压缩:

目的是直接减少文件下载的体积

使用 CDN(内容分发网络) 托管:

其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定.通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN 系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服

务节点上

缓存的使用:

多个域名提供缓存

五、用户名和密码的保存问题：

存在cookie里面

setCookie(cname, cvalue, exdays)三个参数分别是存放的cookie名字、cookie值、cookie有效天数

如果你选择记住密码的话,就会调用setcookie方法

记住密码

if($('#rememberMe').is(':checked')){

setCookie('customername', $('#username').val().trim(), 7)

setCookie('customerpass', $('#password').val().trim(), 7)

}

进入登录界面后，判断cookie中是否有帐号密码，如果有就自动填充

$(function(){

//获取cookie

var cusername = getCookie('customername');

var cpassword = getCookie('customerpass');

if(cusername != "" && cpassword != ""){

$("#username").val(cusername);

$("#password").val(cpassword);

}

}

六、常见兼容问题：

问题:块级元素 float 后设置横向 margin,ie6 显示的 margin 比设置的较大.

解决:给块级元素设置_display:inline;(_ 只有 ie6 能识别)

问题:在IE7中两个div是紧挨着的,但是在IE6中会出现两个div之间出现3px左右的间隙,这就是传说中的"IE 3px bug".

解决:这是由于使用 float 引起的使用 dislpay:inline -3px 可以解决.

浏览器默认的 margin 和 padding 不同.

解决: 加一个全局的 *{ margin:0; padding:0;} 或者 css 初始化

问题:父元素有定位,子元素即便设置 z-index 为多少,都会显示在最上面.

解决:那是因为 z-index 是有继承的.父元素有定位,默认 z-index 为 1.那么子元素也就 z-index 为 1. 要想改变,就得给父元素设置 position:relative,后再设置 z-index.

七、BOM常用对象：

对象:window、document、location、screen、history、navigator

方法:alert()、confirm()、prompt()、open()、close() console.log()

history 对象是用来把窗口的浏览历史用文档和文档状态列表的形式表示

back()与 forward()与浏览器的"后退","前进"功能.

history.go(-2)===>后退两个历史记录;

location 对象是解析 URL,

location.search 问号加上后面的内容,类型为字符串.如果 url 地址没有问号,则返回空字符串""

location.hash 返回的是锚点.#号及后面的内容,类型是字符串

location.reload() 重新加载页面

location.replace() 本窗口载入新文档

location.assign() 本窗口载入新文档

navigator 浏览器

navigator.appName Web 浏览器全称 Netscape

navigator.appVersion Web 浏览器厂商和版本的详细字符串

navigator.userAgent 客户端绝大部分信息

navigator.platform 浏览器运行所在的操作系统

screen 窗口

screen.availWidth 可用的屏幕宽度

screen.availHeigh 可用的屏幕高度