開發成長日誌: 12月 2017

2017年12月6日星期三

HTML 5 中的資料屬性

<li id="mainAccount" data-target="accountLayout">主帳號</li> JS上可以: var mainAccount = document.getElementById('mainAccount'); console.log(mainAccount.dataset.target);

css可以當作一個屬性:

{ content:attr(data-target);

}

li[data-target="accountLayout"] {

} 連結: https://pjchender.blogspot.tw/2017/01/html-5-data-attribute.html

gulp自动添加版本号

為什麼要添加版本號呢?因為用戶會暫存CSS，所以請求網址不一樣，瀏覽器就會重載，用戶才不會一直用到舊的貨
總之，因為時代變遷，但專案還是舊舊的，所以要現在比較少人用的gulp了
附上比較新的連結
https://www.qianyanqianyu.com/?p=14

through FormData object, but unfortunately it is not supported by all/old browsers.FormData support starts from following desktop browsers versions. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

附上ajax傳檔的連結:

http://www.jianshu.com/p/46e6e03a0d53
https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload
檔案加資料一起傳
https://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax

我常用的IDE功能

因為coding的年齡來不算太長，所以工具也不算熟用
用過
notepad++
eclipse
sublime
netbeans
visualstudiocode
我工作時間還不到兩年，所以有些只用了1個禮拜，有些用了幾個月，最長的也不到一年...
以下列visaulStudioCode，常忘記但會用到的快捷鍵，

ctrl+k+[
摺疊，可以幫我把所有的function摺起來
ctrl+u
游標回到上一個位置
shift+alt+f
格式化code
shift+alt+滑鼠左鍵
多游標操作
shift+alt+↓
複製上一行
ctrl+tab
切換到上個頁籤
ctrl+shift+\
游標跳到對應的括號
上頁下頁 alt +← alt +→

內建貼心功能
/** 在function上方打，就會出現format好的註釋，非常方便

外掛功能
Align ctrl+alt+a 將code像表格般對齊

在 vscode 1.8 版本增加了如下两个快捷键配置
自定义快捷键配置中 keybindings.json 增加如下代码即可

    {
        "key": "ctrl+shift+u",
        "command": "editor.action.transformToUppercase",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+shift+l",
        "command": "editor.action.transformToLowercase",
        "when": "editorTextFocus"
    }

https://www.zhihu.com/question/48779613/answer/146510029

http://qingbob.com/visual-studio-code-tips/

https://www.zhihu.com/question/37623310

快捷键大全
http://blog.csdn.net/crper/article/details/54099319

2017年12月4日星期一

javascript動態改變樣式

我們都知道添加CSS的方法有3+1種

行內套用 (Inline)
嵌入套用 (Embed)
外部連接套用 (External Link)
匯入套用 (Import)
https://www.1keydata.com/css-tutorial/tw/apply.php#link

但是要動態改變css該怎麼做呢?

1.改變行內套用(最基本的)
2.改變外部連結套用
通过改变外嵌CSS样式文件即时改变网页样式
http://blog.csdn.net/johnsuna/article/details/4346258

3.改變嵌入套用
YUI中使用了一个很好的办法：style.appendChild(document.createTextNode(styles));采用createTextNode将样式字符串添加到<style>标签内
http://www.css88.com/archives/4426

https://stackoverflow.com/questions/4232557/jquery-css-write-into-the-style-tag

2017年12月3日星期日

css3反轉HTML順序

https://stackoverflow.com/questions/25695000/how-to-display-a-reverse-ordered-list-in-html

1.You could rotate the parent element 180deg and then rotate the children elements -180deg.
2.Alternatively, you could use flex boxes along with the order property.
~~3.you could also use counter-increment along with a psuedo element.(~~this isn't technically reversing)
4.It allows you to reverse the order with the flex-directionproperty.
5.~~<ol reversed>~~(this isn't technically reversing)

有的時候因為有太多的板，HTML順序不會因為要改個皮而重新排版，此時就很考驗美術的想像力了QQ

2017年12月6日 星期三