前不久有个网友问我在前端使用requireJs和seajs的问题,我当时问他你们公司以前有没有自己编写的javascript库,或者javascript框架,他的回答是什么都没有,他只是听说像requirejs和seajs是新东西新技术,很有价值所以想用它。

  这位网友的问题引起了我对javascript模块加载技术的思考,上篇文章我给出了自己写的一个javascript库的基本结构,其实写这篇文章的一个起因就是因为我想使用requirejs或者seajs这样的技术来重新设计我写javascript库的基本模型,当我深入了解这个技术后,我发现使用模块加载系统来解决把javascript库里通用代码和业务代码解耦的问题,是不正确的,模块加载系统的作用范围是解决不同javascript库之间的依赖问题,而不是帮助你去如何开发一个javascript库。

  那么什么是javascript的模块加载系统呢?

  模块系统主要为了解决不同javascript库里操作对象的命名冲突问题以及不同javascript库之间依赖的问题,模块加载系统是针对大型web前端应用或者说是巨型的web前端应用。

  一般巨型的web前端应用页面里,该页面的功能非常丰富,业务非常庞杂,而且随着时间推移,页面的功能经常会发生变迁,所以导致前端开发人员经常要开发出针对新功能的功能模块,但是实际业务里各个功能模块之间的功能还有可能相互渗透,相互依赖的,关系错综复杂,当页面复杂后,各个前端库之间的关系就出现很难管理和控制的问题,这个时候模块加载系统才会派上用场。

  对于大多数程序员而言,能独立承担这么大web前端应用的机会并不是太多,而开发中小型web前端应用的机会会多的多,例如企业级的web项目,这样的项目使用到的javascript库的种类很少,各个库的依赖关系很好控制,是没有必要引入什么模块管理系统的必要,就算很多中小型互联网公司的网页,估计也不会比企业级web应用前端那么复杂,所以它的模块之间或者说javascript库之间的关系很好管理的。其实像上面这些中小应用都是针对某些或某一个具体场景进行的,因此我个人觉得面对这样的web前端项目我们最后能自己形成一个独立的javascript库,这个库的特点应该和jQuery这种类型的库类似:一个主库加上若干个插件库的模式,主库的目的是解决通用性的问题,它应该是可以进行复用和迁移的,而插件库的目的往往和业务代码相关的,不过为了区别主库和插件库的作用域问题,所以我在库里加上了命名空间的功能。

  Javascript模块加载技术和hadoop的技术有些相同点,那就是它们都是针对超大型系统的技术,它们只有在一定条件下才能发挥它们的作用,所以这些技术都是从大型互联网公司推出出来,因为大型互联网公司随着应用变大变复杂后必须要去解决的问题,当你系统还是处于起步阶段,这些技术的运用往往要谨慎,我们应该找出最简单最有效的方法解决我们实际问题,如果你觉得这个系统以后会越来越大,那么你应该保留以后使用这些技术的接口,如果使用太早了,很有可能当系统规模扩大后,你重构代码的代价会更高。

  对于模块加载系统,它最适合的场景是解决大型web前端应用模块之间的解耦的问题,如果我们只要新写一个javascript文件就马上使用模块加载技术,这个不是有点滥用技术的嫌疑了,我们运用某个技术之前不应该只是考虑它怎么用,如何用,应该还要想想使用它有没有价值的问题。

  最后我想说的是,我觉得中小型web前端应用到了生产部署,因为javascript并非最复杂,所以所有外部javascript文件都打包成一个javascript外部文件最好,这样的好处就是减少了http请求个数,使用模块加载技术会让你打包文件操作很麻烦,甚至无法做到(像requirejs和seajs的模块都是以文件为单位的,每个模块就是一个独立文件),这和解决减少http目的是相悖的。

关于javascript模块加载技术的一些思考的更多相关文章

  1. 转: javascript模块加载框架seajs详解

    javascript模块加载框架seajs详解 SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加 ...

  2. javascript模块加载框架seajs详解

    SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加载).SeaJS可以和jQuery完美集成,使用 ...

  3. seajs实现JavaScript 的 模块开发及按模块加载

    seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http:/ ...

  4. javascript中的闭包、模块与模块加载

    一.前言 闭包是基于词法作用域(  和动态作用域对应,词法作用域是由你写代码时,将变量写在哪里来决定的,因此当词法分析器处理代码时,会保持作用)书写代码时所产生的自然结果,甚至不需要为了利用闭包而有意 ...

  5. javascript 异步模块加载 简易实现

    在javascript是没有类似java或其他语言的模块概念的,因此也不可能通过import或using等关键字来引用模块,这样造成了复杂项目中前端代码混乱,变量互相影响等. 因此在复杂项目中引入AM ...

  6. JavaScript AMD 模块加载器原理与实现

    关于前端模块化,玉伯在其博文 前端模块化开发的价值 中有论述,有兴趣的同学可以去阅读一下. 1. 模块加载器 模块加载器目前比较流行的有 Requirejs 和 Seajs.前者遵循 AMD规范,后者 ...

  7. 抛砖引玉:探讨网站性能优化之Javascript异步懒加载技术

    懒加载技术是现在许多大型网站的都使用的提高网站性能的方式,它的核心思想是当用户想看页面某个区域时,再加载该区域的数据.这在一定程度上减轻了服务器端的压力,也加快了页面的呈现速度. 其实国内很多网站都用 ...

  8. 第三章:模块加载系统(requirejs)

    任何一门语言在大规模应用阶段,必然要经历拆分模块的过程.便于维护与团队协作,与java走的最近的dojo率先引入加载器,早期的加载器都是同步的,使用document.write与同步Ajax请求实现. ...

  9. FaceBook页面加载技术

    1. 技术背景 FaceBook页面加载技术 试想这样一个场景,一个经常访问的网站,每次打开它的页面都要要花费6 秒:同时另外一个网站提供了相似的服务,但响应时间只需3 秒,那么你会如何选择呢?数据表 ...

随机推荐

  1. TODO:Node.js pm2使用方法

    TODO:Node.js pm2使用方法 pm2 是一个带有负载均衡功能的Node应用的进程管理器. 当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载, PM2是完 ...

  2. web api 初体验 解决js调用跨域问题

    跨域界定 常见跨域: 同IP不同端口: http:IP:8001/api/user     http:IP:8002/api/user 不同IP不同端口: http://172.28.20.100:8 ...

  3. 用MFC时,如果程序崩溃,检查内存,然后注意GDI数量,在任务管理器里选项-查看列-GDI数量

    用MFC时,如果程序崩溃,检查内存,然后注意GDI数量,在任务管理器里选项-查看列-GDI数量

  4. C语言指针与数组的定义与声明易错分析

    部分摘自<C语言深度解剖> 1.定义为数组,声明为指针 在文件1中定义: char a[100]; 在文件2中声明: extern char *a; //这样是错误的 这里的extern告 ...

  5. selenium+python登录登出百度,等待页面加载,鼠标定位

    #coding:gbk from selenium import webdriver from selenium.webdriver.common.keys import Keys from sele ...

  6. IIS 之 HTTP错误 404.17 - Not Found(请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理。)

    问题描述:HTTP 404.17 - Not Found" IIS 7.5 请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理 .   出现这种情况的原因通常是因为先安装了Framew ...

  7. linux下安装php扩展redis缓存

    下载phpredis安装包 wget https://github.com/nicolasff/phpredis/tarball/master 在下载目录解压phpredis.tar.gz tar z ...

  8. Mvc 异常处理 ajax的 和 不是ajax的!

    using ImageUpload.Auth; using System; using System.Collections.Generic; using System.Linq; using Sys ...

  9. 移动端吸顶(iOS与安卓)

    有的时候经常会遇到移动端吸顶效果,开始我也只是上网查了一下,分别有iOS和android两种样式,如下: /*!*Android*!*/ .head { position: fixed; top: 0 ...

  10. Bandwagon的配置记录(一) —— kexue上网

    写在前面 这是kexue上网的一种方法. 看文章前,先拉最底下,看一遍“写在最后”. 租个服务器 我租了个洛杉矶的服务器,系统是ubuntu16.04 x86_64 进入KiwiVM Control ...