12 2016 档案

Vue in 2016
摘要：原文链接：Vue in 2016 Vue 作者尤雨溪对 Vue 在 2016 年的总结以及未来的展望 现在已经是2016的尾声了！在这过去的12个月里，Vue的持续增长速度已经超过了我的预期--这个项目已经从一个相对较小的小框架成长起来，现在已经被用来和这个领域最出名的框架相比较。让我们看看都发生了 阅读全文
posted @ 2016-12-31 19:44 chenxj 阅读(579) 评论(0) 推荐(0)
用vuejs实现一个todolist项目
摘要：用vue.js实现一个todolist项目：input输入框输入的值会呈现在下方，并且会保存在localStorage里面，而且下方的列表点击之后也会有变化： 完整代码： App.vue store.js: 详细解析 ES6的写法： export default 和 export 区别： 1.exp 阅读全文
posted @ 2016-12-30 19:38 chenxj 阅读(10124) 评论(1) 推荐(2)
vuejs
摘要：简介 Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态 阅读全文
posted @ 2016-12-30 13:47 chenxj 阅读(1290) 评论(1) 推荐(0)
setTimeout和setInterval的注意事项
摘要：精准问题 setTimeout的问题在于它并不是精准的，例如使用setTimeout设定一个任务在10ms后执行，但是在9ms后，有一个任务占用了5ms的cpu时间片，再次轮到定时器执行时，时间已经过期了4ms，那么是不是说setInterval就是准确的呢？ 然而并不是，setInterval存在 阅读全文
posted @ 2016-12-28 21:23 chenxj 阅读(963) 评论(0) 推荐(0)
JavaScript创建对象及对象继承
摘要：面向对象的语言有一个标志，那就是他们都有类的概念，而通过类可以创建任意多个具有相同属性和方法的对象。但是在ECMAScript中没有类的概念，因此它的对象也与基于类的对象有所不同。实际上，JavaScript 语言是通过一种叫做 原型（prototype）的方式来实现面向对象编程的。 基于类的面向对 阅读全文
posted @ 2016-12-27 14:11 chenxj 阅读(356) 评论(0) 推荐(0)
居中的实现方法
摘要：在网页设计中，每当涉及到居中时，最重要的就是将元素及其父元素居中。听起来很简单，那你有没有考虑到很多的可能性呢? 水平垂直 已知宽高的元素 如果你同时知道一个元素的宽和高，并且要将元素相对其父元素垂直居中，那么使用绝对定位来实现或许是一种比较不错的办法。 未知宽高的元素 但页面中很多元素都是未知宽高 阅读全文
posted @ 2016-12-27 09:04 chenxj 阅读(287) 评论(0) 推荐(0)
touch移动触屏滑动事件
摘要：移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。 四种touch事件 touchstart 当手指触摸到屏幕时触发，即使 阅读全文
posted @ 2016-12-26 22:47 chenxj 阅读(663) 评论(0) 推荐(0)
利用js刷新页面方法
摘要：1，reload 方法，该方法强迫浏览器刷新当前页面。 如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户 阅读全文
posted @ 2016-12-25 16:53 chenxj 阅读(87681) 评论(0) 推荐(3)
jQuery源码笔记(二)：定义了一些变量和函数 jQuery = function(){}
摘要：笔记(二)也分为三部分: 一、 介绍： 注释说明：v2.0.3版本、Sizzle选择器、MIT软件许可注释中的#的信息索引、查询地址（英文版）匿名函数自执行：window参数及undefined参数意义 'use strict' 严格模式：代码规范及其不推荐严格模式理由rootjQuery根节点：d 阅读全文
posted @ 2016-12-25 08:23 chenxj 阅读(2278) 评论(0) 推荐(0)
jQuery源码笔记(一)：jQuery的整体结构
摘要：jQuery 是一个非常优秀的 JS 库，与 Prototype,YUI,Mootools 等众多的 Js 类库相比，它剑走偏锋，从 web 开发的实用角度出发，抛除了其它 Lib 中一些中看但不实用的东西，为开发者提供了优美短小而精悍的类库。其使用简单，文档丰富，而且性能高效，能极大地提高 web 阅读全文
posted @ 2016-12-24 16:30 chenxj 阅读(1416) 评论(0) 推荐(0)
关于JavaScript的浅拷贝和深拷贝
摘要：在 JS 中有一些基本类型像是Number、String、Boolean，而对象就是像这样的东西{ name: 'Larry', skill: 'Node.js' }，对象跟基本类型最大的不同就在于他们的传值方式。 基本类型是按值传递，像是这样：在修改a时并不会改到b 但对象就不同，对象传的是按引用 阅读全文
posted @ 2016-12-24 14:58 chenxj 阅读(28066) 评论(5) 推荐(4)
简述JavaScript函数节流
摘要：为什么要用函数节流 浏览器中某些计算和处理要比其他的昂贵很多。例如，DOM 操作比起非 DOM 交互需要更多的内存和 CPU 时间。连续尝试进行过多的 DOM 相关操作可能会导致浏览器挂起，有时候甚至会崩溃。尤其在 IE 中使用 onresize 事件处理程序的时候容易发生，当调整浏览器大小的时候， 阅读全文
posted @ 2016-12-24 11:30 chenxj 阅读(370) 评论(0) 推荐(0)
简述JavaScript的运行机制
摘要：想要理解JavaScript的运行机制，需要分别深刻理解以下几个点： · JavaScript的单线程机制 · 任务队列（同步任务和异步任务） · 事件和回调函数 · 定时器 · Event Loop（事件循环） 一、JavaScript是单线程的？ JavaScript语言的一大特点就是单线程，所 阅读全文
posted @ 2016-12-24 07:44 chenxj 阅读(442) 评论(0) 推荐(0)
在 2017 年将会更加流行的 6 个 Web 开发趋势
摘要：2016即将过去，2017就要来临。 前阵子看到很多对2016前端领域的总结，也是有人欢喜有人忧啊。 转发了这一篇2017web的发展趋势。那么到底会是怎么样的一个发展趋势的，只好拭目以待了。 2017，希望我也能够学的更多，变得更加全面。 原文：6 Web Dev Trends You’re Go 阅读全文
posted @ 2016-12-23 23:22 chenxj 阅读(331) 评论(1) 推荐(1)
All Kind Of Conference（随时更新...）
摘要：收集一些前端开发的各种会议，里面有视频或者PPT，随时查看都还是很有收获的。还有要向这些演讲的前辈看齐～ AC 2015：http://ac.alloyteam.com/2015/ AC 2016：http://ac.alloyteam.com/ 中国首届CSS开发者大会：https://css.w 阅读全文
posted @ 2016-12-23 22:28 chenxj 阅读(271) 评论(0) 推荐(0)
Ajax知识整理
摘要：先引入一下HTTP的请求过程还有介绍一下运行环境 一个完整的HTTP请求过程,通常有下面7个步骤： 建立TCP连接 Web浏览器向Web服务器发送请求命令 Web浏览器发送请求头信息 Web服务器- 应答 Web服务器- 发送应答头信息 Web服务器- 向浏览器发送数据 Web服务器- 关闭TCP连 阅读全文
posted @ 2016-12-23 17:30 chenxj 阅读(473) 评论(0) 推荐(0)
前端技能汇总
摘要：直接上链接，随时查看： 前端技能汇总 Frontend Knowledge Structure 阅读全文
posted @ 2016-12-23 10:55 chenxj 阅读(177) 评论(0) 推荐(0)
关于Promise：你可能不知道的6件事
摘要：FROM ME : 文章介绍了6个Promise的知识点： 1、then() 返回一个 forked Promise(分叉的 Promise)：返回的有两种情况； 2、回调函数应该传递结果：在 promise 的上下文中，回调函数像普通的回调函数一样传递结果，返回的结果传给下一个回调函数； 3、只能 阅读全文
posted @ 2016-12-23 10:25 chenxj 阅读(1256) 评论(0) 推荐(0)
让元素隐藏的方法
摘要：在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。 1、display 这个是彻底的隐藏了元素，不占据空间，也就不影响布局，当然也无法响应事件。 2、visibility 被隐藏的元素依然会对我们的网页布局起作用。但它不会响 阅读全文
posted @ 2016-12-23 08:05 chenxj 阅读(690) 评论(0) 推荐(0)
CSS 继承深度解析
摘要：FROM ME: 之前在研究前端性能优化的时候，就有学习关于CSS中“善用CSS中的继承”。 原文：CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends 译文：掘金翻译计划 我酷爱模块化设计。长期 阅读全文
posted @ 2016-12-22 22:46 chenxj 阅读(15252) 评论(1) 推荐(0)
关于promise（一）
摘要：该新特性属于 ECMAScript 2015（ES6）规范，在使用时请注意浏览器兼容性。 由于ES6原生提供Promise，所以无需安装Promise库。但在ES5环境下我们可以使用bluebird库来提供Promise。 背景知识： 理解一样东西，当然要先了解它是怎么来的 JavaScript是单 阅读全文
posted @ 2016-12-22 19:00 chenxj 阅读(1348) 评论(0) 推荐(0)
事件冒泡、事件捕获和事件委托
摘要：事件流 JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器来预订事件，以便事件发生时执行相应的代码。 事件流的起源：就是在浏览器发展到第四代的时候，浏览器开发团队遇到一个问题：页面的哪一部分会拥有某个特定的事件？要明白这个问 阅读全文
posted @ 2016-12-22 14:01 chenxj 阅读(48345) 评论(6) 推荐(26)
HTTP及状态码汇总
摘要：什么是HTTP： HTTP(HyperText Transfer Protocol超文本传输协议)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准,为了提供一种发布和接收HTML页面的方法。HTTP定义了信息如何被格式化、如何被传输，以及在各种命令下服务器和浏览器所采取的响应 阅读全文
posted @ 2016-12-22 10:45 chenxj 阅读(2752) 评论(0) 推荐(0)
重绘重排重渲染
摘要：FROM ME: 重绘重排重渲染是浏览器呈现页面时需要经历的过程，处理得好可以提升页面的性能，带来更好的用户体验 这篇文章也针对重绘重排重渲染从头到尾做一个比较详细的说明： 浏览器渲染页面的过程：渲染树类似DOM树，但是并不是一一对应的。 重绘与重排：重排和重绘代价是高昂的，它们会破坏用户体验，并且 阅读全文
posted @ 2016-12-22 09:06 chenxj 阅读(1467) 评论(0) 推荐(0)
流畅web动画的十个法则
摘要：from me: web动画能够带来一个非常酷炫的效果，能够让页面有一个更好的用户体验。对于良好的动画性能没有高招，除了将大量的时间放在测试和优化，当然最重要的还是要易于维护。 流畅web动画的十大法则： · 不要改变除了opacity和transform之外的参数！ · 将内容藏在不起眼的地方 · 阅读全文
posted @ 2016-12-21 23:21 chenxj 阅读(1938) 评论(0) 推荐(0)
web安全及防护
摘要：本文将对web方面的安全问题以及相应的防护方法进行一个简单的介绍。 SQL注入（SQL Injection） 原理：就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。具体来说就是用户可以利用恶意的SQL语句提交之后，到后台数据库执行，得 阅读全文
posted @ 2016-12-21 21:04 chenxj 阅读(1341) 评论(0) 推荐(0)
回归基础: JavaScript 变量提升
摘要：from me: javascript的变量声明具有hoisting机制，它是JavaScript一个基础的知识点，也是一个比较容易犯错的点，平时在开发中，大大小小的项目都会遇到。 它是JavaScript引擎在执行的时候，把所有变量的声明都提升到当前作用域的最前面。 当然了，函数声明也是可以被提升 阅读全文
posted @ 2016-12-21 19:52 chenxj 阅读(376) 评论(0) 推荐(0)
CSS技巧-rgba函数的妙用
摘要：先简单介绍一下： rgba()函数是平时开发中经常遇到的，这篇文章也做了一个比较详细的解读以及一系列的应用。 对它的工作原理做一番分析：就是具有一定透明度的盒子； 还比较了rgba()函数和不透明度属性（opacity）的区别：使用 opacity，所有子元素都会受到影响； 在实际开发中，有些地方用 阅读全文
posted @ 2016-12-21 18:54 chenxj 阅读(9242) 评论(0) 推荐(0)
原型与原型链以及方法的存放
摘要：为什么有JavaScript有原型 私有变量和函数 在函数内部定义的变量和函数，如果不对外提供接口，外部是无法访问到的。 静态变量和函数 当定义一个函数后通过点号 “.”为其添加的属性和函数，通过对象本身仍然可以访问得到，但是其实例却访问不到，这样的变量和函数分别被称为静态变量和静态函数。 实例变量 阅读全文
posted @ 2016-12-21 09:50 chenxj 阅读(2481) 评论(0) 推荐(0)
从输入 URL 到浏览器接收的过程中发生了什么事情？
摘要：从输入 URL 到浏览器接收的过程中发生了什么事情？ What really happens when you navigate to a URL 上面两篇文章都解读的很好，值得阅读。 接下来在总结一下这个过程： 1、首先，会查询缓存，如果缓存存在的话则直接响应，否则继续下面过程； 2、当发送一个U 阅读全文
posted @ 2016-12-20 23:40 chenxj 阅读(286) 评论(0) 推荐(0)
JavaScript引用类型
摘要：引用类型虽然看起来和类很相似，但是它们却是不同的概念，引用类型的值，也就是对象是引用类型的一个实例。在Js中引用类型主要有Object，Array，Date，正则，Function等。 数组Array 在Js中数组可以存储任意的数据，而且它的大小是可以动态调整的。创建数组可以使用构造函数的方式也可以 阅读全文
posted @ 2016-12-19 21:05 chenxj 阅读(341) 评论(0) 推荐(0)
浏览器缓存
摘要：引用一篇文章：浏览器缓存知识小结及应用 再加一些自己的理解 阅读目录 1. 浏览器缓存基本认识 2. 强缓存的原理 3. 强缓存的管理 4. 强缓存的应用 5. 协商缓存的原理 6. 协商缓存的管理 7. 浏览器行为对缓存的影响 浏览器缓存，也就是客户端缓存，既是网页性能优化里面静态资源相关优化的一 阅读全文
posted @ 2016-12-19 10:14 chenxj 阅读(1188) 评论(0) 推荐(0)
前端优化
摘要：先引入一片文章先： 如何优化前端页面 / 如何优化网页 优化，在前端是一个非常重要的领域来着，其涉及到前端开发中的方方面面，不仅要在代码编写规范，还要对各种资源进行合理的处理等等。但是，前端优化也不是盲目地进行优化，要稳抓稳打，该优化时优化，不该优化时就不要优化啦。 1、HTML 很容易被网络爬虫识 阅读全文
posted @ 2016-12-18 23:55 chenxj 阅读(236) 评论(0) 推荐(0)
JavaScript中的跨域
摘要：跨域是什么 跨域就是指从一个域名的网页去请求另一个域名的资源,因为JavaScript同源策略的限制,资源无法获取。比如从www.baidu.com 页面去请求 www.google.com 的资源，这是就要用到跨域请求了。严格一点来说就是：只要 协议，域名，端口有任何一个的不同，就被当作是跨域。详 阅读全文
posted @ 2016-12-18 21:37 chenxj 阅读(340) 评论(0) 推荐(1)
面向对象的 CSS (OOCSS)
摘要：原文链接：来自smashing magazine 译文 你是否听说过一个词语叫“内容就是王道”？作为一个 Web 开发者，我们的工作与内容创作有着频繁的联系。这是一条经常被引用，并且正确地解释了什么因素吸引了人们访问网页的谚语。 然而，从 Web 开发者的角度来看，一些人认为速度就是王道。近年来，许 阅读全文
posted @ 2016-12-18 20:33 chenxj 阅读(5058) 评论(0) 推荐(0)
css3 animation 属性众妙
摘要：转自：凹凸实验室（https://aotu.io/notes/2016/11/28/css3-animation-properties/） 本文不会详细介绍每个 css3 animation 属性（需要了解的同学可先移步 MDN），而是结合实际的开发经验，介绍 css3 animation 属性的一 阅读全文
posted @ 2016-12-18 10:38 chenxj 阅读(3576) 评论(1) 推荐(1)
ES6中Arguments和Parameters用法解析
摘要：原文链接 译文 ECMAScript 6 (也称 ECMAScript 2015) 是ECMAScript 标准的最新版本，显著地完善了JS中参数的处理方式。除了其它新特性外，我们还可以使用rest参数、默认值、解构赋值等。 本教程中，我们将详细探索arguments和parameters，看看ES 阅读全文
posted @ 2016-12-17 22:46 chenxj 阅读(6344) 评论(0) 推荐(1)
CSS3中动画属性transform、transition和animation
摘要：Transform：变形 在网页设计中，CSS被习惯性的理解为擅长表现静态样式，动态的元素必须借助于javascript才可以实现，而CSS3的出现改变了这一思维方式。CSS3除了增加革命性的创新功能外，还提供了对动画的支持，可以用来实现旋转、缩放、平移、扭曲和过渡效果等等，这些功能再一次证明了CS 阅读全文
posted @ 2016-12-17 20:41 chenxj 阅读(6767) 评论(0) 推荐(1)
JavaScript闭包
摘要：闭包这个东西确实好用，理解他对学习JavaScript确实很有帮助。 闭包的内部细节，依赖于函数被调用过程所发生的一系列事件为基础，所以有必要先弄清楚以下几个概念：1. 执行环境和活动对象、2. 作用域链。 在javascript中，执行环境可以抽象的理解为一个object，它由以下几个属性构成： 阅读全文
posted @ 2016-12-17 12:46 chenxj 阅读(295) 评论(0) 推荐(0)
JavaScript的作用域与作用域链
摘要：作用域 作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。可以说，变量和函数在什么时候可以用，什么时候被摧毁，这都与作用域有关。 JavaScript中，变量的作用域有全局作用域和局部作用域两种。 1. 全局作用域（Global Scope） 在代码中任何地方都能访问到的 阅读全文
posted @ 2016-12-17 11:08 chenxj 阅读(1053) 评论(0) 推荐(1)
运动曲线提升CSS动画效果
摘要：原文链接 译文\译者鞠大宝 先有UI动画，然后才会有好的UI动画。好的动画会让人惊叹“哇哦！”——因为页面看上去很流畅、很漂亮，最重要的是，自然，一点都不会让人觉得不和谐或者僵硬死板。如果你经常逛Dribbble或者 UpLabs这类网站的话，你就会明白我在说什么了。 一些极好的拓展阅读资源: ·S 阅读全文
posted @ 2016-12-17 09:20 chenxj 阅读(4716) 评论(0) 推荐(0)
设计一个应用或网站时的流程
摘要：大致的情况如下： 1. 申请你的网站域名以及域名备案、服务器、空间（程序、技术的工作）；一个网站的建设首先要有一个好的域名。域名空间。网站空间是用来存放您的网站内容和程序文件，比如网页、图片、视频资料等等。2. 网站的架构和内容策划（网站策划的工作）；分析你的需求。你此时应该定义出一个尽量周全的你的 阅读全文
posted @ 2016-12-17 00:02 chenxj 阅读(313) 评论(0) 推荐(0)
JavaScript 与函数式编程
摘要：原文：https://bethallchurch.github.io/JavaScript-and-Functional-Programming/ 译文：http://www.zcfy.cc/article/1013 译者注：推荐一篇译文，《函数式编程术语解析》。 本文是我在 2016 年 7 月 阅读全文
posted @ 2016-12-16 22:37 chenxj 阅读(2002) 评论(1) 推荐(2)
声明式编程与命令式编程
摘要：先统一一下概念，我们有两种编程方式：命令式和声明式。 我们可以像下面这样定义它们之间的不同： ·命令式编程：命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实现。·声明式编程：告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)。 声明式编程 阅读全文
posted @ 2016-12-16 20:02 chenxj 阅读(3756) 评论(0) 推荐(3)
call(),apply()和bind()
摘要：三个函数都是Function对象自带的三个方法，主要作用是改变函数中this的指向。 call() 语法 fun.call(thisArg[, arg1[, arg2[, ...]]]) 该方法可以传递一个thisArgs参数和一个参数列表，thisArgs指定了函数在运行期的调用者，也就是函数中的 阅读全文
posted @ 2016-12-16 17:28 chenxj 阅读(321) 评论(0) 推荐(0)
DOM的相关优化
摘要：为什么要进行DOM优化？ DOM对象本身也是一个js对象，所以严格来说，并不是操作这个对象慢，而是说操作了这个对象后，会触发一些浏览器行为，比如布局（layout）和绘制（paint）。 首先先说一些浏览器是怎么样把一个页面呈现出来的： 一个浏览器有许多模块，其中负责呈现页面的是渲染引擎模块。 这个 阅读全文
posted @ 2016-12-16 16:33 chenxj 阅读(426) 评论(0) 推荐(0)