Archived

「 179 」

• March 2025

• March 10, 2025
  vue3实现虚拟滚动组件

  以下是在 Vue3 中实现高性能虚拟滚动组件的核心技术方案及代码实现： 一、核心架构设计（Composition API）<script setup> import { ref, computed, onMounted, onUnmounted } from 'vue' // 响应式数据 const containerRef = ref(n...

• March 10, 2025
  vue3实现大文件分片上传和断点续传

  首先，前端部分需要用到Vue3的Composition API，可能需要用ref和reactive来管理状态。然后，文件上传要用到File API，特别是Blob对象的slice方法来分片。每个分片需要有一个唯一的标识，可能是文件名加上分片索引，或者使用文件内容的hash，但为了简化，可能先使用文件名和索引的组合。 接下来，上传进度的显示，需要计算已上传的分片数和总分片数，然后更新进度条。...

• March 10, 2025
  vue3 集成AI大模型

  以下是在Vue3项目中集成AI大模型并实现流式优化的核心技术方案，包含完整的代码实现和架构设计： 一、流式传输与Chunk合并架构设计 1. 流式处理核心组件<script setup> import { ref, reactive } from 'vue' // 流式数据状态管理 const streamState = reactive(...

• September 2020

• September 11, 2020
  学习javascript应懂得33个概念之隐式，显式，名义和鸭子类型

  前言javasciprt是属于弱类型的语言。灵活的同时也带来一些问题，有时我们修改一些代码时，看上去是对的，结果出现了我们意想不到的结果。 隐式类型转换在 JavaScript 中，当我们进行比较操作或者加减乘除四则运算操作时，常常会触发 JavaScript 的隐式类型转换机制；而这部分也往往是令人迷惑的地方。譬如浏览器中的 console.log 操作常常会将任何值都转化为字符串然后展示...

• September 10, 2020
  学习Javascript应懂得33个概念之值类型与引用类型

  前言原文地址 值类型（基本数据类型）：字符串（string）、数值（number）、布尔值（boolean）、undefined、null （这5种基本数据类型是按值访问的，因为可以操作保存在变量中的实际的值）(ECMAScript 2016新增了一种基本数据类型：symbol)、BigInt(ECMAScript 2020新增) 引用类型：对象（Object）、数组（Array）、函数（...

• September 09, 2020
  学习Javascript应懂得33个概念之原始类型

  前言来自MDN 根据最新的ECMAScript的标准定义，基本类型（基本数值、基本数据类型）是一种既非对象也无方法的数据。在 JavaScript 中，共有7种基本类型：string，number，bigint(ECMCScript 2020新增)，boolean，null，undefined，symbol (ECMAScript 2016新增)。 多数情况下，基本类型直接代表了最底层的语言...

• September 08, 2020
  学习Javascript应懂得33个概念之调用堆栈

  原文学习地址 前言堆栈的概念对于我来说是熟悉又陌生的感觉，之前看过很多相关的文章及写过一些demo可后面用不到后，就慢慢淡忘了，今天要好好理解并记录下 JavaScript 引擎Google V8引擎是一个比较流行的javascript引擎示例，该引擎包括两个主要组件： Memory Heap内存堆 — 这是内存分配的地方 call stack调用堆栈 — 这是你代码执行时栈帧存放...

• September 03, 2020
  深入 TypeScript 中的子类型、逆变、协变

  原文地址 前言TypeScript 中有很多地方涉及到子类型 subtype、父类型 supertype、逆变和协变covariance and contravariance的概念，如果搞不清这些概念，那么很可能被报错搞的无从下手，或者在写一些复杂类型的时候看到别人可以这么写，但是不知道为什么他可以生效。 子类型比如考虑如下的接口： interface Animal { age...

• August 2020

• August 11, 2020
  重学React(三)

  前言终于到了期盼已久的HOOK环节了，我最初学react的时候是版本为15.4.2(特地去看了react仓库看了更新日志)算是很早的学习，可惜自己学的东西在工作中实践不了，当时也刚参加工作，又推动不了新技术的落地。无奈过段时间就忘了。计算机技术只有不断敲，看了用不到7天内就会忘得差不多了。当时看到class组件的时候觉得帅呆了，因为那时es6正当时，看到很多人都是使用jsx语法，class声...

• August 11, 2020
  重学React(二)

  前言上一篇看了react的核心概念后，大概心里对react的五脏六腑有个形状了，接着看文档中的高级指引部分 react文档中高级指引部分的重点代码分割在通过动态 import() 语法。 import("./math").then(math => { console.log(math.add(16, 26)); }); 使用React.La...

• August 06, 2020
  重学React(一)

  前言这几天手头里项目完成了一个阶段，下个阶段暂时有个星期的时间，正好有时间可以回顾下react。因为之前是选择react比vue要早，但是在之前公司里的技术栈是vue,没办法只有把react放到一旁，开始了vue的踩坑。 心里还是对react有感情的，这样说的我好像个渣男。。哈哈，确实挺喜欢这两个的框架。既然是重学，自己就定位为react的初学者，要认真，充满激情，先从撸官网开始吧。reac...

• August 03, 2020
  如何规范你的git提交?

  原文地址 一、为什么需要规范？无规矩不成方圆，编程也一样。 如果你有一个项目，从始至终都是自己写，那么你想怎么写都可以，没有人可以干预你。可是如果在团队协作中，大家都张扬个性，那么代码将会是一团糟，好好的项目就被糟践了。不管是开发还是日后维护，都将是灾难。 这时候，有人提出了何不统一标准，大家都按照这个标准来。于是 ESLint，JSHint 等代码工具如雨后春笋般涌现，成为了项目构建的必备...

• July 2020

• July 30, 2020
  响应式布局新方案

  原文地址 前言概念：融合响应式设计 本文中我们可以尝试得出一种新的解决方案，那就是利用 JavaScript 和 CSS 来进行媒体查询，是响应式设计与自适应设计结合的方案，我这里给起一个好记的名字叫做融合响应式设计（ Fusion Web Design，简称 FWD ）。 技术原则： JavaScript 判断尽量少 CSS 媒体查询的断点也尽量少 UI效果 在笔记本、平板电脑、智能...

• July 07, 2020
  拥抱Vue3系列之jsx语法

  原文地址 在过去的一年中，Vue 团队一直都在开发 Vue.js 的下一个主要版本，就在 6 月底，尤大更新同步了 Vue 3 及其周边生态的状态(Vue 3: mid 2020 status update)。 if (isTrue("I am planning to use Vue 3 for a new project")) { if (isTrue(&...

• July 01, 2020
  svg科普篇-向强大的svg迈进

  前言今天在掘金上突然看到京东凹凸实验室发布的一篇《向强大的svg迈进》，想到前几个月项目老大非得让我从svg图标换成iconfont字体图标，最后在我耐心给老大讲了svg的未来，对比了iconfont与普通png的区别后，老大妥协了，让我说服其他成员，代码保持一致就行，:( ，没办法，又得给其他同事讲下。所以今天为了科普svg，写来这篇 SVG 即 Scalable Vector Grap...

• June 2020

• June 24, 2020
  实战技巧，Vue原来还可以这样写

  原文地址 hookEvent,原来可以这样监听组件生命周期1. 内部监听生命周期函数今天产品经理又给我甩过来一个需求，需要开发一个图表，拿到需求，瞄了一眼，然后我就去echarts官网复制示例代码了，复制完改了改差不多了，改完代码长这样 <template> <div class="echarts"></div> </temp...

• May 2020

• May 25, 2020
  ES2020的新功能

  原文地址 前言近年来，JavaScript 的发展非常迅速。 尤其是在2015 年 ES6 发布之后，情况变得更好。 现在 许多新的特性被提议包括在 ES2020版本中。好消息是这些已经已经敲定。 现在，我们获得了最终定稿的功能清单，它们将在被批准发布之后出现在备受期待的 ES2020 中。 其中一些功能使我非常兴奋，因为在它们存在之前编写代码时遇到将会遇到很多麻烦。 让我们看看它们是什么吧...

• May 17, 2020
  了解下deno，与node的区别是什么？

  Deno VS Node 不同点 Node Deno API 引用方式 模块导入 全局对象 模块系统 CommonJS & 新版 node 实验性 ES Module ES Module 浏览器实现 安全 无安全限制 默认安全 Typescript 第三方，如通过 ts-node 支持 原生支持 包管理 npm + node_modules 原生支持 异...

• May 12, 2020
  javascript设计模式Es6代码实现

  原文地址 设计模式简介设计模式代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。 设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计...

• May 10, 2020
  Vue开发实践(下)

  原文地址 前言前面两篇文章总结了 Vue 开发的大部分技巧和内容，最后一篇文章来对它进行一个收尾这篇文章我们来谈谈一些 Vue 理解和实践要求高一点的问题 首先是生命周期这一块内容，随着实践越多它的意义越大，理解也越深刻 mixin 功能强大，对代码复用组织都有很高的要求，算是 Vue 后期发力的高级技巧 服务端渲染可能是学习 Vue 最后一块阵地了，对于 SPA 框架的一个里程碑 最...

• May 09, 2020
  吃透Vue项目开发实践(中)

  原文地址 概览 问题 本节内容主要围绕下列问题展开： 如何编写原生组件，以及组件编写的思考与原则？ 组件怎么通信？有哪些方式？ 如何使用vuex 以及它的应用场景和原理 如何使用过滤器，编写自己的过滤器 如何使用 Jest 测试你的代码？TDD 与 BDD 的比较 如何编写原生组件组件编写原理vue 编写组件有两种方式，一种是单文件组件，另外一种函数组件。根据组件引入和创建还可以分为动...

• May 06, 2020
  吃透Vue项目开发实践(上)

  原文地址 概览 问题 我将从 16 个方面来论述 vue 开发过程中的一些技巧和原理。当然由于篇幅有限，先论述前 8 个问题，下节将完成全系列内容。 本篇文章将围绕下列问题进行论述： 如何规范你的 git 提交，并自动生成并提交日志？ 如何配置和使用 Sass 和 PUG 提升你的编码效率？ 如何处理你的代码风格问题，以及如何使用 perttier 与 eslint 解决效率风格两难问题...

• May 05, 2020
  12个前端必会 H5 问题及解决方法

  原文地址 移动端 H5 相关问题汇总： 1px 问题 响应式布局 iOS 滑动不流畅 iOS 上拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透与延迟 软键盘弹出将页面顶起来、收起未回落问题 iPhone X 底部栏适配问题 保存页面为图片和二维码问题和解决方案 微信公众号 H5 分享问题 H5 调用 SDK 相关问题及解决方案 H5 调试相关方案与策略 移动端 ...

• April 2020

• April 28, 2020
  websocket断开原因分析

  原文地址 把错误打印出来WebSocket断开的原因有很多，最好在WebSocket断开时，将错误打印出来。 ws.onclose = function (e) { console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean) conso...

• April 25, 2020
  '基于react搭建一个通用的表单管理配置平台（vue同）'

  原文地址 前言最近在做B端的产品，借助该博主的文章学习下通用表单，以下为博文信息 这篇文章是一篇应用性极强的文章，我们通过一个实际的应用场景，去解决某一类的问题，提供一种或者几种解决方案，来探索技术的魅力。接下来笔者主要分析表单定制平台的实现思路和技术方案，来实现一个类似于金数据或者问卷星一样的表单配置平台，大家也可以基于此方案，扩展出功能更加强大的可视化平台。 正文为什么要做一个这样的平台...

• April 23, 2020
  强大的CSS:文字下波浪线动画效果

  原文地址 类似下面这种效果 有以下几种方式可以实现这种效果 径向渐变纯CSS的方式就是使用径向渐变绘制我们的波浪线效果，一个波浪线循环段是有一个朝上的半个圆弧和一个朝下的半个圆弧组合而成的。 所以，我们只要使用径向渐变绘制圆弧，再通过background-position控制两个圆弧的位置，让其前后拼接在一起就可以实现波浪线效果。 相关CSS代码 .flow-wave { ...

• April 22, 2020
  尤雨溪在Vue3.0 Beta直播里聊到了这些…

  原文地址(https://juejin.im/post/5e9f6b3251882573a855cd52?utm_source=gold_browser_extension#heading-15) 前言4月21日晚，Vue作者尤雨溪在哔哩哔哩直播分享了Vue.js 3.0 Beta最新进展。 以下是直播内容整理 全新文档RFCs Vue.js 3.0 Beta发布后的工作重点是保证稳定性和推...

• April 20, 2020
  关于SaaS产品的一些思考和总结

  SaaS的收费模式首年收取的是开户费(软件系统费和账号费等)，从第二年开始收取年费，Sass要提供持续的运营服务才能够持续收费 SaaS的运营框架基础工作弄懂产品了解产品，可不是注册一个账号，随便玩玩，然后提几个优化建议就完事了，这是敷衍。真正弄懂产品，可以从这4方面入手。 第一、了解产品相关的行业背景，如行业历史、现状、最新动态。了解产品涉及的基础知识，如技术原理，在行业的优势。 第二、阅...

• April 19, 2020
  <深入理解TypeScript读书笔记>（一）

  TypeScript类型系统@types全局@types@types 支持全局和模块类型定义 npm install @type/jquery --save-dev 默认情况下，TypeScript 会自动包含支持全局使用的任何声明定义 局部@types安装完成后不需要做特别配置，只要想使用模块一样使用它一样 import * as $ from 'jquery' 可以在...

• April 16, 2020
  什么是laaS,PaaS,SaaS?

  前言 首先云服务器可以分为 IaaS：基础设施即服务，Infrastructure-as-a-service PaaS：平台即服务，Platform-as-a-service SaaS：软件即服务，Software-as-a-service 数据即服务：如阿里云对象存储，七牛云存储等 其他软件服务：机器学习、人工智能等 公司要开发一个SaaS云服务器的软件，借此来加深下lasS,Paa...

• April 01, 2020
  vue.config.js基本配置

  // vue.config.js 基本配置方法 module.exports = { // 项目部署的基础路径 // 我们默认假设你的应用将会部署在域名的根部， // 比如 https://www.my-app.com/ // 如果你的应用时部署在一个子路径下，那么你需要在这里 // 指定子路径。比如，如果你的应用部署在 // https://www.foo...

• March 2020

• March 25, 2020
  <深入理解TypeScript读书笔记>（一）

  书本地址https://jkchao.github.io/typescript-book-chinese/#why 什么是TypeScript,为什么要使用TypeScript?根据TypeScript官网中的介绍，TypeScript - JavaScript the scales (属于Js的超集)，Ts发展至今已经是很多大型项目的标配，它提供的静态类型检查，大大的提高了代码的可维护性及...

• March 15, 2020
  你不知道的箭头函数

  简言ES6的箭头函数，我们会在工作中经常知道，但是你知道什么时候使用箭头函数，什么时候不能使用箭头函数吗？ 什么时候使用箭头函数？ 为啥大多数情况都使用箭头函数？ 作用域安全性:当箭头函数被一致使用时，所有东西都保证使用与根对象相同的this。如果一个标准函数回调与一堆箭头函数混合在一起，那么作用域就有可能变得混乱。 紧凑性:箭头函数更容易读写。 清晰度:使用箭头函数可明确知道当前 thi...

• December 2019

• December 12, 2019
  你不知道的 JSON.stringify() 的威力

  原文地址 通过需求学习JSON.stringify()首先我们在开发的过程当中遇到这样一个处理数据的需求 const todayILearn = { _id: 1, content: '今天学习 JSON.stringify()，我很开心！', created_at: 'Mon Nov 25 2019 14:03:55 GMT+0800 (中国标...

• November 2019

• November 25, 2019
  使用vue高阶组件

  前文高阶组件(HOC)是一种架构模式，在 React 中非常常见，但也可以在 Vue 中使用。它可以被描述为一种在组件之间共享公共功能而不需要重复代码的方法。HOC 的目的是增强组件的功能。它允许在项目中实现可重用性和可维护性。 只要你向一个方法传入组件，然后返回一个新的组件，这就是一个 HOC。 高阶组件在以下方面非常有用: 1.操作属性。 2.操作数据和数据抽象。 3.代码重用 ...

• October 2019

• October 29, 2019
  一张图理清 Vue 3.0 的响应式系统

  转自 作者：Jrain链接 一个基本的例子Vue 3.0 的响应式系统是独立的模块，可以完全脱离 Vue 而使用，所以我们在 clone 了源码下来以后，可以直接在 packages/reactivity 模块下调试。 1.在项目根目录运行 yarn dev reactivity，然后进入 packages/reactivity 目录找到产出的 dist/reactivity.global...

• September 2019

• September 30, 2019
  深入理解Node.js中的进程与线程

  原文地址 前言进程与线程是一个程序员的必知概念，面试经常被问及，但是一些文章内容只是讲讲理论知识，可能一些小伙伴并没有真的理解，在实际开发中应用也比较少。本篇文章除了介绍概念，通过Node.js 的角度讲解进程与线程，并且讲解一些在项目中的实战的应用，让你不仅能迎战面试官还可以在实战中完美应用 文章导览 面试会问 Node.js是单线程吗？ Node.js 做耗时的计算时候，如何避免阻塞...

• August 2019

• August 08, 2019
  在17道题中理解javascript的类型转换

  原文地址 类型转换是将值从一种类型转换为另一种类型的过程（比如字符串转数字，对象转布尔值等）。任何类型不论是原始类型还是对象类型都可以进行类型转换，JavaScript 的原始类型有：number, string, boolean, null, undefined, Symbol。 true + false 12 / "6" "number" + 15...

• August 01, 2019
  JavaScript异步编程回调地狱的一些解决方案

  原文地址 异步编程在JavaScript中非常重要。过多的异步编程也带了回调嵌套的问题，本文会提供一些解决“回调地狱”的方法。 setTimeout(function(){ console.log("延时触发") },2000) fs.readFile('./samp.txt','utf-8',functio...

• July 2019

• July 31, 2019
  Webpack Freestyle 之 Long Term Cache(webpack 实现持久性缓存)

  原文地址 How Browser Cache Works首先，我们要搞清楚浏览器缓存是怎么工作的。 那么，就让我画一张图来告诉大家吧，嘻嘻。 浏览器: 我需要 foo.js 服务器: 让我找找。找到了，给你，缓存有效期为 1 年。 浏览器: 好，我把他缓存到磁盘里。 过了 2 天， 浏览器: 我需要 foo.js ，在缓存里找到了。缓存还有效，那直接读缓存。用户：哇塞，这网页秒开啊。...

• July 24, 2019
  通过一个问题学习map,filter,reduce语法

  比如一个从1-10的简单的数组，需要从中取奇数，你会怎么做？这个问题不难，有的少侠可能会使用for循环来过滤出偶数，某些少侠可能会使用while循环，又或是使用数组自带的filter方法。 这里，我们先不考虑使用for和while这些迭代方法，我们选择使用数组自带的filter方法，如果使用filter方法的话， const nums = [1,2,3,4,5,6,7,8,9,10]; //...

• July 15, 2019
  如何使用 vue + typescript 编写页面(1)

  原文地址 起步使用 vue-cli 创建项目 vue create demo ，demo就是创建项目的名称提示选择预设，选择 Manually select features 回车确认选择typescript vuex router babel css pre-processors，不使用linter，不选单元测试有需要另说回车后按照需要选择合适的选项选择完毕后回车等待资源准备 编码开始熟...

• July 04, 2019
  TypeScript 的好处都有啥？和 JavaScript 的区别在哪？

  原文地址 在我看来 TypeScript 相对于 JavaScript ，除了静态类型外没带来任何东西。 既然如此 静态类型有什么好处静态类型的好处到处都有说，这里就不说得太详细了，随便列一点。 杜绝手误导致的变量名错误 自动完成 重构支持 类型可以一定程度上充当文档 静态类型解放脑容量，自动完成让我不需要记忆哪个变量里有哪些属性，也不需要记完整的变量名。 函数上的类型约束外加尽量主动写...

• June 2019

• June 13, 2019
  vue中不常用的API的使用方法总结

  errorHandler官网介绍及使用： 指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和 Vue 实例 Vue.config.errorHandler = function (err, vm, info) { //处理错误信息, 进行错误上报 //err错误对象 //vm Vue实例 //`info` 是 Vue 特定的错误信息...

• June 12, 2019
  TypeScript 高级技巧

  原文地址 前言用了一段时间的 typescript 之后，深感中大型项目中 typescript 的必要性，它能够提前在编译期避免许多 bug，如很恶心的拼写问题。而越来越多的 package 也开始使用 ts，学习 ts 已是势在必行。 01 keyofkeyof 与 Object.keys 略有相似，只不过 keyof 取 interface 的键。 interface Point &#...

• May 2019

• May 25, 2019
  Node学习(十四) --Node项目-商品列表

  Node.js项目介绍利用学到的知识，实现一个简单但实用的小项目如下： 这是一个商品列表，具有展示商品信息，添加商品，删除商品的功能。 项目的文件夹结构├── package.json├── server.js # 服务器代码├── config # 项目配置文件夹│ ├── config.dev.js # 开发环境配置│ ├── config.prod.js # 生产环境配...

• May 06, 2019
  Node学习(十三) --Stream流

  File System的问题我们通常会使用File System模块对文件进行读取，如下： fs.readFile('./test.txt', (error, buffer) => { if (error) { console.error(error) } else { // 读取文件成功 res....

• April 2019

• April 29, 2019
  Node学习(十二) --使用async/await异步操作数据库

  上一篇使用Node.js操作数据库，虽然能实现功能，但是异步操作需要不断写回调函数，代码严重冗余，而且阅读困难。 可以使用co-mysql，将query方法该写为返回一个Promise，就可以使用async/await进行异步处理。 我们可以参考一下它的源码，看看它是如何实现将回调函数转换为 module.exports = wrapper; var slice = [].slice; ...

• April 21, 2019
  Node学习(十一) --使用Nodejs操作数据库

  Nodejs操作数据库Nodejs操作数据库需要用到mysql模块，通过npm i mysql -D进行安装。 之后可以通过mysql.createConnection方法新建一个数据库连接，需要传入的参数有地址、端口、登录名、密码，以及需要连接的数据库。 mysql.createConnection会返回一个connection对象，可使用connection.query方法，传入SQL语...

• April 21, 2019
  Node学习(十) --数据库入门

  数据库的分类1.文件数据库 它的优点是：数据保存在单一文件中，因此部署十分方便，常用来嵌入到APP中保存数据，以及手机中的短信、通话记录等。 常用的有SQLite、Access等。 2.关系型数据库 关系型数据库的功能强大，适用场景丰富，它的特点是数据之间互相是关联的。 比如淘宝，一个用户下有个人信息、订单信息、聊天记录等，可以分别存储在不同表中，通过用户ID相互关联起来。但它的性能不是最强...

• April 20, 2019
  Node学习(九)--Websocket

  WebSocket的优势1.性能高。 根据测试环境数据的不同，大约会比普通Ajax请求高2-10倍。 HTTP是文本协议，数据量比较大。 而WebSocket是基于二进制的协议，在建立连接时用的虽然是文本数据，但之后传输的都是二进制数据，因此性能比Ajax请求高。 2.双向通信。 如果是普通Ajax请求，需要实时获取数据，只能用计时器定时发送请求，这样会浪费服务器资源和流量。 而通过WebS...

• April 20, 2019
  Node学习(八)--Ajax跨域

  Ajax跨域问题的产生原因Ajax请求无法跨域，在前端开发中是个常见问题，它的产生原因是，在浏览器接收服务端返回数据时，会检查该数据是否和当前发起请求的网址在同一域名下。若不是，则会丢弃该数据，并返回一个跨域错误。 在Ajax请求中，遵循如下流程：网页提交一个Ajax请求到浏览器，浏览器将请求发至服务器，服务器接收到请求后，返回响应数据给浏览器（服务器通常不会对域名进行区分），浏览器接收到...

• April 04, 2019
  Node学习(七) --POST文件上传

  简单的文件上传例子处理文件上传数据，也是前后端交互中重要的功能，它的处理方式与数据不同。 接下来，通过一个例子查看服务端接收到的文件上传数据。 首先，在post_file.html中，新建一个用与上传文件的表单： form的属性enctype="multipart/form-data"代表表单上传的是文件。 enctype的默认值为enctype="applic...

• April 01, 2019
  Node学习(六) --基本模块

  assert (断言)assert（断言）通常用来对代码进行校验，若出错则阻止程序运行，并抛出一个错误。 用法const assert = require('assert') assert(2 > 1, '2 > 1') assert(1 > 2, '1 > 2') 代码在运行到assert(2 > 1, ‘...

• March 2019

• March 29, 2019
  vue中axios请求的封装

  前言Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库；封装axios，一方面为了以后维护方便，另一方面也可以对请求进行自定义处理，不多BB,开搞 设置接口请求前缀一般我们开发都会有开发、测试、生产环境，前缀需要加以区分，我们利用node环境变量来作判断 if(process.env.NODE_ENV === ...

• March 28, 2019
  如何在 Web 关闭页面时发送 Ajax 请求

  前言有时候我们需要在用户离开页面的时候，做一些上报来记录用户行为。又或者是发送服务器ajax请求，通知服务器用户已经离开，比如直播间内的退房操作。 本文主要分两部分来讲解怎么完成退出行为的上报。 事件监听浏览器有两个事件可以用来监听页面关闭，beforeunload和unload。beforeunload是在文档和资源将要关闭的时候调用的， 这时候文档还是可见的，并且在这个关闭的事件还是可以...

• March 27, 2019
  「从源码中学习」面试官都不知道的Vue题目答案

  原文地址 前言当回答面试官问及的Vue问题，我们除了照本宣科的回答外，其实还可以根据少量的源码来秀一把，来体现出你对Vue的深度了解。 “new Vue() 做了什么？”new关键字代表实例化一个对象, 而Vue实际上是一个类, 源码位置是/src/core/instance/index.js。 function Vue (options) { if (process.env....

• March 26, 2019
  Node学习(五) --Node.js的模块化

  Nodejs定义模块Nodejs的模块化由于出现的较早，因此它遵循的是CommonJS规范，而非ES6的模块化。 在Nodejs的模块化中，最常用到的有module对象、exports对象、require方法。 其中module和exports用于输出模块，require用于引用模块。 一个简单的模块例子先新建一个module1.js文件，代码如下： module.exports.a = 1...

• March 25, 2019
  Node学习(四) --处理接收到的POST数据

  POST数据量通常较大，通常不会一次性从客户端发送到服务端，具体每次发送的大小由协议，以及客户端与服务端之间的协商决定。 因此，Nodejs在处理POST数据时，需要通过request对象的data事件，获取每次传输的数据，并在end事件调用时，处理所有获取的数据。 request对象是一个http.IncomingMessage 类，而它实现了可读流接口，因此具有了可读流的data、end...

• March 19, 2019
  Node学习(三) --处理接收到的GET数据

  常用请求方式GET和POST是最常用的HTTP请求方法，除此之外还有DELETE、HEAD、OPTIONS、PUT、TRACE等，但都很少用到。 GET POST 主要用于获取数据 主要用于发送数据 数据放在HTTP请求Header中，通过URL进行传输，容量<=32k 数据放在HTTP请求body中,容量大，通常上限2G 处理Get数据我们可以使用Nodejs自带...

• March 19, 2019
  Node学习(二) --使用http和fs模块实现一个简单的服务器

  准备1.创建一个www目录，存储静态文件1.html、1.jpg。 * html文件内容如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co...

• March 18, 2019
  Node学习(一) --NodeJs简介

  NodeJs简介 简单的说Node.js就是运行在服务端的Javascript Node.js是一个基于ChromeV8引擎的Javascript的执行环境 Node.js使用了一个事件驱动，非阻塞式I/O的模型，使其轻量有高效 NodeJs的应用环境由于Nodejs目前还不够成熟，因此一般不会用作独立开发，它的主要用途如下 中间层通常在开发应用时，出于安全考虑，后端的主服务器都不会直接暴...

• March 16, 2019
  ES2019的新功能

  前言ECMAScript 每年都会发布一个新版本，其中的提案是已经正式通过的，并分发给开发者和用户。本文将讨论该语言的最新版本，以及它又具有了什么新功能。 ES10/ES2019 在本次更新中有很大的改进。它引入了一些新的函数和方法，使开发者能够编写更少的代码，并提高工作效率。 flat()flat() 是一种用于扁平数组的方法。在某些时候，数组的元素还是数组，这些类型的数组称为嵌套数组。 ...

• March 14, 2019
  怎么提高代码质量？-来自Google的研发经验总结

  原文地址 你的团队有没有过这样的经历：开发效率低，招了很多人，天天加班，出活却不多，线上bug频发，领导发飙，中层束手无策，工程师抱怨不断，查找bug困难。其实这些都是代码质量差惹的祸。代码质量是研发质量管理的根本，它决定了整个开发团队的开发效率，项目质量，其他监控，告警，日志等手段都只能是事后补偿。本文就如何保证代码质量总结了一些经验和方法，供大家参考。 代码质量本身并没有一个特别明确的量...

• March 12, 2019
  ES6 Class中的constructor方法和super的作用

  前言首先，ES6 的 class 属于一种“语法糖”，所以只是写法更加优雅，更加像面对对象的编程，其思想和 ES5 是一致的。 construcotfunction Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function() { return '...

• January 2019

• January 27, 2019
  30 Seconds of ES6 （一）

  项目背景简介30 seconds of code 是一个非常优质精选的 JavaScript 项目 ，总结了大量的使用 ES6 语法实现的代码块，项目的设计目标就是更简洁，更高效，更快速的实现基础代码模块，碎片化学习实用干货， 30 秒掌握一个高质量 ES6 代码块 。 学习初衷学习 ES6 基础知识，提升程序算法能力；学习 JavaScript 基础从 API 开始。每篇精选 5 段优...

• January 20, 2019
  vue 组件之间的通信

  什么是Vue组件？组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。 Vue组件间通信常见使用场景可以分为三类: 父子组件通信: props; $parent / $children;...

• January 13, 2019
  keep-alive组件的使用及其实现原理

  keep-alivekeep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。 它提供了include与exclude两个属性，允许组件有条件地进行缓存。 具体内容可以参考官网。 用法<keep-alive> <component></co...

• January 06, 2019
  Vuex源码解析

  前言我们在使用Vue.js开发复杂的应用时，经常会遇到多个组件共享同一个状态，亦或是多个组件会去更新同一个状态，在应用代码量较少的时候，我们可以组件间通信去维护修改数据，或者是通过事件总线来进行数据的传递以及修改。但是当应用逐渐庞大以后，代码就会变得难以维护，从父组件开始通过prop传递多层嵌套的数据由于层级过深而显得异常脆弱，而事件总线也会因为组件的增多、代码量的增大而显得交互错综复杂，难...

• January 01, 2019
  Vue.js异步更新DOM策略及nextTick

  操作DOM在使用vue.js的时候，有时候因为一些特定的业务场景，不得不去操作DOM，比如这样： <template> <div> <div ref="test">{{test}}</div> <button @click="handleClick&...

• December 2018

• December 16, 2018
  Vue事件API

  Vue事件API众所周知，Vue.js为我们提供了四个事件API，分别是$on，$once，$off，$emit。 初始化事件初始化事件在vm上创建一个_events对象，用来存放事件。_events的内容如下： { eventName: [func1, func2, func3] } 存放事件名以及对应执行方法。 /*初始化事件*/ export functi...

• December 09, 2018
  vue源码之从源码角度再看数据绑定

  原文地址 前文前面已经讲过Vue数据绑定的原理了，现在从源码来看一下数据绑定在Vue中是如何实现的。 首先看一下Vue.js官网介绍响应式原理的这张图。 这张图比较清晰地展示了整个流程，首先通过一次渲染操作触发Data的getter（这里保证只有视图中需要被用到的data才会触发getter）进行依赖收集，这时候其实Watcher与data可以看成一种被绑定的状态（实际上是data的闭包中...

• December 02, 2018
  Vu源码之依赖收集

  为什么要依赖收集？先看这段代码 new Vue({ template: `<div> <span>text1:</span> {{text1}} <span>text2:</span> {{...

• November 2018

• November 25, 2018
  vue 源码分析之响应式原理

  原文地址 关于Vue.jsVue.js是一款MVVM框架，上手快速简单易用，通过响应式在修改数据的时候更新视图。Vue.js的响应式原理依赖于Object.defineProperty，尤大大在Vue.js文档中就已经提到过，这也是Vue.js不支持IE8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每...

• November 18, 2018
  JavaScript 复杂判断的更优雅写法

  原文地址 前言我们编写js代码时经常遇到复杂逻辑判断的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，越来越看不懂，那么如何更优雅的写判断逻辑，本文带你试一下。 举个例子/** * 按钮点击事件 * @param {number} status 活动状态...

• November 04, 2018
  websocket通信了解

  websocketwebsocket是HTML5出的协议，他是一个持久化的协议。 websocket是什么样的协议，有什么与优点？首先websocket是一个持久化的协议，在HTTP中一个request只能有一个response,而且这个response也是被动的，不能主动发起。 下面是用websocket请求的header头 GET /chat HTTP/1.1 Host: server....

• November 04, 2018
  call stack

  Call Stack(调用堆栈)MDN(解释call Stack) A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple func...

• October 2018

• October 21, 2018
  初学者可能不知道的vue技巧

  技巧/坑点setTimeout/ setInterval 场景一 ：this指向改变无法用this访问vue实例 mounted(){ setTimeout( function () { //setInterval同理 console.log(this); //此时this指向Window对象 }，1000) ;
  ...

• August 2018

• August 26, 2018
  CSS对比 JavaScript动画

  前言在网页上创建动画有两种主要方法：使用 CSS 和使用 JavaScript。您选择哪种方法实际上取决于项目的其他依赖关系，以及您尝试实现什么类型的效果。 TL;DR 使用 CSS 动画来实现较简单的“一次性”转换，例如切换 UI 元素状态。 当您需要高级效果（例如弹跳、停止、暂停、倒退或减速）时，请使用 JavaScript 动画。 如果选择使用 JavaScript 来编写动画，...

• August 21, 2018
  使用 Redux-Saga 管理 React 应用中的异步 action （上）

  前言可以用Don’t call me, I’ll call you这句话来比喻react-saga。 Generators 先行！为了理解 Sagas，我们首先要理解什么是 Generator。下面是 MDN 对 Generator 的描述： Generator 是在执行时能暂停，后面又能从暂停处继续执行的函数。它的上下文会在继续执行时保存。 你可以把 Generator 理解成一种遍历...

• August 20, 2018
  Javascript异步编程(generator和async)

  前言从Promise开始，JavaScript就在引入新功能，来帮助更简单的方法来处理异步编程，帮助我们远离回调地狱。Promise是下边要讲的Generator/yield与async/await的基础，希望你已经提前了解了它。 在大概ES6的时代，推出了Generator/yield两个关键字，使用Generator可以很方便的帮助我们建立一个处理Promise的解释器。 然后，在ES7...

• August 13, 2018
  我对React v16.4生命周期的理解

  react v16.3生命周期 react v16.4生命周期 React v16要废除的三个生命周期函数 componentWillMount componentWillReceiveProps componentWillUpdate 注：目前在16版本中componentWillMount，componentWillReceiveProps，componentWillUpdate并...

• August 10, 2018
  前端常见算法Js实现

  快速排序var arr = [2,53,53.2,1,1223,5,2,675,967,2,1231,9344,3855,1]; 冒泡排序原理：比较相邻的两个元素，比较大的放置右端 function bubbleSort(arr){ var i = j =0 for(var i = 1;i < arr.length;i++){ fo...

• August 07, 2018
  用canvas压缩上传的图片

  前言现在摄像头已经是手机的标配了，移动网站也做得越来越像APP。然而拍照上传这件事情的体验似乎仍然不如APP，主要原因是现在手机拍摄的照片太大，上传非常消耗流量也非常耗时。APP都会在上传前缩小要上传的照片尺寸，以期更节省流量和时间。在HTML5时代，利用文件API和Canvas技术，Web上也可以做到图片压缩上传。 过滤文件类型首先我们希望用户能直接选择手机照片，而不是在各种类型的文件中选...

• August 05, 2018
  JavaScript中的“this”是什么？

  原文：What is “this” in JavaScript? 前言如果你曾使用JavaScript库做过开发，那么你可能已经注意到一个名为 this的特定关键字。虽然 this在JavaScript中非常常见，但是完全理解this关键字的原理以及在代码中如何使用对相当一部分的开发者来说着实不易。在这篇文章中，我将帮你深入理解 this及其工作机制。在开始之前，请确保已安装 Node。...

• August 03, 2018
  编写一个plugin

  前言Webpack 通过 Plugin 机制让其更加灵活，以适应各种应用场景。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。 最基础的 Plugin一个最基础的 Plugin 的代码是这样的： class BasicPlugin{ // 在构造函数中获取用户给该插件传入的配...

• August 03, 2018
  编写一个loader

  前言Loader 就像是一个翻译员，能把源文件经过转化后输出新的结果，并且一个文件还可以链式的经过多个翻译员翻译。 以处理 SCSS 文件为例： SCSS 源代码会先交给 sass-loader 把 SCSS 转换成 CSS；把 sass-loader 输出的 CSS 交给 css-loader 处理，找出 CSS 中依赖的资源、压缩 CSS 等；把 css-loader 输出的 CSS...

• August 03, 2018
  webpack原理及实现

  工作原理概括Webpack 以其使用简单著称，在使用它的过程中，使用者只需把它当作一个黑盒，需要关心的只有它暴露出来的配置。 本节将带你走进这个黑盒，看看 Webpack 是如何运行的。 基本概念 在了解 Webpack 原理前，需要掌握以下几个核心概念，以方便后面的理解： entry: 入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。 module: 模块，...

• August 01, 2018
  使用 Intersection Observer 实现图片延迟加载

  延迟加载有什么大不了的？延迟加载图片的目的在于，在发出对应的网络请求之前你要一直等到用户滚动页面让图片进入可见区域。如果你的网页包括了多张图片，但你只在每张图片滚动到视区时才加载，你将最终会节省带宽并确保你的网页加载的更快。 为了让你在实际中了解这一点，让我们想象下面这个页面，他有三张图片。 如果用户访问页面时仅看到了第一张图，我们并不想加载网页底部的比萨图片，除非用户向下滚动直到图片真...

• July 2018

• July 27, 2018
  fetch使用的常见问题及解决办法

  前言说道fetch就不得不提XMLHttpRequest了，XHR在发送web请求时需要开发者配置相关请求信息和成功后的回调，尽管开发者只关心请求成功后的业务处理，但是也要配置其他繁琐内容，导致配置和调用比较混乱，也不符合关注分离的原则；fetch的出现正是为了解决XHR存在的这些问题。例如下面代码： fetch(url).then(function(response){ ...

• July 25, 2018
  JavaScript模块化 --- Commonjs、AMD、CMD、ES6 modules

  前言随着前端js代码复杂度的提高，JavaScript模块化这个概念便被提出来，前端社区也不断地实现前端模块化，直到es6对其进行了规范，下面就介绍JavaScript模块化。 JavaScript模块化是如何一步一步地发展起来的，并且也会主要对这些模块化方式做一个简单的比较。 第一阶段：无模块化JavaScript最初的作用仅仅是验证表单，后来会添加一些动画，但是这些js代码很多在一个文件...

• July 23, 2018
  深入理解BFC,IFC,GFC和FFC

  前言BFC,IFC,IFC,FFF是什么，主要解决的什么问题，哪些元素会生成BFC？本文主要针对这几个问题来了解。在解释之前，需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同...

• July 19, 2018
  你真的了解setState吗？

  前言看之前，为了方便理解和简化流程，我们默认react内部代码执行到 performWork、performWorkOnRoot、performSyncWork、performAsyncWork 这四个方法的时候，就是react去update更新并且作用到UI上。 合成事件中的setState首先得了解一下什么是合成事件，react为了解决跨平台，兼容性问题，自己封装了一套事件机制，代理了...

• July 18, 2018
  Ajax Fetch Axios之间的详细区别以及优缺点

  将jQuery的ajax、axios和fetch做个简单的比较，所谓仁者见仁智者见智，最终使用哪个还是自行斟酌 jQuery ajax$.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, ...

• July 17, 2018
  通过示例来学习ES2016, 2017, 2018的新特性

  前言本文会辅以有用的例子来讲述TC39中的18个特性，它们分别在ES2016, ES2017和ES2018中加入。鉴于本文内容很长，我们将分为两个部分来介绍，此为第一部分。 ES6Array.prototype.includesincludes是一个Array上很有用的函数，用于快速查找数组中是否包含某个元素。(包括NaN，所以和indexOf不一样)。 指数函数的中缀形式加/减法我们通...

• July 13, 2018
  《图解HTTP学习》笔记

  从一道题引发的思考从输入网页到呈现网页页面这一过程经历了什么？ HTTP的诞生在深入了解HTTP之前，先介绍HTTP诞生的背景。cern的timbernersLee 提出一种能让远隔两地的研究者们共享知识点的设想。 网络基础 TCP/IP通常使用的网络（包括互联网）是在TCP/IP协议族的基础上运作的。而HTTP属于它内部的一个子集。 TCP/IP协议族按层次分为以下4层 应用层 应用层决...

• July 10, 2018
  从输入url到页面展示到底发生了什么

  前言刚开始写这篇文章还是挺纠结的，因为网上搜索“从输入url到页面展示到底发生了什么”，你可以搜到一大堆的资料。而且面试这道题基本是必考题，二月份面试的时候，虽然知道这个过程发生了什么，不过当面试官一步步追问下去的，很多细节就不太清楚了。 　　最近刚好也在看http协议相关的东西，所以想对这个话题来个深入的总结，本文的目的是 通过输入url之后发生的事情来做知识的总结和扩展。所以文章可能会很...

• July 06, 2018
  封闭了内心却包容了天下，闭包你并不孤独

  前言本文之所以会写这种老生常谈的文章，是为了接下来的设计模式做铺垫。既然已经提笔了，就打算不改了，继续写下去，相信也一定有很多人对闭包这样的概念有些模糊，那就瞧一瞧、看一看 毕竟闭包和高阶函数这两种概念，在开发中是非常有分量的。好处多多，妙处多多，那么我们就不再兜圈子了，直接开始今天的主题，闭包&高阶函数 变量作用域首先变量作用域分为两类：全局作用域和局部作用域，这个没话说大家都懂。...

• July 02, 2018
  你需要了解的23种javascript设计模式

  为什么要学习设计模式？在许多访谈中，你可能会遇到很多面向对象编程中的接口，抽象类，代理和以及其他与设计模式相关的问题。 一旦了解了设计模式，它会让你轻松应对任何访谈，并可以在你的项目中应用这些特性。在应用程序中实现设计模式已经得到验证和测试。 为了使应用程序具有可扩展性，可靠性和易维护性，应该编写符合设计模式的代码。 什么是设计模式 设计模式是我们每天编程遇到的可重用解决方案。 设计模式主要...

• June 2018

• June 28, 2018
  Airbnb React/JSX 编码规范

  前言算是最合理的React/JSX编码规范之一了 此编码规范主要基于目前流行的JavaScript标准，尽管某些其他约定(如async/await，静态class属性)可能在不同的项目中被引入或者被禁用。目前的状态是任何stage-3之前的规范都不包括也不推荐使用。 Basic Rules 基本规范每个文件只写一个模块.但是多个无状态模块可以放在单个文件中. eslint: react/no...

• June 21, 2018
  前端路由实现与react-router源码分析

  前言在单页应用上，前端路由并不陌生。很多前端框架也会有独立开发或推荐配套使用的路由系统。那么，当我们在谈前端路由的时候，还可以谈些什么？本文将简要分析并实现一个的前端路由，并对 react-router 进行分析。 一个极简前端路由实现谈一下前端路由的简要原理，以hash形式（也可以使用History API做处理）为例，当url的hash发生变化时，触发hashchange注册的回调，在回...

• June 08, 2018
  移动端常见Bug汇总

  前言本文是摘录整理了移动端常见的一些bug以及解决方案 点击样式闪烁Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。 A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。建议写在样式初始化中以避免所以问题：div,in...

• June 03, 2018
  教科书式的正则匹配

  前言 正则在js中是一类比较特殊的对象，它可以匹配各个场景需要的格式验证，例如邮箱、手机号、用户登录名、密码等等，似乎无处不在，在常见的字符串检索或替换中，我们需要提供一种模式表示检索或替换的规则，来匹配一系列符合某个句法规则的字符串。 以下是正则的较为官方的解释： 正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。这些模式被用于 RegExp...

• May 2018

• May 27, 2018
  新一代的前端存储方案--indexedDB

  前端存储 我们都知道在前端开发当中,有时会因为某些需求,要将一些数据存储在前端本地当中.比如说:为了优化性能,将一些常用的数据存在本地,这样以后需要的时候直接从本地拿,不需要再向后端进行请求.还有就是为了防止CSRF攻击,后端给前端一个token,前端就需要将这个token存在本地.之后每次请求都需要带上这个token.等等不一而足. 而这些需求就不油避免的造就一个前端的发展方向–前端存储 ...

• May 23, 2018
  Token：服务端身份验证的流行方案

  身份认证服务端提供资源给客户端，但是某些资源是有条件的。所以服务端要能够识别请求者的身份，然后再判断所请求的资源是否可以给请求者。 token是一种身份验证的机制，初始时用户提交账号数据给服务端，服务端采用一定的策略生成一个字符串（token），token字符串中包含了少量的用户信息，并且有一定的期限。服务端会把token字符串传给客户端，客户端保存token字符串，并在接下来的请求中带上这...

• May 21, 2018
  promise的原理

  前言先上一图! 本文的promise源码是按照Promise/A+规范来编写的（不想看英文版的移步Promise/A+规范中文翻译） 引子为了让大家更容易理解，我们从一个场景开始讲解，让大家一步一步跟着思路思考，相信你一定会更容易看懂。 考虑下面一种获取用户id的请求处理 function getUrlId() { return new Promise(function(r...

• May 20, 2018
  八段代码彻底掌握 Promise

  PromisePromise的立即执行性//1 var p = new Promise(function(resolve, reject){ console.log("create a promise"); resolve("success"); }); //2 console.log("after new Pro...

• May 19, 2018
  精读 React 高阶组件

  引言高阶组件（ higher-order component ，HOC ）是 React 中复用组件逻辑的一种进阶技巧。它本身并不是 React 的 API，而是一种 React 组件的设计理念，众多的 React 库已经证明了它的价值，例如耳熟能详的 react-redux。 高阶组件的概念其实并不难，我们能通过类比高阶函数迅速掌握。高阶函数是把函数作为参数传入到函数中并返回一个新的函数。...

• May 17, 2018
  图说ES Modules

  前言原文：ES modules: A cartoon deep-dive, Lin Clark ES modules（ESM） 是 JavaScript 官方的标准化模块系统。然而，它在标准化的道路上已经花费了近 10 年的时间。 可喜的是，标准化之路马上就要完成了。等到 2018 年 5 月 Firefox 60 发布之后，所有的主流浏览器就都支持 ESM 了。同时，Node 模块工作小组...

• May 05, 2018
  MVC,MPC,MVVM图示

  MVC,MPC,MVVM区别MVC（Model-View-Controller）是最常见的软件架构之一，业界有着广泛应用。它本身很容易理解，但是要讲清楚，它与衍生的 MVP 和 MVVM 架构的区别就不容易了。 MVCMVC模式的意思是，软件可以分成三个部分 M(Model) 数据保存—将新的数据发送到 View，用户得到反馈 V(View) 用户界面—View 传送指令到 Contro...

• May 04, 2018
  Ajax原理与实现

  概述AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。 原理与实现 原理：Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。 把服务器端看成一个数据接口(只负责吐数据)，它返回的是一个纯...

• May 03, 2018
  Jsonp的原理与实现

  概述Jsonp是一种跨域通信的手段，它的原理实现很简单： 1.首先利用script标签的src属性来实现跨域 2.通过将前端方法作为参数传给服务器端，由服务器端注入参数之后再返回，实现服务器端向客户端通信 3.由于使用script的src属性，所以只支持get方法 实现流程1.设定一个script标签 <script src="http://jsonp.js?callba...

• May 02, 2018
  什么是函数式编程

  Functional programming你可能听说过函数式编程（Functional programming），甚至已经使用了一段时间。 但是，你能说清楚，它到底是什么吗 网上搜索一下，你会轻松找到好多答案。 与面向对象编程和过程式编程并列的编程范式主要的特征：函数是第一等公民强调将计算过程分解成可复用的函数，典型的例子就是map函数和reduce函数组成的MapReduce函数只有...

• May 01, 2018
  封装常用的跨浏览器的事件对象

  前言最近把《javascript高级程序设计》看完了，发现里面有很多跨浏览器的代码，总结一下，方便记录。 跨浏览器的事件对象EventUtil(事件处理程序)var EventUtil = { addHandler: function(element,type,handler) { //事件监听 if(element.addEventListene...

• April 2018

• April 30, 2018
  React V16.3 即将更改的生命周期

  即将更改的生命周期一年多来，React团队一直致力于实现异步渲染。上个月，他在JSConf冰岛的演讲中，丹揭示了一些令人兴奋的新的异步渲染可能性。现在，我们希望与您分享我们在学习这些功能时学到的一些经验教训，以及一些帮助您准备组件以在启动时进行异步渲染的方法。 我们了解到的最大问题之一是，我们的一些传统组件生命周期会导致一些不安全的编码实践。他们是： componentWillMount ...

• April 29, 2018
  Javascript 异步编程

  为什么JavaScript的异步编程经常被人提起，我想到以下两点原因。首先，JavaScript是单线程的，用事件循环的机制来保证系统的正常运行。如果有同步的ajax请求或者很复杂的运算，JavaScript要等这些操作完成，才能响应其他事件，页面会进入假死状态。然而对于日渐复杂的web应用来说，这个是致命的。这也是为什么Node.js适合高I/O操作的业务，而像PHP，直到现在，I/O操作...

• April 28, 2018
  搭建你的第一个Express应用

  Express介绍 Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用 丰富的HTTP工具以及来自Connect框架的中间件随取随用，创建强健、友好的API变得快速又简单 Express 不对 node.js 已有的特性进行二次抽象，我们只是在它之上扩展了Web应用所需的功能 使用 Express 可以快速地搭建一个完整功能的网...

• April 26, 2018
  2017 年崛起的 JS 项目

  最受欢迎项目下面是不分类别的 2017 年度最受欢迎 Javascript 项目，如果你时间很紧，看这部分就够了。 Vue.js 蝉联冠军 Vue.js 再次强势登顶年度排行榜冠军，今年在 GitHub 上新增了超过 40K 的 star。相较于 2016 年的（26K star），今年 Vue.js 领先排行榜第 2 名（ React ）的优势更大了。 那么，是什么令 Vue.js 如此...

• April 25, 2018
  redux学习之升级水果店面

  优雅的处理 async action阿大通过请了一个采购员完成了耗时的进口商品的售卖。 但是，阿大同时也发现了一个问题：顾客要买水果生鲜的话需要找销售员，要买进口水果生鲜的话要找采购员，这样的话，顾客需要找不同的人，很麻烦。阿大想了想，能不能让顾客只找销售员，然后销售员如果有需求再找采购员采购呢。 阿大想到了办法，让销售员把所有的需求都告诉采购员，然后采购员再传递给收银员，这样，如果是需要采...

• April 25, 2018
  redux学习之开店卖水果

  Redux 是什么每当我们谈及到 redux，大家都会说是 react 的状态管理工具。这么说确实没错，毕竟 redux 项目也是 React Community 组织下的一个子项目。而且 redux 的诞生也是和 react 这个 ui 库急需一个状态管理解决方案有很大的联系。但是 redux 和 react 并没有任何的耦合。虽然它们经常一起用，但是 redux 的用途并不局限于 rea...

• April 24, 2018
  图片懒加载踩坑

  原理对网页加载速度影响最大的就是图片，一张普通的图片可能会有好几 M 的大小，当图片很多时，网页的加载速度变得很缓慢。为了优化网页性能以及用户体验，我们对图片进行懒加载。 懒加载是一种对网页性能优化的方式，它的原理是优先加载在可视区域内的图片，而不一次性加载所以图片。当浏览器滚动，图片进入可视区时再去加载图片。通过设置图片的 src 属性来让浏览器发起图片的请求。当这个属性为空或者没有时，...

• April 23, 2018
  WEB前端开发人员须知的常见浏览器兼容问题及解决技巧

  为什么会有兼容问题？由于市场上浏览器种类众多，而不同浏览器其内核亦不尽相同，所以各个浏览器对网页的解析就有一定出入，这也是导致浏览器兼容问题出现的主要原因，我们的网页需要在主流浏览器上正常运行，就需要做好浏览器兼容。 使用Trident内核的浏览器：IE、Maxthon、TT； 使用Gecko内核的浏览器：Netcape6及以上版本、FireFox； 使用Presto内核的浏览器：Opera...

• April 23, 2018
  每个 JavaScript 工程师都应当知道的 10 个面试题

  能说出来两种对于 JavaScript 工程师很重要的编程范式么？JavaScript 是一门多范式（multi-paradigm）的编程语言，它既支持命令式（imperative）/面向过程（procedural）编程，也支持面向对象编程（OOP，Object-Oriented Programming），还支持函数式编程（functional programming）。JavaScript...

• April 22, 2018
  前端工程精粹（一）：静态资源版本更新与缓存

  每个参与过开发企业级web应用的前端工程师或许都曾思考过前端性能优化方面的问题。我们有雅虎14条性能优化原则，还有两本很经典的性能优化指导书：《高性能网站建设指南》、《高性能网站建设进阶指南》。经验丰富的工程师对于前端性能优化方法耳濡目染，基本都能一一列举出来。这些性能优化原则大概是在7年前提出的，对于web性能优化至今都有非常重要的指导意义。 然而，对于构建大型web应用的团队来说，要坚...

• April 20, 2018
  你不知道的JSON.parse()和JSON.stringify()高级技巧

  前言JSON对象的两个方法：JSON.parse() 和 JSON.stringify() 通常用做JSON对象和字符串之间的相互转换; JSON.parse()JSON.parse() 可以接受第二个参数，它可以在返回之前转换对象值。比如这例子中，将返回对象的属性值大写： const user = { name: 'John', email: 'j...

• April 19, 2018
  前端代码规范-JS篇

  更多前端代码规范请移步 如果是个人或者小作坊开发，其实这些所谓的编码规范也没啥意思，因为大家写好的代码直接就给扔到网上去了，很少有打包、压缩、校检等过程，别人来修改你代码的情况也比较少。但是，对于一定规模的团队来说，这些东西还是挺有必要的！一个是保持代码的整洁美观，同时良好的代码编写格式和注释方式可以让后来者很快地了解你代码的大概思路，提高开发效率。 不规范写法举例 句尾没有分号 var ...

• April 18, 2018
  前端代码规范-CSS篇

  tab键用（必须）四个空格代替　　因为在不同系统的编辑工具对tab解析不一样，windows下的tab键是占四个空格的位置，而在linux下会变成占八个空格的位置（除非你自己设定了tab键所占的位置长度）。 每个样式属性后（必须）加 “;”方便压缩工具"断句"。 Class命名中（禁止）出现大写字母，（必须）采用” - “对class中的字母分隔，如： /* 正确的写法...

• April 17, 2018
  webpack3,从入门到放弃

  前言 首先，这篇文章是根据 webpack 版本 (即 v3.4.1) 撰写，较长一段时间内无需担心过时的问题。其次，这应该会是一篇极长的文章，涵盖了基本的使用方法，有更高级功能的需求可以参考官方文档继续学习。再次，即使是基本的功能，也内容繁多，我尽可能地解释通俗易懂，将我学习过程中的疑惑和坑一一解释，如有纰漏，敬请雅正。再次，为了清晰有效地讲解，我会演示从零编写 demo，只要一步步跟着做...

• April 16, 2018
  JS高级之面试必须知道的几个点

  函数的3种定义函数声明//ES5 function getSum(){} function (){}//匿名函数 //ES6 ()=>{}//如果{}内容只有一行{}和return关键字可省, 函数表达式（字面量形式）//ES5 var sum=function getSum()
  ...

• April 15, 2018
  React,Redux,React-redux

  Reactreact一些小型项目，只使用 React 完全够用了，数据管理使用props、state即可，那什么时候需要引入Redux呢？ 当渲染一个组件的数据是通过props从父组件中获取时，通常情况下是 A –> B，但随着业务复杂度的增加，有可能是这样的：A –> B –> C –> D –> E，E需要的数据需要从A那里通过props传递过来，以及对应的...

• April 14, 2018
  最强日期正则表达式

  简单的日期判断（YYYY/MM/DD）：^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$ 演化的日期判断（YYYY/MM/DD| YY/MM/DD） ^(^(\d{4}|\d{2})(\-|\/|\.)\d{1,2}\3\d{1,2}...

• April 13, 2018
  jQuery 与 Zepto的区别

  jQuery 的意义是在于抹平 DOM、BOM、CSSOM 的多浏览器差异，并统一提供接口。它不能当作 Framework（框架）被使用，而是扮演 Utility（工具）的角色。 虽然 Zepto 和 jQuery 的中的很多 API 的用法是相似的，但仍有一些 API 在用法上差异很大。下面就实际使用中遇到的场景做一下列举。 创建DOM节点并赋与属性使用 $ 操作符可以轻松创建节点并赋...

• April 12, 2018
  Es6你可能不知道的事---进阶篇

  正文Module模块化是一个进行很久的话题，发展历程中出现过很多模式，例如AMD,CommonJS等等。 Module是ES6的一个新特性，是语言层面对模块化的支持。 与之前模块加载机制不同，Module是动态加载，导入的变量的只读引用，而不是拷贝。 // 1. export default 可以做默认导出 // a.js export default 5; // 默认导出 ...

• April 11, 2018
  Es6你可能不知道的事---基础篇

  ES6，或许应该叫 ES2015（2015 年 6 月正式发布），对于大多数前端同学都不陌生。 正文let + const这个大概是开始了解 ES6 后，我们第一个感觉自己完全明白并兴致勃勃的开始使用的特性。 // 定义常量 const REG_GET_INPUT = /^\d{1,3}$/; // 定义配置项 let config = { isDev :...

• April 09, 2018
  什么是作用域和执行上下文

  作用域首先我们说下作用域，简单地来说作用域指的是一个区域，里面包括变量，函数，常量等等定义信息和赋值信息，以及这个区域内代码书写的结构信息。作用域可以嵌套，我们通常知道js函数内是可以产生作用域的。下面我们用具体代码来示例下： 全局作用域（global scope）里面定义了两个变量，一个函数。walk 函数生成的作用域里面定义了一个变量，两个函数。innerFunc 和 anotherI...

• April 08, 2018
  props 和 state 的区别

  react是基于状态实现对DOM控制和渲染。组件状态可分为两种：一种是组件间的状态传递，另一种是组件的内部状态。这两种状态使用props和state表示。props用于父组件向子组件的数据传递，组件内部也有自己的状态：state，这些状态只能在组件内部修改。 数据流与propsreact的数据流是单向的，只会从父组件传递到子组件。属性props（properties）是父子组件进行传递状态的...

• April 04, 2018
  React：组件生命周期

  在组件的整个生命周期中，随着该组件的props或者state发生改变，其DOM表现也会有相应的变化。一个组件就是一个状态机，对于特定地输入，它总返回一致的输出。 一个React组件的生命周期分为三个部分：实例化、存在期和销毁时。 实例化当组件在客户端被实例化，第一次被创建时，以下方法依次被调用： 1、getDefaultProps2、getInitialState 1、2步骤使用Es6语...

• April 03, 2018
  Context API详解

  React在版本16.3-alpha里引入了新的Context API，社区一片期待之声。我们先通过简单的例子，看下新的Context API长啥样，然后再简单探讨下新的API的意义。 Demo地址 看下新的Context API需要安装16.3-alpha版本的react。下面，直接来看代码，如果用过react-redux应该会觉得很眼熟。首先，创建context实例： import Re...

• April 02, 2018
  react 16.3新特性

  Context APIContext API总是很让人迷惑。这个API是官方的，但是官方又不希望开发者们使用这个API，说是这个API会在以后发生改变。现在就是那个改变的时刻。新的API已经被merge了。而且它看起来更加的“用户友好”了。尤其是你不得不使用redux、mobx的时候，可以选择新的Context API实现更加简单的状态管理。 新的API用起来非常的简单：**React.cr...

• April 02, 2018
  简述HTTP协议

  什么是HTTP协议协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则，超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器 1.超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的网络协议之一，所有的WWW文件必须遵循这个标准。 2.HTTP是客户端与服务...

• April 02, 2018
  Http 协议详解

  引言HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。它于1990年提出，经过几年的使用与发展，得到不断地完善和扩展。目前在WWW中使用的是HTTP/1.0的第六版，HTTP/1.1的规范化工作正在进行之中，而且HTTP-NG(Next Generation of HTTP)的建议已经提出。 HTTP协议的主要特点可概括如下：1.支持客户/服务器...

• March 2018

• March 30, 2018
  Es6 核心内容 下

  import export这两个家伙对应的就是es6自己的module功能。 我们之前写的Javascript一直都没有模块化的体系，无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小工程，再用一种简单的方法把这些小工程连接在一起。 这有可能导致两个问题：一方面js代码变得很臃肿，难以维护另一方面我们常常得很注意每个script标签在html中的位置，因为它们通常有依赖关系，顺...

• March 30, 2018
  Es6 核心内容上

  在我们正式讲解ES6语法之前，我们得先了解下Babel。Babel Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。大家可以选择自己习惯的工具来使用使用Babel，具体过程可直接在Babel官网查看： 最常用的ES6特性let, const, class, extends, super, arrow functions, template stri...

• March 28, 2018
  Node入门

  什么是Node.js按照 Node.js官方网站主页 的说法: Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficien...

• March 27, 2018
  React 源码分析 6 React合成事件系统

  React合成事件特点React自己实现了一套高效的事件注册，存储，分发和重用逻辑，在DOM事件体系基础上做了很大改进，减少了内存消耗，简化了事件逻辑，并最大化的解决了IE等浏览器的不兼容问题。与DOM事件体系相比，它有如下特点 1.React组件上声明的事件最终绑定到了document这个DOM节点上，而不是React组件对应的DOM节点。故只有document这个节点上面才绑定了DO...

• March 27, 2018
  React源码分析 5 组件通信，ref,key,ReactDOM

  组件之间通信父组件向子组件通信React规定了明确的单向数据流，利用props将数据从父组件传递给子组件。故我们可以利用props，让父组件给子组件通信。故父组件向子组件通信还是很容易实现的。引申一点，父组件怎么向孙子组件通信呢？可以利用props进行层层传递，使用ES6的…运算符可以用很简洁的方式把props传递给孙子组件。这里我们就不举例了。 要注意的一点是，setProps,repla...

• March 27, 2018
  React 源码分析 4 setState机制

  概述React作为一门前端框架，虽然只是focus在MVVM中的View部分，但还是实现了View和model的绑定。修改数据的同时，可以实现View的刷新。这大大简化了我们的逻辑，只用关心数据流的变化，同时减少了代码量，使得后期维护也更加方便。这个特性则要归功于setState()方法。React中利用队列机制来管理state，避免了很多重复的View刷新。下面我们来从源码角度探寻下set...

• March 26, 2018
  React 源码分析 3 React生命周期详解

  React生命周期流程调用流程可以参看上图。分为实例化，存在期和销毁三个不同阶段。介绍生命周期流程的文章很多，相信大部分同学也有所了解，我们就不详细分析了。很多同学肯定有疑问，这些方法在React内部是在哪些方法中被调用的呢，他们触发的时机又是什么时候呢。下面我们来详细分析。 实例化生命周期getDefaultProps在React.creatClass()初始化组件类时，会调用getDef...

• March 26, 2018
  React 源码分析 2 React组件插入Dom流程

  简介React广受好评的一个重要原因就是组件化开发，一方面分模块的方式便于协同开发，降低耦合，后期维护也轻松；另一方面使得一次开发，多处复用成为现实，甚至可以直接复用开源React组件。开发完一个组件后，我们需要插入DOM中，一般使用如下代码 ReactDOM.render( <h1>Hello, world!</h1>, document.getElemen...

• March 25, 2018
  React 源码分析 1 组件和对象的创建（createClass，createElement)

  React受大家欢迎的一个重要原因就是可以自定义组件。这样的一方面可以复用开发好的组件，实现一处开发，处处调用，另外也能使用别人开发好的组件，提高封装性。另一方面使得代码结构很清晰，组件间耦合减少，方便维护。ES5创建组件时，调用React.createClass()即可. ES6中使用class myComponent extends React.Component, 其实内部还是调用cr...

• March 23, 2018
  javascript实用技巧

  更短的数组去重写法[...new Set([2,"12",2,12,1,2,1,6,12,13,6])] //[2, "12", 12, 1, 6, 13] //es6的新特性 对象深浅拷贝1.深拷贝和浅拷贝只针对像Object, Array这样的引用类型数据。 2.浅拷贝是对对象引用地址进行拷贝，并没有开辟新的栈，也就是拷贝后的结果是两个对象指向同...

• March 22, 2018
  快应用快速入门

  QuickApp作为一个前端工程师，毕竟要顺流技术的发展。 3月20日，小米、中兴、华为、金立、联想、魅族、努比亚、OPPO、vivo、一加，共十家手机厂商在北京联合召开快应用标准启动发布会，手机厂商与中国信息通信研究院、电信终端产业协会、中国软件行业协会及数百家知名移动互联网应用企业共襄盛举，共同见证移动应用新生态的到来。 既然是国内厂商发布的，所以只针对安卓用户。 怎么感觉都是在对微信小...

• March 21, 2018
  助你理解React高阶组件

  高阶组件高阶组件（HOC）是react中对组件逻辑进行重用的高级技术。但高阶组件本身并不是React API。它只是一种模式，这种模式是由react自身的组合性质必然产生的。 具体而言，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件 高阶组件在React第三方库中很常见，比如Redux的connect方法和Relay的createContainer. 使用高阶组件（H...

• March 20, 2018
  前端深海

  前端工程师所需知识

• March 20, 2018
  React的Diff算法

  React 是 Facebook 开发的构建用户界面的类库.它从设计之初就将性能作为重点.这篇文章我展示 diff 算法和渲染过程怎样工作, 你可以借鉴优化自己的应用. Diff 算法在深入实现的细节之前, 需要了解一下 React 怎样工作的. class MyComponent extends React.Component{ render() { ...

• March 19, 2018
  Html5

  html5特性用于媒介回放的 video 和 audio 元素Video支持的视频格式Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件（.ogg） MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件(.mp4) WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件(.mkv) <video ...

• March 18, 2018
  20个超级实用的css代码

  原文地址 大家非常的清楚CSS是我们Web制作中不可或缺的一部分。HTML提供了Web制作的结构，但他不能让我们实现美丽的页面制作，此时我们需要CSS的帮助。CSS虽然能帮我们完善Web制作的效果，但其在不同的浏览器下是有不可预知的效果，为了让你的CSS能解决这些不一致下，今天给大家介绍25个CSS技巧代码，我相信这些对你肯家有很大的作用。 使用text-indent来隐藏文本这个常用在图片...

• March 13, 2018
  前端面试题（含人事方面）

  前端方面1.隐藏html元素的两种方式？它们的区别是什么？【display: none】：隐藏元素及元素内的所有内容，并且该元素的位置、宽高等其他属性值一并“消失”；【visibility: hidden】：隐藏元素及元素内的所有内容，但是该元素的位置、宽高等属性值仍然还在。 2.$.each和$(selector).each()的区别？ $.each和$(selector).each(...

• March 12, 2018
  js面试题汇总

  闭包是什么？闭包的用处。 闭包是内部函数对外部函数作用域的引用。而在函数外部引用函数内部变量，可以通过闭包实现。闭包的用处往往是在模块封装的时候。可以将模块内部公有部分暴露出来。(闭包是基础性的问题，这里只是简要的阐述了一下它的概念) 闭包详解(阮一峰) 原型以及原型链js与常用的编程语言不一样，他是靠原型继承的，并不是类。使用造零件的方式进行类比，通过类继承的方式就是通过一个模型盒铸件，而...

• March 11, 2018
  前端性能优化

  前端优化的目的是什么？ 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。　 　 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。　　 总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。 页面级优化减少http请求减少http请求数的主要途径包括： (1). 从设计实现层面简化页...

• March 10, 2018
  Ajax已死，Fetch永生

  由于 Fetch API 是基于 Promise 设计，有必要先学习一下 Promise，推荐阅读 MDN Promise 教程。旧浏览器不支持 Promise，需要使用 polyfill es6-promise 。 本文不是 Fetch API 科普贴，其实是讲异步处理和 Promise 的。Fetch API 很简单，看文档很快就学会了。推荐 MDN Fetch 教程 和 万能的WHA...

• March 09, 2018
  Git分布式版本管理系统使用

  #快速开始 安装windows安装在Windows上使用Git，可以从Git官网直接下载安装程序，（网速慢的同学请移步国内镜像），然后按默认选项安装即可。 安装完成后，在开始菜单里找到“Git”->“Git Bash”，蹦出一个类似命令行窗口的东西，就说明Git安装成功！安装完成后，还需要最后一步设置，在命令行输入： $ git config --global user.name &q...

• March 08, 2018
  React-router学习

  React-router API接口demo 地址 组件RouterReact Router 的重要组件。它能保持 UI 和 URL 的同步。 Props children(required)一个或多个的 Route 或 PlainRoute。当 history 改变时， <Router> 会匹配出 Route 的一个分支，并且渲染这个分支中配置的组件，渲染时保持父 route ...

• March 07, 2018
  你还在用for循环大法吗？

  文章主要介绍了数组Array.prototype方法的使用，需要的朋友可以参考下，如果你是大神，请直接无视。 在ES5中，一共有9个Array方法 http://kangax.github.io/compat-table/es5/ Array.prototype.indexOf Array.prototype.lastIndexOf Array.prototype.every ...

• March 06, 2018
  flex和grid布局

  网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 Flex 布局2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安...

• March 05, 2018
  看漫画，学习Redux

  React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及。 代码结构 组件之间的通信 对于大型的复杂应用来说，这两方面恰恰是最关键的。因此，只用 React 没法写大型应用。 为了解决这个问题，2014年 Facebook 提出了Flux架构的概念，引发了很多的实现。2015年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内就成为...

• March 04, 2018
  react-native学习资源大汇聚

  React Native 学习资源 React Native着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台。(Learn once, write anywhere)。 本文汇集了React-Native各类学习资源，方便大家学习，同时还有 [Awesome React Native系列]，请收下！( https://github.com/jondot/awesom...

• March 03, 2018
  学习react.js比你想象的简单

  原文地址 学习 React.js 比你想象的要简单 React 全部都是组件化的React 是围绕可重用组件的概念设计的。你定义小组件并将它们组合在一起形成更大的组件。 无论大小，所有组件都是可重用的，甚至在不同的项目中也是如此。 React 组件最简单的形式，就是一个普通的 JavaScript 函数： function Button (props) { // 这里返回一个...

• March 02, 2018
  5分钟上手TypeScript

  让我们使用TypeScript来创建一个简单的Web应用。安装TypeScript有两种主要的方式来获取TypeScript工具： 通过npm（Node.js包管理器） 安装Visual Studio的TypeScript插件 Visual Studio 2017和Visual Studio 2015 Update 3默认包含了TypeScript。 如果你的Visual Studi...

• March 01, 2018
  react-native使用过程中的报错（持续更新中）

  ReactNative 遇到的报错react-native 矢量库 react-native-vector-icons的报错解决解决方法：将项目目录下 node_modules/react-native/local-cli/core/fixtures/files/package.json删除 如果还出现这个错误 解决方案：删除重新安装react-native-vector-icons 安装...

• February 2018

• February 28, 2018
  react开发环境搭建

  使用creat-react-app搭建基于webpack的react开发环境 facebook官方文档Quick Start: npm install -g create-react-app //安装create-react-app，yarn命令(需要安装yarn) yarn add create-react-app create-react-app myapp //使用命令...

• February 27, 2018
  JavaScript奇技淫巧44招

  原文地址 首次为变量赋值时务必使用var关键字变量没有声明而直接赋值得话，默认会作为一个新的全局变量，要尽量避免使用全局变量。 使用**===取代==**==和!=操作符会在需要的情况下自动转换数据类型。但===和!==不会，它们会同时比较值和数据类型，这也使得它们要比==和!=快。 [10] === 10 // is false [10] == 10 // is true ...

• February 26, 2018
  10个最佳ES6特性

  10个最佳ES6特性原文地址 ES6，正式名称是ECMAScript2015，但是ES6这个名称更加简洁。ES6已经不再是JavaScript最新的标准，但是它已经广泛用于编程实践中。如果你还没用过ES6，现在还不算太晚… 函数参数默认值不使用ES6为函数设置默认值 function foo(height, color) { var height = height || 5...

• February 25, 2018
  React 技术栈

  React 技术栈系列原文地址 ES6教程 Bable教程 React教程 示例 Webpack Flex教程 示例 Css Modules 示例 React-router 示例 [Flux 架构] 示例 示例 Redux架构 教程一 教程二 教程三 Mocha测试框架 教程 示例 Istanbul 覆盖率框架教程 React 单元测试教程 示例

• February 24, 2018
  gulp配置及使用

  gulp 入门指南1.全局安装 gulp：$ npm install --global gulp 2.作为项目的开发依赖（devDependencies）安装：$ npm install --save-dev gulp 3. 在项目根目录下创建一个名为 gulpfile.js 的文件：var gulp = require('gulp'); gulp.task('...

• February 24, 2018
  只有20行Javascript代码！手把手教你写一个页面模板引擎

  原文地址 var TemplateEngine = function(html, options) { var re = /<%([^%>]+)?%>/g, reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g, code = 'var r=[];\n', ...

• February 23, 2018
  后HTML5时代

  HTML5 Device API原文地址 让音乐随心而动 - 音频处理 Web audio APIAudio对象提供的只是音频文件的播放，而Web Audio则是给了开发者对音频数据进行分析、处理的能力，比如混音、过滤。 系统要求 :ios6+、android chrome、android firefox 核心代码 : var context = new webkitAudioConte...

• February 11, 2018
  react-native UI组件

  React-native Components(自己理解)react-native 官网react-native 中文官网 1.ActivityIndicator 显示一个圆形的loading提示符号。2.Button 按钮3.DataPickerIOS ios日期选择组件4.DrawerLayoutAndriod andriod抽屉导航5.FlatList 高性能简单列表组件6...

• February 11, 2018
  React-native API

  React-native API(自己理解)最近在学习react-native,而且重新利用hexo 构建了自己的主页。 之前也在csdn,简书也写过博客，打算利用空闲时间把博客迁移进来。进入主题吧。 ————————————————react-native 官网react-native 中文官网 1.AccessibilityInfo 无障碍功能 给残障人士使用 2....