日常整理系列——笔试刷题00004

1）关于CSS布局中的BFC，相关描述：（从未遇到的知识漏洞，赶紧补上）

• BFC就是”块级格式化上下文“的意思，创建了BFC的元素就是一个独立的盒子，不过只有block-level box可以参与创建BFC,它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当前他也不会影响到外面的元素
• 内部的Box盒子会在垂直方向，从顶部开始一个接一个地放置；属于同一个BFC的两个相邻Box的margin会发生叠加；每个元素的margin box的左边，与包含块border box 的左边相接触（对于从左往右的格式化，刚好相反）。即使存在浮动也是如此。BFC的区域不会与float box 叠加。

如需了解更多，请看我的下一篇关于BFC的详细介绍：https://blog.csdn.net/PINGER0077/article/details/82983648

2）关于CSS选择器的优先级，查询统计后的结果如下：（从上往下降低）

1. 在属性后使用！important会覆盖页面内任何位置定义的元素样式
2. 作为style属性写在元素内的样式
3. ID选择器
4. class选择器（类选择器）= 伪类选择器 = 属性选择器；两者优先级相同，谁在后面谁起作用，后面的样式会覆盖前面的样式
5. 标签选择器
6. 通配符选择器
7. 浏览器自定义的样式

3）html 置换元素与不可替换元素

• 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。
  例如：浏览器会根据<img/>标签的src属性的值，来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；<input>标签的type属性来决定是显示输入框，还是单选按钮等。 (x)html中的<img>、<input>、<textarea>、<select>、<object>都是置换元素。这些元素往往没有实际的内容，即是一个空元素。置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因。
• 不可置换元素：(x)html的大多数元素是不可置换元素，即其内容直接表现给用户端（如浏览器）。
  例如：<label>label 中的内容</label>是一个非置换元素，文字label中的年日用将全被显示。

4）请用JavaScript语言实现

1	编写一个 times 函数，接收 2 个参数，一个字符串类型 str（如 "abc"），一个是 Number 类型 num （如 3），返回一个字符串（这里是 "abcabcabc"）

答案1：

function repeat(src, n){
    return (new Array(n + 1)).join(src);
}

解析：join()函数用来将数组转换成字符串，数组的每一项用join('a')里面的a连接。

function reqeat(src,num){
    return (n>0)?src.repeat(num)): "";
}

解析：ES6中新增的repeat(),构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本。
其实就是相当于把一个字符串复制很多分，不会影响原字符串。
扩展：repeat方法巨多不兼容，请尽量不要使用。传递的参数，如果是负数，那么就会报错；如果是0那么将输出空；如果是小数将会向下取整；如果是NaN将会被看做0；如果是字符串将会被转化成Number再执行，如果是a3或者是3a的话将会被看做0执行，结果为空。
语法格式为：

let resultString = str.repeat(count);

示例：

console.log('abc'.repeat(0))           //空
console.log('abc'.repeat(1))           //abc
console.log('abc'.repeat(-1))          //报错          
console.log('abc',repeat(3))           //abcabcabc
console.log('abc',repeat(2.9))         //abcabc
console.log('abc',repeat(NaN))         //空
console.log('abc',repeat("3"))         //abcabcabc
console.log('abc',repeat("3a")) 和console.log('a3')            //空            

5）编写一个 js 函数 jsonp 的处理函数

//手写jsonp
function myCallback(data) {
    console.log(data);
}

function jsonp(url, data, callback) {
    //data是否是字符串，是的话证明data值就是函数名
    if(typfof data === 'string') {
        callback = data;
        data = {};
    }
    //拼接data
    url += url.indexof('?') === -1 ? '?' : '&';
    url += 'callback=' + callback;
    var params = "";
    for( var i in data) {
        params += '&'+ i + '=' + data[i];
    } 
    url += params;
    //在页面上插入script标签
    var script = document.createElement('script');
    script.setAttribute('src', url);
    document.querySelector('head').appendChild(script);
}

jsonp('http://baidu.com/index.html'),{ id: 34},'myCallback');
jsonp('http://baidu.com/index.html?name="zjn"', {id: 34}, 'myCallback');

(function(window, document) {
    "use strict";
    var jsonp = function (url, data, callback) {
        //1.将传入的data数据转化为URL字符串格式
        //{id= 1, name:'zhangsan'} => id=1&name=zhangsan
        var dataString = url.indexof('?') == -1 ? "?" : "&";
        for(var key in data) {
            dataString += key + '=' + data[key] + '&';
        };

        //2.处理URL中的回调函数
        //cbFuncName回调函数的名字 ：my_json_cb名字的前缀 +　随机数（把小数点去掉）
        var cbFuncName = "my_json_cb_" + Math.random().toString().replace('.','');
        dataString += 'callback=' +cbFunction;
    
        //3.创建一个script标签并插入到页面上
        var scriptEle = document.createElement('script');
        scriptEle.src = url + dataString;

        //4. 挂载回调函数
        window[cpFuncName] = function(data) {
            callback(data);
            //处理完回调函数的数据之后，删除jsonp的script标签
            document.body.removeChild(scriptEle);
        }   

        //5.append页面中
        document.body.appendChild(scriptEle);
    }
    //因为jsonp是一个私有函数外部不能调用，所有jsonp函数作文window对象的一个方法，供外部调用
    window.$jsonp = jsonp;
})(window, document)