吴孔云的博客

最近有个项目遇到有子模块，遂整理下。。牛逼的人感觉看官网就行，像我这种菜鸟总是需要反复记忆，git官网链接戳此。1.先来个官方的APIgit submodule [--quiet] add [<options>] [--] <repository> [<path>]git submodule [--

安装JDK下载JDK,可到以下oracle官网下载: http://www.oracle.com/technetwork/java/javase/downloads/index.html 需要选择对应的版本,选择jdk-8u111-macosx-x64.dmg,然后双击安装!!! 注：这个地方一定要1.8的版本或以上，否则在 cordova build android 的时候会出现 Uns

项目中遇到的常见bug，及时整理。input放在a标签里面单机不能获取input的光标（IE环境下）双击才可以获得焦点，目前有的解决方案：不要给a标签添加href属性；不要在外面套上a标签。返回私有数组返回数组的一个副本，这样改动就不会影响原数组，只是副本而已 var array = (function () { var days = ['Mo', 'Tu', 'We',

模块化设计，一个模块化系统所必须的能力： 1. 定义封装的模块。 2. 定义新模块对其他模块的依赖。 3. 可对其他模块的引入支持。CommonJSCommonJS本质上就是一个规范，它并不提供默认实现，而是要求一些JavaScript库、框架、环境……去实现它的这些API定义。 那么，都有哪些API层面的定义呢？ 1.Uniform B

宿主对象，在javascript中有三类对象，本地对象，内置对象和宿主对象。其他两类暂且不提，宿主对象是指什么呢（DOM BOM），控制台对象是文档对象模型的扩展，也被认为是宿主对象。那么，它们有什么缺陷呢？在IE9之前，宿主对象不是继承自Object，它们的方法也不继承自Function，IE9之后就大有改进了。看下IE8与IE9的document.getElementByIdie8:ie9:我

var eventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventLi

在看Vue的API时，里面提到修改Model层，会实时更新View视图，底层原理利用的是ES5的getter和setter方法，通过 Object.defineProperty 把属性全部转为 getter/setter。故温故一遍getter和setter定义属性的方法。通过对象字面量定义get和set方法有个注意的地方，get与set的函数体都不能再定义本身该属性，否则执行的时候会陷入死循环，

为什么需要模块化？随着网站内容越来越复杂，浏览器和用户的交互越来越细腻，网站再也不是简单的内容呈现，更像是一个复杂的客户端软件，其中html/css/js代码越来越多，逻辑越来越复杂，越来越不便于管理，多人协作成本加深，为了解决这些问题，才出现了模块化的概念，也就是说模块化更多的是工程方面的产出，为了应对更复杂的网站开发。>在ES6之前，前端模块的实现本质都是利用JS神器：闭包。 闭包使得函数在调用

前端路由：客户端浏览器可以不依赖服务端，根据不同的URL渲染不同的视图页面。前端路由实现思路在页面不刷新的前提下实现url变化捕捉到url的变化，以便执行页面替换逻辑前端路由实现方法HASH我们经常在 url 中看到 #，这个 # 有两种情况，一个是我们所谓的锚点，比如典型的回到顶部按钮原理、Github 上各个标题之间的跳转等，路由里的 # 不叫锚点，我们称之为 hash，大型框架的路由系

日常项目用到的及网上收集而来不定宽高的元素居中显示position：absolute；left：50%；top：50%；-webkit-transform：translate(-50%,-50%);transform：translate(-50%,-50%);DOM获取方法//封装了id，class，tagname所有方法var get = { byId: function (i

解决js浮点数加减乘除不准确的问题

详解Web Workres理念Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，他们可以使用XMLHttpRequest执行 I/O (尽管responseXML和通道属性总是为空)。一旦创建， 一个worker 可以将消息发送到创建它的JavaScript代码, 通过将消息发布到该代码指定的事件处理程序 (反之亦然)

Vue与React都鼓励组件化应用，即将应用分拆成一个个功能明确的模块，每个模块之间可以通过合适的方式互相联系，但各自的实现略有不同。以下谈谈我的理解，如有不对，欢迎指正在Vue组件中，有几个观念和React相差比较大，我觉得主要有以下这几点：Vue组件分为全局注册和局部注册，在react中都是通过import相应组件，然后模版中引用props是可以动态变化的，子组件也实时更新，在r

Ajax和XMLHttpRequest我们通常将Ajax等同于XMLHttpRequest，但细究起来它们两个是属于不同维度的2个概念。 以下是我认为对Ajax较为准确的解释：（摘自what is Ajax） AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating

最近有个需求，服务器端下载视频，存储到本地，然后再播放，下载存储后播放不了。debug后发现是responseType未正确设置。一般的xhr请求 let url = window.URL || window.webkitURL; let xhr = new XMLHttpRequest(); xhr.open(method, url, [,async=tr

React与Vue都有lifecycle生命周期的概念，表示每个组件实例在被创建之前都要经过一系列的初始化过程。比如设置数据监听、编译模板、挂载实例到视图、在数据变化时更新视图等。Vue生命周期 所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着 你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fe

项目中有个需求，类似视频网站下载视频，比如有5个case，每个case有数量不等的的video需要从服务端下载，并且video的下载顺序是串联的，只有当正在下载的case下载完才能下载另外一个case，否则下一个case处于wait状态。如何解决此问题使用Promise 利用promise的then方法，但是因为无法确定每个case的video的数量，导致不能确定后面应该接几个t

安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960*640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。想让

最近对正则表达式又不熟悉了，故重新疏漏API，以后每日写一个正则来练习提升正则表达式中特殊字符的含义字符类别（Character Classes）. //matches any single character excepet line terminators: \n, \r\d //Matchees any digit ==[0-9]\D //Matches any charact

FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利，使用FormData的最大优点就是我们可以异步上传一个二进制文件，兼容性需要IE10+

npm是什么NPM的全称是Node Package Manager，是随同NodeJS一起安装的包管理和分发工具，它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。npm install 安装模块npm install (with no args, in package dir)npm install [<@scope>/]<name>npm install [<@sco

项目中有个需求，事件第一次执行（立即执行）与后几次执行不同，但是直接传递定义好的命名函数，返回结果一样。。如果通过匿名函数内再嵌套具名函数，结果就能返回正确！代码如下：代码<button class="button">按钮</button> (function(w) { //第一次定义需要执行的代码块 var fn = function

一个PubSub模型主要方法有3个，订阅，退订，发布

- 当对象的原型链中的原型对象上有对应的属性名，但是其是**只读的，那么对象属性的赋值操作无效**；- 当对象的原型链中的原型对象上有对应的属性名，但是**其是可写的，且设置了set方法**，那么对象属性的赋值操作无效，转而调用调用原型对象中的属性的set方法；- 当对象的原型链中的原型对象上有没有对应的属性名，那么直接在当前对象上添加这个属性(如果没有这个属性)并赋值。

js事件概念异步回调首先了讲讲js中 两个方法 setTimeout()和 setInterval（）定义和用法：setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。语法：setTimeout(callback,time)callback 必需。要调用的函数后要执行的 JavaScript 代码串。time 必需。在执行代码前需等待的毫秒数。setInterval(

本书作者douglas Crockford是JSON的创立者，一位javascript大师。1.精华javascript好的想法包括函数，弱类型，动态对象和一个富有表现力的对象字面量表示法。坏的想法包括基于全局变量的编程模型。javascript函数是基于词法作用域（lexical scop

方法一：这个很不错，好像是 csdn 的 Meizz 写的：// 对Date的扩展，将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) // 例子： // (new Date()).Forma

Symbol ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript语言的第七种数据类型，前六种是：Undefined、Null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。概述Symbol值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的Symbol

参考阮一峰的书籍ECMAScript 6 入门，感谢阮大神！let和const命令let命令 ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。基本用法var a = [];for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); };

之前只知道有for in循环，不清楚in运算符。for in 和 in 遍历对象在原型上增加的属性也会遍历出来。 in运算符的规则：对运算符左右两个操作数的要求比较严格。in运算符要求第1个（左边的）操作数必须是字符串类型或可以转换为字符串类型的其他类型，而第2个（右边的）操作数必须是数组、对象或者new生成的对象。只有第1个操作数的值是第2个操作数的属性名，才会返回true，否则返回fa

Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。

采用拼接字符串的形式，将 JSON 数据嵌入 HTML 中。开始时代码量较少，暂时还可以接受。但当页面结构复杂起来后，其弱点开始变得无法忍受起来:书写不连贯。每写一个变量就要断一下，插入一个 + 和 “。十分容易出错。无法重用。HTML 片段都是离散化的数据，难以对其中重复的部分进行提取。无法很好地利用 标签。这是 HTML5 中新增的一个标签，标准极力推荐将 HTML 模板放入 标签中，

异步脚本加载阻塞性脚本JavaScript在浏览器中被解析和执行时具有阻塞的特性，也就是说，当JavaScript代码执行时，页面的解析、渲染以及其他资源的下载都要停下来等待脚本执行完毕浏览器是按照从上到下的顺序解析页面，因此正常情况下，JavaScript脚本的执行顺序也是从上到下的，即页面上先出现的代码或先被引入的代码总是被先执行，即使是允许并行下载JavaScript文件时也是如此。注意我们这

参考书籍《你不知道的javascript的上卷》作用域是什么现代JavaScript已经不再是解释执行的，而是编译执行的。但是与传统的编译语言不同，它不是提前编译，编译结果不能进行移植。编译过程中，同样会经过分词／词法分析,解析／语法分析,代码生成三个阶段。以var a = 2;语句为例，对这一程序语句对处理，需要经过引擎,编译器,作用域三者的配合。其中，引擎从头到尾负责整个javascrip

说在开始，Javascript自定义事件类似设计的观察者模式，通过状态的变更来监听行为，主要功能解耦，易于扩展。多用于组件、模块间的交互。原型模式下的js自定义事件var EventTarget = function() { this._listener = {};};EventTarget.prototype = { constructor: this, addEven

target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象(注册该事件的对象)（一般为父级）。this指向永远和currentTarget指向一致（只考虑this的普通函数调用）。 <div id="ou

1.contact()用于连接2个或者多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。 var arr1 = [1,2,3], arr2 = [4,5,6], arr3 = [7,8,9,1,2,3]; console.log(arr1.concat(arr2,arr3)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2,

原文：Gentle explanation of ‘this’ keyword in JavaScript1. 迷之 this对于刚开始进行 JavaScript 编程的开发者来说，this 具有强大的魔力，它像谜团一样需要工程师们花大量的精力去真正理解它。在后端的一些编程语言中，例如 Java、PHP，this仅仅是类方法中当前对象的一个实例，它不能在方法外部被调用，这样一个简单的法则并不会造成任

看了阮一峰老师的JavaScript 运行机制详解：再谈Event Loop和【朴灵评注】的文章，查阅网上相关资料，把自己对javascript运行模式和EVENT loop的理解整理下，不一定对，日后再看做个回顾。MDN上有张图很形象， function f(b){ var a = 12; return a+b+35;}function g(x){ var m =

ECMAScript的数据有两种类型：基本类型值和引用类型值，基本类型指的是简单的数据段，引用类型指的是可能由多个值构成的对象。Undefined、Null、Boolean、Number和String是值类型，其他都是引用类型。其他语言String是以对象的形式表示，ECMAScript放弃了这一传统。内存中的存储区域值类型存储在栈中，引用类型存储在堆中。内存中是分为两个区域的，一个是栈：它就是专