前端工程化实践一 (seajs to requirejs)

数字码影先锋
• 阅读 2194

近一个月里和同事一起将刚接手系统从sea.js切换到require.js。一方面感觉requirej比seajs更容易做工程化,一方面sea.js目前不更新了,而require社区仍然比较活跃。没有直接上vue或者react之类新潮的框架,是考虑到目前系统功能已经相对稳定了,业务复杂,组件数量很多,伤筋动骨的换框架一方面时间有限,一方面项目没有做单元测试,风险太大,后面新项目起来的话应该是会直接上react了。sea切换到require的改动相对来说比较固定,可以完全不动原有业务代码,工作量和风险可控。

不过个人其实对requirejs本身不太了解,期间还是掉进了几个坑里的。先总结下在切换到requirejs中遇到的两个问题吧。

1.requirejs不像seajs要求js文件被define、require包裹,可以直接require一个不符合规范的js

module1:
    (function(){
        window.myModule1 = {
            info:'module1'
        }
    })();
    
module2:
    (function(){
        if(window.myModule1){
            console.log(window.myModule1.info);
        }
    })();
    
main:
    require(['./module1', './module2'], function(){
        ...
    })

以上代码完全可以正常运行,不会报错。但会发现一个问题,多次执行的结果会不一致,这是因为module1和module2不是按照require数组参数里的顺序加载的,这种情况下没有固定的加载顺序。
有两种处理方式:
如果两个js都是业务代码可以自行维护,就把两个js都改成AMD规范

module1:
    define('module1', function(){
        window.myModule1 = {
            info:'module1'
        }
    });
    
module2:
    require(['module1'], function(){
        console.log(window.myModule1.info);
    })
    
main:
    require(['./module2'], function(){
        ...
    })

如果js是外部插件,尽量用不改源码的方式让两个js的加载变得有序。需要在require的config.js配置文件中加入一段代码,让requirejs知道两个js之间的依赖关系,保证module2在module1加载后再加载

requirejs.config({
    paths: {
        "module1": "./module1",
        "module2": "./module2"
    },
    shim:{
        "module2": ["module1"]
    }
})

2.require返回的对象全局共享一个。

module1:
    define('module1', [], function(){
        return {
            val : 0,
            init : function(){
                return this;
            },
            add : function(num){
                this.val += num;
            }
        };
    });

main:
    require(['module1'], function(m){
        m.init().add(1);
        console.log(m.val);  //1
    });
    require(['module1'], function(m){
        m.init().add(1);
        console.log(m.val);    //2
    });

以上例子说明,module1第一次被require以后,返回的对象m会被缓存起来,第二次被require的时候,返回的是之前缓存起来的m。多次require同一个模块时,返回的对象实际上是同一个。这与seajs是不同的,seajs每次异步加载都会返回一个,以前基于seajs写的代码里切换成require以后就会留下潜在的坑。
解决方法简单粗暴,所有返回对象的地方全换成返回function,执行function返回原对象。

module1:
    define('module1', [], function(){
        return function(){
            return {
                val : 0,
                init : function(){
                    return this;
                },
                add : function(num){
                    this.val += num;
                }
            }
        };
    });
    
main:
    require(['module1'], function(m){
        m().init().add(1);
        console.log(m.val);  //1
    });
    require(['module1'], function(m){
        m().init().add(1);
        console.log(m.val);    //1
    });
点赞
收藏
评论区
推荐文章
海军 海军
4年前
Vue权限路由[菜单权限/按钮权限控制]
前言&nbsp;&nbsp;&nbsp;年前完工了做了半年的铁路后台管理系统,系统整体业务比较复杂,这也是我到公司从0到1的一个完整系统实践,做这个系统过程中踩了不少坑,也学到了很多。</br&nbsp;做完这个系统没多久,紧接着又一个系统来了,没及时总结,惭愧哈!其实我们在做的后台管理系统大多数基础框架都一样,后台管理系统主要的是
徐小夕 徐小夕
4年前
从零到一教你基于vue开发一个组件库
前言Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完从0到1教你搭建前端团队的组件系统(https://juejin.im
徐小夕 徐小夕
4年前
基于jsoneditor二次封装一个可实时预览的json编辑器组件(react版)
前言做为一名前端开发人员,掌握vue/react/angular等框架已经是必不可少的技能了,我们都知道,vue或react等MVVM框架提倡组件化开发,这样一方面可以提高组件复用性和可扩展性,另一方面也带来了项目开发的灵活性和可维护,方便多人开发协作.接下来文章将介绍如何使用react,开发一个自定义json编辑器组件.我们这里使用了jsoneditor
Wesley13 Wesley13
3年前
Vtiger CRM 几处SQL注入漏洞分析,测试工程师可借鉴
本文由云社区发表0x00前言干白盒审计有小半年了,大部分是业务上的代码,逻辑的复杂度和功能模块结构都比较简单,干久了收获也就一般,有机会接触一个成熟的产品(vtigerCRM)进行白盒审计,从审计的技术难度上来说,都比公司内的那些业务复杂得多,而真正要提高自己技术水平,更应该看的也是这些代码。vtigerCRM是一个客
Wesley13 Wesley13
3年前
Thinkphp5 开发 OA 办公系统
很早之前就想开发一套OA办公系统,苦于没有机会。这次终于有机会,不管三七二十一,带上小伙伴们就开工了。考虑到开发成本和开发周期都比较紧张,就选择了比较熟悉的php语言,框架是thinkphp5。系统目前1.0版本没有太复杂的业务,设计之初是在满足基本功能需求的前提下,能简化就简化。比较麻烦的功能还是审批的功能,虽然没有像钉钉那样强大的自定义审批模板
Stella981 Stella981
3年前
SeaJS从入门到原理
最近项目中抛弃传统的<script而改用SeaJS这样的JS模块加载器了,确实模块加载器对于代码的可维护性带来了较大的提升。1、前言SeaJS是一个模块加载器,模块加载器需要实现两个基本功能:实现模块定义规范,这是模块系统的基础。模块系统的启动与运行。下文会围绕模块定义规范以
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
1分钟选好最合适你的JavaScript框架
Javascript框架(以下简称框架)也被称为Javascript库,是一组包含丰富功能和函数的JavaScript代码集,能够帮助开发者快速完成Web设计和开发工作。随着Web社区的越发活跃,新的框架也层出不穷,目前流行的有:Angular、React、Vue.js和Knockout等。面对如此丰富多样的框架,很多Web开发团队都感到难以抉择,性能、