前端知识的一些总结

时间 2019-12-19

标签前端知识一些总结繁體版

原文原文链接

做为一个JAVA WEB猿，确定须要懂前端。在慢慢地转型过程当中，积累了相关的一些知识，作一些总结，温故知新。css

1.水平、垂直居中的几种方式：

html:html

<div class="div1" style="background-color:#607d8b;height:100px;width:100%">
    <div class="div2" style="background-color:#4CAF50;height:50px;width:50px"></div>
</div>
<br/>
<div class="div3" style="background-color:#607d8b;height:100px;width:100%">
    <div class="div4" style="background-color:#4CAF50;height:50px;width:50px"></div>
</div>
<br/>
<div class="div5" style="background-color:#607d8b">
    看好你哦，小伙子
</div>

单行文本水平垂直居中，思路：将父元素块状显示，文本居中，设置相同的高度和行高

.div5 {
    display:block;
    text-align:center;
    height:40px;
    line-height:40px;
    width:100%;
}

css3 transform属性

.div3 {
    position:relative;
}
.div4 {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);  /* 这里咱们使用css3的transform来达到相似效果 */
}

css3flex布局

.div1{
    display:flex;/*Flex布局*/
    align-items:center;/* 垂直居中 */
    justify-content: center;/*水平居中*/
}

效果图：

能够参考个人runJs: http://runjs.cn/detail/ttlbvbka

2.图片延时加载

咱们在开发页面的时候确定会遇到图片比较多的时候，虽然咱们可能有图片分布式的服务器，可是在客户端仍是会有很大的性能开销。为了用户体验，特别是对首屏加载速度要求很高的，一般咱们会考虑图片延时加载，lazyloading这款插件已经能很好地实现这一功能，但是是基于jQuery，对于移动端可能不太实用，前面用了一个很是简单实用叫echo的插件，3k左右特别适合移动端使用。步骤以下：前端

在页面中须要引入echo.css和echo.min.js

对须要进行延迟加载的图片采用以下写法：

<img src="blank.gif" style="width:300px;height:300px;" data-echo="test.jpg" />

对插件进行初始化：

echo.init({
　　offset:1,//离可视区域多少像素的图片能够被加载
　　throttle:1 //图片延迟多少毫秒加载
});

说明：blank.gif是一张背景图片，包含在插件里了。图片的宽高必须设定，固然，可使用外部样式对多张图片统一控制大小。data-echo指向的是真正的图片地址。很是简单，这样的话图片只有出如今视野内时才会加载，减小了页面的渲染工做量。jquery

3.数组去重

数组去重有不少方式，这里只推荐我的认为最简介高效的一种写法，大体思路：建立一个新的数组存放结果，再建立一个空对象，for循环时，每次取出一个元素与对象进行对比，若是这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容做为对象的一个属性，并赋值为1，存入到新创建的对象中。css3

代码：json

Array.prototype.unique = function(){  
  var res = [];  
  var json = {};  
  for(var i = 0; i < this.length; i++){  
    if(!json[this[i]]){  
      res.push(this[i]);  
      json[this[i]] = 1;  
    }  
  }  
 return res;  
}

测试：数组

var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];  
alert(arr.unique());

结果：浏览器

4.事件冒泡

当一个DOM事件被触发时，它不只仅只是单纯地在自己对象上触发一次，而是会经历三个不一样的阶段：缓存

1.捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象；安全

2.目标阶段：到达目标事件位置（事发地），触发事件；

3.冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。

图解：

假如咱们给span、div二、div1同时绑定一个click事件，当咱们点击span后，div二、div1的事件都会被触发，一般状况下咱们并不但愿如此，因此这个时候咱们须要阻止事件冒泡：

e.preventDefault()阻止事件默认行为。 
e.stopPropagation(); 阻止事件冒泡。

jquery源代码的话return false等效于同时调用e.preventDefault()和e.stopPropagation()
注意：不是全部的事件都能冒泡。如下事件不冒泡：blur、focus、load、unload。

5.什么是闭包

简单点说，闭包是指有权限访问另外一个函数做用域的变量的函数。JavaScript运行时须要跟踪引用内部函数的全部变量，直到最后一个变量废弃，JavaScript的垃圾收集器才能释放相应的内存空间，当内部函数在定义它的做用域的外部被引用时，就建立了该内部函数的一个闭包。这种状况下咱们称既不是内部函数局部变量，也不是其参数的变量为自由变量，称外部函数的调用环境为封闭闭包的环境。有一个很经典的例子:

<div id="divTest"><span>0</span><span>1</span><span>2</span><span>3</span></div><div id="divTest2"><span>0</span><span>1</span><span>2</span><span>3</span></div>
$(document).ready(function() {
            var spans = $("#divTest span");
            for (var i = 0; i < spans.length; i++) {
                spans[i].onclick = function() {
                    alert(i);
                }
            }
        });

每次alert出的值都是4，简单的修改后：

var spans2 = $("#divTest2 span");
        $(document).ready(function() {
            for (var i = 0; i < spans2.length; i++) {
                (function(num) {
                    spans2[i].onclick = function() {
                        alert(num);
                    }
                })(i);
            }
        });

当i的值为4的时候，判断条件不成立，for循环执行完毕，可是由于每一个span的onclick方法这时候为内部函数，因此i被闭包引用，内存不能被销毁，i的值会一直保持4，直到程序改变它或者全部的onclick函数销毁（主动把函数赋为null或者页面卸载）时才会被回收。这样每次咱们点击span的时候，onclick函数会查找i的值（做用域链是引用方式），一查等于4，而后就alert给咱们了。而第二种方式是使用了一个当即执行的函数又建立了一层闭包，函数声明放在括号内就变成了表达式，后面再加上括号括号就是调用了，这时候把i当参数传入，函数当即执行，num保存每次i的值。

6.css、js实现文字截断

css：

.class {
  white-space:nowrap;//normal | pre | nowrap
  text-overflow:ellipsis;//clip | ellipsis  
}

css很简单，也能够经过width来控制显示多少个字。

white-space有三个属性

nowrap :　强制在同一行内显示全部文本，直到文本结束或者遭遇 br 对象
normal :　默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre :　换行和其余空白字符都将受到保护，在编辑工具上是什么位置显示就是什么位置。

text-overflow文本溢出，ellipsis显示省略标记(...)，clip不显示，只是简单的裁剪。

js：因为.length()属性一个字母也是1一个中文也是1，因此须要判断一下中英文

function(text,len){
                if (null != text && text.replace(/[^\x00-\xff]/g, 'xx').length > len) { 
                    if (escape(text).indexOf( "%u" )<0)
                        text = text.substr(0, len) + "..";
                    else
                        text = text.substr(0, len/2) + "..";//中文
                }
                return text;
            }

7.typeof使用，类型转换

typeof操做符是用来检测变量的数据类型。使用：typeof 变量名; 不详细说，谷歌控制台输出图以下

8.HTTP之GET和POST

http超文本传输协议(HyperText Transfer Protocol -- HTTP)是一个设计来使客户端和服务器顺利进行通信的协议，这里简要的介绍一下get和post的区别

GET	POST
通常用于获取/查询资源信息	通常用于更新资源信息。
可以被缓存	不能缓存，缓存也没有意义
会保存在浏览器的浏览记录中	不会保存
请求的URL可以保存为浏览器书签	没法保存
有长度限制，通常由浏览器限制	没有限制
URL会显示在浏览器地址栏	不会，相对来讲安全，可是不加密一样能够经过抓包工具查看

9.常见的状态码

200 请求被成功处理
302 临时性重定向。该状态码表示请求的资源已被分配了新的URI，但愿用户本次能使用新的URI访问。
400 请求报文中存在语法错误，致使服务器没法理解该请求。客户端须要修改请求的内容后再次发送请求。
404 服务器上没法找到指定的资源。一般被用于服务器不想透露拒绝请求的缘由，或者没有其余的响应可提供。
500 服务器端在执行请求时发生了错误。也有多是Web应用存在的BUG或某些临时的故障。

10.判断按钮是否被选中，获取全部的选中

$('input[name=checkbox1]').is(":checked") //判断按钮是否被选中，返回true/false
$('input[type=checkbox]').prop('checked',true)//全选，false即为全不选
$("input[type='checkbox']:checked")//获取全部选中的
$("input[type='checkbox']").not("input:checked") //获取没有选中的
$("input[type='checkbox']:checked").length //选中的个数

11. .attr() 和.prop()

在高版本的jquery引入prop方法后，何时该用prop？何时用attr？其实很简单：
.prop() 处理html元素自己自带的属性，而attr()处理咱们本身定义的属性

12. 生成指定范围的随机整数

生成30之内的随机数（包括30）

Math.round(Math.random()*30) - 1

13. js实现继承的两种方式

1.方法继承

function extend(obj1,obj2){
    for(var attr in obj2){
        obj1[attr] = obj2[attr];
    }
}

2.类式继承

function He(){//父类
    this.name = 'he';
}
He.prototype.showName = function(){
    console.info(this.name)
}

function child(){//子类
    He.call(this);//属性继承
}
var c = new child();
console.info(c.name);//打印he

浏览器控制台效果图：

原创文章，转载请注明出处！