志达IT网站html代码怎么转化为js代码
将html代码封装成js干嘛呢？直接写在html页面不好吗？首要我来为大家回答这个疑问，或许有一天会有小伙伴和我遇到同样的问题。
如何将html代码封装（转化）成JS实现调用？
我办理的网站是用织梦搭建的后台，但是我需求在全站（包括一切文章页和列表页、栏目页）增加一张banner图（此处常识举个栗子），假如我直接写在模板里边，必然要更新一切栏目及其子页面模板，想一想一个网站有多少栏目，多少模板？是不是我每次更新banner图都需求去每一个模板修改呢？这样的话会大大下降我们的效率，所以将此处banner图的html代码封装成JS就很有必要了，今后修改banner图，仅需修改封装了banner图html代码的JS文件即可！
是吧，看到这里是不是现已理解了为什么要将将html代码封装成js了，下面飒飒来详细讲解一下将html代码封装（转化）成JS的详细过程：
过程一：翻开Dreamweaver或者相似软件，事先写好需求封装的HTML代码。
过程二：翻开站长东西里边的HTML/JS转化页面，将需求封装的HTML代码转化成JS代码，如下图：
如何将html代码封装（转化）成JS实现调用？过程三：在Dreamweaver中新建一个JS文件，将转化后的JS代码复制粘贴进去，保存为banner.js文件。
过程四：在网站服务器中上载banner.js文件，记住上传的路径。
过程五：进入网站后台，在需求增加banner图的模板中适当位置加入JS封装代码。代码如下：
完结以上过程，改写后台栏目，即可实现banner图的调用，是不是完美处理了banner图的调用问题呢？今后修改banner图的时候，只需求修改banner.js文件即可。
js代码怎么运行
咱们知道了js是弱类型言语，在运行时才确认变量类型。js引擎在履行js代码时，也会从上到下进行词法剖析、语法剖析、语义剖析等处理，并在代码解析完成后生成AST（抽象语法树），终究依据AST生成CPU能够履行的机器码并履行。
除此之外，JS引擎在履行代码时还会进行其它处理，如V8中还有两个阶段：
编译阶段：该阶段会进行履行上下文的创立，包括创立变量目标(VO)(此时会被初始化为undefined)、树立效果域链、确认this指向等。每进入一个不同的运行环境。V8都会创立一个新的履行上下文。
履行阶段：将编译阶段中创立的履行上下文压入调用栈，并成为正在运行的履行上下文。代码履行结束后，将其弹出调用栈。（这儿有一个VO-AO的进程：JavaScript对变量赋值时变量被用到，此时变量目标会转为活动目标，转化后的活动目标才可被拜访）
这就引出了两个概念：“履行上下文”和“效果域链”。
JavaScript履行上下文
由上面咱们能够知道：当js代码履行一段可履行代码时，会创立对应的履行上下文。
首要，js中可履行代码对应着有一个概念：“履行环境”——大局环境、函数环境和eval。
其次，关于每个履行上下文，都有三个重要特点：
变量目标（即“VO”）
效果域链
this
咱们来看两段代码：
varscope=”globalscope”;functioncheckscope(){varscope=”localscope”;functionf(){returnscope;}returnf();}checkscope();
varscope=”globalscope”;functioncheckscope(){varscope=”localscope”;functionf(){returnscope;}returnf;}checkscope()();
它们会打印什么？
为什么？答案是它们的履行上下文栈不一样！
什么是“履行上下文栈”？
当履行一个可履行代码时，就会提早做准备工作，这儿的“准备工作”，专业的说法便是“履行上下文”。但随着可履行代码如函数的增多，怎样管理那么多的履行上下文呢？所以JS引擎创立了履行上下文栈的概念。
咱们完全能够用数组去模仿其行为（栈底永久有一个大局履行上下文globalContext）
咱们界说一个EStack，首要
EStack=[globalContext];
然后来模仿第一段代码：
EStack.push(<checkscope>functionContext);EStack.push(<f>functionContext);EStack.pop();EStack.pop();
而第二段代码是这样的：
EStack.push(<checkscope>functionContext);EStack.pop();EStack.push(<f>functionContext);EStack.pop();
究其原因，你可能需要先研究一下“闭包”的概念了！
这儿顺便说下“在前端模块化”中怎样实现“长期保存数据”？
缓存？不。闭包！
JavaScript效果域和效果域链
首要，效果域是指程序中界说变量的区域。效果域规则了怎样查找变量，也便是确认了当时履行代码对变量的拜访权限。
效果域有两种：静态效果域和动态效果域。
JS选用的静态效果域，也叫“词法效果域”。函数的效果域在函数界说的时分就确认了。
由上，词法效果域中的变量，在编译进程中会发生一个确认的效果规模。这个效果规模即“当时的履行上下文”。在ES5后咱们用“词法环境”代替效果域来描绘该履行上下文。词法环境由两个成员组成：
本身词法环境记载：用于记载本身词法环境中的变量目标
外部词法环境引证：用于记载外层词法环境中存在的引证
咱们仍然来看一个比如：
varvalue=1;functionfoo(){console.log(value);}functionbar(){varvalue=2;foo();}bar();
回看上面的界说，该打印什么？
让咱们剖析下履行进程：
履行foo()函数，先从foo函数内部查找是否有局部变量value。假如没有，就依据界说时的方位，查找上面一层的代码，也便是value=1.所以成果会打印1。
这儿面当然不是如此简略能归纳的，你能够从履行上下文的视点剖析一下。
树立效果域链
上面咱们说了词法环境（效果域）的两个组成。再结合履行上下文，咱们不难发现：经过外部词法环境的引证，效果域能够顺着栈层层拓宽，树立起从当时环境向外延伸的一条链式结构。
再来看一个比如：
functionfoo(){console.dir(bar);vara=1;functionbar(){a=2;}}console.dir(foo);foo();
由静态效果域，大局函数foo创立了一个本身目标的[[scope]]特点
foo[[scope]]=[globalContext];
而当咱们履行foo()时，也会先后进入foo函数的界说期和履行期。在foo函数的界说期时，函数bar的[[scope]]将会包括大局内置scope和foo的内置scope
bar[[scope]]=[fooContext,globalContext];
这证明了这一点：“JS会经过外部词法环境引证来创立变量目标的一个效果域链，然后确保对履行环境有权拜访的变量和函数的有序拜访。”
让咱们再回头看看履行上下文中的那道题，在前面咱们说了它们有什么不同，这儿说下为什么它们相同地打印了“localscope”：还是那句话“JS选用的是词法效果域，函数的效果域取决于函数创立的方位”——JS函数的履行用到了效果域链，这个效果域链是在函数界说的时分创立的。嵌套的函数f()界说在这个效果域链里，其中的变量scope一定是指局部变量，不论何时何地履行f()，这种绑定在履行f()时仍然有效。
基于效果域链的变量查询
当某个变量无法在本身词法环境记载中找到时，能够依据外部词法环境引证向外层进行寻找，直到最外层的词法环境中外部词法环境引证为null。
与此相似的是“目标中基于原型链的查找”：
原型：每一个JS目标（null在外）在创立时就会与另一个目标相关，这个目标便是咱们说的原型。每一个目标都会从原型中“承继”特点。
当读取实例的特点时，假如找不到，就会查找与目标相关的原型中的特点，假如还找不到，就去找原型的原型，一直到最顶层（__proto__为null）停止
它们的差异也显而易见：原型链是经过prototype特点树立目标承继的链接；而效果域链是指内部函数能拜访到外部函数的闭包。不论直接还是间接，所有函数的效果域链终究都链接到大局上下文。
