RequireJS 引入非ADM规范js文件方法

最新推荐文章于 2023-08-09 17:41:55 发布

P P PHP

最新推荐文章于 2023-08-09 17:41:55 发布

阅读量570

点赞数

分类专栏： php Jquery requirejs 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/xxs18326183038/article/details/128073218

版权

php 同时被 3 个专栏收录

55 篇文章 3 订阅

订阅专栏

Jquery

2 篇文章 0 订阅

订阅专栏

requirejs

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在FastAdmin中配置和使用非ADM规范的jQuery.colorpicker.js文件。通过require.config进行依赖配置，并在define模块中引入并使用colorpicker，展示了在前端开发中整合第三方库的方法。

摘要由CSDN通过智能技术生成

例如一个颜色选择js文件 jquery.colorpicker.js，以在fastadmin中使用为例

非ADM规范的js在shim中进行依赖配置

require.config({
    urlArgs: "v=" + requirejs.s.contexts._.config.config.site.version,
    packages: [{
        name: 'moment',
        location: '../libs/moment',
        main: 'moment'
    }],
    //在打包压缩时将会把include中的模块合并到主文件中
    include: [],
    paths: {        
        'colorpicker': '../libs/colorpicker/jquery.colorpicker'//指定路径
    },
    // 非ADM规范的js在shim中进行依赖配置
    shim: {
        'colorpicker':{
            deps: ['jquery'],//依赖的js
            exports: 'jQuery.fn.colorpicker.defaults'//导出名
        },
        
    },
    baseUrl: requirejs.s.contexts._.config.config.site.cdnurl + '/assets/js/', //资源基础路径
    map: {
        '*': {
            'css': '../libs/require-css/css.min'
        }
    },
    waitSeconds: 60,
    charset: 'utf-8' // 文件编码
});

2. 引入colorpicker.js并使用

define(['jquery','colorpicker'], function ($, colorpicker) {//引入colorpicker.js

        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {

            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
                //colorpicker使用方法 #cp1为input框				
				$("#cp1").colorpicker({
					fillcolor:true
				});
            }
        }
    };
    return Controller;
});