整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

不用框架 2 周写一个电商网站,同济软工系前端小作业

不用框架 2 周写一个电商网站,同济软工系前端小作业引热议

个月,清华自动化系大一作业在知乎上引发热议;近日,又有网友贴出同济大学软件工程系大三的前端小作业:写一个电商网站,不能使用任何前端框架,时间为两周。有网友惊呼:现在的大学作业都这么硬核吗?

事件回顾

近日,知乎上一篇《如何看待同济大学软件工程系 2020 年大三前端小作业是不用框架 2 周写一个电商网站?》的帖子引起了热议:

https://www.zhihu.com/question/395864219

帖中附上了同济大学软件工程系大三前端作业的要求:

从贴出的文档中可以看出,老师把原本分为三次的作业合并成了一个作业。从要求上来看,这个作业的实现难度明显小于清华雷课堂,唯一的问题在于时间比较紧迫。有网友晒出了该系去年的作业,在难度上其实没有明显的差距,但去年是三次作业中每次都有两周的时间,时间更加宽裕,而今年把三个作业整合到了一起,也要求在两周内完成,时间比较紧张。这主要是因为受疫情影响一直无法开学,老师只能一股脑把三次作业整合在一起。

并非难出天际

从功能实现上来看,这项作业并没有那么难:实现一个简单的网站,功能方面需要有商品展示、用户注册登陆、添加购物车、登陆状态下结算下单、登陆状态下查询历史订单信息(无需考虑订单状态)。

不过从要求来看就有难度了,不能使用任何框架:

其次就是时间过于紧迫,只有两周的时间且这段时间内还要上课,实际上可用的时间极少。而且在前端工程化的今天,随着各框架逐渐完善,开发效率大幅度提升,用纯 HTML、CSS、JS 写网站意义并不大,而且有网友指出:

不允许使用任何前端框架,那么 webpack 自然也不能用。模块化是编程的一个很基础的思想,为什么不去培养学生的这种思想,反而直接禁用?

该作业的要求是实现一个网页,但需求并不是十分明确,而且评分标准也有些模糊,界面是否美观要看个人喜好;代码是否简洁、易懂也有些主观;操作是否简便也相对主观。不过,布置作业的老师肯定不是想让学生在两周内写出一个淘宝、京东这样的网站。

有网友贴出了去年的两个作业,一个是电影列表 Web 界面,一个是在该界面的基础上增加数据库和服务器接口,总体上来看与此次作业难度相差并不大。

虽然作业文档中表示可以参考豆瓣和 IMDb,但并不是要求学生做到像这两个网站那么复杂的页面。该网友也贴出了他自己当时提交的作业,只要实现一个简易的网页即可。

总而言之,虽然此次作业时间紧迫且不允许使用框架,但仅实现文档中所要求的功能还是可以完成的,并没有那么大的难度。

网友的看法

不同于上个月大家对“雷课堂”近乎一片倒的吐槽,这次网友们众说纷纭。有网友表示:

这个说实话不过分。两周有两周的写法,一个月有一个月的写法。用原生 JS 也是合理要求。有助于打好基础。能力有限的同学写个简单的,大神自己撸个 MVVM 出来也可以。这个跟清华雷课堂是完全不同性质的。大三的同学应该有能力完成。

提出这个问题的同学一开始表示:

我也是你济软院的,我大二小学期用了大概一个月写过一个类似的,当然是用了框架的,前端 Vue+ElementUI,后端 Express。去掉考试周占用的时间,至少有二十天的,而且那段时间的强度不低于 996。对这个项目的难度,我是有体会的。这样的一个项目,在不少学校,是完全可以作为毕业设计来做的。

后来他又补充回答说是自己把这个作业想复杂了,的确只搞出最简单的能用的凑合看的不难。但他强调:

我的想法是,在没有一个明确的标准来评价的前提下,内卷是很难避免的。“简单”的定义因人而异,而我认为那些造出火箭的人在那边攀比是内卷的来源。如果让我来说一个建设性的方案的话,我个人觉得应该提供更明确的标准或是一个例子,而不是这样宽泛的上限极高的要求。

也有网友表示此举没有意义:

要求用纯 HTML、CSS、JS 写这种作业,类似于纠结茴香豆的 4 种写法,意义不大。比如 Ajax,对他的理解作为一个异步发送 HTTP 请求的工具就足够了,不管使用 jQuery 的 Ajax 还是 Axios,在项目中都能达到这个目的,为什么要去研究 XMLHttpRequest 那古老不友好的 API?过度钻研原生除了浪费时间以外真的没什么意义,这一个作业里面也看不到对有意义的比如 this 原型,闭包等原生内容的使用。

同济大学的这个作业,虽然没有“雷课堂”那么硬核,但也的确没那么轻松,你觉得这个作业难吗?使用纯 HTML、CSS、JS 写网站是否有意义?欢迎留下你的观点。

理 | 郑丽媛
出品 | CSDN(ID:CSDNnews)

怎么回事?突然间 Windows 12 就来了,还是网页版的?

仔细一瞧,原来这是一位开发者看到 Windows 12 概念版(Power by PowerPoint)后深受启发,因而才决定做一个 Windows12 网页版:

“此项目基于目前 Windows 版本创造,与微软的 Windows 12 正式版本不一致。此项目绝不附属于微软,且不应与微软操作系统或产品混淆,这也不是 Windows365 cloud PC。”

虽然这个网页与 Windows 12 正式版并无关系,但正如项目作者所说,创建「Windows 12 网页版」是希望让用户在网络上预先体验 Windows 12,因此基本上该有的都有了。

那么接下来就让我们来“超前体验”一下 Windows12 网页版吧!

Windows12 网页版体验地址:https://tjy-gitnub.github.io/win12/desktop.html

“超前体验” Windows12 !

在最初决定创建这个 Windows 12 网页版时,项目作者谭景元大致拟定了一个“前景规划”:

从路径规划前的打勾状态来看,这一年来谭景元已陆续实现其计划中的大部分功能。虽与 Windows 12 正式版不同,但他使用了标准网络技术,如 HTML,CSS 和 JS,在网络上对操作系统进行模拟并创新。

据作者介绍,Windows 12 网页版是一个开源项目,采用 EPL V2.0 开源许可,根据该许可用户可对项目进行传播、分发、修改以及二次发布,但必须注明源码来源,包括作者和项目链接等,并使用相同的协议开源。

下面来看看 Windows 12 网页版的实际效果。

(1)开始菜单

与当前的 Windows 11 相比,Windows 12 网页版的界面变化不小,开始菜单中的布局也有明显变化。

(2)丰富应用

虽然只是用于体验的网页版,但它依旧拥有不少的基础应用:计算机、相机、文件资源管理器、Python Editor、Python 3.10.2……尝试了一下,不少应用都能在其中使用。

(3)AI Copilot

不仅如此,在今年席卷全球的 AI 热潮下,作者还在 v7.0.0 更新中,给 Windows 12 网页版新增了个 AI 助手。

不过有一点需要明确,由于该 Windows 12 网页版仅用于体验,因此许多功能并不能真实应用至你的电脑当中。例如搜索只能搜系统中的虚拟文件,新闻部分只有作者虚构出来的新闻,设置页面的许多选项目前也不能点击,后续作者可能会持续更新完善。

在实现 Windows 12 的基本功能后,谭景元进一步做了一些畅想,目前也实现了几个:

总体来说,这个 Windows 12 网页版从精美的 UI 设计、丰富的功能以及丝滑的动画等方面来看,体验感还不错,因此该项目开源至 GitHub 刚满一年,已获得 1300+ Star(注:作者提醒,目前移动端适配不太完善,桌面版网站还“凑合着用”)。

按理说,接下来这个项目只要继续进行功能更新,自然会吸引更多人前来体验网页版 Windows 12,但最近项目作者谭景元突然宣布要请个“长假”——因为他初三了。

是的,你没看错,这个 Windows 12 网页版的作者谭景元,是国内一名刚上初三的中学生!

Windows 12 网页版的背后,是一名 14 岁的初中生

从谭景元创建的个人主页「星源的网站」来看,他出生于 2009 年 5 月,其小学和目前就读的初中都在成都,而目前刚上初三的他,就已曾获得两个重量级奖项:

  • CSP 普及组一等奖(CSP 是 CCF 面向社会非专业人士推出非专业级别的能力认证,考核内容均涉及算法和编程)

  • 桥杯国赛三等奖(蓝桥杯全国软件和信息技术专业人才大赛,是由工业和信息化部人才交流中心举办的国内最大的信息技术竞赛)。

    在他的个人主页中,谭景元介绍道,其擅长安装各种系统、把各种软件都换成预览版、剪视频(B 站主页:https://space.bilibili.com/2010692096)以及“做作业”(???),并精通各种语言:

    目前谭景元所做的项目,除了 Windows 12 网页版,还有另外两个:

    • 尼科夫在线工具:“一个专用于坑人的网站,在注册过程中设置了重重关卡,无人能够成功。”

    • Tapple 滚动检测:“一个滚动监测样式库,灵感来源于苹果官网,本网站就是使用的此样式库。”

    实际上在今年 5 月,也就是谭景元初二下学期时,他就已经发布过公告,宣布要暂别这个项目一段时间,以专心学习备战中考:...呃...立志要考七林,从今开始要好好学习了。所以我将有很长一段时间因太忙而无暇顾及项目,对此表示抱歉 (初三上可能还有时间,在过年之后就直接甩手了。”

    不过虽然短时间内不会再有什么功能更新,但谭景元还是将项目的维护工作进行了交接:“目前暂定将合作开发权限(push 权限)交给 @User782Tec 以在期间维护项目,在此提前表示非常感谢(如有意见欢迎提出)。”所以,期间开发者们体验过后如对该项目有任何意见或建议,可以在 GitHub 上提交 issues。

    那么最后,让我们预祝“星源谭景元明年中考顺利,考上心仪高中,也期待着他的回归~

    参考链接:

    星源的网站:https://tjy-gitnub.github.io/

    Windows 12 网页版 GitHub 地址:https://github.com/tjy-gitnub/win12

    Windows 12 网页版体验地址:https://tjy-gitnub.github.io/win12/desktop.html

avaScript语法的学习是掌握JavaScript的基础,在掌握基础之后可以进一步学习各种JS对象及对象的方法等。与所有程序设计语言类似,JavaScript基本语法学习主要包括数据类型、常量、变量、数组、字符串、表达式与运算符、流程控制语句等。流程控制语句主要包括条件语句、循环语句。在完成基本语法学习之后,需要通过大量练习巩固基本语法学习的成果。本文主要列举JavaScript语法教学过程中,布置给学生的一些基本练习题,供初学者检测个人基础语法学习的情况与效果。

javascript


练习题及参考答案

1、百钱买百鸡

百钱买百鸡是中国古代经典枚举题目,题目要求为:公鸡价格5元/只,母鸡价格3元/只,小鸡1元能够买三只,现在有100块钱,需要买100只鸡,求出所有的组合。参考代码如下:

百钱买百鸡参考代码

计算结果

2、菱形输出

菱形输出主要是使用*符号构成菱形并对菱形进行输出显示,重点考察对循环嵌套的理解与使用,输出菱形格式要求如下:

菱形输出案例

输出参考菱形样式如上图所示,需要允许定义输出的行数,实现符合要求的菱形的输出。参考案例代码如下:

菱形输出参考代码

菱形输出代码中,使用了strong标签对输出*的颜色进行了限制,符合要求的输出黑色,不符合的输出白色,最终显示出菱形的效果,也可通过修改输出各个部分的颜色,输出不同的结构,参考样式如下:

空心菱形样式

3、九九乘法口诀表

九九乘法口诀表是学生最熟悉的结构,在流程控制语句学习中也是典型循环嵌套结构。外层循环用于实现每一行的输出,内层循环主要用于实现每一行中表达式的输出。其关键点在于如何控制每一行显示的数量,即如何定义循环语句的条件。九九乘法口诀实现样式如下图所示:

循环嵌套输出九九口诀表

九九口诀表输出样式与输出参考如上图所示,实现过程主要是在每一个输出位置输出变量及相关的运算符号。九九乘法口诀表实现参考代码如下:

九九乘法口诀表参考代码

4、汉诺塔

汉诺塔问题是递归算法实现的经典案例,也是JavaScript教学过程中讲解函数部分的经典案例之一。汉诺塔主要考虑将按照顺序的圆盘从一个柱子上移动到另外一个柱子,在移动过程中需要按照一定的规则。

三层汉诺塔示意图

要解决三层汉诺塔移动问题,从最后一步考虑,需要将最1,2层看成一个整体移动到B柱,将3层移动到C柱,然后将B柱上的1,2层移动到C柱,即可完成问题求解。参考实现代码如下:

汉诺塔求解参考代码

汉诺塔求解参考代码如上所示,通过运行可输出最终移动的顺序与移动结果。本案例最终输出结果描述如下:

运行结果示例

以上给出了4个JavaScript基础语法教学过程中所使用的典型案例及参考代码,欢迎大家补充更多案例。



本头条号长期关注编程资讯分享;编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见,可以联系作者,共同探讨。期待大家关注!相关文章链接如下:

前端开发-CSS3动画实现焦点(图文轮播)图效果

前端开发-JavaScript DOM动态生成文本框

前端开发-拼图游戏(N数码问题)A*算法智能求解效果展示

前端设计-JavaScript美女拼图游戏开发实例

前端设计-教你如何快速绘制HTML5动画

前端设计-响应式页面开发基础

前端设计-Ajax技术及实例展示