React快速上手开发.pdf-书籍-知识库

0 0 0

React快速上手开发.pdf

放个屁崩死你

发布于 1天前 140 0

我用夸克网盘分享了「 React快速上手开发.pdf」，点击链接即可保存。打开「夸克APP」在线查看，支持多种文档格式转换。

作者: [保加利亚] Stoyan Stefanov 出版社: 人民邮电出版社译者: 张俊达出版年: 2017-3 页数: 208 定价: 49.00元装帧: 平装丛书: 图灵程序设计丛书·Web开发系列 ISBN: 9787115447739

内容简介

本书旨在帮你掌握Facebook的开源技术React，迅速建立富Web应用，构建组件并将其组织成可维护的大型应用程序。解开Web应用开发之谜，从了解React基本原理开始。 * 设置React并编写第一个Hello World应用 * 创建并使用自定义React组件以及通用DOM组件 * 构建一个可以编辑、排序、搜索和导出内容的数据表格组件 * 使用JSX语法扩展作为调用函数的替代选择 * 设置一个帮你集中注意力于React上的简单构建过程 * 构建一个可以将数据存储在客户端的完整自定义应用 * 在应用规模增长时使用ESLint、Flow和Jest等工具检查并测试代码 * 使用Flux管理组件间的通信

作者简介

作者简介： Stoyan Stefanov Facebook开发工程师，图像优化工具smush.it的作者，性能优化工具YSlow2.0的架构师。曾多次在Velocity等技术大会上发表过演讲。另著有《JavaScript模式》和《JavaScript面向对象编程指南》，还为《高性能网站建设进阶指南》和《高性能JavaScript》贡献过内容。个人站点是http://phpied.com。译者简介：张俊达毕业于华南理工大学，前端开发工程师，现任职于迅雷，主要负责移动Web开发工作。关注前端领域的新技术，乐于分享。

网友热评

AndyYao: 整本书简洁的介绍了 React 的基础知识，及其的生态圈谢小漫: 还在摸索阶段，看得还行。手把手教学。还需要阅读其他的react书。再还没借到其他书籍时，二刷本书。 feiandxs: 现在看属实一般，但在当年这本书应该是对初学者极有用的工具书

图书目录

译者序　　xiii 前言　　xv 第1章　HelloWorld　　1 1.1　设置　　1 1.2　HelloReactWorld　　2 1.3　刚才发生了什么　　4 1.4　React.DOM.*　　4 1.5　特殊DOM属性　　7 1.6　ReactDevTools浏览器扩展　　8 1.7　下一步：自定义组件　　9 第2章　组件的生命周期　　10 2.1　基础　　10 2.2　属性　　12 2.3　propTypes　　13 2.4　state　　16 2.5　带状态的文本框组件　　16 2.6　关于DOM事件的说明　　19 2.6.1　传统的事件处理　　20 2.6.2　React的事件处理　　21 2.7　props与state　　21 2.8　在初始化state时使用props：一种反模式　　22 2.9　从外部访问组件　　22 2.10　中途改变属性　　24 2.11　生命周期方法　　25 2.12　生命周期示例：输出日志记录　　26 2.13　生命周期示例：使用mixin　　28 2.14　生命周期示例：使用子组件　　30 2.15　性能优化：避免组件更新　　32 2.16　PureRenderMixin　　34 第3章　Excel：一个出色的表格组件　　37 3.1　构造数据　　37 3.2　表头循环　　38 3.3　消除控制台的警告信息　　40 3.4　添加内容　　41 3.5　排序　　44 3.6　排序的视觉提示　　46 3.7　编辑数据　　47 3.7.1　可编辑单元格　　48 3.7.2　输入字段的单元格　　50 3.7.3　保存　　50 3.7.4　结论与虚拟DOMDiff算法　　51 3.8　搜索　　52 3.8.1　状态与界面　　54 3.8.2　筛选内容　　55 3.8.3　如何改进搜索功能　　57 3.9　即时回放　　58 3.9.1　如何改进回放功能　　59 3.9.2　有另一种实现方法吗　　59 3.10　下载表格数据　　59 第4章　JSX　　62 4.1　HelloJSX　　62 4.2　转译JSX　　63 4.3　Babel　　64 4.4　客户端　　64 4.5　关于JSX转换　　66 4.6　在JSX中使用JavaScript　　68 4.7　在JSX中使用空格　　69 4.8　在JSX中使用注释　　70 4.9　HTML实体　　71 4.10　展开属性　　73 4.11　在JSX中返回多个节点　　75 4.12　JSX和HTML的区别　　77 4.12.1　class和for属性不能用了吗　　77 4.12.2　style属性值是一个对象　　77 4.12.3　闭合标签　　78 4.12.4　用驼峰法命名属性　　78 4.13　JSX和表单　　78 4.13.1　onChange处理器　　78 4.13.2　value和defaultValue的区别　　79 4.13.3　的值　　79 4.13.4　<select>的值　　80 4.14　使用JSX实现Excel组件　　82 第5章　为应用开发做准备　　83 5.1　一个模板应用　　83 5.1.1　文件和目录　　84 5.1.2　index.html　　85 5.1.3　CSS　　86 5.1.4　JavaScript　　86 5.1.5　更现代化的JavaScript　　86 5.2　安装必备工具　　89 5.2.1　Node.js　　90 5.2.2　Browserify　　90 5.2.3　Babel　　90 5.2.4　React相关　　91 5.3　开始构建　　91 5.3.1　转译JavaScript　　91 5.3.2　打包JavaScript　　92 5.3.3　打包CSS　　92 5.3.4　大功告成　　92 5.3.5　Windows版本　　93 5.3.6　在开发过程中构建　　93 5.4　发布　　94 5.5　更进一步　　95 第6章　构建应用　　96 6.1　Whinepadv.0.0.1　　96 6.1.1　基本设置　　97 6.1.2　开始编写代码　　97 6.2　组件　　99 6.2.1　设置　　99 6.2.2　组件发现工具　　100 6.2.3　<Button>组件　　101 6.2.4　Button.css　　102 6.2.5　Button.js　　103 6.2.6　表单　　106 6.2.7　<Suggest>　　106 6.2.8　<Rating>组件　　109 6.2.9　<FormInput>“工厂组件”　　112 6.2.10　<Form>　　115 6.2.11　<Actions>　　117 6.2.12　对话框　　119 6.3　应用配置　　121 6.4　<Excel>：改进的新版本　　123 6.5　<Whinepad>　　131 6.6　总结　　134 第7章　lint、Flow、测试与复验　　136 7.1　package.json　　136 7.1.1　配置Babel　　137 7.1.2　脚本　　137 7.2　ESLint138 7.2.1　安装　　138 7.2.2　运行　　138 7.2.3　规则列表　　140 7.3　Flow　　140 7.3.1　安装　　141 7.3.2　运行　　141 7.3.3　注册类型检查　　141 7.3.4　修复<Button>　　142 7.3.5　app.js　　144 7.3.6　关于props和state类型检查的更多内容145 7.3.7　导出/导入类型　　147 7.3.8　类型转换　　148 7.3.9　invariant　　148 7.4　测试　　150 7.4.1　安装　　150 7.4.2　首个测试　　151 7.4.3　首个React测试　　152 7.4.4　测试<Button>组件　　153 7.4.5　测试<Actions>组件　　157 7.4.6　更多模拟交互　　159 7.4.7　测试完整的交互　　160 7.4.8　代码覆盖率　　163 第8章　Flux　　165 8.1　理念　　166 8.2　回顾Whinepad　　166 8.3　Store　　167 8.3.1　Store事件　　169 8.3.2　在<Whinepad>中使用Store　　170 8.3.3　在<Excel>中使用Store　　173 8.3.4　在<Form>中使用Store　　174 8.3.5　界定　　174 8.4　Action　　175 8.4.1　CRUDAction　　175 8.4.2　搜索与排序　　176 8.4.3　在<Whinepad>中使用Action　　178 8.4.4　在<Excel>中使用Action　　179 8.5　Flux回顾181 8.6　immutable　　182 8.6.1　immutable存储数据　　183 8.6.2　immutable数据操作　　184 关于作者　　187 关于封面　　187</p>  <ul id="tag" data-tid="4977" > </ul>  </div> <div class="d-flex justify-content-center"><img src="upload/attach/pans/1742019779.webp" class="rounded" alt= React快速上手开发.pdf"网盘下载"></div><p class="mt-3">版权说明</p><p>1、本站不保存、不存储任何实质资源，以上二维码指向为网盘资源链接，其内容归对应版权方所有</br>2、如有侵犯版权的情况，请点击下面举报/反馈按钮反馈或发送邮件76556431@qq.com投诉说明情况</br>3、我们核实后将第一时间删除相关页面内容，谢谢理解和配合</p> </div> <div class="card-footer"> <div class="plugin d-flex justify-content-center"> <style> .haya-favoriter { position: relative; } .haya-favorite-show-users { position: absolute; top: 5px; z-index: 100; width: 100%; } .haya-favorite-show-users .haya-favorite-users { max-height: 250px; overflow-y: auto; } </style> <div class="haya-favoriter px-2"> <span class="btn-group haya-favoriter-info" role="group"> <button class="btn btn-outline-secondary js-haya-favorite-tip" data-tid="4977" title="收藏本帖"> <i class="icon icon-star-o" aria-label="收藏本帖"></i> <span class="haya-favorite-btn">收藏</span> </button> <button class="btn btn-outline-secondary js-haya-favorite-show-users" data-tid="4977" title="点击查看收藏详情"> <span class="haya-favorite-user-count">0</span> </button> </span> </div> </div> <div class="haya-favoriter"> <div class="text-center d-none haya-favorite-show-users"> <div class="text-left m-0 p-0 col-md-6 mx-auto"> <div class="modal-content"> <div class="modal-header small"> <b>收藏的用户（<span class="haya-favorite-user-count">0</span>）</b> <span class="close small p-3 haya-favorite-close js-haya-favorite-show-users" data-dismiss="dodal">X</span> </div> <div class="modal-body p-3"> <div class="text-muted haya-favorite-users small break-all"> <div class="text-muted">正在加载信息~</div> </div> </div> </div> </div> </div> </div> </div> </div> <style> .related-ul{ margin-bottom:2px; } .related-ul li{line-height: 28px;} .related-date{float: right;color: #666;} </style> <div class="card card-postlist"> <div class="card-body"> <div class="card-title"> <div class="d-flex justify-content-between"> <strong>相关帖子</strong> </div> </div> <ul class="list-unstyled related-ul"> <li> <a href="thread-4481.htm">25春典中点四年级英语下（KP版）.pdf</a> <span class="related-date">3天前</span> </li> <li> <a href="thread-1587.htm">洪恩小小幼儿英语 1.1GB（共12个项目）</a> <span class="related-date">22天前</span> </li> <li> <a href="thread-5360.htm">[No.25] 快捷英语时文阅读理解(小升初).pdf</a> <span class="related-date">21小时前</span> </li> <li> <a href="thread-2729.htm">全新英语听力-初中 739.3MB（共148个pdf+mp3）</a> <span class="related-date">17天前</span> </li> <li> <a href="thread-3756.htm">新人教PEP英语资料汇总 24.5MB（共8个项目）</a> <span class="related-date">10天前</span> </li> <li> <a href="thread-5376.htm">[No.1] 快捷英语时文阅读与热点写作(中考).pdf</a> <span class="related-date">21小时前</span> </li> <li> <a href="thread-554.htm">怪怪拼音历险记4.6GB（共50个项目）</a> <span class="related-date">28天前</span> </li> <li> <a href="thread-4638.htm">步步陷落（51集）</a> <span class="related-date">2天前</span> </li> <li> <a href="thread-3981.htm">思维造物《趣味动画单词》 6.9GB（共261个项目）</a> <span class="related-date">8天前</span> </li> <li> <a href="thread-5285.htm">【童书】不一样的卡梅拉</a> <span class="related-date">23小时前</span> </li> <li> <a href="thread-160.htm">数学母题-解题大招-举一反三-小学一到六年级616.1MB</a> <span class="related-date">1月前</span> </li> <li> <a href="thread-5658.htm">1-6年级下册「数学阳光同学周周提优」83.2MB（共6个项目）</a> <span class="related-date">2小时前</span> </li> <li> <a href="thread-4255.htm">25春典中点五年级科学下（JK版）.pdf</a> <span class="related-date">5天前</span> </li> </ul> </div> </div> <div class="d-flex justify-content-between"> <div style="width: 49%;"> <div class="card card-thread"> <div class="card-body"> <div class="updown"> <a href="thread-4976.htm"><div class="text-muted mb-2"><span class="mr-3"><i class="fas fa-arrow-left"></i></span>上一篇</div><div class="text-truncate"> Flask Web开发：基于Python的Web应用开发实战.第2版.pdf</div></a> </div> </div> </div> </div> <div style="width: 49%;"> <div class="card card-thread"> <div class="card-body"> <div class="updown"> <a href="thread-4978.htm"><div class="text-muted text-right mb-2">下一篇<span class="ml-3"><i class="fas fa-arrow-right"></i></span></div><div class="text-truncate"> 程序员的算法趣题.pdf</div></a> </div> </div> </div> </div> </div> <style> .log-list { margin: 10px 0; padding: 0; list-style: none; } .log-list { overflow: auto; } .log-list li { width: 60px; float: left; text-align: center; margin-bottom: 10px; } .log-list .logavatar { margin: 10px; } .log-list .log-name { font-size: 12px; line-height: 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> <div class="card" style="margin-top:10px;"> <div class="card-body" style="padding-bottom:0px;"> <div class="card-title"> <b>这些人下载过</b> (<span class="posts">12</span>) <ul class = "log-list"> <li title=""> <a href="user-374.htm" class="logavatar"> <img class="avatar-3" src="./plugin/xn_avatar/view/img/45.png"> </a> <div class = "log-name text-muted font-weight-bold">亲爱的你想多了</div> </li> <li title=""> <a href="user-797.htm" class="logavatar"> <img class="avatar-3" src="./plugin/xn_avatar/view/img/20.png"> </a> <div class = "log-name text-muted font-weight-bold">购买一身酷</div> </li> <li title=""> <a href="user-1058.htm" class="logavatar"> <img class="avatar-3" src="./plugin/xn_avatar/view/img/6.png"> </a> <div class = "log-name text-muted font-weight-bold">国民妹妹</div> </li> <li title=""> <a href="user-1109.htm" class="logavatar"> <img class="avatar-3" src="./plugin/xn_avatar/view/img/23.png"> </a> <div class = "log-name text-muted font-weight-bold">斜刘海</div> </li> <li title=""> <a href="user-567.htm" class="logavatar"> <img class="avatar-3" src="./plugin/xn_avatar/view/img/45.png"> </a> <div class = "log-name text-muted font-weight-bold">老歌故人旧巷子</div> </li> <li title=""> <a href="user-1430.htm" class="logavatar"> <img class="avatar-3" src="./plugin/xn_avatar/view/img/11.png"> </a> <div class = "log-name text-muted font-weight-bold">刺我爱情</div> </li> <li title=""> <a href="user-168.htm" class="logavatar"> <img class="avatar-3" src="./plugin/xn_avatar/view/img/18.png"> </a> <div class = "log-name text-muted font-weight-bold">月倾城</div> </li> <li title=""> <a href="user-528.htm" class="logavatar"> <img class="avatar-3" src="./plugin/xn_avatar/view/img/40.png"> </a> <div class = "log-name text-muted font-weight-bold">鲜花宝马比不上进入你心</div> </li> <li title=""> <a href="user-181.htm" class="logavatar"> <img class="avatar-3" src="./plugin/xn_avatar/view/img/27.png"> </a> <div class = "log-name text-muted font-weight-bold">墨四溢</div> </li> <li title=""> <a href="user-278.htm" class="logavatar"> <img class="avatar-3" src="./plugin/xn_avatar/view/img/22.png"> </a> <div class = "log-name text-muted font-weight-bold">难忘记</div> </li> <li title=""> <a href="user-170.htm" class="logavatar"> <img class="avatar-3" src="./plugin/xn_avatar/view/img/16.png"> </a> <div class = "log-name text-muted font-weight-bold">风听海</div> </li> <li title=""> <a href="user-361.htm" class="logavatar"> <img class="avatar-3" src="./plugin/xn_avatar/view/img/37.png"> </a> <div class = "log-name text-muted font-weight-bold">不讲究</div> </li> </ul> </div> </div> </div> <div class="card card-postlist" id="comments"> <div class="card-header"> <div class="d-flex justify-content-between" > <div> <i class="fas fa-comment-dots text-primary"></i> <b>最新回复</b> (<span class="posts">0</span>) <a class="collapse_toggle" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> <i class="fas fa-angle-down"></i> </a> </div> <div> </div> </div> </div> <div class="card-body py-1 collapse show" id="collapseExample"> <ul class="list-unstyled postlist"> <div class="text-center my-5 no-comment post"> <i class="far fa-comments h1 text-gray"></i> <p class="text-gray mt-1">暂无评论</p> </div> </ul> </div> </div> <div class="card"> <div class="card-body text-center"> <p>请先登录后发表评论！</p> <div class="mt-3"> <a href="user-login.htm" class="btn btn-primary"><i class="fas fa-user-alt"></i> 登录</a> <a href="user-create.htm" class="btn btn-outline-primary"><i class="fas fa-user-plus"></i> 注册</a> </div> </div> </div> <div class="d-none threadlist"><input type="checkbox" name="modtid" value="4977" checked /></div> <a role="button" class="btn btn-secondary btn-block xn-back col-lg-6 mx-auto mb-3" href="javascript:history.back();">返回</a> </div> <div class="col-lg-3 d-none d-lg-block aside">  <div class="card card-user-info overflow-hidden"> <div class=" rounded-0 mb-0 index-siteInfo-bg" style="background-image: url('./plugin/zaesky_theme_light/view/img/bgimg/bg-0.png');" > </div> <div class="card-body py-4"> <div class="text-center " style="margin-top: -54px;" > <a href="user-984.htm" tabindex="-1"> <img class="avatar-4" src="./plugin/xn_avatar/view/img/16.png" style="border: 2px solid var(--white);"> </a> <div> <div class="font-weight-bold my-3"> <a href="user-984.htm">放个屁崩死你</a> </div> <div class="mt-2"><span class="badge badge-primary mr-1">UID:984</span> <span class="badge badge-info">一级用户组</span> </div> <div class="mt-3"> </div> </div> </div> </div> <div class="card-footer d-flex justify-content-around"> <table class="w-100 small"> <tr align="center" class="justify-content-around d-flex"> <td> <span class="text-muted">主题数</span><br> <b>8</b> </td> <td> <span class="text-muted">帖子数</span><br> <b>0</b> </td> <td class="d-none"> <span class="text-muted">精华数</span><br> <b>0</b> </td> <td class="d-none"> <span class="text-muted">注册排名</span><br> <b>984</b> </td> <td> <span class="text-muted">粉丝数</span><br> <b>0</b> </td> </tr> </table> </div> </div>  <div id="taghot" class="card"> <h5><span class="icon-tags"></span>TAG</h5> <ul> <li><a href='tag-2.htm'>英语</a></li> <li><a href='tag-68.htm'>试卷</a></li> <li><a href='tag-7.htm'>数学</a></li> <li><a href='tag-36.htm'>合集</a></li> <li><a href='tag-4.htm'>数学竞赛</a></li> <li><a href='tag-10.htm'>高考</a></li> <li><a href='tag-59.htm'>中考</a></li> <li><a href='tag-15.htm'>小学</a></li> <li><a href='tag-21.htm'>高考物理</a></li> <li><a href='tag-28.htm'>语文</a></li> <li><a href='tag-32.htm'>电脑报</a></li> <li><a href='tag-47.htm'>高中</a></li> <li><a href='tag-17.htm'>学霸笔记</a></li> <li><a href='tag-33.htm'>学位英语</a></li> <li><a href='tag-41.htm'>寒假作业</a></li> <li><a href='tag-66.htm'>寓言故事</a></li> <li><a href='tag-9.htm'>历史</a></li> <li><a href='tag-44.htm'>课外经典书目</a></li> <li><a href='tag-51.htm'>完形填空</a></li> <li><a href='tag-94.htm'>地理</a></li> </ul> </div>  <div class="card"> <div class="card-header"> <span class="card-title">作者最近主题</span> </div> <div class="card-body py-2"> <div class="site-top"> <ul class="site-list-ul"> <li > <span class="badge badge-pill mr-2 jb-pink ">1</span><a href="thread-5753.htm" style='font-size:12px;color:#343a40;'>《金牌每课通》语文6年级下册（RJ）.pdf</a> </li> <li > <span class="badge badge-pill mr-2 jb-pink ">2</span><a href="thread-4977.htm" style='font-size:12px;color:#343a40;'> React快速上手开发.pdf</a> </li> <li > <span class="badge badge-pill mr-2 jb-pink ">3</span><a href="thread-4527.htm" style='font-size:12px;color:#343a40;'>凤落尘烟（84集）</a> </li> <li > <span class="badge badge-pill mr-2 badge-secondary ">4</span><a href="thread-4418.htm" style='font-size:12px;color:#343a40;'>百炼成神＆修罗仙神传＆斗罗大帝（83集）明川＆伍怡桥</a> </li> <li > <span class="badge badge-pill mr-2 badge-secondary ">5</span><a href="thread-4342.htm" style='font-size:12px;color:#343a40;'>黑色幽默（84集）</a> </li> <li > <span class="badge badge-pill mr-2 badge-secondary ">6</span><a href="thread-1773.htm" style='font-size:12px;color:#343a40;'>专题05 排列组合与二项式定理（教师卷）- 十年（2015-2024）高考真题数学分项汇编（全国通用）.docx</a> </li> <li > <span class="badge badge-pill mr-2 badge-secondary ">7</span><a href="thread-1394.htm" style='font-size:12px;color:#343a40;'>朕与她（64集）陈添祥＆李柯以</a> </li> <li > <span class="badge badge-pill mr-2 badge-secondary ">8</span><a href="thread-608.htm" style='font-size:12px;color:#343a40;'>小学数学北师大全品文教课件教案（1-6上下册）2GB（共252个文档）</a> </li> </ul> </div> </div> </div><div class="card"> <div class="card-header"> <span class="card-title">版块热门</span> </div> <div class="card-body py-2"> <div class="site-top"> <ul class="site-list-ul"> <li> <span class="badge badge-pill mr-2 jb-red ">1</span><a href="thread-1.htm" style='font-size:12px;color:#343a40;'>【经典书籍】《新概念英语》4册PDF+视频 17.2GB</a> </li> <li> <span class="badge badge-pill mr-2 jb-red ">2</span><a href="thread-19.htm" style='font-size:12px;color:#343a40;'>国家地理杂志美国版 1888~2023合集珍藏版 55.5GB（共1578个项目）</a> </li> <li> <span class="badge badge-pill mr-2 jb-red ">3</span><a href="thread-50.htm" style='font-size:12px;color:#343a40;'>国家中小学智慧教育平台电子教材全套共2299个项目 44GB</a> </li> <li> <span class="badge badge-pill mr-2 badge-secondary ">4</span><a href="thread-30.htm" style='font-size:12px;color:#343a40;'>《电脑报》（2012-2024）合集珍藏版 17.6GB（共660个项目）</a> </li> <li> <span class="badge badge-pill mr-2 badge-secondary ">5</span><a href="thread-27.htm" style='font-size:12px;color:#343a40;'>21世纪学生英文报 (2019-2024) 19.4GB（共1489个项目）</a> </li> <li> <span class="badge badge-pill mr-2 badge-secondary ">6</span><a href="thread-42.htm" style='font-size:12px;color:#343a40;'>中国国家地理期刊2003-2024 珍藏版合集共292个项目 58.4GB</a> </li> <li> <span class="badge badge-pill mr-2 badge-secondary ">7</span><a href="thread-53.htm" style='font-size:12px;color:#343a40;'>《故事会》大全 1955-2024 合集 622个项目 16.5GB</a> </li> <li> <span class="badge badge-pill mr-2 badge-secondary ">8</span><a href="thread-28.htm" style='font-size:12px;color:#343a40;'>《电脑报》2024年全50期合集 511.7MB（共50个项目）</a> </li> <li> <span class="badge badge-pill mr-2 badge-secondary ">9</span><a href="thread-64.htm" style='font-size:12px;color:#343a40;'>七本易经相关书籍汇总 7 mobi 2.4MB</a> </li> <li> <span class="badge badge-pill mr-2 badge-secondary ">10</span><a href="thread-55.htm" style='font-size:12px;color:#343a40;'>《语文高效学习法》原人大附中语文名师[pdf+epub]</a> </li> </ul> </div> </div> </div> </div> </div> </div> </main> <footer class="text-muted small bg-white py-4 mt-3" id="footer"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-2"> <div class="d-flex justify-content-center align-items-center my-3"> <img src="view/img/logo.png" class="logo-4 footer-site-icon"> </div> </div> <div class="col-lg-7 text-center text-lg-left"> <div class="h5"> 知识库 </div> <div class="h6 text-muted"> 学无止境，免费学习资源下载分享论坛 </div> <hr> <div> Powered by <a href="#" target="_blank" class="text-muted"><b>Xiuno BBS <span>4.0.4</span></b></a> </div> </div> <div class="col-lg-3 text-center text-lg-right contact "> <ul class="list-inline my-3"> <a href="http://wpa.qq.com/msgrd?v=3&uin=76556431&site=qq&menu=yes" target="_blank" role="button" class="text-muted" data-toggle="tooltip" data-placement="top" title="QQ"><li class="list-inline-item bg-white rounded contact-item"><i class="fab fa-qq"></i></li></a> <a href="mailto:76556431@qq.com" data-toggle="tooltip" data-placement="top" title="邮箱" class="text-muted ml-3"><li class="list-inline-item bg-white rounded contact-item"><i class="fas fa-envelope"></i></li></a> </ul> </div> </div> </div> </footer>  <script src="lang/zh-cn/bbs.js?1.0"></script> <script src="view/js/jquery-3.1.0.js?1.0"></script> <script src="view/js/popper.js?1.0"></script> <script src="view/js/bootstrap.js?1.0"></script> <script src="view/js/xiuno.js?1.0"></script> <script src="view/js/bootstrap-plugin.js?1.0"></script> <script src="view/js/async.js?1.0"></script> <script src="view/js/form.js?1.0"></script> <script> var debug = DEBUG = 0; var url_rewrite_on = 1; var forumarr = { "1": "幼儿", "2": "小学", "3": "初中", "4": "高中", "5": "大学", "6": "考研", "7": "考公", "8": "考证", "9": "书籍", "10": "课程", "11": "娱乐", "13": "站务", "12": "求助" }; var fid = 9; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; // 水印图片 / watermark image </script> <script src="view/js/bbs.js?1.0"></script> <script> $(document).on('click', '.js-haya-follow-tip', function() { $.alert("登录后才可以关注~"); }); </script> <script src="plugin/tt_credits/view/js/tt_credits.js?1.0"></script><script> var jmsign = $("#sign_mobile"); jmsign.on("click",function(){ $.xpost(xn.url("my-sign"),"",function(code,message){ if(code == 0){ cocoMessage.info(message, 5000); $('.sign_alert').fadeOut("slow"); }else{ cocoMessage.warning(message, 5000); } }); }); </script><script> // 版主管理：精华 // $('.mod-button button.digest').on('click', function() { // var modtid = $('input[name="modtid"]').checked(); // if(modtid.length == 0) return $.alert(lang.please_choose_thread); // var radios = xn.form_radio('digest', {"0": "取消精华", "1": "推荐","2": "精华", "3": "热门"}); // $.confirm("设置主题为精华", function() { // var tids = xn.implode('_', modtid); // var digest = $('input[name="digest"]').checked(); // var postdata = {digest: digest}; // $.xpost(xn.url('mod-digest-'+tids), postdata, function(code, message) { // if(code != 0) return $.alert(message); // $.alert(message).delay(1000).location(''); // }); // }, {'body': '<p>'+"精华等级"+'：'+radios+'</p>'}); // }) </script><script> function xn_read_unread(tids, tid) { // 当前时间 var time = xn.time(); // 多长时间内的主题为最新主题 var time_range = 86400 * 3; // 三天内的 tids var recent_tids = $.pdata('recent_tids') || {}; // 已读的 tids var view_tids = $.pdata('view_tids') || {}; // 提取列表页的 tid function fetch_recent_tids(tids) { var changed = false; $.each(tids, function(tid, last_date) { if(time - last_date < time_range) { recent_tids[tid] = last_date; changed = true; } }); if(changed) $.pdata('recent_tids', recent_tids); } // 清理最近的 tid function gc_recent_tids() { var changed = false; $.each(recent_tids, function(tid, last_date) { if(time - last_date > time_range) { delete recent_tids[tid]; changed = true; } }); if(changed) $.pdata('recent_tids', recent_tids); } function gc_view_tids() { var changed = false; $.each(view_tids, function(tid, last_date) { if(!recent_tids[tid]) { delete view_tids[tid]; changed = true; } }); if(changed) $.pdata('view_tids', view_tids); } function save_view_tid(tid) { if(!recent_tids[tid]) return; view_tids[tid] = time; $.pdata('view_tids', view_tids); } if(tids) { fetch_recent_tids(tids); gc_recent_tids(); //gc_view_tids(); } if(tid) save_view_tid(tid); // 三天内的主题标记为已读 // 遍历主题列表，标记最近的，并且未读的为加粗 $('.thread').each(function() { var jthis = $(this); var tid = jthis.attr('tid') || jthis.data('tid'); if(recent_tids[tid] && recent_tids[tid] > xn.intval(view_tids[tid])) { jthis.find('.subject').addClass('font-weight-bold'); } }); } </script><script src="plugin/zaesky_theme_light/view/js/coco-message.min.js"></script>  <script type="text/javascript"> $(function () { $('[data-toggle="tooltip"]').tooltip() }); $(function () { $('[data-toggle="popover"]').popover() }) // var sidebarjs = new SidebarJS(); </script> <style> @media screen and (max-width: 992px) { #footer{margin-bottom: 3rem}; } </style> <div class="position-fixed w-100 header_fiexd thread-nav d-lg-none"> <div class="d-flex mt-2 px-2"> <a href="javascript:;" class="flex-grow-1 thread_comment_input text-muted" > <em>请先登录后发表评论！</em> </a> <div class="thread_btm_func d-flex" style="margin-top: -8px;"> <div class="px-3"> <a href="#comments" class=" position-relative"><i class="iconfont icon-huida"></i><span class="thread_nav_pop_count"></span></a> </div> <div class="px-3"> <a href="javascript:;" class="position-relative add_func js-haya-favorite-add" data-tid="4977"><i class="iconfont icon-tiezishoucang"></i><span class="haya-favorite-user-count thread_nav_pop_count"></span></a> </div> <div class="px-3"> <a href="javascript:;" class="position-relative add_func js-haya-post-like-thread-add" data-pid="5015"><i class="iconfont icon-zan"></i><span class="thread_nav_pop_count haya-post-like-thread-user-count"></span> </a> </div> </div> </div> </div> <script src="https://cdn.staticfile.org/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script> <script type="text/javascript" charset="utf-8"> $(function(){ $('.message img').each(function(){ $(this).addClass("lazy img-responsive"); $(this).attr("data-original",$(this).attr("src")).removeAttr("src"); }); $(".message img.lazy").lazyload({placeholder: "plugin/zaesky_theme_light/view/img/loading.gif",effect: "fadeIn"}); }); $(function(){ $('.pic_box img').each(function(){ $(this).addClass("lazy img-responsive"); $(this).attr("data-original",$(this).attr("src")).removeAttr("src"); }); $(".pic_box img.lazy").lazyload({placeholder: "plugin/zaesky_theme_light/view/img/loading.gif",effect: "fadeIn"}); }); $(function(){ $('.left_img_box img').each(function(){ $(this).addClass("lazy img-responsive"); $(this).attr("data-original",$(this).attr("src")).removeAttr("src"); }); $(".left_img_box img.lazy").lazyload({placeholder: "plugin/zaesky_theme_light/view/img/loading.gif",effect: "fadeIn"}); }); </script> <script> $('.add_func').on('click',function(){ cocoMessage.error("请先登录后操作！", 3000); }) </script> <script src="plugin/zaesky_theme_light/view/js/GoToTop.min.js"></script> <div class="goTop text-center shadow-sm text-muted" id="js-go_top" style="transform: translate(60px,0px);"><i class="fas fa-arrow-alt-circle-up"></i></div> <script> //示例 $('#js-go_top').gotoTop({ offset : 100, speed : 300, animationShow : { 'transform' : 'translate(0,0)', 'transition': 'transform .5s ease-in-out' }, animationHide : { 'transform' : 'translate(60px,0)', 'transition': 'transform .5s ease-in-out' } }); </script> <script> $.each($('.thread_checkbox'),function(){ $(this).on('click',function(){ $('.thread_mod_func').css({ 'position':'fixed', 'bottom':'50px', 'left':0, 'right':0, }) $('.close_mod').removeClass('d-none') }) }) $('.close_mod').on('click',function(){ $('.thread_mod_func').css('position','relative') $('.close_mod').addClass('d-none') }) function cancelReply (){ var jthis = $('.mod_post_reply'); var tid = jthis.data('tid'); var pid = jthis.data('pid'); var jli = jthis.closest('.post'); var qusername = $('.qusername'); var jadvanced_reply = $('#advanced_reply'); var jform = $('#quick_reply_form'); var replying = $('.replying'); jli.removeClass('quote'); jform.find('input[name="quotepid"]').val(0); jadvanced_reply.attr('href', xn.url('post-create-'+tid)); qusername.text(''); replying.hide('fast'); } </script> <script type="text/javascript" src="/plugin/zaesky_theme_light/view/js/jquery.qqFace.min.js"></script> <script type="text/javascript"> $(function(){ $('.emotion').qqFace({ id : 'facebox', assign:'message', path:'plugin/zaesky_theme_light/view/img/emoicon/', emoNum: 126, }); }); </script> </body> </html> <div id="gotop"> <a href="javascript:void(0);" id="goToBottom" title="直达页尾"><i class="icon-chevron-down"></i></a> <a href="." class="hidden-sm hidden-md home" title="返回首页"><i class="icon-home"></i></a>  <a href="javascript:void(0);" id="goTopBtn" title="返回顶部"><i class="icon-chevron-up"></i></a> </div> <script>$("#goTopBtn").click(function(){$("html,body").animate({scrollTop:0},500)});$('#goToBottom').click(function(){$('html,body,.footer').animate({scrollTop:$(document).height()},900);return false;});</script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?07ee8b2aea6706203192219c18fc26db"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> $(document).on('click', '.js-haya-favorite-show-users', function() { var show_users = $(".haya-favorite-show-users"); var tid = $(this).attr("data-tid"); if (show_users.hasClass("d-none")) { show_users.fadeIn().removeClass("d-none"); if (!show_users.hasClass("favorite-users")) { show_users.addClass("favorite-users"); var url = 'thread-favorite.htm'; $.xpost(url, {'tid': tid}, function(code, msg) { if (code == 1) { show_users.find(".haya-favorite-users").html(msg); } else { show_users.removeClass("favorite-users"); haya_favorite_msg = msg || "加载信息失败~"; show_users.find(".haya-favorite-users").html(haya_favorite_msg); } }); } } else { show_users.fadeOut().addClass("d-none"); } }); $(document).on('click', '.js-haya-favorite-tip', function() { $.confirm('帖子收藏提示', function() { window.location = "user-login.htm"; }, {'body': '登录后才可以收藏帖子！点击 <b class="text-primary">确定</b> 登录。'}); }); </script> <script> $(document).on('click', '.js-haya-post-like-post-tip', function() { $.confirm('点赞提示', function() { window.location = "user-login.htm"; }, {'body': '登录后才可以点赞该回复！点击 <b class="text-primary">确定</b> 登录。'}); }); </script> <script> $(function(){ // 消息：地址栏传参实现内页跳转[分页无效] var notice_postid = window.location.hash.split("#")[1]; var notice_domid = $('.postlist .post[data-pid="'+notice_postid+'"]'); if(notice_domid.length > 0){ notice_domid.addClass('current');// var scroll_offset = notice_domid.offset().top; $("html, body").animate({scrollTop:scroll_offset}, {duration:500, easing:"swing"}); notice_domid.on('click', function(){ $(this).removeClass('current'); }) } }); </script> <script> var tiny_tid=4977; var tiny_page=1; var tiny_advanced=document.querySelector('#advanced_reply'); var tiny_quotepid=document.querySelector('input[name="quotepid"]'); // 高级回复继承 if(tiny_advanced){ tiny_advanced.setAttribute('href','javascript:;'); tiny_advanced.setAttribute('onclick','window.location.href=\'./?post-create-\'+tiny_tid+\'-0-\'+tiny_quotepid.value+\'.htm#\'+encodeURIComponent(document.querySelector(\'#message\').value);'); if(tiny_quotepid){new MutationObserver(function(){tiny_advanced.href='javascript:;';}).observe(tiny_quotepid,{attributes:true});}; }; if(document.querySelector('#newfloor')){ new MutationObserver(function(){ var tiny_last=new XMLHttpRequest(); tiny_last.open('GET','./?tiny_jump&page='+tiny_tid+'&time='+Date.parse(new Date()),true); tiny_last.onreadystatechange=function(){ if(this.readyState===4&&this.status===200&&!isNaN(this.responseText)&&this.responseText>0&&this.responseText!=tiny_page){ window.location.href=xn.url('thread-'+tiny_tid+'-'+this.responseText)+'#jump'; }; }; tiny_last.send(null); }).observe(document.querySelector('#newfloor'),{childList:true,characterData:true}); }; if(window.location.hash=='#jump'){ window.addEventListener('load',function(){ var tiny_jump=document.getElementsByClassName('post'); if(tiny_jump.item(tiny_jump.length-2)){$(window).scrollTop($(tiny_jump.item(tiny_jump.length-2)).offset().top);}; }); }; window.addEventListener("load",function(){ $(".message pre[class^=language-]").addClass("line-numbers"); $.getScript("plugin/tiny/prism/prism.js"); }); </script> <script> $(".message img").on("click",function (){ window.ViewImage && ViewImage.init('.message img'); }); </script> <script src="/plugin/xn_imgbox/hook/view-image.min.js"></script><script> xn_read_unread({"4977": "1742019779"}, 4977); </script><script> jsearch_form = $('#search_form'); jsearch_form.on('submit', function() { var keyword = jsearch_form.find('input[name="keyword"]').val(); var url = xn.url('search-'+xn.urlencode(keyword)); window.location = url; return false; }); </script> <script> $(".thread_comment_input").click(function(){ $('#comment_input').toggleClass('modal_reply_text'); $('.tip_close').toggleClass('d-none'); $('.thread_tip_text1').toggleClass('d-none'); }); var jform = $('#quick_reply_form'); var jsubmit = $('#submit'); jform.on('submit', function() { jform.reset(); jsubmit.button('loading'); var postdata = jform.serialize(); $.xpost(jform.attr('action'), postdata, function(code, message) { if (code == 0) { var s = '<ul>' + message + '</ul>'; var jli = $(s).find('li'); jli.insertAfter($('.postlist > .post').last()); jsubmit.button('reset'); $('#message').val(''); // 楼层 +1 var jfloor = $('#newfloor'); jfloor.html(xn.intval(jfloor.html()) + 1); // 回复数 +1 var jposts = $('.posts'); jposts.html(xn.intval(jposts.html()) + 1); $('.no-comment').addClass('d-none'); cocoMessage.success("评论成功！", 3000); cancelReply(); $('#comment_input').removeClass('modal_reply_text'); $('.tip_close').toggleClass('d-none'); $('.thread_tip_text1').toggleClass('d-none'); $('.quick-at').removeClass('text-warning'); location.reload(true); } else if (code < 0) { $.alert(message); jsubmit.button('reset'); } else { jform.find('[name="' + code + '"]').alert(message).focus(); jsubmit.button('reset'); } }); return false; }); // 缩放图片，适应屏幕大小。 function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); // 815 : 746; // 734 746 jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); // 734 746 var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if (!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } //var percent = xn.min(100, xn.ceil((img_width / jmessage_width) * 100)); if (img_width > jmessage_width) { if (this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { //window.open(jimg.attr('src')); }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } // 对于超宽的表格，加上响应式 function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); // 输入框自动伸缩 // var jmessage = $('#message'); // jmessage.on('focus mouseenter', function() { // if (jmessage.t) { // clearTimeout(jmessage.t); // jmessage.t = null; // } // jmessage.css('height', '8rem'); // }); // jmessage.on('blur', function() { // jmessage.t = setTimeout(function() { // jmessage.css('height', '2.5rem'); // }, 1000); // }); // 引用 / Quote $('body').on('click', '.mod_post_reply', function() { var jthis = $(this); var tid = jthis.data('tid'); var pid = jthis.data('pid'); var quser = jthis.data('quser'); var jmessage = $('#message'); var jli = jthis.closest('.post'); var qusername = $('.qusername'); var jpostlist = jli.closest('.postlist'); var jadvanced_reply = $('#advanced_reply'); var jform = $('#quick_reply_form'); var replying = $('.replying'); if(jli.hasClass('quote')) { jli.removeClass('quote'); jform.find('input[name="quotepid"]').val(0); jadvanced_reply.attr('href', xn.url('post-create-'+tid)); qusername.text(''); replying.hide('fast'); } else { jpostlist.find('.post').removeClass('quote'); jli.addClass('quote'); var s = jmessage.val(); jform.find('input[name="quotepid"]').val(pid); jadvanced_reply.attr('href', xn.url('post-create-'+tid+'-0-'+pid)); qusername.html('<a href="#'+pid+'">'+quser+'<i class="far fa-comment-dots ml-2"></i></a>'); replying.show('fast'); } jmessage.focus(); return false; }); $('li[data-active="fid-9"]').addClass('active'); </script>