你知道或者不知道的前端

1.include(公共页面引入）

  /** 
 * Created by HandsomeH on 2016/1/13. 
 */  
(function(window, document, undefined) {  
    var Include3948= function() {}  
    Include3948.prototype = {  
        //倒序循环  
        forEach: function(array, callback) {  
            var size = array.length;  
            for(var i = size - 1; i >= 0; i--){  
                callback.apply(array[i], [i]);  
            }  
        },  
        getFilePath: function() {  
            var curWwwPath=window.document.location.href;  
            var pathName=window.document.location.pathname;  
            var localhostPaht=curWwwPath.substring(0,curWwwPath.indexOf(pathName));  
            var projectName=pathName.substring(0,pathName.substr(1).lastIndexOf('/')+1);  
            return localhostPaht+projectName;  
        },  
        //获取文件内容  
        getFileContent: function(url) {  
            var ie = navigator.userAgent.indexOf('MSIE') > 0;  
            var o = ie ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();  
            o.open('get', url, false);  
            o.send(null);  
            return o.responseText;  
        },  
        parseNode: function(content) {  
            var objE = document.createElement("div");  
            objE.innerHTML = content;  
            return objE.childNodes;  
        },  
        executeScript: function(content) {  
            var mac = /<script>([\s\S]*?)<\/script>/g;  
            var r = "";  
            while(r = mac.exec(content)) {  
                eval(r[1]);  
            }  
        },  
        getHtml: function(content) {  
            var mac = /<script>([\s\S]*?)<\/script>/g;  
            content.replace(mac, "");  
            return content;  
        },  
        getPrevCount: function(src) {  
            var mac = /\.\.\//g;  
            var count = 0;  
            while(mac.exec(src)) {  
                count++;  
            }  
            return count;  
        },  
        getRequestUrl: function(filePath, src) {  
            if(/http:\/\//g.test(src)){ return src; }  
            var prevCount = this.getPrevCount(src);  
            while(prevCount--) {  
                filePath = filePath.substring(0,filePath.substr(1).lastIndexOf('/')+1);  
            }  
            return filePath + "/"+src.replace(/\.\.\//g, "");  
        },  
        replaceIncludeElements: function() {  
            var $this = this;  
            var filePath = $this.getFilePath();  
            var includeTals = document.getElementsByTagName("include");  
            this.forEach(includeTals, function() {  
                //拿到路径  
                var src = this.getAttribute("src");  
                //拿到文件内容  
                var content = $this.getFileContent($this.getRequestUrl(filePath, src));  
                //将文本转换成节点  
                var parent = this.parentNode;  
                var includeNodes = $this.parseNode($this.getHtml(content));  
                var size = includeNodes.length;  
                for(var i = 0; i < size; i++) {  
                    parent.insertBefore(includeNodes[0], this);  
                }  
                //执行文本中的额javascript  
                $this.executeScript(content);  
                parent.removeChild(this);  
                //替换元素 this.parentNode.replaceChild(includeNodes[1], this);  
            })  
        }  
    }  
    window.onload = function() {  
        new Include3948().replaceIncludeElements();  
    }  
})(window, document)  

2.jquery.PrintArea.js（打印）

    使用的方法：$（element).printArea(option).

• 参数设置：

    - 1.mode：模式，当点击打印按钮时触发模式，默认为iframe，当设置为popup则会新开一个窗口页面打印。 
    - 2.popTitle：设置新开窗口的标题，默认为空。 
    - 3.popClose：完成打印后是否关闭窗口，默认为false。
    - 4.debug: false,//如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false 
    - 5.importCSS: true, //true表示引进原来的页面的css，默认是true。（如果是true，先会找$(“link[media=print]“)，若没有会去找$(“link”)中的css文件） 
    - 6.printContainer: true,//表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。 
    - 7.operaSupport: true//表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true

3.chrome屏幕尺子插件-Page Ruler Chrome插件

Page Ruler屏幕尺子插件功能
PageRuler屏幕尺子插件是一款非常轻量级的屏幕尺子插件，还可以为Chrome浏览器量身定做测量需求，使得用户的测量结果变得更加准确。简单直接点说PageRuler屏幕尺子插件就是绘制一个标尺，得到像素的尺寸和定位，并测量在任何网页上的元素。页尺让你的画出一把尺子到任何页面，并显示它的宽度、高度和位置。

其功能特色有：
*画一把尺子到任何页面，并查看宽度，高度和顶部，底部，左，右位置
*拖动标尺的边缘来调整它的大小
*使用箭头键移动和调整标尺的大小
*显示从标尺边缘延伸的指南
*手动更新标尺的大小和位置，从工具栏上进行精确的更改
*启用“元素模式”来在页面上的元素，当你移动你的鼠标在他们
*通过任何被测元素的父母，孩子和兄弟姐妹

4.Smart QrCode Generator

5.css

1.边框内圆角

- 有时候我们需要一个容器，只有内侧有圆角，边框或者描边的四个角在外部仍然保持直角形状

例如： image.png

div {
    outline: .6em solid #655;
    box-shadow: 0 0 0 .4em #655;
    max-width: 10em;
    border-radius: .8em;
    padding: 1em;
    margin: 1em;
    background: tan;
}

• 解决方案：box-shadow和outline结合

• 实现原理： outline（描边）不会跟着元素的圆角走（因而显示直角）；box-shadow却是会跟着元素走的；两者相结合，box-shadow会填补描边和容器圆角之间的空隙；

2. 满幅的背景，定宽的内容

例如： image.png

.header{
            padding: 1em calc(50% - 600px);
            background: orange;
            color: #fff;
            overflow: hidden;
        }

3.currentColor (当前的标签所继承的文字颜色)

• （1）边框字体同色

  
  image.png

        .border{
            color:bisque;
            border: 1px solid currentColor; 
            /* 或者 */
            border:1px solid;
        }

• （2）一些鼠标事件
  border, background, 还是box-shadow，图标的颜色都统一变化，就可以使用currentColor作为图形颜色

4.等比例缩放的盒子

根据不同屏幕大小等比缩放页面中的元素

• 实现原理：padding-bottom 有一个让人很容易忽略的特性是当它的值是百分比形式时，百分比的基数是其所在元素的父元素的宽度而不是高度

   .dw1{
           float: left;
           width: 30%;
           padding-bottom: 60%;
           margin: 0 3% 0 0;
           background: blue;
       }