搞明白JavaScript中的匿名函数

prtyaa
prtyaa 2023-12-25 16:27:49 66227
分类专栏： 资讯

匿名函数顾名思义指的是没有名字的函数，在实际开发中使用的频率非常高！也是学好JS的重点。

匿名函数：没有实际名字的函数。

首先我们声明一个普通函数：

//声明一个普通函数，函数的名字叫fn
function fn(){
    console.log("web-chubby");
}

然后将函数的名字去掉即是匿名函数：

//匿名函数，咦，运行时，你会发现报错啦！
function (){
    console.log("web-chubby");
}

到此，你会发现单独运行一个匿名函数，由于不符合语法要求，报错啦！解决方法只需要给匿名函数包裹一个括号即可：

//匿名函数在其它应用场景括号可以省略
(function (){
    //由于没有执行该匿名函数，所以不会执行匿名函数体内的语句。
    console.log("web-chubby");
})

如果需要执行匿名函数，在匿名函数后面加上一个括号即可立即执行！

(function (){
    //此时会输出web-chubby
    console.log("web-chubby");
})()

倘若需要传值，直接将参数写到括号内即可：

(function (str){
    //此时会输出web-chubby好帅！
    console.log("web-chubby"+str);
})("好帅！")

匿名函数的应用场景

1、事件

<input type="button" value="点我啊！" id="sub">
<script>
    //获得按钮元素
    var sub=document.querySelector("#sub");
    //给按钮增加点击事件。
    sub.onclick=function(){
        alert("当点击按钮时会执行到我哦！");
    }
</script>

2、对象

var obj={
    name:"web-chubby",
    age:18,
    fn:function(){
        return "我叫"+this.name+"今年"+this.age+"岁了！";
    }
};
console.log(obj.fn());//我叫web-chubby今年18岁了！

3、函数表达式

//将匿名函数赋值给变量fn。
var fn=function(){
    return "我是一只小小小小留下，怎么飞也飞不高！"
}
//调用方式与调用普通函数一样
console.log(fn());//我是一只小小小小留下，怎么飞也飞不高！

4、回调函数

setInterval(function(){
    console.log("我其实是一个回调函数，每次1秒钟会被执行一次");
},1000);

5、返回值

//将匿名函数作为返回值
function fn(){
    //返回匿名函数
    return function(){
        return "web-chubby";
    }
}
//调用匿名函数
console.log(fn()());//web-chubby
//或
var box=fn();
console.log(box());//web-chubby

模仿块级作用域

块级作用域，有的地方称为私有作用域。JavaScript中是没有块级作用域的，例如：

if(1==1){//条件成立，执行if代码块语句。
    var a=12;//a为全局变量
}
console.log(a);//12

for(var i=0;i<3;i++){
    console.log(i);
}
console.log(i);//4

if(){}for(){}等没有自己的作用域。如果有，出了自己的作用域，声明的变量就会立即被销毁了。但是咱们可以通过匿名函数来模拟块级作用域：

(function(){
    //这里是我们的块级作用域（私有作用域）
})();

尝试块级作用域：

function fn(){
    (function(){
        var la="啦啦啦！";
    })();
    console.log(la);//报错---la is not defined
}
fn();

匿名函数的作用：

1、通过匿名函数可以实现闭包，关于闭包在后面的文章中会重点讲解。在这里简单介绍一下：闭包是可以访问在函数作用域内定义的变量的函数。若要创建一个闭包，往往都需要用到匿名函数。

2、模拟块级作用域，减少全局变量。执行完匿名函数，存储在内存中相对应的变量会被销毁，从而节省内存。再者，在大型多人开发的项目中，使用块级作用域，会大大降低命名冲突的问题，从而避免产生灾难性的后果。自此开发者再也不必担心搞乱全局作用域了。

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=30628
赞同 0
评论 0 条

相关文章

  • javascript 原生封装Ajax 案例 2023-12-26 65308 浏览

    废话不多说直接上代码：/***将对象参数转换为字符串*配合下面的$ajax方法使用*解决data对象的问题*@param{*}obj*@returnsstring*/functionqueryString(obj){letstr='';for(letkeyinobj){str=key+'='+obj[key]+'&'}returnstr.substring(0,str.length-1);}/**

  • javascript变量 2023-12-26 62542 浏览

    1js变量1.1变量概述变量：变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。1.2变量的使用声明变量赋值1.3变量的语法扩展同时声明多个变量同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开。varage=10,name='zs',sex=2;

  • javascript输入输出语句 2023-12-26 66241 浏览

    1javascript输入输出语句1D</p> </li> <li> <a href="/news/show.html?id=30988" class="jie-title"><em class="color_r">javascript</em>注释</a> <i>2023-12-26</i> <em class="layui-hide-xs">63786 浏览</em> <p>1js注释1.1单行注释<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="id=edge"><title>Documen</p> </li> <li> <a href="/news/show.html?id=30989" class="jie-title"><em class="color_r">javascript</em>三种书写位置</a> <i>2023-12-26</i> <em class="layui-hide-xs">63379 浏览</em> <p>1JS三种书写位置1.1行内式的js<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="id=edge"><title>D</p> </li> <li> <a href="/news/show.html?id=30990" class="jie-title">初识<em class="color_r">javascript</em></a> <i>2023-12-26</i> <em class="layui-hide-xs">65857 浏览</em> <p>初识<em class="color_r">javascript</em>1<em class="color_r">javascript</em>历史1.1<em class="color_r">javascript</em>历史布兰登.艾奇（BrendanEich,1961年~).神奇的大哥在1995年利用10天完成<em class="color_r">javascript</em>设计。网景公司最初命名为LiveScript，后来在与Sun合作之后将其改名为<em class="color_r">javascript</em>。1.2<em class="color_r">javascript</em>是什么<em class="color_r">javascript</em>是世界上最流行的语言之一，是一种运行在客户端的脚本语言（S</p> </li> <li> <a href="/news/show.html?id=30998" class="jie-title">如何理解<em class="color_r">javascript</em>的闭包？</a> <i>2023-12-26</i> <em class="layui-hide-xs">64809 浏览</em> <p>理解闭包前需要些什么知识？<em class="color_r">javascript</em>的数据类型：基本数据类型：String、Number、Boolean、Null、Undefined、Symbol引用数据类型（又叫复杂数据类型）：Object、Array、Function普通<em class="color_r">函数</em>的执行空间functionfn(){letnum=100console.log('<em class="color_r">函数</em>执行空间')}fn()<em class="color_r">函数</em>定义阶段：在堆中开辟一个空间把<em class="color_r">函数</em>中的代码一模</p> </li> <li> <a href="/news/show.html?id=31004" class="jie-title">通过<em class="color_r">javascript</em>判断输入的年份是闰年还是平年？</a> <i>2023-12-26</i> <em class="layui-hide-xs">65058 浏览</em> <p>判断是否是闰年的条件为：闰年能被4整除并且不能被100整除，或者能被400整除varyear=0;year=parseInt(window.prompt('请输入一个年份：'));if((year%4==0)&&(year%100!=0)||year%400==0){document.write(year+'年是闰年');}else{document.write(year+'年是平年');}</p> </li> <li> <a href="/news/show.html?id=31007" class="jie-title"><em class="color_r">javascript</em>如何实现输入一个字符，判断是否为英文大写字母('A'-'Z')、小写字母('a'-'z')、数字或是其他符号，并输出相应信息？</a> <i>2023-12-26</i> <em class="layui-hide-xs">64744 浏览</em> <p>在<em class="color_r">javascript</em>中：大写字母A-Z对应的ASCII码值是65-90，小写字母a-z对应的ASCII码值是97-122，首先我们需要获取用户输入的字符(假设用户每次只能输入一个字符)，然后将输入的字符转换为对应的ASCII值，再将转换的ASCII值通过if-else-if条件语句进行判断，ASCII的值在65-90这个范围内，则是大写的A-Z；ASCII的值在97-122这个范围内，则是小写的</p> </li> <li> <a href="/news/show.html?id=31005" class="jie-title"><em class="color_r">javascript</em>如何实现将用户输入华氏温度转换为摄氏度？</a> <i>2023-12-26</i> <em class="layui-hide-xs">65021 浏览</em> <p>小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。温馨提示：摄氏度与芈氏度的转换公式为：摄氏度=5/9.0*(华氏度-32)，保留3位小数。华氏温度转摄氏温度：varsheShi=0;varhuaShi=0;huaShi=parseFloat(window.prompt('请输入华氏温度为：'));she</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="等级">L0</span> </div> <div class="questions"> <span class="layui-badge layui-bg-green">粉丝 1</span> <span class="layui-badge layui-bg-green">发表 2554</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=54440">银河麒麟添加网络打印机时，出现“client-error-not-possible”错误提示</a> <span><i class="iconfont" title="浏览"></i> 1448</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=54444">银河麒麟打印带有图像的文档时出错</a> <span><i class="iconfont" title="浏览"></i> 1365</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=54443">银河麒麟添加打印机时，出现“server-error-internal-error”</a> <span><i class="iconfont" title="浏览"></i> 1151</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=54449">统信桌面专业版【如何查询系统安装时间】</a> <span><i class="iconfont" title="浏览"></i> 1073</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=54450">统信操作系统各版本介绍</a> <span><i class="iconfont" title="浏览"></i> 1070</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=54457">统信桌面专业版【全盘安装UOS系统】介绍</a> <span><i class="iconfont" title="浏览"></i> 1028</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=54436">麒麟系统也能完整体验微信啦！</a> <span><i class="iconfont" title="浏览"></i> 984</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=54453">统信【启动盘制作工具】使用介绍</a> <span><i class="iconfont" title="浏览"></i> 627</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=54455">统信桌面专业版【一个U盘做多个系统启动盘】的方法</a> <span><i class="iconfont" title="浏览"></i> 575</span> </dd> <dd> <a href="https://www.xckfsq.com/news/show.html?id=54452">信刻全自动档案蓝光光盘检测一体机</a> <span><i class="iconfont" title="浏览"></i> 484</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=1009">Windows</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=11">统信UOS</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=981">国产操作系统</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=498">国产办公软件</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="/expert"><span> 专家在线 </span></a> </div> </li> <li class=""> <div class="layui-menu-body-title"> <a href="/knowledge"><span> 知识库 </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="/expert"><span> 专家在线 </span></a> </div> </li> <li class=""> <div class="layui-menu-body-title"> <a href="/knowledge"><span> 知识库 </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/20241108/83fd1c561a900aba1d4aa2746d912fa0.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/20241108/83fd1c561a900aba1d4aa2746d912fa0.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 = "30628"; //如果你是采用模版自带的编辑器，你需要开启以下语句来解析。 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 = "30628"; $.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=30628&size=230'>" }); } </script> </body> </html>