考核内容: jQuery 核心 - noConflict() 方法 题发散度: ★★★ 试题难度: ★★★ 解题思路: 使用 noConflict() 方法为 jQuery 变量规定新的名称： var...jq=$.noConflict(); 定义和用法 1.noConflict() 方法让渡变量 $ 的 jQuery 控制权。...2.该方法释放 jQuery 对 $ 变量的控制。 3.该方法也可用于为 jQuery 变量规定新的自定义名称。 提示：在其他 JavaScript 库为其函数使用 $ 时，该方法很有用。...说明 许多 JavaScript 库使用 $ 作为函数或变量名，jQuery 也一样。在 jQuery 中，$ 仅仅是 jQuery 的别名，因此即使不使用 $ 也能保证所有功能性。...假如我们需要使用 jQuery 之外的另一 JavaScript 库，我们可以通过调用 $.noConflict() 向该库返回控制权： 例如：创建一个新的别名用以在接下来的库中使用 jQuery 对象
本文将介绍如何使用Node.js和ssh2模块实现一个简单的部署脚本，将本地的项目文件上传到远程服务器上。我们将使用dotenv模块来管理环境变量，以及child_process模块来执行命令行操作。...这样，我们就可以避免将这些信息暴露在代码中，也方便我们根据不同的环境进行切换。....-"const fs = require('fs');const Client = require('ssh2').Client;require('dotenv').config();其中，fs模块是Node.js...内置的文件系统模块，用来读写文件；Client是ssh2模块提供的一个类，用来创建SSH连接；dotenv模块是用来加载.env文件中的配置信息到process.env对象中。...: 'inherit' })execSync 是 Node.js 的一个内置模块，它可以同步地执行一个子进程，并返回子进程的输出。
原始的开发方式，随着项目复杂度提高，代码量越来越多，所需加载的文件也越来越多，这个时候就需要考虑如下几个问题: 命名问题：所有文件的方法都挂载到window/global上，会污染全局环境，并且需要考虑命名冲突问题...所谓的通用，就是兼容了CmmonJS和AMD规范，这意味着无论是在CmmonJS规范的项目中，还是AMD规范的项目中，都可以直接引用UMD规范的模块使用。...如果不希望将后缀名改成.mjs，可以在项目的package.json文件中，指定type字段为 { "type": "module" } 一旦设置了以后，该目录里面的 JS 脚本，就被解释用 ES6...# 解释成 ES6 模块 $ node my-app.js 如果这时还要使用 CommonJS 模块，那么需要将 CommonJS 脚本的后缀名都改成.cjs。...总结 由于 ESM 具有简单的语法，异步特性和可摇树性，因此它是最好的模块化方案 UMD 随处可见，通常在 ESM 不起作用的情况下用作备用 CommonJS 是同步的，适合后端 AMD 是异步的，适合前端
WordPress 中的jQuery 库问题曾经困扰了我一段时间。...如果仅仅加载WordPress 自带的jQuery 库，在使用一些jQuery 插件的时候明明是代码没有错误，但就是不起作用，该有的效果不能实现；但加载了原版的jQuery 库却又可以了，这样一来却同时加载了两个...后来才了解到：为了防止与其他 JS 库（如 YUI）冲突，WordPress 内置 jQuery 库的末尾都在原版的基础上加入了 jQuery.noConflict()这个东东，以至于在jQuery 代码中用...$ 代替jQuery 的写法不能识别，一些功能不起作用的原因正是由此而来。...如何解决这个问题，网络上有以下解决方案： 方案一：将相关js代码中的$ 手动改为 jQuery。
比如main.js需要使用jquery，但是，从上面的文件中，我们是看不出来的，如果jquery忘记了，那么就会报错。...同时，为了避免凌乱的配置，最好不要使用多级嵌套的目录层次来组织代码，而是要么将所有的脚本都放置到baseUrl中，要么分置为项目库/第三方库的一个扁平结构，如下： www/ index.html js/...注意：你在main.js中所设置的脚本是异步加载的。所以如果你在页面中配置了其它JS加载，则不能保证它们所依赖的JS已经加载成功。...，但在一些设备如PS3及一些老的Opera手机浏览器中不起作用。...5.3、在Node.js中使用Module 5.3.1、方法一 在 Node.js 模块系统中，每个文件都被视为独立的模块。
，从最初的零散脚本到现代化的模块系统： 了解即可： Script标签，最简单粗暴的方式： 早期前端主要使用 标签引入JavaScript，这种方式：存在全局命名空间的问题，容易引起变量冲突...npm -v：查看当前npm的版本号 node -v：查看当前Node的版本号 NPM 初始化 使用NPM 进行包管理|项目管理，首先需要项目根目录进行初始化： 在项目的根目录中打开终端： 打开命令行终端...文件; package.json 文件： package.json 是 Node 项目中非常重要的配置文件：项目信息、依赖项管理、脚本定义、模块入口定义、开源协议... { "name": "npm01...； 命令示例： npm i jquery@1.11.2 下载安装指定的1.11.2版本的jquery包； 卸载依赖包： 项目中可能需要删除某些不需要的包，可以使用下面的命令 局部删除： npm uninstall.../index.js 用途：如果一个项目有多种环境配置，每次启动一堆参数： 定义脚本可以更快速方便启动|管理不同环境的项目； CNPM | YNPM CNPM CNPM 全称为 China Node
模块把接口暴露到全局对象下（比如window），各个模块可以通过全局对象访问各个依赖的接口，但是也存在一些问题： 1、挂在全局对象下容易产生冲突 2、各个脚本加载的必须严格按照依赖顺序，不然可能就玩不转...3、在一个特别大的项目中，引用的脚本就会特别多，script 标签就会特别多，并且难以维护。.../file.js"); exports.doStuff = function() {}; module.exports = someValue; 服务端Node.js就是用的这种方式。...2、多个模块不能并行加载 像Node.js主要用于服务器的编程，加载的模块文件一般都已经存在本地硬盘，所以加载起来比较快，不用考虑异步加载的方式，所以CommonJS规范比较适用。...require.js 了 CMD表示不服 CMD是SeaJS 在推广过程中对模块定义的规范化产出 CMD 规范中定义了 define 函数有一个公有属性 define.cmd。
，从最初的零散脚本到现代化的模块系统： ==了解即可：==Script标签，最简单粗暴的方式： 早期前端主要使用 标签引入JavaScript，这种方式：存在全局命名空间的问题，容易引起变量冲突...Node实际开发过程中，经常遇到不同的项目所使用的 Node版本不同，导致开发者需要不停的调整Node版本，NVM就是为了解决这个问题！...文件：package.json 是 Node 项目中非常重要的配置文件：项目信息、依赖项管理、脚本定义、模块入口定义、开源协议...{ "name": "npm01", //包名 "...团队开发需协商操作；定义执行脚本：package.json： 在 package.json 文件中，你可以通过 scripts 字段定义一些自定义脚本，以便在项目中执行特定的任务{ //... ...../index.js用途：如果一个项目有多种环境配置，每次启动一堆参数： 定义脚本可以更快速方便启动|管理不同环境的项目；CNPM | YNPMCNPMCNPM 全称为 China Node Package
，以及GitHub上关于webpack的项目issues，还有就是一些完整了例子，最后就是得自己练手配置，才能在过程中掌握好这枯燥的配置。...plugins设置webpack配置过程中所用到的插件 4. Webpack3配置在Demo中的应用 1. 搭建个服务器 2. 设置基础项目目录 3....，以及多CSS文件的合并压缩的考虑才用这种引入方式的 7. jQuery插件的引入方式 目前来说，jQuery及其插件在项目中还是很常用到的，那么就要考虑如何在Webpack中使用它 第一种方法，就是直接页面中...entry设置把jQuery提取到了公共文件common中 所以正确的做法是common.js文件先于jQuery插件加载 而这个插件只能做到在 或标签尾部插入，我们只好手动挪动一下...其他常见问题整理 一个项目有多个webpack冲突的解决 如果一个项目中用多个webpack来编译，并引入了多个文件，就会产生冲突了，这会导致webpack只会识别第一个引入的变量 这时候，需要配置output
命名冲突 2..../node npm install --save @babel/polyfill 2.创建babel.config.js 在项目目录中创建babel.config.js文件。...文件 /* 在项目目录中创建index.js文件作为入口文件 在index.js中输入需要执行的js代码，例如： console.log("ok"); */ 4.使用npx执行文件...通过模块化形式,实现列表隔行变色效果 */ 注意：此时项目运行会有错误，因为import $ from "jquery";这句代码属于ES6的新语法代码，在浏览器中可能会存在兼容性问题 所以我们需要webpack...将src --> index.html中,script脚本的引用路径,修改为 "/buldle.js" 4. 运行npm run dev命令, 重新进行打包 5.
同样不要以为我上面的故事是虚构的，在我待过的公司里，至今依旧有类似的脚本报错，特别是在各种快速制作的营销页面中。 上面的文件依赖还在可控范围内。当项目越来越复杂，众多文件之间的依赖经常会让人抓狂。...当模块很多，依赖很复杂时，烦琐的配置会带来不少隐患。 命名冲突和文件依赖，是前端开发过程中的两个经典问题。下来我们看如何通过模块化开发来解决。.../util.js') 就可以拿到 util.js 中通过 exports 暴露的接口。...CMD 模块定义规范与 Node.js 的模块规范非常相近。通过 Sea.js 的 Node.js 版本，可以很方便实现模块的跨服务器和浏览器共享。...另一类是以 jQuery、RequireJS、国内的 Sea.js、OzJS 等类库为基础的集市模式。在集市模式下，所有组件彼此独立、职责单一，各组件通过组合松耦合在一起，协同完成开发。
文件中定义你需要并行运行的脚本。...在使用qiankun微前端框架时，可能会出现子项目之间和主项目之间的全局变量冲突的问题。...解决全局变量冲突的方案有三种： 方案一是在注册子项目时，在beforeLoad钩子函数中处理全局变量，将子项目的全局Vue变量进行替换，以解决子项目独立运行时的全局变量冲突问题。...方案三是修改主项目和子项目的依赖名称，使它们不会相互冲突，从而避免全局变量冲突的问题。...缺点 对 webpack 强依赖，对于老旧项目不友好； 没有有效的 css 沙箱和 js 沙箱，需要靠用户自觉； 子应用保活、多应用激活无法实现； 主、子应用的路由可能发生冲突。
无模块 jquery.js"> jquery_scroller.js"> js...因为每一个模块都是暴露在全局的，简单的使用，会导致全局变量命名冲突，当然，我们也可以使用命名空间的方式来解决。...对于大型项目，各种js很多，开发人员必须手动解决模块和代码库的依赖关系，后期维护成本较高。 依赖关系不明显，不利于维护。...比如main.js需要使用jquery，但是，从上面的文件中，我们是看不出来的，如果jquery忘记了，那么就会报错。...即脚本代码在require的时候，就会全部执行。一旦出现某个模块被"循环加载"，就只输出已经执行的部分，还未执行的部分不会输出。 ES6模块 ES6模块中的值属于【动态只读引用】。
我这边直接npm install jquery，node_modules下有jQuery。...然后我删除node_modules,执行npm install，node_modules下并没有下载jQuery。...接着在一个空白的项目里面下载axios,npm install axios -S,打开node_modules文件夹： ?...其实发布的包如果没有必要，很少会默认帮你下载，比如bootstrap，依赖jQuery，怕你原本就下载了引起冲突，也不会在dependencies里面安装jQuery而是： "peerDependencies...'jquery' in 'C:\Users\wade\Desktop\savedev\node_modules\_bootstrap@4.4.1@bootstrap\dist\js' @ .
我自己的经验 如果项目要求支持低版本的 IE 的话（比如 IE7，8），就用较传统的jQuery，Bootstrap，jQuery插件/组件以及类似 Knockout.js 能够提供数据绑定的 JS 库...Ant Design Pro – 基于 Ant Design 的中后台项目脚手架，提供了更高层的常用业务组件和最佳实践，大大减少重复性工作 Animate.css – 流行的动画样式库，实现了包括 Attention...我主要是在 Node.js 中使用 Axios，替代了 request；浏览器中还是使用 Fetch API，还没有在浏览器中尝试使用 Axios。...CSS Modules – CSS 模块化方案，避免全局作用域/冲突，实现显式依赖。暂时没有使用 css-in-js 方案。...我以前写过一个构建 docker 的 shell 脚本： 分享一个自动构建 docker 并导出 image 的 shell 脚本 esprima, espree, acorn, babel-parser
仿佛奇怪的问题总是喜欢找上那些初学者。当我在学习制作网页的时候，经常遇到一些很特别的问题。例如：刚刚添加的样式不起作用、jQuery 的代码老是不起作用等等，这些问题往往是不关注细节导致的。...如果有时候，你真的无法修改加载文件的顺序，那么面对这种情况，你可以使用 CSS 中的 ！important 语法，告诉浏览器要使用这个属性解决冲突。...js/jquery/1.7.2/jquery.min.js"> jquery/jquery.lazyload.js"> jquery/插件.js"> 的js/js.js"> ----
LABjs 起初script标签引入文件 我们最初使用html中的标签来引入js文件。当项目不断变大以后，我们的项目的依赖也开始变多，就像下面。 ......LABjs LABjs它是一个文件加载器，使用script和wait实现文件异步和同步加载，解决文件之间的相互依赖，使的文件加载的性能大大提高。有了它我们的html中引脚本文件可以成下面这样。...jQuery中的api，必须等jQuery文件加载好以后才能调用jQuery .script('a.js') .script('b.js') .script('c.js')...console.log(count2); // 5 module node中有一个Module构造函数(node中的lib/module.js)，在node应用程序中每个模块都含有一个Module实例...main.js是第一个被require的脚本文件。
遇到害怕的事情，装作无所畏惧，之后会越来越勇敢~ ? 4.2 用npm运行脚本 — node有npm，npm能运行脚本。.../node_modules/.bin/ uglify --source-map, 针对项目创建配置文件，将参数放在这个文件里 将配置参数添加到package.json中 如果构建复杂，可以创建一个shell...如果是大型项目，需要很多的gulp任务，可以把一个个任务拆分成一个个文件，最后引用到fulpfile.js文件中，组合在一起。。...- 引用 const jquery = require('jquery'); yes，正如你看到的，Webpack把CommonJS模块给了我们，无需任何额外的配置，就可以使用来自npm的模块。。...总结： npm脚本是实现简单任务自动化和脚本调用的最佳选择 Gulp可以用js编写更加复杂的任务，并且他是跨平台的 如gulpfile太长可以把代码分解到多个文件中 webpack可以用来生成客户端打包文件
但在实际操作中，常常会有各种各样的问题出现。...因为WordPress 自带的 jQuery库会在最后添加jQuery.noConflict()以保证与其他js 库的兼容，因此那些通过 $ 代替jQuery的缩写代码会失效。...详见《WordPress中的jQuery库不起作用的相关问题》。再者，为了速度上的考虑，加载一个80kb+的jQuery 库最好是通过第三方来（如google的、SAE的）——特别是主机不给力的网站。.../js/jquery/1.5.2/jquery.min.js' ), false, null, true ); wp_enqueue_script( 'jquery' ); } } wp_deregister_script...is_admin() )是为了确保这些脚本和css只在前端加载，不会在后台管理界面加载。 第三方jQuery 库一般都有CDN 驱动，可以保证最大速度。
官网 jspm：流畅的浏览器包管理器。官网 Ender：没有库文件的程序库。官网 volo：以项目模板、添加依赖项与自动化生成的方式创建前端项目。...官网 casperjs：基于 PhantomJS 和 Slimer JS 的导航脚本和测试工具。官网 zombie：基于 node.js 、快速、全栈且无图形界面的浏览器的测试工具。...官网 paper.js：是矢量图形脚本中的瑞士军刀 —— 使用 HTML5 Canvas 将 Scriptographer 移植到 JavaScript 官网和浏览器。...官网 性能分析 easy-monitor：一个轻量级实时 Node.js 项目的内核性能分析工具。官网 UI 代码高亮 Highlight.js：JavaScript 语法高亮器。...官网 Edge.js：运行在一个进程中运行.NET和Node.js代码。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
