标签: 学习笔记

记录点滴,修炼自己。
0

AngularJs中使用拦截器interceptor对全局HTTP错误进行统一处理

前言  在web开发的各种业务场景中,http请求无疑是家常便饭,任何前后端交互数据都需要通过http请求进行传输。同时我们知道,HTTP响应有很多状态码,对应着很多种不同的服务处理结果。在这种情况下,如果项目中每一处http请求中我们都要对各种响应结果做以判断的话,那么整个工程中就会出现大量重复代码,这样做会带来不少问题,比如:重复劳动,代码结构不清晰、核心逻辑不明确,一旦对错误处理的需求变更

0

AngularJs的$emit和$broadcast事件分析

前言  Angular的作用域在本质上是分层次的:它们可以通过父子关系很自然地来回沟通。但通常,作用域是不共享变量的,它们执行的功能往往各不相同,跟在父树上的位置无关。在这种情况下,我们可以通过在这个链上传递事件的方式在作用域之间通信。  因为作用域是有层次的,所以我们可以在作用域链上传递事件。通常来说,选择要使用的事件传递方式,一个好的经验法则是:查看将要触发事件的作用域。如果要通知整个事件系

0

AngularJs中组件---component的相关总结

前言  组件component是AngularJs中一个非常重要的概念,一个项目的前端代码结构可以完全以组件component为单位进行实现,也就是说项目的不同页面(比如列表页、详情页、编辑页)或者通用功能(比如表格渲染组件、分页组件)都可以设计为一个独立的component,再通过路由配置关联起来,实现功能需求。本篇以AngularJs官方文档为根据,对组件相关内容进行总结。 综述  在An

0

AngularJs中$scope.$apply()方法总结

功能  $apply()函数可以从Angular框架的外部让表达式在Angular上下文内部执行。例如,假设你实现了一个setTimeout()或者使用第三方库并且想让事件运行在Angular上下文内部时,就必须使用$apply()。 参数  $apply()函数接受一个可选的参数。这个表达式可选地接受一个字符串或函数,并且是在当前作用域内执行。如果传入一个字符串,$apply()首先会在这个

0

AngularJs中$q服务(service)的使用

前言  $q服务的实现与ES6(ES2015)中的promise十分相似,这种方式改变了传统长期使用的JavaScript异步编程方式-处理回调函数。试想一下,如果有这样的业务逻辑:我们需要根据某个异步ajax请求的结果是否符合要求,再发起一个异步请求,在回调函数中对响应数据进行请求后再发起异步请求… …当出现这样的异步嵌套逻辑,代码结构就会变得很差。promise正是改变了这种情况,以一种流式

0

使用dora-proxy-plugin处理异步请求跨域问题

前言  这个问题描述的背景,是基于访问本地前端项目的nodejs服务器,但是却请求线上API数据接口的场景。如果能做到统一本地线上环境是更好的,有利于维护和调试,具体做法可以参考:使用SwitchyOmega和Charles配置统一的开发和生产环境、客户端代理配置的几种常见方式 概述  根据前后端分离的原则,前端独立进行功能的开发,在与后端真实接口进行对接之前,可以自己通过mock数据的方式进行

0

HTTP协议的持久连接-"keep-alive"与"persistent"

前言 “keep-alive”概述  HTTP协议采用“请求-应答”模式,当使用普通模式,即非KeepAlive模式时,每个请求/应答客户和服务器都要新建一个连接,完成之后立即断开连接(HTTP协议为无连接的协议);当使用Keep-Alive模式(又称持久连接、连接重用)时,Keep-Alive功能使客户端到服务器端的连接持续有效,当出现对服务器的后继请求时,Keep-Alive功能避免了建立

0

浏览器的文档模式-“标准模式”和“怪异模式”

前言  所谓的标准模式是指,浏览器按W3C标准解析执行代码;怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式,与你网页中的DTD声明直接相关,DTD声明定义了标准文档的类型(标准模式解析)文档类型,会使浏览器使用相应的方式加载网页并显示,忽略DTD声明,将使网页进入怪异模式(quirks mode)

0

JavaScript中的事件传播机制

前言  javascript与html的交互是通过事件实现的。在DOM2级模型中,为DOM元素绑定的事件有一套完整的事件传播机制,主要有3个阶段,本文进行小结。 ##

0

git pull 与 git fetch 的区别

概述引用网上的一张图来说明 对比git fetch1.git fetch这将更新git remote 中所有的远程repo 所包含分支的最新commit-id, 将其记录到.git/FETCH_HEAD文件中。 2.git fetch remote_repo这将更新名称为remote_repo 的远程repo上的所有branch的最新commit-id,将其记录。 3.git fetch r

0

$(document).ready与window.onload的区别

document.ready执行时机  只要页面DOM结构绘制完毕就执行,不必等到外部资源(图片,css等)加载完毕。 并且,在jquery中,$(function(){}) 和$(document).ready(function(){})两种写法是等价的。 特点  在同一个页面中可以写多次,会顺序执行,见下面测试。 window.onload执行时机  必须等到页面内包括图片的所有元素加载完

0

JavaScript异步编程案例

【转载】阮一峰 Javascript异步编程的4种方法 前言你可能知道,Javascript语言的执行环境是”单线程”(single thread)。 所谓”单线程”,就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。 这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执

0

前端常用的几种图片格式及使用场景

基本概念矢量图与位图  矢量图是通过组成图形的一些基本元素,如点、线、面,边框,填充色等信息通过计算的方式来显示图形的。一般来说矢量图表示的是几何图形,文件相对较小,并且放大缩小不会失真。  位图又叫像素图或栅格图,它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图,只不过每个拼块都是一个纯色的像素点。位图的优点是利于显示色彩层次丰富的写实图像。缺点

0

可视化HTML5页面拖拽构建工具demo

简介  demo,在web端通过拖拽编排的方式快速定制活动H5页面,初步阶段完成。 交互方式及效果呈现 demo源码托管于github,详见Github gcidea/html5-draggable 使用流程1.拖拽页面布局至手机预览区2.根据不同类型的布局,点击可以编辑不同参数3.布局定制完成后可以向布局中拖拽添加素材4.页面定制完成后可以分享页面(TODO) 改进作为demo,目前还有

0

CSS中a:link、a:visited、a:hover、a:active的使用总结

前言伪类 伪元素 区别  可以理解为:伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到。伪类用一个冒号来表示,而伪元素则用两个冒号来表示。 概述:link 选择器对指向未被访问页面的链接设置样式,即页面初始化加载完成的时候。:visited 选择器用于选取已被访问的链接,即已经访问过的链接。:hover 选择器用于设置鼠标指针浮动到链接上时的样式,即鼠

0

CSS3媒体查询@media功能使用总结

前言  媒体查询包含一个可选的媒体类型和零或多个表达式来限制使用媒体特性的样式表范围,这些表达式会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备的类型以及所有的表达式的值都是true,那么该媒体查询的结果就是true。例如width,height,color。CSS3中的Media queries让内容的呈现可以只针对特定范围的输出设备而不必去改变内容本身。

0

使用原生js实现元素拖拽功能

前言  本篇仅对拖拽过程中核心几个事件监听的写法进行小结,不涉及页面样式效果的展现。 实现1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818

0

DOM级别

DOM目标  DOM标准的目标是让“任何一种程序设计语言”能操控使用“任何一种标记语言”编写出的“任何一份文档”。“操控”具体含义为能通过DOM提供的API对文档的内容、结构、样式进行访问和修改。 DOM分类 DOM核心:针对任何结构化文档的标准模型 DOM XML :只针对XML文档的标准模型 DOM HTML:只针对HTML文档的标准模型 DOM级别DOM Level 0  实际上没有