![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript开发+学习记录
文章平均质量分 88
SerenoShen
不断提升自己!加油!加油!!
展开
-
优化JS中的Async/Await 使用
JS中调用 async 函数时会返回一个 Promise 对象(隐式转换)。当async 函数返回一个值时,Promise 的 resolve 方法会负责传递这个值,当 async 函数抛出异常时,Promise 的 reject 方法也会传递这个异常值。 在async 函数中如果遇见 await 表达式,则 async 函数会暂停执行,等待表达式中的 Promise 解析完成后继续执行 asyn原创 2017-12-28 15:46:30 · 4154 阅读 · 0 评论 -
为Angular内置$http服务添加拦截器
为Angular内置$http服务添加拦截器在Angular框架中,创建团队为使用者进行了Ajax请求的封装,并通过http服务暴露出相关的接口.Angular在其官方文档中指出,http服务暴露出相关的接口.Angular在其官方文档中指出,http服务底层针对Web常见的安全攻击做出了相应的对策,也就是说使用http服务封装的Ajax为使用者提供了更为安全的保障.作为一个框架,保证框架的可用性,原创 2016-10-13 09:33:24 · 9500 阅读 · 0 评论 -
React学习笔记--通过Redux 的三个基本原则来理解Redux
澄清一个事实严格的说来,Redux属于一种编程思想,类似于Flux,但是不同于Flux, Redux中并没有 dispatcher 的概念。事实上Redux 和 React 之间没有任何直接的关系。Redux 可以通过 React、Angular、jQuery 甚至纯 JavaScript来使用。当然,Redux 还是和 React 这类框架搭配使用才能更加有效的体现其作用,类React的前端框架通原创 2016-09-27 13:50:10 · 3995 阅读 · 0 评论 -
JavaScript简单实现Promise/A+规范
Promise/A+规范是什么Promise表示一个异步操作的最终结果。与Promise最主要的交互方法是通过将函数传入它的then方法从而获取得Promise最终的值或Promise最终最拒绝(reject)的原因。具体详细的讲解请移步: - wikipedia上的介绍 -官方介绍网址简单的实现代码'use strict';Promise = () => {};var isPromise =原创 2016-09-26 16:14:28 · 1708 阅读 · 0 评论 -
Node.js + Redis Sorted Set 实现简单的任务队列
需求: 功能 A 需要调用第三方 API 获取数据,而第三方 API 自身是异步处理方式,在调用后会返回数据与状态 { data: “查询结果”, “status”: “正在异步处理中” },这样就需要间隔一段时间后再去调用第三方 API 获取数据。为了用户在使用功能 A 时不会因为第三方 API 正在异步处理中而必须等待,将用户请求加入任务队列中,返回部分数据并关闭请求。然后定时从任务队列里中取转载 2016-09-19 13:08:23 · 4514 阅读 · 0 评论 -
canvas 实现环形进度条
直接上代码: Canvas progress (function (){ var c = document.getElementById('process'), process = 0, ctx = c.getContext('2d'); // 画灰色的圆 ctx.beginPath(); ctx.arc(100, 100, 80原创 2016-09-06 23:11:44 · 8376 阅读 · 0 评论 -
前端性能优化--避免大规模、复杂的布局
布局,就是浏览器计算DOM元素的几何信息的过程:元素大小和在页面中的位置。每个元素都有一个显式或隐式的大小信息,决定于其CSS属性的设置、或是元素本身内容的大小、抑或是其父元素的大小。在Blink/WebKit内核的浏览器和IE中,这个过程称为布局。在基于Gecko的浏览器(比如Firefox)中,这个过程称为Reflow。虽然称呼不一样,但二者在本质上是一样的。布局通常是在整个文档范围内转载 2016-08-26 11:26:05 · 1353 阅读 · 0 评论 -
使用 Gulp 配置 Web 开发服务器
原文:Gulp as a Development Web Server作者:Johanes Schickling构建工具 Gulp.js 最近正在变得越来越流行。我们可以用它做很多事,比如合并 Javascript 文件或者压缩图片。如果你还不了解 Gulp.js, 可以看一下《前端构建工具 Gulp.js 上手实例》。本文将向你介绍如何使用 Gulp.js 来作为翻译 2016-09-02 17:54:59 · 9952 阅读 · 0 评论 -
前端构建工具 Gulp.js 上手实例
翻译自:Managing Your Build Tasks With Gulp.js,原作者 Rey Bango在软件开发中使用自动化构建工具的好处是显而易见的。通过工具自动化运行大量单调乏味、重复性的任务,比如图像压缩、文件合并、代码压缩、单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的、有意义的工作,比如设计业务逻辑,编写代码等等。接下来我们就一原创 2016-09-02 17:58:32 · 2119 阅读 · 0 评论 -
AngularJS RootScope 源码分析
AngularJS RootScope 源码分析预备知识:Provider 中的 $get 属性说起这个$get属性,是每个系统provider都有的,主要是先保存要实例化的函数体,等待instanceinjector.invoke的时候来调用,因为$get的代码比较多,所以先上要讲的那部分,大家可以注意到了,在$get上面有一个digestTtl方法this.diges原创 2016-08-11 20:29:20 · 1623 阅读 · 0 评论 -
移动端H5,Hybird开发点击穿透事件处理
What现象描述: 页面中存在上下两个层,上层元素具有表单,链接或者绑定相应事件,上层元素点击或触摸,导致上层DOM改变,下层中同样位置的 元素触发点击事件。这种现象就是点击穿透(Ghost Clicks)。要理解这种现象,首先要了解移动端的相关事件 —— 触摸(Touch)事件,点击(Click)事件。以及移动端事件触发的顺序关系:touchstart --> mouseover(有原创 2016-08-27 20:19:52 · 5085 阅读 · 0 评论 -
Angularjs学习笔记--ui-Router
Angularjs ui-router - 组件:$state / $stateProvider:管理状态定义、当前状态和状态转换。包含触发状态转换的事件和回调函数,异步解决目标状态的任何依赖项,更新$location到当前状态。由于状态包含关联的 url,通过$urlRouterProvider生成一个路由规则来执行转换的状态。ui-view指示器:渲染状原创 2016-05-05 19:40:20 · 20609 阅读 · 0 评论 -
HTML原生实现下拉帅新和滑动方向判断
最近在学习Hybrid应用时,需求中有一个模拟界面左右滑动更新试图的需求,以及下来模拟原生应用的下拉刷新和上拉记载更多的需求,虽然当下已经有一些第三方框架提供了相应的功能,但是作为一个爱折腾的我(PS: 使用别人创建的东西仅仅是学习了一门工具的使用,使用轮子的人很难体会到创建轮子的人的快乐的),自己试着写了一个自己的判断方法,虽然很粗糙,但是基本还是能够正确判断滑动方向的,今晚没时间完善了,后续更新原创 2016-04-20 22:18:16 · 1361 阅读 · 0 评论 -
Cordova android框架详解
一、Cordova 核心java类说明 CordovaActivity:Cordova Activity入口,已实现PluginManager、WebView的相关初始化工作, 只需继承CordovaActivity实现自己的业务需求。PluginManager: 插件管理器ExposedJsApi :javascript调用Native, 通过插件管理器Plugi转载 2016-05-04 23:09:16 · 1197 阅读 · 0 评论 -
AngularJS学习笔记--002--Angular JS路由插件ui.router源码解析
路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分。那么,对于angular而言,它自然也有内置的路由模块:叫做ngRoute。不过,大家很少用它,因为它的功能太有限,往往不能满足开发需求!!于是,一个基于ngRoute开发的第三方路由模块,叫做ui.router,受到了大家的“追捧”。转载 2016-05-04 13:14:55 · 2778 阅读 · 0 评论 -
HTML5移动端meta标签中viewpoint简介
viewport 语法介绍: content=" height = [pixel_value | device-height] ,原创 2016-04-30 00:00:26 · 7880 阅读 · 0 评论 -
React 设计思想
React 设计思想 译者序:本文是 React 核心开发者、有 React API 终结者之称的 Sebastian Markbåge 撰写,阐述了他设计 React 的初衷。阅读此文,你能站在更高的高度思考 React 的过去、现在和未来。原文地址:https://github.com/reactjs/react-basic我写此文是想正式地阐述我心中 React 的心智模型。目的是解释为转载 2016-09-28 08:36:09 · 3272 阅读 · 0 评论 -
提升CSS文件的可维护性--采用BEM进行CSS类进行命名
BEM(Block–Element-Modifier)是什么?BEM是由Yandex公司推出的一套CSS命名规范,官方是这么描述它的:BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development--原创 2016-11-10 20:39:28 · 2448 阅读 · 0 评论 -
MacOS 下配置命令行下使用Sublime打开文件
在命令行下执行如下语句$ ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/local/bin/.$ echo $PATH如果PATH路径中没有 /usr/local/bin/ ,则添加如下语句到 .bashrc 或者 .zshrc 文件中PATH=$PATH:/usr/local/bin/;原创 2017-11-03 11:16:21 · 1058 阅读 · 0 评论 -
React Router v4 版本学习指南
React Router v4 版本学习指南React Router 事实上是React官方的标准路由库。当你在一个多视图的React应用中来回切换,你需要一个路由来管理那些URL。React Router 专注于此,同步保持你应用的UI和URL。这个教程主要给你介绍React Router 的v4版本,以及你使用它可以做的大部分事情。开场白React 是一个很流行的库,用于在客户端渲染创建的单页应翻译 2017-11-01 14:06:26 · 3645 阅读 · 0 评论 -
关于渐进式(PWA) Web 应用,你应该知道的一切
渐进式 Web 应用是利用现代浏览器的特性,可以添加到主屏幕上,表现得像原生应用程序一样的 Web 应用程序。本教程将用实例和一个演示应用程序,一步一步向你展示关于渐进式 Web 应用程序你应该知道的一切。为了不从零开始,我们打算用我们最近做过的一个自拍应用程序,并逐步创建它。转载 2017-09-12 17:11:47 · 5517 阅读 · 0 评论 -
Web性能优化之无阻塞加载Javascript文件的最优策略
JavaScript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题。 在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 。原因是,事实上,大多数浏览器使用单进程处理UI和更新JavaScript运行等多个任务,而同一时间只能有一个任务被执行。JavaScript运行了多长时间,那么在浏览器空闲下来响应用户交互之前的等待时间就有多长。 从基本原创 2015-10-08 16:38:14 · 1185 阅读 · 1 评论 -
ReactJS组件的生命周期
先来看看官方给出的示例图,然后我们在通过代码来实际感受一下: 为了理解ReactJS中的组件的生命周期,我们通过下面的示例代码来直观的感受一下,当我们的React组件的整个生命周期都发生了哪些事件。直接上代码和运行结果吧!css代码.main { padding: 10px 50px; }.log { padding: 5px; border-bottom: 1px solid原创 2017-08-23 10:46:29 · 497 阅读 · 0 评论 -
采用Webpack构建Angular应用以及AoT支持
采用Webpack构建Angular应用程序以及AoT支持Angular支持多种代码打包方式,例如:官网示列使用的System.js,还有特别好使的Rollup,目前火的不行的Webpack,还有略显过时的Browserify等等。不过打包工具就是一个工具而已,并没有什么好坏之分,只是不同的应用场景是不适合而已。作为一个从Angular发布就一直使用至今的玩家,今天记录一下如何使用Webpack原创 2017-07-29 10:42:23 · 2755 阅读 · 0 评论 -
Git中fetch和pull命令的区别
两者具体的区别fetch Git中的fetch命令是将远程分支的最新内容拉到了本地,但不立即将远程分支的变更合并到本地分支上。当我们执行完fetch命令后,在执行git branch命令会发现此时后本地多了一个FETCH_HEAD的分支。我们可以checkout到该分支查看远程分支的最新内容。以便于我们有机会查看远程分支都做了什么改动。 当我们检查完成后在checkout回本地分支执行merg原创 2017-08-04 19:46:00 · 3637 阅读 · 0 评论 -
CSS3 Flex布局详解与新旧法语对比
CSS Flex 新旧法语对比FlexBox 模型图解老版本的语法定义容器的display属性.box{ display: -moz-box; /*Firefox*/ display: -webkit-box; /*Safari,Opera,Chrome*/ display: box;}容器属性1.box-pack 属性box-pack定义子元素主轴对齐方式, box-pa原创 2016-09-08 11:24:57 · 3460 阅读 · 0 评论 -
移动端Web界面滚动性能优化: Passive event listeners
移动端Web界面滚动性能优化: Passive event listeners今晚在阅读VueJS2的源码时,发现了下面的一段代码,感觉自己瞬间知识储备不够用了,所以决定深入研究一下,故总结得出此文。关于VueJS的源码解读,之后会整理出学习笔记。这里先简单记录一些碎片化的知识点。 try { const opts = {} Object.defineProperty(opts, '原创 2017-04-16 22:16:03 · 12257 阅读 · 5 评论 -
Webpack构建项目时将vendor与app目录下的文件分开打包
当我们开发一个单页应用时,常见的优化做法是生成两个文件:vendor.js:包含一些第三方依赖,如:Vue 等app.js:包含业务逻辑代码通常为了方便开发调试,或者是部署到生产服务器时提高应用的访问速度,我们通常会根据文件内容计算出一个hash值,并将改值添加到文件名中,并配置一个长达一年的 Cache Control。选择这样做,主要是因为 vendor.js(webpack打包出来的第三原创 2017-04-12 14:54:33 · 8570 阅读 · 0 评论 -
协程(Coroutine)-ES中关于Generator/async/await的学习思考
协程--轻量级的用户态线程协程(Coroutine)是一种轻量级的用户态线程。简单来说,进程(Process), 线程(Thread)的调度是由操作系统负责,线程的睡眠、等待、唤醒的时机是由操作系统控制,开发者无法精确的控制它们。使用协程,开发者可以自行控制程序切换的时机,可以在一个函数执行到一半的时候中断执行,让出CPU,在需要的时候再回到中断点继续执行。因为切换的时机是由开发者来决定的,就可以结原创 2017-03-10 11:30:11 · 4519 阅读 · 1 评论 -
在Angular应用启动前获取数据并注入到应用中
在Angular应用启动前获取数据并注入到应用中在部分业务场景下,我们在启动客户端Angular应用时,可能需要将一些数据注入到Angular应用中,比如:配置文件信息-让应用根据不同的配置信息进行初始化操作,应用的遗留数据信息-实现应用的平滑升级等等。如何实现这样的需求呢要实现这样的需求,我们需要改变一下Angular应用的启动方式。我们将启动入口函数封装到另外的函数中,并将这个函数导出,导出的函原创 2017-03-20 11:19:23 · 2152 阅读 · 2 评论 -
Angualr 组件间通信
Angualr 组件间通信约定: 遵循Angular官方的说法,下文中的AngularJS代指1.x版本,Angular代指Angular2及以后的升级版本。采用Angular(或者任意MV*)的前端框架开发单页应用(SPA)时,我们都可能会遇见如下的场景: A组件和B组件之前需要相互通信,或是A路由状态需要知道B路由状态的信息等等业务需求。 这个时候就需要设计到采用一套合理的通信方案来解决数据原创 2017-01-20 16:50:12 · 5189 阅读 · 2 评论 -
AngularJS指令中的compile与link函数解析
AngularJS指令中的compile与link函数解析通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别.原文地址angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者.网上已经有很多介绍翻译 2016-12-19 15:42:47 · 5925 阅读 · 0 评论 -
AngularJS 学习笔记 -- 指令(Directive)
AngularJS 指令学习笔记AngularJS怎样处理指令其实是依赖于指令定义时返回的对象属性的,所以要想深入理解如何定义一个指令,首相需要理解指令定义时各个参数的含义。完整的AngularJS指令参数angular.module('app', []) .directive('demoDirective', function (){ // 依据官方规范,指令的定义时应该严格遵循驼峰式命名原创 2016-04-17 14:55:23 · 7473 阅读 · 0 评论 -
移动端 touchmove高频事件与requestAnimationFrame的结合优化
移动端最高频耗内存的的操作 莫属 touchmove 与scroll事件 两者需要 微观的 优化;这里 我们 讲述 touchmove;touchmove 事件发生很频繁,会比屏幕刷新率快,导致无效的渲染和重绘;帧数 –显示设备通常的刷新率通常是50~60Hz –1000ms / 60 ≈ 16.6ms(1毫秒的优化意味着 6%的性能提升)浏览器对每一帧转载 2016-04-28 00:13:54 · 10196 阅读 · 1 评论 -
Chrome调试技巧
谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器。伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须掌握的工具。大多数前端开发者可能熟悉关于chorme的许多特点,例如使用console和debugger在线编辑CSS。在这篇文章中,我们将分享15个很酷的技巧,让你能够更好的改进工作流程。看完这些技巧你会惊奇而又兴奋的发现是不是很像Sublime Text。转载 2016-03-27 15:54:07 · 9643 阅读 · 4 评论 -
Markdown常用语法简介
Markdown 语法标题:如果一段文字被定义为标题,只要在这段文字前加 # 号即可。# 标题一## 标题二...###### 标题六列表:列表的显示只需要在文字前加上 - 或 * 即可变为无序列表,有序列表则直接在文字前加 1. 2. 3. 符号要和文字之间加上一个字符的空格。无需列表:* 小标题一* 小标题二有序列表:1. 小原创 2015-08-27 11:55:01 · 580 阅读 · 0 评论 -
JavaScript与jQuery中获取屏幕的宽度和高度的常用方法以及HTML中精确定位
浏览器的宽高示意图:JavaScript中常用的方法:网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线原创 2015-08-11 09:20:52 · 4031 阅读 · 2 评论 -
JavaScript中模拟实现Java的集合类Map的常用方
JavaScript中模拟实现Java的集合类Map的常用方法(function Map(){var size = 0, map = {},strundefined;function MapCache() {}MapCache.prototype.put = function (key, value){if ( key === null ||原创 2015-08-04 10:00:20 · 752 阅读 · 0 评论 -
sizzle.js学习笔记利用闭包模拟实现数据结构:字典(Map)
sizzle.js学习笔记利用闭包模拟实现数据结构:字典(Map)这几天学习和查看了jQuery和Property这两个很流行的前端库的御用选择器组件Sizzle.js的源代码,收获还是相对多的!之前一直做使用Java语言开发,其丰富的组件类库使得开发效率那叫一个快呀!突然转来做JavaScript一时间还有点儿不适应(快半年了),不过自从看见那么多漂亮的网站和对JavaScript接触的越来原创 2015-06-30 22:36:53 · 1533 阅读 · 0 评论 -
[译]JavaScript中:表达式和语句的区别
[译]JavaScript中:表达式和语句的区别原文:http://www.2ality.com/2012/09/expressions-vs-statements.html本文要讲的是JavaScript中非常重要的两个知识点:表达式(expressions)和语句(statements)之间的区别.1.语句和表达式JavaScript中的表达式和语句是有转载 2015-06-30 16:22:12 · 622 阅读 · 0 评论