前端javascript知识(二)
- documen.write和 innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分 - 浏览器检测通过什么?
(1) navigator.userAgent
(2) 不同浏览器的特性,如addEventListener - JavaScript有哪几种数据类型?
简单,Number,Boolean,String,Null,Undefined
复合,Object,Array,Function - 截取字符串“abcdefghi”的“fghi”
var myvalue=”abcdefghi”;
var jiequ=myvalue.substring(myvalue.length-4,myvalue.length);
alert(jiequ);-写出下面的运算结果
alert(typeof(null)); // object
alert(typeof(undefined)); // undefined
alert(typeof(NaN)); // number
alert(NaN==undefined); // false
alert(NaN==NaN); // false
var str="123abc";
alert(typeof(str++)); // number
alert(str);// NaN - 问执行完毕后 x, y, z 的值分别是多少?
var x = 1, y = z = 0;
function add(n) {
n = n+1;
}
y = add(x);
function add(n) {
n = n + 3;
}
z = add(x);
1、undefined、undefined - 如何阻止事件的冒泡?
//阻止冒泡的方法
function stopPP(e)
{
var evt = e|| window.event;
//IE用cancelBubble=true来阻止而FF下需要用stopPropagation方法
evt.stopPropagation ?evt.stopPropagation() : (evt.cancelBubble=true);
} - 写出程序运行的结果?
for(var i=0, j=0; i<10, j<6; i++, j++){
k = i + j;
}
10 - 编写一个方法 求一个字符串的字节长度
/*假设:一个英文字符占用一个字节,一个中文字符占用两个字节*/
function getBytes(str){
var len = str.length,
bytes = len,
i = 0;
for(; i<len; i++){
if (str.charCodeAt(i) > 255) bytes++;
}
return bytes;
}
alert(getBytes("玩,as")); - JavaScript中如何对一个对象进行深度clone?
function cloneObject(o) {
if(!o || 'object' !== typeof o) {
return o;
}
var c = 'function' === typeof o.pop ? [] : {};
var p, v;
for(p in o) {
if(o.hasOwnProperty(p)) {
v = o[p];
if(v && 'object' === typeof v) {
c[p] = Ext.ux.clone(v);
}
else {
c[p] = v;
}
}
}
return c;
}; - 如何控制alert中的换行?
\n alert(“p\np”);
- 请编写一个JavaScript函数 parseQueryString,它的用途是把URL参数解析为一个对象,如:
var url = “http://witmax.cn/index.php?key0=0&key1=1&key2=2″;function parseQueryString(url){
var params = {},
arr = url.split("?");
if (arr.length <= 1)
return params;
arr = arr[1].split("&");
for(var i=0, l=arr.length; i<l; i++){
var a = arr[i].split("=");
params[a[0]] = a[1];
}
return params;
}
var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2",
ps = parseQueryString(url);
console.log(ps["key1"]); - 如何控制网页在网络传输过程中的数据量?
启用GZIP压缩
保持良好的编程习惯,避免重复的CSS,JavaScript代码,多余的HTML标签和属性 - 以下代码运行结果
function say() {
// Local variable that ends up within closure
var num = 888;
var sayAlert = function() { alert(num); }
num++;
return sayAlert;
}
var sayAlert = say();
sayAlert();//889 - 请实现ECMAScript 5中的Object.getPrototypeOf() 函数
function proto(object) {
return !object? null
: '__proto__' in object? object.__proto__
: /* not exposed? */ object.constructor.prototype
} - 如何实现Array.prototype.forEach?
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(fn){
for ( var i = 0; i < this.length; i++ ) {
fn( this[i], i, this );
}
};
}
["a", "b", "c"].forEach(function(value, index, array){
assert( value, "Is in position " + index + " out of " + (array.length - 1) );
}); - 如何将arguments转为数组?
Object.prototype.slice.call(arguments);
- 以下程序运行结果?
var ninja = function myNinja(){
alert(ninja == myNinja);
};
ninja();
myNinja();
true、报错(error - myNinja is not defined.) - 如何获取光标的水平位置?
function getX(e){
e = e || window.event;
//先检查非IE浏览器,在检查IE的位置
return e.pageX || e.clentX + document.body.scrollLeft;
} - 兼容浏览器的获取指定元素(elem)的样式属性(name)的方法
function getStyle(elem, name){
if(elem.style[name]){//如果属性存在于style[]中,直接取
return elem.style[name];
}
else if(elem.currentStyle){//否则 尝试IE的方法
return elem.currentStyle[name];
}//尝试W3C的方式
else if(document.defaultView && document.defaultView.getComputedStyle){
name = name.replace(/([A-Z])/g, "-$1");//W3C中为textAlign样式,转为text-align
name = name.toLowerCase();
var s = document.defaultView.getComputedStyle(elem, "");
return s && s.getPropertyValue(name);
}else{
return null;
}
} - Javascript中实现类似PHP的print_r函数
function print_r(theObj) {
var retStr = '';
if(typeof theObj == 'object') {
retStr += '<div style="font-family:Tahoma; font-size:7pt;">';
for(var p in theObj) {
if (typeof theObj[p] == 'object') {
retStr += '<div><b>['+p+'] => ' + typeof(theObj) + '</b></div>';
retStr += '<div style="padding-left:25px;">' + print_r(theObj[p]) + '</div>';
} else {
retStr += '<div>['+p+'] => <b>' + theObj[p] + '</b></div>';
}
}
retStr += '</div>';
}
return retStr;
} - 以下程序运行结果?
var b = parseInt("01");
alert("b="+b);
var c = parseInt("09/08/2009");
alert("c="+c);
b=1、c=0。 - 以下程序的运行结果?
var foo = 'hello';
(function() {
var foo= foo || 'world';
console.log(foo);
})();
world - 如何规避javascript多人开发函数重名问题?
(1) 可以开发前规定命名规范,根据不同开发人员开发的功能在函数前加前缀
(2) 将每个开发人员的函数封装到类中,调用的时候就调用类的函数,即使函数重名只要类名不重复就行 - 前端开发有哪些优化问题?
减少http请求次数:cssspirit,data uri
JS,CSS源码压缩
前端模板JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能
用setTimeout来避免页面失去响应
用hash-table来优化查找
当需要设置的样式很多时设置className而不是直接操作style
少用全局变量
缓存DOM节点查找的结果
避免使用CSS Expression
图片预载
避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢 - AJAX请求总共有多少种CALLBACK
Ajax请求总共有八种Callback
onSuccess
onFailure
onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException - 请给出异步加载js方案,不少于两种
异步加载方式:
defer,只支持IE
async:
创建script,插入到DOM中,加载完毕后callBack,见代码:
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if(script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else {
//Others: Firefox, Safari, Chrome, and Opera
script.onload = function(){
callback();
};
}
script.src = url;
document.body.appendChild(script);
}
前端javascript知识(二)的更多相关文章
- 前端javascript知识(一)
介绍一下 JS 的基本数据类型. Undefined.Null.Boolean.Number.String 介绍一下 JS 有哪些内置对象. Object 是 JavaScript 中所有对象的父对象 ...
- 前端javascript知识(三)
函数记忆,判断是不是质数. 方法一: function isPrime1(n){ if(n<=3){return true} else{ for(var i=2;i<Math.sqrt(n ...
- 【原文】前端程序员必须知道的高性能Javascript知识
原文:前端程序员必须知道的高性能Javascript知识 想必大家都知道,JavaScrip是全栈开发语言,浏览器,手机,服务器端都可以看到JS的身影. 本文会分享一些高效的JavaScript的最佳 ...
- 快速掌握JavaScript面试基础知识(二)
译者按: 总结了大量JavaScript基本知识点,很有用! 原文: The Definitive JavaScript Handbook for your next developer interv ...
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
- 前端工程化(二)---webpack配置
导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...
- 实例演示 kino.razor (前端 Javascript 模板工具,Razor 风格)的使用
前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...
- 转:前端冷知识(~~some fun , some useful)
前端不为人知的一面——前端冷知识集锦 前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Qu ...
- 从头开始学JavaScript (十二)——Array类型
原文:从头开始学JavaScript (十二)--Array类型 一.数组的创建 注:ECMAscript数组的每一项都可以保存任何类型的数据 1.1Array构造函数 var colors = ne ...
随机推荐
- supervisor安装与配置实践版
应用场景 系统:centos7 需求:监控一个swooleWebSocket.php文件,程序使用的是8080端口,挂了自动被supervisor拉起来 一.首先要安装supervisor软件 yum ...
- Leetcode_开篇碎碎念
已经计划写leetcode3天了,但是到目前为止一道题还没有写,执行力我太差了. 写leetcode的原因有两个,一是锻炼自己代码水平,提高实力:二是考研据了解到的都会有上机考试,基本是c++,jav ...
- 3亿(int)数据-2亿(int)数据 求差集
两个大文本,每行一条int数据 3亿(int)数据-2亿(int)数据 求差集 原始(粗暴)办法 1redis set 或类似方案 本地内存 cpu都撑不住 2持久化两张表 sql join mysq ...
- 关于(int argc char **argv)
演示使用opencv显示一幅图片: #include <iostream> #include <core/core.hpp> #include <highgui/high ...
- LeetCode Day 12
LeetCode0024 给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 示例: 给定 1->2->3-> ...
- 同步linux系统时间
Linux的时间分为System Clock(系统时间)和Real Time Clock (硬件时间,简称RTC). 系统时间:指当前Linux Kernel中的时间. 硬件时间:主板上有电池供电的时 ...
- com.mysql.jdbc.exceptions.jdbc4.MySQLDataException: '2.34435678977654336E17' in column '3' is outside valid range for the datatype INTEGER.
### Error querying database. Cause: java.lang.reflect.UndeclaredThrowableException### The error may ...
- Servlet.service() for servlet [appServlet] in context with path [/item] threw exception [Request processing failed
以前犯过的一个小错误,不过忘记怎么修改了,所以还是记录下来好一点 严重: Servlet.service() for servlet [appServlet] in context with path ...
- tomcat启动后access error[730048]的解决方法
安装了JDK... 配置了系统变量... 解压了tomcat... 配置了系统变量... 点击startup.bat启动了以后,打开浏览器,出现access error 404错误. 仔细看过控制台输 ...
- <SDOI2009>学校食堂
我. 调了快一天 因为一个位置错误的感叹号 :-) !!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 狗dp #include<cstdio> #include<cstr ...