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

1.0 前端代码高亮

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

<link href="themes/prism.css" rel="stylesheet" />
<script src="prism.js"></script>

<pre><code class="language-**>
        这里是你的代码内容,其中**部分是你的代码语言包括js,html,css,php.c++....
</code></pre>

2.0 CSS预处理器Sass的学习

        前端发展到今天已经出现了很多CSS预处理器比如Less,stylus,而从当初的技术选择来看,我更多的还是喜欢今天所讲的sass(scss),他有比较完整的工具,命令行自动化编译来完成前端css的切割以及CSS模块化处理,这里推荐CSS模块化 By 阮一峰这篇文章作为拓展阅读,这里我只做优质scss文章的搬运工,就不拿别人文章的只言片语来作为自己的见解。

3.0 Compass/Scss下雪碧图的生成

4.0 图片懒加载与预加载
       图片的懒加载应用:对于一些有很多图片的页面,当用户点击链接跳转到该页面的时候,会出现在我们滚动鼠标的时候,网页底下的图片渐渐地出现在我们的眼前,这些图片并没有在页面在家完成的时候一次性加载出来,而是在用户需要的时候采取请求服务器加载图片。

<img  class="lazyLoad" src="a.png" data-src="1.png"/>
<img  class="lazyLoad" src="a.png" data-src="2.jpg"/>
<img  class="lazyLoad" src="a.png" data-src="3.jpg"/>
<img  class="lazyLoad" src="a.png" data-src="4.jpg"/>
<img  class="lazyLoad" src="a.png" data-src="5.jpg"/>
<img  class="lazyLoad" src="a.png" data-src="6.jpg"/>
 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<tags .length;i++){
            if(new RegExp('(\\s|^)'+className+'(\\s|$)').test(tags[i].className)){
                arr.push(tags [i]);
            }
        }
        return arr;
    }
图片延迟加载事件函数
    function lazyImgLoad(obj){
    var scrllTop = document.documentElement.scrollTop||document.body.scrollTop;
        for(var  i=0;i<len,i++){
            if(obj.top<scrollTop+clientHeight){
                setTimeout(function(){
                    obj[i].src = obj[i].getAttribute("data-src");
                    obj[i].flag = false;
                },200);
//这个部分可以结合运动函数提高图片的交互效果,直接这样加载比较生硬
            }
    }
保存设置初始图片数据
    for(var i=0;i<len;i++){
        objs[i].url = objs[i].getAttribute("data-src");
        objs[i].flag = true;
        objs[i].top = getPosition(objs[i]);
    }
}
window.onscorll =function(){
    for(var  i=0;i<len;i++){
        if(obj.flag){
        lazyImgLoad(objs[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的信息
  • 相同点:都可以保存浏览器端的数据存储,也叫本地存储,并且不和服务器端产生通信