厂里放假期间,迫于生计,去一家公司电脑公司面试。我说我有作品,给看。人家不要。上机答题。可能他们的系统是aspx的吧,时间更新可能要到后台,导致页面卡的要死。我反思,大家为了效率,动不动框架掌握的如何,不问项目经验,水平深度。可能有时候为了速度,大量的aspx控件,不停的通过后台交互,编写简单,用的好用,就是卡。我想我们应该了解一下框架的原理就行了,没有必要实际使用。前台的javascript 写的控件和少量的ajax交互就行了。为了炫没速度不值。另外我建议考试应该开卷,可以上网,人不是机器,有的东西记不住正常,只要通过自己的资料或网上的资料能把问题解决了就行。考题有:网络通信的分层。我记不住,因为我不是网络驱动编写的,但我能找到tcp/ip协议的电子书,里边各种细节是记不住的,知道原理和大概就行了。字符串模式匹配的算法。简单,但如果长时间不编写特定语言的程序,简单的输入输出你可能都忘了,知道原理就行。kmp,让我写,不行。但我10年前研究透了,长时间不用,忘了。现在要写,我还得看看数据结构的书,半小时能写出来。我写了javascript 和c#版的对任意字符串的4舍弃6入5留双,改正了round函数不能满足质检分析的要求,javascript版用状态图,c#版用正则表达式。一个算法想了3天。现在1年不看,我都看不懂我写的代码了。人是容易遗忘的,事情最后留下的只是经验和大体上的记忆。
今天看到csdn上的博客门的高手写教程,我很感激,有东西能有地方找,为了锻炼自己。分享一家公司的面试题目。
是排序ul下的li.现在贴出来,给大家一点参考。
<html>
<head>
<title></title>
<script type="text/jscript" src="jquery-1.11.1.js">
</script>
</head>
<body>
<ul id="ul">
<li>2</li>
<li>4</li>
<li>1</li>
<li>3</li>
<li>5</li>
<li>7</li>
<li>6</li>
</ul>
<br />
<button id="StrAdd" onclick='StrAdd_onclick("src")'>
升序</button>
<button id="Strjian" onclick='StrAdd_onclick("desc")'>
降序</button>
</body>
</html>
完成排序,当时我习惯了asp.net c# 的人,习惯控件写法,用前台还不习惯。幸好我看过jquery源码分析的书,虽然不用它编写,但看的懂jquery.老板讲可以上网,网上一搜,jquery ul 排序,百度知道里有人给了个排序,只有升序。好,虽然不一样,但改改代码还能复用一部分。不用我自己,取dom用jquery 全部搞定。
<html>
<head>
<title></title>
<script type="text/jscript" src="jquery-1.11.1.js">
</script>
<script type="text/javascript">
$(function(){
$("#StrAdd").click(function () {
var ols = new Object();
var ts = new Array();
$("#ul").find("li").each(function (i, v) {
var sp = $(v).text();
ts.push(sp);
ols[sp] = $(v);
});
ts.sort(); //数组的内部排序
$("#ul").empty();
for (var k = 0; k < ts.length; k++) {
ols[ts[k]].appendTo($("#ul"));
}
});
})
</script>
</head>
<body>
<ul id="ul">
<li>2</li>
<li>4</li>
<li>1</li>
<li>3</li>
<li>5</li>
<li>7</li>
<li>6</li>
</ul>
<br />
<button id="StrAdd" onclick='StrAdd_onclick("src")'>
升序</button>
<button id="Strjian" onclick='StrAdd_onclick("desc")'>
降序</button>
</body>
</html>
但降序呢。网上搜一下 Array.sort(),原来排序还可以给个比较函数。C,c++语言有比较,javascript也有,太周到了!
<html>
<head>
<title></title>
<script type="text/jscript" src="jquery-1.11.1.js">
</script>
<script type="text/javascript">
$(function(){
$("#StrAdd").click(function () {
var ols = new Object();
var ts = new Array();
$("#ul").find("li").each(function (i, v) {
var sp = $(v).text();
ts.push(sp);
ols[sp] = $(v);
});
ts.sort(); //数组的内部排序
$("#ul").empty();
for (var k = 0; k < ts.length; k++) {
ols[ts[k]].appendTo($("#ul"));
}
});
function desc(x, y) {
if (x > y)
return -1;
else
return 1;
}
$("#Strjian").click(function () {
var ols = new Object();
var ts = new Array();
$("#ul").find("li").each(function (i, v) {
var sp = $(v).text();
ts.push(sp);
ols[sp] = $(v);
});
ts.sort(desc); //数组的内部排序
$("#ul").empty();
for (var k = 0; k < ts.length; k++) {
ols[ts[k]].appendTo($("#ul"));
}
});
})
</script>
</head>
<body>
<ul id="ul">
<li>2</li>
<li>4</li>
<li>1</li>
<li>3</li>
<li>5</li>
<li>7</li>
<li>6</li>
</ul>
<br />
<button id="StrAdd" onclick='StrAdd_onclick("src")'>
升序</button>
<button id="Strjian" onclick='StrAdd_onclick("desc")'>
降序</button>
</body>
</html>
虽然用记事本写,但这么容易搞定,连学到的快速排序,冒泡排序都没用上,特感觉自豪,这就是用框架的好处,不必重复造车轮,提高生产力和稳定性。StrAdd_onclick(“src”)根本都没用,因为不必要在dom中写javascript,代码和页面元素分开是我的一个习惯,分类存放,好找也好修改.
时间过了一段,闲下来一看这个代码,虽然老板也不懂,但了解了它的算法后感觉有问题。如果有两个一样的li,在对象上操作会覆盖掉旧的。如果li中还有其它东西,比较dom肯定不实际。实际的东西应该考虑到各种情况,代码要通用。应该改为如下才正确。
function customFunc(x,y){
var xValue=$(x).attr("valueByOrder") ;//<li valueByOrder="25"></li>
var yValue=$(y).attr("valueByOrder") ;
if xValue>yValue
return 1;
else
return -1;
}
$("#Strjian").click(function () {
var ts = new Array();
$("#ul").find("li").each(function (i, v) {
ts.push(v);
});
ts.sort(customFunc); //数组的内部排序
$("#ul").empty();
for (var k = 0; k < ts.length; k++) {
$(ts[k]).appendTo($("#ul"));
}
});
以上代码没有测试,只是表达出自己的想法而已,可能有bug,不打算用。没这样的需求,对于ExtJs框架,这些一点用都没有,人家已经给你封装好了。有点遗憾的是商业要钱。没有免费的午餐呀,人家辛苦也不容易,体谅框架编写者,又要掉多少头发,伤多少脑细胞干重复的coder。对于一个问题,知道怎样解决就行了,不必要花费太多的时间在没有创意的重复上。
5年后,随着我代码的熟练,在网上看到别的高手给出的解答,知道什么叫牛人了。该代码绝对牛逼,光分析代码用了我1个小时。
https://j11y.io/javascript/sorting-elements-with-jquery/
我的测试:
<html>
<script src="jquery-1.9.1.min.js">
</script>
<script>
/**
* jQuery.fn.sortElements
* --------------
* @param Function comparator:
* Exactly the same behaviour as [1,2,3].sort(comparator)
*
* @param Function getSortable
* A function that should return the element that is
* to be sorted. The comparator will run on the
* current collection, but you may want the actual
* resulting sort to occur on a parent or another
* associated element.
*
* E.g. $('td').sortElements(comparator, function(){
* return this.parentNode;
* })
*
* The <td>'s parent (<tr>) will be sorted instead
* of the <td> itself.
*/
jQuery.fn.sortElements = (function(){
var sort = [].sort;
return function(comparator, getSortable) {
getSortable = getSortable || function(){return this;};
var placements = this.map(function(){
var sortElement = getSortable.call(this),
parentNode = sortElement.parentNode,
// Since the element itself will change position, we have
// to have some way of storing its original position in
// the DOM. The easiest way is to have a 'flag' node:
nextSibling = parentNode.insertBefore(
document.createTextNode(''),
sortElement.nextSibling
);
return function() {
if (parentNode === this) {
throw new Error(
"You can't sort elements if any one is a descendant of another."
);
}
// Insert before flag:
parentNode.insertBefore(this, nextSibling);
// Remove flag:
parentNode.removeChild(nextSibling);
};
});
return sort.call(this, comparator).each(function(i){
placements[i].call(getSortable.call(this));
});
};
})();
$(function(){
$('li').sortElements(function(a, b){
return $(a).text() > $(b).text() ? 1 : -1;
});
});
</script>
<body>
<ul>
<li>Banana</li>
<li>Carrot</li>
<li>Apple</li>
</ul>
</body>
</html>