2017年06月_coffee3139564344

原创 npm install 命令知多少

网看到一个答案，回答的很好：一个node package有两种依赖，一种是dependecies一种是devDependecies其中，前者是正常运行该包时候所需要的依赖项，而后者是开发的时候需要的依赖项，比如一些进行单元测试之类的包。如果你将包下载下来在包的根目录里面运行npm install 默认会安装两种依赖——（这也就是我们开发人员工作最常用的方式，一个人搭好项目框架将两种依赖写进pack

2017-06-29 10:19:51 410

原创基于nodeJS的前端开发到底啥意思？

今天在回来的班车上突然顿悟了‘基于node的前端开发’这句话的奥义！这个长久以来困扰着自己的问题，一直在寻找的答案，也许我现在的理解也不见得就十分准确，但是可以肯定的是，对于现阶段的我自己来说是有帮助的，现在记录如下：上个周末去了上海书城去看了下关于node的书籍，在深入浅出node中看到： node之父最初只是想搞一个拥有对搞并发还有高性能并且不阻塞的服务器，然后综合很多因素，最后决定用js来实现

2017-06-29 09:40:17 12980

原创记录一次webpack2的项目架构

1、npm init -y 生成package.json项目描述文件。2、npm install webpack –save-dev 下载webpack并将其安装到开发环境中。3、npm install babel-loader babel-core –save-dev 下载安装babel转码工具并将其添加到开发环境中。4、npm install css-loader style-loader –s

2017-06-29 09:39:27 475

原创 es6 和 common.js

ES6标准发布后，module成为标准，标准的使用是以export指令导出接口，以import引入模块，但是在我们一贯的node模块中，我们采用的是CommonJS规范，使用require引入模块，使用module.exports导出接口。ES6中的moduleES6发布的module并没有直接采用CommonJS，甚至连require都没有采用，也就是说require仍然只是node的一个私有的全

2017-06-27 11:30:20 507

原创 vue-cli 脚手架

build/ 此目录包含开发服务器和生产webpack构建的实际配置，通常不需要改变里面的文件，如果需要自己定义webpack的loader加载器，那么就去自己配置build/webpack.base.conf.js这个文件。config/index.js 是主要的配置文件，暴露了构建设置的一些常见的配置选项。src/ 这里是你的大部分应用程序代码所在的位置，如何构建此目录中的内容，主要

2017-06-27 11:29:44 228

原创代理

express服务器提供静态文件服务，不过它还使用了http-proxy-middleware，一个http请求代理的中间件。前端开发过程中需要使用到后台的API的话，可以通过配置proxyTable来将相应的后台请求代理到专用的API服务器。

2017-06-27 11:29:13 221

原创压缩包

apk是androidpackage的缩写，也即使Android安装包，他是类似Symbian Sis或者Sisx的文件格式，通过将apk文件直接传递到android模拟器，或者android手机中即可进行安装。apk文件和sis一样，把android sdk编译的工程打包成一个安装程序文件，格式为apk。APK文件其实是zip格式，但后缀名被修改为apk，通过UnZip解压后，可以看到Dex文件，

2017-06-27 11:28:34 2574

原创 vue2.0 语法

1、v-else0.5”> Now you see mediv v-else Now you don’t dive-else 元素必须紧紧的跟在v-if或者v-else-if元素的后面，否则它将不会被识别。另一个新加的指令v-else-ifdiv v-if=”type ===a” a div div v-else-if=”type===b”

2017-06-27 11:27:46 749

原创 webpack

更快捷的执行打包任务执行类似于node_modules/.bin/webpack这样的命令其实是比较烦人的，而且容易出错，不过值得庆幸的是npm可以引导任务的执行，对其进行配置后可以使用简单的npm start命令来代替这些繁琐的命令。在package.json中对npm的脚本部分进行相关的设置即可。注意： package.json中的脚

2017-06-27 11:25:59 187

原创 vue webpack.base.config.js

其中的webpack.base.conf.js是一个基础的的环境配置，里面写的个各个环境（包括开发环境，生产环境，测试环境）都需要的配置可以认为是公共部分。比如说入口文件和输出文件这类，然后开发环境的webpack的配置webpack.dev.conf.js中开头位置有这么一句：module.exports = merge(baseWebpackConfig, {

2017-06-27 11:24:23 4350

原创 es6

import命令具有提升的效果，会提升到整个模块的头部，首先执行，require则没有这个特性。import 是静态执行的，所以不能使用表达式和变量，这些只有在运行时才能得到结果。export default 命令使用import命令的时候，用户需要知道所要加载的变量名或者函数名，否则无法加载，但是用户肯定希望快速上手，为了给用户提供方便，就要用到export default命令，为模块指定默认的输

2017-06-27 11:23:22 333

原创 id定位

id属性还可以用来导航到文档中的特定位置，比如说有个名为example.html的文档中包含一个id属性值为myelement的元素，那么使用example.html#myelement这个url即可直接导航到这个元素。 url尾部#加上元素id值的部分称为url片段表示符

2017-06-27 11:22:57 553

原创 import和require

import命令会被 JavaScript 引擎静态分析，先于模块内的其他模块执行（叫做”连接“更合适）。所以，下面的代码会报错。// 报错 if (x === 2) { import MyModual from ‘./myModual’;}上面代码中，引擎处理import语句是在编译时，这时不会去分析或执行if语句，所以import语句放在if代码块之中毫无意义，因此会报句法错误，而不是执

2017-06-27 11:21:44 859

原创异步加载

下面就是两种异步加载的语法。上面代码中，标签打开defer或async属性，脚本就会异步加载。渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它下载和执行，而是直接执行后面的命令。defer与async的区别是：前者要等到整个页面正常渲染结束，才会执行；后者一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，

2017-06-27 11:20:41 251

原创 node

node 提供一些全局的函数，setTimeout(): 用于在指定毫秒之后，运行回调函数。实际的调用间隔，还取决于系统因素。间隔的毫秒数在1毫秒到2,147,483,647毫秒（约24.8天）之间。如果超过这个范围，会被自动改为1毫秒。该方法返回一个整数，代表这个新建定时器的编号。Node提供两个全局变量，都以两个下划线开头。* __filename：指向当前运行的脚本文件名。* __

2017-06-27 11:19:48 193

原创 vuex

vuex的状态不能直接别改变，改变他的唯一途径是，显示的提交— commit mutation ,这样使得我们可以的方便跟踪每一个状态的变化。

2017-06-27 11:19:21 381

原创 node

反对前端团队将前端开发划分为“js开发”和“页面重构”两种岗位这种‘粗粒度’的开发理念，对GUI软件开发的分工规划应该以功能为单位，而不是开发语言，对开发者的技术要求也应该是掌握完整的前端技术。前端是一种‘远程部署’，运行时增量下载的GUI软件。前端没有安装过程，其所需的资源构建工具在命令行中运行npm install 命令，会自动安装dependencies和devDependencies字段中的

2017-06-27 11:18:50 246

原创 mixin

定义Actions var Reflux = require(‘reflux’); var BookmarkActions = Reflux.createActions([‘fetch’]); module.exports = BookmarkActions;定义Storevar $ = require(‘jquery’); var Reflux = require(‘reflux’); v

2017-06-27 11:18:07 381

原创 webpack

实际上，服务器和客户端没有任何区别，虽然这里没有按钮点击操作，也没有向文本文字键入的操作，但是在一个更高的层面上，事件正在发生。一个连接被建立——事件！数据通过连接接受——-事件！数据通过连接停止——事件！为什么我们可以直接写require（‘’），我们不能这么写的，我们之所以这么写，是因为webpack支持，webpack支持的模块化的方式是amd commonjs 和es6的模块化

2017-06-27 11:17:32 621

原创杂

知道为什么在虚拟机内部安装npm依赖这么快的原因了，就是企业内部为了安全会搭建自己的npm仓库，原理就跟淘宝镜像做的事情是一样的，这已经是公开的秘密了，并且企业内部搭建的仓库可以不必跟远程的仓库实时的保持同步。Express的安装：npm install express -g完了之后会发现运行express –version报错说express不是内部可以执行的命令，原因是express升级了，将命

2017-06-27 11:16:55 257

原创 flux

看完flux 其实，于reflux的不同也就是在于他多了一个dispatcher嘛，reflux更加精简，去掉了flux中的dispatcher的角色，而是将它的功能分配给了action和store里面去了

2017-06-27 11:15:59 239

转载 babel-ployfill

babel默认只是转换新的JavaScript句法，而不转换新的API 比如Iterator Generator Set Maps Proxy Relfact Symbol Promise 等全局对象，以及一些定义在全局对象上的方法，都不会转码。举例来说，es6在array对象上新增了Array.form方法。babel就不会转码这个方法。如果想让这个方法运行，必须使用babel

2017-06-27 11:15:36 1509

翻译 Cordavo

Cordova的主要组成部分有三块儿Web APP ：这是存放非应用程序的代码的地方，体现的是你的具体业务逻辑模块。应用的实现是通过web页面，默认的本地的文件名称是index.html这个本地文件应用css javascript 图片，媒体和其他运行需要的资源。应用执行在原生应用包装的WebView中，这个原生应用是你分发到appstores中的。WebView： Cordova

2017-06-27 11:14:43 382

原创 $.ajax()问题

遇到个奇葩又经典的问题：$.ajax()方法明明请求成功了，数据都在preview中显示出来了，可就是不执行success方法，而是执行了error方法，你说气人不气人，网络上找到了好多同胞，都是是这个问题，现在也简单的记录一下问题的原因嘛不外乎这么几种：1是跨域了，网上真的有人说是因为跨域了，把数据改成jsonp请求方式就解决了，我真是佩服了，如果是跨域了，请求还能发出去吗？preview中还能看

2017-06-26 22:15:16 208

转载接着昨晚的写。。。

上回说到我们可以通过重写请求头的技术，来绕过浏览器的限制，今晚来看令一个在请求头中设置的头信息—–内容缓存Cache-Control一些浏览器会缓存通过Ajax请求所获得的内容，在浏览器回话期间不会再次的请求它。我们可以通过设置禁止缓存的头信息可以达到，当请求的内容发生了改变的时候，就会在下一次请求文档时体现出来需要做的就是在open方法和send方法之间加一句httpRequest.setRequ

2017-06-26 21:56:50 185

原创 HTML5中的新特性之Ajax篇

本篇内容是本人在学习HTML权威指南中过程中以笔记形式记录的关于Ajax的要点。等级Ajax核心规范的名称继承语XHR对象，这个规范有两个等级：level1和lever2，其中所有的主流浏览器都实现了level1代表的基础级别的功能，level2扩展了最初的规范，本文重点要讲解的CORS就是其中一个。基本的步骤创建一个新的XMLHttpRequest对象给readystatechange事件设置

2017-06-26 00:17:46 2421 1

原创 ES6中的Promise

哎呀，这个东西啊早就了解过了，但是奈何，受回调函数毒害日子太久了，以至于每次到了本可以使用promise来更加优雅的实现逻辑的时候，总是习惯性的使用了回调。这次又回头看了一遍阮老师的es6中关于promise的讲解，决定趁着热乎，记录下来，一来加深自己的理解，二来也提醒自己这是promise的时代了！以下内容大多数来自阮老师的Es6入门地址：http://es6.ruanyifeng.com

2017-06-21 22:52:35 237

原创 lodash和underscore

关系额并没有查到二者有什么亲戚关系，都是js的工具库封装了很多很实用的方法。使用如果是npm安装就不说了，主要说一下如果是静态文件式的使用，就如同下载引入jQuery一样，需要将underscore或者lodash下载下来，那么问题来了，如何下载？是的，跑去两位的官网下载，第一次居然没下载到，下载链接点进去直接看到了赤裸裸的实现源码，我去，后来去underscore官网看一下，才知道要右键点击然

2017-06-21 17:14:41 1219 1

原创 flux | fecebookflux | reflux | redux 都是些啥

区别架构和实现flux是一个架构是抽象层面的东西，可以把他理解为commonJS规范一样的东西，是需要有人来具体实现它的。而facebookflux就是对flux规范的一个实现库，由于它比较早，可能是最早实现的吧人们也称之为origin flux ，在之后reflux是另一个对flux架构的实现库，功能跟Facebook flux一样但是使用更加方便，逻辑更加清晰，最后redux是现在比较热门的fl

2017-06-20 16:04:04 382

原创浏览器原理

js线程浏览器的内核是多线程的，它们在内核制控下相互配合以保持同步，一个浏览器至少实现三个常驻线程：javascript引擎线程，GUI渲染线程，浏览器事件触发线程。 javascript执行顺序：http://bbs.html5cn.org/thread-80116-1-1.html JS一定要放在Body的最底部么：http://www.html5cn.org/article-9333-1.

2017-06-20 15:27:40 203

原创 Cordavo和PhoneGap

理清二者的关系开发的一个基于React框架的移动端APP中用到了cordova方面的东西，所以就网上查了一下，这方面的资料。方便日后温习。开始呢是一次苹果公司的ISO开发者大会上，一群很屌的大神产生了一个大胆的想法，他们想要自己写一个工具来填补web开发和iOS开发之间的不足，并提出一个响亮的口号：“Bridging the gap between the web and the iPhone

2017-06-20 15:16:31 494

原创分清计算机中的ROM和RAM

都不是硬盘之前总结过，后来忘了，看来知识还是要经常温故而知新，发现很多人跟之前的我一样分不清ram和rom的区别，甚至是计算机专业科班出身的，现在简单记录如下： rom:的全称是read only mamery 直译为只读存储器，既然都是只读的了，肯定就不是你轻轻松松就能改写的嘛，所以，不要再将它跟你的硬盘扯到一起去了，你的硬盘属于外存。ROM一般只读是烧录在计算机主板上的一段系统引导程序也就是我

2017-06-20 01:01:59 884

coffee3139564344的博客

原创 npm install 命令知多少

原创基于nodeJS的前端开发到底啥意思？

原创记录一次webpack2的项目架构

原创 es6 和 common.js

原创 vue-cli 脚手架

原创代理

原创压缩包

原创 vue2.0 语法

原创 webpack

原创 vue webpack.base.config.js

原创 es6

原创 id定位

原创 import和require

原创异步加载

原创 node

原创 vuex

原创 node

原创 mixin

原创 webpack

原创杂

原创 flux

转载 babel-ployfill

翻译 Cordavo

原创 $.ajax()问题

转载接着昨晚的写。。。

原创 HTML5中的新特性之Ajax篇

原创 ES6中的Promise

原创 lodash和underscore

原创 flux | fecebookflux | reflux | redux 都是些啥

原创浏览器原理

原创 Cordavo和PhoneGap

原创分清计算机中的ROM和RAM

空空如也

空空如也