AJax技术

Javascript依赖注入学习笔记(3)

字号+ 作者:H5之家 来源:H5之家 2016-03-23 11:00 我要评论( )

var injector = { dependencies: {}, register: function(key, value) { this.dependencies[key] = value; }, resolve: function(deps, func, scope) { var args = []; scope = scope || {}; for(var i=0; ideps.le

var injector = { 
    dependencies: {},
    register: function(key, value) {
        this.dependencies[key] = value;
    },
    resolve: function(deps, func, scope) {
        var args = [];
        scope = scope || {};
        for(var i=0; i<deps.length, d=deps[i]; i++) {
            if(this.dependencies[d]) {
                scope[d] = this.dependencies[d];
            } else {
                throw new Error('Can\'t resolve ' + d);
            }
        }
        return function() {
            func.apply(scope || {}, Array.prototype.slice.call(arguments, 0));
        }       
    }
}

我们所做的一切其实就是将依赖添加到作用域。这样做的好处是,开发人员不用再写依赖性参数;它们已经是函数作用域的一部分。

var doSomething = injector.resolve(['service', 'router'], function(other) { 
    console.log(this.service().name); //Service
    console.log(this.router().name);  //Router
    console.log(other().name);        //Other
});
doSomething(other); 

没有了

dom在没有jquery之前我们都会用到了,今天我再来看看原生js操作dom的例子吧,希望这篇文章能够帮助到各位朋友,有兴趣的可以进来看看吧。

今天学习了如何用原生js写dom元素(节点),下面是结合所学文档W3C整理的笔记:

1.添加节点
创建节点:使用createElement创建元素,使用createTextNode创建文本节点
首先是一段html代码,下面的例子都引用这个。

<div id="div1">
this is first paragraph
this is second paragraph
</div>

Js部分:

//创建一个新的元素
var para=document.createElement("p");
//创建一个文本节点
var node=document.createTextNode("hello,reader");
//向元素追加这个文本节点
para.appendChild(node);
//找到一个已有元素
var element=document.getElementById("div1");
//向已有的元素追加这个新元素
element.appendChild(para);

效果图:

pic01

2.插入节点
appendChild,insertBefore,insertBefore接受两个参数,第一个是插入的节点,第二个是参照的节点
such as:insertBefore(a,b),a会插在b的前面

3.替换元素replaceChild()和删除节点removeChild()

//替换元素
var replaceChild=documnet.body.replaceChild(createNode,div1);
//删除节点
var parent=document.getElementById("div1");
var child=document.getElementById("p2");
child.parentNode.removeChild(child);

效果图:

pic02

4.节点的属性
firstChild:第一个子节点
lastChild:最后一个子节点
childNodes:子节点集合,获取其中子节点可以someNode.childNodes[index]或者someNode.childNodes.item(index)
nextSibling:下一个兄弟节点
previousSibling:上一个兄弟节点
parentNode:父节点

5.注意:childNodes.length存在跨浏览器问题。
Such as:

aaa
bbb
ccc
ddd
在ie中,ul.childNodes.length不会计算li之间的换行空格,从而得到数值为4
在firefox、chrome,safari中,会有包含li之间的空白符的5个文本节点,因此ul.childNodes.length为9
若要解决跨浏览器问题,可以将li之间的换行去掉,改成一行书写格式。

没有了

setTimeout和clearTimeout是一对了一个是设置时间另一个是清除定时了我们下面就一起来看一个关于setTimeout和clearTimeout的使用例子了。

在前端网页开发时,焦点图的存在随处可见。通常都是去下载已经封装好的jquery来实现需要的功能,有多少人能实际了解实际原理吗?通过自己对原生js的学习,今天对setTimeout()·和clearTimeout()的用法做个小小的总结:

1.setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。

语法:setTimeout(code,millisec)其中code是要调用的函数后要执行的method或function,millisec指的是需等待的毫秒数
首先是自己写的一个事例,当鼠标点击开始计时,文本框就开始计数,点击停止按钮则结束计时。

<form name="fm2">
<input type="text" name="one" value="" size=10 />
<input type="button" value="开始计时" onclick="myName()"/>
</form>

js部分:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Ajax+smarty技术实现无刷新分页

    Ajax+smarty技术实现无刷新分页

    2016-03-15 15:00

  • JavaScript学习总结之JS、AJAX应用

    JavaScript学习总结之JS、AJAX应用

    2016-02-06 15:02

  • 学习JavaScript设计模式之代理模式

    学习JavaScript设计模式之代理模式

    2016-01-25 17:02

  • javascript、jquery、AJAX总结

    javascript、jquery、AJAX总结

    2016-01-25 17:00

网友点评
)