javascript的预编译和执行顺序,四种动态加载
分类:web前端

那二种方法中,应该说唯有首先种是行业内部,因为别的三种总有个别不妥,比如不能运转alert,当然别的两种也可能有独特之处的。

直白用JQuery,今日意想不到想不要JQuery完结部分功用,在那几个进度中,开采本人对原生的JS特别不熟练,找了点资料,在这里做个记录吧!

document.createElement(State of Qatar是在对象中开创三个指标,要与appendChild(State of Qatar 或 insertBefore(卡塔尔(قطر‎方法联合使用。此中,appendChild(State of Qatar方法在节点的子节点列表末增加新的子节点。insertBefore(卡塔尔方法在节点的子节点列表猖獗地点插入新的节点。

javascript的预编写翻译和奉行顺序

 方今在复习javascript的事件处理时意识了二个难点,然后也是自身来写javascript的预编写翻译和实行各样的主题材料

 

  代码:

 

复制代码

代码一

<html>

  <head>

    <title>事件处理</title>

    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>

    <script type='text/javascript'>

        //页面在在达成加载后

        window.onload=function(){

            var input=document.getElementById('button');

            var p=document.getElementById('p');

            var i=1;

            while(input){

                input.onclick=function(){

                    p.innerHTML+='<br />('+ i +') '+this.nodeName;

                }

                i++;

                input=input.parentNode;

            }

        }

    </script>

  </head>

  <body>

    <div>

    <input type='button' value='Event事件' id='button' />

    <p id='p'>事件捕获的各样:</p>

    </div>

  </body>

</html>

复制代码

 展现的结果为:

 

                      

 

当自家改换了代码中革命的风流倜傥对后收获的结果又不均等:

 

复制代码

代码二

<html>

  <head>

    <title>事件管理</title>

    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>

    <script type='text/javascript'>

        //页面在在达成加载后

        window.onload=function(){

            var input=document.getElementById('button');

            var p=document.getElementById('p');

            var i=1;

            while(input){

                input.onclick=function(){

                    p.innerHTML+='<br />('+ i++ +') '+this.nodeName;

                }

                input=input.parentNode;

            }

        }

    </script>

  </head>

  <body>

    <div>

    <input type='button' value='Event事件' id='button' />

    <p id='p'>事件捕获的次第:</p>

    </div>

  </body>

</html>

复制代码

获得的结果为:

 

             

 

  得出那二种不一致的结果那是因为javascript代码在运转时有预编写翻译和实践八个阶段,在预编写翻译阶段会对函数和变量举行管理,对富有的扬言变量会赋值为underfined,对负有的评释函数也会赋值为函数的定义。

 

  下边我们来测量检验javascript的推行进程

 

  1.javascript代码实践顺序时依据脚本标签<script>现身的次第来分明的,浏览下边页面你会发今世码是按从上到下的相继实践的

 

复制代码

<script type='text/javascript'>

    alert('one');

  </script>

  <script type='text/javascript'>

  alert('two');

  </script>

  <script type='text/javascript'>

  alert('three');

  </script>

复制代码

   2. 因为变量在预编写翻译时被给与一个undefined初值,所以上边代码中,第二个变量name在代码中绝非被赋值,全体就延用undefined那么些值,下边包车型客车name被予以了Jude,所以第二遍输出的是Jude那么些字符。

 

<script type='text/javascript'>

    alert(name);                    //显示undefined

    var name='Jude';

    alert(name);                    //显示Jude

</script>

  3.从如下结果中大家知晓先是两次三番三遍输出Hello Wrold!,最终三番两次五遍输出test,得出那样的结果是因为javascript而不是是一点一滴依照顺序实行的,而是在实行此前先实行三个预编译,预编写翻译时表明式函数被提收取来,优先实践,并且相仿的函数会举办覆盖,再试行赋值式函数。

 

复制代码

<script type='text/javascript'>

    test();                    //输出Hello World!

    function test(){       

        alert('hello'卡塔尔;     //表明式函数

    }

    test();                    //输出Hello World!

 

    var test=function(卡塔尔国{    //赋值式函数

        alert('test');

    }

    test();                    //输出test

    function test(卡塔尔国{      //证明式函数

        alert('Hello World!');

    }

    test();                    //输出test

</script>

复制代码

  4.底下代码突显显示hello,再展现hello world!,那是因为javascript中的给个代码块是互为独立的,当脚本遭遇第二个<script>标签时,则javascript深入剖判器会等这一个代码块加载成功后,先对它进行预编写翻译,然后再推行之,然后javascript剖析器打算深入解析下一个代码块,由于javascript是按块实施的,全部四个javascript调用下八个块的函数也许变量时,会产出谬误

 

复制代码

<script type='text/javascript'>

    function test(){

        alert('hello');                //显示hello

    }

    test()

</script>

<script type='text/javascript'>

    function test(){

        alert('hello world!');        //显示hello world!

    }

    test()

</script>

复制代码

  5.纵然javascript是按块推行的,但差别的块却归属同后生可畏的全局成效域,差别的块的变量和函数式能够互相采用的,也等于有个别块能够利用前边块的变量和函数,却不得以运用它之后的块的变量和函数

 

复制代码

<script type='text/javascript'>

    alert(name);                    //显示undefined

    var name='Jude';

    function test(){

        alert('hello');

    }

    fun(卡塔尔(قطر‎;                            //不可能调用下三个块的函数

</script>

<script type='text/javascript'>

    alert(name);                    //能够调用上三个块的变量,突显Jude

    test(卡塔尔国;                            //能够调用上二个块的函数,展现hello

    function fun(){

        alert('fun');

    }

</script>

复制代码

  6.javascript在预编写翻译阶段是以函数来划分功效域的,然后再经过var 证明的变量来与注脚函数开荒内存空间,对var变量赋初值undefined。在施行阶段再依据效用域来嘴变量举行赋值.

 

  第二个代码块中等学园函授数里面包车型地铁变量a是部分变量,因为a在函数内再一次用var定义,所以输出undefined,而变量b是全局变量,因为在函数内没有用var重新证明b,所以在给变量b赋值时到全局变量中找全局变量b的值,所以输出的是b.

 

  第二个代码块中的函数内都重复申明了变量a和b,所以他们都以函数内的片段变量,所以都输出undefined。

 

复制代码

<script type='text/javascript'>

    var a='a';

    var b='b';

    function test(){

        alert(a);                //显示undefined

        alert(b);                //显示b

        var a='test';

    }

    test();

</script>

<script type='text/javascript'>

    var a='a';                    

    var b='b';                    

    function test(){

        alert(a);                //显示undefined

        alert(b);                //显示undefined

        var a='test';

        var b='test';

    }

    test();

</script>

复制代码

  简单的说,javascript在推行时的步骤是:

 

    1、先读入第后生可畏段代码块

 

    2、对代码块实行语法深入分析,要是现身语法错误,直接推行第5手续

 

    3、对var变量和function定义的函数进行“预编译管理”(赋值式函数是不会实行预编写翻译处理的)

 

    4、实行代码块,有错则报错

 

    5、要是还恐怕有下后生可畏段代码块,则读入下生龙活虎段代码块,重复步骤2

 

    6、结束

近年来在复习javascript的事件管理时发掘了贰个主题素材,然后也是自己来写javascript的预编写翻译和试行顺序的难题代码:...

法一、创建 script

JS-DOM Element方法和属性 

S-DOM Element方法和属性
一,获取html元素
1.getElementByID(id)
通过对成分的ID访谈,这是DOM三个基本功的访谈页面成分的方法.
example:
<div
id="divid">测试</div>
<script language="javascript">
var
div=document.getElementByID("divid");
alert (div.nodeName);
//彰显成分名
</script>
要是id在要素中不是独占鳌头的,那么得到的将是首先个ID.
2.getElementsByName(name)
仅用于input
radio checkbox等因素,重回名称叫name的因素数组
example:
<div
name="george"></div>
<input
name="george"></div>
<script language=javascript>
var
ge=document.getElementsByName("george");
alert
(georges.length);  //获取georges个数,对div唔效果
</script>
3.getElementsByTagName(tagname)
回去具有tagname的因素列表数组.处理大的DOM布局会用到它
二,DOM
Element常用方法
1.appendChild(node)  
//扩充内容
向当前目的追加节点,example:  
<div
id="test">123</div>
<script type="text/javascript">
var
newdiv=document.createElement("div");
var newtext=document.createTextNode("A
new div");
newdiv.appendChild(newtext)
;
document.getElementById("test").appendChild(newdiv)
;
</script>
自然,上边包车型客车法力用document.getElementById("test"卡塔尔.innerHTML="测验一下"就可完成,遗憾的是,innerHTML不属于DOM.
2,removeChild(childreference)
移除当前节点的子节点,并回到节点
<div
id="father"><div id="child">A
child</div></div>
<script type="text/javascript">
var
childnode=document.getElementById("child");
var
removednode=document.getElementById("father").removeChild(childnode)
</script>
3.cloneNode(deepBoolean)
复制并回到当前的复制节点,由于复制了原节点的id属性,所以在document树中要改ID属性,以确保ID唯一性.
4,insertBefore(newElment,targetElementState of Qatar  插入新的节点
在近年来节点插入多少个新节点,假若targetElement为null,那新节点为尾声节点.
example:
<body>
<span
id="lovespan">熊掌作者所欲也!</span>
</body>
<script
type="text/javascript">
var
lovespan=document.getElementById("lovespan");  //获取id
var
newspan=document.createElement("span"); 
var
newspanref=document.body.insertBefore(newspan,
lovespan);
newspanref.innerHTML="鱼与";
</script>
三,DOM Element常用属性
1、childeNodes  再次来到全体子节点指标,
例如
<ul
id="mylist">
<li>美国</li>
<li>意大利</li>
<li>加拿大</li>
</ul>
<script>
var
msg="" ;
var mylist=document.getElementById("mylist")
for (i=0;
i<mylist.childNodes.length; i++){
   var
li=mylist.childNodes[i];
      msg+=li.innerText;
}
alert
(msg);
</script>
2,innerHTML
那是三个正规,但它并不书DOM
例如:
<div
id="bbb"><span id="aaa">我拉</span></div>
<input
type=button  value="点击看看">
<script
language="javascript">
function
change()
{
document.getElementById("aaa").innerHTML=
"改过修正";
}
</script>
3,style
那是多个非常主要的属性,能够博得并改正每一个独立的样式.
例如:document.getElementByTagName("body")[0].style.backgroundColor="#cccccc"
4、firstChild    重临第一个子节点
lastChild    
回去最终三个子节点
parentNode   再次来到父节点的目的。
nextSibling  
回去下四个小伙子节点的对象
previousSibling 重临前三个弟兄节点的对象
nodeName
回到节点的HTML标识名称,使用Hungary语的大写字母,如P, FONT
5,click()
实施成分的一遍点击,能够用于通过脚本来触发onClick函数

上面,比如表明document.createElement(卡塔尔国的用法。<div id="board"></div>
例1:

var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", "foo.js");
document.getElementById("s1").appendChild(script);

JS设置DIV的属性

setAttribute方法:

var a=document.createElement("div"卡塔尔国;        //新建二个DIV
a.id="div1";     
//给新加的DIV命名
a.style.setAttribute("zIndex",2);    
//设置DIV叠放次序
a.style.setAttribute("textAlign",Dalign);  
//对齐方式
a.style.setAttribute("border","#e6e7e8 1px solid");
//边框颜色
a.style.width=divwidth;      //DIV宽度
a.style.height=Dheight;     
//DIV高度
a.setAttribute("position","absolute");
a.style.backgroundColor=Dbgcolor;     
//DIV背景
a.setAttribute("z-index","2"State of Qatar;      //DIV叠放次序
a.style.top =
divtop+"px";      //DIV上边距
a.style.left = divleft+"px";     
//DIV左边距   
a.setAttribute("innerHTML",info10[0].firstChild.data+"<br>"+info11[0].firstChild.data);
document.body.appendChild(a);       //新建DIV结束

隐藏div:document.getElementById(“啊”).style.display="none"  //block 出现

document.getElementById(“啊”).style.disabled="true" 

document.getElementById(“啊”).style.readOnly="true" 

复制代码 代码如下:

法二、直接用 js 的 write

<script type="text/javascript">
var board = document.getElementById("board");
var e = document.createElement("input");
e.type = "button";
e.value = "那是测量试验加载的小例子";
var object = board.appendChild(e);
</script>

<div id="s1">
<script type="text/javascript">
<!--
document.write("<"+"script type='text/javascript'>var a = 123;document.write(a);<"+"/script>");
// 或先用 escape 编码
// document.write(unescape("%3Cscript%20type%3D%27text/javascript%27%3Evar%20a%20%3D%20123%3Bdocument.write%28a%29%3B%3C/script%3E"));
// 或直接引用文件
//document.write("<"+"script type='text/javascript' src='foo.js'><"+"/script>");
//-->
</script>
</div>

效果与利益:在标签board中加载多个按键,属性值为“那是测量检验加载的小例子”。

法三、直接用 innerHTML

例2:

document.getElementById("s1").innerHTML = "<"+"script type='text/javascript'>var a = 123; document.write(a);<"+"/script>"

复制代码 代码如下:

其一事物最大的主题素材,正是何等让 innerHTML 的脚本段跑起来。

<script type="text/javascript">
var board = document.getElementById("board");
var e2 = document.createElement("select");
e2.options[0] = new Option("加载项1", "");
e2.options[1] = new Option("加载项2", "");
e2.size = "2";
var object = board.appendChild(e2);
</script>

法四、用 innerHTML 转移

功能:在标签board中加载三个下拉列表框,属性值为“加载项1”和“加载项2”。

<div id="s1"></div>
<div id="s2">
<script type="text/javascript">
document.write("cftea");
alert("cftea");
</script>
</div>
<script type="text/javascript">
<!--
document.getElementById("s1").innerHTML = document.getElementById("s2").innerHTML;
//-->
</script>

例3:

和法三差异,这种意况下 innerHTML 的脚本会推行,忧虑的是,因为 s1、s2中有同意气风发的本子,所以一定于执行了四回那个代码,这种办法在停放广告中用得非常多,让 s2 及 js 代码在最终,然后采取 innerHTML 将广告代码显示在 s1 那一个期望的职位上。

复制代码 代码如下:

<script type="text/javascript">
var board = document.getElementById("board");
var e3 = document.createElement("input");
e4.setAttribute("type", "text");
e4.setAttribute("name", "q");
e4.setAttribute("value", "使用setAttribute");
e4.setAttribute("onclick", "javascript:alert('This is a test!');");
var object = board.appendChild(e3);
</script>

功能:在标签board中加载一个文本框,属性值为“使用setAttribute”。 当点击那些文本框时,会弹出对话框“This is a test!”。

基于地点例子,能够看见,能够通过加载对象的性质来安装,参数是黄金年代致的。使用e.type="text" 和 e.setAttribute("type","text"卡塔尔(قطر‎效果是平等的。

上面,我们用实例来陈诉一下appendChild() 方法和insertBefore(卡塔尔方法的例外。
比如大家要在上面这一个div中插入叁个子节点P时:<div id="test"><p id="x1">Node</p><p>Node</p></div>
大家能够如此写:

复制代码 代码如下:

<script type="text/javascript">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
//测量试验今后处开头
//appendChild方法:
oTest.appendChild(newNode);
//insertBefore方法:
oTest.insertBefore(newNode,null);
</script>

因而上述的代码,能够测验到一个新的节点被创立到了节点div下,且该节点是div最终叁个节点。很扎眼,通过那几个例子,可以看到appendChildhild和insertBefore都得以进行插入节点的操作。

在上头的例证中有像这种类型一句代码:oTest.insertBefore(newNode,null卡塔尔,这里insertBefore有2个参数能够设置,第叁个是和appendChild相似的,第二却是它特有的。它不光可认为null,还足以为:

复制代码 代码如下:

<script type="text/javascript">
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,refChild);
</script>

成效:这一个事例就要x1节点前边插入一个新的节点

又或:

复制代码 代码如下:

<script type="text/javascript">
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,refChild.nextSibling);
</script>

功效:那些例子将要x1节点的下叁个节点前边插入二个新的节点

还可为:

复制代码 代码如下:

<script type="text/javascript">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,oTest.childNodes[0]);
</script>

本条例子就要首先子节点前边插入三个新的节点,也得以经过改动childNodes[0,1,...]来在其他地方插入新的节点
由于可以看到insertBefore(卡塔尔方法的风味是在已某些子节点前面插入新的节点,但例一中使用insertBefore(State of Qatar方法也足以在子节点列表末插入新节点的。二种意况结合起来,发现insertBefore(卡塔尔国方法插入节点,是能够在子节点列表的随飞机地点置。

从那多少个例证中得出:
appendChild(卡塔尔(قطر‎ 方法在节点的子节点列表末增多新的子节点。
insertBefore(卡塔尔(قطر‎ 方法在节点的子节点列表大二人置插入新的节点。

)或 insertBefore(卡塔尔国方法联合使用。当中,appendChild(卡塔尔(قطر‎方法在节点的子节点列表末增加...

本文由10bet手机官网发布于web前端,转载请注明出处:javascript的预编译和执行顺序,四种动态加载

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文