fscreen：更方便的全屏切换模块
<style>.art > p { margin: 12px 0; font: normal 18px/24px sans-serif; }
.art mark { padding: 2px 6px; background: lightblue; }
#tz {margin: auto;width: 800px;height: 400px;background: url('https://638183.freep.cn/638183/t22/webp/dmxf1.webp') no-repeat center/cover;position: relative;}
#btnFs {position: absolute;left: 48%;top: 20px;padding: 6px;background: green;color: white;border: 2px solid white;border-radius: 8px;cursor: pointer;user-select: none;}
</style>
<div class="art">
<p>fscreen.js 以新的方式封装成ES6模块，较之之前的全屏插件封装，在易用性、简洁性方面更为理想。在JS代码层面，只需两个语句便可实现全屏功能的应用：</p>
<div id="d1"><pre id="p1">
<script type="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
fscreen.fs('tz', 'btnFs');
</script>
</pre></div>
<p>要点：</p>
<blockquote>
① 注意<script>标签内的<mark>type="module"</mark>属性及属性值，这是使用模块的关键点之一，缺它浏览器不认。<br>
② <mark>import</mark> 语句，引入模块指令，<mark>fscreen</mark>是自己定义的模块副本名称，可以使用自己希望的字眼，比如<mark>qp</mark>也是可以的。<mark>from</mark>关键字表示引用的模块来自何处，要求是具体的模块地址。<br>
③ 用自己命名的模块副本作为执行者去运行 fs() 指令构建全屏按钮、实现切换机制，<mark>fscreen.fs('tz', 'btnFs');</mark>或<mark>qp.sf('tz', 'btnFs');</mark> 都行，对应上第 ② 步的名称即可。fs() 指令需要两个参数，都是元素的id，用小角引号分别将其包裹起来：一个是要设置可以全屏呈现的元素（比如帖子的容器），另一个是切换全屏的按钮。<br>
* 补充说明一下全屏切换按钮，建议使用 div、span、p 等HTML元素，需要自己设计样式。fscreen模块会给按钮动态改变内部文本，共四个字。
</blockquote>
<p>下面给一个应用实例，代码附后：</p>
<div id="tz">
<span id="btnFs"></span>
</div>
<p>代码：</p>
<div id="d2"><pre id="p2">
<style>
#tz {
margin: auto;
width: 800px;
height: 400px;
background: url('https://638183.freep.cn/638183/t22/webp/dmxf1.webp') no-repeat center/cover;
position: relative;
}
#btnFs {
position: absolute;
left: 48%;
top: 20px;
padding: 6px;
background: green;
color: white;
border: 2px solid white;
border-radius: 8px;
cursor: pointer;
user-select: none;
}
</style>
<div id="tz">
<span id="btnFs"></span>
</div>
<script type="module">
import qp from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
qp.fs('tz','btnFs');
</script>
</pre></div>
</div>
<script type="module">
import qp from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(d1, p1);
hlight.hl(d2, p2);
qp.fs('tz','btnFs');
</script>
ES6开始引入模块，模块用 export 输出指定对象，前台用 import 引入模块。
模块能使开发协作更具协同性：个人只需做好自己负责的部分，无须担心变量、函数的命名会和其他的模块雷同。模块对于代码复用也更方便、简洁。
已上传的模块，本地做前台测试无障碍。但是，如果想自己写模块或修改他人写的模块，本地测试需要运行虚拟Web服务，且以虚拟地址运行前台文件。虚拟web服务Windows很容易实现，用IIS，也可以考虑安装第三方虚拟web服务程序。 又是一个新的全屏模式，黑黑太棒了{:4_199:} 这个全屏按钮还是触动帖子才出现的。这个还能使用自己定义的模块副本名称，这个好，可以自己随便命名了{:4_173:} 马黑黑 发表于 2024-10-31 12:33
ES6开始引入模块，模块用 export 输出指定对象，前台用 import 引入模块。
模块能使开发协作更具协同性 ...
这个就很好啊，自己没本事改，也就不用改完测试什么的了{:4_173:} 慢慢体会，问好先生！ 小文 发表于 2024-10-31 14:40
慢慢体会，问好先生！
晚上好 红影 发表于 2024-10-31 13:54
这个就很好啊，自己没本事改，也就不用改完测试什么的了
应该说，模块比插件简单，它就是和基本的web页所使用的JS一样，仅在前面或后面加入 export 相关语句 红影 发表于 2024-10-31 13:46
这个全屏按钮还是触动帖子才出现的。这个还能使用自己定义的模块副本名称，这个好，可以自己随便命名了{:4_ ...
核心代码还是原来插件的代码，只是剥离了一些东东，比如样式，交由使用者自己设计，模块仅做JS该做的事情，比如动态改变内部文本、点击交互等 今天看了这个全屏代码的升级版，的确更好理解也更顺手还更有个性，颜值也可以更高。{:4_173:} 马黑黑 发表于 2024-10-31 12:33
ES6开始引入模块，模块用 export 输出指定对象，前台用 import 引入模块。
模块能使开发协作更具协同性 ...
个人只需做好自己负责的部分，无须担心变量、函数的命名会和其他的模块雷同。
这个背后一定做了不少工作吧。。
反正只要前台看着简洁，就是白老师把后台工作量全部揽去了。。{:4_173:} 花飞飞 发表于 2024-10-31 20:29
个人只需做好自己负责的部分，无须担心变量、函数的命名会和其他的模块雷同。
这个背后一定做了不少工作 ...
模块一般都是小巧的，多数吧 花飞飞 发表于 2024-10-31 20:27
今天看了这个全屏代码的升级版，的确更好理解也更顺手还更有个性，颜值也可以更高。
颜值是自己去弄的，这个模块不管容貌方面的事情 马黑黑 发表于 2024-10-31 20:38
模块一般都是小巧的，多数吧
{:4_173:}少而精的代码要完成这么大的工作量，那必须是巧思之后的结果 马黑黑 发表于 2024-10-31 20:39
颜值是自己去弄的，这个模块不管容貌方面的事情
这是买了手机穿什么手机壳看个人喜好的节奏。。{:4_173:}灵活 花飞飞 发表于 2024-10-31 20:56
少而精的代码要完成这么大的工作量，那必须是巧思之后的结果
那不是的。会JS的，都可以做模块 花飞飞 发表于 2024-10-31 20:57
这是买了手机穿什么手机壳看个人喜好的节奏。。灵活
做个按钮其实也是基本功，不包办了 马黑黑 发表于 2024-10-31 21:13
那不是的。会JS的，都可以做模块
{:4_173:}这个会JS必须是真功夫 马黑黑 发表于 2024-10-31 21:14
做个按钮其实也是基本功，不包办了
嗯哪，每个人的个性不同，做贴子需要这样灵活的设计功能。。 马黑黑 发表于 2024-10-31 19:18
核心代码还是原来插件的代码，只是剥离了一些东东，比如样式，交由使用者自己设计，模块仅做JS该做的事情 ...
这样更好，不但有封装的简便，还给了使用者充分的发挥空间{:4_187:}