Skip to content

Instantly share code, notes, and snippets.

View lx7575000's full-sized avatar

刘鑫 lx7575000

27 followers · 31 following
  • Hang Zhou
View GitHub Profile
@lx7575000
lx7575000 / getQueryStringArgs.md
Last active March 3, 2016 11:53
学习location对象，对其中的search属性进行分离操作。应用ES6语法，对每一部都进行了详细解释。 
function getQueryStringArgs(){
  //查询是否有query的参数，如果有就去掉其中的？后返回后续的具体内容 返回type=music&loc=ningbo
  let qs = location.search.length > 0 ? location.search.substring(1) ? '';
  //判断是否有query参数，将各个参数项分开为type=music和loc=ningbo两部分
  let items = qs.length ? qs.split("&") : [];
  let args = {};
  let name = null, value = null, item = null;
  for(let i = 0; i < items.length; i++){
 //分别将各个query项进行键值分离为type和music、loc和ningbo
@lx7575000
lx7575000 / gist:550b700c769ff25f8315
Last active March 2, 2016 16:01
由于文档中没有具体介绍带有header section的ListView实现，所以对于Rreact Native中ListView的进行了具体分析和实现建议
'use strict';
import React, {
Component,
View,
Text,
NavigatorIOS,
ListView,
} from 'react-native';
@lx7575000
lx7575000 / covertNodeLIstToArray.md
Last active March 3, 2016 11:52
通过querySelectorAll方法选择DOM节点组，会返回一个NodeList对象。大家都知道它像数组但不是，所以想使用map方法时愁死宝宝们了。所以必须进化

let lists = document.querySelectorAll('li');

let listsArray = Array.prototype.slice.call(lists, 0);

通过使用slice方法将NodeList类型转换为Array类型

@lx7575000
lx7575000 / EventsFlow.md
Last active March 3, 2016 11:50
事件流和事件代理/委托

#事件代理/委托 ##事件流 事件流分为两类，IE6的冒泡事件流和非IE6的捕获事件流。 ##IE冒泡事件流 冒泡的这种相对简单一些，就是子元素触发一个特定事件，然后这个事件发生后会不怕事大的一直向上层父组件进行传递广播，最终传递到HTML标签的document为止。 ##捕获事件流 与冒泡相比，捕获事件流相对就多了些内容。触发事件的这个子元素它是整个事件传播过程的中点，始发于document（html标签）对象，经过一系列父组件到达惹事的子元素标签处，然后就原路返回。 所以整个捕获事件流可以分为三个部分：

捕获阶段 --> 目标阶段(在触发事件的节点上，会发生两次) -->冒泡阶段

@lx7575000
lx7575000 / nullAndundefined.md
Created March 3, 2016 15:59
null 和 undefined区别

#null 和 undefined ##理论区别（然并卵） null是一个表示无的对象，当其被转为数值对象时为0。 undefined是一个表示无的原始值，转为数值时为NaN ##实际用法 null表示没有对象，即该处不应该有值。

  1. 作为函数参数，表示该函数的参数不是对象。
  2. 作为对象原型链的重点---Object.prototype = null (一个空对象)

undefined表示缺少值，即此处可以有值，但还没有定义

@lx7575000
lx7575000 / button.md
Created March 4, 2016 00:20
大漠发文说过的一道CSS实现题 
.button {
  margin: 80px 0 0 80px;
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 60px;
  font-size: 26px;
  font-weight: bold;
  font-family: arial;
@lx7575000
lx7575000 / withoutBorderRadius.md
Created March 9, 2016 06:28
不使用border-radius，自适应的圆角框

HTML结构

        <div class="box">
            <div class="box-top">
                <div class="bd bd-1"></div>
                <div class="bd bd-2"></div>
                <div class="bd bd-3"></div>
                <div class="bd bd-4"></div>
                <div class="bd bd-5"></div>
            </div>
@lx7575000
lx7575000 / demo-babelrc
Created April 2, 2016 05:49
如果希望通过babel转译ES6的代码，需要在项目根目录中创建一个.babelrc文件，并添加如下代码
{
"presets": ["babel-preset-es2015"]
}
@lx7575000
lx7575000 / firstUppercase.md
Created April 16, 2016 14:22
返回首字母大写 
String.prototype.firstUpperCase = function(){
    return this.replace(/\b(\w)(\w*)/g, function($0, $1, $2) {
        return $1.toUpperCase() + $2.toLowerCase();
    });
}
@lx7575000
lx7575000 / CSSFullSpace.html
Created April 21, 2016 12:20
CSS实现全景动画展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test CSS Background ...</title>
<style>
.panorama{
width: 500px;
height: 300px;
background-image: url(http://7vilbi.com1.z0.glb.clouddn.com/blog/6608185829213862083.jpg);