2017年06月_Generon

原创 react开发：从零开始搭建一个react项目

从头开始建立一个React App - 项目基本配置npm init 生成 package.json 文件.安装各种需要的依赖:npm install --save react - 安装React.npm install --save react-dom 安装React Dom,这个包是用来处理virtual DOM。这里提一下用React Native的话，这里就是安装r

2017-06-29 17:48:40 26132 10

原创 http开发：HTTP缓存机制及原理分析

前言Http 缓存机制作为 web 性能优化的重要手段，对于从事 Web 开发的同学们来说，应该是知识体系库中的一个基础环节，同时对于有志成为前端架构师的同学来说是必备的知识技能。但是对于很多前端同学来说，仅仅只是知道浏览器会对请求的静态文件进行缓存，但是为什么被缓存，缓存是怎样生效的，却并不是很清楚。在此，我会尝试用简单明了的文字，像大家系统的介绍HTTP缓存机制，期望对各位正确

2017-06-29 17:39:43 837

原创 javascript开发：javascript知识要点

1、请解释事件代理 (event delegation)。参见博客： http://blog.csdn.net/majian_1987/article/details/85913852、请解释 JavaScript 中 this 是如何工作的。首先：this 永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。匿名函数或不处于任何对象中的函数指向 windo

2017-06-03 17:29:48 1231

原创 javascript开发：javascript基础知识点

1、javascript的typeof返回哪些数据类型object number function boolean underfind string typeof isNaN 检测数组的几种方式：Array.isArray(); es5toString.call([]);//”[object Array]”var arr=[];

2017-06-03 16:42:43 1081

原创 javascript开发：javascript回收机制

一、垃圾回收机制—GCJavaScript具有自动垃圾回收机制(GC:Garbage Collecation)，也就是说，执行环境会负责管理代码执行过程中使用的内存。原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。JavaScript垃圾回收的机制很简单：找出不再使用的变量，然后释放掉其占用的内存，但是这个过程不是实时的，因为其开销比较大，所以垃

2017-06-03 16:23:01 503

原创 javascript开发：javascript机制

JavaScript 的事件是以一种流的形式存在的，一个事件会有多个元素同时响应。具体分为：捕获型事件（非IE）（经@hentailing 同学提醒，IE已支持）、冒泡型事件（所有浏览器都支持）。捕获型事件是自上而下的，而冒泡型事件是自下而上的。下面这张图说的很明了：1.捕获型事件：[html] view plain copy

2017-06-03 16:19:29 360

原创 vue开发：前端数据绑定的原理

前端数据的双向绑定方法前端的视图层和数据层有时需要实现双向绑定(two-way-binding)，例如mvvm框架，数据驱动视图，视图状态机等，研究了几个目前主流的数据双向绑定框架，总结了下。目前实现数据双向绑定主要有以下三种。github演示例子1、手动绑定比较老的实现方式，有点像观察者编程模式，主要思路是通过在数据对象上定义get和set方法(当然还有其它方

2017-06-03 16:12:35 1763

原创 vue开发：vue+axios实现登录拦截

一个项目学会前端实现登录拦截一个项目学会vue全家桶+axios实现登录、拦截、登出功能，以及利用axios的http拦截器拦截请求和响应。前言该项目是利用了Github 提供的personal token作为登录token，通过token访问你的Repository List。通过这个项目学习如何实现一个前端项目中所需要的登录及拦截、登出、token失效的拦截及对

2017-06-02 21:57:50 11468 3

原创 vue开发：axios前后端数据处理

目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目都会使用 Vuex 来管理数据。前言：使用 cnpm 安装 axioscnpm install axios -S安装其他插件的时候，可以直接在 main.js 中引入并 Vue.use()，但是 axios 并不能 use，只能每个需要发送请求的组件中即时引入为

2017-06-02 21:52:07 8093

原创 vue开发：vue全局组件的方法

在vue项目中，可以自定义组件像vue-resource一样使用Vue.use（）方法来使用，具体实现方法：1、首先建一个自定义组件的文件夹，比如叫loading，里面有一个index.js，还有一个自定义组件loading.vue,在这个loading.vue里面就是这个组件的具体的内容，比如：template> div> loading...........

2017-06-02 21:48:34 7516 1

原创 vue开发：vue中computed 和 watch的异同

vue中computed 和 watch的异同！一、computed 和 watch 都可以观察页面的数据变化。当处理页面的数据变化时，我们有时候很容易滥用watch。而通常更好的办法是使用computed属性，而不是命令是的watch回调。这里我直接引用vue官网的例子来说明：html:我们要实现第三个表单的值是第一个和第二个的拼接，并且在前俩表单数值变化时，

2017-06-02 21:44:47 6521

原创 javascript开发：数组Array探究

1、创建数组创建数组的方法有多个，我们用自己喜欢的写法就好。在创建数据组的时候，可以是一个空数组，也可以为他指定长度，也可以直接赋值给它。[javascript] view plain copyvar arrayObj = new Array();　 //创建一个数组 var arrayObj = [];

2017-06-02 21:34:58 475

原创 javascript开发：js常见问题

1、截取字符串abcdefg的efgalert('abcdefg'.substring(4));2、判断一个字符串中出现次数最多的字符，统计这个次数/*var str = 'asdfssaaasasasasaa';var json = {};for (var i = 0; i if(!json[str.charAt(i)]){

2017-06-02 21:28:21 715

如今做web开发，jQuery 几乎是必不可少的，就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘述了，用过的都知道。今天我们来讨论下jquery的插件机制，jquery有着成千上万的第三方插件，有时我们写好了一个独立的功能，也想将其与jquery结合起来，可以用jquery链式调用，这就要扩展jquery，写成插件形式了，如下面就是一

2017-06-02 00:28:33 581

原创 js开发：javascript操作数组

1、数组的创建以下为引用的内容：var arrayObj = new Array();　//创建一个数组 var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);　创建

2017-06-01 23:37:35 377

原创 vue开发：vue中引入jquery

一、安装jQuery：npm install jquery --save-dev;二、找到项目根目录下webpack.config.js》在module.exports》 plugins里面添加一下代码：new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery"}),三、在App.vue页面引入（放在scr

2017-06-01 22:39:33 1866

原创 vue开发：脚手架搭建的vue项目里引入jquery和bootstrap

引入jQuery：1.在cmd输入：npm install jquery,回车，等待..2.在webpack.base.conf.js里进行如下操作：3.在webpack.prod.conf.js里进行如下操作：4.在入口文件里引入：不知道是不是jquery版本的问题，在重构以前写的页面时，通过在.vue文件里引入js的方式将写好的j

2017-06-01 22:34:00 3197

原创 javascript开发： JavaScript事件绑定的方法

事件使得客户端的 JavaScript 有机会被激活，并得以运行。在一个 Web 页面装载之后，运行脚本的唯一方式，就是响应系统或者用户的动作。虽然从第一个支持脚本编程的浏览器面世以来，简单的事件被实现为 JavaScript 的一部分；但是大多数最近出现的浏览器都实现了强壮的事件模型，使脚本可以更加智能地处理事件。现在的问题在于：为了支持各种浏览器，您必须和多个先进的事件模型做斗争，准

2017-06-01 22:29:28 384

原创 jquery开发：jquery事件绑定解绑机制

为什么jQuery能实现不传回调函数也能解绑事件？如下：$("p").on("click",function(){ alert("The paragraph was clicked.");});$("#box1").off("click");1234512345事件绑定解绑机制调用on函数的时候，将生成一份事件数据，结构如下：{ type: type,

2017-06-01 22:15:08 817

原创 jquery开发：事件冒泡机制与委托机制，jQuery动态绑定

一、事件的捕获与冒泡由W3C规定的DOM2标准中，一次事件的完整过程包括三步：捕获→执行目标元素的监听函数→冒泡，在捕获和冒泡阶段，会依次检查途径的每个节点，如果该节点注册了相应的监听函数，则执行监听函数。以下面的HTML结构为例：div id="parentdiv"> 父亲 div id="childdiv">孩子div>div>12341234执行的流程应

2017-06-01 22:05:07 449

原创 angular开发：angular2的基础问题

Angular作为目前最为流行的前端框架，受到了前端开发者的普遍欢迎。不论是初学Angular的新手，还是有一定Angular开发经验的开发者，了解本文中的12个经典面试问题，都将会是一个深入了解和学习Angular 2的知识概念的绝佳途径。在文中，我们将会接触到很多Angular 2的重要概念，并附扩展阅读资料和自查小测试，供大家评估自己对Angular的了解程度。

2017-06-01 21:58:19 1604

原创 vue开发：vue,angular,react数据双向绑定原理分析

传统做法前端维护状态，手动操作DOM更新视图。前端框架对服务器数据通过模版进行渲染。当用户产生了一个动作之后，我们通过document.getElementBy... 手动进行DOM更新。框架帮忙分离数据和视图，后续状态更新需要手动操作DOM，因为框架只管首次渲染，不追踪状态监听变化。双向数据绑定当我们在前端开发中采用MV*的模式时，M - model，指的是模型，也就是

2017-06-01 21:55:17 10562

原创 js开发：通过面向对象方式完成的拖拽功能

研究了两天的JS面向对象了，然后根据视频完成了一个简单的拖拽功能。下面的代码其实很简单，唯一需要注意的就是 this ，感觉JS中的this还是很奇妙很有意思的，接下来学习就研究this指针好啦。下面是拖拽的代码Drag.js[javascript] view plain copyfunction Drag(id

2017-06-01 00:06:58 1242 1

原创 js开发：javascript中的this

今天上午主要学习了js中的 this ,因为之前学习面向对象时，this这个东西出现的还是很频繁的，理解的很不透彻，感觉老被Java的思想带进坑里，所以对它特别关注。首先贴一个大神的一篇博客，我是通过这篇博客对this的认识和了解有了很大的提升，下面是传送门foocoder----详解JavaScript中的this首先，解释一下this到底是个什么

2017-06-01 00:02:02 352

Generon的博客