标签: JavaScript

记录点滴,修炼自己。
0

JavaScript中比较运算的详细总结

前言  在javascript开发中,比较操作是十分常见的。由于显式/隐式强制类型转换机制的存在,我们在使用比较运算时显得过于随意,也许表面上看并没有什么错误(比如在if()语句中判断两值相等时顺手就写成 == ),但是这可能会埋下很多不易发现的隐患。对于比较操作(相等关系和不等关系),在javascript中其实是有一套完善的机制的。本文依据ES5规范《ECMAScript Language

0

JavaScript中对象属性存在性及相关检测方法总结

前言  访问一个对象中的某个属性时,返回的结果可能是undefined,这有可能是本身该属性存储的值就是undefined,也有可能是该属性在对象中不存在。对此,就产生了判断属性存在性的相关问题和解决方法。 in操作符语法格式1234567var obj = { name : "Bob", age : 24};("name" in obj); //true("sex" i

0

【探究】当页面关闭时,不同浏览器对尚未完成的异步请求如何处理?

前言  以使用$.ajax()方法发出一个异步请求为例,探究当执行完发出异步请求的同步代码但尚未执行异步回调的函数的时候,关闭浏览器,不同浏览器对此有何处理。并且,这个问题是因为看到了一种不规范写法而发现的—场景是,执行完相关保存任务(异步请求)后关闭当前页面。这种写法把window.close()相关代码却写在了$ajax()的外面(后面)。违背了在成功保存的回调内关闭页面的做法。 Chro

0

JavaScript中的对象、constructor属性、prototype属性对比分析

前言  首先想说的是,这篇文章的题目准确怎么定我就考虑了不少时间。想过“JavaScript中的对象及其constructor属性和prototype属性”,想过“JavaScript中的对象、构造函数对象(constructor)和原型对象(prototype)”等等,但总觉得不够清楚。说实话现有的这个题目也不一定是很好的,只是相比较之下,选择一个“三者相对独立”的说法,这样就不会有先入为主的

0

JavaScript中值传递和引用传递的典例探究

概述  在Javascript中,基本类型(null, undefined, number, string, boolean, symbol)是通过值传递方式进行,而复合类型(object, array, function)则是通过引用传递方式进行。  但是,由于Javascript工作机制所决定,在js中,引用指向的其实是值,而无法指向其他引用,这和其他语言中的指针并不相同。  其实,两者都可

0

JavaScript中创建对象的7种模式和实现继承的6种方式

前言  JavaScript是一种面向对象(OO)的语言,但由于ECMAScript没有类的概念(ES6引入关键字class),所以在js中创建对象的方法也与其他基于类的语言有所不同。本篇总结在JavaScript中创建对象的7种方法;并在此基础上,总结实现继承的6种方式。 JavaScript中对象的基本概念创建对象的2种基本方法 创建一个Object实例123456var person =

0

关于JavaScript生成器generator和yield的一些理解

综述  Generator(生成器)函数是ES6提供的一种异步编程解决方案,而yield则是配合生成器函数使用的。 Generator函数定义  function* 声明(function关键字后跟一个星号)定义一个generator(生成器)函数,返回一个Generator对象。 语法function* name([param[, param[, ... param]]]) { statem

0

JavaScript中的__proto__、[[prototype]]和prototype

前言  proto、[[prototype]]和prototype三个概念及相关内容是javascript比较复杂且容易混淆的内容。本文尝试进行总结和分析。 prototype相关介绍  待续。 __proto__与[[prototype]]相关介绍  待续。 一张图分析三者的关系 一系列案例分析12345function Foo(){ console.log(1);}

0

客户端浏览器检测

前言  几种web浏览器在实现相关标准时会有一些差异和区别,这可能会给开发带来一些问题。此时就会需要进行客户端检测从而给出不同的方案。但是,从根本上来讲,只要能够找到更通用的方法,就应该优先采用更通用的方法,先设计最通用的方案,然后再使用特定于浏览器的技术增强该方案。《JavaScript权威指南》相关描述如下: 检测方法与主要参数navigator对象的主要参数 方法 主流浏览器的userAg

0

JavaScript的预加载与懒加载

预加载目的  增强用户的体验,当用户需要查看时可直接从本地缓存中渲染。。否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白。但会加载服务器的负担。并且,如果不设置预加载,那么当需要渲染十分大的图片时,可能就会有“逐行扫描渲染”的感觉,用户体验不好。使用预加载的话,我们可以在图片完整渲染完成之前在页面上设置“loading”类的图标提示,而当图片数据完全获取后一次

0

使用AngularJs封装Tabs选项卡组件

angular-table使用AngularJs封装Tabs选项卡组件 功能描述  该组件是管理系统中很常用的功能,平台使用者可能会同时使用不同模块的功能,这时候需要打开多个模块,Tabs组件是一种类似浏览器多标签页的效果。可以: 可以在多个模块的页面间进行切换 在某个页面上右键关闭 附带收起侧边栏功能 … 实现 demo源码托管于github,详见Github gcidea/angula

0

使用AngularJs封装表格内容渲染(含分页)组件

功能描述  该组件是管理系统中很常用的功能,管理系统的典型使用是批量数据的处理,表格展示是最直接的方式。该插件实现: 批量数据的列表展示 每行数据提供操作项(修改,删除等)接口 翻页查询接口 每页显示条数修改 点击表头排序 列表宽度自定义 … 实现 demo源码托管于github,详见Github gcidea/angular-table html结构  承载该表格插件的主要html结

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

JavaScript中的事件传播机制

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

0

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

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