2018-10-23：示意图效果与AOP概念

作者: 神坛下的我 | 来源:发表于2018-10-25 13:46 被阅读0次

2018-10-23：示意图效果与AOP概念
spring-aop
Spring中AOP源码深入解析
AOP概述-术语
Android 面向切面编程（AOP）之 AspectJ
Spring基础知识 day03 动态代理&Spring中
Spring之面向切面AOP
spring-aop
轻松理解 Spring AOP
AOP奇技淫巧

示意图效果

jQuery

效果：鼠标进入示意图区域，在示意图中心显示提示内容

根据服务器返回的div设置的相关信息包括（宽，高，左偏移距离，上偏移距离和提示信息）。
示意图div为relative，提示div为absolute，将提示信息和编号等后续需要的内容，通过attr方法保存到追加的div中。
文字居中，由于存在其他设置，line-height无效，需要通过height()，width()方法获取提示div的大小，获取文字span的高度之后，进行计算后偏移文字span。

html:
<div class="content">
     <div class="bg">
      <img src="image/shiyitu.png"/>
     </div>
</div>

css:
<style type="text/css">
    .content{margin-left:auto;margin-right:auto;width:1000px;}
    .bg{margin-left:auto;margin-right:auto;width:500px;height:300px;position:relative;}
    .bg > img{width:500px;height:340px;}
    .detailDiv{text-align: center;}
    .detailDiv > span{display: inline-block;}
</style>

script:
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    var div1 = Array(66,196,54,60,'firstDiv');/*Div的宽，高，左偏移，上偏移，描述信息*/
    var div2 = Array(160,110,180,38,'secondDiv');
    var div3 = Array(160,88,200,226,'thirdDiv');
    var divs = Array(div1,div2,div3);/*Div集合*/
    
$(function(){
        
        $(divs).each(function(i,div){/*each方法循环遍历divs集合*/
            var rdiv = ''; //根据数据库返回的div相关信息生成div
            rdiv = '<div class="detailDiv" alt='+i+' title='+div[4]+'></div>';/*生成一个Div
            ，其中title属性取值为divi的第五个值*/
            $('.bg').append(rdiv);/*将div追加在.bgDiv容器中*/
            $('.detailDiv:eq('+i+')')/*用eq过滤选择第几个div的css设置*/
            .css('position','absolute')/*以.bgDiv为父定位*/
            .css('width',div[0])/*宽为divi的第一个值*/
            .css('height',div[1])/*高为divi的第二个值*/
            .css('left',div[2])/*左偏移量为divi的第三个值*/
            .css('top',div[3])/*上偏移量为divi的第四个值*/
            .css('color','red');/*color设为红色*/
            
        });
        
        var spanheight;/*设置一个span的高度变量*/
        
        //鼠标移入提示相关信息
        $('.detailDiv').hover(function(){/*添加移入事件*/
            $(this).html('<span>'+$(this).attr('title')+'</span>');/*将点击的div内容显示
            为一个span包裹的当前div的title属性的值*/
            spanheight = $('.detailDiv > span').height();/*span的值等于当前div下的span的高度*/
            $(this).children('span').css('marginTop',($(this).height()-spanheight)/2);/*
            当前的children元素span的样式为(当前div的高度-span的高度)除以2得到居中的span*/
        },function(){
            $(this).html('');/*移除清空当前div的内容*/
        });
        
    });
</script>

Ajax&Json&jQuery

开始步骤同效果1

Detail.java:
package entity;

public class Detail {
    /*宽*/
    private int width;
    /*高*/
    private int height;
    /*左偏移量*/
    private int left;
    /*上偏移量*/
    private int top;
    /*描述信息*/
    private String desc;
    
    public Detail() {
        super();
    }
    
    public Detail(int width, int height, int left, int top, String desc) {
        super();
        this.width = width;
        this.height = height;
        this.left = left;
        this.top = top;
        this.desc = desc;
    }

    public int getWidth() {
        return width;
    }
    public void setWidth(int width) {
        this.width = width;
    }
    public int getHeight() {
        return height;
    }
    public void setHeight(int height) {
        this.height = height;
    }
    public int getLeft() {
        return left;
    }
    public void setLeft(int left) {
        this.left = left;
    }
    public int getTop() {
        return top;
    }
    public void setTop(int top) {
        this.top = top;
    }
    public String getDesc() {
        return desc;
    }
    public void setDesc(String desc) {
        this.desc = desc;
    }
    
    
}

DetailAction.java:
package action;

import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

import entity.Detail;
import net.sf.json.JSONArray;

public class DetailAction extends ActionSupport{

    private static final long serialVersionUID = 1L;

    public String getAllDetail() throws Exception{
        ServletActionContext.getResponse().setCharacterEncoding("utf-8");
        ServletActionContext.getRequest().setCharacterEncoding("utf-8");
        ServletActionContext.getResponse().setContentType("text/html; charset=utf-8");
     

        PrintWriter out = ServletActionContext.getResponse().getWriter();
        
        Detail detail1 = new Detail(66,196,54,60,"firstDiv");
        Detail detail2 = new Detail(160,110,180,38,"secondDiv");
        Detail detail3 = new Detail(160,88,200,226,"thirdDiv");
        List<Detail> details = new ArrayList<Detail>();
        details.add(detail1);
        details.add(detail2);
        details.add(detail3);
        
        JSONArray jsondetails = JSONArray.fromObject(details);
        out.print(jsondetails.toString());
        
        return null;
    }
}

示意图.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    .content{margin-left:auto;margin-right:auto;width:1000px;}
    .bg{margin-left:auto;margin-right:auto;width:500px;height:300px;position:relative;}
    .bg > img{width:500px;height:340px;}
    .detailDiv{text-align: center;}
    .detailDiv > span{display: inline-block;}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
var $details;/*定义一个全局jQuery变量*/ 
$(function(){
    $.ajax({
        url:'detailAction_getAllDetail.action',/*异步提交urlaction*/
        type:'post',/*提交类型为post*/
        dataType:'json',/*返回数据类型为json*/
        success:function(details){/*成功返回数据*/
            $details = $(details);/*将ajax对象转为jquery对象*/
            appendDiv();/*返回数据成功后再执行appendDiv方法*/
        }
    });
    function appendDiv(){
        $details.each(function(i,detail){/*each方法循环遍历details集合*/
            var rdiv = ''; //根据数据库返回的div相关信息生成div
            rdiv = '<div class="detailDiv" alt='+i+' title='+detail.desc+'></div>';/*生成一个Div
            ，其中title属性取值为detail的desc*/
            $('.bg').append(rdiv);/*将div追加在.bgDiv容器中*/
            $('.detailDiv:eq('+i+')')/*用eq过滤选择第几个div的css设置*/
            .css('position','absolute')
            .css('width',detail.width)
            .css('height',detail.height)
            .css('left',detail.left)
            .css('top',detail.top)
            .css('color','red');
            
        });
        
        var spanheight;/*设置一个span的高度变量*/
        
        //鼠标移入提示相关信息
        $('.detailDiv').hover(function(){/*添加移入事件*/
            $(this).html('<span>'+$(this).attr('title')+'</span>');/*将点击的div内容显示
            为一个span包裹的当前div的title属性的值*/
            spanheight = $('.detailDiv > span').height();/*span的值等于当前div下的span的高度*/
            $(this).children('span').css('marginTop',($(this).height()-spanheight)/2);/*
            当前的children元素span的样式为(当前div的高度-span的高度)除以2得到居中的span*/
        },function(){
            $(this).html('');/*移除清空当前div的内容*/
        });
    }
    });
</script>
</head>
<body>
    <div class="content">
     <div class="bg">
      <img src="image/shiyitu.PNG"/>
     </div>
    </div>
</body>
</html>

3.公共显示内容div，定位为absolute，获取鼠标进入提示div时候的坐标，使用clientX获取的是相对于浏览器的偏移，所以还要减去父定位div的相对浏览器的偏移，可以使用position，offset等方法直接获取，但浏览器兼容性有区别，可以使用css('marginLeft')的方式获取并截取字符串后，和鼠标进入的偏移进行相减后对公共div进行偏移和内容显示。
如果需要div显示在鼠标停止的位置，需要另外获取坐标。

AOP面向切面的编程一组有相似特征方法，特定时间点的附加业务逻辑编程

OOP的不足
如添加到数据库记日志，修改数据记日志，特殊的ip访问记日志，会造成冗余代码，污染了核心业务逻辑。
基本概念
连接点（joinpoint）
特定点，方法执行只有三个特定点，方法开始之前，方法结束之后（返回值），抛出异常
切入点（pointcut）
n个连接点的集合，按有相近或者相似方法名称的集合
通知（advice）
附加功能
方案（advisor）

pointcut = joinpoint * n
advisor = advice + pointcut

ChildrenTest.java

package gxa.aop;

import org.springframework.context.ApplicationContext;
import org.springframework.context.support.FileSystemXmlApplicationContext;

public class ChildrenTest {
    private String handState = "很脏";
    
    public String getHandState() {
        return handState;
    }

    public void setHandState(String handState) {
        this.handState = handState;
    }

    public void eatFruit() {
        System.out.println("吃水果");
    }

    public void eatLunch() {
        System.out.println("吃水果");
    }

    public void eatSnacks() {
        System.out.println("吃零食");
    }

    public void playJoy() {
        System.out.println("玩玩具");
    }

    public static void main(String[] args) {
        //代理工厂
        ApplicationContext context = new 
                FileSystemXmlApplicationContext("src/applicationContextAop.xml");
        Children children = (Children)context.getBean("children");
        System.out.println("没洗手之前"+children.getHandState());
        children.eatFruit();


    }
}

WashHandAdvice.java

package gxa.aop;

import java.lang.reflect.Field;
import java.lang.reflect.Method;

import org.springframework.aop.MethodBeforeAdvice;

public class WashHandAdvice implements MethodBeforeAdvice {

    @Override
    public void before(Method method, Object[] arg1, Object target) throws Throwable {
        System.out.println("洗手");   
        Field fd = target.getClass().getDeclaredField("handState"); 
        fd.setAccessible(true);
        fd.set(target,"很干净");
        System.out.println("吃东西之前"+((Children)target).getHandState());
    }

}

applicationContextAop.java

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5.xsd">
    <!-- Target 需要添加通知的类-->
    <bean name="oldChildren" class="aop.Children"/>
    <!-- 通知advice 通知类-->
    <bean name="washHandAdvice" class="aop.WashHandAdvice"/>
    
    <!-- 方案 通知+切入点 切入点为拦截eat方法添加通知-->
    <bean name="pointcut" class="org.springframework.aop.support.JdkRegexpMethodPointcut">
     <property name="pattern">
      <value>.*eat.*</value>
     </property>
    </bean>
    <!-- 前置通知，绑定通知类和切入点 -->
    <bean id="beforeAdvisor" class="org.springframework.aop.support.DefaultPointcutAdvisor">
     <property name="advice" ref="washHandAdvicec"/>
     <property name="pointcut" ref="pointcut"/>
    </bean>
    <!-- 代理工厂Bean，给出目标和方案 -->
    <bean id="children" class="org.springframework.aop.framework.ProxyFactoryBean">
     <property name="target" ref="oldChildren"/>
     <property name="interceptorNames">
      <list>
       <value>beforeAdvisor</value><!-- 内容与advisor对象名对应 -->
      </list>
     </property>
    </bean>
</beans>

思考：商品类有标价和成交价格，设置各种活动（事前通知，打折，抵扣），获得实际的成交价格。

2018-10-23：示意图效果与AOP概念
示意图效果 jQuery 效果：鼠标进入示意图区域，在示意图中心显示提示内容根据服务器返回的div设置的相关信息...
spring-aop
aop概念aop概念aop术语AOP实现方式1、spring-aop(使用xml文件实现AOP)2、AspectJ...
Spring中AOP源码深入解析
有关AOP相关概念以及Spring AOP相关概念和Spring AOP的使用不再重复。关于AOP在Spring中...
AOP概述-术语
AOP概念-术语什么是AOP AOP Aspect Oriented Programing 面向切面编程 AOP...
Android 面向切面编程（AOP）之 AspectJ
概念： AOP： Aspect Oriented Programming 面向切面编程。 AOP是个概念，Aspe...
Spring基础知识 day03 动态代理&Spring中
一、AOP 的相关概念 1.1 AOP 概述： 1.1.1 什么是 AOP： AOP全称是 Aspect Orie...
Spring之面向切面AOP
AOP概念 AOP的定义：AOP，Aspect Oriented Programming的缩写，意为面向切面编程，...
spring-aop
aop概念 AOP为Aspect Oriented Programming的缩写，意为：面向切面编程 aop术语 ...
轻松理解 Spring AOP
Spring AOP 简介 Spring AOP 的基本概念 AOP (Aspect-Oriented Progr...
AOP奇技淫巧
image 一、AOP的基本概念： 1、什么是aop： AOP（Aspect Oriented Programmi...

2018-10-23：示意图效果与AOP概念

示意图效果

jQuery

Ajax&Json&jQuery

AOP面向切面的编程一组有相似特征方法，特定时间点的附加业务逻辑编程

相关文章

2018-10-23：示意图效果与AOP概念

spring-aop

Spring中AOP源码深入解析

AOP概述-术语

Android 面向切面编程（AOP）之 AspectJ

Spring基础知识 day03 动态代理&Spring中

Spring之面向切面AOP

spring-aop

轻松理解 Spring AOP

AOP奇技淫巧

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

2018-10-23：示意图效果与AOP概念

示意图效果

jQuery

Ajax&Json&jQuery

AOP面向切面的编程 一组有相似特征方法，特定时间点的附加业务逻辑编程

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

AOP面向切面的编程一组有相似特征方法，特定时间点的附加业务逻辑编程