欢迎使用CSDN-markdown编辑器

最新推荐文章于 2019-03-26 05:59:35 发布

大大超超

最新推荐文章于 2019-03-26 05:59:35 发布

阅读量638

点赞数 1

分类专栏： JavaScript 文章标签： markdown

本文链接：https://blog.csdn.net/ymjring/article/details/45621051

版权

JavaScript 专栏收录该内容

84 篇文章 0 订阅

订阅专栏

原生Ajax实现

var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    console.log(xmlhttp.statusText);
  }
}
xmlhttp.onerror = function(){...};
xmlhttp.onmessage = function(){...};
xmlhttp.onload = function(){...};
xmlhttp.send();

meta

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

HTTP TCP链接流程

发送请求（请求/头/内容）-接收应答（应答/头/内容）-关闭TCP链接（connection:keep-alive）

跨域的几种解决方案

JSONP/document.domain/window.name/access-control-allow-origin/html5: window.postMessage()/hash/flash

之前碰到的一个客户实现的根据设备自动跳转页面的例子

<link rel="alternate" href="/ch/mobile/content/de/home.html" id="mobile" media="only screen and (min-device-width : 320px) and (max-device-width : 1024px) and (-webkit-max-device-pixel-ratio: 1), (min-device-width : 320px) and (max-device-width : 640px) and (-webkit-min-device-pixel-ratio: 1.5)">
<link rel="alternate" href="/ch/content/de/home.html" id="desktop" media="only screen and (touch-enabled: 0)">

css文字溢出处理

textoverflow: clip/ellipsis;
overflow: hidden;

viewport是设置虚拟窗口能显示的尺寸大小
requestAnimationFrame动画支持
得到某个对象的字节数: unescape(encodedURIComponent(JSON.stringify(obj))).length
很久前的一个面试题(递归拼最大)：首先判断长度，以长度相等作为结束点。
IE下兼容inline-block的两个方法：

1. 先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）
div {display:inline-block;...} 
div {display:inline;}
2. 直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。代码如下：
div {display:inline; zoom:1;...}

img元素中设置width和height属性时，如果用CSS又设置了新的值，那么以CSS值为准
map

<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

Table中有border-collapse时会忽略border-spacing（间距）
设置页面中链接及资源的base url，在head元素里添加：
<base href="http://www.w3schools.com/images/" target="_blank">

-XHTML

Document Structure
XHTML DOCTYPE is mandatory
The xmlns attribute in <html> is mandatory
<html>, <head>, <title>, and <body> are mandatory
XHTML Elements
XHTML elements must be properly nested
XHTML elements must always be closed
XHTML elements must be in lowercase
XHTML documents must have one root element
XHTML Attributes
Attribute names must be in lower case
Attribute values must be quoted
Attribute minimization is forbidden

a标签伪选择器的顺序：

link-visited-hover-actived（LVHA）

box model

默认设置高宽时是设置内容的高宽，元素高宽要加上padding border margin
兼容：IE8及以前的IE设置高宽时是连同padding和border的，To fix this problem, add a <!DOCTYPE html> to the HTML page.

position是static时不能设置元素的位置
Yahoo页面优化34黄金准则/YSlow/PageSpeed
关于float

float：浮动，对块级元素，只对它后面的元素起作用，前面的元素没有影响。clear: right的元素不会处在float:right的元素旁边，影响的是自己而不是float的元素。
inline：设置元素的显示类型，但是不会改变元素自身的类型，如inline元素设置为block属性还是不能包含块级元素。

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
锚点

用name和id都可以，但是name只能用在a上，id可以用在任何元素。HTML取消了a元素上的name，所以尽量用id。
name：<a name="here"></a>
id：<anytag id="here"></anytag>

前端页面优化

net/content: http dns redirect cdn domain
min-cookie
css/js: top/bottom external min combine  no-import css sprite
img:  png optimize  no-scale different size  dataurl
事件代理  缓存ele  事件解绑

关于readyState

Document 
One of five values:
uninitialized - Has not started loading yet
loading - Is loading
loaded - Has been loaded
interactive - Has loaded enough and the user can interact with it
complete - Fully loaded
Http
0   UNSENT  open()has not been called yet.
1   OPENED  send()has not been called yet.
2   HEADERS_RECEIVED    send() has been called, and headers and status are available.
3   LOADING Downloading; responseText holds partial data.
4   DONE    The operation is complete.

正则表达式

email: /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
trim: /(^\s*)|(\s*$)/g

arguments得到function的传值

大大超超

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
欢迎使用CSDN-markdown编辑器

原生Ajax实现var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLH
复制链接

扫一扫