Mr_董-CSDN博客

原创前端兼容问题之meta篇

之前一直开发移动端，最近项目开始做pc端的业务，项目要求兼容ie8，只能说对于前端开发来说，ie8绝对是一个噩耗，在开发pc端时不可以避免的就是遇到N多兼容性问题。所谓浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的...

2018-06-11 18:07:54 2483

原创 angularjs中的$sompile服务

$compile服务是Angularjs里比较重要但又很少手动调用的服务，通常我们使用的angularjs指令都是angularjs自动编译完成的，但有时我们可能需要手动编译，比如我们需要往现有的DOM结构里添加html代码，增加一列li，这是就需要用到$compile了。$compile用于编译HTML片段或者DOM，形成模板函数并于scope函数联结。编译就是DOM遍历并匹配指令，执行指令

2017-08-03 17:07:37 606

原创前端处理后台返回带格式的文本之textarea标签使用技巧

页面的布局排版一般都是前端工程师在页面中使用div、p标签等进行预先的设计排版，但是有时候有些带格式的文本内容是后台返回的，这就需要前端按照后台返回的格式化文本进行展示，如果这个时候还用div、p标签进行内容的包裹，就会使后台返回的文本内容丢失。这时候我们就可以使用textarea标签作为格式文本的内容包裹。标签定义一个多行的文本输入控件。但是我们可以利用它的disable和readonly

2017-08-03 16:20:49 6644

原创前端面试之两栏布局，左侧固定右侧自适应；三栏布局，左右定宽，中间自适应

左右布局：左边定宽、右边自适应，1.1浮动方法，使第一个div浮动起来脱离文档流，下面的div自动向上先看代码body{margin:0;} //为了统一布局，去掉了浏览器自带body的margin值.left{ width:200px; float:left; height:400px;; background:#99F;}.main{ height:400px; bac

2017-06-13 15:14:36 3432 1

原创前端面试之HTML篇

1、的作用？声明必须是 HTML 文档的第一行，位于标签之前。声明不是 HTML 标签；是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义(DTD)来解析文档。在 HTML 4.01 中，声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML

2017-06-12 15:11:36 2154

原创前端跨域访问

一、同源策略做过开发的都知道，从A网站通过Ajax来请求另外一个B网站的特定内容，是很常见的需求，但是出于安全的考虑，浏览器是不允许你这样做的，这就是浏览器的同源策略；何谓同源: URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。同源策略: 同源策略是Web层面上众多安全策略的一个，限制了来自不同源的"docu

2017-06-06 17:37:41 837 1

原创面试中经常出现的数组去重的一些方法

数组去重是笔试中经常见到的题目，方法也很多，下面是我可以想到的一些方法方法一：新建一个新数组，如果新数组中没有要去重数组中的值就放到新数组中functionunique1(arr){ varnewArr=[] for(vari =0;i <arr.length;i++){ if(newArr.in

2017-05-11 18:32:14 354

原创 TCP三次握手四次挥手

1）TCP三次握手第一次握手：客户端A将标志位SYN置为1,随机产生一个值为seq=J（J的取值范围为=1234567）的数据包到服务器，客户端A进入SYN_SENT状态，等待服务端B确认；第二次握手：服务端B收到数据包后由标志位SYN=1知道客户端A请求建立连接，服务端B将标志位SYN和ACK都置为1，ack=J+1，随机产生一个值seq=K，并将该数据包发送给客户端A以确认连接

2017-05-10 09:37:07 376

原创前端开发中经常使用到的20个正则表达式

1 . 校验密码强度密码的强度必须是包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间。^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$2. 校验中文字符串仅能是中文。^[\\u4e00-\\u9fa5]{0,}$3. 由数字、26个英文字母或下划线组成的字符串^\\w+$4. 校验E-Mail 地址

2017-05-10 09:13:51 467

原创 CSS清除浮动方法

什么是CSS清除浮动？在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。清除浮动方法方法一：使用带clear属性的空

2017-05-09 14:27:36 382

原创深克隆一个对象

1234567891011121314151617181920212223242526272829303132/** * 对一个object进行深度拷贝 * * 使用递归来实现一个深度克隆，可以复制一个目标对象，返回一个完整拷贝 * 被复制的对象类型会被限制为数字、字符串、布尔、日期、数组、Object对象。不会包

2017-05-09 14:06:07 853

原创 JS判断数据类型的三种方法

JavaScript 中常见的几种数据类型：基本类型：string,number,boolean特殊类型：undefined,null引用类型：Object,Function,Function,Array,Date,...typeoftypeof 返回一个表示数据类型的字符串，返回结果包括：number、boolean、string、object

2017-05-09 14:01:04 15220 1

原创输入网址到网页显示的过程是什么？

从用户输入一个网址到网页最终展现到用户面前，中间的大致流程总结如下：1) 在客户端浏览器中输入网址URL。2) 发送到DNS(域名服务器)获得域名对应的WEB服务器的IP地址。3) 客户端浏览器与WEB服务器建立TCP(传输控制协议)连接。4) 客户端浏览器向对应IP地址的WEB服务器发送相应的HTTP或HTTPS请求。5) WEB服务器响应请求，返回指定的URL数据或错误信息

2017-05-08 09:18:54 100811 3

原创 angularjs中实现页面加载动效

在与后台的交互过程中，有可能对在请求和响应过程过发生的问题进行捕获处理（如每次请求数据实现加载动画）。Angular为我们提供了$http拦截器来实现上述需求。什么是拦截器？拦截器就是在目标达到目的地之前对其进行处理以便处理结果更加符合我们的预期。Angular的$http拦截器是通过$httpProvider.interceptors数组定义的一组拦截器，每个拦截器都是实现了某些

2017-04-19 09:37:09 4950 2

原创闭包经典面试题

闭包应该是前段面试中经常碰到的面试题，很多人都会在这个问题上被问住。如果想要弄清楚就要掌握闭包的概念；首先看面试题：for (var i = 1; i setTimeout( function timer() { console.log(i); }, 1000 );}上面的代码会输出什么？怎么改动上述代码，使其依次输出1、2、3、

2017-04-14 14:13:28 31885 23

原创浅谈javascript中的call、apply、bind

apply、call 在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。 JavaScript 的一大特点是，函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。先来一个栗子： function fruits() {}

2017-02-21 09:17:24 509

原创 css实用技巧之设置元素居中

CSS居中一直是一个比较敏感的话题，为了以后开发的方便，楼主觉得确实需要总结一下了，总的来说，居中问题分为垂直居中和水平居中，实际上水平居中是很简单的，但垂直居中的方式和方法就千奇百怪了。内联元素居中水平居中设置：行内元素设置 text-align:center；垂直居中设置：父元素高度确定的单行文本（内联元素）设置 height = line-height；父元

2017-01-06 14:15:02 436

原创编写css代码的实用性建议

Margin Collapse不同于其他很多属性，盒模型中垂直方向上的Margin会在相遇时发生崩塌，也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时，只有二者中的较大值会被保留下来，可以从下面这个简单的例子来学习:1234567891011121314.square { wi

2017-01-06 14:08:59 724

原创 css3效果大杂烩

> html> head> meta charset="utf-8"> title>菜鸟教程(runoob.com)title> style> div { /*颜色渐变的相关知识*/ background: -webkit-linear-gradient(red, blue); /* Safari

2017-01-04 16:20:58 305

原创 js中的循环语句

我们在程序中最常见到的就是对数组元素的遍历了，就是我们常说的循环语句。在javascript权威指南中对循环语句的定义是程序路径的一个回路，可以让一部分代码重复执行。Javascript中有4种循环语句：·for - 循环代码块一定的次数·for/in - 循环遍历对象的属性·while - 当指定的条件为 true时循环指定的代码块·do/while - 同样当指定的条件为

2017-01-04 16:13:41 1241

原创 css控按钮的点击时候出现边框

今天测试偶然发现一个问题，页面上的按钮每次点击时都会出现一个黄色的框，然后各种查看自己写的样式表，没有发现自己控制这个呀，后来在引入的bootstrap框架中发现了这样的代码：.btn.active.focus, .btn.active:focus,.btn.focus, .btn:active.focus,.btn:active:focus, .btn:focus {

2017-01-03 17:56:15 10663

原创客户端储存的三种方式localStorage 、sessionStorage、Cookies

Web应用允许使用浏览器提供的API实现将数据存储到用户的电脑上。这种客户端存储相当于赋予了Web浏览器记忆功能。比方说，Web应用就可以用这种方式来“记住”用户的配置信息甚至是用户所有的状态信息，以便准确地“回忆”起用户上一次访问时候的状态。客户端存储遵循“同源策略”，因此不同站点的页面是无法互相读取对方存储数据的，而同一站点的不同页面之间是可以互相共享存储数据的，它为我们提供了一种通信机制，例

2016-12-30 15:31:56 6909

原创 css3中常见的30个选择器

1 *：通用选择器* { margin:0; padding:0; }*选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除浏览器默认样式的方法。*选择器也可以应用到子选择器中，例如下面的代码：#container * { border:1px solid black; }这样ID

2016-12-30 15:03:29 3325 1

原创 Angularjs十大经典面试题

1. ng-show/ng-hide 与 ng-if的区别？我们都知道ng-show/ng-hide实际上是通过display来进行隐藏和显示的。而ng-if实际上控制dom节点的增删除来实现的。因此如果我们是根据不同的条件来进行dom节点的加载的话，那么ng-if的性能好过ng-show.2.解释下什么是$rootScrope以及和$scope的区别？通俗的说$rootS

2016-12-30 14:19:20 80798

原创 JavaScript中的函数作用域和作用域链

估计大家一直对Js的作用域有点迷糊，今天没事看到JavaScript权威指南对作用域的解释感觉很不错就和大家分享一下。一：函数作用域先看一小段代码：1. var scope="global"; 2. function t(){ 3. console.log(scope); 4. var scope="local" 5. consol

2016-12-29 14:57:09 773

原创 JavaScript中的ry…catch…finally 响应错误事件

开发中发现后台人员经常使用 try…catch…finally 来响应错误事件，即错误处理（exception handlers）。但是在前端代码中很少用到这个方法。这篇文章就详细介绍一下 try…catch…finally 用法。一、什么是错误处理　　当JavaScript程序在运行中发生了诸如数组索引越界、类型不匹配或者语法错误时，JavaScript解释器就会引发错误处理。ECMAS

2016-12-28 16:07:35 903

原创 DOM方法

一、什么是 DOM？DOM 定义了访问和操作 HTML 文档的标准方法1、DOM 是 Document Object Model（文档对象模型）的缩写。2、DOM 是 W3C（万维网联盟）的标准。3、DOM 定义了访问 HTML 和 XML 文档的标准：4、DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。W3C D

2016-12-23 17:46:46 602

原创 Ajax大杂烩

Ajax请求是前端必备的技能，本文主要总结整理Ajax的一些常用的基础知识。一、Ajax简介、优劣势、应用场景以及技术Ajax简介 :Asynchronous Javascript And XML （异步的 JavaScript和XML）它并不是一种单一的技术，而是有机利用一系列交互式网页应用相关的技术所形成的结合体AJAX 是一种用于创建快速动态网页的技术。通

2016-12-23 17:14:07 371

原创 AngularJ中的Directive指令

Directive（指令）是AngularJ非常强大而有有用的功能之一。它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性，并且它不只是单单如此，你还可以在它的基础上来操作scope、绑定事件、更改样式等。通过这个Directive，我们可以封装很多公共指令，比如分页指令、自动补全指令等等。然后在HTML页面里只需要简单的写一行代码就可以实现很多强大的功能。一般情况下，需要用

2016-12-22 16:41:23 1246

原创移动端meta标签的使用

大家对meta标签再熟悉不过了，因为我们的页面中或多或少的都会使用到meta标签。但是我们却很少了解meta标签的用途，尤其是对于meta标签里的属性和值不是很懂，也不知道从哪里冒出来的。这篇文章就从什么是meta标签、meta标签的使用及移动端的meta标签三个方面详细的介绍一下。一、什么是meta标签标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。

2016-12-22 09:18:21 3055

原创 H5与微信获取用户当前位置

微信和h5原生方法都提供了获取用户地理位置的方法，需要使用第三方的逆地理编码的方式获得用户的实际位置信息。1、H5方法H5的新特性中加入了获取地理位置的方法window.navigator.geolocation，使用该方法我们可以方便的获取用户的地理位置，在通过第三方的逆地理编码的方法可以获得用户所在的实际位置。我用的是百度地图的web API，需要使用者在百度地图的开发者平台上申请一个

2016-12-20 17:35:07 18705 1

原创 JS中的console对象

在调试 JS 代码时，我们大多人倾向于使用 alert() 或者 console.log() 方法来输出信息，正如某些 Java 程序员喜欢在调试代码时使用System.out.println() 输出信息一样。但与 Java 输出不一样的是， console 对象拥有多种方法可以更好的呈现信息，从而给代码调试带来方便。根据常用程度，列出以下几种 console 对象的方法：console

2016-12-15 09:18:21 14699

原创 js中数组的排序算法

不论是面试还是实际工作中，数组排序我们应该都可以碰到，尤其是在面试的过程中，排序是必问的一项，下面整理的一些排序的算法；var Sort = {}Sort.prototype = { // 利用sort进行排序 systemSort:function(array){ return array.sort(function(a, b){

2016-12-14 15:36:22 344

原创 JS中的事件冒泡和事件捕获

谈起JavaScript的事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。1、冒泡事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触

2016-12-13 09:06:25 4850

原创同步加载与异步加载

有几天沒有更新博客了，主要是这几天项目遇到好多小问题，比如异步加载、输入特使字符、事件的执行顺序、还有最让人头疼的浏览器缓存问题。所以这几天一直在加班加点的调试、更改准备这个月的投产，终于昨天提交了系统测试，忙里偷闲更新一下博客，把这月遇到的问题总结一下，后续会继续更新，这次主要是说一下异步加载的问题。上个月项目接入到支付宝的城市服务，测试的妹子发现项目在安卓和ios的支付宝城市服务中支付宝的

2016-12-09 08:21:59 20009

原创 css、js缓存问题

目前开发新需求，经常服务器发布文件后要不断的刷新页面或者过很长时间，页面上的CSS和JS文件才能生效，特别对于目前做微信公众号的时候，微信内置的浏览器缓存非常的严重。但是目前项目中没有任何处理缓存的机制，导致在开发中明明更改了样式或者脚本但是就是没有任何效果，只能不停刷新、清缓存，非常坑爹！浏览器缓存的意义在于提高了执行效率，但是导致服务端修改了js、css，客户端不能及时更新。你每次发布一个新的

2016-12-01 10:49:25 3013

原创前端常用技术之图片懒加载

目前，一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度，。避免网页打开时加载过多资源，让用户等待太久。图片懒加载实例 * { margin:

2016-11-29 08:36:32 3098

原创 js判断数组或对象中的key是否存在

JS中数组和对象是等同的，判断一个key是否存在于数组中(或对象是否包含某个属性)，我们可能马上想到的是使用ary[key] == undefined来判断key是否存在这个数组或者是对象中，但是这样判断是有问题的，因为可能存在ary = {key:undefined};正确的方法应该为：ary.hasOwnProperty(key); 或 obj.hasOwnProperty(k

2016-11-28 08:49:45 149498 8

原创 angularjs中的常见过滤器

项目中使用了angularjs框架，使用到了里面自带过滤器，随便就总结了一下angularjs中常见的过滤器。一、什么是过滤器？过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器，同时也提供了方便的途径可以自己创建过滤器。在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器。例如，假设我们希望将字符串转换成大写，可以对字符串中的每个字符都单独进

2016-11-24 09:19:10 2378

原创 http状态码大全

HTTP状态码当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求。HTTP状态码的英文为HTTP Status Code。下面是常见的HTTP状态码：200 - 请求成功301 - 资源（网页等）被永久转移到其它U

2016-11-23 16:32:12 320

空空如也

空空如也