【转载】工作中遇到的js问题以及问题的解决方案

Js执行机制，主线程，和队列任务：

 

// 无论js中有多少代码，最终都是要通过js引擎去执行

 

// 异步代码都是浏览器引擎去控制的，（定时器计时，和ajax请求，都是由浏览器引擎控制的）也就是管定时器秒数走，还有请求ajax和捕捉事件发生

 

当异步代码的事件触发了（比如定时器时间到了，用户触发了事件，还有ajax请求成功了），那么就会把事件的回调函数，放到队列任务中，当js引擎空闲后，就会去把队列任务中的函数，拿到js引擎中，让js引擎去执行。//:备注：定时器，还有ajax请求，都是浏览器引擎去操作的，每当js引擎在执行的时候遇到一个定时器/ajax，js引擎就会告诉浏览器去开一个线程去控制定时器/ajax，，然后js引擎就会跳过ajax/定时器，接着执行下面的代码；

 

用户的操作事件（比如点击，等等），都是有一个单独的引擎实时监控着；名称叫做，浏览器事件引擎，当用户触发了页面的某个元素后事件后，浏览器事件引擎就会把事件所对应的回调函数，放到任务队列中，等待js引擎去执行

 

元素. body.scrollTop = 300；网页被卷出去的高或者左，为异步， 这句话的概念是会先负值，但滚动条不会立马滚动，而是会1秒之后滚动；

 

备注：以上3中(定时器，ajax，和用户的行为所触发的事件)，都是属于异步

重要：异步的含义是：浏览器重新开个线程，主线程接着往下执行。

 

获取元素的offsetWidth，clientWidth，scrooHeight的注意事项：

      2点影响条件：

       1，创建的元素，必须把他放进html结构中，才能获取到宽度;

       2 , 第二，元素必须是显示的，如果元素是display:none的话，则获取不到;

       InnerHTML = 值，只接受字符串，系统会将字符串转换为dom元素对象;

       Window.onload ；当页面有（异步事件），往页面渲染dom元素的时候，如果js需要获取dom元素的话，js外围必须包上window.onload  = function(){

          获取元素代码

       }

 数组和对象的相同点，无论是js还是php：

　　数组和对象都是key，value形式的;

　　数组[key] 获取到value；

　　对象.key 获取到value;

　　换句话说，一个key对应一个value

 

带确定，取消按钮的弹出框，点击确定将执行事件的默认执行，取消，则不执行事件的默认行为： 

     如果你写成onclick="function(){returtn confirm('弹出框所显示的文字 ')}"也可以,但是默认总是是返回True,确定、取消都无效.

     如果你写成onclick="function(){return confirm(' 弹出框所显示的文字')}"加了return就相当于加了一个确定、取消的开关,如果是确定,就return True,反之return False；

     Return true 就会执行事件的默认行为

     Return false； 就会取消事件的默认行为;

 

From表单提交注意事项：

　　Form表单中加上enctype="multipart/form-data" 说明，后台可以接受到file上传的图片，如果不加enctype="multipart/form-data" 后台则无法获取到传给后台的图片;

　　注意点：

　　1： 同一个file控件<input type=”file”/> 连续重复读取了同一个文件，则第二次及以后，则读取不出来,读取出来就是个空字符串，

　　2：一个form表单中，有多个file控件<input type=”file” name=”file”/> 。并且控件的name名字都一样，那么当使用form表单提交的时候，提交的是最后一个读取的文件（也就是最后一个操作的file控件他所            读取的文件）。

　　3：当使用file文件控件 上传（图片或者其他文件）的时候，是先把（图片或者其他文件）存到了file文件控件中，然后才传送给后台，当file文件控件 存入了用于上传的文件后，就会触发file控件的onchange事件;

      注意：以上仅仅是将文件保存到了file文件控件中，还并没有提交给后台；

 

Textarea标签 多行文本控件：注意事项

 

　　1：不支持直接在html中直接写value;就是写了也不会显示value的值;

　　2 : 可以用js动态写value，这样则会显示;

　　3: 支持value属性和innerHTML属性,无论写那个，都是会显示写入的文本；

　　4: value的优先级要大，value可以覆盖innerhtml;但innerhtml无法覆盖value

　　5: 使用value可以获取innerhtl的值，但innerHTML ，则无法获取value的值;

　　6:Textarea.inerhtml中，只允许直接写文本，不允许写标签，就算是写了标签也不会解析成html元素，另外，文字在textarea中是怎么写的，他就怎么显示，例如：

 　　

　　页面上显示为

 　　

 

　　Js中获取textarea.innerHTML/value 中的文字，显示为

 　　

　　7 : 往textarea元素中写入的时候，建议用inenrHTML, 获取的时候用value;

多个script标签之中的变量或者函数互相调用详解

 

          多个script标签共用一个window对象，每个script标签里面代码执行完毕之后，才会进入下一个script标签中去执行，并且每个script标签，都会有预解析的情况， 但预解析的时候，都是提升到第1个script标签的顶部，无论下方到多少个script标签，变量提升的时候，都是提升到第1个script标签的顶部。

         第0个script标签里面也可以用任何script标签里面的变量或者函数，只要代码执行的时候，变量和函数，已经被声明，那么就可以使用；

         再次提醒：变量和函数提升的时候，都是提升到第0个script标签的顶部。

 　　

渲染页面技巧

 

　　1：A视图中的js 、css 放到A视图中，B视图中的js 、css放到B视图中；

 

　　2：A页面中的ajax请求B视图中的html、css、js, 然后渲染到A页面中，实现局部（更新A页面）；

 

　　3: 先后台执行，再前台执行；

 

　　4：浏览器是执行html，css，js的;

 

　　5 : 如果将css写在style标签中， js写在script标签则css和js也属于html，浏览器执行的时候，是先将style标签中的css和script标签中的js当成html渲染到页面上，然后再将style标签中css按照样式执行，以及script标签中js按照行为执行。

 

 　　如果css是用style标签引入到页面中的，则就不会将style标签引入的css当成html来渲染到页面中了， 则是直接当成样式执行。

 

 　　如果js是用script标签引入到页面中的，则就不会将script标签引入的js当成html来渲染到页面中了， 则是直接当成行为执行。

 

js解决 获取浏览器url中文编码问题：

 

　　decodeURIComponent(   %E6%9C%AC  );解码， 解成中文的;

　　encodeURIComponent( 文字); 编码， 将中文文字给编码，编码后变成这种形式-》%E6%9C%AC。

 

document.write()方法可以用在两个方面：

 

 1.页面载入过程中，用脚本加入新的页面内容：

    

  2.用延时脚本创建本窗口或新窗口的新的内容 , 替换掉窗口之前的所有内容：

      答： 在载入内容渲染完毕后（不包括所有js），浏览器输出流自动关闭。在此之后，任何一个对当前页面进行操作的document.write()方法将打开—个新的输出流，它将清除当前页面内容(包括源文档的任何变量或值)。因此，假如希望用脚本生成的HTML替换当前页面，就必须把HTML内容连接起来赋给一个变量，使用一个document.write()方法完成写操作。