1 假如浏览器不支持JavaScript怎么办?
a.为什么浏览器会不支持?大部分浏览器都有禁用脚本的功能,例如chrome。

b.在js被禁用的情况下要保证网页仍能实现它的核心功能(关键的用户需求)
例子:在一个新窗口里打开链接,可以使用BOM的open()方法

 function popUp(winURL) {
window.open(winURL, "popup", "width=320,height=480");
}

具体的js实现有以下几个方案:
    方案一:使用javascript伪协议:<a href="javascript:popUp('http://www.example.com');return false;">Example</a>
    方案二:使用内嵌的事件处理函数:<a href="#" onclick="popUp('http://www.example.com');return false;"></a>
以上两种种实现方案,在js被禁用时,“在一个新窗口里打开链接”这个需求就无法满足了。所以,不能为了单纯使用js而滥用js。下面这个实现方案就为js预留出了退路,即所谓平稳退化(留好js被禁后的退路)
   方案三:平稳退化<a href="http://www.example.com" onclick="popUp(this.href;return false;)">

2 如何将网页的结构、内容与JavaScript脚本的动作分离开?为什么要分离开?
a.分工明确,各干各的,然后才是协作:
网页结构、内容-由html来做、网页的样式-由CSS来做、网页的行为-由JavaScript来做
b.分离js代码其实很简单,js代码不要求事件必须在html中处理,可以在外部js文件里将一个事件添加到html文档中的某个元素上。例如:

    window.onload = paperLinks
function paperLinks() {
var links = document.getElementsByTagName("a");
for (var i=0; i<links.length;i++){
if (links[i].getAttribute == "popup") {
linnks[i].onclick = function() {
popUp(this.getAttribute("href"));
return false;
}
}
}
}

3 浏览器的兼容性问题

新老要通吃,尤其要注意老的,即向后兼容。不同的浏览器对js的支持程度不一样,比如document.getElementsByClassName(classname)IE6就不支持,加一个检查语句就可以检查兼容性问题:if(!document.getElementsByClassName) return false;

4 性能考虑
为什么要考虑脚本执行的性能?性能是永远要考虑的问题,这涉及到你编写的网页能否顺利的加载。
如何保证脚本执行的性能是最优的?
a.尽量少访问dom和少使用标记,例如:少用循环遍历

 var links = document.getElementsByTagName("a");
if (links.length > 0) {
for (var i=0; i<links.length; i++) {
//......
}
}

就要比下面的代码性能要好

 if (document.getElementsByTagName("a").length > 0) {
var links = document.getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
//......
}
}

b.合并脚本(js代码),减少页面加载时发送的请求数量;将<script>标签放置于文档末尾,在</body>结束之前,这样可以让页面加载的快些,且不影响js的加载。

c.压缩脚本,将js代码中不必要的空格、注释删除,甚至可以将变量名简化。可以准备两个版本的js:一个是工作版本,用于修改代码和注释,另一个为精简版本,则用于发布。

javascript学习总结(三):如何较好的使用js。的更多相关文章

  1. JavaScript学习记录三

    title: JavaScript学习记录三 toc: true date: 2018-09-14 23:51:22 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  2. JavaScript学习第三天

    今天学习第三天. 凡事都是需要坚持的,坚持下去. 学习内容: 1.document.getElementById(""),document.getElementByTagName( ...

  3. Javascript学习笔记三——操作DOM(二)

    Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...

  4. JavaScript学习笔记(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  5. JavaScript学习总结(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  6. javascript学习(三) 内置对象

    一:事件(Event)对象 在触发dom事件的时候都会产生一个event对象 type   获取事件类型 target  获取事件目标 stopPropagation()  阻止事件冒泡 preven ...

  7. JavaScript学习总结(三)——闭包、IIFE、原型、函数与对象

    一.闭包(Closure) 1.1.闭包相关的问题 请在页面中放10个div,每个div中放入字母a-j,当点击每一个div时显示索引号,如第1个div显示0,第10个显示9:方法:找到所有的div, ...

  8. Javascript学习总结三(Array对象的用法)

    javascript Array对象的常用API 1:concat concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本.举例:var a1 = [ ...

  9. JavaScript学习笔记(三十八) 复制属性继承

    复制属性继承(Inheritance by Copying Properties) 让我们看一下另一个继承模式—复制属性继承(inheritance by copying properties).在这 ...

  10. JavaScript学习总结(三)——逻辑And运算符详解

    在JavaScript中,逻辑 AND 运算符用双和号(&&)表示 1 var bTrue = true; 2 var bFalse = false; 3 var bResult = ...

随机推荐

  1. [转]单点登录SSO学习——CAS协议内容

    作者:anmaler 本文转自:http://blog.zhaojunling.me/p/24 CAS中文文档甚少,这篇文章对CAS接口参数有比较清楚的说明,排版也不错查阅舒适 在当前互联网产品中使用 ...

  2. STC12C5A60S2笔记7(定时器)

    1. 基本特性 STC12C5A60S2单片机集成了两个16位定时/计数器. 1)寄存器 1.1)TMOD 定时器工作方式控制寄存器,包括13位寄存器.16位寄存器.8位寄存器等: 1.2)TCON ...

  3. Razor.js,基于JavaScript的Razor实现

    哈罗大家好,之前造了JS模板轮子Otmpl,虽然勉强算不错,但是和MVC Razor的简洁优雅相比,简直是惨不忍睹.经过几天的研究,终于在参考国外一些牛人的代码后,展现出第一版,欢迎各位园友拍砖讨论. ...

  4. angularjs组件之input mask

    今天将奉献一个在在几个angularjs项目中抽离的angular组件 input mask.在我们开发中经常会对用户的输入进行控制,比如日期,货币格式,或者纯数字格式之类的限制,这就是input m ...

  5. Ubuntu下安装 jdk6

    Ubuntu下安装 jdk6 罗朝辉 (http://www.cnblogs.com/kesalin/) 本文遵循“署名-非商业用途-保持一致”创作公用协议   1,下载最新的 jdk6 版本,目前最 ...

  6. java程序 启动时参数

      iEMP34:/opt/version/lktest/b030/jre/jre_linux/bin # ./java -classpath . SysInfo Exception in threa ...

  7. vi小结1

    我使用xshell,vi里面中文乱码: http://www.cnblogs.com/TianFang/archive/2013/01/21/2870181.html 发现他的问题(gcc编译出错时会 ...

  8. 为什么PCB上的单端阻抗控制50欧姆

    很多刚接触阻抗的人都会有这个疑问,为什么常见的板内单端走线都是默认要求按照50欧姆来管控而不是40欧姆或者60欧姆?这是一个看似简单但又不 好回答的问题.在写这篇文章前我们也查找了很多资料,其中最有知 ...

  9. NSString NSNumber 相互转化

    NSNumberFormatter *numFormatter = [[NSNumberFormatter alloc] init]; NSNumber *firstNum = [NSNumber n ...

  10. Java-数组练习1

    1.已知2个一维数组:a[]={3,4,5,6,7},b[]={1,2,3,4,5,6,7}:把数组a与数组b 对应的元素乘积再赋值给数组b,如:b[2]=a[2]*b[2]:最后输出数组b的元素. ...