精华内容
下载资源
问答
  • js模块化

    2020-11-19 00:19:01
    在旧时的项目中我们不可能把所有的js逻辑都写在一个文件里面,这样的方式太过于臃肿,js模块化就是把我们的js拆分为多个不同的js文件进行暴露引入方法分解复杂的js逻辑 在很多场景中,我们需要考虑模块化: 基于以上...

    什么是模块化?模块化的运用

    在旧时的项目中我们不可能把所有的js逻辑都写在一个文件里面,这样的方式太过于臃肿,js模块化就是把我们的js拆分为多个不同的js文件进行暴露引入方法分解复杂的js逻辑
    在很多场景中,我们需要考虑模块化:
    基于以上场景,所以,当前 JS 模块化主要是这几个目的:

    代码复用性
    功能代码松耦合
    解决命名冲突
    代码可维护性
    代码可阅读性

    1.CommonJS 2. AMD 3. CMD 4.es6

    CommonJS主要用在Node开发上,每个文件就是一个模块,

    const fs = require('fs')
    const {fs}=require('fs')
    //导入方法
    exports.fs = fs
    module.exports = fs
    //导出方法
    

    AMD区别于CommonJS,AMD规范的被依赖模块是异步加载的,而定义的模块是被当作回调函数来执行的,依赖于require.js模块管理工具库。当然,AMD规范不是采用匿名函数自调用的方式来封装

    require.config({
      //基本路径
      baseUrl : 'js/',
      //标识名称与路径的映射
      paths : {
        '模块1' : 'modules/模块1',
        '模块2' : 'modules/模块2',
        'angular' : 'libs/angular',
        'angular-messages' : 'libs/angular-messages'
      },
      //非AMD的模块
      shim : {
        'angular' : {
            exports : 'angular'
        },
        'angular-messages' : {
            exports : 'angular-messages',
            deps : ['angular']
        }
      }
    })
    

    CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。AMD 推崇依赖前置,CMD 推崇依赖就近

    define(function(require, module, exports){
     // 通过require引入依赖模块
    //通过module/exports来暴露模块
     // exports.xxx = value
    })
    

    ES6

    //type="module"须加上类型
    //es6有时候由于同源策略的限制您是无法使用的需要您开启sever服务您可以使用node。js
    //导出方法
    export {readFile, read}
    export default fs
    export const fs
    //导入方法
    import fs from 'fs'
    import {fs} from 'fs'
    //as为导入方法的别名
    //*为全部
    
    展开全文
  • JS模块化

    2020-03-14 12:22:20
    js模块化 js模块化进化史 1.简单封装 MYAPP.foo="666" //可以修改里面定义的数据 危险 2.匿名闭包 IIFE模式 拿不到里面的数据 得暴露出来 模块化规范 CommomJS(基于服务器端) 暴露模块方式1 // module1.js ...

    js模块化

    js模块化进化史

    1.简单封装

    在这里插入图片描述

    MYAPP.foo="666"
    //可以修改里面定义的数据  危险
    

    2.匿名闭包 IIFE模式

    在这里插入图片描述

    拿不到里面的数据  得暴露出来
    

    在这里插入图片描述
    在这里插入图片描述

    模块化规范

    CommomJS(基于服务器端)

    暴露模块方式1

    // module1.js
    module.exports = function(){
        names= "这是第一种暴露方式",
        fn(){ console.log("用这种方式只能添加一次,再添加后会被覆盖") }
    }
    

    暴露模块方式2

    // module2.js
    exports.names =  "这是第二种暴露方式",
    exports.fn1 = function(){ console.log(666) }
    exports.fn2 = function(){ console.log("用这种方式就是可以无限往模块里面添加") }
    

    引入方式

    // app.js
    let module1 = require('./modules/module1.js')
    let module2 = require('./modules/module2.js')
    
    module1()
    module2.names
    module2.fn1()
    module2.fn2()
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DV0vBeE8-1584159291847)(C:\Users\thinkbook15\AppData\Roaming\Typora\typora-user-images\image-20200112172142695.png)]

    CommomJS(基于浏览器端)

    操作跟上面一样 然后不是在app.js中运行 而是在index页面运行

    1.先安装browserify打包工具
    npm install -g browserify
    
    2.然后使用cmd打开当前文件的目录 输入要打包的app.js文件   和要输出的yes.js文件
    browserify app.js -o yes.js
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-06K6bYVf-1584159291849)(C:\Users\thinkbook15\AppData\Roaming\Typora\typora-user-images\image-20200112172727950.png)]

    打包完后生成了文件 然后引入就可用

    // Array.js
    exports.name = "我是一个操作数组的方法的模块"
    
    // app.js
    let module1 = require('./modules/object.js')
    let module2 = require('./modules/Array.js')
    
    let cc = module2.name
    console.log(cc)
    
    <!--index.html-->
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="yes.js"></script>
    	</head>
    	<body>
    	</body>
    </html>
    

    AMD(require.js)(基于游览器,异步)

    基本用法

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G8D5HCwN-1584159291849)(C:\Users\thinkbook15\AppData\Roaming\Typora\typora-user-images\image-20200114135756387.png)]

    // alert.js
    // 定义没有依s赖的模块
    define(function(){
        let msg = "这是一个没有依赖的模块";
        function getmsg(){
            console.log(msg)
        }
        // 暴露模块
        return { getmsg,msg}
    })
    
    // confirm.js
    // 这是一个有依赖的AMD模块
    define([
        'alert'
    ], function(alert) {
        let msg = "这是一个有依赖的模块"
        function getmsg(){
            console.log(alert.msg)
            console.log('这是一个有依赖的模块')
        }
        // 暴露模块
        return {msg, getmsg}
    });
    
    // app.js
    (function(){
        requirejs.config({
            baseUrl:'js/',
            paths:{
                "confirm":"./modules/confirm",
                "alert":"./modules/alert",
            }
        });
    
        requirejs(["confirm"],function(confirm){
            confirm.msg
            confirm.getmsg()     
        })
    })()
    
    <!--index.html-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script data-main="./js/app.js" src="./js/libs/require.js"></script>
        <!--data-main="./js/app.js"     是指向为主文件-->
    </head>
    <body>
        
    </body>
    </html>
    

    引入jq和angular 等

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9hAauqJB-1584159291850)(C:\Users\thinkbook15\AppData\Roaming\Typora\typora-user-images\image-20200114141450174.png)]

    CMD(基于游览器,异步)

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DgkAGXOg-1584159291851)(C:\Users\thinkbook15\AppData\Roaming\Typora\typora-user-images\image-20200114160357547.png)]

    //module1.js
    // 没有依赖的模块
    define( function(require, exports,module) {
        'use strict';
        let msg = "这是一个没有依赖的模块1"
        function fn1(){
            return msg
        }
    
        // 暴露出模块
        module.exports = { fn1}
    });
    
    //module2.js
    // 没有依赖的模块
    define( function(require, exports,module) {
        'use strict';
        let msg = "这是一个没有依赖的模块2"
        function fn2(){
            console.log(msg)
        }
    
        // 暴露出模块
        exports.module2 = {fn2}
    });
    
    //module3.js
    // 没有依赖的模块
    define( function(require, exports,module) {
        'use strict';
        let msg = "这是一个没有依赖的模块3"
        function fn3(){
            console.log(msg)
        }
    
        // 暴露出模块
        exports.module3 = { fn3 }
    });
    
    //module4.js
    // 没有依赖的模块
    define( function(require, exports,module) {
        'use strict';
        let msg = "这是一个有依赖的模块444"
        function fn4(){
            console.log(msg)
        }
        // 同步引入
        let module2 = require('./module2')
        module2.module2.fn2()
    
        // 异步引入
        require.async('./module3',function(module3){
            module3.module3.fn3()
        })
    
    
        // 暴露出模块
        exports.module4 = { fn4 }
    });
    
    //app.js
    // 没有依赖的模块
    define( function(require, exports,module) {
        let module1 = require('./modules/module1');
        console.log(module1.fn1())
         
        let module4  = require('./modules/module4');
        module4.module4.fn4()
    });
    
    <!--index.html-->
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script type="text/javascript" src="./js/libs/sea.js"></script>
    </head>
    
    <body>
    
    </body>
    <script>
        console.log(seajs)
        seajs.use('./js/app.js')
    </script>
    </html>
    

    ES6模块化

    安装

    npm install babel-cli browserify -g
    npm install babel-preset-es2015 --save-dev
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7krRv0OR-1584159291851)(C:\Users\thinkbook15\AppData\Roaming\Typora\typora-user-images\image-20200115102528413.png)]

    定义.babelrc文件

    {
        "presets": ["es2015"]
        //"presets": ["es2015","react"]
    }
    

    建立json文件

    {
        "name": "es6_babel_browserify",
        "version": "1.0.0"
    }
    
    // module1.js
    // 分别暴露
    export function fn1(){
        console.log("第一个模块")
    }
    export let arr =[1,2,3,4] 
    
    // module2.js
    // 统一暴露
    function fn2(){
        console.log("这是模块2的统一暴露")
    }
    const module2 = "module2"
    export {fn2, module2 }
    
    // app.js
    //引入其他模块
    
    import {fn1,arr} from './module1'
    import {fn2,module2} from './module2'
    fn1()
    console.log(arr)
    fn2()
    console.log(module2)
    
    <!--index.html-->
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./modules/app.js"></script>
    </head>
    <body>
        
    </body>
    </html>
    

    cmd命令下 将module文件夹下面的js文件都转成es5的语法

    babel modules -d js/lib
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nbNQjN1o-1584159291852)(C:\Users\thinkbook15\AppData\Roaming\Typora\typora-user-images\image-20200115103210285.png)]

    cmd命令下 再将js/lib文件夹下面的js文件都编译成可以运行的js文件

    browserify js/lib/app.js -o js/dist/run.js
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ko6nbfqd-1584159291852)(C:\Users\thinkbook15\AppData\Roaming\Typora\typora-user-images\image-20200115103956792.png)]

    <!--将index.html 页面的src改过来-->
    <script src="./js/dist/run.js"></script>
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S7oj7NrZ-1584159291853)(C:\Users\thinkbook15\AppData\Roaming\Typora\typora-user-images\image-20200115110505450.png)]

    默认暴露

    export default{
        msg:"默认暴露",
        fn(){
            console.log("默认暴露再一个js文件中只能出现一次")
        }
    }
    

    js-ES6-module

    export 基本写法:

    export let a ='第一种写法'
    
    var a = "第二种写法"
    export { a }
    
    var function a(){}  // 第三种写法
    export { a as fn }
    
    // 默认暴露
    let router = function(){
        //....
    }
    export default router
    import router from './router/router.js'
    // 一个模块只能有一个默认输出,因此export default命令只能使用一次
    
    // 使用export default时,对应的import语句不 需要使用大括号; 
    // 是不使用export default时,对应的import语句 需要使用大括号。
    

    import 基本写法

    import { a } from "./js/module.js"  // 第一种写法
    import { a as fn } from "./js/module.js"   // 第二种写法
    import "./css/main.css  // 仅仅加载css模块,不输入任何值
    
    import * as tools from './js/tools.js'  // *可以整体加载,
    //即用星号(*)指定一个对象, 所有输出值都加载在这个对象上面。
    
    
    

    export 和import 的复合写法

    export { a as fn } from './index.js'
    

    import 当前的缺憾

    const path = './' +fileName;
    const my = require(path)
    

    上面的语句是CommomJS动态加载,require到底加载哪一个模 块,只有运行时才知道。import命令做不到这一点。

    展开全文
  • js 模块化

    2019-09-22 11:31:19
    模块化 将一个复杂的程序 依据一定的规则(规范) 拆分成几个块(文件),并进行组合在一起 块内部的数据是私有的,只是向外暴露一些接口(方法)与外部其他模块进行通信 模块的暴露、模块的引入 模块的进化史 1. ...

    模块化

    将一个复杂的程序 依据一定的规则(规范) 拆分成几个块(文件),并进行组合在一起

    块内部的数据是私有的,只是向外暴露一些接口(方法)与外部其他模块进行通信

    模块的暴露、模块的引入

    模块的进化史

    1. 页面加载 script 的缺点:

    请求过多,依赖模糊,难以维护

    module1.js

     

    module2.js

     

    index.html

    2. 简单地封装进一个对象(本质是对象,可修改,不安全)

    3. 使用 IIFE 匿名闭包

    4. 引入依赖(现代模块化的基石)

    前端面试题: 没有模块化,怎么写代码?

    利用 IIFE 引入依赖,构建匿名闭包。

    设计原则: 高内聚、低耦合(模块内部配合越紧密越好、模块之间联系越低越好)

    解耦: 降低耦合度

    模块化的好处:

    避免了命名冲突(减少了命名空间的污染)

    更好的分离

    更高的复用性

    可维护性好

    模块化规范 (vue 的出现,组件规范更深得人心):

    • ES6 ----> Babel + Browserify

    由于目前,浏览器还不能直接完全识别 ES6 

    Babel 将 ES6 转成 ES5,还将 import 语法 转成了 require 语法语法,最后 Browserify 使浏览器认识 require 语法

    依赖模块,需要编译打包处理

    • 暴露模块 (ES6 模块中的暴露命名,处于同一作用域 export,意味着不能暴露同名定义)

    1. 分别暴露

    export 暴露内容;

    2. 统一暴露

    export {xxx, yyy};

    3. 默认暴露 (使用的频率很高,只能暴露一次)

    export default 暴露内容;

    • 引入模块

    1. import {} from './module1';        

    2. import modules from './module2';

    (浏览器端的) 实现: 

    ① 使用 jQuery 的话

    npm install  jquery@1 --save

    import $ from 'jquery';

    ② 使用 Babel 将 ES6 编译为 ES5 代码 (还能 { "presets": ["jsx"] } )

    npm install -g babel-cli browserify        // comment line interface ----> 命令行接口

    npm install babel-preser-es2015 --save-dev        // 安装进开发依赖

    vim .babelrc        // run control 运行时控制规则

    { "presets": ["es2015"] }

     使用 Babel 将 ES6 编译为 ES5 代码 (ES6 模块化 转换成了 CommandJS)

    babel js/src -d js/lib 

    使用 Browserify

    browserify js/lib/app.js -o js/lib/appOutput.js

    <script scr="js/lib/appOutput.js"></script>

    看起来这一系列很麻烦,但是 自动化构建工具 诞生了,哈哈。

    使用 Browserify 编译打包 js

    • js/module1.js

    • js/module2.js

    • js/module3.js

    • js/app.js

    1

    • index.html

    1

     


    •  CommonJS ----> Node、Browserify

    每一个 js 文件都可以当成一个模块

    node 服务器端 

    模块加载 是运行时同步加载的

    npm install uniq --save        

    暴露模块 (本质是 exports 对象)

    module.exports = {xxx, ccc};

    exports.xxx = xxx;

    exports.ccc = ccc;

    module.js:

    module.exports = {

    name:'SunWuKong',

    age:550,

    hello(){ console.log('Hello Module.'); }

    };

    引入模块

    require('xxx');    // 第三方库

    require('./xxx');    // 自定义模块,必须以 ./ 或者 ../ 开头

    const sun = require('./module.js');

    const {name:sunName} = require('./module.js');

    浏览器端不认识 require 所以必须 npm install browserify -g       // 查看全局的包在哪儿 npm get prefix

    模块需要提前编译打包处理

    npm install browserify -g

    browserify js/src/app.js -o js/dist/appOutput.js

    <script src="js/dist/appOutput.js"></script>

     


    •  AMD ----> RequireJS

    Asynchronous Module Definition 异步模块定义

    https://github.com/amdjs/amdjs-api/wiki/AMD

    专门用于浏览器端,模块的加载是异步的

    • 暴露模块

    1. 定义一个没有依赖的模块

    define(function(){

    return 模块;

    });

    2. 定义又依赖的模块

    define(['module1', 'module2'... ...], function(m1, m2){... ...});        // 破坏了 就近声明原则

    • 引入模块

    浏览器端,模块的加载是异步的 :

    坑:

    去 .js 后缀

    jquery 迎合 小写 jquery 

    • modules/dataService.js        // return 必须是一个对象;

    • modules/loger.js

    • main.js        // 模块化入口主文件,需要编写配置对象,固定写法

    • index.html

     


    • CMD ----> SeaJS

    参见: https://www.cnblogs.com/tianxiaxuange/p/11084178.html#MySignature 

      

    转载于:https://www.cnblogs.com/tianxiaxuange/p/10224194.html

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,063
精华内容 6,025
关键字:

js模块化