itec-elwg / fe-study Goto Github PK
View Code? Open in Web Editor NEWELWG前端学习小组任务提交处
ELWG前端学习小组任务提交处
发现的BUG(其他的你参照下其他人的issue看看自己有没有碰上这种问题):
代码本身没有什么太大问题,还是要注意变量的命名,最好让人一看到你的变量名就知道是什么意思
功能没问题,动画效果还不错就是有点慢,点快了就会出现比较奇怪的显示效果。更多的是代码问题:
.eq(i + 2)
的2是什么含义?尽量不要用这种很难看懂的写法,要避免这种问题就是换个思路重新实现你的功能$(“.block")
和$("div")
这样的耗性能的操作new Array()
功能没有问题!Good job
但是请你把代码整理好提交,才能算你通过任务。
index.php
的Tab Index是2,请改为4并格式化login_validate.php
请自行寻找PHP代码的格式化方法,并格式化代码下个任务发布前,尝试实现附加题。
Hello,
I've discovered a potential security issue in your project. Could you please provide a secure method of contact to discuss it privately?
Thank you!
布局和功能都非常完善,没有什么bug,点赞!
operate
、calcul
、quit
这类标志性的变量,用0或1等数字会让可读性变差,建议像C++一样定义一些常量(JS中没有常量,只能用人为约束的不去修改的变量来模拟),例如:var OPERATE_STATE_INPUT = 0;
var OPERATE_STATE_CALCULATE = 1;
function plus() {
operate = OPERATE_STATE_CALCULATE;
}
document.calculator.numScreen
进行了很多次引用,如果后面对numScreen换了名字,后面各处代码都要一一修改,建议在最前面用一个变量去引用HTML和CSS基本没什么问题,进步很快点个赞!!下面提几个意见和课后思考的问题:
.renren
和.weibo
这两个类,很明显可以用一个诸如.social-entrance
的来取代,能少写一个类就尽量少写一个任务2完成
JS代码思路明确简洁,各种计算器的坑也基本避开了,点赞!此外,“%”是求百分数的意思,并不是求模,不过既然题意没说明,也无所谓。另外请考虑下实际计算值的时候,乘以一个大数最后再除以一个大数是否必要?如果没有了JS对大数字处理的特殊性,例如放在C++中,这种大数运算是否可行?
.num, .cal, .eql, .other
这4个类共用的一段CSS,在含义上就表明了它们有一个公有的性质叫“计算器按钮”,所以可以考虑用诸如.cal-button
的类来代替,但这4种按钮又分别有其特殊之处,所以确实应该用4个不同的类来表示其特殊的部分。这就是所谓的“泛化”和“特化”基本功能OK。试着实现一下附加题吧,记得在index.php补个“退出登录”的链接配套登录功能
isAbleToMove
有问题?.css()
API去设置样式,之前说了尽量不要在JS里面耦合CSS,应该通过.addClass()
和CSS类来控制"reset.php?n="+n*n
不好,请参阅jQuery.get()的这个API,使用data
参数来设置你要发送的参数其他的HTML,CSS,PHP等都没有什么问题。但你每次项目的文件夹名都和任务要求不一致,是怎么一回事=。=
<script>
放在了<head>
里面,导致阻塞了页面加载(我是在DevTools里面不小心点到了模拟2G网络网速时才发现这个问题)功能完善,代码也写得很不错,基本没有什么挑剔之处。注意一下如#109 所说,.percent, .clear, .divid, .mul, .sub, .add
这几个类的公共样式可以用一个公共类来定义。
任务功能达标,存在些许小问题。
基本功能都实现了,代码写得非常整洁,总体风格都很不错。
getValue
函数承载了过多的功能,建议只用该函数来获取数字值,其他不同功能的符号拆分到不同的函数当中去last_input
,char_i
等变量不符合camel命名规范页面和代码干净整洁,不错。功能上,登录页的“GO”按钮链向了一个不存在的页面,其余代码问题如下:
index.html
中缺body和html的闭合标签,以及有一点细小的语法错误。注意浏览器在解析HTML时通常不会报语法错,而是会尝试着去解析,但最好还是要规范避免被解析错<img>
标签指定宽高,宽高样式应在CSS中指定HTML和CSS布局都写得非常好,不过计算器本身功能bug较多
任务功能达标,存在些许小问题。
login.html
缩进有问题<h3>
,最好是<ul>
-><li>
-><a>
<article>
和<section>
正好用反了<a>
是行内元素,<p>
是块级元素,不要在行内元素里面套块级元素onmouseover
和onmouseout
来控制按钮的悬停样式,CSS的:hover
伪类即可满足需求标签.类名
控制(如a.note
),多此一举。一般仅用类名控制样式就能满足多数需求HTML,CSS都没有问题。但是不允许使用eval
实现计算器,第一eval
是投机取巧的方式,不符合本次任务的训练目的,第二eval
有很多致命的缺陷,例如容易遭注入攻击,具体参见此处
li1
这个id,是不合法的li1
,ul2
这种无意义的命名界面做得挺好看的,文档也写得不错,值得表扬
cal
时传入-1,-2,10到17这些值可读性很差,还不如直接就调用calClear
,calDiv
等等首页文章列表部分,并不符合水平居中要求,需要修改
<div>
用得过多,这是初学者经常遇到的问题,并不是每一个标签(例如input、p、a等等))都要在外层套上一层wrapper,应该遵循HTML标签的语义功能基本实现,但还存在以下bug:
Infinity
(这个结果是对的),但是后面还可以继续输入,输入内容就接在了Infinity后面此外,功能以外的方面再提几点建议:
功能完整,代码也非常整洁,很好!
最后再给点建议:
$('td')
这样的耗性能的操作<input class="dim" pattern="[3-9]">
使用了HTML5新的pattern
属性,请自行了解该属性的兼容性代码写得不错,而且还使用了CSS Reset,很值得其他组员参考学习。
代码存在一些小问题:
login-css.css
有空格和tab混用情况<article>
和<section>
语义理解不到位在不知道如何下手的情况下,请多参考别人的代码,以及利用好DevTools查看已有网站的代码
<form>
主页的功能基本没问题,但是登录页并不符合居中要求(用ctrl+鼠标滚轮缩放一下,你就能发现问题)
<h7>
这种HTML标签?<br/>
来留白或空行,这都是一个margin样式就可以搞定的事情div#login
的div完全是多余的#h5
这种既含糊,又没必要;其他不知其义的命名,诸如.r1
、.a_list
等等均不可取.p_copyright
,有的用了camel命名法如loadBtn
。推荐用中划线分隔单词的形式,如.menu-list
.scss
文件)?既然要用Sass,那使用到Sass的特性了吗?login_validate.php
:php文件如果不渲染页面,不需要写html和body标签基本功能没有问题,代码规范也不错。既然用了和其他人截然不同的HTML5 canvas方式实现,那我就从canvas(游戏开发)的角度来提一些意见。
createView
从命名上来理解,应该是在最开始初始化的时候,只调用一次。但该函数的意图是在重绘画布,被多次调用,是否改为updateView
更加合理?createView
函数中,都把视图和数据糅合在一起——前者是先初始化数据后初始化视图,后者是数据的变化写在了context的绘制当中。setTimeout(function() {
update(); // 更新数据
render(context); // 渲染canvas上下文
}, 1000 / MY_FPS);
ifWin
,不如checkWin
或checkIfWin
。事件回调函数可以用on开头,如onKeyDown
,onClickBox
n = $(".inputNum")[0].value;
,window.addEventListener('keydown', doKeyDown, true);
,canvas.onclick = ...
$.get
还是$.post
<input type="submit">
不合法,submit会阻止超链接的行为,二者只能择其一。请思考一下用a标签有什么缺陷,用<input type="submit">
应该怎么写?<a name="con1"></a>
是干什么用的?<footer>
里面套了太多层div了,完全没有必要#slick-login
开头,例如#slick-login input[type="text"]
。设想现在我要你再做一个注册页,里面要填“用户名”“密码”“再次输入密码”“年龄”“自我介绍”等等,那你这样写选择器样式是否能够复用?var grid = ['1', '2', '3'];
,不需要new Array
getEventTarget
和compare
函数,完全可以成为window.onload那个函数的一部分window.onload
是JS内置的写法,$(document).ready
是jQuery的写法,两者功能是一样的。代码中一共出现了3次文档加载完毕调用回调,应该只出现1次click
绑定的事件回调函数重复度很大,应考虑重构这里是我写的puzzle8,你可以参考参考,JS文件里面涉及的概念有立即函数、局部变量、暴露接口、对象等等,可以仔细研究一下
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.