lvleihere/code-segment

this is mini-code-segment

code-segment's Issues

关于chrome中的$

chrome中有很多的方便的快捷键，这记录下 $ 的使用

• 纯$
  选中一个DOM节点，然后控制台输入，$0 你就能取到该节点，但前提是当前环境是纯净的~
  例如我选中了一个title节点:

$0 === document.querySelector('title')  // true

对应的 $1 取的是其直接的父级元素

$1 === document.body  // true

如果说 $ 是 document.querySelector 的简写，该方法选择的是某个具体单一的元素，那么对应的 $$ 则是 document.querySelectotAll 外加 Array.from() 的简写

• $_
  使用该方法能够获取到上次控制台打印的信息
  

• $i
  该方法需要安装google插件 Console Importer ，用气使用npm包很方便的下载调试。
  

====end====

简易双向绑定

// one
const data = {
    value: ''
};
const _data = {
    value: ''
};
Object.defineProperty(data, 'value', {
    get() {
          return _data.value;
    },
    set(value) {
          ipt.value = value;
          _data.value = value;
          console.log(data.value);
    }
});
const ipt = document.querySelector('input');
ipt.addEventListener('input', function(e) {
    data.value = e.target.value;
});

 setTimeout(() => {
     data.value = 3;
}, 3000);

// other
let data = {};
const _data = {};
data = new Proxy(data, {
    get(target, prop, receive) {
        return _data[prop];
    },
    set(target, prop, value, receive) {
       ipt.value = value;
        _data[prop] = value;
        console.log(data.value);
    }
});
        
// V -> M
const ipt = document.querySelector('input');
ipt.addEventListener('input', function(e) {
   data.value = e.target.value;
});

// M -> V
setTimeout(() => {
    data.value = 3;
}, 3000);

format某个格式的日期

将时间戳20180106000000 -> 转成 2018-01-06 00:00:00 或者其他

// xxxx-xx-xx xx:xx:xx 的形式
const formatData = (str, formater) => {
    const arr = str.split('');
    let i = 0;
    return formater.replace(/x/g, () => arr[i++]);
};

const str = '20180106000000';
const formater = 'xxxx-xx-xx xx:xx:xx';

const formatRes = formatData(str, formater);
console.log(formatRes);    // 2018-01-06 00:00:00

// YY-MM-DD hh:mm:ss 的形式
const formatData = (str, formater) => {
    const arr = str.split('');
    let i = 0;
    return formater.replace(/[YMDhms]/g, () => arr[i++]);
};

const str = '20180106000000';
// const formater = 'xxxx-xx-xx xx:xx:xx';
const formater = 'YY-MM-DD hh:mm:ss';

const formatRes = formatData(str, formater);
console.log(formatRes);    // 2018-01-06 00:00:00

single AOP

Function.prototype.before = function(beforeFn) {
    const _this = this;
    return function() {
        beforeFn.call(this, arguments);
        _this.call(this, arguments);
    };
};

Function.prototype.after = function(afterFn) {
    const _this  = this;
    return function() {
        _this.call(this, arguments);
        afterFn.call(this, arguments);
    };
}

function originFn() {
    console.log(1);
}

originFn
    .before(function() {
        console.log(2);
    })
    .after(function() {
        console.log(3);
    })();

简易deepClone

简易深克隆, 没考虑Date、Regexp、Error

• 确定你的原始数据对象中的属性值没有 function 或者 undefined, 你可以使用常规的 JSON.parse(JSON.stringify()) 进行深克隆。

/**
 * 简易深度克隆
 * @param {*} originVal - 原始数据
 */
const deepClone = originVal => {
    if (typeof originVal !== 'object') {
        return originVal;
    }
    const hasDeepCloned = originVal.constructor === Object ? {} : [];
    for (const key in originVal) {
        if (originVal.hasOwnProperty(key)) {
            const val = originVal[key];
            hasDeepCloned[key] = typeof val === 'object' ? deepClone(val) : val;
        }
    }
    return hasDeepCloned;
}


const originData = {
    name: 'thunder',
    favor: [{
        one: 'ball'
    }]
};

const newData = deepClone(originData);
newData.name = 'modified data';
newData.favor[0].one = 'modified ball';

console.log(originData); // { name: 'thunder', favor: [ { one: 'ball' } ] }
console.log(newData); // { name: 'modified data', favor: [ { one: 'modified ball' } ] }

随机获取颜色值

const getRandomColor = () => `#${(~~(Math.random() * (1<<24))).toString(16)}`;

构建类之间的继承关系

/**
 * 构建类之间的继承关系
 *
 * @param {Function} subClass 子类函数
 * @param {Function} superClass 父类函数
 */
function inherits(subClass, superClass) {
    var subClassProto = subClass.prototype;
    var F = new Function();
    F.prototype = superClass.prototype;
    subClass.prototype = new F();
    subClass.prototype.constructor = subClass;
    extend(subClass.prototype, subClassProto);
}

/**
 * 对象属性拷贝
 *
 * @param {Object} target 目标对象
 * @param {Object} source 源对象
 * @return {Object} 返回目标对象
 */
function extend(target, source) {
    for (var key in source) {
        if (source.hasOwnProperty(key)) {
            var value = source[key];
            if (typeof value !== 'undefined') {
                target[key] = value;
            }
        }
    }

    return target;
}

终端运行C、C++、OC代码

由于需求，需要简便的运行C类代码，如下终端运行

0.运行C

gcc hello.c -o hello

运行产出:

./hello

1.运行C++

g++ hello.c -o hello

运行产出:

./hello

2.运行OC

clang -fobjc-arc -framework Foundation hello.m -o hello

运行产出:

./hello