整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          JSP 自定義標簽

          自定義標簽是用戶定義的JSP語言元素。當(dāng)JSP頁面包含一個自定義標簽時將被轉(zhuǎn)化為servlet,標簽轉(zhuǎn)化為對被 稱為tag handler的對象的操作,即當(dāng)servlet執(zhí)行時Web container調(diào)用那些操作。

          JSP標簽擴展可以讓你創(chuàng)建新的標簽并且可以直接插入到一個JSP頁面。 JSP 2.0規(guī)范中引入Simple Tag Handlers來編寫這些自定義標記。

          你可以繼承SimpleTagSupport類并重寫的doTag()方法來開發(fā)一個最簡單的自定義標簽。

          創(chuàng)建"Hello"標簽

          接下來,我們想創(chuàng)建一個自定義標簽叫作<ex:Hello>,標簽格式為:

          <ex:Hello />

          要創(chuàng)建自定義的JSP標簽,你首先必須創(chuàng)建處理標簽的Java類。所以,讓我們創(chuàng)建一個HelloTag類,如下所示:

          package com.runoob;

          import javax.servlet.jsp.tagext.*;

          import javax.servlet.jsp.*;

          import java.io.*;

          public class HelloTag extends SimpleTagSupport {

          public void doTag() throws JspException, IOException {

          JspWriter out = getJspContext().getOut();

          out.println("Hello Custom Tag!");

          }

          }

          以下代碼重寫了doTag()方法,方法中使用了getJspContext()方法來獲取當(dāng)前的JspContext對象,并將"Hello Custom Tag!"傳遞給JspWriter對象。

          編譯以上類,并將其復(fù)制到環(huán)境變量CLASSPATH目錄中。最后創(chuàng)建如下標簽庫:<Tomcat安裝目錄>webapps\ROOT\WEB-INF\custom.tld。

          <taglib>

          <tlib-version>1.0</tlib-version>

          <jsp-version>2.0</jsp-version>

          <short-name>Example TLD</short-name>

          <tag>

          <name>Hello</name>

          <tag-class>com.runoob.HelloTag</tag-class>

          <body-content>empty</body-content>

          </tag>

          </taglib>

          接下來,我們就可以在JSP文件中使用Hello標簽:

          <%@ taglib prefix="ex" uri="WEB-INF/custom.tld"%>

          <html>

          <head>

          <title>A sample custom tag</title>

          </head>

          <body>

          <ex:Hello/>

          </body>

          </html>

          以上程序輸出結(jié)果為:

          Hello Custom Tag!

          訪問標簽體

          你可以像標準標簽庫一樣在標簽中包含消息內(nèi)容。如我們要在我們自定義的Hello中包含內(nèi)容,格式如下:

          <ex:Hello>

          This is message body

          </ex:Hello>

          我們可以修改標簽處理類文件,代碼如下:

          package com.runoob;

          import javax.servlet.jsp.tagext.*;

          import javax.servlet.jsp.*;

          import java.io.*;

          public class HelloTag extends SimpleTagSupport {

          StringWriter sw = new StringWriter();

          public void doTag()

          throws JspException, IOException

          {

          getJspBody().invoke(sw);

          getJspContext().getOut().println(sw.toString());

          }

          }

          接下來我們需要修改TLD文件,如下所示:

          <taglib>

          <tlib-version>1.0</tlib-version>

          <jsp-version>2.0</jsp-version>

          <short-name>Example TLD with Body</short-name>

          <tag>

          <name>Hello</name>

          <tag-class>com.runoob.HelloTag</tag-class>

          <body-content>scriptless</body-content>

          </tag>

          </taglib>

          現(xiàn)在我們可以在JSP使用修改后的標簽,如下所示:

          <%@ taglib prefix="ex" uri="WEB-INF/custom.tld"%>

          <html>

          <head>

          <title>A sample custom tag</title>

          </head>

          <body>

          <ex:Hello>

          This is message body

          </ex:Hello>

          </body>

          </html>

          以上程序輸出結(jié)果如下所示:

          This is message body

          自定義標簽屬性

          你可以在自定義標準中設(shè)置各種屬性,要接收屬性,值自定義標簽類必須實現(xiàn)setter方法, JavaBean 中的setter方法如下所示:

          package com.runoob;

          import javax.servlet.jsp.tagext.*;

          import javax.servlet.jsp.*;

          import java.io.*;

          public class HelloTag extends SimpleTagSupport {

          private String message;

          public void setMessage(String msg) {

          this.message = msg;

          }

          StringWriter sw = new StringWriter();

          public void doTag()

          throws JspException, IOException

          {

          if (message != null) {

          /* 從屬性中使用消息 */

          JspWriter out = getJspContext().getOut();

          out.println( message );

          }

          else {

          /* 從內(nèi)容體中使用消息 */

          getJspBody().invoke(sw);

          getJspContext().getOut().println(sw.toString());

          }

          }

          }

          屬性的名稱是"message",所以setter方法是的setMessage()。現(xiàn)在讓我們在TLD文件中使用的<attribute>元素添加此屬性:

          <taglib>

          <tlib-version>1.0</tlib-version>

          <jsp-version>2.0</jsp-version>

          <short-name>Example TLD with Body</short-name>

          <tag>

          <name>Hello</name>

          <tag-class>com.runoob.HelloTag</tag-class>

          <body-content>scriptless</body-content>

          <attribute>

          <name>message</name>

          </attribute>

          </tag>

          </taglib>

          現(xiàn)在我們就可以在JSP文件中使用message屬性了,如下所示:

          <%@ taglib prefix="ex" uri="WEB-INF/custom.tld"%>

          <html>

          <head>

          <title>A sample custom tag</title>

          </head>

          <body>

          <ex:Hello message="This is custom tag" />

          </body>

          </html>

          以上實例數(shù)據(jù)輸出結(jié)果為:

          This is custom tag

          你還可以包含以下屬性:

          屬性描述
          name定義屬性的名稱。每個標簽的是屬性名稱必須是唯一的。
          required指定屬性是否是必須的或者可選的,如果設(shè)置為false為可選。
          rtexprvalue聲明在運行表達式時,標簽屬性是否有效。
          type定義該屬性的Java類類型 。默認指定為 String
          description描述信息
          fragment如果聲明了該屬性,屬性值將被視為一個 JspFragment

          以下是指定相關(guān)的屬性實例:

          .....

          <attribute>

          <name>attribute_name</name>

          <required>false</required>

          <type>java.util.Date</type>

          <fragment>false</fragment>

          </attribute>

          .....

          如果你使用了兩個屬性,修改TLD文件,如下所示:

          .....

          <attribute>

          <name>attribute_name1</name>

          <required>false</required>

          <type>java.util.Boolean</type>

          <fragment>false</fragment>

          </attribute>

          <attribute>

          <name>attribute_name2</name>

          <required>true</required>

          <type>java.util.Date</type>

          </attribute>

          .....

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          標記不再正確的文本:

          <p><s>My car is blue.</s></p>

          <p>My new car is silver.</p>


          瀏覽器支持

          所有主流瀏覽器都支持 <s> 標簽。


          標簽定義及使用說明

          <s> 標簽對那些不正確、不準確或者沒有用的文本進行標識。

          <s> 標簽不應(yīng)該用來定義替換的或者刪除的文本。如果要定義替換的或者刪除的文本,請使用 <del>標簽。


          HTML 4.01 與 HTML5之間的差異

          在 HTML 4.01 中,<s> 元素 已廢棄,用來給文本加刪除線。

          HTML5 重定義了 <s> 元素,現(xiàn)在是被用來定義那些不正確的文本。


          全局屬性

          <s> 標簽支持 HTML 的全局屬性。


          事件屬性

          <s> 標簽支持 HTML 的事件屬性。

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          同許多初學(xué) Javascript 的菜鳥一樣,起初,我也是采用拼接字符串的形式,將 JSON 數(shù)據(jù)嵌入 HTML 中。開始時代碼量較少,暫時還可以接受。但當(dāng)頁面結(jié)構(gòu)復(fù)雜起來后,其弱點開始變得無法忍受起來:

          • 書寫不連貫。每寫一個變量就要斷一下,插入一個 + 和 “。十分容易出錯。

          • 無法重用。HTML 片段都是離散化的數(shù)據(jù),難以對其中重復(fù)的部分進行提取。

          • 無法很好地利用<tempalte> 標簽。這是 HTML5 中新增的一個標簽,標準極力推薦將 HTML 模板放入<template> 標簽中,使代碼更簡潔。

          當(dāng)時我的心情就是這樣的:

          這TMD是在逗我嗎。

          于是出來了后來的 ES6,ES6的模板字符串用起來著實方便,對于比較老的項目,項目沒webpackgulp 等構(gòu)建工具,無法使用 ES6 的語法,但是想也借鑒這種優(yōu)秀的處理字符串拼接的方式,我們不妨可以試著自己寫一個,主要是思路,可以使用 ES6 語法模擬 ES6的模板字符串的這個功能。

          后端返回的一般都是 JSON 的數(shù)據(jù)格式,所以我們按照下面的規(guī)則進行模擬。

          需求描述

          實現(xiàn)一個 render(template, context) 方法,將 template 中的占位符用 context 填充。

          要求:

          不需要有控制流成分(如 循環(huán)、條件 等等),只要有變量替換功能即可

          級聯(lián)的變量也可以展開

          被轉(zhuǎn)義的的分隔符 { 和 } 不應(yīng)該被渲染,分隔符與變量之間允許有空白字符

          1

          2

          3

          varobj={name:"二月",age:"15"};

          varstr="{{name}}很厲害,才{{age}}歲";

          輸出:二月很厲害,才15歲。<strong>PS:本文需要對<a>正則表達式</a>,建議先去學(xué)習(xí)一下,正則也是面試筆試必備的技能,上面鏈接末尾有不少正則學(xué)習(xí)的鏈接。</strong>

          如果是你,你會怎么實現(xiàn)?可以先嘗試自己寫寫,實現(xiàn)也不難。

          先不說我的實現(xiàn),我把這個題給其他好友做的時候,實現(xiàn)的不盡相同,我們先看幾位童鞋的實現(xiàn),然后在他們的基礎(chǔ)上找到常見的誤區(qū)以及實現(xiàn)不夠優(yōu)雅的地方。

          二月童鞋:

          1

          2

          3

          4

          5

          6

          7

          8

          9

          10

          11

          let str="{{name}}很厲害,才{{age}}歲"

          let obj={name:'二月',age:15}

          functiontest(str,obj){

          let _s=str.replace(/\{\{(\w+)\}\}/g,'')

          let result

          for(letkinobj){

          _s=_s.replace(newRegExp(k,'g'),obj[k])

          }

          return_s

          }

          consts=test(str,obj)

          最基本的是實現(xiàn)了,但是代碼還是有很多問題沒考慮到,首先 Object 的 key 值不一定只是 w,

          還有就是如果字符串是這種的:

          1

          2

          let str="{{name}}很name厲害,才{{age}}歲"`

          會輸出:二月很厲害二月害,才15歲

          此處你需要了解正則的分組才會明白 的含義,錯誤很明顯,把本來就是字符串不要替換的 name 也給替換了,從代碼我們可以看出二月的思路。

          1. 代碼的作用目標是 str,先用正則匹配出 {{name}}{{age}},然后用分組獲取括號的 name,age,最后用 replace 方法把 {{name}}{{age}} 替換成 nameage,最后字符串就成了 name很name厲害,才age歲,最后 for in 循環(huán)的時候才導(dǎo)致一起都被替換掉了。

          2. for in 循環(huán)完全沒必要,能不用 for in 盡量不要用 for infor in 會遍歷自身以及原型鏈所有的屬性。

          志欽童鞋:

          JavaScript

          1

          2

          3

          4

          5

          6

          7

          8

          9

          10

          11

          12

          13

          14

          15

          varstr="{{name}}很厲害,才{{age}}歲";

          varstr2="{{name}}很厲name害,才{{age}}歲{{name}}";

          varobj={name:'周杰倫',age:15};

          functionfun(str,obj){

          vararr;

          arr=str.match(/{{[a-zA-Z\d]+}}/g);

          for(vari=0;i<arr.length;i++){

          arr[i]=arr[i].replace(/{{|}}/g,'');

          str=str.replace('{{'+arr[i]+'}}',obj[arr[i]]);

          }

          returnstr;

          }

          console.log(fun(str,obj));

          console.log(fun(str2,obj));

          思路是正確的,知道最后要替換的是 {{name}}{{age}} 整體,而不是像二月童鞋那樣最后去替換 name,所有跑起來肯定沒問題,實現(xiàn)是實現(xiàn)了但是感覺有點那個,我們要探討的是一行代碼也就是代碼越少越好。

          小維童鞋:

          1

          2

          3

          4

          5

          6

          7

          8

          9

          10

          11

          functiona(str,obj){

          varstr1=str;

          for(varkey inobj){

          varre=newRegExp("{{"+key+"}}","g");

          str1=str1.replace(re,obj[key]);

          }

          console.log(str1);

          }

          conststr="{{name}}很厲name害{{name}},才{{age}}歲";

          constobj={name:"jawil",age:"15"};

          a(str,obj);實現(xiàn)的已經(jīng)簡單明了了,就是把<code>obj</code>的<code>key</code>值遍歷,然后拼成<code>{{key}}</code>,最后用<code>obj[key]</code>也就是<code>value</code>把<code>{{key}}</code>整個給替換了,思路很好,跟我最初的版本一個樣。

          我的實現(xiàn):

          1

          2

          3

          4

          5

          6

          7

          8

          9

          functionparseString(str,obj){

          Object.keys(obj).forEach(key=>{

          str=str.replace(newRegExp(`{{${key}}}`,'g'),obj[key]);

          });

          returnstr;

          }

          conststr="{{name}}很厲name害{{name}},才{{age}}歲";

          constobj={name:"jawil",age:"15"};

          console.log(parseString(str,obj));

          其實這里還是有些問題的,首先我沒用 for…in 循環(huán)就是為了考慮不必要的循環(huán),因為 for…in 循環(huán)會遍歷原型鏈所有的可枚舉屬性,造成不必要的循環(huán)。

          我們可以簡單看一個例子,看看 for…in的可怕性。

          1

          2

          3

          4

          5

          6

          7

          8

          9

          // Chrome v63

          constdiv=document.createElement('div');

          letm=0;

          for(letkindiv){

          m++;

          }

          letn=0;

          console.log(m);// 231

          console.log(Object.keys(div).length);// 0

          一個 DOM 節(jié)點屬性竟然有這么多的屬性,列舉這個例子只是讓大家看到 for in 遍歷的效率問題,不要輕易用 for in循環(huán),通過這個 DOM 節(jié)點之多也可以一定程度了解到 React Virtual DOM 的思想和優(yōu)越性。

          除了用 for in 循環(huán)獲取 objkey 值,還可以用 Object.key() 獲取,Object.getOwnPropertyNames() 以及 Reflect.ownKeys()也可以獲取,那么這幾種有啥區(qū)別呢?這里就簡單說一下他們的一些區(qū)別。

          上面說的可能比較抽象,不夠直觀。可以看個我寫的 DEMO,一切簡單明鳥。

          JavaScript

          1

          2

          3

          4

          5

          6

          7

          8

          9

          10

          11

          12

          13

          14

          15

          16

          17

          18

          19

          constparent={

          a:1,

          b:2,

          c:3

          };

          constchild={

          d:4,

          e:5,

          [Symbol()]:6

          };

          child.__proto__=parent;

          Object.defineProperty(child,"d",{enumerable:false});

          for(varattr inchild){

          console.log("for...in:",attr);// a,b,c,e

          }

          console.log("Object.keys:",Object.keys(child));// [ 'e' ]

          console.log("Object.getOwnPropertyNames:",Object.getOwnPropertyNames(child));// [ 'd', 'e' ]

          console.log("Reflect.ownKeys:",Reflect.ownKeys(child));// [ 'd', 'e', Symbol() ]

          最后實現(xiàn)

          上面的實現(xiàn)其實已經(jīng)很簡潔了,但是還是有些不完美的地方,通過 MDN 首先我們先了解一下 replace 的用法。

          通過文檔里面寫的 str.replace(regexp|substr, newSubStr|function) ,我們可以發(fā)現(xiàn) replace 方法可以傳入 function 回調(diào)函數(shù),

          function (replacement) 一個用來創(chuàng)建新子字符串的函數(shù),該函數(shù)的返回值將替換掉第一個參數(shù)匹配到的結(jié)果。參考這個指定一個函數(shù)作為參數(shù)。

          有了這句話,其實就很好實現(xiàn)了,先看看具體代碼再做下一步分析。

          1

          2

          3

          4

          5

          6

          functionrender(template,context){

          returntemplate.replace(/\{\{(.*?)\}\}/g,(match,key)=>context[key]);

          }

          consttemplate="{{name}}很厲name害,才{{age}}歲";

          constcontext={name:"jawil",age:"15"};

          console.log(render(template,context));

          可以對照上面文檔的話來做分析:該函數(shù)的返回值(obj[key]=jawil)將替換掉第一個參數(shù)(match=={{name}})匹配到的結(jié)果。

          簡單分析一下:.*? 是正則固定搭配用法,表示非貪婪匹配模式,盡可能匹配少的,什么意思呢?舉個簡單的例子。

          先看一個例子:

          JavaScript

          1

          2

          3

          4

          5

          6

          7

          8

          9

          源字符串:aa<div>test1</div>bb<div>test2</div>cc

          正則表達式一:<div>.*</div>

          匹配結(jié)果一:<div>test1</div>bb<div>test2</div>

          正則表達式二:<div>.*?</div>

          匹配結(jié)果二:<div>test1</div>(這里指的是一次匹配結(jié)果,不使用/g,所以沒包括<div>test2</div>)

          根據(jù)上面的例子,從匹配行為上分析一下,什是貪婪與非貪婪匹配模式。

          利用非貪婪匹配模就能匹配到所有的{{name}}{{age}},上面的也說到過正則分組,分組匹配到的就是 name,也就是 function 的第二個參數(shù) key

          所以這行代碼的意思就很清楚,正則匹配到{{name}},分組獲取 name,然后把 {{name}}替換成 obj[name](jawil)。

          當(dāng)然后來發(fā)現(xiàn)還有一個小問題,如果有空格的話就會匹配失敗,類似這種寫法:

          1

          consttemplate="{{name }}很厲name害,才{{age }}歲";

          所以在上面的基礎(chǔ)上還要去掉空格,其實也很簡單,用正則或者 String.prototype.trim() 方法都行。

          1

          2

          3

          4

          5

          6

          functionrender(template,context){

          returntemplate.replace(/\{\{(.*?)\}\}/g,(match,key)=>context[key.trim()]);

          }

          consttemplate="{{name }}很厲name害,才{{age }}歲";

          constcontext={name:"jawil",age:"15"};

          console.log(render(template,context));<strong>將函數(shù)掛到String的原型鏈,得到最終版本</strong>

          甚至,我們可以通過修改原型鏈,實現(xiàn)一些很酷的效果:

          1

          2

          3

          String.prototype.render=function(context){

          returnthis.replace(/\{\{(.*?)\}\}/g,(match,key)=>context[key.trim()]);

          };

          如果{}中間不是數(shù)字,則{}本身不需要轉(zhuǎn)義,所以最終最簡潔的代碼:

          1

          2

          3

          String.prototype.render=function(context){

          returnthis.replace(/{{(.*?)}}/g,(match,key)=>context[key.trim()]);

          };之后,我們便可以這樣調(diào)用啦:

          1

          "{{name}}很厲name害,才{{ age }}歲".render({name:"jawil",age:"15"});

          收獲

          通過一個小小的模板字符串的實現(xiàn),領(lǐng)悟到要把一個功能實現(xiàn)不難,要把做到完美真是難上加難,需要對基礎(chǔ)掌握牢固,有一定的沉淀,然后不斷地打磨才能比較優(yōu)雅的實現(xiàn),通過由一個很小的點往往可以拓展出很多的知識點。


          主站蜘蛛池模板: 激情爆乳一区二区三区| 中文字幕一精品亚洲无线一区| 国产亚洲一区区二区在线| 无码一区二区三区AV免费| 日韩人妻一区二区三区蜜桃视频| 一区二区三区电影在线观看| 成人h动漫精品一区二区无码| 亚洲一区在线免费观看| 麻豆一区二区99久久久久| 在线视频一区二区| 国产精品一区在线麻豆| 精品无码国产一区二区三区51安| 精品国产乱子伦一区二区三区| 亚洲一区二区三区播放在线| 无码人妻精品一区二区三区蜜桃 | 亚洲AV无码一区东京热| 成人区精品一区二区不卡亚洲| 人妻少妇精品视频三区二区一区| 国产在线观看91精品一区| 亚洲日韩激情无码一区 | 亚洲人成人一区二区三区| 国产午夜精品一区理论片| 黑巨人与欧美精品一区| 国产vr一区二区在线观看| 久久青草国产精品一区| 人妻视频一区二区三区免费| 成人精品视频一区二区三区不卡| 亚洲一区二区三区电影| 一本一道波多野结衣AV一区| 中文字幕一区二区三区乱码| 毛片一区二区三区| 国模少妇一区二区三区| 毛片无码一区二区三区a片视频| 农村人乱弄一区二区 | 色欲综合一区二区三区| 亚洲男人的天堂一区二区| 国内精品视频一区二区三区八戒| 亚洲AV无码一区二区三区系列| 国产福利电影一区二区三区久久老子无码午夜伦不 | 国产色精品vr一区区三区 | 日韩av无码一区二区三区|