移動web開發總結

来源:http://www.cnblogs.com/roucheng/archive/2016/04/22/mobile.html
-Advertisement-
Play Games

讓網頁的寬度自適應屏幕<meta name="viewport" content="width=device-width"/> 1）html上加入<meta name="viewport" content=" initial-scale=1.0,user-scalable=no" /> 發確保網頁的 ...


讓網頁的寬度自適應屏幕<meta name="viewport" content="width=device-width"/>  
 1）html上加入<meta name="viewport" content=" initial-scale=1.0,user-scalable=no" />
    發確保網頁的效果
       2）
        加上以下語句可使網頁在蘋果設備上運行更好
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
     3）加入這句話可以定義iphone的添加到主屏幕的圖標
    <link rel="apple-touch-icon" href="/images/logo.png" />

 

網頁打開方式：<a href="#" target="_blank">鏈接</a>
target的值：_self(相同視窗，瀏覽器預設)、_top(整頁視窗)和_parent(父視窗)相同、_blank(在新建的視窗打開)
<head><base target="_blank" ></head>表示頁面中的所有鏈接都在新視窗打開

<a href="" rel="external">madinc.co</a>//

autocomplete="off"//去掉輸入框的歷史記錄

querySelector只返回匹配的第一個元素，如果沒有匹配項，返回null。
querySelectorAll返回匹配的元素集合，如果沒有匹配項，返回空的nodelist(節點數組)。
document.querySelector('#indicator > li.active').className = '';//......

innerheight: 返回視窗的文檔顯示區的高度。 (IE用document.documentElement.clientHeight)
innerwidth 返回視窗的文檔顯示區的寬度。(IE用document.documentElement.clientWidth )

<-----------------------------------------------------------------HTML5---------------->
<html manifest="manifest.cache"><!---緩存--->
HTML5新增:
contenteditable:設置是否允許用戶編輯元素
contentextmenu:給元素設置一個上下文菜單
draggable:設置是否允許用戶拖動元素
irrelevant:設置元素是否相關。不顯示非相關的元素。
ref:引用另一個文檔或本文檔上另一個位置。僅在template屬性設置時使用
registrationmark:為元素設置拍照。可規定於任何<rule>元素的後代，除了<nest>元素

<!------IE8以及以下不支持HTML5的解決辦法------>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<meta name="viewport" content="width=device-width,  initial-scale=1.0, user-scalable=0, minimum-scale=1.0,  maximum-scale=1.0" />// 控制手機全屏 ： 強制讓文檔的寬度與設備的寬度保持1:1， 並且文檔最大的寬度比例  是1.0，且不允許用戶點擊屏幕放大瀏覽
//viewport:可視區域
//initial-scale:初始的縮放比例;user-scalable:用戶是否可以手動縮放;
//minimum-scale:允許用戶縮放的最小比例;maximum-scale :允許用戶縮放的最大比例

<meta name="format-detection" content="telephone=no"/>//在手機中不會將網頁中的一串數字(電話號碼)顯示為撥號的超鏈接,預設telephone=yes 

<meta name=”apple-mobile-web-app-capable” content=”yes” />//刪除黙認的蘋果菜單欄和工具欄,如需要蘋果菜單欄和工具欄可不加

<meta name=”apple-mobile-web-app-status-bar-style”  content=”default”  />//控制狀態欄樣式content有三個值：default、black、black-translucent

<link rel="apple-touch-icon" href="res/images/icon.png" />//對移動網站-mobile web進行收藏（“添加到桌面圖標”）的時候增加的圖標定義屬性
//apple-touch-icon:增加高光光亮的圖標
//apple-touch-icon-precomposed:設計原圖圖標

網頁針對不同屏幕解析度修改，用-webkit-device-pixel-ratio這個media標簽或在js中用  window.devicePixelRatio這個方法，設置target-densitydpi標簽和device-dpi屬性。這讓你的定製更具有 靈活性。


移動網站的視圖的標簽
<div data-role="page" id="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>

HTML5的data-首碼就被稱為data屬性

本地存儲:
sessionStorage.lastname="Smith";//針對session的存儲
localStorage.lastname="Smith";//沒有時間限制的本地存儲(IE8也支持)
document.write(localStorage.lastname);
使用本地存儲前應先確定window.localStorage是否存在

<input id="name" name="name" type="text" placeholder="zhangxinxu"  required="required"  />//placeholder:預設提示,required:定義輸入的欄位是否必須(提交時的非空驗證)

HTML5 提供了兩種檢測是否線上的方式：navigator.online（true/false） 和 online/offline事件。
navigator.standalone為true:從桌面啟動
navigator.standalone為false:從ios瀏覽器啟動


localStorage. length:返回現在已經存儲的變數數目。
localStorage. key(n):返回第n個變數的鍵值(key)。
localStorage.getItem(k):和localStorage.k一樣，取得鍵值為k的變數的值。
localStorage.setItem(k , v):和localStorage.k = v一樣，設置鍵值k的變數值。
localStorage.removeItem(k):刪除鍵值為k的變數。
localStorage.clear():清空所有變數。


window.applicationCache對象的事件:
checking: 用戶代理檢查更新或者在第一次嘗試下載manifest文件的時候，本事件往往是事件隊列中第一個被觸發的

noupdate: 檢測出manifest文件沒有更新

downloading: 用戶代理髮現更新並且正在取資源，或者第一次下載manifest文件列表中列舉的資源

progress: 用戶代理正在下載資源manifest文件中的需要緩存的資源

cached: manifest中列舉的資源已經下載完成，並且已經緩存

updateready: manifest中列舉的文件已經重新下載並更新成功，接下來js可以使用swapCache()方法更新到應用程式中

obsolete: 1、manifest的請求出現404或者410錯誤，應用程式緩存被取消 2、manifest的請求出現404或者410錯誤，更新緩存的請求失敗 3、manifest文件沒有改變，但是頁面引用的manifest 文件沒有被正確地下載

error: 1、在取manifest列舉的資源的過程中發生致命的錯誤  2、在更新過程中manifest文件發生變化

http://www.cnblogs.com/roucheng/p/sunwukong.html
<---------------------------------------------------------------CSS---------------->
-moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;//圓角
text-shadow: 2px 2px 5px #333;//添加陰影
-webkit-user-select: none;//不可先擇文字(webkit內核的瀏覽器)
-webkit-text-size-adjust:none;//蘋果移動設備上會識別，用於保證文字大小
變形(transformation)、轉換(transition)和動畫(animation)

圖片旋轉的一個樣式：
transition_duration{
-webkit-transform:rotate(10deg);
-webkit-transition-property:all; //發生變化的屬性
-webkit-transition-duration:0.5s; //發生變化的時間
-webkit-transition-timing-function:ease-in;//定義動畫變化的曲線
}
transition_duration:hover{
-webkit-transform:rotate(40deg);
}


transform:旋轉、扭曲、縮放、移動、矩陣變形 {transform-origin:元素的基點，預設在元素中心}
transform: rotate(30deg) | scale(2,1.5)(水平,垂直) | skew(30deg,10deg) | translate(100px,20px) |matrix;

 

<------------------------------------------------------------ajax------------------>
isLocal: true//該請求來自本地電腦


用document.onreadystatechange的方法來監聽狀態改變，
用document.readyState == “complete”判斷是否載入完成

0 － uninitialized （未初始化）還沒有調用send()方法  
1 － loading （載入）已調用send()方法，正在發送請求
2 － loaded （載入完成）send()方法執行完成，已經接收到全部響應內容
3 － interactive （交互）正在解析響應內容
4 － complete （完成）響應內容解析完成，可以在客戶端調用了


<-----------------------------------------------------jQuery  js----------------------->
document.getElementById("testButton").addEventListener("click", Go, false);//添加監聽事件
window 的DOMContentLoaded事件在形成完成的DOM樹之後就會觸發，不理會圖像、JavaScript文件、CSS文件或其他資源是否已經下載完 畢。與load事件不同，DOMContentLoaded支持在頁面下載的早期添加事件處理程式，這也就意味著用戶能夠儘早地與頁面進行交互。(它是火 狐下特有的事件)
document.addEventListener('DOMContentLoaded', loaded, false);//

偵聽器在偵聽時有三個階段：捕獲階段(根節點到子節點檢查是否調用了監聽函數)→、目標階段(目標本身)→冒泡階段(目標本身到根節點)。
public  override function addEventListener(type(事件類型):String,  listener():Function, useCapture:Boolean = false, priority:int = 0,  useWeakReference:Boolean = false):void


$(selector).bind(event) //向匹配元素添加一個或更多事件處理器 
$(selector).live(event) //向匹配元素添加一個事件處理器，現在或將來 
$(selector).die() 移除所有通過 live() 函數添加的事件處理器 
$(selector).unbind()移除被選元素的事件處理程式,適用於任何通過 jQuery 附加的事件處理程式


Tmpl提供了幾種tag：
${}：等同於{{=}}，是輸出變數，通過了html編碼的。
{{html}}:輸出變數html,但是沒有html編碼，適合輸出html代碼。
{{if }} {{else}}:提供了分支邏輯。
{{each}}:提供迴圈邏輯，$value訪問迭代變數。

devicePixelRatio:設備像素比,高清iPad下，window.devicePixelRatio為2
(/ipad/gi).test(navigator.appVersion)//判斷移動終端的瀏覽器是否為ipad,navigator.appVersion為瀏覽器的版本

window.orientation :這個屬性給出了當前設備的屏幕方向，0表示豎屏，正負90表示橫屏（向左與向右）模式
onorientationchange : 在每次屏幕方向在橫豎屏間切換後，就會觸發這個window事件，用法與傳統的事件類似

 

頁面事件先後順序：
mobileinit:頁面沒載入DOM之前事件
pagebeforecreate:頁面的DOM載入後，DOM初始化之前觸發的事件
pagecreate:在HTML已經在DOM中建立完成，初始化也完成事件
pageinit:頁面完全載入完後

觸摸事件
三種在規範中列出並獲得跨移動設備廣泛實現的基本觸摸事件：
1. touchstart：手指放在一個DOM元素上。
2. touchmove：手指拖曳一個DOM元素。
3. touchend：手指從一個DOM元素上移開。
每個觸摸事件都包括了三個觸摸列表：
1. touches：當前位於屏幕上的所有手指的一個列表。
2. targetTouches：位於當前DOM元素上的手指的一個列表。
3. changedTouches：涉及當前事件的手指的一個列表。
例如，在一個touchend事件中，這就會是移開的手指。
這些列表由包含了觸摸信息的對象組成：
1. identifier：一個數值，唯一標識觸摸會話（touch session）中的當前手指。
2. target：DOM元素，是動作所針對的目標。
3. 客戶/頁面/屏幕坐標：動作在屏幕上發生的位置。
4. 半徑坐標和 rotationAngle：畫出大約相當於手指形狀的橢圓形。


gesturestart  //當兩個手指接觸屏幕時觸發
gesturechange //當兩個手指接觸屏幕後開始移動時觸發
gestureend
onorientationchange  //屏幕旋轉事件   
orientationchange  // 檢測觸摸屏幕的手指何時改變方向

// 隱藏地址欄  & 處理事件的時候 ，防止滾動條出現
addEventListener('load', function(){
setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});

 

e.preventDefault()//取消事件的預設動作
taphold :長按事件


var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});//定義一滾動對象
hScroll:false 禁止橫向滾動 true橫向滾動 預設為true
vScroll:false 禁止垂直滾動 true垂直滾動 預設為true
hScrollbar:false 隱藏水平方向上的滾動條
vScrollbar:false 隱藏垂直方向上的滾動條
fixedScrollbar: 在iOS系統上，當元素拖動超出了scroller的邊界時，滾動條會收縮，設置為true可以禁止滾動條超出scroller的可見區域。預設在Android上為true， iOS上為false
fadeScrollbar:false 指定在無漸隱效果時隱藏滾動條
hideScrollbar: 在沒有用戶交互時隱藏滾動條 預設為true
bounce: 啟用或禁用邊界的反彈，預設為true
momentum: 啟用或禁用慣性，預設為true，此參數在你想要保存資源的時候非常有用
lockDirection:false 取消拖動方向的鎖定， true拖動只能在一個方向上（up/down 或者left/right）
zoom:true 滾動對象可以放大縮小
zoomMax: 指定允許放大的最大倍數，預設為4
onScrollEnd:在滾動完成後的回調
x:滾動水平初始位置
y:滾動垂直初始位置
bounce:true,是否超過實際位置反彈
bounceLock:false,當內容少於滾動是否可以反彈，這個實際用處不大
momentum:true,動量效果，拖動慣性
lockDirection:true,當水平滾動和垂直滾動同時生效時，當拖動開始是否鎖定另一邊的拖動  
useTransform:true,是否使用CSS形變  
useTransition:false,是否使用CSS變換 
topOffset:0,已經滾動的基準值(一般情況用不到)
checkDOMChanges:false,是否自動檢測內容變化 

【註意事項】：如果想要圖片縮放的效果很好的話要把他們放到硬體的合成層中。通俗點說，就是在所有需要縮放的img元素上使用-webkit- transform:translate3d(0,0,0)來實現，而且尤為重要的是，硬體的加速會占用大量資源，要謹慎使用，否則你的應用可能就此崩 潰。


document.createElement()是在對象中創建一個對象，要與appendChild() 或  insertBefore()方法聯合使用。其中，appendChild() 方法在節點的子節點列表末添加新的子節點。insertBefore()  方法在節點的子節點列表任意位置插入新的節點。
<script type="text/javascript">
var board = document.getElementById("board");
var e = document.createElement("input");
e.type = "button";
e.value = "這是測試載入的小例子";
var object = board.appendChild(e);
</script>


encodeURI()//編碼
decodeURI()//解碼

 

<video> 標簽屬性：
src：視頻的URL
poster：視頻封面，沒有播放時顯示的圖片
preload：預載入
autoplay：自動播放
loop：迴圈播放
controls：瀏覽器自帶的控制條
width：視頻寬度
height：視頻高度

停止:
myVideo.currentTime = 0;
myVideo.pause();

 

瀏覽器的渲染和操作順序大致如下： 

HTML解析完畢 
外部腳本和樣式表載入完畢 
腳本在文檔內解析並執行 
HTML DOM完全構造起來 
圖片和外部內容載入 
網頁完成載入 

 

<--------------------tmpl替換-------------------------->
news_template = $('#news_template').template();
$.tmpl(news_template, manufacture_news).appendTo('#news_content');
var html = $("#news_content").html();
if (html.indexOf("[br]") > -1)
{
html = html.$replace("[br]", "<br />");
html = html.$replace("&lt;", "<").$replace("&gt;", ">");
$("#news_content").html(html);
}

 

<script id="news_template" type="text/x-jquery-tmpl">
<div class="p_items">
<dt class="fix"><h1>${Title}</h1><span>${CreateTime}</span></dt> 
<dd>
<div style="text-align:center;"><a  href="http://app.dianshijie.net/dzd">${Img}</a></div>
<p>${Content}</p>
</dd>
</div>
</script>


------------------資料庫優化---------------------
A、數據類型儘量用數字型，數字型的比較比字元型的快很多。

B、 數據類型儘量小，這裡的儘量小是指在滿足可以預見的未來需求的前提下的。

C、 儘量不要允許NULL，除非必要，可以用NOT NULL+DEFAULT代替。

D、少用TEXT和IMAGE，二進位欄位的讀寫是比較慢的，而且，讀取的方法也不多，大部分情況下最好不用。

E、 自增欄位要慎用，不利於數據遷移。

系統設計階段應該歸納一些業務邏輯放在資料庫編程實現，資料庫編程包括資料庫存儲過程、觸發器和函數。用資料庫編程實現業務邏輯的好處是減少網路流量並可更充分利用資料庫的預編譯和緩存功能。

 

----------
索引的設計

在設計階段，可以根據功能和性能的需求進行初步的索引設計，這裡需要根據預計的數據量和查詢來設計索引，可能與將來實際使用的時候會有所區別。

關於索引的選擇，應改主意：

A、              根據數據量決定哪些表需要增加索引，數據量小的可以只有主鍵。

B、              根據使用頻率決定哪些欄位需要建立索引，選擇經常作為連接條件、篩選條件、聚合查詢、排序的欄位作為索引的候選欄位。

C、              把經常一起出現的欄位組合在一起，組成組合索引，組合索引的欄位順序與主鍵一樣，也需要把最常用的欄位放在前面，把重覆率低的欄位放在前面。

D、              一個表不要加太多索引，因為索引影響插入和更新的速度。

 

註意SELECT INTO後的WHERE子句，因為SELECT INTO把數據插入到臨時表，這個過程會鎖定一些系統表，如果這個WHERE子句返回的數據過多或者速度太慢，會造成系統表長期鎖定，諸塞其他進程。
A、              控制同一語句的多次執行，特別是一些基礎數據的多次執行是很多程式員很少註意的。

B、              減少多次的數據轉換，也許需要數據轉換是設計的問題，但是減少次數是程式員可以做到的。

C、              杜絕不必要的子查詢和連接表，子查詢在執行計劃一般解釋成外連接，多餘的連接錶帶來額外的開銷。


---------尖角代碼
<div style="width: 0px; height: 0px; border: solid 50px transparent; border-bottom: solid 100px black;"></div>

 

 http://www.cnblogs.com/roucheng/p/texiao.html

手機版網站起碼要實現一些基本的功能吧： 
1.頁面的適用性問題。對於移動終端，有不一樣的解析度與屏幕尺寸，如果還像電腦端的設計還限制網頁的寬度為1003px或其他像素值，字體大小 還用12px或14px，那麼，不一樣的終端的效果差別會很大。所以這裡，最好讓網頁的寬度自適應屏幕，還好，w3c在設計html的時候為我們考慮了這 一點，只需一句話，就可以搞定，就是加上

Javascript代碼  

<meta name="viewport" content="width=device-width"/> 

 

,對於字體的話，我們就用em或ex為單位就好 
2.版本製作問題。移動頁面往往針對不同的手機設置不同的版本，一般有精簡版，標準版，3G版，觸屏版，智能手機版等等，這些除了在頁面設計上有 不同外，頁面語言也會不同的。精簡版採用wap 1.0  的wml腳本編寫，這個通用性以前很強，很多國產手機都支持這個語言的，但這個語言是很精簡的。標準版的一般可以採用wap  2.0技術，對應的腳本語言是xhtml mp(xhtml mobile  profile)，這個語言是xhtml的子集，這個並且支持大部分的css,基本上和電腦版的差不多，但一般不能用js，這是考慮到這些手機是不支持 js的。對於智能手機版，由於現在的智能手機都支持js，這個版本的製作上就簡單多了，不過，又由於大部分智能手機（基本上除去塞班手機，包括 Android,ios,wp7等）都支持Html5，因此，智能手版可以採用html5來製作。 
3.版本控制問題。可能這部分是比較不好解決的，怎麼智能判斷手機的最佳版本並跳轉，可以從這幾個方面考慮。一方面，可以想辦法得到手機的操作系 統，比如，Android的，ios的，就可以跳轉到html5版了，windows系統，毫無疑問電腦版，獲得手機系統，可能通過得到手機型號，現在的 方法是通過瀏覽器的UA（user  agent)，獲得手機的一些信息，簡單一點的，直接可以通過UA判斷手機的製造產商。要想獲得更多的信息，就得有一個資料庫，因為不同手機型號會有不一 樣的UA信息，世界上的手機有很多，自己要想做一個這樣的資料庫還是很難的，不過，已經有人為我們做好了這樣的資料庫，或者更方便的，做好了一個識別手機 適用最佳版本的函數庫，這裡我推薦用Wurfl。另一方面，可以通過頁面的腳本來判斷瀏覽器對js和html5的支持，代碼如下 

Javascript代碼   
<?xml version="1.0" encoding="UTF-8"?>  

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.hovertree.org/DTD/xhtml-mobile10.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<meta name="viewport" content="width=device-width"/>  

<title>版本控制 - 何問起</title>  

<script type="text/javascript">  

window.onload = function(){  

  //檢測是否支持js  

  try{//檢測是否支持html5  

    document.getElementById("c").getContext("2d");  

    document.location = '支持html5版的鏈接';  

  }catch(e){//否則跳到支持js版  

    document.location = '支持js版';  

  }  

};  

</script>  

</head>  

<!-- hovertree.com -->

<body>  

<canvas id='c'></canvas>  

普通版  

</body>  

</html>

 

如果你僅僅想開發一個版本，只是判斷一下是不是移動客戶端，這裡引用一段discuz! x2的代碼 

Php代碼   
<?php  

function checkmobile() {  

    global $_G;  

    $mobile = array();  

    static $mobilebrowser_list =array('iphone', 'android', 'phone', 'mobile', 'wap', 'netfront', 'java', 'opera mobi', 'opera mini',  

                'ucweb', 'windows ce', 'symbian', 'series', 'webos', 'sony', 'blackberry', 'dopod', 'nokia', 'samsung',  

                'palmsource', 'xda', 'pieplus', 'meizu', 'midp', 'cldc', 'motorola', 'foma', 'docomo', 'up.browser',  

                'up.link', 'blazer', 'helio', 'hosin', 'huawei', 'novarra', 'coolpad', 'webos', 'techfaith', 'palmsource',  

                'alcatel', 'amoi', 'ktouch', 'nexian', 'ericsson', 'philips', 'sagem', 'wellcom', 'bunjalloo', 'maui', 'smartphone',  

                'iemobile', 'spice', 'bird', 'zte-', 'longcos', 'pantech', 'gionee', 'portalmmm', 'jig browser', 'hiptop',  

                'benq', 'haier', '^lct', '320x320', '240x320', '176x220');  

    $useragent = strtolower($_SERVER['HTTP_USER_AGENT']);  

    if(($v = dstrpos($useragent, $mobilebrowser_list, true))) {  

        $_G['mobile'] = $v;  

        return true;  

    }  

    $brower = array('mozilla', 'chrome', 'safari', 'opera', 'm3gate', 'winwap', 'openwave', 'myop');  

    if(dstrpos($useragent, $brower)) return false;  

  

    $_G['mobile'] = 'unknown';  

    if($_GET['mobile'] === 'yes') {  

        return true;  

    } else {  

        return false;  

    }  

}  
/*  hovertree.com */
  

function dstrpos($string, &$arr, $returnvalue = false) {  

    if(emptyempty($string)) return false;  

    foreach((array)$arr as $v) {  

        if(strpos($string, $v) !== false) {  

            $return = $returnvalue ? $v : true;  

            return $return;  

        }  

    }  

    return false;  

}  

var_dump(checkmobile());//如果是移動端返回true，否則false

 

4.手機版本的大小問題。一般來說，對於精簡版和普通版的手機網頁，我們是做得越精簡越好，能省的代碼最好省去，畢竟現在手機流量對用戶來說還是 很寶貴的。比如元素命名，一般頁面少的話，命名越短越好，css最好寫在一行。css中，有些元素是繼承父類的樣式的，不用重覆定義，善用預設值。 
5.瀏覽器緩存。如果再更新不快的情況下，最好開啟瀏覽器緩存


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前端學習一
    開始學習前端知識，做一些筆記來記錄下～ 之前學習都是使用的dw 現在前端開發工具既輕便功能也夠強大。 下麵記錄下常用的前端工具： 工具安裝： Sublime3安裝 官網下載地址：http://www.sublimetext.com/ 安裝插件步驟： 第一步：安裝插件的包管理器：package con ...
  • h5上傳圖片及預覽
    第一次做圖片上傳，記錄一些問題。 1，圖片的base64編碼就是可以將一副圖片數據編碼成一串字元串，使用該字元串代替圖像地址。而網頁上的每一個圖片，都是需要消耗一個http請求下載而來的，使用base64就不用請求http。 2，上傳圖片： 3，圖片轉base64（readAsDataURL方法用於 ...
  • JavaScript學習筆記 -- sort()的用法
    關於排序問題，第一次看教程/書的時候都是迷迷糊糊的感覺，看完就忘記了。等到看第二遍的時候，才發現自己其實沒有掌握該知識點，其實這些在網上都能搜到，但是只有自己親自整理才會有比較深刻的印象。前面還有許多問題沒有寫在博客上，以後視情況添加。 關於JS的sort()方法和reverse()方法是可以直接用 ...
  • 詳解Bootstrap按鈕組件
    按鈕組也是一個獨立的組件，所以可以找到相應的源碼文件： Less：buttons.less Sass:_buttons.scss Css:Bootstrap.css 3131行~3291行 按鈕組和下拉菜單組件一樣，需要依賴於button.js插件才能正常運作。 結構方面：使用一個類名為btn-gr ...
  • 新增的querySelector、querySelectorAll測試
    從IE9開始DOM開始支持支持CSS的選擇器了，DOM提供了兩個介面 querySelector 得到一個DOM querySelectorAll 得到一組DOM 一個個的解釋這些選擇器也沒有必要，我們結合前面的數組知識，寫一段代碼來說明。頁面上有一組元素，然後會依據我們數組中的預訂選擇值選擇相應元 ...
  • 工欲善其事必先利其器——web調試工具firebug
    一、Firebug工具簡介 firebug是firefox下的一款開發類插件。firebug集html查看和編輯，JavaScript控制台，網路狀況監視器於一體，是開發JavaScript，css，html和ajax的得力助手。 YSlow是插件。 二、Firebug應用 1、禁用標簽 下拉菜單啟 ...
  • javascript 不響應可能是引用外部javascript時，引用順序不對。
    有相互引用關係的js,要最後執行的方法所在的js 先被引用。 a.js 中有function1 b.js 中有function2 function1 （） { function2（）{} } 要 <script src="b.js"></script> <script src="a.js"></sc ...
  • javascript面向對象編程筆記
    對象：一切事物皆是對象。對象是一個整體，對外提供一些操作。比如說一個收音機是一個對象，我們不需要知道它的內部結構是什麼，只需要會使用外部的按鈕就可以使用收音機。 面向對象：面向對象語言的標誌是他們都有類的概念，通過類可以創建任意多個具有相同屬性的方法的對象。任何對象都是某一類事物的實例，簡單的說就是 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類