零零碎碎的小知识点

最新推荐文章于 2024-03-16 16:55:39 发布

weixin_34266504

最新推荐文章于 2024-03-16 16:55:39 发布

阅读量96

点赞数

原文链接：https://my.oschina.net/AnymoreCoder/blog/824467

版权

2019独角兽企业重金招聘Python工程师标准>>>

1.避免无意义的条件判断摘自：规范js代码(学习ES6的时候也可以好好看看这一篇。)

反例：

function createMicrobrewery(name) {
  var breweryName;
  if (name) {
    breweryName = name;
  } else {
    breweryName = 'Hipster Brew Co.';
  }
}

正例：

function createMicrobrewery(name) {
  var breweryName = name || 'Hipster Brew Co.'
}

2.::before的使用

::before在每个被选元素的内容之前插入新内容，灵活运用可以使代码简洁许多：

 <style>
a:hover::before, a:hover::after {
    content: "";
}
a::before{
	content:"(" attr(href) ")";
}
</style>
 <body>
  <a href="https://www.oschina.net/" target="_blank">开源中国</a>
 </body>

3.css选择器element+element有什么用途

 <body>
     <ul>
       <li>菜单1</li>
       <li>菜单2</li>
       <li>菜单3</li>
       <li>菜单4</li>
       <li>菜单5</li>
       <li>菜单6</li>
   </ul>
   <style>
       ul li+li{
           border-top: solid;
       }
   </style>
 </body>

4.float设计初衷：文字环绕效果

   <div class="fatherDiv" style="border: solid;padding:3px;float: left">
       <img class="sonImg" src="images/1.jpg" style="width: 120px;height: 100px;float: left"/>
       这是一段要实现文字环绕效果,好像实现了。
   </div>

5.form表单啥时候有了重置按钮了（ps:会重置整个表单的内容，而不是某一个input框）

<form name="myForm">
    <input id="firstInput" name="firstInput"/>
    <input name="resetBtn" type="reset"/><!--重置按钮-->
</form>

6.星星打分

   function getRating(rating) {
             if(rating > 5 || rating < 0) throw new Error('数字不在范围内');
             return '★★★★★☆☆☆☆☆'.substring(5 - rating, 10 - rating );
         }
document.write(getRating(3));
console.log(getRating(3));

7.啥叫闭包

当function里嵌套function时，内部的function可以访问外部function里的变量。

      function add(a){
          return function(b){
              return a+b;
          }
      }
      var x=add(5);
      var y=add(20);
      console.log(x(6));//11
      console.log(y(7));//27

8.null和undefined的区别？

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。 undefined：（1）变量被声明了，但没有赋值时，就等于undefined。（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。（3）对象没有赋值的属性，该属性的值为undefined。（4）函数没有返回值时，默认返回undefined。

null：（1）作为函数的参数，表示该函数的参数不是对象。（2）作为对象原型链的终点。

9.new操作符具体干了什么呢?

（1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。（2）属性和方法被加入到 this 引用的对象中。（3）新创建的对象由 this 所引用，并且最后隐式的返回 this

10.清除浮动之父级div定义伪类:after和zoom

.clear-float:after{
			content:"";
            display:block;
            clear:both;
            visibility:hidden;
            height:0;
	};
	.clear-float{
		zoom:1;
	}

11.你有哪些性能优化的方法？

（1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。（4）当需要设置的样式很多时设置className而不是直接操作style。（5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。（7）图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。

12.移动端监听input

<input class="identity" type="text" name="identity" placeholder="请输入身份证号" oninput="listenIdentity(this)">

function listenIdentity(e) {
    console.log(e.value)
}

13.截断字符串

/**
 * 超出定义长度后截断
 * 使用：
 $('.sel').on('input', function() {
    var value = $(this).val();
    if(Str.byteLen(value, 3)>18){
        $(this).val(Str.getMaxlen(value, 18));
    }
});
 */
var Str = {
    byteLen : function (str, len){
        //正则取到中文的个数，然后len*count+原来的长度。不用replace
        var factor = len || 2;
        str += '';
        var tmp = str.match(/[^\x00-\xff]/g) || [];

        var count = tmp.length;
        return str.length + (factor-1)*count;
    },
    getMaxlen : function(str,maxlen){
        var sResult = '', L=0, i=0, stop = false, sChar;
        if(str.replace(/[^\x00-\xff]/g,'xxx').length <= maxlen){
            return str;
        }
        while(!stop){
            sChar = str.charAt(i);
            //sResult+=sChar;
            L+= sChar.match(/[^\x00-\xff]/) !== null ? 3 : 1;

            if(L > maxlen){
                stop = true;
            }else{
                sResult+=sChar;
                i++;
            }
        }
        return sResult;
    }
};

14.字体适配

/**
 * 字体适配
 * 使用：ui文件中px/100 = rem
 */
(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

转载于:https://my.oschina.net/AnymoreCoder/blog/824467