关于js函数的写法 fun = function(){} fun:{}有什么不同

myfun:function(){}
myfun = function(){}
function myfun(){}
var myfun =function(){}
myfun.prototype.myfunPro = function (){}

这几种方法每一个都有不一样的作用。

1.myfun:function(){} 这个是必须写在对象内部的,这是一个对象的方法,如

1
2
3
var a = {
   myfun:function(){} 
}

写在外面会报错。

2.任何时候都不要这样写myfun = function(){},这样写就变成了全局对象window的一个属性,要记得加上var ,第四种方式是对的,如下:

1
var myfun = function(){}

这是一种声明函数的方式,左边是一个变量,右边是一个函数的表达式,意思就是把一个匿名的函数表达式复制给了变量myfun,只是声明了一个变量指向了一个函数对象。这个和第三种方法function myfun(){}声明的方法差别不大,但还是有差别的。

这就要涉及到javascript解析的部分了,简单来说,js在解析的过程中,会先把函数和变量提前解析。

function myfun(){}这种声明方法会把函数整个语句显示的提前到了脚本或者函数前(当前作用域),函数名和函数均会被提前(会在执行上下文代码前声明)。

而var myfun = function(){}这种声明方法,只是提前了一个变量,并没有提前函数体。

3.最后一种并不是声明的函数,只是在myfun函数上的原始对象上加了一个myfunPro方法,构造函数中用到的。给你个例子:

1
2
3
4
5
6
7
8
var myfun = function(){
           this.a = "a";
       }
       myfun.prototype.myfunPro = function (){
           alert("0")
       }
       var test = new myfun();
       console.log(test);

 

 

这时候如果你在最底部加上一段代码,如下:

1
2
3
4
5
6
7
8
9
var myfun = function(){
           this.a = "a";
       }
       myfun.prototype.myfunPro = function (){
           alert("0")
       }
       var test = new myfun();
       console.log(test);
       test.myfunPro();

这时候就会弹出一个对话框 0了 ,你可以试试

Session,Cookie,ViewState区别

Cookie是CLIENT对象,而Session、Viewstate是存储在SERVER端的;

Cookie对所有的WEB应用一样的服务,而Session、Viewstate则只针对某一个连接有效  ;

cookie是保存在本机的文件,,,记录短小的信息,,,除非你让cookie过期,,否则会一直存在  ;

 

Session对当前打开的连接(会话),只要你不是完全打开新的IE窗口(也就是说打开的所有的IE都是通过当前IE使用  Viewstate只针对当前的窗体有效,也就是说,你在这个ASPX中TARGET、在新窗口中打开的),那么这些IE都共享相同的Session;

session是私有的,,,,每个客户端都存在一个不同的session     生存期正常是20分钟,,也可以自己设定为1分钟或2个小时

session则是站点级的,它可以整个站点中所有的页面进行共享,但是一个方面它是有时间限制的
另一个方面它是存放在内存中的。

viewstate是页面级的,只能在一个页面中使用,但是它是写在页面上的,所以不占用内存
只是会稍微占用点网络的带宽。

设置的Veiwstate,即便你在同一个IE中打开另外一个同网站的ASPX,前面的VIEWSTATE也已经失效。
viewstate类似于asp中的hidden控件,,,用来记录页面中的控件的状态的,,,主要在页面间信息传递时用,,

四年前我读《商界》中一篇文章观感

无意中在我的网站www.jsweb8.cn看到这篇文章,时至今日4年过去了,下面是4年前的那篇文章。
—————————————————————————————————————————-
最近辞职了,今天已经是失业第二天了。整天在家彻夜通宵整我的网站www.jsweb8.cn,早上睡到11点多,随手翻开上个星期买的《商界》,无意发现这篇文章,很是受用,觉得很好,特意贴此和大家共勉。

亲爱的侄儿:

听说你准备创业,作为你的舅舅且长年混迹江湖,我觉得应该告诉你一些事情。

无论谁失败都是一个悲剧。当然,如果有人将其当成喜剧看,那么在某种时候就可能重蹈覆辙。

1. 如果你创业的目的不是为了钱,不是为了利润最大化,那就叫慈善事业!偶尔去下敬老院就行了,不必注册公司。

2.需要忍受孤独与诱惑。你在没钱的时候要忍受孤独,有钱之后要抵制诱惑。

3.如果你对政策的解析与电视、报纸上的雷同,请不要创业。很明显你没有独立思考的能力。

4.人脉不是指那些行长、局长、处长、科长。人脉是你一切可以调用的关系与资源,人是一切要素的栽体。

5.关于退路:置于死地的基本上死的比生的多。所以一定要留一条退路。

不顾一切地创业,是让我钦佩却望而却步的事。考虑下家庭吧。

6.关于资源的调配:资源应集中利用、弹性利用。战线拉得太长是失败的开始。另外,一切你所能仰仗的资源,无论是你父母的,或是你丈母娘的,都应该通通加以利用。资源永远是多多益善,切记资源不要分散、无效和浪费。

7.不要进入不熟的行业。

8.尽量使用成熟的技术。新技术有很多不确定性。

9.关于父母的因素:最了解你的也许是你的父母,最不了解你的也许还是你的父母。恰当的时候要会说幂!如果你是个孝子,还要研究下怎么说不!

10.来自妻子的因素:如果有老婆,你碰到的问题是两个家庭的问题:如果没有,那就是你的问题。

11.有大量的重大工作需要你亲历亲为,所以强壮的身体和旺盛的精力必不可少。

12.能够坚持,你面对的不会是一帆风顺。

13.心如止水:如果这个世界还时不时地带给你一些凉喜,请不要创业。因为你阅历不够!

14.接触社会的时间不到5年不要创业。除非有稍纵即逝的机遇。

15.按预算的125%准备资金,创业开始后,会有许多超出预算的地方。

16.自信和魄力:如果你自己都不相信自己,还会有谁相信你?有时候需要背水一战的勇气、决心与魄力。输要输得像英雄,死要死得像烈士,做好这个准备!

17.速度,连贯性,敏锐性,灵活性及创造力。

18.战略实施步骤、经营时间表、产品生产、服务计划、成本、毛利、预期的经营难度和资源需求,要有清晰的思路。

19关于人的因素:这点相当重要。

不管是蒙是骗还是软硬兼施。都一定要保证公司员工的相对稳定性。人员流失就像放血,开始没什么感觉。却会要你的命。

20.合伙的生意不好做。一家独撑的压力又非常大。如今这个社会,做什么诲事情的成本都很高。所以需要慎选合作伙伴。人品好坏其实关系不大,有时候只是借鸡生蛋。这笔生意也许就是五年十年,并不是相伴一生,只需要有公共的利益就好。要设立相互的约束机制,涉及到了钱,什么事情都有可能。

21.遇上初次做生意的人要慎重考虑,他们普遍都有浪漫主义情怀。今后的坎坷会将他变成团队中的定时怍弹。

22.一个坏的团队能把一个好的主意运作得一塌糊涂,所以看着办吧!

23.善谋者不战,善战者不败,善败者不乱。如果已经输了,请记得我们打麻将时常说的一句话——少输为赢。人生是算总账的,必要时要有壮士断臂的气度!

24.要听别人的意见,不管是好的还是坏的。

25.创业不同于炒菜,不可能等所有的配料都准备齐之后才开火做饭。

《勇敢的心》与《硫磺岛的家书》都是很好的片子。创业永远都是王者的游戏,我们需要的是试一试的勇气!

你的舅舅

2008年6月20日深夜

——————————————————————————-

喜欢第2条和11条,凡伟大的人定是经得起寂寞和孤独的,好的身体更是夯实的基础。

喜欢第3条和第13条,这正是我缺少的和我要深思的。

表现和结构相分离的原生JS选项卡

这是个原生javascript的tab效果,实现的原理很简单:通过循环菜单列表li数组,给每个li增加onclick点击事件,其中去除li的class效果,隐藏所有内容div,再给循环在当前的数组li增加当前样式,让其菜单列表li对应的div显示。看下面的代码吧

[code]</pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表现和结构相分离的原生JS效果</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ font-size:12px; line-height:1.5em}
ul,li{ list-style:none}
.tab_con{ width:320px; height:300px; border:1px solid green; margin:20px auto }
#menu li{ float:left; width:80px; height:26px; line-height:26px; background:#009933; text-align:center; cursor:pointer}
#menu li.cur{ background:#FF3300}
.tab_con #container{ width:100%; height:274px; clear:both; background:#CCCCCC}

.tab_con #container div{ display:none}
</style>
<script type="text/javascript">
window.onload = function(){
var Nav = document.getElementById("menu").getElementsByTagName("li");//获取菜单列表数组
var Con = document.getElementById("container").getElementsByTagName("div");//获取下方内容数组
Nav[0].className="cur";//默认第一个菜单列表增加class:cur
Con[0].style.display="block";//默认下方内容第一个DIV内容显示
for(i=0;i<Nav.length; i++){//循环菜单列表数组
Nav[i].index=i;//提取循环列表
Nav[i].onclick = function(){ //给菜单列表添加点击事件
for(i=0;i<Nav.length;i++){
Nav[i].className="";// 去掉所有列表当前效果class
Con[i].style.display="none";//所有内容隐藏
}
this.className="cur";//当前选中的菜单列表添加class:cur
Con[this.index].style.display="block";//当前列表对应的内容显示
}

}
}

</script>
</head>

<body>
<div class="tab_con">
<ul id="menu">
<li><a href="http://www.jsweb8.cn" target="_blank">经济</a></li>
<li>军事</li>
<li>政治</li>
<li>教育</li>
</ul>
<div id="container">
<div>经济新闻</div>
<div>军事新闻</div>
<div>政治新闻</div>
<div>教育新闻</div>
</div>

</div>
</body>
</html>
<pre>[/code]

这种企业网站的制作流程

这是一个外语培训机构的宣传类型网站,应邀一个朋友的要求,问我这种网站的制作流程,下面就跟大家说说这种网站制作流程。
网站演示
首先设计和切图都是用fireworks(我的设计很差),前端页面用Dreamweaver开发,采用XHTML+CSS+JS+jquery制作出前端页面,最后套用actcms内容管理系统(ASP+ACCESS)成型。
网站兼容IE6-9,firefox,Chrome,safari,opera。
下面说说网站主要的几个难点。
其中头部flash用flashdecompiler 软件制作,右侧焦点幻灯片是jquery库做驱动,具体代码我就不贴了,可以在custom.js文件中看到,下面的点击箭头左右滚动是用jquery的一个插件jcarousellite做的,这个插件是MIT和GPL的证书,是允许免费使用的。兼容性的对于IE6下的PNG透明问题采用 DD_belatedPNG,具体操作可去http://www.dillerdesign.com/experiment/DD_belatedPNG/了解。
另外网站每个页面左侧都增加了社会化媒体分享按钮,具体实现方式可以去share.baidu.com了解。右侧有一个在线客服系统,相信这个大家在很多网上都见过,这种随着浏览器浮动的弹性框的制作也是依赖jquery库实现, 具体的实现方式也是非常简单的,需要定义一个scrollAD函数,具体代码可以去custom.js中看到。
最后还有一个地方,就是网站的联系我们页面接入了百度地图的API, 具体实现方式可以去http://dev.baidu.com/wiki/static/map/API/tool/creatMap/查看,很容易的,就是一串javascript代码。OK,基本就是这样了。

[jQuery]jQuery Chaining(鏈式語法)

使用jQuery的人都務必要了解Chaining語法,這不只是為了追求方便,效能也是一個利多因素,如果你對jQuery的「鏈式語法(Chaining)」還不熟悉的話,多多練習吧。

因為瀏覽器會將DOM Element組成DOM Tree,如果你每次要操作物件就要重新叫用一次$(“#id”)、$(“.class”)等方法,那也就是說其實在背後就是又做了一次「樹的搜尋」,不管搜尋的方式是什麼,可能是AVL Tree的方式,也可能是Binary Tree的方式,或是學校沒有教的其他演算法,總之不管是用什麼方式搜尋DOM Tree,終歸是要進行DOM Tree Search。

因此以下兩個使用jQuery的方法:
(1)

$("div").html("test");
$("div").css("color","red");

(2)

$("div").html("test").css("color","red");

以上程式所得到的最後結果會是一樣的。但是方法一連續做了兩次dom tree search,方法二只搜尋了一次>。看起來差異不大,可是當程式碼一複雜起來,對同樣的Dom物件要操作的事情變多的時候,那差異不可謂不大。想想看如果是包在for迴圈裡,那有多可怕:

for(...) {
	$("div").html("test");
	$("div").css("color","red");
}

程式碼的效能就是在這樣不知不覺間降低的,實在是必須謹慎看待阿!要有效的應用Chaining語法,「end()」函式是一個不可或缺的部份。end函式的作用是:

回到最近的一個"破壞性"操作之前。即,將匹配的元素列表變為前一次的狀態。如果之前沒有破壞性操作,則返回一個空集。所謂的"破壞性"就是指任何改變所匹配的jQuery元素的操作。這包括在 Traversing 中任何返回一個jQuery對象的函數--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings','slice'和'clone'。

這段話取自document,但是咬文嚼字的,我也實在聽不太懂,但我想重點應該是這一句「將匹配的元素變為前一次的狀態」。廢話說太多了,我輩程式人還是直接上點範例比較實在XD

$('#abc').children('#xyz')css('color','red').end().html();

這個範例尋找id=abc的DOM元素裡面id=xyz的元素,修改元素中文字的顏色,將顏色改成紅色,接下來呼叫「end()」方法,將匹配的元素變為前一次的狀態,第一次匹配是找id=abc,第二次匹配是找id=xyz,所以呼叫「end()」方法就會跳回第一次匹配的結果,也就是說以上範例最後取得的HTML會是id=abc的DOM元素的HTML

这些前端面试问题,如果搞懂了就差不多了

@版本 1.0

备注: 本repo包含了一些前端面试问题用于考查候选者。不建议对单个候选者问及每个问题(那需要好几个小时)。只要从列表里挑选一些,就能帮助你考查候选者是否具备所需要的技能了。

记住,很多问题都是开放的,可以引发有趣的讨论。那比直接的答案更能体现此人的能力。

最初的贡献者

备注: 大部分问题从是某个帖子搜集和由下列个人提供:

一般问题

  • 你用Twitter吗? (在天朝最好问你用微博吗?)
    • 如果用,你都关注那些人?
  • 你用Github吗?
    • 如果用,你关注的项目有什么?
  • 你关注的博客有那些?
  • 你使用那些版本管理系统,比如Git,SVN等?
  • 你常用的开发环境是怎样的?比如操作系统,文本编辑器,浏览器,及其他工具等。
  • 你能描述一下你制作一个网页的工作流程吗?
  • 你能描述一下渐进增强和优雅降级之间的不同吗?
    • 如果提到了特性检测,可以加分。
  • 请解释一下什么是语义化的HTML。
  • 你更喜欢在哪个浏览器下进行开发?你使用那些开发人员工具?
  • 你如何对网站的文件和资源进行优化?
    • 期待的解决方案包括:
      • 文件合并
      • 文件最小化/文件压缩
      • 使用CDN托管
      • 缓存的使用
      • 其他
  • 为什么利用多个域名来存储网站资源会更有效?
    • 浏览器一次可以从一个域名下做多少资源?
  • 请说出三种减低页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)
  • 如果你接到了一个使用Tab来缩进代码的项目,但是你喜欢空格,你会怎么做?
  • 请写一个简单的幻灯效果页面
    • 如果不使用JS来完成,可以加分。
  • 你都使用那些工作来测试代码的性能?
  • 如果今年你打算熟练掌握一项新技术,那会是什么?
  • 请谈一下你对网页标准和标准制定机构重要性的理解。
  • 什么是FOUC?你如何来避免FOUC?

HTML相关问题

  • 文档类型的作用是什么?你知道多少种文档类型?
  • 浏览器标准模式和怪异模式之间的区别是什么?
  • 使用XHTML的局限有那些?
    • 如果页面使用’application/xhtml+xml’会有什么问题吗?
  • 如果网页内容需要支持多语言,你会怎么做?
    • 在设计和开发多语言网站时,有哪些问题你必须要考虑?
  • 在HTML5的页面中可以使用XHTML的语法吗?
  • 在HTML5中如何使用XML?
  • ‘data-‘属性的作用是什么?
  • 如果把HTML5看作做一个开放平台,那它的构建模块有那些?
  • 请描述一下cookies,sessionStorage和localStorage的区别?

JS相关问题

  • 你使用过那些Javascript库?
  • 你是否研究过你所使用的JS库或者框架的源代码?
  • 什么是哈希表?
  • ‘undefined’变量和’undeclared’变量分别指什么?
  • 闭包是什么,如何使用它,为什么要使用它?
    • 你喜欢的使用闭包的模式是什么?
  • 请举出一个匿名函数的典型用例?
  • 请解释什么是Javascript的模块模式,并举出实用实例。
    • 如果有提到无污染的命名空间,可以考虑加分。
    • 如果你的模块没有自己的命名空间会怎么样?
  • 你如何组织自己的代码?是使用模块模式,还是使用经典继承的方法?
  • 请指出Javascript宿主对象和内置对象的区别?
  • 指出下列代码的区别:
    function Person(){} var person = Person() var person = new Person()
  • ‘.call’和’.apply’的区别是什么?
  • 请解释’Funciton.prototype.bind’的作用?
  • 你如何优化自己的代码?
  • 你能解释一下JavaScript中的继承是如何工作的吗?
  • 在什么时候你会使用’document.write()’?
    • 大多数生成的广告代码依旧使用’document.write()’,虽然这种用法会让人很不爽。
  • 请指出浏览器特性检测,特性推断和浏览器UA字符串嗅探的区别?
  • 请尽可能详尽的解释AJAX的工作原理。
  • 请解释JSONP的工作原理,以及它为什么不是真正的AJAX。
  • 你使用过JavaScript的模板系统吗?
    • 如有使用做,请谈谈你都使用过那些类似库文件。比如Mustache.js,Handlebars等等。
  • 请解释变量声明提升。
  • 请描述下事件冒泡机制。
  • “attribute”和”property”的区别是什么?
  • 为什么扩展JavaScript内置对象是个坏做法?
  • 为什么扩展JavaScript内置对象是个好做法?
  • 请指出document load和document ready的区别。(这是个问题的问题)
  • ‘==’和’===’有什么不同?
  • 你如何获取浏览器URL中查询字符串中的参数。
  • 请解释一下JavaScript的同源策略。
  • 请解释一下事件代理。
  • 请描述一下JavaScript的继承模式。
  • 如何实现下列代码:
    [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
  • 描述一种JavaScript memoization(避免重复运算)的策略。
  • 什么是三元条件语句?
  • 函数的参数元是什么?
  • 什么是”use strict”?使用它的好处和坏处分别是什么?

JS代码示例:

~~3.14

问题:上面的语句的返回值是什么? 答案:3

"i'm a lasagna hog".split("").reverse().join("");

问题:上面的语句的返回值是什么? 答案:”goh angasal a m’i”

( window.foo || ( window.foo = "bar" ) );

问题:window.foo的值是什么? 答案:”bar” 只有window.foo为假时的才是上面答案,否则就是它本身的值。

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

问题:上面两个alert的结果是什么 答案: “Hello World” & ReferenceError: bar is not defined

var foo = [];
foo.push(1);
foo.push(2);

问题:foo.length的值是什么? 答案:’2′

var foo = {};
foo.bar = 'hello';

问题:foo.length的值是什么? **答案: undefined

foo = foo||bar

问题: 这行代码是什么意思? **答案: if(!foo) foo = bar

foo>>1

问题: 这行代码是什么意思? **答案: Math.floor(foo/2)

foo|0
foo+.5|0

问题: 这行代码是什么意思? **答案: parseInt(foo) & Math.round(foo)

function foo(bar1, bar2, bar3){}

问题: 如何获取参数的个数? **答案: foo.length //this example is 3

jQuery-Specific Questions:

jQuery相关问题

  • 解释”chaining”。
  • 解释”deferreds”。
  • 你知道那些针对jQuery的优化方法。
  • 请解释’.end()’的用途。
  • 你如何给一个事件处理函数命名空间,为什么要这样做?
  • 请说出你可以传递到jQuery方法的四种不同值。
    • 选择器(字符串),HTML(字符串),回调函数,HTML元素,对象,数组,元素数组,jQuery对象等。
  • 什么是效果队列?
  • 请指出’.get()’,'[]’,’eq()’,的区别。
  • 请指出’.bing()’,’.live()’和’.delegate()’的区别。
  • 请指出’$’和’$.fn’的区别?或者说出’$.fn’的用途。
  • 请优化下列选择器:
    $(".foo div#bar:eq(0)")
  • ‘delegate()’和’live()’有什么区别?

CSS相关问题

  • 描述css reset的作用和用途。
  • 描述下浮动和它的工作原理。
  • 清除浮动的方法有那些,分别适用于什么情形。
  • 解释css sprites,如何使用。
  • 你最喜欢的图片替换方法是什么,你如何选择使用。
  • 讨论CSS hacks,条件引用或者其他。
  • 如何为有功能限制的浏览器提供网页。
    • 你会使用那些技术和处理方法。
  • 如何视觉隐藏网页内容,只让它们在屏幕阅读器中可用。
  • 你使用过网格系统吗?如果使用过,你最喜欢哪种?
  • 你使用过meidia queries(媒体查询)吗,或者移动网站相关的CSS布局。
  • 你熟悉SVG样式的书写吗?
  • 如何优化网页的打印样式。
  • 在书写高效CSS文件时会有哪些问题需要考虑。
  • 你使用CSS预处理器吗?(SASS,Compass,Stylus,LESS)
    • 如果使用,描述你的喜好。
  • 你是否接触过使用非标准字体的设计?
    • 字体服务,Google Webfonts, Typekit,等等。
  • 请解释浏览器是如何根据CSS选择器选择对应元素的。

可选的有趣问题

  • 你编写过的最酷的代码是什么?其中你最自豪的是什么?
  • 你知道HTML5的帮派标志吗?
  • 你是否正在或曾经在一艘船上。(不懂这个幽默)
  • 你使用的开发工具中,你最喜欢的部分是什么?
  • 你有什么业余项目吗?是那种类型的?
  • 解释cornify的重要性?(本题完全摸不到头脑)
  • 在一张纸上,垂直写下ABCDE,然后不用任何代码,将他们到序排列。
    • 静静的看他们是否将纸反转。
  • 海盗还是忍者?
    • 如果是两者的合体,并有恰当理由,可以加分。如果是僵尸猴子海盗加忍者加两分。(注,此题文化差异过大)
  • 如果没有在Web开发,你会做什么?
  • 卡门圣迭哥的隐藏处在哪里?
    • 提示:本题的答案永远是错的。
  • 你最爱的IE特性是什么?
  • 完句填空: Brendan Eich和Doug Crockford是JavaScript的________。
  • 讨论:jQuery是牛逼的库还是最牛逼的库。