Front-end JavaScript Knowledge (ii)

• The difference between Documen.write and innerHTML

  document.write只能重绘整个页面innerHTML可以重绘页面的一部分

• What does the browser detect through?

  （1） navigator.userAgent（2） 不同浏览器的特性，如addEventListener

• What kinds of data types are available for JavaScript?

  简单，Number，Boolean，String，Null，Undefined复合，Object，Array，Function

• Intercept the "Fghi" of the string "Abcdefghi"

  var myvalue=”abcdefghi”;var jiequ=myvalue.substring(myvalue.length-4,myvalue.length);alert(jiequ);

  -Write the result of the following operation

  alert(typeof(null)); // objectalert(typeof(undefined)); // undefinedalert(typeof(NaN)); // numberalert(NaN==undefined); // falsealert(NaN==NaN); // falsevar str="123abc";alert(typeof(str++)); // numberalert(str);// NaN

• Q: What are the values of x, Y, and Z after the execution is complete?

  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

• How do I block events from bubbling?

  //阻止冒泡的方法function stopPP(e){  var    evt = e|| window.event;  //IE用cancelBubble=true来阻止而FF下需要用stopPropagation方法  evt.stopPropagation ?evt.stopPropagation() : (evt.cancelBubble=true);}

• Write out the results of the program run?

  for(var i=0, j=0; i<10, j<6; i++, j++){  k = i + j;}10

• Write a method to find the byte length of a string

  /*假设：一个英文字符占用一个字节，一个中文字符占用两个字节*/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"));

• How does a deep clone of an object be in JavaScript?

  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;};

• How do I control line breaks in alert?

  \n alert(“p\np”);

• Write a JavaScript function, parsequerystring, whose purpose is to parse the URL parameter into an object, such as:
  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"]);

• How to control the amount of data in a Web page during transmission?

  启用GZIP压缩保持良好的编程习惯，避免重复的CSS，JavaScript代码，多余的HTML标签和属性

• The following code runs the result

  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

• Please implement the object.getprototypeof () function in ECMAScript 5

  function proto(object) {  return !object?                null      : ‘__proto__‘ in object?  object.__proto__      : /* not exposed? */      object.constructor.prototype}

• How to implement 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) );});

• How do I convert arguments to arrays?

  Object.prototype.slice.call(arguments);

• The following program runs the results?

  var ninja = function myNinja(){  alert(ninja == myNinja);};ninja();myNinja();true、报错（error - myNinja is not defined.）

• How do I get the horizontal position of the cursor?

  function getX(e){  e = e || window.event;  //先检查非IE浏览器，在检查IE的位置  return e.pageX || e.clentX + document.body.scrollLeft;}

• The
• compatible browser's method of getting the style attribute (name) of the specified element (elem)

    function GetStyle (elem, name) {if ( Elem.style[name]) {//If the attribute exists in style[], directly take return elem.style[name];} else if (Elem.currentstyle) {//otherwise try IE method return elem.currentstyle[name];} Try to make a way to the other if (Document.defaultview && document.defaultView.getComputedStyle) {name = Name.replace (/([A-Z      ])/g, "-$1"),//w3c in textalign style, to text-align name = Name.tolowercase ();      var s = document.defaultView.getComputedStyle (Elem, "");  return s && s.getpropertyvalue (name);  }else{return null; }}

• PHP-like Print_r functions implemented in JavaScript

  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;}

• The following program runs the results?

  var b = parseInt("01");alert("b="+b);var c = parseInt("09/08/2009");alert("c="+c);b=1、c=0。

• Running results for the following programs?

  var foo = ‘hello‘;(function() {     var foo= foo || ‘world‘;     console.log(foo);})();world

• How to avoid JavaScript multi-person development function name problem?

  (1) 可以开发前规定命名规范，根据不同开发人员开发的功能在函数前加前缀(2) 将每个开发人员的函数封装到类中，调用的时候就调用类的函数，即使函数重名只要类名不重复就行

• What are the optimization issues with front-end development?

  减少http请求次数：cssspirit,data uriJS，CSS源码压缩前端模板JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能用setTimeout来避免页面失去响应用hash-table来优化查找当需要设置的样式很多时设置className而不是直接操作style少用全局变量缓存DOM节点查找的结果避免使用CSS Expression图片预载避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

• How many types of Ajax requests are there in total callback

  Ajax请求总共有八种CallbackonSuccessonFailureonUninitializedonLoadingonLoadedonInteractiveonCompleteonException

• Please give the asynchronous loading JS scheme, not less than two kinds of

  异步加载方式：defer，只支持IEasync：创建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);}

Front-end JavaScript Knowledge (ii)