记两个函数,拉数据,推数据

yuanoook
yuanoook 发布于 2016-05-17 21:13:52 浏览:1181 类型:原创 - 随笔 分类:JavaScript - 待整理 二维码: 作者原创 版权保护
pullValue(obj, 'key.subkey.subsubkey.subsubsubkey');
pushValue(obj, 'key.subkey.subsubkey.subsubsubkey', value);

为什么要做这个?并不是因为「 I can 」
用字符串来代替 .key 这种做法,提高了代码的可定制能力。
在字符串里面,你甚至可以「自定义表达式」。
自己定义语法规则和相应的解析方法,突破现有语法规则的限制。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PP Demo</title>
    <style>
        html{height:100%;}
        body{margin:0;height:100%;transition:all 1s;color:#fff;display:table;width:100%;}
        div{display:table-cell;text-align:center;vertical-align:middle;}
    </style>
</head>
<body>
<div><span id="log1"></span></div>
<script>
    var count = 0;

    setInterval(function(){
        count++;

        pushValue(
            window,
            'document.body.style.backgroundColor',
            '#' + (Math.floor(Math.random()*255*255*255)).toString(16)
        );

        pushValue(log1,'style.fontSize',count+'px');

        pushValue(
            window,
            'log1.innerHTML',
            pullValue(
                window,
                'count'
            )
        );
    },1000);

    function pullValue(obj,key,default_value){
        var keys_arr = key.split('.');
        var subobj = obj;
        try{
            while(keys_arr.length)
                subobj = subobj[ keys_arr.shift() ];
            return !/Null|Undefined/.test(Object.prototype.toString.call(subobj)) ? subobj : default_value;
        }catch(e){
            return default_value;
        }
    }

    function pushValue(obj,key,value){
        var subkey,
            subobj = obj,
            keys_arr = key.split('.');

        while(keys_arr.length>1)(
            subkey = keys_arr.shift(),
            subobj = subobj[subkey] = (
                !/Number|String|Null|Undefined/.test(Object.prototype.toString.call(subobj[subkey]))
                ? subobj[subkey]
                : {}
            )
        )

        subobj[ keys_arr.shift() ] = value;
    }
</script>
</body>
</html>


------------------------2016.05.18 更新------------------------

pullValue 增加默认值设定,取不到值的时返回默认值
标签:
z
给个赞 0 人点赞
收藏 1 人收藏
评论 已有 6 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
张国旺
张国旺2016-05-18 01:33:172F
推拉的意义为,一个读一个写,对程序来说是一种浪费。不给值参数就是读,加上值参数就是写。如果用 pushValu(元素,方法,值) 的方法。
“拉” 应该是反向的。向父级元素拉。因为父元素每级都是唯一性的,所以可以用层数来定义返回几层。也可以是选择器,只在所有父级中查找匹配的。
pullValue( 次数  | 元素,方法,值);  如:obj.pullValue(3,"className","abc"); 或 obj.pullValue("div#myname", "className","abc");
现在我只是个想法。我看很有实用性。大大加强了JS 对 DOM 操作性。 不过也存在没有想到的问题。
比如说 pushValue 方法,会选择出多个,也就是数组。需要做遍历操作。方法和值,对应,也可以是数组。也可以让所有元素一个方法。
还有很多要考虑的东西。如果扩展完整的话。应该要在选择器中加方法。另外还要定义两个不带选择器的功能。把四个方法定义到DOM对象的原型中。
就可以一行“点”到底。像JQ一样。我看这样有很大用处。这四个方法的命名,要再考虑怎么叫合适了。 //@张国旺:很有意思的东西,我花了十多分钟看这几行代码。总算看明白了。你的逻辑思维很活跃。这东东用循环来表示递归的思想。牛人。玩一玩也有趣。不过这方法实用性不大。性能比直接用要慢。主要看对象有多少层。至于你说的自定义,是可行的。规则谈不少,最多玩玩分隔符。不过这思维在创建多层属性或方法时有点用处。如果改成JQ选择器的思路,用处会大很多。pushValu(元素,方法,值)  如 document.pushValue("div ul li a","style.background","red"); 或 pushValue("div ul li a","style.background","red"); 后一种方法,可以定义一个默认的根对象(比如 document, 或者 window)。元素是一个类似CSS中的元素选择器,方法是元素的方法。
个人看法。提供思路。你认为呢。或许能带动一个流派。
举报 支持 (1) 回复 (2)
张国旺
张国旺2016-05-18 12:40:165F
这个做的很牛,JS 版 个人信息模板组件。像后台一样套数据。 //@yuanoook:http://fly.yuanoook.com/file?hash=541635e31e39cbdfd732b7304691fc57 //@张国旺:推拉的意义为,一个读一个写,对程序来说是一种浪费。不给值参数就是读,加上值参数就是写。如果用 pushValu(元素,方法,值) 的方法。
“拉” 应该是反向的。向父级元素拉。因为父元素每级都是唯一性的,所以可以用层数来定义返回几层。也可以是选择器,只在所有父级中查找匹配的。
pullValue( 次数  | 元素,方法,值);  如:obj.pullValue(3,"className","abc"); 或 obj.pullValue("div#myname", "className","abc");
现在我只是个想法。我看很有实用性。大大加强了JS 对 DOM 操作性。 不过也存在没有想到的问题。
比如说 pushValue 方法,会选择出多个,也就是数组。需要做遍历操作。方法和值,对应,也可以是数组。也可以让所有元素一个方法。
还有很多要考虑的东西。如果扩展完整的话。应该要在选择器中加方法。另外还要定义两个不带选择器的功能。把四个方法定义到DOM对象的原型中。
就可以一行“点”到底。像JQ一样。我看这样有很大用处。这四个方法的命名,要再考虑怎么叫合适了。 //@张国旺:很有意思的东西,我花了十多分钟看这几行代码。总算看明白了。你的逻辑思维很活跃。这东东用循环来表示递归的思想。牛人。玩一玩也有趣。不过这方法实用性不大。性能比直接用要慢。主要看对象有多少层。至于你说的自定义,是可行的。规则谈不少,最多玩玩分隔符。不过这思维在创建多层属性或方法时有点用处。如果改成JQ选择器的思路,用处会大很多。pushValu(元素,方法,值)  如 document.pushValue("div ul li a","style.background","red"); 或 pushValue("div ul li a","style.background","red"); 后一种方法,可以定义一个默认的根对象(比如 document, 或者 window)。元素是一个类似CSS中的元素选择器,方法是元素的方法。
个人看法。提供思路。你认为呢。或许能带动一个流派。
举报 支持 (1) 回复 (1)
张国旺
张国旺2016-05-18 00:59:551F
很有意思的东西,我花了十多分钟看这几行代码。总算看明白了。你的逻辑思维很活跃。这东东用循环来表示递归的思想。牛人。玩一玩也有趣。不过这方法实用性不大。性能比直接用要慢。主要看对象有多少层。至于你说的自定义,是可行的。规则谈不少,最多玩玩分隔符。不过这思维在创建多层属性或方法时有点用处。如果改成JQ选择器的思路,用处会大很多。pushValu(元素,方法,值)  如 document.pushValue("div ul li a","style.background","red"); 或 pushValue("div ul li a","style.background","red"); 后一种方法,可以定义一个默认的根对象(比如 document, 或者 window)。元素是一个类似CSS中的元素选择器,方法是元素的方法。
个人看法。提供思路。你认为呢。或许能带动一个流派。
举报 支持 (1) 回复 (1)
最新评论
yuanoook
yuanoook2016-05-18 13:25:316F
前端渲染嘛,有很多工具可选,angularjs  vuejs ... 一大堆,但是还是自己的用得顺手,虽然功能不全,哈哈 //@张国旺:这个做的很牛,JS 版 个人信息模板组件。像后台一样套数据。 //@yuanoook:http://fly.yuanoook.com/file?hash=541635e31e39cbdfd732b7304691fc57 //@张国旺:推拉的意义为,一个读一个写,对程序来说是一种浪费。不给值参数就是读,加上值参数就是写。如果用 pushValu(元素,方法,值) 的方法。
“拉” 应该是反向的。向父级元素拉。因为父元素每级都是唯一性的,所以可以用层数来定义返回几层。也可以是选择器,只在所有父级中查找匹配的。
pullValue( 次数  | 元素,方法,值);  如:obj.pullValue(3,"className","abc"); 或 obj.pullValue("div#myname", "className","abc");
现在我只是个想法。我看很有实用性。大大加强了JS 对 DOM 操作性。 不过也存在没有想到的问题。
比如说 pushValue 方法,会选择出多个,也就是数组。需要做遍历操作。方法和值,对应,也可以是数组。也可以让所有元素一个方法。
还有很多要考虑的东西。如果扩展完整的话。应该要在选择器中加方法。另外还要定义两个不带选择器的功能。把四个方法定义到DOM对象的原型中。
就可以一行“点”到底。像JQ一样。我看这样有很大用处。这四个方法的命名,要再考虑怎么叫合适了。 //@张国旺:很有意思的东西,我花了十多分钟看这几行代码。总算看明白了。你的逻辑思维很活跃。这东东用循环来表示递归的思想。牛人。玩一玩也有趣。不过这方法实用性不大。性能比直接用要慢。主要看对象有多少层。至于你说的自定义,是可行的。规则谈不少,最多玩玩分隔符。不过这思维在创建多层属性或方法时有点用处。如果改成JQ选择器的思路,用处会大很多。pushValu(元素,方法,值)  如 document.pushValue("div ul li a","style.background","red"); 或 pushValue("div ul li a","style.background","red"); 后一种方法,可以定义一个默认的根对象(比如 document, 或者 window)。元素是一个类似CSS中的元素选择器,方法是元素的方法。
个人看法。提供思路。你认为呢。或许能带动一个流派。
举报 支持 (0) 回复 (0)
张国旺
张国旺2016-05-18 12:40:165F
这个做的很牛,JS 版 个人信息模板组件。像后台一样套数据。 //@yuanoook:http://fly.yuanoook.com/file?hash=541635e31e39cbdfd732b7304691fc57 //@张国旺:推拉的意义为,一个读一个写,对程序来说是一种浪费。不给值参数就是读,加上值参数就是写。如果用 pushValu(元素,方法,值) 的方法。
“拉” 应该是反向的。向父级元素拉。因为父元素每级都是唯一性的,所以可以用层数来定义返回几层。也可以是选择器,只在所有父级中查找匹配的。
pullValue( 次数  | 元素,方法,值);  如:obj.pullValue(3,"className","abc"); 或 obj.pullValue("div#myname", "className","abc");
现在我只是个想法。我看很有实用性。大大加强了JS 对 DOM 操作性。 不过也存在没有想到的问题。
比如说 pushValue 方法,会选择出多个,也就是数组。需要做遍历操作。方法和值,对应,也可以是数组。也可以让所有元素一个方法。
还有很多要考虑的东西。如果扩展完整的话。应该要在选择器中加方法。另外还要定义两个不带选择器的功能。把四个方法定义到DOM对象的原型中。
就可以一行“点”到底。像JQ一样。我看这样有很大用处。这四个方法的命名,要再考虑怎么叫合适了。 //@张国旺:很有意思的东西,我花了十多分钟看这几行代码。总算看明白了。你的逻辑思维很活跃。这东东用循环来表示递归的思想。牛人。玩一玩也有趣。不过这方法实用性不大。性能比直接用要慢。主要看对象有多少层。至于你说的自定义,是可行的。规则谈不少,最多玩玩分隔符。不过这思维在创建多层属性或方法时有点用处。如果改成JQ选择器的思路,用处会大很多。pushValu(元素,方法,值)  如 document.pushValue("div ul li a","style.background","red"); 或 pushValue("div ul li a","style.background","red"); 后一种方法,可以定义一个默认的根对象(比如 document, 或者 window)。元素是一个类似CSS中的元素选择器,方法是元素的方法。
个人看法。提供思路。你认为呢。或许能带动一个流派。
举报 支持 (1) 回复 (1)
yuanoook
yuanoook2016-05-18 11:17:464F
http://fly.yuanoook.com/file?hash=541635e31e39cbdfd732b7304691fc57 //@张国旺:推拉的意义为,一个读一个写,对程序来说是一种浪费。不给值参数就是读,加上值参数就是写。如果用 pushValu(元素,方法,值) 的方法。
“拉” 应该是反向的。向父级元素拉。因为父元素每级都是唯一性的,所以可以用层数来定义返回几层。也可以是选择器,只在所有父级中查找匹配的。
pullValue( 次数  | 元素,方法,值);  如:obj.pullValue(3,"className","abc"); 或 obj.pullValue("div#myname", "className","abc");
现在我只是个想法。我看很有实用性。大大加强了JS 对 DOM 操作性。 不过也存在没有想到的问题。
比如说 pushValue 方法,会选择出多个,也就是数组。需要做遍历操作。方法和值,对应,也可以是数组。也可以让所有元素一个方法。
还有很多要考虑的东西。如果扩展完整的话。应该要在选择器中加方法。另外还要定义两个不带选择器的功能。把四个方法定义到DOM对象的原型中。
就可以一行“点”到底。像JQ一样。我看这样有很大用处。这四个方法的命名,要再考虑怎么叫合适了。 //@张国旺:很有意思的东西,我花了十多分钟看这几行代码。总算看明白了。你的逻辑思维很活跃。这东东用循环来表示递归的思想。牛人。玩一玩也有趣。不过这方法实用性不大。性能比直接用要慢。主要看对象有多少层。至于你说的自定义,是可行的。规则谈不少,最多玩玩分隔符。不过这思维在创建多层属性或方法时有点用处。如果改成JQ选择器的思路,用处会大很多。pushValu(元素,方法,值)  如 document.pushValue("div ul li a","style.background","red"); 或 pushValue("div ul li a","style.background","red"); 后一种方法,可以定义一个默认的根对象(比如 document, 或者 window)。元素是一个类似CSS中的元素选择器,方法是元素的方法。
个人看法。提供思路。你认为呢。或许能带动一个流派。
举报 支持 (0) 回复 (1)
yuanoook
yuanoook2016-05-18 11:16:453F
我主要是看中字符串的可定制能力,自己做了一个超轻的dom模板语法,里面有用字符串来解析数据。
展开代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Render Demo</title>
    <script src="http://map.yuanoook.com/static/jquery.min.js"></script>
    <script src="http://map.yuanoook.com/static/render.js"></script>
</head>
<body>
<div id="user">
    <img data-src="detail.avatar" style="max-width:50px;border-radius:50%;">
    <h1 data-src="name"></h1>
    <h2 data-src="detail.title"></h2>
    <p>
        性别:
        <span if="detail.gender|=:1">男</span>
        <span if="detail.gender|=:0">女</span>
    </p>
    <a data-href="detail.website" data-src="detail.website"></a>
    <p data-src="detail.intro"></p>
</div>
<script style="display:block;white-space:pre;">
$(function(){
    var user = {
        name: 'Rango',
        detail: {
            gender: 1,
            title: 'Web Decorator',
            avatar: 'http://fly.yuanoook.com/file?hash=88203de769e221d2ae71d257b4fce4f0',
            intro: '追求卓越,享受平凡!',
            website: 'http://yuanoook.com'
        }
    }
    $('#user').render(user);
});
</script>
</body>
</html>
//@张国旺:推拉的意义为,一个读一个写,对程序来说是一种浪费。不给值参数就是读,加上值参数就是写。如果用 pushValu(元素,方法,值) 的方法。
“拉” 应该是反向的。向父级元素拉。因为父元素每级都是唯一性的,所以可以用层数来定义返回几层。也可以是选择器,只在所有父级中查找匹配的。
pullValue( 次数  | 元素,方法,值);  如:obj.pullValue(3,"className","abc"); 或 obj.pullValue("div#myname", "className","abc");
现在我只是个想法。我看很有实用性。大大加强了JS 对 DOM 操作性。 不过也存在没有想到的问题。
比如说 pushValue 方法,会选择出多个,也就是数组。需要做遍历操作。方法和值,对应,也可以是数组。也可以让所有元素一个方法。
还有很多要考虑的东西。如果扩展完整的话。应该要在选择器中加方法。另外还要定义两个不带选择器的功能。把四个方法定义到DOM对象的原型中。
就可以一行“点”到底。像JQ一样。我看这样有很大用处。这四个方法的命名,要再考虑怎么叫合适了。 //@张国旺:很有意思的东西,我花了十多分钟看这几行代码。总算看明白了。你的逻辑思维很活跃。这东东用循环来表示递归的思想。牛人。玩一玩也有趣。不过这方法实用性不大。性能比直接用要慢。主要看对象有多少层。至于你说的自定义,是可行的。规则谈不少,最多玩玩分隔符。不过这思维在创建多层属性或方法时有点用处。如果改成JQ选择器的思路,用处会大很多。pushValu(元素,方法,值)  如 document.pushValue("div ul li a","style.background","red"); 或 pushValue("div ul li a","style.background","red"); 后一种方法,可以定义一个默认的根对象(比如 document, 或者 window)。元素是一个类似CSS中的元素选择器,方法是元素的方法。
个人看法。提供思路。你认为呢。或许能带动一个流派。
举报 支持 (0) 回复 (0)
张国旺
张国旺2016-05-18 01:33:172F
推拉的意义为,一个读一个写,对程序来说是一种浪费。不给值参数就是读,加上值参数就是写。如果用 pushValu(元素,方法,值) 的方法。
“拉” 应该是反向的。向父级元素拉。因为父元素每级都是唯一性的,所以可以用层数来定义返回几层。也可以是选择器,只在所有父级中查找匹配的。
pullValue( 次数  | 元素,方法,值);  如:obj.pullValue(3,"className","abc"); 或 obj.pullValue("div#myname", "className","abc");
现在我只是个想法。我看很有实用性。大大加强了JS 对 DOM 操作性。 不过也存在没有想到的问题。
比如说 pushValue 方法,会选择出多个,也就是数组。需要做遍历操作。方法和值,对应,也可以是数组。也可以让所有元素一个方法。
还有很多要考虑的东西。如果扩展完整的话。应该要在选择器中加方法。另外还要定义两个不带选择器的功能。把四个方法定义到DOM对象的原型中。
就可以一行“点”到底。像JQ一样。我看这样有很大用处。这四个方法的命名,要再考虑怎么叫合适了。 //@张国旺:很有意思的东西,我花了十多分钟看这几行代码。总算看明白了。你的逻辑思维很活跃。这东东用循环来表示递归的思想。牛人。玩一玩也有趣。不过这方法实用性不大。性能比直接用要慢。主要看对象有多少层。至于你说的自定义,是可行的。规则谈不少,最多玩玩分隔符。不过这思维在创建多层属性或方法时有点用处。如果改成JQ选择器的思路,用处会大很多。pushValu(元素,方法,值)  如 document.pushValue("div ul li a","style.background","red"); 或 pushValue("div ul li a","style.background","red"); 后一种方法,可以定义一个默认的根对象(比如 document, 或者 window)。元素是一个类似CSS中的元素选择器,方法是元素的方法。
个人看法。提供思路。你认为呢。或许能带动一个流派。
举报 支持 (1) 回复 (2)
张国旺
张国旺2016-05-18 00:59:551F
很有意思的东西,我花了十多分钟看这几行代码。总算看明白了。你的逻辑思维很活跃。这东东用循环来表示递归的思想。牛人。玩一玩也有趣。不过这方法实用性不大。性能比直接用要慢。主要看对象有多少层。至于你说的自定义,是可行的。规则谈不少,最多玩玩分隔符。不过这思维在创建多层属性或方法时有点用处。如果改成JQ选择器的思路,用处会大很多。pushValu(元素,方法,值)  如 document.pushValue("div ul li a","style.background","red"); 或 pushValue("div ul li a","style.background","red"); 后一种方法,可以定义一个默认的根对象(比如 document, 或者 window)。元素是一个类似CSS中的元素选择器,方法是元素的方法。
个人看法。提供思路。你认为呢。或许能带动一个流派。
举报 支持 (1) 回复 (1)
yuanoook yuanoook 作者

享受平凡 | 追求卓越

作者最新