require 那点事

require 提供了一个 模块管理的方案 不太熟悉的话挺多暗坑 团队引入 需谨慎 彻底熟悉后 再引入项目

ADM规范

Asynchronous Module Definition - 异步加载模块规范

解决模块化编程带来的代码加载先后顺序问题及常规异步加载代码带来的不确定因素

载入require实现模块化编程


1

<script src="/static/js/require.min.js" data-main="/static/js/shop"></script>

data-main指定了入口配置文件shop.js，同时指定了基于shop.js的相对路径baseUrl，baseUrl可以在config配置方法内重置

require.config配置方法

baseUrl重置相对路径


1

2

3

require.config({

    baseUrl : ‘js/lib‘

});

paths配置待调用模块路径


1

2

3

4

5

6

require.config({

    paths : {

        jquery : ‘jquery.min‘,

        control : ‘control‘

    }

});

已配置路径的模块的调用方式


1

2

3

require([‘jquery‘, ‘control‘], function ($, Control){

    return true;

});

shim垫片


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

require.config({

    paths : {

        underscore : ‘underscore.min‘,

        backbone : ‘backbone.min‘

    },

    shim : {

        underscore : {

            exports : ‘_‘

        },

        backbone : {

            deps : [‘underscore‘],

            exports : ‘Backbone‘

        }

    }

});

有时我们需要使用非AMD定义模块，如jQuery，需要shim参数来帮助解决这些库的解析名称及载入顺序问题

项目入口配置文件shop.js代码展示


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

require.config({

    paths : {

        jquery   : ‘jquery.min‘,

        jqmd5    : ‘jquery.md5‘,

        cookie   : ‘public/cookie‘,

        jqui     : ‘jquery.ui.min‘, /* 前端UI框架 */

        jquid    : ‘jquery.ui.dialog.min‘, /* 前端UI框架 - 模态框模块 */

        jqtmpl   : ‘jquery.tmpl.min‘, /* 模版引擎 */

        jqvali   : ‘jquery.validation.min‘, /* 表单验证 */

        jqvalicn : ‘jquery.validation.cn.min‘, /* 表单验证汉化 */

        base     : ‘base‘, /* 基础功能 */

        control  : ‘control‘, /* 控制器模块 */

        login    : ‘login/index‘, /* 登录页模块 */

        register : ‘register/index‘, /* 注册页模块 */

        detail   : ‘detail/index‘ /* 详情页模块 */

    }

});

require([‘control‘], function (Control){

    Control.cookie();

    Control.template();

});

定义模块的define方法

独立模块


1

2

3

4

define(function (){

    var control = {};

    return control;

});

该模块调用不依赖其它模块

依赖模块


1

2

3

4

define([‘base‘], function (){

    var control = {};

    return control;

});

该模块调用需要依赖base模块

项目控制器模块control.js代码展示


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

define([‘jquery‘, ‘jqmd5‘, ‘cookie‘, ‘base‘], function (){

    var control = {};

    /**

     * 登录状态检测

     */

    control.cookie = function (){

        setTimeout(WK.LC.syncLoginState, 100);

    };

    /**

     * 模块调用及配置

     */

    control.template = function (){

        if($(‘.naver‘).length > 0) base.naver();

        if(CATEGORY == ‘login‘)

        {

            if(MODEL == ‘index‘){

                // 登录页

                require([‘login‘], function (Login){

                    Login.form();

                });

            };

            if(MODEL == ‘register‘ || MODEL == ‘check‘){

                // 注册页

                require([‘register‘], function (Register){

                    Register.form(MODEL);

                });

            };

        };

        if(CATEGORY == ‘goods‘)

        {

            // 详情页

            if(MODEL == ‘index‘){

                require([‘detail‘], function (Detail){

                    // Detail.form();

                });

            };

        };

    };

    return control;

});

加载模块的require方法

异步加载


1

2

3

4

require([‘control‘], function (Control){

    Control.cookie();

    Control.template();

});

AMD模式

定义模块的define方法和调用模块的require方法，合称AMD模式

该模式的定义模块方法清晰且不会污染全局环境，能够清楚的显示依赖关系

require是一款可以帮助我们架构好前端框架的好工具，为我们带来更为方便的模块化编程，轻松控制好模块载入的数量和顺序，并且性能优秀
时间： 2024-10-11 07:36:18

require 那点事的相关文章

JSPatch实现原理详解

本文转载至 http://blog.cnbang.net/tech/2808/ JSPatch以小巧的体积做到了让JS调用/替换任意OC方法,让iOS APP具备热更新的能力,在实现 JSPatch 过程中遇到过很多困难也踩过很多坑,有些还是挺值得分享的.本篇文章从基础原理.方法调用和方法替换三块内容介绍整个 JSPatch 的实现原理,并把实现过程中的想法和碰到的坑也尽可能记录下来. 基础原理 能做到通过JS调用和改写OC方法最根本的原因是 Objective-C 是动态语言,OC上所有方法的

Lua简易入门教程

环境:lua for windows (lfW)主页:http://luaforwindows.luaforge.net/https://code.google.com/p/luaforwindows/ lua for windows其实是一整套Lua的开发环境,它包括:Lua Interpreter(Lua解释器)Lua Reference Manual(Lua参考手册) Quick Lua Tour (Lua快速入门)Examples (Lua范例)Libraries with docume

JSPatch 实现原理详解

原文地址https://github.com/bang590/JSPatch/wiki/JSPatch-%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%E8%AF%A6%E8%A7%A3 JSPatch 是一个 iOS 动态更新框架,只需在项目中引入极小的引擎,就可以使用 JavaScript 调用任何 Objective-C 原生接口,获得脚本语言的优势:为项目动态添加模块,或替换项目原生代码动态修复 bug. 之前在博客上写过两篇 JSPatch 原理解析文章(1 

iOS 中的 HotFix 方案总结详解

相信HotFix大家应该都很熟悉了,今天主要对于最近调研的一些方案做一些总结.iOS中的HotFix方案大致可以分为四种: WaxPatch(Alibaba) Dynamic Framework(Apple) React Native(Facebook) JSPatch(Tencent) WaxPatch WaxPatch是一个通过Lua语言编写的iOS框架,不仅允许用户使用 Lua 调用 iOS SDK和应用程序内部的 API, 而且使用了 OC runtime 特性调用替换应用程序内部由 O

Lua简明教程

这几天系统地学习了一下Lua这个脚本语言,Lua脚本是一个很轻量级的脚本,也是号称性能最高的脚本,用在很多需要性能的地方,比如:游戏脚本,nginx,wireshark的脚本,当你把他的源码下下来编译后,你会发现解释器居然不到200k,这是多么地变态啊(/bin/sh都要1M,MacOS平台),而且能和C语言非常好的互动.我很好奇得浏览了一下Lua解释器的源码,这可能是我看过最干净的C的源码了. 我不想写一篇大而全的语言手册,一方面是因为已经有了(见本文后面的链接),重要的原因是,因为大篇幅的文

Lua简易教程

首先,我们须要知道,Lua是类C的,所以,他是大写和小写字符敏感的. 以下是Lua的Hello World.注意:Lua脚本的语句的分号是可选的,这个和GO语言非常类似. 复制代码代码例如以下: print("Hello World") 你能够像python一样.在命令行上执行lua命令后进入lua的shell中执行语句. 复制代码代码例如以下: chenhao-air:lua chenhao$ lua Lua 5.2.2  Copyright (C) 1994-2013 Lua.or

[转]LUA 学习笔记

Lua 学习笔记 入门级 一.环境配置 方式一: 1.资源下载http://www.lua.org/download.html 2.用src中的源码创建了一个工程,注释调luac.c中main函数,生成了一个exe,直接可以测试lua了 方式二(推荐): 从https://code.google.com/p/luaforwindows/ 下载“LuaForWindows_v5.1.4-46.exe”,一键安装即可  二.执行 lua xxx.lua 三.注释 1.行注释格式:-- 2.块注释格式

Lua模块

在lua中,我们可以直接使用requeire(“model_name”)来载入别的文件,文件的后缀名是.lua,载入的时候直接执行那个文件了. 比如:my.lua 文件中 print(“hello world!”) 当我require(“my”)时,那么会直接输出hello world! 特别注意: 1.用require载入相同的文件时,只有第一次执行,以后都不执行. 2.如果你想让每次载入都执行文件,那么可以使用dofile(“my.lua”) 3.如果你想载入的时候不执行文件,等需要的时候再

闲话js前端框架（4）——组件化？有没有后端的事？

闲话js前端框架 前端人员=美工+设计+代码+测试 --题记 专题文章: 一.从avalonjs的模板说起 二.庞大的angularjs 三.再也不想碰DOM 四.组件化?有没有后端的事? 五.再看自己一年前设计的微型渲染引擎 六.在浏览器标准上做文章 七.抛开浏览器,构建应用容器 八.为何Flash.银光和Java都在网页端一蹶不振 本文属 西风逍遥游 原创, 转载请注明出处: 西风世界 http://blog.csdn.net/xfxyy_sxfancy 四.组件化?有没有后端的事? 提到组