gigi就是我-CSDN博客

原创 ie兼容问题

hack技巧html条件注释法<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endi

2017-08-02 15:33:10 298

原创 gulp、requirejs、webpack之间是什么关系

gulp、requirejs、webpack之间是什么关系AMD与CMD分别为模块化规范requirejs和seaJs分别为实现规范的一种方案。在线编译模块方案：在工程中引入了requirejs，就相当于加载了一个AMD解释器，是的能够使用 define、exports、module 这些方法，实现模块化browserify / webpack预编译模块方案。gulp：一种

2017-08-02 14:41:36 3602

原创 react-router学习笔记

React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。链接配置在组件中使用<Link>代替<a>链接或者其他可点击元素，这样就能触发路由跳转：<Link to="/home">Home</Link>路由配置React.render(( <Router> <Route path="/" c

2017-08-01 20:19:59 667

原创 react组件间的数据传递

参考ReactJS组件间沟通的一些方法父子组件父->子：通过props将数据传递给子组件子->父父组件通过props讲一个callback传给子组件，子组件内调用这个callback即可改变父组件的数据兄弟组件维护在父组件中将数据维护在两个组件的父组件或祖先组件中通过props传递数据或者callback 但当组件层次较深的时候一层一层地传递数据太过繁琐这个图笑死了……全局事件可以使用事件来实现

2017-08-01 12:00:40 4264

原创 redux学习笔记

概述Redux提供一种状态管理的方式。有以下三个要点：应用中所有的state都以一个对象树的形式储存在一个单一的store中。唯一改变state的办法就是触发action（一个描述发生什么的对象）为了描述action如何改变state树，需要编写reducers一般我们使用一个普通对象来描述应用的state，如：{ todos: [{ text: 'Eat food',

2017-07-31 18:47:46 552

转载八段代码彻底掌握 Promise

转载自八段代码彻底掌握 Promise1.Promise的立即执行性var p = new Promise(function(resolve, reject){ console.log("create a promise"); resolve("success");});console.log("after new Promise");p.then(function(value){

2017-07-31 11:31:49 514

原创 get与post区别

GET使用URL或Cookie传参，而POST将数据放在BODY中一般来说get请求会将参数放到url中进行传递，post则会将数据放到body中传递。但是现代的浏览器也是支持get在body中传递数据的，只不过一般来说get会放到url中。 GET方式提交的数据有长度限制，则POST的数据则没有限制GET方式提交的数据有长度限制主要是由于浏览器对url的长度有限制，而get通常将数据放到u

2017-07-31 10:58:14 279

原创 webpack学习笔记

概述 webpack是一个模块打包工具，支持CommonJs、AMD、ES6等模块化方式，并将各种静态资源都视为模块。webpack会递归地解析所有文件，构建成一个依赖关系图，最终打包成一个文件，由浏览器加载。模块webpack支持以下模块：ES6 import语句CommonJS require语句AMD define、require语句css/sass/less @import语句

2017-07-30 14:17:28 1270

原创一个全面详细的gulp工作流

开发dev gulp-load-plugins 使用gulp-load-plugins模块，可以加载package.json文件中所有的gulp模块，而不用一个一个地去加载。 var gulp = require('gulp'), gulpLoadPlugins = require('gulp-load-plugins'), $= gulpLoadPlugi

2017-07-26 18:49:17 3865

原创 ES6学习笔记：箭头函数

重点写在前面，箭头函数与传统的js函数不同的地方：没有this，super，arguments，new.target。这些值由箭头函数所属的非箭头函数的相应值来决定。不能被new调用。箭头函数没有 [[Construct]] 方法，因此不能被用为构造函数，使用 new 调用箭头函数会抛出错误。没有原型。传统的js函数都会有原型，但是箭头函数不能被new调用，也不需要原型，也就是没有pr

2017-07-22 18:52:06 707

原创 react学习笔记

JSX是js的一种语法扩展，在React中用于描述UI。在JSX中使用{}嵌入任何js表达式多行JSX最好使用括号wrap编译后，JSX表达式成为常规的JavaScript对象。因此可以在if或者for循环中使用，或者赋值给其他的变量、从函数中返回等等。由于JSX比起HTML更接近JavaScript，所以React DOM使用驼峰命名法为属性命名而不是使用HTML属性名称。比如，cla

2017-07-15 21:03:42 656

转载移动web开发要点总结

摘录自无线Web开发经验谈针对移动端的web开发主要基于移动端的浏览器，不管安卓还是IOS的浏览器都是基于webkit的，因此移动端开发可以说是针对webkit浏览器的开发。HTMLmeta-viewport<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimun-s

2017-07-14 15:02:55 538

原创 for in、for of、forEach的区别

forEachforEach（）是数组的一个方法，用于遍历数组的每一项，并对每一项执行一个callback函数。 forEach（）没有返回值，返回值总是undefined。let a = ["a","b","c"];a.forEach(function(item,index,array){ console.log(item); })// a// b// cfor…ofES6提出

2017-07-14 11:04:14 4971 1

原创 :nth-child和:nth-of-type之间的差异

参考文章 CSS3选择器:nth-child和:nth-of-type之间的差异举例来说：p:nth-child(2)选择的是其父元素下的第二个子元素，且为p元素。此处关键的是一定选择的是其父元素下的第二个子元素，若刚好为p元素则可以选择，若不是p元素则不会选择上任何元素。p:nth-of-type(2)选择的是其父元素下第二个p元素。注意此时选择的不一定是父元素的第几个子元素，但是一定

2017-07-13 09:37:54 343

原创 CommonJS、requirejs、ES6的对比

文件路径首先先搞清楚文件路径的写法，这里我总是记不住，有点晕，正好这次整理一下。以 / 为起始，表示从根目录开始解析；以 ./ 为起始，表示从当前目录开始解析；以 ../ 为起始，表示从上级目录开始解析；CommonJS CommonJS对应的模块化规范为CMD，是nodejs也就是服务器端广泛使用的模块化机制。该规范的主要内容是，模块必须通过module.exports 导出

2017-07-09 22:38:45 24808 4

原创 CSS动画的性能优化

在移动端的一些h5页面或其他地方经常要使用css动画，但是在pc端看着好好的动画到移动端上却出现了卡顿，遂搜集了一些有关css动画性能优化方面的资料。GPU 现代浏览器大都利用了GPU来加速网页渲染。GPU是专用于图形渲染的芯片，它擅长做如下事情：绘制位图到屏幕上对图片进行处理，例如：修改位置、旋转和缩放等等知道GPU擅长什么之后，让我们以Chrome为例子分析

2017-07-06 11:55:42 793

原创 SEO优化实战

http://imweb.io/topic/5682938b57d7a6c47914fc00大概总结一下几个点：TDK优化（title，description，keyword）title每个网页应该有一个独一无二的标题，切忌所有的页面都使用同样的默认标题descriptiondescription不是权值计算的参考因素，这个标签存在与否不影响网页权值，只是会显示在搜索结果中，展现给用户。网站首页、

2017-07-05 18:04:51 1708

原创 REST&&RESTful

RESTful可以通过一套统一的接口为不同终端提供服务，如Web、IOS、Android等。REST描述的是在网络中client和server的一种交互形式。服务器提供的RESTful API，每个网址代表一种资源。URL中使用名词来指定资源，如 http://api/v1/belongs/使用HTTP中的动词来实现对资源的增删改查GET（SELECT）：从服务器取出资源（一项或多项）。PO

2017-05-02 20:52:02 327

原创移动端web适配

移动端web适配我了解的总共有4种方法：固定宽度定死页面宽度，直接写一个div把宽度订到设计稿的宽度或者你需要的宽度，然后让它居中，再在这个div盒子里进行你的页面开发，这种开发的缺点就是当遇到较大的屏幕时，屏幕的两边会流出白边，影响美观，体验不好。宽度百分比使用媒体查询但媒体查询一般是针对几种主流分辨率进行定制，用户体验也不能说有多好，毕竟在一些分辨率变换的瞬间，布局会突然性地变化。

2017-05-01 19:43:22 1213

原创 requestAnimationFrame

requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是让浏览器在下一个动画帧安排一次网页重绘。requestAnimationFrame的优势，在于充分利用显示器的刷新机制，比较节省系统资源。显示器有固定的刷新频率（60Hz或75Hz），也就是说，每秒最多只能重绘60次或75次。若我们利用setTimeout和setInterval

2017-04-18 15:51:57 448

原创 src与href区别

href 指定网络资源的位置，在当前元素和引用资源之间建立链接浏览器在解析到此处不会加载这个链接的内容，页面解析不会暂停src 表示引用一个外部资源，并将资源加载到当前元素中常见于script、img、video、object阻塞的。浏览器解析到此处会暂停所有渲染而加载此处内容直到加载完成

2017-04-17 15:45:30 353

原创 js定时器的几种写法

setTimeout（）设定一个定时器，在指定时间后执行一段代码。let timeoutId = setTimeout(func,delay,param1,param2,……);timeoutId：为此定时器的id，此id可以传入clearTimeout（）来取消这次定时器func：为指定时间后执行的函数delay：是延迟的毫秒数。如果省略的话，默认取值0。param：向延迟函数传递而外

2017-04-17 15:35:20 5949

原创 js生成当月日历

var date = new Date();//当前是哪一年var year = date.getFullYear();//当前是哪个月，注意这里的月是从0开始计数的var month = date.getMonth();//当前月的第一天的日期var firstDay = new Date(year,month,1);//第一天是星期几var weekday = firstDay.g

2017-04-12 22:58:56 4766

原创 canvas学习笔记

<canvas> 是 HTML5 新增的元素，可使用JavaScript脚本来绘制图形。canvas元素canvas也是HTML的一个元素，只有两个属性：width和height。当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。<canvas id="myCanvas" width="400" height="400"> </canvas>渲染上下文<can

2017-04-01 21:05:53 647

原创 cookie与session的区别

session由于HTTP是无状态的协议，不会记录是与哪个用户进行的连接，因此需要一种机制来标识并跟踪特定的用户，这就是session。Session代表服务器与浏览器的一次会话过程session被保存在服务器端。当客户端第一次请求session对象时候，服务器会为客户端创建一个session，并将通过特殊算法算出一个sessionID，用来标识该session对象。当浏览器下次请求别的资源的

2017-04-01 09:58:12 250

原创 leetcode解题笔记：Two sum系列解题思路

Two Sum3Sum3Sum ClosestTwo SumGiven an array of integers, return indices of the two numbers such that they add up to a specific target.You may assume that each input would have exactly one solution,

2017-03-27 15:06:52 9153

原创 HTML attribute 与 DOM property 的对比

最近在学Angular，奇怪的是在这里面看到了二者的对比，说的还挺清楚……HTML attribute 与 DOM property 的对比要想理解 Angular 绑定如何工作，重点是搞清 HTML attribute 和 DOM property 之间的区别。attribute 是由 HTML 定义的。property 是由 DOM (Document Object Model) 定义的。少

2017-03-24 11:13:54 574

原创前端js性能优化（三）

UI界面浏览器让一个单线程共用于执行js和更新UI界面，因此这两种操作无法同时进行。浏览器UI线程用于执行js和更新UI的进程通常被成为浏览器UI线程。 UI线程的工作基于一个简单的队列系统，任务会被保存到队列中直到进程空闲。一旦空闲，队列中的下一个任务就会被重新提取出来并运行。这些任务要么是js代码，要么是执行UI更新（包括重绘和重排）。这两种任务是相互阻塞的。浏览器限制

2017-03-21 10:56:11 1868

原创前端js性能优化（二）：DOM

DOM编程 DOM是一个独立于语言的，用于操作XML和HTML文档的接口。在浏览器中的DOM接口是用js实现的。浏览器中通常会把DOM和js独立实现。两个相互独立的功能只要通过接口彼此连接就会产生消耗。因此每次js通过接口访问DOM时都会产生一些消耗，操作的次数越多，消耗越大。DOM访问与修改根据上面所说的，访问DOM是有代价的。最坏的情况就是在循环中访问或修改元素，

2017-03-20 22:42:09 642

原创前端js性能优化（一）

加载和执行多数浏览器使用单一进程来处理UI刷新和js脚本执行，因此同一时刻只能做一件事。因此，当页面遇到script标签后都会阻止页面渲染过程并等待脚本的解析和执行，无论脚本是内嵌的还是外链的。脚本位置HTML4规范指出script脚本可以放在HTML的head或body中。如果把script标签放在head中，由于脚本会阻塞页面渲染，因此直到他们全部下载并执行完成后，页面的渲染才会继续。

2017-03-20 17:57:19 557

原创 js:防抖动与节流

针对一些会频繁触发的事件如scroll、resize，如果正常绑定事件处理函数的话，有可能在很短的时间内多次连续触发事件，十分影响性能。因此针对这类事件要进行防抖动处理：它的做法是限制下次函数调用之前必须等待的时间间隔。正确实现 debouncing 的方法是将若干个函数调用合成一次，并在给定时间过去之后仅被调用一次。// 将会包装事件的 debounce 函数function deboun

2017-03-15 20:15:46 29515 4

原创 vue学习笔记：vue-router

vue-router是Vue.js官方的路由插件，适合用于构建单页面应用。 vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。配置vue-router总共分以下几步：设置路由渲染区域页面中使用<router-view></router-view>，路由匹配到的组件将渲染在这里。<div id="app">  <

2017-03-15 11:03:37 1955

原创 vue全家桶

除了Vue.js我们还需要用到：（1）vue-cli：Vue的脚手架工具，用于自动生成Vue项目的目录及文件。（2）vue-router： Vue提供的前端路由工具，利用其我们实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现前后端分离。（3）vuex：Vue提供的状态管理工具，用于同一管理我们项目中各种数据的交互和重用，存储我们需要用到数据对象。（4）ES6：Javascrip

2017-03-14 22:44:26 1774

原创 vue学习总结：响应式系统&vue实例

响应式系统vue是一个帮助用户构建界面的前端框架，它的核心是一个响应式的数据绑定系统，通过数据来驱动页面显示的更新，而不是像jquery那样通过操作DOM来改变页面的显示。vue通过ViewModal来实现数据和DOM的双向数据绑定。这是如何实现的呢？当我们把一个普通的js对象传给Vue实例的data选项后，Vue将遍历这个对象所有的属性，并使用Object.defineProperty 把这些

2017-03-14 20:13:45 5338

原创知识点：TCP的拥塞控制

拥塞控制就是防止过多的数据注入到网络中，这样就可以使网络中的链路不致过载。这往往是全局性的，设计到所有的主机和路由器。而流量控制则是针对点对点通信的控制，意在抑制发送端发送数据的速率以便接收端来得及接收。有几种拥塞控制的方法：慢开始和拥塞避免发送方维持一个拥塞窗口，其大小取决于网络的拥塞程度，并且动态变化。发送方控制拥塞窗口的原则是：只要网络没有出现拥塞，拥塞窗口就增大一些，以便把更多的分组发

2017-03-13 22:46:33 1850 1

原创知识点：keep-alive

HTTP keep-alive是使用同一个TCP连接来发送和接收多个HTTP请求/应答，而不是为每一个新的请求/应答打开新的连接的方法。HTTP1.0中的每一次http请求和响应过程都伴随着一次tcp连接的建立和断开。当在头部中设定：Connection：keep-alive后方能启动Keep-Alive，即客户端和服务器间的连接持续有效。http 1.1中默认启用Keep-Alive，如果加入

2017-03-13 22:19:48 450

原创知识点：https

为什么要用https？HTTP使用明文传输，可以从中截断获取信息，安全性很低。什么是httpsHTTPS经由HTTP进行通信，但利用SSL/TLS来加密数据包。即http层将数据给到ssl，ssl将数据加密后再给到tcp进行传输。 https保证：内容加密、身份认证和数据完整性。加密算法加密分为对称加密和非对称加密。对称加密：加密数据和解密数据使用的密钥是一样的。对称加密的优点在

2017-03-13 22:05:46 307

原创知识点：window.postMessage

window.postMessage() 方法可以安全的进行跨域、跨页面通信。 window.postMessage() 需要在页面加载完毕后才能进行跨域通信，但是我们无法检测目标页面的onload事件，所以只能使用setTimeout和setInterval来处理。发送消息otherWindow.postMessage(message, targetOrigin, [transfer])其中ot

2017-03-13 20:57:37 4105

原创各种排序

快速排序Ο(n log n)从数列中挑出一个元素，称为 “基准”（pivot），重新排序数列，所有比基准值小的摆放在基准前面，所有元素比基准值大的摆在基准的后面。这个过程结束后，该基准就处于其正确的位置上。这个称为分区（partition）操作。递归地进行上面两步传统实现方法function quickSort(arr){ if(arr.length == 0) return;

2017-03-11 09:58:57 282

原创 js面试算法

验证一个数是否是质数质数只能被1和它自己整除，因此令被除数从2开始，若能整除则不是质数，若不能整除则加一，直到被除数到达根号n，此时n则是质数。var isPrime = function(n){ var divider = 2; var limit = Math.sqrt(n); while(divider<=limit){ if(n%divide

2017-03-09 23:18:39 6311

空空如也

js中window.open之前的事件是什么？

js如何实现点击链接激活已打开页面？