小知識點總結

時間 2019-11-14

標籤知識總結简体版

原文原文鏈接

JavaScript （未完待續。。。）

全部對象都有 __proto__ 屬性，都指向創造對象的函數對象的 prototype。javascript

上傳文件要使用 formdata 包裝。css

Promise.prototype.catch 方法是 .then(null, rejection) 的別名。這句話來自ruanyifeng ES6的書Promise對象，catch。html

// bad promise .then(function(data) {  // success }, function(err) {  // error });  // good promise .then(function(data) { //cb  // success }) .catch(function(err) {  // error });

　　上面代碼中，第二種寫法要好於第一種寫法，理由是第二種寫法能夠捕獲前面then方法執行中的錯誤，也更接近同步的寫法（try/catch）。所以，建議老是使用catch方法，而不使用then方法的第二個參數。前端

同一個 EventTarget 註冊了多個相同的 EventListener，那麼重複的實例會被拋棄。因此這麼作不會使得 EventListener 被調用兩次，也不須要用 removeEventListener 手動清除多餘的EventListener，由於重複的都被自動拋棄了。在jQuery中，click()的重複調用，會致使註冊多個click事件。vue

當使用 addEventListener() 爲一個元素註冊事件的時候，句柄裏的 this 值是該元素的引用。其與傳遞給句柄的 event 參數的 currentTarget 屬性的值同樣,而 target 是直接接受事件的子元素。scrollIntoView() 使 div 底部滾動到視窗。大概意思是把滾動條滾動到可視區域。java

使用 const 的對象和數組的內容是能夠被修改的，但數據結構不可變。內容可變，是由於內存存的對象和數組是引用。node

在 webpack 裏，全部的文件都是模塊。loader 的做用就是把文件轉換成 webpack 能夠識別的模塊。webpack和gulp的開發文檔寫的是真的好，言簡意賅，通俗易懂。webpack

關於事件循環，執行下一個 task 以前總會清空 microtask。git

npm 新舊版本覆蓋可能會形成迷之問題，這個時候能夠試試 node_module 整個刪掉重裝，即刪掉文件夾，而後執行cnpm install。web

*、/ 和 - 操做符都是數字運算專用的。當這些運算符與字符串一塊兒使用時，會強制轉換字符串爲數字類型的值。若是想要顯示轉換可使用 parseInt

document.title 能夠直接修改當前 html 的標題。

利用對象淺拷貝修改對象，指向同一對象的兩個變量修改對象的效果同樣。這句話很不通順，不明？？？

腦洞題：1 和 2 只用一次的狀況下怎麼獲得 4 答案：1<<2。

連等賦值從右到左。不建議使用，會出現迷之狀況

compositionstart 事件觸發於一段文字的輸入以前（相似於 keydown 事件，可是該事件僅在若干可見字符的輸入以前，而這些可見字符的輸入可能須要一連串的鍵盤操做、語音識別或者點擊輸入法的備選詞）。也就是，它區別於得到焦點事件，它只有真正輸入可見字符時，才觸發。

void 0（void後面加任何東西）用於生成一個絕對的 undefined（不會被重定義），但跟函數會有反作用

注意 localStorage 保存的只能是字符串，因此是沒有 null 的。？？

坑一個

typeof [] === 'object' // true typeof null === 'object' // true

import 同步，require異步（待補充）

new() 作了些什麼？

var obj = new Base(); var obj = {}; obj.__proto__ = Base.prototype; Base.call(obj);

stage 0 到 4 的含義：

stage 0 is "i've got a crazy idea",
stage 1 is "this idea might not be stupid",
stage 2 is "let's use polyfills and transpilers to play with it",
stage 3 is "let's let browsers implement it and see how it goes",
stage 4 is "now it's javascript".
Object.getOwnPropertyNames(obj).length === 0 判斷 obj 是否是空對象。
getBoundingClientRect() 用於獲取元素寬高以及距離頁面邊框距離，十分方便。
&& 的使用場景：左邊爲真繼續執行右邊，如 isDog && bark()。
|| 的使用場景：左邊爲假繼續執行右邊，如 let i = value || defalutValue。
因爲同步請求會致使頁面假死，而異步請求雖然不影響頁面，可是腳本會忽略他是否回調，繼續執行，出現偷跑的狀況，一些須要在Ajax請求返回數據後再運行的業務邏輯，會受到影響。所以咱們要解決異步請求的順序問題，ES5能夠經過在回調函數裏寫業務邏輯來解決，而在ES6中提供了一個Promise來解決異步操做的問題，異步操做包括異步請求。
當先後端聯調須要用到openid時，在chrome瀏覽器，application => cookies裏雙擊添加 openid ，添加localStorage等
不要總寄但願於自適應，它也是相對的，不是萬能的，不可能適應全部設備。一個比較理想的解決方案是 rem+vw或vh+flex，此方案優於使用媒體查詢
flex會使得其包含在內的項寬度變成包裹狀態，會失去一些屬性，如width
調試接口時，在Network中查看接口的具體狀況，查看請求的返回和在header的請求參數。請求不對時，用接口文檔的測試器先測試，再找後端問
接手新系統的開發和維護時，會比較慢，這與編程能力沒有太大關係，隨着對新系統熟悉度上升，開發速度會愈來愈快
作項目，就是要快，先實現功能出來，不要一開始就考慮不少優化問題，全局變量該用就用，可是要注意拓展性（耦合性）。
咱們用樣式預處理器，就是爲了用變量和嵌套。
js 一切皆對象，我是說一切，你能想到的一切
技術文章，好文章不是每天有的，因此要學會三分鐘甄別，先快速閱讀，好的仔細看，差的隨便看。
前端，盡全力作成和UI設計同樣的
早上到公司第一個任務：列事物清單，對每一件事作工做規劃，有條件的話，能夠看一些視頻文章書本，找一找編程狀態
關於接口粒度過小，主要是保證靈活性，由於業務需求時時要改，不過缺點是前端會比較重，業務邏輯代碼會比較多
如有一年的前端開發工做經驗，對於各類組件，框架，只要研究說明文檔和demo，就可使用的，我以爲要提升就得研究原生的東西
注意，作算法時，要注意到n/0和 n%0問題
作項目，編碼階段，通常分爲，出效果完成功能，開發環境測試經過，測試環境測試經過
爲何要設置根元素爲62.5%的字體大小，而不是10px，實際上，瀏覽器最小字體爲12px，所以你設置10px是無效的。關於rem，看https://www.cnblogs.com/colorsed/p/7373346.html
想要設置全部子標籤(如全部子p標籤)的樣式，用空格，如div p
自定義屬性加data前綴，渲染時會自動識別爲用戶自定義屬性，若是你寫一個template，用了src=「${img-src}」,會致使一個出錯和浪費必定的載入時間
當你作一個列表時，若是一個item（顯示的項多，很長，錄入一行顯示 id 名字時間獎品等），顯示會溢出。字調小點時，居中，短的項顯得兩邊空，長短項一塊兒時感受兩邊長長短短沒對齊，不居中，左邊是對齊了，顯得右邊空。太長也無法用多個flex:1，或flex:2和flex:1組合，那就加一個margin-left: 值與前面模塊的左邊間距相等，也不失爲一種解決方案
作頁面必定最後要作一個步驟，就是和ui設計進行對比，摳細節
設置inline-block，而後沒有顯示出background-color，或者，你發現一行字突然顯示得偏上，這時你要檢查 line-height是否是爲0或者不合理。
頁面卡死，一個多是同步請求，另外一個是圖片等太大
不要在頁面body或者html輕易用line-height=0，會引發不少麻煩，例如span顯示文字問題，會致使只顯示一半
刷新去緩存，ctrl+f5
作C端，細節要求高，更講究用戶體驗的細節處理
word-break:break-all; 英文強制換行，不換行會使得強制溢出顯示一個長英文
關於rem https://www.cnblogs.com/colorsed/p/7373346.html
解決iso設備微信 audio自動播放：https://www.cnblogs.com/wangchuanyang/p/6288685.html
chrome瀏覽器：Control+Shift+P(Windows, Linux) 打開命令菜單，Control+shift+I (Windows, Linux) 來打開Devtools
用min-width和max-width，能夠避免一些問題，例如，移動端在某些ipad巨屏的自適應問題
一、childNodes：獲取節點，不一樣瀏覽器表現不一樣；

　　IE：只獲取元素節點；

　　非IE：獲取元素節點與文本節點；

　　解決方案：if(childNode.nodeName=="#text") continue 或者 if(childNode.nodeType != '3') continue

二、children：獲取元素節點，瀏覽器表現相同。

　　所以建議使用children。

line-height要比font-size設置大1到2個像素
爲了安全緣由，若是網頁直接從文件系統中加載，不少現代瀏覽器不容許JavaScript發起服務器請求,這是不少前端項目代碼沒法在桌面直接雙擊打開的緣由，打開會出錯
佈局、樣式微調，在chrome開發人員工具F12調，不要在編輯器改一下在刷新一下，效率過低！！
調試測試時，應該注意時長清緩存，以免出現「代碼溫室」的影響，即因爲緩存數據的支撐做用，而掩藏的真正的bug，看起來整個系統無缺順暢，這每每會在生產環境報錯
給提交按鈕添加不可點擊控制和樣式時，注意，除了提交成功/失敗時要去掉提交按鈕外，還有考慮填寫數據時不符合要求return時，也要去掉不可點擊（即要恢復點擊）
Zepto自帶的tap模塊由於有點透等問題
使用插件時，要注意傳入插件的參數類型，例如layDate的value，我一開始傳入string，走了不少彎路，最後發現雖然文檔也說傳string，如‘2010-12-2’，可是我嘗試發現若要傳入時間戳類的時間，用Date(時間戳)傳入才最終解決了問題。（固然，文檔也說支持Date）
操做日期的一點經驗，全部有關時間增減操做的，一概經過時間戳加減來進行，再搭配new Date()的getTime()等函數，這樣就能夠輕鬆實現時間處理和顯示。獲取時間並拼接，經過獲取字符串並拼接，最後利用var date = new Date('2014-04-23 18:55:49:123')來生成時間戳。還要記得坑：getMonth()+1
若是存在變量會被改變，想在改變失敗時恢復值，則用臨時變量保存，而不是直接賦特定值，由於你不能窮舉全部的特定值
按鈕禁用，防止重複提交，在最外層ajax成功返回或者失敗返回，只要返回，就在回調函數裏解除禁用
用百度編輯器setContent出現： Cannot set property 'innerHTML' of undefined，錯誤的緣由是沒有等UEditor建立完成就使用UEditor的setContent函數了，解決方法：
1. ueditor.addListener("ready", function () { ueditor.setContent('str'); });
2. ueditor.ready(function() { ueditor.setContent('str'); });
中獎滾動方案：margin-top、scrollTop、top
if ...else if...else if...else ：把最經常使用的狀況放在else裏，這樣，即便出現意外狀況，結果也會落到最後的else中，更加保險
用jq設置css樣式時，注意單位，如top的px
script放底部時，應該放在body內、
作表單最重要是作好表單驗證
作表單：
數據獲取，數據必填項，數據檢驗(類型和內容)，數據提交（包含：傳輸正常異常如404，提交成功失敗如res.err.code==0）
前端常見業務技術：列表，表單，導航，搜索
顯示loading，請求一開始就顯示，而後在回調的success和fail中去掉loading，設置buttton的disabled防止重複提交也說是同理。

   gbTurntable.init({
                        id: 'turntable',
                        config: function (callback) {

                            // 獲取獎品信息

                            if (prizeList.length == 0) {
                                callback && callback([{ text: '' }, { text: '' }]);
                            } else {
                                callback && callback()

                            }
                        }


                    });

這裏callback && callback()的前面一個callback是檢測有沒有傳入正確的回調函數名，沒有則不會調用回調函數

調用某個方法，就是，拿到指向該方法的指針變量，而後加一個括號
小程序的發佈有兩種，全量和階段發佈，作開發，就是用另一個小程序號，進行全量發佈
我的理解，call 和apply ，就是把a.to()的a變爲我傳入的對象，並借a的一個to()方法過來用，這叫狸貓換太子

<html>

<head>

</head>

<body>

</body>
<script>
    var obj = {
        say: function () {
            console.log(this)
        }
    }

    obj.say()
    obj.say.apply(this)

</script>

</html>

輸出：

用vw代替rem，grid與flex配合使用
用void(0)代替undefined
既然用了框架，那就要all in 框架，全部的東西，都用框架實現，不要雜用
個人作前端順序：先作佈局，再作數據綁定，最後微調樣式

Vue.js

v-model 會自動 bind 一個值，其變量名爲 value。
多個特性的元素應該分多行撰寫，每一個特性一行。如下爲 vscode 裏 vetur 的設置：
```
"vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force" } }
```
組件 destroy 時觸發自定義指令的 unbind，destory 的時機：diff 以後的 patch,如 v-if，v-for（key不一樣時，先銷燬原來的，再掛載新的（推測））
自定義組件 v-model watch 自動匹配（存疑
組件的 data 屬性要用函數返回的緣由：建立實例時若是 data 是一個對象的話，全部實例都會引用同一個對象，而對象返回不會有此問題。在瀏覽器中能夠這麼作是由於根實例只有一個。
.vue 文件中使用 /deep/ 覆蓋子組件 css
在編程界，所謂的安全，有不少種意思，例如web安全，還有一種更常見，例如：jQuery源碼被一個當即執行函數包裹，造成閉包，這樣可讓內部變量變得安全，這裏的安全，是指不會對其餘地方產生（意料以外的不可控的或沒法預料的）影響，一般這種影響有時隱蔽有時明顯，每每在他產生隱蔽的影響時會浪費咱們大量時間，這種狀況有個詞形容，叫變量污染！
scoped 給css提供一個樣式命名空間的功能，防止樣式污染
用vue開發獲取選中本項的id，v-for=「index in mydata」時，就直接 select(index)，不用再動態過去本條id，直接寫死如select(1) select(1124)等，固然前提是你在這個數組中，有一個屬性是真正的id，而後經過爲止id來映射真正的id
團隊內，css命名衝突，用bem解決
inline-block使得兩個脫離文檔流的元素(即設置了float)不會重疊
單點登陸，例如百度首頁登陸後，我去百度貼吧和百度知道，也會顯示已登陸狀態，多設備登陸就是例如微信，手機和我的電腦能夠同時登陸，收發信息
所謂轉義，就是這個符號原來已經表示一種意義了，這是爲了表示其餘意義，就加一個/來轉義，也就是轉爲其餘意義
JavaScript toFixed() 方法控制數字小數點位數

GitHub

從 commit 關閉 issues 的方法：commit 信息寫 Fixes #33，其餘關鍵字還有 close closes closed fix fixes fixed resolve resolves resolved

git reset --soft HEAD^ 回退一次 commit

CSS

div 的默認寬度是父元素寬的 100%

iso設備，對於非<a> <button>等標籤，點擊事件是無效的，解決方法是加上cursor：pointer

逐幀動畫 animation: animate-name 3s steps(每次循環的幀數) infinite;

@keyframes animate-name{

from{

background-position: 0 0;

}

to{

background-position: -1540px 0 ;

}

"Break out" of a parent's containing width to take the full screen of a page w/this nice utility class:

有關vm之妙，請看：

　　http://www.cnblogs.com/wengxuesong/archive/2016/05/16/5497653.html

　　https://aotu.io/notes/2017/04/28/2017-4-28-CSS-viewport-units/

.full-width { ？？

width: 100vw;

position: relative;

left: 50%;

right: 50%;

margin-left: -50vw;

margin-right: -50vw;

}

行內元素與下一個元素中間有空格（正常排版）,會引發一些詭異的縫隙，常見的例如元素之間有間隔，或看起來空了一行（像加了padding）

pre 標籤設置自動換行 white-space: pre-wrap;

隱藏一個元素，同時讓這個元素的寬度可獲取：設置 overflow: hidden 能夠根據元素高度裁剪視區，設置 height: 0; overflow: hidden 雖然文檔流中佔用了位置，因爲高度爲 0，最終表現特徵達到了咱們指望的 display: none。此時該元素 clientHeight、offsetHeight 爲 0，可是 scrollHeight 是有值的。scrollHeight 是一個元素沒有滾動條時的全部內容高度,當一個元素沒有滾動條時 scrollHeight === offsetHeight。

當 Render Tree 中部分或所有元素的尺寸、結構、或某些屬性發生改變時，瀏覽器從新渲染部分或所有文檔的過程稱爲迴流。

當頁面中元素樣式的改變並不影響它在文檔流中的位置時（例如：color、background-color、visibility等），瀏覽器會將新樣式賦予給元素並從新繪製它，這個過程稱爲重繪。

迴流必將引發重繪，重繪不必定會引發迴流。

文字的垂直居中，讓line-height=height（場景：一般在我把文字的容器設置了hieght，這時文字就會上下不居中）

button設置了border後就再也不有點擊（凹下凸上）的效果

使用僞類時，必定要寫content:''

選中文字高亮的css效果：

僅用於firefox和chrome瀏覽器 ie不支持

*::-moz-selection {color:#fc5;background-color:#0f581a;}

移動端優化經常使用 CSS 屬性：

user-select: none; // 禁止文字被選中

outline:none; // 去除點擊外邊框,點擊無輪廓

-webkit-touch-callout: none; // 長按連接不彈出菜單

-webkit-tap-highlight-color: rgba(0,0,0,0); // 去除點擊高亮

@keyframes 的屬性要先後對應，不然不造成動畫

img 元素圖像自適應居中，與 background-size 效果同樣

object-fit: cover;

<img /> 標籤千萬記得寫寬高，否則會花式塌陷

flex-grow 所在元素若是未定寬度的話，寬度會被子元素撐開

一個英文單詞默認不換行，不管多長，因此要設置 word break

多行文字居中

.mulit_line{

border:1px dashed #cccccc;

padding-left:5px;

}

.mulit_line span{

display:inline-block;

line-height:14px;

vertical-align:middle;

}

safari 中控制慣性滾動 -webkit-overflow-scroll

滾動條樣式可能使滾動條強制顯示（未肯定）

flex 佈局不換行加 flex-shrink: 0; 實現 div 不壓縮無限並排，能夠用於 swiper 等場景。

巧用貓頭鷹選擇器 *+*

float 自帶 display: block

鼠標禁用 .disabled { pointer-events: none; }

注意 :last-child 與 :last-of-type 的區別

::after 表示法是在 CSS3 中引入的，:: 符號是用來區分僞類和僞元素的。支持CSS3的瀏覽器同時也都支持 CSS2 中引入的表示法 :after。

父元素若是存在 transform 屬性，子元素的 position: fixed 屬性無效

less 中的 calc 問題：height: calc(~"100% - 50px");

vh 在部分瀏覽器中包含地址欄部分，當心使用。

要注意到兩個屬性：box-sizing和display

一個css神器：calc()和vh / vm ，詳見https://mp.weixin.qq.com/s/ZLeTRaEP4zrjnZRvk5EESA

當你進行頁面優化時，先找到最能提升用戶體驗的點先優化

rem+vw的好文：http://caibaojian.com/vw-vh.html

VSCode

alt + shift + 鼠標點擊縱向選擇

vetur 分號問題: 安裝 prettier，而後配置 "prettier.singleQuote":true,"prettier.semi": false

可使用插件 document this 方便寫註釋

html tag 屬性分行 wrap_attributes:force

選定變量後按 F12 找到定義位置

項目管理

快速迭代開發的項目，每一個工做日發佈至少一個版本

項目分輕重，重要的項目慢慢打磨（如B、C端），次要的項目保證功能使用（如後臺管理系統），合理分配開發時間，如有要求安排酌情安排

若是別人發現一個bug，而後你檢查後發現不是bug，你也要裝做修復的樣子，不然別人會一臉不情願想證實給你看，你是錯的。若是下次還出現同樣的問題，你就再解釋緣由，別人就不會抓着你不放

其餘

在組件化編程中，悼念被同名組件浪費了幾個鐘的 debug 時間[蠟燭]

iOS 的回彈效果，動的是 body 部分，html 是不動的

學習一個語言以前先看規範，當咱們已經熟悉掌握一門編程語言時，學習另外一門語言，就先學習它的規範，找異同，這樣最快

safari 的 formdata 只支持 append，其餘方法須要 polyfill

rc 的意思是 run commands

導航欄高度 88px，標籤欄高度 98px（iphone5和6經常使用）

關於 HTTP 304 Not Modified，簡單來講，請求內容沒有發生變化的時候，根據設置，服務器可能直接取緩存返回

一個很重要的技巧，ctrl+F5去緩存（更新緩存）刷新，適用Chrome，能夠減小不少開發沒必要要的麻煩

微信開發：

　　作一個Ｃ端項目時，oppo手機出現兼容性問題，整個js炸掉，頁面數據加載失敗。使用微信PC端查看時，出現一樣問題，所以，若解決微信PC端顯示的問題，就可能能夠解決掉某些真機運行出現
的這個問題。

首先，怎麼定位問題，我用的是vConsole，打印的錯誤：

Uncaught SyntaxError Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
HomeIndexbid=1&campusId=1&code=021bRAZR14r6D71VZ２２S1EerZR1bRAZ6&state=89013

微信配置完成

Uncaught ReferenceError controlMusicTop is not defined
HomeIndexbid=1&campusId=1&code=021bRAZRr6D71VZq011S1EerZR1bRAZ6&state=103713

　　第一個錯誤時ES6兼容性問題，注意檢查頁面是否存在let、=>、const、等ES6語法。

　　第二個錯誤是wx.ready()執行時，controlMusicTop 這個方法尚未生成，解決方法是用方法體代替方法名。

　　值得注意的是，vConsole引入與調用必須放在頁面頂部header，防止因其餘js腳本影響vConsole執行。

npm和package.json

　　管理本地安裝 npm 包的最好方式就是建立 package.json 文件，npm init 便可在當前目錄建立一個 package.json 文件，輸入 npm init 後會彈出一堆問題，嫌麻煩能夠直接輸入 npm init --yes 跳過回答問題步驟，直接生成默認值的 package.json 文件。

mint-ui

　　Cell隨着瀏覽器放大倍數的變化，會有時出現線，有時不出現

工具

前端png圖片壓縮神器：https://tinypng.com/

參考：https://segmentfault.com/a/1190000015758071

小程序

一、注意版本兼容性

二、請求封裝爲一個方法，包括域名，錯誤處理等

三、小程序的data數據獲取不到？我當時的狀況的是用 wx.getStorage 拿數據而後zaisuccess中給它setData，可是console.log()死活獲取不到，敲黑板：由於wx.getStorage 的回調方法是異步的！

四、刷新頁面後執行 onLoad一次，此後點擊導航欄回到頁面，都再也不執行

五、保存對象用this.obj=obj，而不是setData

六、取數據注意用that和this.data.xxx

七、彈出獲取權限的框（容許和拒絕），如今要單獨彈，用wx.authorize()，這是不少獲取用戶信息接口的基礎前提，如過去phoneNumber和userInfo。scope 爲 "scope.userInfo" 時，沒法彈出受權窗口，請使用 <button open-type="getUserInfo"></button>

八、將圖片完整顯示出來不被壓縮，mode="widthFix"+width:100%

九、體驗版沒數據返回：1 真機測試找不到填寫參數的入口 2 體驗版能夠在後臺修改路徑時添加參數，可是看不到錯誤信息 3 排除後發現原來是域名的問題，沒有設置好https的域名

十、VM245:1 invokeWebviewMethod 數據傳輸長度爲 1075593 已經超過最大長度 1048576 ，這裏的問題，是setData()的問題，若爲對象數組，一是數組長度太長，二是單個對象太大，最好先對後臺返回的數據進行控制，方式返回過多時出現問題

十一、wx.showModal({ }) 先後兩個時間挨太近時，會發生重疊

十二、想在開發工具中用參數，修改編譯模式便可（編譯按鈕左邊，添加編譯模式，這是第一種二維碼方式，第二種方式，就是sence=「參數」，不論多少參數，通通用key=value&key1=value1 encode編碼成「參數」），此時，已受權的紀錄會被清除，所以會從新彈出受權對話框

1三、不一樣店鋪有相同小程序碼可是參數不一樣，直接在微信右上角掃碼，進入小程序後，可實現進入不一樣店鋪。即便我剛剛掃了上一家店鋪，而且小程序處於onHide狀態，我再掃別的店鋪的二維碼，仍是會執行onload並拿到另外一家店鋪的參數，而不是直接執行onshow並顯示上一家店鋪。

1四、執行onload時會執行onshow，所以只要在data中設置一個flag=false，而後在onshow中最外層包if（flag），在onload中setData flag爲true

1五、小程序撥打電話：wx. makePhoneCall(Object object)

1六、獲取input的值，利用form組件來進行

1七、對列表項進行事件綁定，能夠利用wx|:for，對模板設置好bindTab=「function」便可

WEB項目的BUG，大多來自於以下：

數據：一、數據的錄入過濾和格式控制或限定（類型和格式）二、對視圖的意外的影響（顯示長度溢出、類型，格式）