- 博客(124)
- 收藏
- 关注
RSS订阅翻译 MVP
1>基本概念1)MVP是MVC框架的一种演变2)Model数据层,它区别于MVC架构中的Model，在这里不仅仅只是数据模型。在MVP架构中Model它负责对数据的存取操作。3)View负责显示。View通常含有Presenter的引用4)Presenter负责逻辑处理，他是连接View层与Model层的桥梁并对业务逻辑进行处理。在MVP架构中Model与View无法直接进行...
2018-07-31 19:53:09
358
翻译 MVC
1>基本知识：MVC模式把软件系统分为三个基本部分：View：视图，用户界面。它只是作为一种输出数据并允许用户操纵的方式。Controller控制器，业务逻辑。接受用户的输入并调用模型和视图去完成用户的需求Model：模型，数据保存所有通信都是单向的。每一部分都相对独立，职责单一，在实现过程中可以专注于自身的核心逻辑。2>MVC的优点1.低耦合性 视图...
2018-07-31 19:51:59
204
原创 Taget和currentTaget区别
target:一个触发事件的对象引用，它标志事件发生的元素，当事件处理程序在事件的冒泡或捕获阶段被调用时。currentTarget:它总是引用事件处理程序附加到的元素在事件冒泡阶段两者不相等，但是在事件目标阶段两 者是相等的<ul> <li>hello 1</li> <li>hello 2</li> <li&g...
2018-07-31 18:37:18
435
原创 减少HTTP请求
1>原因：1》性能准则：用户最终花相应的10%-20%的时间在接受请求的HTML文档，其他的时间都是花在HTML文档引用的所有组件（图片，css，script）进行HTTP请求上。2》请求头的数据量（是小问题）：每次请求的时候都会带上一些额外的信息进行传输，当请求资源很小时，可能request带的数据比实际的数据量还大，所以当请求越多时，在网路上传输的数据也就越多，传输速度自然就慢。...
2018-07-31 16:21:25
670
原创 CDN加速
总结：在离你最近的地方，放置一台性能好连接顺畅的副本服务器，让你能够以最近的距离，最快的速度获取内容CDN内容分发网络服务器，其主要作用是可以保证网络内容更快，更稳定的传输，即加速网络访问的作用。本质仍然是一个缓存，而且就近获取资源，当CDN中存在浏览器请求的资源时，从CDN直接返回给浏览器，最短路径返回响应，加快用户访问速度，减少数据中心负载压力。 CDN缓存的一般是静态资源，如图片、文...
2018-07-30 21:41:37
1981
原创 Web性能优化
一，前端优化的目的1)从用户角度，优化时候能够让页面加载更快，对用户的操作响应更及时，能够给用户提供更为友好的体验2)从服务商角度，优化能够减少页面请求，或者减少请求所占宽带，能够节省可观的资源优化的方面可以分为页面级别和代码级别二．页面级别一》减少HTTP请求1>原因：1》性能准则：用户最终花相应的10%-20%的时间在接受请求的HTML文档，其他的时间都是花在...
2018-07-30 21:40:44
2375
原创 get和post区别
1>get方法是用于信息获取，他是安全的（安全指的是非修改信息） post方法是用于修改服务器上资源的请求2>get请求的数据会附在URL之后 post方法提交的数据则放置在HTTP报文实体的主体里3>post比get安全4>因为get是通过URL提交数据而URL本身对数据没有限制，但是不同的浏览器对URL有限制，所以get方法传输的数据量一般限...
2018-07-30 21:33:03
178
原创 HTTP请求方法详解
1》GET 获取资源 用来请求已经被URI所标识的资源。要查询的内容需要用encodeURLComponent()进行编码2》POST 传输实体文本 在URI所标识的资源后附加新的数据3》HEAD获取报文首部 用来请求已经被URI所标识的资源的响应消息报头4》PUT 传输文件 传输文件，要求在请求报文的主体中包含文件内容，然后保...
2018-07-30 20:44:33
132
原创 touch事件的穿透问题
click是在touch系列事件发生后300ms才触发的，混用click和touch肯定会导致穿透问题点击穿透现象的情况：1)蒙层问题蒙层的关闭按钮绑定的是touch事件，而按钮下面元素绑定的是click事件，touch事件触发后，蒙层消失，300ms后这个点的click事件触发。2)跨页面点击穿透问题如果按钮下面恰好是一个href属性的a标签，那么页面就会发生跳转（a标签跳转...
2018-07-30 17:58:36
801
原创 移动端300ms延迟的解决方法
方法一：禁止缩放（在meta标签中设置） Chorm和Firfox支持,Safari比较麻烦他还有双击缩放还有双击滚动操作<meta name="viewport" content="user-scalable=no,initial-scale=1,maximun-scale=1"/>页面不可缩放，这样双击缩放功能就没有意义了，此时浏览器可以禁用默认的双击缩放行为并且去掉30...
2018-07-30 16:30:10
2430
翻译 用js实现$(document).ready()
从页面空白到展示出页面内容，会触发DOMContentLoaded事件。而这段时间就是HTML文档被加载和解析完成。function ready(){ if(document.addEventListener){ //标准浏览器 document.addEventListener('DOMContnetLoaded',function(){ //注销时间，避免重复触发 ...
2018-07-28 16:03:23
3475
原创 jq的事件
1).bind(“事件名”,fn)直接绑定在相应的DOM元素上，可以解决跨域问题，但对于动态生成的新元素无法自动获取事件处理函数。解除绑定：.unbind()$("div").bind("click",function(){alert("bind 绑定")})2).delegate(selector,”事件名”,fn)绑定到父元素方，始终只监听一个，是通过冒泡的方式来绑定到指定...
2018-07-28 15:37:54
197
原创 重定向
1>重定向就是当用户浏览器或搜素引擎访问某个旧的网址地址时，服务器告诉浏览器或搜素引擎，改网址已经搬家，新家的地址是....，请使用新地址来访问该网页2>避免重定向的方法：1)在定义连接地址的href属性的时候，尽量使用最完整的，最直接的地址2)后台可以去设置，Response.Redirect第二个参数设置为false3)如果涉及到从测试环境到生产环境的迁移，建议通过...
2018-07-28 12:11:03
300
原创 HTTP劫持
1)目的：以弹窗的形式，在客户端展示宣传性广告或者直接显示某网站的内容。2)原理：在客户端与目的服务器所建立的专门的数据传输通道中，监视特定数据信息，如果满足条件，就会插入精心设计的网络数据，目的是让客户端程序解释“错误”的数据，进而展示宣传性内容。3)需要注意的是，HTTP劫持通常不是定时在你的系统中出现的，并且HTTP劫持往往是在你进行网络操作刚刚开始的时候，例如：你刚刚打开登录邮箱或...
2018-07-28 11:32:23
879
原创 slot分发内容
当需要让组件组合使用，混合父组件的内容和子组件的模板时，就会用到slot1.1>例子：一个网站由一级导航，二级导航，左侧列表，正文以及底部5个模块组成，它就会用到slot以<app>为例，它有两个特点：1》<app>组件不知道它挂载点会有什么内容，挂载点的内容由<app>的父组件决定2》<app>组件很可能有它自己的模板1....
2018-07-27 11:37:53
161
原创 自定义标签
1>概念通过指定html命名空间的名字来定义自定义标签；默认的一些标签p div等都在html默认的命名空间下。而自定义的标签可以放在自定义的命名空间下，可通过xmlns:命名空间名 来指定，在设置样式的时候使用 " 命名空间名\:标签名 "2>实例<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//...
2018-07-26 10:40:33
74
翻译 html转义
1>原因第一个原因是像“<”和“>”这类符号已经用来表示HTML标签，因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转义字符串时，要严格遵守字母大小写的规则。第二个原因是，有些字符在ASCII字符集中没有定义，因此需要使用转义字符串来表示。2>常用 ...
2018-07-26 10:39:51
242
翻译 剩余参数（rest）
1>概念：形式为...变量名，用于获取函数除开始参数外的参数，可以使用剩余参数代替arguments对象，但他是一个真正的数组。2>替换arguments代码//arguments写法function sortNumber(){ return Array.prototype.sclice.call(arguments)}//rest参数写法const sortN...
2018-07-26 10:38:26
479
翻译 箭头函数
1>基本知识箭头函数是es6对函数的一种简写以及对this的词法分析，是一种语法糖。2>注意点2.1>箭头函数的this绑定看的是this所在的函数定义在哪个对象下，绑定到哪个对象则this就指向哪个对象，如果有对象多层嵌套的情况，则this绑定到最近的一层对象上。实际上他是，没有自己的thisfunction foo(){ setTimeout(()=>...
2018-07-26 10:36:21
274
原创 seo优化
语义化html标签合理使用meta标签导航嵌套层级不要太深img加上alt,title属性img设置大小a的href可以设置成nofollow跳转最好使用a标签跳转重要的html代码放前面少用iframe, 搜索引擎不会抓取iframe中的内容添加一些比较好的网站的网页，保持网站内容的更新...
2018-07-26 10:33:44
536
原创 单例模式
1>概念：保证一个类仅有一个实例，并且提供一个访问它的全局访问点。2>场景：有这样一个常见的需求，点击某个按钮的时候需要在页面弹出一个遮罩层。这个遮罩层是全局唯一的, 如果按照一般的方式那么每次调用都会创建一个新的div, 虽然可以在隐藏遮罩层的把它remove掉. 但显然这样做不合理.这时你就可以使用单例模式。实现基本思路：先判断实例存在与否，如果存在直接返回，如果不存在就创...
2018-07-26 10:32:56
73
原创 虚拟DOM
1>概念：Virtual Dom可以看做一棵模拟了DOM树的JavaScript对象树，在状态发生变化的时候，虚拟dom会根据diff运算来更新只需要被替换的dom而不是全部重绘,开销小。 2>Virtual DOM 算法。包括几个步骤：用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中 当状态变更的时候，重新构...
2018-07-26 09:21:15
94
翻译 async/await
1》概念：是Generator函数的语法糖吗，它的实现原理就是将Generator函数和自动执行器，包在一个函数里。返回一个promise对象，可以使用then方法添加回调函数，当函数执行时，一旦遇到await就先返回，等到异步操作完成，再接着执行函数体内后面的语句2》async函数多种使用形式函数声明async function foo(){}函数表达式const foo=a...
2018-07-26 09:20:51
165
翻译 Promise对象
1>什么是PromisePromise是异步编程的一种解决方案，它简单来说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。Promise对象有两个特点：1)对象的结果不受外界影响：Promise对象代表有一个异步操作，有三个状态fulfilled可以理解为成功的状态； rejected 可以理解为失败的状态； pending既不是成功状态也...
2018-07-26 09:20:43
114
原创 vue
基本操作1)Vue用于实现虚拟dom的render函数。vue1和vue2最大的区别是vue2使用了虚拟DOM来更新dom节点，提升渲染性能。第一个参数createElement第二个参数context,来提供临时上下文，比如this.level要改写成context.props.level。 render函数不需要vue的内置指令，也没办法使用他们，无论什么功能都可以运用原...
2018-07-26 09:20:34
248
翻译 Vue双向绑定
1.Observer 数据监听器，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者，observer内部就是采用Object.defineProperty的getter和setter来实现。2.Compile 指令解析器，它的作用对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。3.Watcher 订阅者， 作为连接 Observer ...
2018-07-25 08:25:27
192
原创 Vue生命周期
生命周期（8部分）beforeCreate:组件实例化之前执行的函数Created:组件实例化创建完成，这个阶段完成了数据观测但是没有挂载，$el不可使用，需要初始化处理一些数据时比较有用，但页面还未显示。beforeMount:组件挂载前，页面仍未显示，但是虚拟DOM已经配置Mounted:组件挂载后，此方法执行之后页面显示，一般我们第一个业务逻辑在这里开始。beforeUp...
2018-07-25 08:25:20
88
翻译 MVVM
M:数据层(核心），也就是程序需要操作的数据或信息。V:view视图层，它是提供给用户的操作界面，是程序的外壳。V:viewModel它负责将数据业务层提供的数据转化为界面展示所需的。双向绑定：View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Mode...
2018-07-25 08:25:12
96
原创 排序算法
1>冒泡1》思想：它重复地走访过要排序的元素，依次比较相邻两个元素，如果他们的顺序错误就把他们调换过来，直到没有元素再需要交换，排序完成。正序最快O(n)反序最慢O(n^2)2》算法步骤：比较相邻的元素，如果前一个比后一个大，就把它们两个调换位置。 对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。这步做完后，最后的元素会是最大的数。 针对所有的元素重复...
2018-07-25 08:24:59
111
原创 浏览器渲染过程
1.页面准备2.重定向：在header定义了重定向才会有这个过程，如果没有就不会产生这个过程关于重定向的分析app cach->DNS解析->TCP连接->request header->重定向->app cach->DNS 解析->TCP连接->request header3.app cache：会先检查这个域名是否有缓存，如果有缓...
2018-07-25 08:24:51
149
原创 浏览器静态资源的版本控制
1.更新资源,我们总是需要改变资源的url. 这本身没有什么问题<script src=http://www.a.com/a.js?v=20121212></script>其中 20121212 部分我们是作为版本号来存在的.事件戳还有一种做法,并不是把日期作为版本号,比如拿文件的内容,用某种hash算法,获得一个字串,作为版本号.这样可以防止竞争对手枚举版本号...
2018-07-25 08:24:42
574
原创 浏览器缓存机制
浏览器缓存浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行储存，当访问者在访问同一个页面时，浏览器就可以直接从本地磁盘加载文档。当用户第一次用户发起一个静态资源请求的时候,http返回200的状态码，如果没有关闭缓存请求的话则会在返回头中返回包含last-Modified以及Etag和Expires的字段，然后将文件保存在Cache目录下；当后续请求该文件时候看缓存类型。分类强缓...
2018-07-25 08:24:33
299
原创 浏览器内核
Trident内核：IE,360,搜狗浏览器，MaxThon,TT,The World,等。Gecko内核MozillaSuite/SeaMonkey，Netscape6及以上版本，FF等Presto内核：Opera7及以上。Webkit内核：Safari,Chrome等。...
2018-07-25 08:24:24
102
原创 link和@import区别
1)从属关系link是HTML提供的签，除了加载CSS外，还可以定义rel属性等@import是CSS提供的语法规则，只能用于加载CSS2)加载的顺序link引入的css在页面加载的时候会同时被加载@import引用的CSS会等到页面加载完后再加载3)兼容性的区别@import是CSS2.1 提出的，只在IE5+以上才能被识别link是HTML标签，不存在兼容问题4...
2018-07-25 08:24:08
187
原创 display
none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 inline： 指定对象为内联元素。 block： 指定对象为块元素。 inline-block： 指定对象为内联块元素。（CSS2） 有换行符。table： 指定对象作为块元素级的表格。类同于html标签<table>（CSS2） inline-table： 指定对象作...
2018-07-25 08:24:01
1300
原创 DOCTYPE
1>内容DOCTYPE是文档类型的简写，在页面中用来指定页面所使用的XHTML(或HTML)版本。<!DOCTYPE>声明位于HTML文档的第一行。告知浏览器的解析器用什么文档标准解析这个文档DTD文档类型定义,有三种：严格DTD,过渡DTD,框架DTD2>两种模式严格模式：又叫做标准模式，是指浏览器按照W3C 标准解析代码。混杂模式：又叫做怪异模式或兼...
2018-07-24 09:03:46
97
原创 文档流
1>概念将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。2>脱离文档流元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。3>脱离文档流的方法float：使用float脱离文档流时，其他盒子...
2018-07-24 09:01:44
118
原创 语义化
1>概念：根据内容的结构，选择合适的标签便于让浏览器的爬虫和机器很好地解析以及开发者阅读和写出更优雅的代码的同时2>原因:1)有利于SEO和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重2)为了裸奔时好看,在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构；3)用户体验：例如title、alt用于解释名词或解释图片信...
2018-07-24 09:00:47
82
原创 多栏布局
1>flex的方法.main{ display:flex; -webkit-display:flex; height:400px;}.main div{ flex:1; background:red; margin-right:10px;}.main div:last-of-type{ margin-right:0;}<div class="main...
2018-07-24 08:57:36
126
原创 文本居中
1)文本居中单行文本垂直居中：line-height，height设为一致即可.center1{ width:400px; text-align:center;//水平居中 height:40px; line-height:40px; }多行文本垂直居中：父级元素高度不固定：只需设置padding-top和padding-bottom的值相等.center2{ wid...
2018-07-24 08:57:26
746
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人