JavaScript 中的执行环境与作用域
一、执行环境
JavaScript 中每个代码都有自己的执行环境，所以如果以范围来划分的话，可以划分为全局执行环境和局部执行环境。其中全局执行环境属于最外部的执行环境、局部执行环境属于全局执行环境的子环境属于内部的执行环境。其中全局执行环境是由 ECMAScript 是实现的宿主环境所决定的，在浏览器的宿主环境中全局环境对象为 window 、但是在 node 宿主环境中全局环境对象为 global。
每一个执行环境中都会有一个变量对象来保存当前作用域中定义的变量与函数。但是该变量对象对开发者不透明。
所有的变量、函数都是作为 window 的属性与方法创建的。
var fruit = 'apple';
console.log(fruit);// apple
console.log(window.fruit);// apple
console.log('fruit' in window);// true
执行环境销毁的时机为当前环境中的代码执行完毕，同时保存在变量对象中的变量与函数也随之销毁(除依然有引用关系的除外)。
每个函数也有自己的执行环境不过相对于 window 对象所在的全局环境而言函数内部的执行环境就属于局部执行环境，但即使是局部执行环境也是有着自己的变量对象来存储当前局部执行环境中定义的变量与函数。
二、作用域
当代码执行的时候当前的执行环境会创建变量对象的作用域，这样由不同层级的作用域紧密结合在一起就形成了 - 作用域链。其中每层作用域的变量对象是其核心，作用域链的作用就是保证当前执行环境有权访问的所有变量、函数的有序访问。
作用域链的前端始终指向当前执行环境的变量对象，作用域链的下一个变量对象来自包含它的执行环境中，这样由不同层级的执行环境中的变量对象的作用域就组成了作用域链。
标识符的解析就是一级一级搜索的过程。并且始终是从作用域链的最前端开始逐级的进行回溯直到找到该标识符，如果上一级的作用域中没有该标识符则继续向上一级寻找直至到全局作用域，这个过程叫做回溯。如果找到了就可以使用如果未找到会抛出异常。
-1).在局部执行环境中未定义该变量依然可以通过作用域链找到改变量 :
var fruit = 'apple';
function eat() {
console.log(`eat fruit: ${fruit}`);// eat fruit: apple
}
eat();
上述示例可以看出在 eat 函数中并未定义一个叫做 "fruit" 的变量，但是却可以使用该变量。这是为什么? 有的同仁会说那不是全局变量吗? 自然可以访问的到。这种回答是不负责任的回答，正确的回答应该是虽然说当前的执行环境中并未定义一个叫做 "fruit" 的变量，但是当前的执行环境会沿着作用域链查找父级作用域中是否定义了一个叫做 "fruit" 的变量。针对本案例而言这就找到了全局作用域并发现确实定义了一个变量叫做 "fruit" 所以找到了就可以在局部执行环境中使用了。这才是真正负责任的答案。【以下是图解】:
-2). 在局部执行环境中定义的变量可以在局部执行环境中雨全局执行环境中定义的变量互换 :
void(() => {
var fruit = 'apple';
changeFruits();
function changeFruits() {
var anotherFruit = 'banana';
swapFruits();
function swapFruits() {
var tempFruit = anotherFruit;
anotherFruit = fruit;
fruit = tempFruit;
console.log(`swap area: fruit: ${fruit}; anotherFruit: ${anotherFruit}; tempFruit: ${tempFruit}`);// swap area: fruit: banana;
//anotherFruit: apple; tempFruit: banana
}
console.log(`change area: fruit: ${fruit}; anotherFruit: ${anotherFruit}`);// change area: fruit: banana; anotherFruit: apple
}
console.log(`window area: fruit: ${fruit}`);// window area: fruit: banana
})();
大家可能发现了在 swapFruits 这个函数的执行环境中我们可以通过作用域链来访问到 changeFruits 执行环境中的 anotherFruit 变量 和 window 执行环境中的 fruit 变量。所以才可以完成互换值的工作，但是在 swapFruits 执行环境中是绝对不可以完成这个工作的，因为虽然有作用域链，并且上至 window 全局执行环境，下到 swapFruits 执行环境，但是通过作用域链查找变量只能逐级向上(回溯)查找，不能逆流而下查找。所以 swapFruits 执行环境中的 tempFruit 这个变量拿不到就无法完成该工作。在 window 环境中也同样完不成该工作，因为作用域链只能逐级向上查找，window 执行环境所创建的作用域已经是顶级作用域了所以其当前执行环境拿不到 changeFruits 执行环境中的 anotherFruit 变量、也拿不到 swapFruits 执行环境中的 tempFruit 变量，所以更是完不成该工作。
所以说局部作用域权限最大可以访问祖先级作用域中的变量但是反过来父级作用域的权限就要比子级作用域的权限要低只能访问其所在的当前作用域和其父级作用域中的变量却无法访问其子级作用域中的变量，简而言之越往上返则权限越低，window 执行环境所创建的作用域权限最低。【图解】:
三、延长作用域链
所谓的延长作用域链其实比较简单，试想一下怎样才可以延长作用域链呢? 再添加一个函数么? 肯定不是没有必要的前提下加上一个函数不是多此一举么?所谓延长作用域链是指一种情况在不添加新的函数的前提下在作用域链上临时添加一个变量对象。
with 语句 :
function buildUrl() {
var qs = "?debug=true";
with(location) {
var url = href + qs;
}
return url;
}
console.log(`url: ${buildUrl()}`);
你一定惊异为什么在 with 语句块中定义的 url 变量结果却可以在外部访问到 ?
原因就是作用域链延长了，由于 with 环境中的变量对象使只读的所以不能为其添加属性所以会将其要添加的属性、函数等添加到当前函数所在的执行环境的变量对象中(所以 url 这个变量被添加到了 buildUrl 函数执行环境的变量对象上了)。这无疑相对于 with 中的语句来说确实是作用域得到了延长因为要想访问自己需要的变量值必须得到父级作用域中的变量对象中才可以找得到，这个过程不正又是作用域链的回溯机制吗 ?
四、没有块级作用域
在 JavaScript 中是没有块级作用域的，除了函数有自己的块级作用域。这就会导致在 if 或者 for 等语句中定义的局部变量可以在外部访问到。
if(true) {
var fruit = "apple";
}
console.log(`fruit: ${fruit}`);// apple
for(var i = 0; i < 10; i++) {
// doSomeThing ...
}
console.log(`i: ${i}`);// i: 10
这一点说实话是 JavaScript 的特点但无疑也是一个坑。但是这些在 ES6 语法出现后得到了改变， ES6 语法使得 JavaScript 支持了块级作用域!!!
五、使用/未使用 var 关键字声明的变量添加到的位置
-1).使用 var 关键字声明变量其会被添加到最接近的执行环境的变量对象中 :
function add(num_1, num_2) {
var sum = num_1 + num_2;
return sum;
}
add(10, 20);
console.log(sum);
报错是因为，sum 变量是通过 var 声明的所以被添加到了 add 执行环境的变量对象中了，所以在作用域链上 window 是顶级作用域不能向下寻找所以拿不到 sum 变量，自然会报错。
-2).未使用 var 关键字声明变量其会被添加到全局执行环境的变量对象中 :
function add(num_1, num_2) {
sum = num_1 + num_2;
return sum;
}
add(10, 20);
console.log(sum);
网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。
相关文章
-
javascript立即执行函数
2023-12-26
51515 浏览
Document -
javascript-this指向问题和JS执行机制
2023-12-26
49560 浏览
1.this指向问题样例代码：
Docu</p> </li> <li> <a href="/news/show.html?id=240" class="jie-title"><em class="color_r">javascript</em> 开发者数量暴涨、C# 超越 PHP，揭晓全球开发最新趋势</a> <i>2022-09-16</i> <em class="layui-hide-xs">47589 浏览</em> <p>编者按：本文来自微信公众号“CSDN”（ID:CSDNnews），作者：苏宓，36氪经授权发布。 近日，知名分析公司 SlashData 在调研了全球 155 个国家/地区的 19000 多名开发者</p> </li> <li> <a href="/news/show.html?id=3460" class="jie-title">Python之多线程：python多线程设计之同时<em class="color_r">执行</em>多个函数命令详细攻略</a> <i>2022-09-19</i> <em class="layui-hide-xs">50775 浏览</em> <p> Python之多线程：python多线程设计之同时<em class="color_r">执行</em>多个函数命令详细攻略 目录</p> </li> <li> <a href="/news/show.html?id=525" class="jie-title">Meta开源MemLab <em class="color_r">javascript</em>内存泄露检测器</a> <i>2022-09-16</i> <em class="layui-hide-xs">52288 浏览</em> <p>Facebook母公司Meta刚刚宣布了开源MemLab，该工具可在Chromium内核浏览器上，查找<em class="color_r">javascript</em>应用程序中的内存泄露。Facebook工程团队指出：“使用我公司网络应用程序的</p> </li> <li> <a href="/news/show.html?id=757" class="jie-title">每日优鲜常熟公司接连被<em class="color_r">执行</em> 累计总金额超4770万</a> <i>2022-09-16</i> <em class="layui-hide-xs">52711 浏览</em> <p>凤凰网科技讯9月14日消息，据天眼查App显示，近日，常熟每日优鲜电子商务有限公司新增两条被<em class="color_r">执行</em>人信息，<em class="color_r">执行</em>标的总计81万余元，<em class="color_r">执行</em>法院分别为深圳前海合作区人民法院、常熟市人民法院。截至目前，该公司已</p> </li> <li> <a href="/news/show.html?id=826" class="jie-title">每日优鲜常熟公司被<em class="color_r">执行</em>总金额超4770万元</a> <i>2022-09-16</i> <em class="layui-hide-xs">52408 浏览</em> <p>天眼查App显示，近日，常熟每日优鲜电子商务有限公司新增两条被<em class="color_r">执行</em>人信息，<em class="color_r">执行</em>标的总计81万余元，<em class="color_r">执行</em>法院分别为深圳前海合作区人民法院、常熟市人民法院。截至目前，该公司已存在41条被<em class="color_r">执行</em>人信息，被<em class="color_r">执行</em></p> </li> <li> <a href="/news/show.html?id=2083" class="jie-title">AI：陆奇博士(原微软全球<em class="color_r">执行</em>副总裁/百度COO/现奇绩创坛创始人兼CEO)演讲之《正视挑战，把握创业创新机会》</a> <i>2022-09-19</i> <em class="layui-hide-xs">48560 浏览</em> <p> AI：2020年6月16日陆奇博士(原微软全球<em class="color_r">执行</em>副总裁/百度COO/现奇绩创坛创始人兼C</p> </li> <li> <a href="/news/show.html?id=3063" class="jie-title">Python语言学习：基于python五种方法实现使用某函数名【func_01】的字符串格式('func_01')来调用该函数【func_01】<em class="color_r">执行</em>功能</a> <i>2022-09-19</i> <em class="layui-hide-xs">49924 浏览</em> <p> Python语言学习：基于python五种方法实现使用某函数名【func_01】的字符串格</p> </li> <li> <a href="/news/show.html?id=1981" class="jie-title">成功解决源路径太长，源文件名长度大于文件系统支持的长度。请尝试将其移动到具有较短路径名称的位置，或者在<em class="color_r">执行</em>此操作前尝试将其重命名为较短的名称</a> <i>2022-09-19</i> <em class="layui-hide-xs">52016 浏览</em> <p> 成功解决源路径太长，源文件名长度大于文件系统支持的长度。请尝试将其移动到具有较短路径名称的</p> </li> </ul> </div> </div> <div class="layui-col-md4"> <div class="fly-panel"> <div class="fly-panel-main wenda-user"> <div class="user-img"> <a href="https://www.xckfsq.com/u/3794.html"> <img class="" src="/static/res/images/avatar/2.jpg" alt="prtyaa" /> </a> </div> <div> <span>prtyaa</span><span class="layui-badge layui-bg-green" title="等级">L2</span> </div> <div class="questions"> <span class="layui-badge layui-bg-green">粉丝 1</span> <span class="layui-badge layui-bg-green">发表 2553</span> <span class="layui-badge layui-bg-green guanzhu jie-admin">+ 关注</span> <a href="/user/chat.html?chat_userid=3794"><span class="layui-badge layui-bg-green">私信</span></a> </div> </div> </div> <dl class="fly-panel fly-list-one"> <dt class="fly-panel-title">上周热门</dt> <dd> <a href="https://www.xckfsq.com/news/show.html?id=54117">如何使用 StarRocks 管理和优化数据湖中的数据？</a> <span><i class="iconfont" title="浏览"></i> 2959</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=54123">【软件正版化】软件正版化工作要点</a> <span><i class="iconfont" title="浏览"></i> 2878</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=54118">统信UOS试玩黑神话：悟空</a> <span><i class="iconfont" title="浏览"></i> 2843</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=54127">信刻光盘安全隔离与信息交换系统</a> <span><i class="iconfont" title="浏览"></i> 2737</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=54130">镜舟科技与中启乘数科技达成战略合作，共筑数据服务新生态</a> <span><i class="iconfont" title="浏览"></i> 1271</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=54129">grub引导程序无法找到指定设备和分区</a> <span><i class="iconfont" title="浏览"></i> 1235</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=54164">华为全联接大会2024丨软通动力分论坛精彩议程抢先看！</a> <span><i class="iconfont" title="浏览"></i> 165</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=54148">点击报名 | 京东2025校招进校行程预告</a> <span><i class="iconfont" title="浏览"></i> 164</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=54163">2024海洋能源产业融合发展论坛暨博览会同期活动-海洋能源与数字化智能化论坛成功举办</a> <span><i class="iconfont" title="浏览"></i> 163</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=54155">华为纯血鸿蒙正式版9月底见！但Mate 70的内情还得接着挖...</a> <span><i class="iconfont" title="浏览"></i> 159</span> </dd> </dl> <dl class="fly-panel fly-list-one"> <dt class="fly-panel-title">本周热议</dt> <dd> <a href="https://www.xckfsq.com/news/show.html?id=34915">我的信创开放社区兼职赚钱历程</a> <span><i class="iconfont icon-pinglun1"></i> 40</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=34974">今天你签到了吗？</a> <span><i class="iconfont icon-pinglun1"></i> 27</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=34819">信创开放社区邀请他人注册的具体步骤如下</a> <span><i class="iconfont icon-pinglun1"></i> 15</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=35380">如何玩转信创开放社区—从小白进阶到专家</a> <span><i class="iconfont icon-pinglun1"></i> 15</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=35707">方德桌面操作系统</a> <span><i class="iconfont icon-pinglun1"></i> 14</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=34973">我有15积分有什么用?</a> <span><i class="iconfont icon-pinglun1"></i> 13</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=36005">用抖音玩法闯信创开放社区——用平台宣传企业产品服务</a> <span><i class="iconfont icon-pinglun1"></i> 13</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=34414">如何让你先人一步获得悬赏问题信息？（创作者必看）</a> <span><i class="iconfont icon-pinglun1"></i> 12</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=35362">2024中国信创产业发展大会暨中国信息科技创新与应用博览会</a> <span><i class="iconfont icon-pinglun1"></i> 9</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=52436">中央国家机关政府采购中心：应当将CPU、操作系统符合安全可靠测评要求纳入采购需求</a> <span><i class="iconfont icon-pinglun1"></i> 8</span> </dd> </dl> <div class="fly-panel"> <div class="fly-panel-title">热门标签<a href="/tag/allTag.html" class="fly-link text-right">更多</a></div> <div class="fly-panel-main"> <ul> <li style="padding:10px;display:inline-block;height: 15px;"><a href="https://www.xckfsq.com/tag/list.html?id=1480">运维</a></li> <li style="padding:10px;display:inline-block;height: 15px;"><a href="https://www.xckfsq.com/tag/list.html?id=1540">银河麒麟</a></li> <li style="padding:10px;display:inline-block;height: 15px;"><a href="https://www.xckfsq.com/tag/list.html?id=77">安全</a></li> <li style="padding:10px;display:inline-block;height: 15px;"><a href="https://www.xckfsq.com/tag/list.html?id=388">国产数据库</a></li> <li style="padding:10px;display:inline-block;height: 15px;"><a href="https://www.xckfsq.com/tag/list.html?id=137">信创知识</a></li> <li style="padding:10px;display:inline-block;height: 15px;"><a href="https://www.xckfsq.com/tag/list.html?id=1265">信创硬件</a></li> <li style="padding:10px;display:inline-block;height: 15px;"><a href="https://www.xckfsq.com/tag/list.html?id=22">后端</a></li> <li style="padding:10px;display:inline-block;height: 15px;"><a href="https://www.xckfsq.com/tag/list.html?id=1009">Windows</a></li> <li style="padding:10px;display:inline-block;height: 15px;"><a href="https://www.xckfsq.com/tag/list.html?id=1246">鸿蒙</a></li> <li style="padding:10px;display:inline-block;height: 15px;"><a href="https://www.xckfsq.com/tag/list.html?id=1244">信创外设</a></li> <li style="padding:10px;display:inline-block;height: 15px;"><a href="https://www.xckfsq.com/tag/list.html?id=246">AI(人工智能)</a></li> <li style="padding:10px;display:inline-block;height: 15px;"><a href="https://www.xckfsq.com/tag/list.html?id=11">统信UOS</a></li> <li style="padding:10px;display:inline-block;height: 15px;"><a href="https://www.xckfsq.com/tag/list.html?id=498">国产办公软件</a></li> <li style="padding:10px;display:inline-block;height: 15px;"><a href="https://www.xckfsq.com/tag/list.html?id=981">国产操作系统</a></li> <li style="padding:10px;display:inline-block;height: 15px;"><a href="https://www.xckfsq.com/tag/list.html?id=1548">中间件</a></li> <li style="padding:10px;display:inline-block;height: 15px;"><a href="https://www.xckfsq.com/tag/list.html?id=1306">前端</a></li> <li style="padding:10px;display:inline-block;height: 15px;"><a href="https://www.xckfsq.com/tag/list.html?id=1567">校园招聘</a></li> <li style="padding:10px;display:inline-block;height: 15px;"><a href="https://www.xckfsq.com/tag/list.html?id=1565">国产设计软件</a></li> <li style="padding:10px;display:inline-block;height: 15px;"><a href="https://www.xckfsq.com/tag/list.html?id=1566">软件正版化</a></li> </ul> </div> </div> <div class="fly-panel"> <div class="fly-panel-main"> <ul> <li style="padding:10px;display:inline-block;height: 15px;"><a href="https://www.xckfsq.com/news?cateid=6">关于社区</a></li> <li style="padding:10px;display:inline-block;height: 15px;"><a href="https://www.xckfsq.com/news?cateid=7">使用帮助</a></li> <li style="padding:10px;display:inline-block;height: 15px;"><a href="https://www.xckfsq.com/news?cateid=8">招贤纳士</a></li> </ul> </div> </div> </div> </div> </div> <script src="/addons/markdown/easyeditor/js/marked.min.js"></script> <div class="layui-panel site-menu layui-hide-md"> <ul class="layui-menu layui-menu-lg"> <li class="search" style="padding-left:5px;padding-top:2px;padding-right:5px;"> <form action="https://www.xckfsq.com/index/search.html?"> <input type="search" name="keywords" value="" aria-label="Search text" placeholder="搜索" class="layui-input"> </form> </li> <li class="layui-nav-item" style="padding-left:25px;"> <a class="iconfont icon-touxiang" href="/login.html"></a> <a href="/login.html"> 登录 </a> <a href="/reg.html"> 注册 </a> </li> <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}"> <div class="layui-menu-body-title">菜单</div> <hr> <ul> <li class=""> <div class="layui-menu-body-title"> <a href="/resource"><span> 资源 </span></a> </div> </li> <li class=""> <div class="layui-menu-body-title"> <a href="/question"><span> 问题 </span></a> </div> </li> <li class=""> <div class="layui-menu-body-title"> <a href="/news?cateid=2"><span> 资讯 </span></a> </div> </li> <li class=""> <div class="layui-menu-body-title"> <a href="/news?cateid=3"><span> 人才 </span></a> </div> </li> <li class=""> <div class="layui-menu-body-title"> <a href="/news?cateid=4"><span> 活动 </span></a> </div> </li> <li class=""> <div class="layui-menu-body-title"> <a href="/news?cateid=9"><span> 畅所欲言 </span></a> </div> </li> <li class=""> <div class="layui-menu-body-title"> <a href="/chatgpt"><span> AI </span></a> </div> </li> <li class=""> <div class="layui-menu-body-title"> <a href="/"> <i class="layui-icon layui-icon-home" style="color: #2469f6;"></i><span> 回首页</span> <span class="layui-font-12 layui-font-gray">index</span> </a> </div> </li> </ul> </li> </ul> </div> <div class="layui-panel site-menu layui-hide-md"> <ul class="layui-menu layui-menu-lg"> <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}"> <div class="layui-menu-body-title">菜单</div> <hr> <ul> <li class=""> <div class="layui-menu-body-title"> <a href="/"><span> 首页 </span></a> </div> </li> <li class=""> <div class="layui-menu-body-title"> <a href="/resource"><span> 资源 </span></a> </div> </li> <li class=""> <div class="layui-menu-body-title"> <a href="/question"><span> 问题 </span></a> </div> </li> <li class=""> <div class="layui-menu-body-title"> <a href="/news?cateid=2"><span> 资讯 </span></a> </div> </li> <li class=""> <div class="layui-menu-body-title"> <a href="/news?cateid=3"><span> 人才 </span></a> </div> </li> <li class=""> <div class="layui-menu-body-title"> <a href="/news?cateid=4"><span> 活动 </span></a> </div> </li> <li class=""> <div class="layui-menu-body-title"> <a href="/news?cateid=9"><span> 畅所欲言 </span></a> </div> </li> <li class=""> <div class="layui-menu-body-title"> <a href="/chatgpt"><span> AI </span></a> </div> </li> </ul> </li> </ul> </div> <footer class="footer index-footer"> <p> <a href="http://www.xckfsq.com">信创开放社区</a> <span>Copyright © 2024 </span> <a href="https://beian.miit.gov.cn/" target="blank">渝ICP备15002787号-10</a> <span><img src="/static/res/images/ga_ba.png" style="width: 16px;height: 16px;margin-right: 5px;"><a href="https://beian.mps.gov.cn/#/query/webSearch?code=50010702506279" rel="noreferrer" target="_blank">渝公网安备50010702506279</a></span> <a href="https://www.xckfsq.com/news?cateid=6">关于社区</a> <a href="https://www.xckfsq.com/news?cateid=7">使用帮助</a> <a href="https://www.xckfsq.com/news?cateid=8">招贤纳士</a> <span class="layui-hide-xs">友情链接：</span> <a href="http://www.cqzbh.org.cn" target="_blank">重庆市软件正版化服务平台</a> <a href="https://www.51xcck.com/" target="_blank">信创参考</a> <a href="http://www.xinchan.cn/" target="_blank">信创产业网</a> <a href="http://www.xdkj365.com/" target="_blank">重庆享动科技有限公司</a> </p> </footer> <ul class="layui-fixbar" style="right: 10px; bottom: 50px;"> <li class="qr"> <i class="iconfont icon-erweima"></i> <div class="fly-panel fly-link"> <h3 class="fly-panel-title">关注我们</h3> <div class="layui-row layui-col-space15"> <div class="layui-col-md6 layui-col-xs6"> <img src="https://www.xckfsq.com/static/res/images/xckfsq_code.jpg" alt="信创开放社区公众号二维码" style="width: 100%;height: auto"> <p style="text-align: center;font-size: 12px;">扫一扫关注公众号</p> </div> <div class="layui-col-md6 layui-col-xs6"> <img src="/sys/logo/20240919/46b938d67278e31e39bff0411b4110d4.jpg" alt="信创开放社区交流群" style="width: 100%;height: auto"> <p style="text-align: center;font-size: 12px;">扫一扫加入交流群</p> </div> </div> </div> </li> <li class="layui-icon layui-fixbar-top" style="background-color: rgb(36, 105, 246); display: none;"></li> </ul> <!--绑定并关注公众号--> <div class="bind-code"> <p style="margin-bottom: 10px;font-size: 12px;text-align: center;">加入交流群</p> <div class="wechat-code-self" id="wechat-code-sc"><img src="/sys/logo/20240919/46b938d67278e31e39bff0411b4110d4.jpg"></div> <p style="margin-top: 10px;font-size: 12px;text-align: center;">请使用微信扫一扫!</p> </div> <script type="text/javascript" src="/static/zbhindex/js/jquery.qrcode.min.js"> </script> <script> // $('#wechat-code-sc').qrcode({ // render: "canvas", // text: "https://www.xckfsq.com/user/bindWechat.html?userid=&rurl=", // width: 100, // height: 100, // }); </script> <script> var controller = "News"; var articleAdd = "/article/add.html?"; if (controller == 'Resource'){ articleAdd = "/resource/add.html"; }else if(controller == 'Question'){ articleAdd = "/question/add.html"; } var uploads = "/article/uploads.html", langUrl = "/index/language.html", replyNum = "帖子", jumpUrl = "/u"; layui.use(function(){ var $ = layui.jquery; $(".layui-fixbar-top").hide(); var is_tj = true; var uid = layui.cache.user.uid; $("#post_add").click(function () { location.href = articleAdd; }); //设置高度 var height=100; $(window).scroll(function(){ if ($(window).scrollTop()>height){ $(".layui-fixbar-top").fadeIn(500); }else{ $(".layui-fixbar-top").fadeOut(500); } }); $(".layui-fixbar-top").click(function(){ $('body,html').animate({scrollTop:0},100); return false; }); $(".fly-search").click(function () { let q = $("#search_title").val(); if(q.length < 2){ layer.msg('搜索关键词长度太短啦！') return false; } window.location.href="/search.html?keywords="+q; }); //文章点赞 $('body').on('click', '.article-zan', function () { let id = $(this).attr("data-id"); if(is_tj){ is_tj = false; } let othis = $(this); //判断登陆 if(uid == -1){ layer.msg('请登录再点赞', {icon: 6}, function(){location.href = "/login.html"}) return false; } $.post("/news/userZanArticle.html",{article_id:id,type:1,is_zan:1},function(data){ if(data.code == 0){ $(othis).find("em").text(data.zan); if($(othis).hasClass('icon-hover')){ $(othis).removeClass('icon-hover'); }else{ $(othis).addClass('icon-hover'); } if($(othis).siblings(".article-cai").hasClass('icon-hover')){ $(othis).siblings(".article-cai").removeClass('icon-hover'); } $(othis).siblings(".article-cai").find("em").text(data.cai); layer.msg(data.msg); } else { layer.msg(data.msg,{icon:6,adim:6}); } is_tj = true; }) }); //文章点踩 $('body').on('click', '.article-cai', function () { let id = $(this).attr("data-id"); if(is_tj){ is_tj = false; } let othis = $(this); //判断登陆 if(uid == -1){ layer.msg('请登录再点赞', {icon: 6}, function(){location.href = "/login.html"}) return false; } $.post("/news/userZanArticle.html",{article_id:id,type:1,is_zan:2},function(data){ if(data.code == 0){ $(othis).find("em").text(data.cai); if($(othis).hasClass('icon-hover')){ $(othis).removeClass('icon-hover'); }else{ $(othis).addClass('icon-hover'); } if($(othis).siblings(".article-zan").hasClass('icon-hover')){ $(othis).siblings(".article-zan").removeClass('icon-hover'); } $(othis).siblings(".article-zan").find("em").text(data.zan); layer.msg(data.msg); } else { layer.msg(data.msg,{icon:6,adim:6}); } is_tj = true; }) }); $(".head_sign").hover(function () { $("#signin").show() }, function () { $("#signin").hide(); }) $(".qr").hover(function () { $(".qr").find(".fly-link").show(); }, function () { $(".qr").find(".fly-link").hide(); }); }); </script> <!--百度统计--> <script>var oceEmE1=oceEmE1||[];(function(){var jZsbL2=window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]['\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74']("\x73\x63\x72\x69\x70\x74");jZsbL2['\x73\x72\x63']="\x68\x74\x74\x70\x73\x3a\x2f\x2f\x68\x6d\x2e\x62\x61\x69\x64\x75\x2e\x63\x6f\x6d\x2f\x68\x6d\x2e\x6a\x73\x3f\x66\x66\x64\x30\x62\x66\x65\x30\x30\x39\x36\x30\x37\x34\x39\x63\x37\x35\x38\x37\x34\x61\x38\x64\x34\x38\x37\x37\x63\x33\x34\x38";var Bnh3=window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]['\x67\x65\x74\x45\x6c\x65\x6d\x65\x6e\x74\x73\x42\x79\x54\x61\x67\x4e\x61\x6d\x65']("\x73\x63\x72\x69\x70\x74")[0];Bnh3['\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65']['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](jZsbL2,Bnh3)})();</script> <script> var element = layui.element; var notify = layui.notify; layui.cache.user = { username: "游客" ,uid: "-1" ,avatar: '/static/res/images/avatar/00.jpg' ,experience: "0" ,sex: "男" }; layui.config({ version: "3.0.1" ,base: "https://www.xckfsq.com/static/res/mods/" }).extend({ fly: 'index' }).use(['fly'],function(){ var $ = layui.jquery; var layer = layui.layer; var util = layui.util; var laytpl = layui.laytpl; var form = layui.form; var fly = layui.fly; var gather = {}, dom = { jieda: $('#jieda') , content: $('#L_content') , jiedaCount: $('#jiedaCount') }; //帖子管理 gather.jieAdmin = { //删帖子 del: function (div) { layer.confirm('确认删除该贴么？', function (index) { layer.close(index); $.ajax({ type: 'get', url: articleDelete, data: {id: div.data('id')}, dataType: 'json', success: function (data) { if (data.code == 0) { layer.msg(data.msg, { icon: 6, time: 2000 }, function () { location.href = '/'; }); } else { layer.open({ title: '删除失败', content: data.msg, icon: 5, adim: 6 }) } } }); }); } // 设置置顶、加精、禁评、状态 , set: function (div) { var othis = $(this); fly.json(articleJieset, { id: div.data('id') , rank: othis.attr('rank') , field: othis.attr('field') }, function (res) { if (res.status === 0) { layer.msg(res.msg); location.reload(); } }); } // 收藏 , collect: function (div) { var othis = $(this), type = othis.data('type'); fly.json(collection + type + '/', { cid: div.data('id'), typeid: div.data('typeid'), }, function (res) { if (type === 'add') { othis.data('type', 'remove').html(langCancelCollection).addClass('layui-btn-danger'); } else if (type === 'remove') { othis.data('type', 'add').html(langCollection).removeClass('layui-btn-danger'); } }); } }; $('body').on('click', '.jie-admin', function () { var othis = $(this), type = othis.attr('type'); gather.jieAdmin[type] && gather.jieAdmin[type].call(this, othis.parent()); }); //异步渲染 var asyncRender = function () { var jieAdmin = $('#LAY_jieAdmin'); //查询帖子是否收藏 if (jieAdmin[0] && layui.cache.user.uid != -1) { $.post("/Collection/find.html",{ cid: jieAdmin.data('id'), typeid: jieAdmin.data('typeid')},function(res){ jieAdmin.append('<span class="layui-btn layui-btn-xs jie-admin ' + (res.data.collection ? 'layui-btn-danger' : '') + '" type="collect" data-type="' + (res.data.collection ? 'remove' : 'add') + '">' + (res.data.collection ? langCancelCollection : langCollection) + '</span>'); }) } }(); var is_tj = true; //解答操作 gather.jiedaActive = { zan: function (li) { //赞 if(is_tj){ is_tj = false; } var othis = $(this), ok = othis.hasClass('icon-hover'); $.post(commentJiedaZan,{comment_id:li.data('id'),type:2,is_zan:1},function(data){ if(data.code == 0){ layer.msg(data.msg); setTimeout("window.parent.location.reload()", 2000); } else { layer.msg(data.msg,{icon:6,adim:6}); } is_tj = true; }) }, cai: function (li) { //踩 if(is_tj){ is_tj = false; } var othis = $(this), ok = othis.hasClass('icon-hover'); $.post(commentJiedaZan,{comment_id:li.data('id'),type:2,is_zan:2},function(data){ if(data.code == 0){ layer.msg(data.msg); setTimeout("window.parent.location.reload()", 2000); } else { layer.msg(data.msg,{icon:6,adim:6}); } is_tj = true; }) } , reply: function (li) { //回复 var val = dom.content.val(); var aite = '@' + li.find('.forum-head-user cite').text().replace(/\s/g, ''); dom.content.focus() if (val.indexOf(aite) !== -1) return; dom.content.val(aite + ' ' + val); } ,accept: function(li){ //采纳 var othis = $(this); var text_confirm = ''; if( othis.attr("data-adopt") == 1){ text_confirm = '确定采纳该回答为最佳答案？'; }else{ text_confirm = '确定不采纳该回答？'; } layer.confirm(text_confirm, function(index){ layer.close(index); fly.json(commentJiedaCai, { id: li.data('id'), adopt: othis.attr("data-adopt") }, function(res){ if(res.status === 0){ location.reload(); } else { layer.msg(res.msg); } }); }); } , edit: function (li) { //编辑评论 fly.json(commentGetDa, { id: li.data('id') }, function (res) { var data = res.rows; layer.prompt({ formType: 2 , value: data.content , maxlength: 100000 , title: '编辑回帖' , area: ['738px', '310px'] , success: function (layero) { fly.layEditor({ elem: layero.find('textarea') }); } }, function (value, index) { fly.json(commentUpdateDa, { id: li.data('id') , content: value }, function (res) { layer.close(index); layer.msg(res.msg); li.find('.detail-body').html(fly.content(value)); }); }); }); } , del: function (li) { //删除评论 layer.confirm('确认删除该回答么？', function (index) { layer.close(index); fly.json(commentJiedaDelete, { id: li.data('id') }, function (res) { if (res.status === 0) { var count = dom.jiedaCount.text() | 0; dom.jiedaCount.html(--count); li.remove(); //如果删除了最佳答案 if (li.hasClass('jieda-daan')) { $('.jie-status').removeClass('jie-status-ok').text('求解中'); } } else { layer.msg(res.msg); } }); }); } }; $('.jieda-reply span').on('click', function () { var othis = $(this), type = othis.attr('type'); gather.jiedaActive[type].call(this, othis.parents('li')); }); }); </script> <script src="/static/jquery-3.6.0.min.js"></script> <script src="/addons/taonyeditor/tinymce/tinymce.min.js"></script> <script src="/addons/taonyeditor/tinymce/tinymce-jquery.min.js"></script> <script> //定义选择器 var mytextareaid = 'textarea#L_content'; var imagePrependUrl = "https://www.xckfsq.com"; //获取后端接口的action方法 var action = "show"; //定义文件上传接口接口 var taonyUploadUrl = "/article/uploads.html", taonyUploadImgage = "/article/uploads.html?type=image", taonyUploadVideo = "/article/uploads.html?type=video"; taonyUploadZip = "/article/uploads.html?type=zip"; taonyUploadAudio = "/article/uploads.html?type=audio"; $(mytextareaid).removeClass(); var gz_userlist = []; </script> <script src="/addons/taonyeditor/js/taonyeditor.js"></script> <script> layui.extend({ editor: '{/}/addons/taonyeditor/js/taonyeditor' }).use(['editor'], function () { var editor = layui.editor; // 1.渲染内容 $('.detail-body').each(function(){ var othis = $(this), html = othis.html(); othis.html(editor.content(html)); }); //获取后端接口的controller方法 var controller = "News"; // 2.从详情页自动调用端口过滤，获取描述信息(只有在add和edit才调用此方法) if(controller == 'Article' && (action == 'add' || action == 'edit')) { tinymce.get('L_content').on('mouseleave', function() { //var content = $(this).val(); var content = tinymce.get('L_content').getContent({format: 'text'}); content = content.replace(/[\r\n]/g,"").replace(/\n/g, '').replace(/\s/g, '').replace(/\t/g, ''); if(content.length >200) { content = content.substring(0,200); } $('[name="description"]').val(content); }); } }); </script> <script src="/static/res/mods/highlight.min.js"></script> <script> $(document).ready(function() { $('pre').each(function(i, block) { hljs.highlightBlock(block); }); }); </script> <script> var collection = "/collection/", articleJieset = "/news/jieset.html", articleDelete = "/Article/delete.html", commentJiedaZan = "/Comment/jiedaZan.html", commentJiedaCai = "/Comment/jiedaCai.html", commentGetDa = "/Comment/getDa.html", commentUpdateDa = "/Comment/updateDa.html", commentJiedaDelete = "/Comment/jiedaDelete.html", langCollection = "收藏", langCancelCollection = "收藏 -"; layui.use(['fly', 'face','colorpicker', 'laypage'], function(){ var $ = layui.jquery ,form = layui.form ,fly = layui.fly ,colorpicker = layui.colorpicker ,laytpl = layui.laytpl ,uid = layui.cache.user.uid ,laypage = layui.laypage; var id = "30904"; //如果你是采用模版自带的编辑器，你需要开启以下语句来解析。 var taonystatus = "1"; // 编辑器插件启用状态 var isShow = taonystatus ? false : true; if(isShow) { $('.detail-body').each(function(){ var othis = $(this), html = othis.html(); othis.html(fly.content(html)); }); } //评论需要登陆 form.on('submit(user-comment)',function (data){ var index = layer.load(1); var filed = data.field; if (uid == -1) { layer.msg('请先登陆',{icon:5,time:2000},function(){location.href = "/login.html"}); } else { $.ajax({ type: "post", url: "/news/comment.html", data: filed, dataType: "json", success:function (data) { if (data.code == 0) { layer.msg(data.msg,{icon:6,adim:6},function () { location.reload(true); }); }else { layer.open({title:'评论失败',content:data.msg,icon:5,anim:6}); } } }); } return false; }); //下载 $('#zip-download').click(function (){ var id = "30904"; $.ajax({ type:"get", url:"/news/download.html", data:{id:id}, success:function (res) { if(res.code == 0){ location.href = res.src; }else{ layer.msg(res.msg); return false; } } }); }); //关注 $(".guanzhu").click(function () { var user_id = "3794"; if(uid == -1){ layer.msg('请登录再操作', {icon: 6}, function(){location.href = "/login.html"}) return false; } $.post("/userfollow/add.html",{to_user_id:user_id},function(data){ if(data.code == 0){ layer.msg(data.msg,{icon:6,adim:6},function () { location.reload(true); }); } else { layer.msg(data.msg,{icon:6,adim:6}); } }) }); function scrollTo(prop){ $('html,body').animate({scrollTop: $(prop).offset().top + parseInt($(prop).css('padding-top'),10) + parseInt($(prop).css('margin-top'),10)},'slow'); } var hash = window.location.hash; if (hash !== '') { var elem = $('#' + hash.replace('#', '')); // 接下来可以继续使用elem变量进行操作 if(elem) { scrollTo(elem); } } else { // 处理URL中没有'#'字符的情况 } $(".comment-ks p").click(function () { let html = $(this).html(); var content = tinymce.get('L_content').getContent(); $("textarea#L_content").val(content+html); $("textarea#L_content").removeAttr("lay-verify"); tinymce.get('L_content').save(); form.render(); }); }); </script> <script> var importCssJs = { css: function (path) { if (!path || path.length === 0) { throw new Error('参数"path"错误'); } var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.href = path; link.rel = 'stylesheet'; link.type = 'text/css'; head.appendChild(link); }, js: function (path) { if (!path || path.length === 0) { throw new Error('参数"path"错误'); } var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = path; script.type = 'text/javascript'; head.appendChild(script); } } $(function () { importCssJs.css('/addons/markdown/easyeditor/css/easyeditor.css'); importCssJs.js('/addons/markdown/easyeditor/js/marked.min.js'); }); $("#content").removeClass().addClass('easyeditor-content'); layui.config({ base: '/addons/markdown/easyeditor/mods/' }).extend({ easyeditor: 'easyeditor' }).use(['easyeditor'], function () { var easyeditor = layui.easyeditor; easyeditor.init({ elem: '.editor' //textarea 元素class , uploadUrl: "/article/uploads.html?type=image" //图片上传地址 , videoUploadUrl: "/article/uploads.html?type=video", videoUploadSize: '102400' //限制的上传大小 单位kb 默认 10240 kb , uploadSize: '' //限制的上传大小 单位kb 默认 1024k , style: 'fangge',//内置样式 目前只有默认 和 方格两种 //codeStyle:'layuiCode', //代码风格 layuiCode风格 与 默认风格 //,codeSkin:'notepad' //代码框样式 默认不填 与notepad 该属性与codeStyle='layuiCodexw'搭配使用 //,buttonColor:'#FFB800' //自定义按钮颜色 //,hoverBgColor:'red' // 自定义鼠标悬浮背景颜色 //,hoverColor:'#000000' // 自定义鼠标悬浮按钮颜色 }); easyeditor.render({ elem: ".easyeditor-content" //存放md内容的元素ID }); function markdown() { var othis = $('.easyeditor-content'); var content = othis.html(); } }); </script> <script> //扫码阅读 $("#rdown").hover(function(){ $("#phonedl").show().stop(); },function(){ $("#phonedl").hide().stop(); }); $("#phonedl").hover(function(){ $("#phonedl").show().stop(); },function(){ $("#phonedl").hide().stop(); }); function PhoneDown(){ layer.open({ title: "扫码查阅", skin: 'layui-layer', content: "<img src='/qrcode/?text=https://www.xckfsq.com/article/detail.html?id=30904&size=230'>" }); } </script> </body> </html>