实现js组件编写需要注意的几点

最新推荐文章于 2025-11-13 10:28:37 发布

原创最新推荐文章于 2025-11-13 10:28:37 发布 · 3.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #组件

阶段学习同时被 2 个专栏收录

12 篇文章

订阅专栏

前端

1 篇文章

订阅专栏

本文主要介绍了在实现JS组件编写时应注意的几个关键点，包括使用匿名函数和闭包封装以避免命名冲突，组件格式规范，参数传递方式，字符串引号的选择，JS继承以及链式操作的实现。同时，强调了在JSP页面引用资源时应使用绝对路径，并提供了获取basePath的方法和在页面中调用的步骤，特别提示了pageContext在引用页面中的作用。

注意：

1、编写组件一定要使用匿名函数、闭包进行封装，防止不同组件之间命名的冲突

$(function(){
    (function(a){
        alert(a)
    })("aaaab")
})

2、格式

3、传参可以传一个参数进来，使用json传送多个

4、js不区分单引号和双引号

5、js继承

6、实现链式操作

在jsp页面引包时，一定要写绝对路径

1、新建一个获取basePath的js组件

<%@ page language="java" contentType="text/html; charset=UTF-8"
      pageEncoding="UTF-8" isELIgnored="false"%>
<%
      String basePath = "";
      if (request.getServerPort() != 80) {
            basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/"
                        + request.getContextPath();
      } else {
            basePath = request.getScheme() + "://" + request.getServerName() + request.getContextPath();
      }
      pageContext.setAttribute("basePath", basePath);
%>

2、在需要使用的jsp进行引用

<%@ include file="/WEB-INF/pages/common/basePath.jsp"%>

3、调用

<script type="text/javascript" src="${basePath}/js/jquery.min.js"></script>

注意:

1、此处使用了page的pageContext

2、引用jsp文件相当于将其复制到引用界面，因此可以使用page的setAttribute