使用javascript开发需知-js教程-PHP中文网

首页

web前端

js教程

使用javascript开发需知

伊谢尔伦

Nov 22, 2016 am 11:38 AM

javascript

开篇概述

Ajax技术在Gmail中的成功应用，和高性能的V8引擎的推出，使得编写Web应用变得流行起来，使用前端技术也可以编写具有复杂交互的应用。相对于原生应用，Web应用具有如下优点：

跨平台，开发和维护成本低；

升级和发布方便，没有版本的概念，随时随地发布，用户没有感知，不需要安装；

响应式设计(Responsive Design)使得Web应用可以跨平台，同一份代码自适应各种屏幕大小

即使最终不采用Web应用方案，也很适合开发原型

当然，Web应用也不是没有缺点。由于不同平台和厂商的浏览器并不完全一样，跨平台也有一些兼容成本。另外，Web应用的性能不如native应用，交互有时候不是很流畅，再加上HTML5的API上的限制，使得有些功能采用Web应用不太合适。由于这些原因，结合两者优点的混合方案变得流行起来（比如微信、手机QQ和手机QQ浏览器中会嵌入一些Web页面）。

根据笔者的开发经验，下面总结一些Web应用开发过程中的要面临的几个问题。

模块化编程

模块化编程是编写大规模应用必不可少的一个特性，与其它主流的编程语言相比 Javascript没有对模块提供直接的支持，更不用说维护模块之间的依赖关系，这使得维护Javascript代码变得异常困难，在3f1c4e4b6b16bbbd69b2ee476dc4f83a标签中包含代码的顺序需要人工维护。

要支持模块化编程必须解决两个问题：

支持编写模块并为模块命名，防止名字冲突和全局变量的使用；

支持显示指定模块之间的依赖关系，并在程序执行时自动加载依赖的模块。

Douglas Crockford在”Javascript: The Good Parts”一书中提出的Module Pattern利用Javascript的闭包技术来模拟模块的概念，防止名字冲突和全局变量的使用。这解决了第一个问题。

var moduleName = function () {
    // Define private variables and functions
    var private = ...
    // Return public interface.
    return {
        foo: ...
    };
}();

为了解决第二个问题CommonJS组织定义了 AMD规范方便开发者显示指定模块之间的依赖关系，并在需要时加载依赖的模块。 RequireJS是AMD规范的一个比较流行的实现。

首先我们在a.js中定义模块A.

define(function () {
    return {
        color: "black",
        size: 10
    };
});

然后定义模块B依赖模块A.

define(["a"], function (A) {
    // ...
});

当模块B执行时RequireJS保证模块A已被加载。具体细节可参考RequireJS官方文档。

脚本加载

最简单的脚本加载方式是放在93f0f5c25f18dab9d176bd4f6de5d30e加载。

<head>
    <script src="base.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
</head>

其缺点是：

加载和解析是顺序是同步执行的，先下载base.js然后解析和执行，然后再下载 app.js；

加载脚本时还会阻塞对3f1c4e4b6b16bbbd69b2ee476dc4f83a之后的DOM元素的渲染。

为了缓解这些问题，现在的普遍做法是将3f1c4e4b6b16bbbd69b2ee476dc4f83a放在6c04bd5ca3fcae76e30b72ad730ca86d的底部。

  <script src="base.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
</body>

但并不是所有的脚本都可以放在6c04bd5ca3fcae76e30b72ad730ca86d的底部，比如有些逻辑要在页面渲染时执行，不过大多数脚本没有这样的要求。

将脚本放在6c04bd5ca3fcae76e30b72ad730ca86d底部仍然没有解决顺序下载的问题，一些浏览器厂商也意识到了这个问题并开始支持异步下载。HTML5也提供了标准的解决方案：

<script src="base.js" type="text/javascript" async></script>
<script src="app.js" type="text/javascript" async></script>

标上async属性的脚本表明你没有在里面使用document.write之类的代码。浏览器将异步下载和执行这些脚本，并且不会组织DOM树的渲染。但是这会导致另一个问题：由于是异步执行，app.js可能在base.js之前执行，如果它们之间有依赖关系这将导致错误。

讲到这里从开发者角度来看我们其实需要的是这些特性：

异步下载，不要阻塞DOM的渲染；

按照模块的依赖关系解析和执行脚本。

所以脚本的加载其实需要与模块化编程问题结合起来解决。RequireJS不仅记录了模块之间的依赖关系，并且提供了根据依赖关系的按需加载和执行（详情请参考 RequireJS官方文档）。

关于脚本加载的更多方案请看这里.

静态资源文件的部署

这里的静态资源文件是指CSS、Javascript和CSS需要的一些图片文件。它们的部署需要考虑两个问题：

下载速度

版本管理

静态资源文件的一个特点变化不频繁，且与用户身份无关（即与Cookie无关），因此很适合缓存。另一方面，一旦静态资源文件变化时，浏览器必须从Web服务器下载最新的版本。当发布新版本的Web应用时，并不是所有用户马上就用上新版本，老版本和新版本将会共存，这就涉及到版本匹配问题。老版本的应用需要下载老版本的CSS和 Javascript，新版本的应用需要下载新版本的静态资源。

为了防止版本不一致，每当发布新版本的应用时静态资源文件都需要改名，让旧的 HTML引用旧的静态文件，新的HTML引用新的静态文件。一个常见办法就是在文件名中加时间戳；

为了防止悬挂引用，资源文件应该比HTML先发布。

上述方案可以解决版本问题，这样每个静态文件的缓存时间可以设置得任意大，防止重复下载，同时在新版本发布时浏览器将及时更新。

为解决下载速度问题，可以考虑以下几个方案：

合并静态文件以免文件数量过多，过多的文件需要更多的连接来下载，浏览器通常对同一个域名的连接数量有限制；

压缩静态文件；为了可读性，CSS和Javascript通常有很多空行、缩进和注释，这些在发布时都可以去掉；

静态文件通常与Cookie没有关系，所以为了减小传输大小和增加缓存命中率（缓存的key需要考虑Cookie），静态文件最好托管在没有Cookie的域名上；

最后也是最重要的，要使上述过程自动化。

MVC编程模型

Web应用采用的是事件驱动编程模型，与native应用是一样的，区别仅在于基础设施提供的API不一样。UI编程通常采用MVC设计模式，以流行的 Backbone.js为例包括如下部分：

Model

数据的唯一来源

负责获取和存储数据

可提供缓存机制

数据变化时通过事件通知其它对象

View

负责渲染

监听UI事件和Model事件并重绘UI

渲染结果取决于两类数据：Model和UI交互状态

UI的交互状态通常存在View对象中，有时候为了方便也存在DOM树节点中

为了降低渲染成本，尽量减少需要渲染的区域，每次当数据变化时只渲染受影响的区域

Router

负责监听URL的变化，并通知相应的View对象渲染页面

为了有效地使用MVC，有几个问题需要注意。

Model应与View完全隔离

Model仅提供数据的访问，不应该依赖View，因此Model不应该知道View的存在。所以 Model不能持有对任何View对象的引用。Model的数据发生变化时只能通过事件通知 View.

View在初始化时采用委派方式监听UI事件

这里有两个关键点：

在初始化时监听事件var View = Backbone.View.extend({ initialize: function () { this.$el.on(‘click’, ‘#id’, function () { // … }); } });

除了一些特殊情况外（请看下文），所有UI事件都应该在View初始化时初始化，防止同一个事件被绑定多次。即使有些事件是动态监听的（有时候需要监听，有时候有不需要监听，比如有些按钮有时候是有效的，有时候又无效），也需要在初始化时监听，然后在事件回调函数里判断是否需要处理。这样逻辑更简单，更容易维护。

采用委派方式监听UI事件

关于委派方式监听请参考jQuery文档.

上面已强调要在初始化时监听事件，但是初始化时需要监听的DOM节点可能还不存在，所以没法直接绑定事件，只能采用委派方式。不过采用委派方式要求事件可以冒泡。

对于那些没法冒泡的事件（比如a1f02c36ba31691bcfe87b2722de723b的load事件）只能在保证其存在的情况下直接绑定，而不一定要在初始化时绑定。

复杂的View组织成树形层次结构

函数太大了需要拆分成几个子函数。同样，View的逻辑如果过于复杂也应根据页面结构拆成几个子View：

父View通过引用访问子View，但是子View不应该持有父View的引用；

子View只负责自己区域的渲染，其它区域由父View负责渲染；

父View通过函数调用访问子View的功能，子View通过事件与父View通信；

子View之间不能直接通信。

其它技巧可查看 Backbone技巧与模式.

离线应用缓存

为使Web应用体验更加流畅，可考虑使用HTML5离线应用缓存，不过有以下几点需要注意：

不要将离线应用缓存与HTTP缓存机制搞混淆，前者是HTML5引入的新特性，与HTTP缓存机制是相互独立并存的；

Cache manifest文件不应被HTTP缓存太久（通过HTTP头Cache-Control控制缓存时间），否则发布新版后浏览器不会及时监测到变化并下载新文件；

在Cache manifest文件的NETWORK节放一个*，否则没有列在这个文件的资源不会被请求；

不适合缓存的请求最好都放在NETWORK节；

如果之前使用过离线应用缓存现在不想再使用了，从100db36a723c770d327fc0aef2ce13b1删除manifest属性，并发送404响应给manifest文件请求。仅仅删除manifest属性是没有效的。

线上错误报告

Javascript是一个动态语言，许多检查都是在运行时执行的，所以大多数错误只有执行到的时候才能检查到，只能在发布前通过大量测试来发现。即使这样仍可能有少数没有执行到的路径有错误，这只能通过线上错误报告来发现了。

window.onerror = function (errorMsg, fileLoc, linenumber) {
    var s = &#39;url: &#39; + document.URL + &#39;\nfile: &#39; + fileLoc
       + &#39;\nline number: &#39; + linenumber
       + &#39;\nmessage: &#39; + errorMsg;
    Log.error(s); // 发给服务器统计监控
    console.log(s);
};

通常线上的Javascript都是经过了合并和压缩的，上报的文件名和行号基本上没法对应到源代码，对查错帮助不是很大。不过最新版的Chrome支持在onerror的回调函数中获取出错时的栈轨迹：window.event.error.stack.

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript在行动中：现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。