[前端基础] 前端开发基础整理(基础篇)

1.0 前端代码高亮

        曾经在做node博客的时候在网上找过很多代码高亮相关的js插件，其中从个人审美角度更喜欢Primjs的代码风格。Prism.JS是目前最为轻量级的JavaScript代码高亮插件，他压缩后只有2KB的大小，Prism.JS也支持大部分流行的编程语言，并且支持多种主题样式，开发者只需要引用CSS文件和JS文件即可完成。

 
 
 window.onload = function(){
    var clientHeight = document.documentElement.clientHeight||window.innerHeight;
    var obj = getClass("lazyLoad"),len = obj.length;
//获取图片相对与document的坐标
    function getPosition(obj){
        var pos = {top:0,left:0};
            if(obj){
                pos.top = obj.offsetTop;
                pos.left = obj.offsetLeft;
                obj = obj.offsetParent;
            }
        return pos;
    }
通过类名获取元素数组
    function getClass(className,parentNode){
        var arr = [ ],node = null;
        if(parentNode!=undefined){
            node = document;
        }else{
            node = parentNode;
        }
        var tags = parentNode.getElementsByTagName("*");
        for(var i =0;i
 
 
 
  
 
   
 
     
   
 
  
 
  

    图片懒加载演示.gif 
  
 
 
 
 
 
 
       这是在滚动鼠标滚轮时候的图片延迟加载效果图,在图片延迟加载事件处理函数部分结合运动可以实现一种过渡的效果，一般情况下网站喜欢用透明度的变化作为运动效果
 
 
5.0 文字选中分享的代码实现
        选中文字在不同浏览器下的兼容性写法
 
 
function selectText(){
    if(document.selection){ //ie
        return document.selection.createRange().text;
    }else{  //标准
        return window.getSelection().toString();
    }   
}
 
 
       这里处理选中文字之后的分享图标的显示在鼠标up状态的位置。
 
 
var oP = document.getElementById('para');
var oDiv = document.getElementById('div1');

function scrollTop(){
    return {
        top:document.documentElement.scrollTop||document.body.scrollTop,
        left:document.documentElement.scrollLeft||document.body.scrollLeft
    }
}
oP.onmouseup = function(ev){

    var ev = ev || window.event;
    var left = ev.clientX;
    var top = ev.clientY;

    if(selectText().length>5){
    //延迟解决重选之前的图标还在现象
        setTimeout(function(){
            oDiv.style.display = 'block';
            oDiv.style.left = left + 'px';
            oDiv.style.top = top + scrollTop().top+'px';
        },100);     
    }
    else{
        oDiv.style.display = 'none';
    }
};

document.onclick = function(){
    oDiv.style.display = "none";
};

oDiv.onclick  = function(){
window.open('http://v.t.sina.com.cn/share/share.php?title=' + getTextSelection() + '&url=' +window.location.href , '_blank')

};
 
 
6.0 浏器缓存相关
 
 
       推荐文章： 浏览器缓存机制详解
        题外话：禁用Chrome缓存，304读缓存
 
 
 
 
  
 
   
 
     
   
 
  
 
  

    禁用Chrome浏览器缓存.png 
  
 
 
 
 
 304读缓存,告诉浏览器去读取本地缓存 
 
 
 
 
  
 
   
 
     
   
 
  
 
  

    取消禁用缓存之后的304状态码.png 
  
 
 
 
 
 
 
7.0 cookie和session
 
 
 
  
 
   
 
     
   
 
  
 
  

    cookei_sessionhttp会话过程.png 
  
 
 
 
 
 
  
HTTP是一种无状态的协议：客户端和服务器端一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。_
 
 
 
 
Cookie与Session的白菜解释：Cookie是由服务器产生,生成key=value形式,通过响应头(set-cookie)返回给浏览器,保存在浏览器端，下次访问的时候根据一定的规则携带cookie,通过请求头(cookie)携带给服务器.
 
 
 
 
  
 
   
 
     
   
 
  
 
  

    cookie在client_server之间的传递.png 
  
 
 
 
 
 
 
Session：浏览器访问服务器的时候,服务器会获取浏览器带过来的JSSESSIONID,若获取不到:服务器创建一个session,保存用户数据,将该session的jsessionid通过响应返回给浏览器若获取到:服务器拿着这个jessionid去session池中查找有无此session若查找不到:服务器创建一个session,保存用户数据,将该session的jsessionid通过响应返回给浏览器，若查找到:拿过来直接使用,将该session的jsessionid通过响应返回给浏览器。
 
 
 
 
  
 
   
 
     
   
 
  
 
  

    F12下的session_cookie查看.png 
  
 
 
 
 
 
 
         说白了Cookie就是是服务器发放给每个浏览器访问者的一张通行证，而Session是通行证上用户信息在本地服务器的客户明细表。Cookie机制是通过检查客户身上的“通行证”来确定客户身份的话，那么Session机制就是通过检查服务器上的“客户明细表”来确认客户身份。Session相当于程序在服务器上建立的一份客户档案，客户来访的时候只需要查询客户档案表就可以了。
 
 
Cookie与Session的区别和联系
 
 
 
  
Cookie不支持跨浏览器，跨域名和中文形式，在客户端存储的大小只有4k（根据浏览器不同而不同）,因为存储在客户端，存在cookie欺骗的可能，所以安全性得不到保障
 
  
Session在同一用户的情况下是可以在不同页面之间共享的，session是基于cookie实现的
 
 
 
 
8.0 localStorage和sessionStorage
 
 
 
  
 保存数据的生命周期：localstorage除非被清除，否则永久保存，sessionstorage仅在当前会话下有效，关闭页面或浏览器后被清除
 
  
 作用于的不同,不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息
 
  
 相同点：都可以保存浏览器端的数据存储，也叫本地存储，并且不和服务器端产生通信