如何在jQuery插件中隐藏“require”函数 - 腾讯云开发者社区

文章/答案/技术大牛

发布

基于RequireJS和JQuery的模块化编程——常见问题解析

但是不同点是，require.js加载完会立即执行；而seajs则是等到进入主函数需要执行时才执行。...关于循环依赖的源码可以参考云盘如何在requirejs中使用jquery 如果想要使用jquery比较简单，直接在main.js中添加对应的依赖即可： requirejs.config({ baseUrl...$('#test').html('test'); }); 如何在requirejs中使用jquery插件对于jquery的插件，比较常见的做法都是传入一个jquery的对象，在这个jquery对象的基础上添加插件对应的方法...首先需要添加jquery插件的依赖，这里用两个插件举例子——jquery-ui和jquery-datatables requirejs.config({ baseUrl: './', paths...比如在DOM重构的JS模块中，执行渲染的代码下面： require("xxx").initEvents(); 常见场景：比如我在页面中使用了jquery-steps这个UI插件，它会对页面进行重新渲染

3.7K10 0

webpack入门指南

对一些经常要被import或者require的库，如react,我们最好可以直接指定它们的位置，这样webpack可以省下不少搜索硬盘的时间。...时用的，比如require(‘react’)，对象的value表示的是如何在global（即window）中访问到该对象，这里是window.React。...同理jquery的话就可以这样写：’jquery’: ‘jQuery’，那么require(‘jquery’)即可。...然后我们在配置文件中添加vendor，以及运用代码分离的插件对生成的vendor块重新命名 var webpack = require("webpack"); module.exports = {...; }); }; module.exports = HelloWorldPlugin; 安装一个插件，将其添加到配置中的plugins数组中。

2.7K4 0

您找到你想要的搜索结果了吗？

是的

没有找到

RequireJS

require 加载依赖模块，并执行加载完后的回调函数前一篇中的a.js： define(function(){ function fun1(){ alert("it works..."); } fun1(); }) 通过define函数定义了一个模块，然后再页面中使用： require(["js/a"]); 来加载该模块(注意require中的依赖是一个数组，即使只有一个依赖....js后缀的，当然也是不能写后缀上面例子中的callback函数中发现有$参数，这个就是依赖的jquery模块的输出变量，如果你依赖多个模块，可以依次写入多个参数来使用： require(["jquery...jquery插件，而且这些插件基本都不符合AMD规范，比如jquery.form插件，这时候就需要将form插件"垫"到jquery中： require.config({ shim: {...exports : "_"; }, "jquery.form" : ["jquery"] } }) 这样配置之后我们就可以使用加载插件后的jquery了 require.config

5821 0

Require.js 详解

配置 Require.js 在 HTML 文件中引入 require.js，并进行基本配置： <!...加载模块使用 require 函数来加载一个模块： // js/main.js require(['app'], function(app) { app.init(); }); 在以上代码中，...require 函数加载 app 模块，并在回调函数中使用该模块。...: { app: 'app', jquery: 'https://code.jquery.com/jquery-3.6.0.min' } }); require...使用插件 Require.js 提供了许多插件来增强其功能，如 text 插件用于加载文本文件： // js/main.js require.config({ baseUrl: 'js',

7931 0

Egg中使用DiyUpload实现图片批量上传

在HTML文件中引入需要的文件。 Jquery，如果在头文件中已经引入，此处可注释 --> 中定义一个标签，指定插件要加载的位置，另外定义一个隐藏表单域，用于上传成功后保存返回的地址。隐藏表单域保存上传成功的图片地址，以便与其它数据一起提交 --> 3. 在HTML文件中加载插件。...控制器中调用服务中的getUploadFile方法。

1.6K3 0

【Hybrid开发高级系列】WebPack模块化专题

2.6.6 如何在业务代码里使用Dll文件打包的module/资源？不需要刻意做些什么，该怎么require就怎么require，webpack都会帮你处理好的了。.../vendor/jquery-1.9.1.min.js'" }, 而在webpack.config.js中需要对jQuery单独引用 //jQuery引用插件 var jQueryProvidePlugin...jQuery' } ] } 而业务js文件中则不需要显示require了 //var $ = require('jquery'); 2.13 支持ES6 Enable...也是一个小技巧吧，我生成的各入口文件的目录如下： 3.2.2 第三方库的打包项目中用到了一些第三方库，如vue、vue-router、jquery、boostrap等。...原因分析：因为require()函数其实是同步函数，因此对于子模块的引入一定要放在父模块Module的初始化之后，例如： //var lockCtr = require('..

9315 0

Webpack最佳实践

jquery"); providePlugin 可使用 webapck 内置插件 providePlugin 给每个模块中注入变量，还是以 jquery 为例在 webapck.config.js 中配置...new CleanWebpackPlugin(), ] } copy-webpack-plugin 拷贝插件，把某个文件夹导出到打包文件夹中，如文档文件夹（如 doc 文件夹）...适合没有依赖项的包，如 jquery module: { noParse: /jquery/, } webpack.IgnorePlugin webpack 内置插件 IgnorePlugin...new CleanWebpackPlugin(), ] } copy-webpack-plugin 拷贝插件，把某个文件夹导出到打包文件夹中，如文档文件夹（如 doc 文件夹）...适合没有依赖项的包，如 jquery module: { noParse: /jquery/, } webpack.IgnorePlugin webpack 内置插件 IgnorePlugin

3.7K2 0

Webpack最佳实践指南

loader 主要是对资源进行加载/转译的预处理工作，其本质是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。某种类型的资源可以使用多个 loader，执行顺序是从右到左，从下到上。...，如 promise，include 等，在js文件中 require 引入即可eslint-loader：校验 js 是否符合规范，可自行在 eslint 网站上配置下载安装依赖npm i @babel...jquery");providePlugin可使用 webapck 内置插件 providePlugin 给每个模块中注入变量，还是以 jquery 为例在 webapck.config.js 中配置const...), ]}copy-webpack-plugin拷贝插件，把某个文件夹导出到打包文件夹中，如文档文件夹（如 doc 文件夹）安装依赖npm i copy-webpack-plugin -D配置 webpack.config.jsconst...适合没有依赖项的包，如 jquerymodule: { noParse: /jquery/,}webpack.IgnorePluginwebpack 内置插件 IgnorePlugin 可以阻止生成用于导入的模块

1.5K2 0

从零搭建一个 webpack 脚手架工具（二）

将 jquery 模块暴露出来： import $ from "expose-loader?$!jquery"; ?$! 中的 $ 就是指被暴露的变量名（expose-loader ? !...$: 'jquery' }) ] } 如果你在 HTML 中引入了第三方模块使用 script 标签，但在开发中如果再使用 import $ from 'jquery'，webpack...该插件需要传入一个参数，你要删除的路径，要删除多个目录可以传入一个数组。 2. copyWebpackPlugin 该插件需要下载。功能是将没有指定为入口的目录中的文件拷贝到打包后的目录中。...还有一点就是，每次修改配置项都要重新运行命令，这是很费时的一件事，如何在更新配置文件后不用再次重启服务呢？这在下面会说到。...在 devServer 中单纯的让 hot = true 是没有作用的，还需要一个 webpack 插件。这个插件是 webpack 内置的插件，不需要下载。

1.8K4 0

Webpack最佳实践

1.4K1 0

Webpack最佳实践

1.5K3 0

JAVASCRIPT模块化3篇之三：require.js

在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。...主模块的代码就写在回调函数中。四、模块的加载上一节最后的示例中，主模块的依赖模块是[‘jquery’, ‘underscore’, ‘backbone’]。...比如，jQuery的插件可以这样定义：　　shim: { 　　　　’jquery.scroll’: { 　　　　　　deps: [‘jquery’], 　　　　　　exports: ‘jQuery.fn.scroll...’ 　　　　} 　　} 七、require.js插件 require.js还提供一系列插件，实现一些特定的功能。...domready插件，可以让回调函数在页面DOM结构加载完成后再运行。　　require([‘domready!’]

2.2K2 0

Javascript模块化编程（三）：require.js的用法

在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。...主模块的代码就写在回调函数中。四、模块的加载上一节最后的示例中，主模块的依赖模块是['jquery', 'underscore', 'backbone']。...比如，jQuery的插件可以这样定义：　　shim: { 　　　　'jquery.scroll': { 　　　　　　deps: ['jquery'], 　　　　　　exports: 'jQuery.fn.scroll...' 　　　　} 　　} 七、require.js插件 require.js还提供一系列插件，实现一些特定的功能。...domready插件，可以让回调函数在页面DOM结构加载完成后再运行。　　require(['domready!']

3.4K6 0

Javascript模块化编程（三）：require.js的用法

主模块的代码就写在回调函数中。四、模块的加载上一节最后的示例中，主模块的依赖模块是['jquery', 'underscore', 'backbone']。...因此，require.js提供了一个优化工具，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少HTTP请求数。...比如，jQuery的插件可以这样定义：　　shim: { 　　　　'jquery.scroll': { 　　　　　　deps: ['jquery'], 　　　　　　exports: '...jQuery.fn.scroll' 　　　　} 　　} 七、require.js插件 require.js还提供一系列插件，实现一些特定的功能。...domready插件，可以让回调函数在页面DOM结构加载完成后再运行。　　require(['domready!']

2.7K9 0

在找一份相对完整的Webpack项目配置指南么？这里有

文件，提取公共文件，模块热更新替换，开发与线上环境区分，使用jQuery插件的方式、页面资源引入路径自动生成（可指定生成位置），热更新编译模版文件自动生成webpack服务器中的资源路径，编写一个简单的插件...，以及多CSS文件的合并压缩的考虑才用这种引入方式的 7. jQuery插件的引入方式目前来说，jQuery及其插件在项目中还是很常用到的，那么就要考虑如何在Webpack中使用它第一种方法，就是直接页面中...标签引入了，但这种方式不受模块化的管理，好像有些不妥第二种方法，就是直接在模块中引入所需要的jQuery插件，而jQuery本身由Webpack插件提供，通过ProvidePlugin...{ test: require.resolve('jquery'), // 将jQuery插件变量导出至全局，提供外部引用jQuery插件使用...entry设置把jQuery提取到了公共文件common中所以正确的做法是common.js文件先于jQuery插件加载而这个插件只能做到在或标签尾部插入，我们只好手动挪动一下

3.9K1 0

JS模块加载系统设计V1

,将$.config函数对象托管给kernel对象 require.config = kernel; 然后在将kernel对象托管给require.config对象,require.config其实就是...$.config函数对象,也就是说你通过require.config传递的参数,实际都会传递给$.config函数,个人觉得这个设计蛮不错的,当我们以后有新的模块需要进行类似的配置时,也可以通过这种方式...(这里用函数表示),如果是吊用该插件,然后通过当前的属性,拿到对应对象的值,将值作为参数传递给该插件。...alias插件,该函数通过维护一个alias集合来保存所有需要加载的文件的别名和对应的js路径 1、首先拿到所有的alias(别名),这里注意: var all = "mass,lang,class,flow..."和一个回调函数参数,下面来分析require方法的源码: window.require = $.require = function(list, factory, parent) {

9195 0

30分钟学会前端模块化开发

但是这些文件的顺序还不能出错，比如jquery需要先引入，才能引入jquery插件，才能在其他的文件中使用jquery。...RequireJS 采取的是在源码中预留接口的形式，源码中留有为插件而写的代码。.... }); 注意在示例中，三方库如jQuery没有将版本号包含在他们的文件名中。...()将函数内容赋予一个有意义的字串值，但在一些设备如PS3及一些老的Opera手机浏览器中不起作用。...从module加载文件中的上下文node节点。如：var req = require('request')。我们可能会说,“request模块赋值给req这个变量”。

4.5K5 0

前端模块系统

不同模块的接口调用都是一个作用域中，一些复杂的框架，会使用命名空间的概念来组织这些模块的接口，典型的例子如 YUI 库。...define(function(require, exports, module) {}） factory 是最后一个参数，它包裹了模块的具体实现，它是一个函数或者对象。.... */ }); 在模块定义内部引用依赖： define(function(require) { var $ = require('jquery'); $('body').text('hello...('jquery'); var Spinning = require('....想要的是Babel的es2015，但没有插件transform-es2015-modules-commonjs。目前，唯一的办法就是提到配置数据中的所有预置插件，除了我们要排除的插件。

9596 1

js模块化编程之彻底弄懂CommonJS和AMDCMD！（转）

在兼容CommonJS的系统中，你可以使用JavaScript开发以下程序： (1).服务器端JavaScript应用程序 (2).命令行工具 (3).图形界面应用程序 (4).混合应用程序（如，...所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。...主模块的代码就写在回调函数中。四、模块的加载上一节最后的示例中，主模块的依赖模块是['jquery', 'underscore', 'backbone']。...' 　　　　} 　　} 七、require.js插件 require.js还提供一系列插件，实现一些特定的功能。...domready插件，可以让回调函数在页面DOM结构加载完成后再运行。　　require(['domready!']

2K3 0

在Html中使用Requirejs进行模块化开发

直接拷贝内容到text.js中即可。如何安装text插件在requirejs的main.js中配置text插件的依赖即可，跟jquery差不多，只要保证能通过正常的加载方式加载到它就行。...如何使用text 在目标模块中，按照下面的语法即可： define(function(require){ var html = require("text!...如果是在单页面中，很容易想到原始的做法是，导航的按钮对应不同的div，点击那个按钮，就显示与之对应的div；其他的div则隐藏掉。...> 然后在对应的模块中： $('#target').html(require("text!...不过需要注意的是：这种方式会导致Jquery绑定的事件失效——所以一定要在html()方法后面，重新绑定下事件。

1.7K10 0

点击加载更多

基于RequireJS和JQuery的模块化编程——常见问题解析

webpack入门指南

RequireJS

Require.js 详解

Egg中使用DiyUpload实现图片批量上传

【Hybrid开发高级系列】WebPack模块化专题

Webpack最佳实践

Webpack最佳实践指南

从零搭建一个 webpack 脚手架工具（二）

Webpack最佳实践

Webpack最佳实践

JAVASCRIPT模块化3篇之三：require.js

Javascript模块化编程（三）：require.js的用法

Javascript模块化编程（三）：require.js的用法

在找一份相对完整的Webpack项目配置指南么？这里有

JS模块加载系统设计V1

30分钟学会前端模块化开发

前端模块系统

js模块化编程之彻底弄懂CommonJS和AMDCMD！（转）

在Html中使用Requirejs进行模块化开发

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐