92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

首頁

nodejs 升級后， vue+webpack 項目 node-sass 報錯的解決方法

seo達人

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

關于 node 環境升級到 v8^ 以上，node-sass 報錯的解決方法

今天給同事電腦升級了一下系統，順便升級了所有的軟件，發現原來好好的項目報錯了。報錯大致信息如下： 

 ERROR Failed to compile with 1 errors                                                                      下午1:56:26 error in ./src/components/Hello.vue Module build failed: Error: Missing binding /Users/fungleo/Sites/MyWork/vuedemo2/node_modules/node-sass/vendor/darwin-x64-57/binding.node Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 8.x Found bindings for the following environments: - OS X 64-bit with Node.js 6.x This usually happens because your environment has changed since running `npm install`. Run `npm rebuild node-sass --force` to build the binding for your current environment.
    at module.exports (/Users/fungleo/Sites/MyWork/vuedemo2/node_modules/node-sass/lib/binding.js:15:13) at Object.<anonymous> (/Users/fungleo/Sites/MyWork/vuedemo2/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (module.js:635:30) at Object.Module._extensions..js (module.js:646:10) at Module.load (module.js:554:32) at tryModuleLoad (module.js:497:12) at Function.Module._load (module.js:489:3) at Module.require (module.js:579:17) at require (internal/module.js:11:18) at Object.<anonymous> (/Users/fungleo/Sites/MyWork/vuedemo2/node_modules/sass-loader/lib/loader.js:3:14)
    at Module._compile (module.js:635:30) at Object.Module._extensions..js (module.js:646:10) at Module.load (module.js:554:32) at tryModuleLoad (module.js:497:12) at Function.Module._load (module.js:489:3) at Module.require (module.js:579:17) @ ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-2d1bdf0c","scoped":false,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Hello.vue 4:14-394 13:3-17:5 14:22-402 @ ./src/components/Hello.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

> Listening at http://localhost:8080
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    • 

        
  • 
            21
        
    • 

        
  • 
            22
        
    • 

        
  • 
            23
        
    • 

        
  • 
            24
        
    • 

        
  • 
            25
        
    • 

        
  • 
            26
        
    • 

        
  • 
            27
        
    • 

        
  • 
            28
        
    • 

        
  • 
            29
        
    • 

        
  • 
            30
        
    • 

        
  • 
            31
        
    • 

        
  • 
            32
        
    • 

        
  • 
            33
        
    • 

        
  • 
            34
        
    • 

        
  • 
            35
        
    • 

        
  • 
            36
        
    •

這段代碼是我升級node之后，在我的電腦上復制出來的。但大概就是這么個意思，里面根據不同的項目位置什么的，會有所不同。

簡單的說，這段代碼就是告訴你，node-sass 不兼容 node v8 的版本。那就很好解決了。在當前項目下面執行 

npm i node-sass -D
    
    

        
  • 
            1
        
    •

然后項目就恢復正常了。

當項目出錯之后，不要著急，仔細看下報錯代碼，實在不行用翻譯工具翻譯一下。一般來說，是很快能夠找到解決方法的。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

評論(0) 瀏覽(6692)

CefSharp 集成谷歌瀏覽器詳解（三）--官網示例解析2 CefSettings 介紹

seo達人

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

本章節介紹CefSetting各種設置 

CefExample.Init(osr: false, multiThreadedMessageLoop: multiThreadedMessageLoop, browserProcessHandler: browserProcessHandler); 
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    •

這個方法就是Cef的初始化設置。里面有一些設置是已經注釋的，每項設置我也沒有詳細研究，感興趣的朋友可以自己看看代碼和注釋。這里我只說說幾個比較重要的設置。 

//設置語言環境是中文環境
settings.Locale = "zh_CN";
//遠程調試端口
settings.RemoteDebuggingPort = 8088;
//瀏覽器緩存的路徑,可以設置到某個磁盤，默認設置是在軟件運行目錄下面。
settings.CachePath = "cache";
//讓瀏覽器的消息循環在一個單獨的線程中執行,建議設置成true,具體含義看看瀏覽器消息處理。
settings.MultiThreadedMessageLoop = true;
//這個我理解不到，只有看源碼的注釋;
settings.ExternalMessagePump = false;
 //獲取本機internet代理設置。
        var proxy = ProxyConfig.GetProxyInformation();
        switch (proxy.AccessType)
        {
            case InternetOpenType.Direct:
            {
                //Don't use a proxy server, always make direct connections.
                settings.CefCommandLineArgs.Add("no-proxy-server", "1");
                break;
            }
            case InternetOpenType.Proxy:
            {
                settings.CefCommandLineArgs.Add("proxy-server", proxy.ProxyAddress);
                break;
            }
            case InternetOpenType.PreConfig:
            {
                settings.CefCommandLineArgs.Add("proxy-auto-detect", "1");
                break;
            }
        }
        //直接注釋掉，因為這個應用程序已經包含在工程目錄下面
        //settings.BrowserSubprocessPath = "..\\..\\..\\..\\CefSharp.BrowserSubprocess\\bin\\" + architecture + "\\Debug\\CefSharp.BrowserSubprocess.exe";
        //注冊custom的域名，程序內部資源訪問域名。
        //custom://cefsharp/zpy.html這種域名注冊，后續注冊https和test都是使用這種方式，zpy.html就是我自己加載在項目內的html文件。可以使用這種方式用本地html開發圖形界面。模糊B/S程序和C/S程序。
                    settings.RegisterScheme(new CefCustomScheme
        {
            SchemeName = CefSharpSchemeHandlerFactory.SchemeName,
            SchemeHandlerFactory = new CefSharpSchemeHandlerFactory(),
            IsSecure = true //treated with the same security rules as those applied to "https" URLs
            //SchemeHandlerFactory = new InMemorySchemeAndResourceHandlerFactory()
        });
        //在設置最后使用Cef.AddCrossOriginWhitelistEntry(BaseUrl, "https", "cefsharp.com", false);這些域名添加到白名單。 
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    • 

        
  • 
            21
        
    • 

        
  • 
            22
        
    • 

        
  • 
            23
        
    • 

        
  • 
            24
        
    • 

        
  • 
            25
        
    • 

        
  • 
            26
        
    • 

        
  • 
            27
        
    • 

        
  • 
            28
        
    • 

        
  • 
            29
        
    • 

        
  • 
            30
        
    • 

        
  • 
            31
        
    • 

        
  • 
            32
        
    • 

        
  • 
            33
        
    • 

        
  • 
            34
        
    • 

        
  • 
            35
        
    • 

        
  • 
            36
        
    • 

        
  • 
            37
        
    • 

        
  • 
            38
        
    • 

        
  • 
            39
        
    • 

        
  • 
            40
        
    • 

        
  • 
            41
        
    • 

        
  • 
            42
        
    • 

        
  • 
            43
        
    • 

        
  • 
            44
        
    •

做完這些以后并且設置好ChromiumWebBrowser后就可以使用Application.Run(browser);啟動瀏覽器。


藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

評論(0) 瀏覽(8128)

從h5網站頁面跳轉到微信小程序——微信web-view高級用法9

seo達人

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

我們把自己的html5網頁，
通過小程序的web-view組件，
加載到小程序。

為了能夠更好的利用小程序本身的功能特性，
會希望從h5頁面跳轉到小程序頁面中去，
我們后面要分享的h5網頁調用小程序支付，
就需要用到這個特性。

arrow跳轉

這一節課程，
子恒老師跟你分享web-view中的h5頁面怎么跳轉到小程序里去…

猛擊這里，
試看《h5頁面跳轉到小程序》視頻

https://edu.csdn.net/course/play/6970/141895

設置web-view的業務域名——小程序web-view高級用法1
小程序使用web-view打開h5網頁——小程序web-view高級用法2
微信web-view高級用法介紹——小程序web-view高級用法3
小程序web-view JSSDK配置文件說明——小程序web-view高級用法4
web-view的h5頁面設置jssdk選項——小程序web-view高級用法5
小程序web-view打開網頁demo實例——小程序web-view高級用法6
微信web-view用wx.getNetworkType獲取網絡狀態——小程序web-view高級用法7
web-view調用wx.scanQRCode微信掃一掃——小程序web-view高級用法8

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

評論(0) 瀏覽(10797)

JavaScript判斷變量是否為空對象 {} 的幾種方法

seo達人

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

將json對象轉化為json字符串，再判斷該字符串是否為"{}" 

var obj = {}; var b = (JSON.stringify(obj) === "{}");
console.log(b); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    •

for in 循環判斷 

var obj = {}; var b = function() { for(var key in obj) { return false;
    } return true;
}
console.log(b()); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    •

網上很多都是如上的說法，但是會存在一個問題，就是如果obj=null ，obj=undefined，obj=""，obj=[]，obj=0 以及obj為任意數字也返回true，所以有了下面這個for in 循環判斷：

方案一： 

var obj = {}; var b = function() { for(var key in obj) { return false;
    } if(obj === null || typeof obj !== "object" || Array.isArray(obj)){ return false;
    } return true;
}
console.log(b()); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    •

方案二： 

var obj = {}; var b = function() { for(var key in obj) { return false;
    } if(obj === null || typeof obj !== "object" || Object.prototype.toString.call(obj) === "[object Array]"){ return false;
    } return true;
}
console.log(b()); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    •

上面兩種方案的區別就是判斷判斷空數組的方式不同。

jQuery的jQuery.isEmptyObject(obj)方法 

var obj = {}; var b = $.isEmptyObject(obj);
console.log(b); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    •

jQuery.isEmptyObject(obj) 方法依然存在obj=null ，obj=undefined，obj=""，obj=[]，obj=0 以及obj為任意數字返回true的問題，所以我們還應該再用typeof 或者 $.type() 判斷一下： 

var obj = {}; var b = $.isEmptyObject(obj) && $.type(obj) === "object";
console.log(b); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

    


var obj = {}; var b = $.isEmptyObject(obj) && typeof obj === "object" && obj !== null && !Array.isArray(obj);
console.log(b); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

    


var obj = {}; var b = $.isEmptyObject(obj) && typeof obj === "object" && obj !== null && Object.prototype.toString.call(obj) !== "[object Array]";
console.log(b); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    •

Object.getOwnPropertyNames()方法

Object.getOwnPropertyNames() 方法返回一個由指定對象的所有自身屬性的屬性名（包括不可枚舉屬性但不包括Symbol值作為名稱的屬性）組成的數組。 

var obj = {}; var b = !Object.getOwnPropertyNames(obj).length;
console.log(b); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    •

Object.getOwnPropertyNames() 方法存在obj=0 以及obj為任意數字返回true的問題，所以我們還應該再用typeof 判斷一下： 

var obj = {}; var b = !Object.getOwnPropertyNames(obj).length && typeof obj === "object";
console.log(b); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    •

Object.keys()方法

Object.keys() 方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組，數組中屬性名的排列順序和使用 for...in循環遍歷該對象時返回的順序一致 。 

var obj = {}; var b = !Object.keys(obj).length;
console.log(b); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    •

Object.keys() 方法存在obj=""，obj=[]，obj=0 以及obj為任意數字返回true的問題，所以依舊需要加判斷如下： 

var obj = {}; var b = !Object.keys(obj).length && typeof obj === "object" && !Array.isArray(obj);
console.log(b); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

    


var obj = {}; var b = !Object.keys(obj).length && typeof obj === "object" && Object.prototype.toString.call(obj) !== "[object Array]";
console.log(b); // true
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    •

在實際應用中，如果對象不為空，并且知道對象不為空時，某個屬性一定存在，則直接判斷這個對象的此屬性是否存在。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

評論(0) 瀏覽(5596)

QTableView基本用法

seo達人

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

一、添加表頭：

  1. QStandardItemModel *model = new QStandardItemModel(); 
  2. model->setColumnCount(2); 
  3. model->setHeaderData(0,Qt::Horizontal,QString::fromLocal8Bit("卡號")); 
  4. model->setHeaderData(1,Qt::Horizontal,QString::fromLocal8Bit("姓名"));

復制代碼


二、設置表格屬性：

  1. ui->tableView->setModel(model); 
  2. //表頭信息顯示居左 
  3. ui->tableView->horizontalHeader()->setDefaultAlignment(Qt::AlignLeft); 
  4. //設置列寬不可變 
  5. ui->tableView->horizontalHeader()->setResizeMode(0,QHeaderView::Fixed); 
  6. ui->tableView->horizontalHeader()->setResizeMode(1,QHeaderView::Fixed); 
  7. ui->tableView->setColumnWidth(0,101); 
  8. ui->tableView->setColumnWidth(1,102);

復制代碼


注：在進行表格設置時必須是“ui->tableView->setModel(model);”在前，屬性具體設置在后，

反之則設置不會生效。如上述代碼所示。

三、添加行（添加三行一樣的信息）：

  1. for(int i = 0; i < 3; i++) 
  2. { 
  3.      model->setItem(i,0,new QStandardItem("2009441676")); 
  4.         //設置字符顏色 
  5.      model->item(i,0)->setForeground(QBrush(QColor(255, 0, 0))); 
  6.         //設置字符位置 
  7.      model->item(i,0)->setTextAlignment(Qt::AlignCenter); 
  8.      model->setItem(i,1,new QStandardItem(QString::fromLocal8Bit("哈哈"))); 
  9. }

復制代碼


四、刪除行：

  1. //x是指定刪除哪一行 
  2. model->removeRow(x); 
  3. //刪除所有行 
  4. model->removeRows(0,model->rowCount());

復制代碼


再舉一個例子：

在一個藥品劃價模塊中有這樣的操作流程：

檢索處方項目成功后，把該項目顯示到QTableView里，把需要編輯的數量字段提供給用戶輸入，用戶輸入確認后，該項目留在列表中，然后開始下一項目檢索錄入。

實現過程如下：

錄入的項目保留在臨時表tmp中，界面上的QTableView取名為tbList，與tbList關聯的Model取名為tb1。檢索成功后，把檢索結果插入到臨時表中，把需要編輯的字段提供給用戶。

  1. tb1=newQSqlTableModel(this,*dbR); //dbR是本應用中的數據源 
  2. tb1->setTable("tmp"); //處方臨時表

復制代碼


程序中需要顯示的時候，

  1. tbList->setModel(NULL); //清除原先數據集 
  2. tbList->setModel(tb1); //刷新顯示

復制代碼


程序中需要提供編輯輸入的時候

  1. QModelIndexmdidx=m_ui->tbList->model()->index(row,column); //獲得需要編輯的單元格的位置 
  2. m_ui->tbList->setFocus(); //把輸入焦點交給tbList 
  3. m_ui->tbList->setCurrentIndex(mdidx); //設定需要編輯的單元格 
  4. m_ui->tbList->edit(mdidx); //開始編輯

復制代碼


有一個問題需要注意。向QTableView中添加記錄時，字段一定要完整，不能有空白字段，否則結果無法保存。切記。

如果需要對用戶輸入做限制，比如只能在指定的字段輸入指定的數據類型，可以通過QItemDelegate來實現。

貼一段代碼，說明QTableView基本用法

  1. QStandardItemModel model; 
  2. //設置大小 
  3. model.setColumnCount(3); //列 
  4. model.setRowCount(musicFound); //行 
  5. //設置標題 
  6. model.setHeaderData(0,Qt::Horizontal,"ID"); 
  7. //添加數據 
  8. for(int j=0;j<row;j++)
  9. {
  10.             //寫id
  11.             QStandardItem *itemID = new QStandardItem("hello");//QString::number(j)));
  12.             model.setItem(j,0,itemID);
  13. }
  14. //選擇這個model 
  15. m_ui->tableView->setModel(&model); 
  16. //隱藏左邊那列 
  17. m_ui->tableView->verticalHeader()->hide(); 
  18. //列寬 
  19. m_ui->tableView->setColumnWidth(0,30); 
  20. //整行選擇 
  21. m_ui->tableView->setSelectionBehavior(QAbstractItemView::SelectRows);

 

 

QT的MVC（View/Delegate）模型十分強大，可以利用各種控件來對表格的輸入進行限制，不過我以前一直沒有過，這幾天研究了一下，寫個小例子，希望大家喜歡。
 
如果看不懂這個例子，請先看QT的自帶例子：http://qt-project.org/doc/qt-4.8/itemviews-spinboxdelegate.html
 
思路：
 
1：為每一列定義委托：
A：第一列是編號列，使用只讀委托，令該列的單元格是只讀的
B：第三列是ID列，只能輸入1－12個數字，利用QLineEdit委托和正則表達式對輸入進行限制
C：第四年齡列，利用QSpinBox委托進行輸入限制，只能輸入1－100之間的數字
D：第五列是性別列，利用QComboBox委托對輸入進行限制，該列的單元格只能輸入Male或Female
E：第六列是頭像列，在該列的單元格中央放置一張頭像
2：定義代理類，把所有單元格中的字符居中顯示。
3：利用QSS，將表格的背景色弄成黃藍相間。
 
截圖：
 


上代碼：
 1.#include <QtGui>   
 2.  
 3.//編號列，只讀委托   
 4.//這個方法我還真想不到，呵呵   
 5.class ReadOnlyDelegate : public QItemDelegate  
 6.{  
 7.    Q_OBJECT  
 8.public:  
 9.    ReadOnlyDelegate(QObject *parent = 0): QItemDelegate(parent) { }  
 10.    QWidget *createEditor(QWidget*parent, const QStyleOptionViewItem &option, 
 11.        const QModelIndex &index) const  
 12.    {  
 13.        return NULL;  
 14.    }  
 15.};  
 16.  
 17.//ID列，只能輸入1－12個數字   
 18.//利用QLineEdit委托和正則表達式對輸入進行限制   
 19.class UserIDDelegate : public QItemDelegate  
 20.{  
 21.    Q_OBJECT  
 22.public:  
 23.    UserIDDelegate(QObject *parent = 0): QItemDelegate(parent) { }  
 24.    QWidget *createEditor(QWidget *parent, const QStyleOptionViewItem &option, 
 25.        const QModelIndex &index) const  
 26.    {  
 27.        QLineEdit *editor = new QLineEdit(parent);  
 28.        QRegExp regExp("[0-9]{0,10}");  
 29.        editor->setValidator(new QRegExpValidator(regExp, parent));  
 30.        return editor;  
 31.    }  
 32.    void setEditorData(QWidget *editor, const QModelIndex &index) const  
 33.    {  
 34.        QString text = index.model()->data(index, Qt::EditRole).toString();  
 35.        QLineEdit *lineEdit = static_cast<QLineEdit*>(editor);  
 36.        lineEdit->setText(text);  
 37.    }  
 38.    void setModelData(QWidget *editor, QAbstractItemModel *model,  
 39.        const QModelIndex &index) const  
 40.    {  
 41.        QLineEdit *lineEdit = static_cast<QLineEdit*>(editor);  
 42.        QString text = lineEdit->text();  
 43.        model->setData(index, text, Qt::EditRole);  
 44.    }  
 45.    void updateEditorGeometry(QWidget *editor,  
 46.        const QStyleOptionViewItem &option, const QModelIndex &index) const  
 47.    {  
 48.        editor->setGeometry(option.rect);  
 49.    }  
 50.};  
 51.  
 52.//年齡列，利用QSpinBox委托進行輸入限制，只能輸入1－100之間的數字   
 53.class AgeDelegate : public QItemDelegate  
 54.{  
 55.    Q_OBJECT  
 56.public:  
 57.    AgeDelegate(QObject *parent = 0): QItemDelegate(parent) { }  
 58.    QWidget *createEditor(QWidget *parent, const QStyleOptionViewItem &option, 
 59.        const QModelIndex &index) const  
 60.    {  
 61.        QSpinBox *editor = new QSpinBox(parent);  
 62.        editor->setMinimum(1);  
 63.        editor->setMaximum(100);  
 64.        return editor;  
 65.    }  
 66.    void setEditorData(QWidget *editor, const QModelIndex &index) const  
 67.    {  
 68.        int value = index.model()->data(index, Qt::EditRole).toInt();  
 69.        QSpinBox *spinBox = static_cast<QSpinBox*>(editor);  
 70.        spinBox->setValue(value);  
 71.    }  
 72.    void setModelData(QWidget *editor, QAbstractItemModel *model,  
 73.        const QModelIndex &index) const  
 74.    {  
 75.        QSpinBox *spinBox = static_cast<QSpinBox*>(editor);  
 76.        spinBox->interpretText();  
 77.        int value = spinBox->value();  
 78.        model->setData(index, value, Qt::EditRole);  
 79.    }  
 80.    void updateEditorGeometry(QWidget *editor,  
 81.        const QStyleOptionViewItem &option, const QModelIndex &index) const  
 82.    {  
 83.        editor->setGeometry(option.rect);  
 84.    }  
 85.};  
 86.  
 87.//性別列，利用QComboBox委托對輸入進行限制   
 88.//這一列的單元格只能輸入Male或Female   
 89.class SexDelegate : public QItemDelegate  
 90.{  
 91.    Q_OBJECT  
 92.public:  
 93.    SexDelegate(QObject *parent = 0): QItemDelegate(parent) { }  
 94.    QWidget *createEditor(QWidget *parent, const QStyleOptionViewItem &option, 
 95.        const QModelIndex &index) const  
 96.    {  
 97.        QComboBox *editor = new QComboBox(parent);  
 98.        editor->addItem("Female");  
 99.        editor->addItem("Male");  
 100.        return editor;  
 101.    }  
 102.    void setEditorData(QWidget *editor, const QModelIndex &index) const  
 103.    {  
 104.        QString text = index.model()->data(index, Qt::EditRole).toString(); 
 105.        QComboBox *comboBox = static_cast<QComboBox*>(editor);  
 106.        int tindex = comboBox->findText(text);  
 107.        comboBox->setCurrentIndex(tindex);  
 108.    }  
 109.    void setModelData(QWidget *editor, QAbstractItemModel *model,  
 110.        const QModelIndex &index) const  
 111.    {  
 112.        QComboBox *comboBox = static_cast<QComboBox*>(editor);  
 113.        QString text = comboBox->currentText();  
 114.        model->setData(index, text, Qt::EditRole);  
 115.    }  
 116.    void updateEditorGeometry(QWidget *editor,  
 117.        const QStyleOptionViewItem &option, const QModelIndex &index) const 
 118.    {  
 119.        editor->setGeometry(option.rect);  
 120.    }  
 121.};  
 122.  
 123.//頭像列，只是在單元格中央放一張小圖而已   
 124.class IconDelegate : public QItemDelegate  
 125.{  
 126.    Q_OBJECT  
 127.public:  
 128.    IconDelegate(QObject *parent = 0): QItemDelegate(parent) { }  
 129.    void paint(QPainter *painter, const QStyleOptionViewItem &option,  
 130.        const QModelIndex & index ) const  
 131.    {  
 132.        //show.bmp是在工程目錄中的一張圖片（其實就是QQ的圖標啦，呵呵）   
 133.        QPixmap pixmap = QPixmap("show.bmp").scaled(24, 24);  
 134.        qApp->style()->drawItemPixmap(painter, option.rect,  Qt::AlignCenter, QPixmap(pixmap)); 
 135.    }  
 136.};  
 137.  
 138.//代理類，把所有單元格中的字符居中顯示   
 139.class VIPModel : public QStandardItemModel  
 140.{  
 141.    Q_OBJECT  
 142.public:  
 143.    VIPModel(QObject *parent=NULL) : QStandardItemModel(parent) { }  
 144.    VIPModel(int row, int column, QObject *parent=NULL)  
 145.        : QStandardItemModel(row, column, parent) { }  
 146.    QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const 
 147.    {  
 148.        if( Qt::TextAlignmentRole == role )  
 149.            return Qt::AlignCenter;   
 150.        return QStandardItemModel::data(index, role);  
 151.    }  
 152.  
 153.};  
 154.  
 155.#include "main.moc"   
 156.  
 157.int main(int argc, char *argv[])  
 158.{  
 159.    QApplication app(argc, argv);  
 160.  
 161.    VIPModel *model = new VIPModel(5, 5);  
 162.    QTableView *tableView = new QTableView;  
 163.  
 164.    //把表格的背景調成黃藍相間   
 165.    //這種方法是在網上看到的，用起來還真方便啊   
 166.    tableView->setAlternatingRowColors(true);  
 167.    tableView->setStyleSheet("QTableView{background-color: rgb(250, 250, 115);" 
 168.        "alternate-background-color: rgb(141, 163, 215);}");  
 169.  
 170.    tableView->setWindowTitle("VIP List");  
 171.    tableView->resize(700, 400);  
 172.    tableView->setModel(model);  
 173.    QStringList headerList;  
 174.    headerList << "No." << "ID" << "Name" << "Age" << "Sex" << "Show";  
 175.    model->setHorizontalHeaderLabels(headerList);  
 176.    tableView->verticalHeader()->setVisible(false);  
 177.    tableView->horizontalHeader()->setStretchLastSection(true);  
 178.  
 179.    //為每一列加載委托   
 180.    ReadOnlyDelegate readOnlyDelegate;  
 181.    tableView->setItemDelegateForColumn(0, &readOnlyDelegate);  
 182.    UserIDDelegate userIDDelegate;  
 183.    tableView->setItemDelegateForColumn(1, &userIDDelegate);  
 184.    AgeDelegate spinBoxDelegate;  
 185.    tableView->setItemDelegateForColumn(3, &spinBoxDelegate);  
 186.    SexDelegate comboBoxDelegate;  
 187.    tableView->setItemDelegateForColumn(4, &comboBoxDelegate);  
 188.    IconDelegate iconDelegate;  
 189.    tableView->setItemDelegateForColumn(5, &iconDelegate);  
 190.  
 191.    for(int i=0; i<10; i++)  
 192.    {  
 193.        QModelIndex index = model->index(i, 0, QModelIndex());  
 194.        model->setData(index, i);  
 195.    }  
 196.  
 197.    tableView->show();  
 198.    return app.exec();  
 199.} 

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

評論(0) 瀏覽(4958)

sublime的使用

seo達人

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

一、 前言

       使用Sublime Text 也有幾個年頭了，版本也從2升級到3了，但猶如寒天飲冰水，冷暖盡自知。最初也是不知道從何下手，滿世界地查找資料，但能查閱到的資料，苦于它們的零碎、片面，不夠系統和全面，所以一路走來，耗費了本人大量的時間和精力。所以蒙生了寫這篇《Sublime Text 3 全程詳細指南》，一來對自己的經驗是一個總結，二來可以給初學者做個系統、全面的指引，讓他們少走我當時走過的彎路，從而能快速地掌握Sublime Text這個優秀的編輯器。

      目前我正在使用的版本是Sublime Text 3 Build 3083的beta版本，已經相當穩定。所以本文所有講解均以此版本為準，并以windows 7 x64平臺為示例。至于其它的版本也不會有太大的差異。

 

二、 Sublime Text 特點

      1、Sublime Text 是一款跨平臺代碼編輯器，在Linux、OS X和Windows下均可使用。

      2、Sublime Text 是可擴展的，并包含大量實用插件，我們可以通過安裝自己領域的插件來成倍提高工作效率。

      3、Sublime Text 分別是命令行環境和圖形界面環境下的最佳選擇，同時使用兩者會大大提高工作效率。

      4、Sublime Text 為收費軟件，建議有能力的人付費使用，以支持開發者。不過不購買也可以一直使用。

 

三、下載與安裝

      1、下載：目前官方的正式版本為v2.0.2，我們打開官網下載鏈接http://www.sublimetext.com/3，下載Sublime Text 3 Build 3083。

 

      其中“Windows 64 bit”下載下來為“Sublime Text Build 3083 x64 Setup.exe”的安裝程序；“portable version”下載下來為“Sublime Text Build 3083 x64.zip”編輯器的包，解壓后無需安裝就能運行。

 

      如果你的電腦平臺是windows x86,也就是32位的系統，請點擊“Windows”下載32位的安裝程序，如果不想安裝，就點擊其后的“portable version”下載它的32位編輯器包。

 

      2、安裝：雙擊上一步下載下來的“Sublime Text Build 3083 x64 Setup.exe”，記得選擇“Add to explorer context menu”，把它加入右鍵快捷菜單。其它以默認設置安裝。

 

      3、安裝完畢，雙擊桌面“Sublime Text 3”快捷圖標，打開程序，就可以見到“Sublime Tex的廬山真面目了。

 

      4、如果你不是把“Sublime Text 3”安裝在默認路徑，比如你把它安裝在D盤，請你添加環境變量。

 

四、設置字體及字體大小

      點菜單“Preferences--->Setting - User”，打開“Preferences.sublime-settings”。

 

      如下圖添加所需代碼，根據自己的喜好進行設置。設置字體用"font_face":"字體名稱"，設置字體大小用"font_size":"字體大小"，注意它們之間需要用逗號隔開。

 

五、安裝插件

       學習Sublime Text擴展插件的安裝前，讓我們來先了解一下它的插件官方網站：https://packagecontrol.io/。

 

     當我們在搜索框中輸入插件的關鍵字，相關的插件就會在下面實時顯示出來，我們就可以選擇自己想要的插件進行了解。

 

1、安裝Package Control

      Package Control為插件管理包，所以我們首先要安裝它。有了它，我們就可以很方便的瀏覽、安裝和卸載Sublime Text中的插件。

      打開Package Control的網頁https://packagecontrol.io/，點擊右側的“Install Now”按鈕。

 

進入https://packagecontrol.io/installation#st3頁面，選擇“SUBLIME TEXT 3”選項卡，復制出里面的代碼段：

  

import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

 

      雙擊桌面“Sublime Text 3”打開程序，快捷鍵 Ctrl + ` 打開Sublime Text控制臺，將之前復制的代碼粘貼到控制臺里，按下“Eenter”鍵。

 

      等待其安裝完成后關閉程序，重新啟動“Sublime Text 3”，點開菜單“Preferences”可見“Package Control”項，說明插件管理包已安裝成功。

 

2、ConvertToUTF8 插件安裝

      a)功能說明：ConvertToUTF8 能將除UTF8編碼之外的其他編碼文件在 Sublime Text 中轉換成UTF8編碼，在打開文件的時候一開始會顯示亂碼，然后一剎那就自動顯示出正常的字體，當然，在保存文件之后原文件的編碼格式不會改變。

      b)安裝方法一：快捷鍵 Ctrl+Shift+p ，打開 “Command Palette” 懸浮對話框，在頂部輸入 “install”, 然后下選點擊 “Package Control:Install Package”。

 

      在出現的懸浮對話框中輸入 “convert”, 然后點選下面的 “ConvertToUTF8” 插件，就會自動開始安裝，請耐心等待。

 

       當插件安裝成功后，Sublime Text 3 編輯器底端的狀態欄會有安裝成功的提示。

 

 

      c)安裝方法二：你還可以下載完整的插件包后解壓，放入 C:\Users\userName\AppData\Roaming\Sublime Text 3\Packages 目錄下，以達到安裝插件的目的。下載地址：https://github.com/seanliang/ConvertToUTF8。

如何找到 Packages 目錄？一個快捷的方法是：雙擊打開你的 “Sublime Text 3”，點菜單 “Preferences--->Browse Packages...”。

 

      它會直接打開插件包存放的目錄 “Packages”。然后你就可以把下載后解壓好的插件包復制到這個 Packages 目錄下。

      當然，如果你熟悉 git，你還可以用 git 從插件的 GitHub 庫直接克隆插件包到 Packages 目錄下。

 

      備注： 以后所有插件都可以通過以上介紹的兩種方法安裝，將不再贅述，推薦方法一，使用“ Package Control”安裝插件。

 

3、BracketHighlighter 插件

      功能說明：高亮顯示匹配的括號、引號和標簽。

      插件地址：https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3

 

4、LESS 插件

      功能說明：LESS語法高亮顯示。

      插件地址：https://github.com/danro/LESS-sublime

 

5、sublime-less2css 插件

      功能說明：將less文件編譯成css文件。

      插件地址：https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3

      輔助工具：安裝后從 https://github.com/duncansmart/less.js-windows 下載 less.js-windows，然后配置 less.js-windows 的環境變量。

 

6、Emmet 插件

      功能說明：Emmet的前身是大名鼎鼎的Zen codin。前端開發必備，HTML、CSS代碼快速編寫神器。

      使用方法：默認快捷鍵 Tab

      插件地址：https://github.com/sergeche/emmet-sublime

      輔助工具：PyV8 下載地址： https://github.com/emmetio/pyv8-binaries

      注意：Emmet 插件需要 PyV8 插件的支持，所以在安裝 Emmet 時，會自動安裝 PyV8 插件，如果安裝后 Emmet 不能正常保用，很有可能是因為 PyV8 沒有安裝完全，Sublime Text 2 和 3 容易出現這個問題。你可以刪除它，然后手動下載，采用方法二安裝 PyV8 插件。

 

      使用方法示例：書寫代碼 ul#nav>li.item$*8>a{Item $}

 

      然后把光標定在這行代碼的最后面，按 Tab 鍵，就會自動生成：

      <ul id="nav">

              <li class="item1"><a href="">Item 1</a></li>

             <li class="item2"><a href="">Item 2</a></li>

             <li class="item3"><a href="">Item 3</a></li>

             <li class="item4"><a href="">Item 4</a></li>

             <li class="item5"><a href="">Item 5</a></li>

             <li class="item6"><a href="">Item 6</a></li>

             <li class="item7"><a href="">Item 7</a></li>

             <li class="item8"><a href="">Item 8</a></li>

    </ul>

 

 

      更多更詳細的使用方法，請查閱 Emmet 官網：http://docs.emmet.io/

 

7、JsFormat 插件

      功能說明：JavaScript代碼格式化。

      使用方法：在打開的JavaScript文件里點右鍵，選擇JsFormat。

      插件地址：https://github.com/jdc0589/jsformat

 

8、ColorHighlighter 插件

      功能說明：顯示所選顏色值的顏色，并集成了ColorPicker

      插件地址：https://github.com/Monnoroch/ColorHighlighter

 

      在16進制的顏色值上點右鍵，選擇“Choose color”,會彈性顏色拾色器，在需要的色塊上單擊。

 

 

      看看效果，顏色值和顯示顏色都相應做了改變。

 

9、Compact Expand CSS Command 插件

      功能說明：使CSS屬性展開及收縮，格式化CSS代碼。

      使用方法：按 Ctrl+Alt+[ 收縮CSS代碼為一行顯示，按 Ctrl+Alt+] 展開CSS代碼為多行顯示。

      插件地址：https://gist.github.com/vitaLee/2863474 或者：https://github.com/TooBug/CompactExpandCss

 

      快捷鍵 Ctrl+Alt+[ 收縮CSS代碼為效果： 

 

      快捷鍵 Ctrl+Alt+] 展開CSS代碼為多行顯示效果：

 

10、SublimeTmpl 插件

      功能說明：快速生成文件模板。

      使用方法：SublimeTmpl默認的快捷鍵如下，如果快捷鍵設置沖突可能無效。

                    Ctrl+Alt+h              新建 html 文件

                    Ctrl+Alt+j               新建 javascript 文件

                    Ctrl+Alt+c               新建 css 文件

                    Ctrl+Alt+p              新建 php 文件

                    Ctrl+Alt+r               新建 ruby 文件

                    Ctrl+Alt+Shift+p     新建 python 文件

      插件地址：https://github.com/kairyou/SublimeTmpl

 

      下圖為按快捷鍵 Ctrl+Alt+h 新建的一個 html 文件。

 

      相應的模板為tmpl格式的文件，它們保存在C:\Users\ usersName\AppData\Roaming\Sublime Text 3\Packages\SublimeTmpl\templates下。

 

      當然你可以根據自己的喜好來更改模板格式。例如把“html.tmpl”改為早期的html標準格式后保存。

 

      現在按快捷鍵 Ctrl+Alt+H，新建一個 html 文件，其格式就和更改后模板格式完全一樣了。如下圖：

 

      新增語言：你還可以增加模板文件夾中沒有的文件模板，并做相應的設置來使用這一功能。具體可以參考它的中文文檔：http://www.fantxi.com/blog/archives/sublime-template-engine-sublimetmpl/

 

11、Alignment 插件

      功能說明：使代碼格式的自動對齊。

      使用方法：快捷鍵Ctrl+Alt+A，可能與QQ截圖沖突，二者中的一個要重置快捷鍵。

      插件地址：https://github.com/kevinsperrine/sublime_alignment

 

12、AutoFileName 插件

      功能說明：自動補全文件(目錄)名。

      插件地址：https://github.com/BoundInCode/AutoFileName

 

      安裝好后就可以來測試如何使用AutoFileName，先以<link>css檔案來示范，當輸入href=””的同時，Sublime Text就會將現在編輯檔案的路徑為中心，判斷該路徑內的所有檔案。

      a)以這個檔案為范本它會去抓取跟abc.html在同一層的檔案列表。

 

      像我們這次要link的是在css資料夾內的auto.css，所以我們直接銜接打上css/，就會跑出css資料夾內的檔案，整個用法以此類推

 

      b)像是<img src=””>的部分也是一樣的方式，沒什么困難了，弄懂一下路徑就好了。

 

     c)再來看看是css檔中要用url，也是用同樣方式，只不過因為要連到上一層的images資料夾內的arrow.png，所以就前面打..(上層)，依序去選擇路徑即可。

 

13、DocBlockr 插件

      功能說明：快速生成JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Groovy, Objective C, C, C++ and Rust語言函數注釋。

      使用方法：在函數上面輸入/** ,然后按 Tab 就會自動生成注釋。

      插件地址：https://github.com/spadgos/sublime-jsdocs

 

      在函數上面輸入/** ,然后按Tab 就會自動生成注釋。

 

14、SublimeCodeIntel 插件

      功能說明：智能提示。

      插件地址：https://github.com/SublimeCodeIntel/SublimeCodeIntel

 

15、HTML-CSS-JS Prettify 插件

      功能說明：HTML、CSS、JS格式化。

      插件地址：https://github.com/victorporof/Sublime-HTMLPrettify

      安裝方法：安裝這個套件前必須先安裝node.js,指定 node.exe 的執行檔所在位置。進而安裝HTML-CSS-JS Prettify。

      使用方法一：View -> Show console 或者使用快捷鍵(Ctrl + `)，在命令列的地方輸入:view.run_command("htmlprettify")，然后按下Enter。

 

      使用方法二：默認快捷鍵：Ctrl+Shift+H。

                       你也可以自行設置快捷鍵，菜單 “Preferences---> Key Bindings – User” 里新增： 

{ 
    "keys": ["ctrl+shift+o"], 
    "command": "htmlprettify" 
}

 

       完成后保存，以上代碼設定執行此插件的快捷鍵是：Ctrl+Shfit+O，自己設定的話就要測試一下，不要跟其他快捷鍵沖突。

 

      格式化前：

 

      格式化后：

 

16、SideBarEnhancements 插件

      功能說明：側欄菜單擴充功能。

      插件地址：https://github.com/titoBouzout/SideBarEnhancements/tree/st3

 

17、View In Browser 插件

      功能說明：Sublime Text保存后網頁自動同步更新。

      插件地址：https://github.com/adampresley/sublime-view-in-browser

      使用方法：在打開的文檔任一處點右鍵，選擇“View In Browser”，就會用默認的瀏覽器自動打開該文件。

 

      如果你電腦裝有多個瀏覽器，你想換其它的作為此操作的默認瀏覽器，你可以按以下方法設置：

 

      打開“View In Browser.sublime-settings”，寫入以下代碼： 

{
    "browser": "chrome64"
}

 

      這樣你就把它默認設置為“Chrome”瀏覽器了，當然你還可以改成“Firefox”、“Safari”等等，前提是你的電腦事先已安裝好了這些瀏覽器。

 

18、LiveReload 插件

      功能說明：調試網頁實時自動更新。

      使用說明：快捷鍵 Ctr+Alt+V

      插件地址：https://github.com/dz0ny/LiveReload-sublimetext2

 

      同時Chrome瀏覽器也要安裝LiveReload 的擴展插件。

 

19、TortoiseSVN 插件(win下需要安裝有TortoiseSVN客戶端支持)

      功能說明：版本控制工具。

      插件地址：https://github.com/dexbol/sublime-TortoiseSVN

 

20、Theme-Soda 插件

      功能說明：的 Sublime Text 主題之一。

      插件地址：https://github.com/buymeasoda/soda-theme

      安裝完成后，點菜單 Preferences--->Settings - User，根據需要的主題效果，添加如下代碼。

      Soda 亮色主題請添加： 

{
    "soda_classic_tabs": true,
    "theme": "Soda Light 3.sublime-theme",
}

     

      Soda 暗色主題請添加： 

{
    "soda_classic_tabs": true,
    "theme": "Soda Dark 3.sublime-theme",
}

 

 

      要達到圖中的效果，你還需要下載與之搭配的 color scheme。下載地址：http://buymeasoda.github.com/soda-theme/extras/colour-schemes.zip，如果你喜歡 Soda Dark 和 Monokai，我建議你使用 Monokai Extended。這個 color scheme 是 Monokai Soda 的增強，再配合 Markdown Extended ，將大大改善 Markdown 的語法高亮。

 

      如果加代碼 "soda_classic_tabs":true，文件標簽頁形狀會如下顯示：

 

      如果不添加此行代碼，文件標簽頁形狀會如下顯示：

 

21、Theme-Flatland 插件

      功能說明：的 Sublime Text 主題之一。

      插件地址：https://github.com/thinkpixellab/flatland

 

22、Theme-Nexus 插件

      功能說明：的 Sublime Text 主題之一。

      插件地址：https://github.com/EleazarCrusader/nexus-theme

 

 

六、插件列表

    快捷鍵 Ctrl+Shift+P，在對話框中輸入“list”，選擇“Package Control:List Packages”。

      會列出所有已安裝的插件。這樣可以很方便地了解自己已經安裝了哪些插件。

 

七、移除插件

      有時候我們需要移除自己不想要的插件，具體操作如下：快捷鍵 Ctrl+Shift+P，在對話框中輸入“remove”，選擇“Package Control: Remove Packages”。

 

      然后在出現的插件列表中點選你要移除的插件。

 

八、Sublime Text 的窗口操作

1、分屏

      Sublime Text有多種分屏形式，讓我來具體地看一看。菜單 “View-àLayout”就可以選擇你的分屏樣式。

 

      對應的快捷鍵與分屏情況如下：

      Alt+Shift+1       Single             獨屏

      Alt+Shift+2       Columns:2      縱向二欄分屏

      Alt+Shift+3       Columns:3      縱向三欄分屏

      Alt+Shift+4       Columns:4      縱向四欄分屏

 

      Alt+Shift+8       Rows:2          橫向二欄分屏

      Alt+Shift+9       Rows:3          橫向三欄分屏

 

      Alt+Shift+5       Grid              四格式分屏

 

2、創建新窗

      快捷鍵Ctrl+Shift+N 創建一個新窗口。

 

九、使用技巧薈萃

 （未完待續。。。。。。）

 

 

 

 

 

 

 

 

 

十、Sublime Text 快捷鍵列表

      快捷鍵按類型分列如下：

1、通用

      ↑↓← →    上下左右移動光標

      Alt    調出菜單

      Ctrl + Shift + P    調出命令板（Command Palette）

      Ctrl + `    調出控制臺

2、編輯

      Ctrl + Enter    在當前行下面新增一行然后跳至該行

      Ctrl + Shift + Enter    在當前行上面增加一行并跳至該行

      Ctrl + ←/→    進行逐詞移動

      Ctrl + Shift + ←/→    進行逐詞選擇

      Ctrl + ↑/↓    移動當前顯示區域

      Ctrl + Shift + ↑/↓    移動當前行

3、選擇

      Ctrl + D    選擇當前光標所在的詞并高亮該詞所有出現的位置，再次 Ctrl + D 選擇該詞出現的下一個位置，在多重選詞的過程中，使用 Ctrl + K 進行跳過，使用 Ctrl + U 進行回退，使用 Esc 退出多重編輯

      Ctrl + Shift + L    將當前選中區域打散

      Ctrl + J    把當前選中區域合并為一行

      Ctrl + M    在起始括號和結尾括號間切換

      Ctrl + Shift + M    快速選擇括號間的內容

      Ctrl + Shift + J    快速選擇同縮進的內容

     Ctrl + Shift + Space    快速選擇當前作用域（Scope）的內容

4、查找&替換

      F3    跳至當前關鍵字下一個位置

      Shift + F3    跳到當前關鍵字上一個位置

      Alt + F3    選中當前關鍵字出現的所有位置

      Ctrl + F/H    進行標準查找/替換，之后：

      Alt + C    切換大小寫敏感（Case-sensitive）模式

      Alt + W    切換整字匹配（Whole matching）模式

      Alt + R    切換正則匹配（Regex matching）模式

      Ctrl + Shift + H    替換當前關鍵字

      Ctrl + Alt + Enter    替換所有關鍵字匹配

      Ctrl + Shift + F    多文件搜索&替換

5、跳轉

      Ctrl + P    跳轉到指定文件，輸入文件名后可以：

      @ 符號跳轉    輸入@symbol跳轉到symbol符號所在的位置

      # 關鍵字跳轉    輸入#keyword跳轉到keyword所在的位置

      : 行號跳轉    輸入:12跳轉到文件的第12行。

      Ctrl + R    跳轉到指定符號

      Ctrl + G    跳轉到指定行號

6、窗口

      Ctrl + Shift + N    創建一個新窗口

      Ctrl + N    在當前窗口創建一個新標簽

      Ctrl + W    關閉當前標簽，當窗口內沒有標簽時會關閉該窗口

      Ctrl + Shift + T    恢復剛剛關閉的標簽

7、屏幕

      F11    切換至普通全屏

      Shift + F11    切換至無干擾全屏

      Alt+Shift+1       Single             切換至獨屏

      Alt+Shift+2       Columns:2      切換至縱向二欄分屏

      Alt+Shift+3       Columns:3      切換至縱向三欄分屏

      Alt+Shift+4       Columns:4      切換至縱向四欄分屏

      Alt+Shift+8       Rows:2          切換至橫向二欄分屏

      Alt+Shift+9       Rows:3          切換至橫向三欄分屏

      Alt+Shift+5       Grid              切換至四格式分屏

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

評論(0) 瀏覽(3750)

JavaScript對象、JSON對象、JSON字符串的區別

seo達人

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

JavaScript對象、JSON對象、JSON字符串的區別

一、首先看下什么是JSON

JSON：JavaScript Object Natation，JavaScript對象的表現形式，已經發展成一種輕量級的數據交換格式。

JavaScript對象的表現形式，指定義JS對象的一種方式。
數據交換格式，即用于交換的數據格式。

JSON是種格式：

數據在鍵值對中, 數據由逗號分隔, 花括號保存對象, 方括號保存數組.
鍵值對組合中的名稱寫在前面，值對寫在后面，中間用冒號隔開
JSON 值可以是： 數字, 字符串, 邏輯值, 數組, 對象, null

JSON與XML相比，JSON更輕量級，XML更重量級，目前XML更多的用作配置文件。

 

二、再來看下什么是javascript對象

雖然有人說JavaScript 中的所有事物都是對象，但是 javascript 中，并不是所有的值都是對象，而有兩種值類型：原始值和對象。
（參考：http://blog.csdn.net/justjavac/article/details/8432989 JavaScript 并非所有的東西都是對象）

JavaScript原始值:
字符串，數字，布爾值，null，正則表達式
注：在 JavaScript 中所有的數字都是浮點數

JavaScript內置對象：
Object(基礎對象)，
Array(數組)，
Function(函數構造器)，
Math(數學對象)，
String(字符串對象)，
Number(數值對象)，
Boolean(布爾對象)，
Date(日期時間)，
Error(異常對象)，
RegExp(正則表達式對象)，
Arguments(函數參數集合)
(參考：http://www.cnblogs.com/lianzi/archive/2011/08/26/2154253.html javascript內置對象列表及Array和String的常用方法)

其中 Boolean, Number, String 是原始值的包裝器，很少直接使用

JavaScript 創建對象的方法：
1）使用內置對象
var person=new Object();//創建基礎對象實例，然后為其添加屬性
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
2）自定義對象構造
function Person(firstname,lastname,age){//自定義對象構造器，然后創建實例
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
}
var person=new Person("Bill","Gates",56);
//定義對象構造器，可以使用“this”關鍵字構造、也可以使用原型prototype構造
（參考：http://www.jb51.net/article/20428.htm JavaScript 三種創建對象的方法）
3）使用直接量(literals 有直接量、字面量、常量等詞義)
var arr = [obj.a, 0, obj.a+1];
var obj = {name: 'John' + 'McCarthy'};

注：
準確的說不叫直接量（literals），而叫初始器（Initialiser），可以在里面使用表達式
初始器有對象和數組兩種，所以有“對象直接量”，“數組直接量”這樣的說法

初始器基于JSON，要符合JSON語法格式，
因此有人說JSON是JavaScript的原生格式,
在JavaScript中處理JSON數據不需要任何特殊的API或者工具包

但是初始器里面是可以有表達式的，就像例子里的一樣
（參考：http://www.cnblogs.com/snandy/p/3439790.html JavaScript中的直接量與初始器的區別）

原始值只包括字符串，數字，布爾值，null，正則表達式，不包括 Undefined 和 Initialiser

 

三、JavaScript對象、JSON對象、JSON字符串

javascript對象：javascript中，除開JavaScript原始值(字符串，數字，布爾值，null，正則表達式)的都是javascript對象

JSON對象：JSON對象這種叫法不太準確，可以理解為使用基于JSON的初始器定義的javascript對象

JSON字符串：符合JSON語法格式的字符串

 

 

javascript對象和JSON字符串相互轉換：
1：jQuery插件支持的轉換方式
$.parseJSON( jsonstr );$("xxx").serializeArray();
2：瀏覽器支持的轉換方式(Firefox，chrome，opera，safari，ie9，ie8)等瀏覽器
JSON.parse(jsonstr);JSON.stringify(jsonobj);
3：Javascript支持的轉換方式
eval('(' + jsonstr + ')');//不推薦
4：JSON官方的轉換方式
引入 json.js 或 json2.js,用法同第二種
（參考：http://www.cnblogs.com/luminji/p/3617160.html JS中對象與字符串的互相轉換)

 

JAVA對象和JSON字符串相互轉換：
可以用jackson、Gson和json-lib等
（參考：http://www.blogjava.net/bolo/archive/2014/04/16/412533.html 使用jackson對Java對象與JSON字符串相互轉換的一些總結）

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



評論(0) 瀏覽(3446)

C#-XML基礎 使用瀏覽器檢查手寫的xml文件是否正確

seo達人

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

慈心積善融學習，技術愿為有情學。善心速造多好事，前人栽樹后乘涼。我今于此寫經驗，愿見文者得啟發。


  •    .NET Framework : 4.6.1
  •                           ide : visual studio 2017 community
  •                             os : win7 x86_64
  •            type setting : markdown
  •                         blog : https://blog.csdn.net/yushaopu
  •                     github : https://github.com/GratefulHeartCoder


xml file - 正確的文件 

<?xml version="1.0" encoding="utf-8"?> <cultures> <taoists count="100" comment="good-t"> <book> <name>道德經</name> <author>老子</author> </book> <book> <name>文始真經</name> <author>關尹子</author> </book> </taoists> <buddhism count="321" comment="good-d"> <book> <name>金剛經</name> <author>釋迦牟尼</author> </book> <book> <name>地藏菩薩本愿經</name> <author>地藏</author> </book> </buddhism> </cultures>
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    • 

        
  • 
            21
        
    • 

        
  • 
            22
        
    • 

        
  • 
            23
        
    •

使用瀏覽器進行校驗

這里寫圖片描述


xml file - 錯誤的 

<?xml version="1.0" encoding="utf-8"?> <cultures> <taoists count="100 comment="good-t" <book> <name>道德經</name> <author>老子</author> </book> <book> <na>文始真經</name> <author>關尹子</author> </book> </taoists> <buddhism count="321" comment="good-d"> <book> <name>金剛經</name> <author>釋迦牟尼</author> </book> <book> <name>地藏菩薩本愿經</name> <author>地藏</author> </book> </buddhism> </cultures>
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    • 

        
  • 
            21
        
    • 

        
  • 
            22
        
    • 

        
  • 
            23
        
    •

使用瀏覽器進行校驗

這里寫圖片描述


感想

xml文件挺常用的，用程序自動生成的xml文件最好，引號和尖括號等標點符號肯定是全的。把事情交給擅長它的人去做。知人善任！

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

評論(0) 瀏覽(3640)

React Native第三方組件庫匯總

seo達人

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

移動跨平臺框架React Native經過4年的發展，其生態已經變得異常豐富，在使用React Native開發項目的過程中，為了提高開發效率，我們經常會借鑒一些使用使用率比較高的開源庫，根據大眾的需求，對這些使用較高的 React-Native UI 庫，我們做一個簡單的總結和歸類，方便大家更好地入門 React Native。

本文只是收集了一些常見的UI庫和功能庫，除了上面介紹的知名第三方庫之外，還有很多實現小功能的庫，這些庫可以大大的提高我們的開發效率，并且可以在此基礎上進行二次開發。并且歡迎大家關注我的《React Native移動開發實戰》，第二版修改版會再近期再版，歡迎持續關注。

第三方庫

UI套件

1， NativeBase

NativeBase 是一個廣受歡迎的 UI 組件庫，為 React Native 提供了數十個跨平臺組件。在使用 NativeBase 時，你可以使用任意開箱即用的第三方原生庫，而這個項目本身也擁有一個豐富的生態系統，從有用的入門套件到可定制的主題模板。 
NativeBase 項目地址: https://github.com/GeekyAnts/NativeBase 
入門學習地址: https://reactnativeseed.com/

2，React Native Elements

React Native Elements是一個高度可定制的跨平臺 UI 工具包，完全用 Javascript 構建。該庫的作者聲稱“React Native Elements 的想法更多的是關于組件結構而不是設計，這意味著在使用某些元素時可以減少樣板代碼，但可以完全控制它們的設計”，這對于開發新手和經驗豐富的老手來說都很有吸引力。 
React Native Elements 項目地址: 
https://github.com/react-native-training/react-native-elements 
React Native Elements 示例項目： 
https://react-native-training.github.io/react-native-elements/

3，Shoutem

Shoutem也是一個 React Native UI 工具包，由 3 個部分組成：UI 組件、主題和組件動畫。該庫為 iOS 和 Android 提供了一組跨平臺組件，所有組件都是可組合和可定制的。每個組件還提供了與其他組件一致的預定義樣式，這樣可以在無需手動定義復雜樣式的情況下構建復雜的組件。

項目地址：https://shoutem.github.io/ui/

4， UI Kitten

UI Kitten這個庫提供了一個可定制和可重復使用的 react-native 組件工具包，該工具包將樣式定義移到特定位置，從而可以單獨重用組件或為組件設置樣式。通過傳遞不同的變量，可以很容易地“動態”改變主題樣式。 
項目地址: https://github.com/akveo/react-native-ui-kitten 
項目體驗地址：https://expo.io/@akveo/ui-kitten-explorer-app

5，React Native Material UI

React Native Material UI是一組高度可定制的 UI 組件，實現了谷歌的 Material Design。請注意，這個庫使用了一個名為 uiTheme 的 JS 對象，這個對象在上下文間傳遞，以實現最大化的定制化能力。

React Native Material UI 項目地址: 
https://github.com/xotahal/react-native-material-ui 
包含庫組件及示例的清單： 
https://github.com/xotahal/react-native-material-ui/blob/master/docs/Components.md

6，React Native Material Kit

React Native Material Kit是一套很有用的 UI 組件和主題，實現了谷歌的 Material Design。不過需要說明的是， React Native Material Kit在2017 年 12 月之后就停止維護了。 
項目地址: https://github.com/xinthink/react-native-material-kit

7，Nachos UI

Nachos UI 是一個 React Native 組件庫，提供了 30 多個可定制的組件，這些組件也可以通過 react-native-web 在 Web 上運行。它通過了快照測試，支持格式化和 yarn，提供了熱火的設計和全局主題管理器。 
項目地址: https://github.com/nachos-ui/nachos-ui

8，React Native UI Library

Wix 工程公司正致力于開發這個進的 UI 工具集和組件庫，它還支持 react-native-animatable 和 react-native-blur。這個庫附帶了一組預定義的樣式預設（轉換為修飾符），包括 Color、Typography、Shadow、Border Radius 等。 
項目地址: https://github.com/wix/react-native-ui-lib 
這里寫圖片描述

9，React Native Paper

React Native Paper是一個跨平臺的 UI 組件庫，它遵循 Material Design 指南，提供了全局主題支持和可選的 babel 插件，用以減少捆綁包大小。 
React Native Paper 項目地址: 
https://github.com/callstack/react-native-paper

Expo 示例應用程序： 
https://expo.io/@satya164/react-native-paper-example

10，React Native Vector Icons

React Native Vector Icons是一組 React Native 的可定制圖標，支持 NavBar/TabBar/ToolbarAndroid、圖像源和完整樣式。它非常有用，而且被數千個應用程序以及其他 UI 組件庫（如 react-native-paper）所使用。 
項目地址: https://github.com/oblador/react-native-vector-icons 
示例項目：https://oblador.github.io/react-native-vector-icons/

11，Teaset

Teaset是一個 React Native UI 庫，提供了 20 多個純 JS（ES6）組件，用于內容顯示和動作控制。雖然它的文檔不夠詳盡，但它簡潔的設計吸引了我的眼球。 
項目地址：https://github.com/rilyu/teaset

其他庫

1，antd-mobile

antd-mobile是由螞蟻金融團隊推出的一個開源的react組件庫，這個組件庫擁有很多使用的組件。 
這里寫圖片描述 
項目地址：https://github.com/ant-design/ant-design-mobile

2，react-native-button

react-native-button是github上一個開源的button組件，目前仍保持比較快的更新頻率，提供比較豐富的Button功能。 
項目地址：https://github.com/ide/react-native-button

3，react-native-image-viewer

react-native-image-viewer是一個圖片大圖瀏覽的庫，點擊圖片可以放大縮小。 
這里寫圖片描述 
項目地址：https://github.com/ascoders/react-native-image-viewer

4，react-native-image-picker

react-native-image-picker是實現多個圖像選擇、裁剪、壓縮等功能的第三方庫，可以使用該庫實現圖片、照相等操作。 
這里寫圖片描述 
項目地址：https://github.com/react-community/react-native-image-picker

5，react-native-picker

react-native-picker是React native最常見的滾輪控件，可以實現單滾輪、雙滾輪和三滾輪效果。 
這里寫圖片描述 
項目地址：https://github.com/beefe/react-native-picker

6，react-native-scrollable-tab-view

react-native-scrollable-tab-view是一個帶有TabBar和可切換頁面的控件。，在Android中可以看成是ViewPager和TabLayout的結合。 
項目地址：https://github.com/happypancake/react-native-scrollable-tab-view

7，react-native-app-intro

react-native-app-intro是實現引導頁的庫，當然開發者也可以自己手動實現。

項目地址：https://github.com/fuyaode/react-native-app-intro

8，3D Touch

3D Touch是實現React native 3D Touch的庫，可以用此庫很方便的實現3D Touch。效果如下： 
這里寫圖片描述 
項目地址：https://github.com/jordanbyron/react-native-quick-actions

react-native-snap-carousel是可以實現復雜效果的輪播圖庫，實現的效果如下： 
這里寫圖片描述 
除此之外，還可以實現Galley效果等多種效果。 
項目地址：https://github.com/archriss/react-native-snap-carousel

10，react-native-blur

react-native-blur是專門用于實現毛玻璃效果的。 
項目地址：https://github.com/react-native-community/react-native-blur

11，react-native-actionsheet

react-native-actionsheet是實現底部彈框的組件，可以在Android和iOS平臺上共用，當然也可以自己封裝實現。 
這里寫圖片描述 
項目地址：https://github.com/beefe/react-native-actionsheet

12，react-native-popover

react-native-popover是React Native開發中常見的彈出提示框操作，其效果如下圖所示： 
這里寫圖片描述

13，react-native-charts-wrapper

圖表在移動開發中應用的場景可謂非常多，這里介紹一款使用的比較多的庫。 
這里寫圖片描述
項目地址：https://github.com/wuxudong/react-native-charts-wrapper

14，react-native-spinkit

react-native-spinkit是一個很炫的加載動畫第三方庫，可以根據實際情況定制加載的動畫。 
這里寫圖片描述 
https://github.com/maxs15/react-native-spinkit

15，Facebook Design-iOS 10 iPhone GUI

Facebook Design-iOS 10 iPhone GUI是iOS 10 公開版的 GUI 元素模板，包括 Sketch、Photoshop、Figma、XD 和 Craft。 

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

評論(0) 瀏覽(5634)

10個基于web的JavaScript最優秀的庫和框架

博博

10個基于web的JavaScript最優秀的庫和框架

程序你好 2018-06-28 20:26:57

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

在所有可用于創建web應用程序的語言中，JavaScript可能是最健壯的庫和框架選擇。事實上，有太多的東西，很難弄清楚該用哪一個，尤其是當你剛剛開始的時候。

JavaScript庫和框架之間的關鍵區別在于，庫由應用程序可以調用的函數組成，用于執行任務，而框架定義了開發人員如何設計應用程序。換句話說，框架調用應用程序代碼，而不是反過來。當然，開發人員仍然需要庫來使用JavaScript完成web上的基本任務。

JavaScript Libraries

1. D3.js

許多現代網站都是數據驅動的。例如，新聞站點必須不斷刷新它們的內容，因此不可能每隔幾秒鐘重新配置設置以支持這些更改。數據驅動文檔，或D3。庫的獨特之處在于它把數據放在首位。下面的截屏顯示了在D3中可以找到的許多數據演示中的一些。

10個基于web的JavaScript最優秀的庫和框架

單擊visual index中的一個條目，您將看到一個詳細頁面，在這個頁面中您可以看到數據表示的完整視圖(如下所示)，以及用于創建表示的底層代碼和數據：

10個基于web的JavaScript最優秀的庫和框架

該站點提供了完整的示例，旨在幫助您理解庫的功能。

這個庫的主要優點是它對內容的處理非常靈活。但另一方面是D3.js并沒有帶來太多的活力。例如，如果您是在一個電子商務網站工作，而不僅僅是提供信息，那么這個庫可能不是最好的選擇。除了極端的靈活性，D3.js的 relatively streamlined presentation幫助提高了速度。如果單單從圖表的功能來看，D3.js還是有點太龐大了。啊還不如去使用Chart.js短小精干的專門提供圖表功能的庫。

2. jQuery

大名鼎鼎的jQuery已經贏得了長期統治網頁的地位。許多網站仍然使用jQuery進行基本的文檔對象模型(DOM)操作，原因有三個：

jQuery非常容易學習。它提供的示例比大多數庫都多，所以您很有可能會找到一個示例來演示如何完成特定的任務。

jQuery非常快。因為它專注于出色地執行特定的任務，所以jQuery使快速執行這些任務成為可能。

jQuery擁有龐大的安裝基礎。它還擁有大量的社區支持和項目貢獻者。

我們可以預期這個庫肯定會長期存在。額外的開發時間也意味著文檔是非常完善的。如下所示，文檔將主題分解為容易理解的部分，然后您可以根據需要深入研究其他細節：

10個基于web的JavaScript最優秀的庫和框架

當然，沒有什么是完美的。例如，有時jQuery在多個瀏覽器上的工作方式并不完全相同。JQuery首先關注這些問題，您可以在站點上找到有關瀏覽器支持的信息。

最后，與其他庫不同，jQuery并不是一個完整的解決方案。您需要另一個產品，如jQuery UI(參見下一個條目)來構建一個完整的應用程序。重要的是要認識到，在使用jQuery時，您的站點將更加模塊化，并且依賴于更多的庫(雖然這并不一定是壞事)。

3. jQuery UI

jQuery UI只是jQuery的眾多插件之一，但它是您最?？吹降?，這也是我們在這里包含它的原因。在合并jQuery之后，使用jQuery UI向應用程序添加基本的圖形元素。jQuery UI庫提供了各種有趣的小部件，如手風琴、滑塊、工具提示和數據表，這些小部件使您可以配置應用程序以提供有用的服務。

您可以深入到特定的小部件或其他控件來查看它們是如何工作的。頁面通常包含頂部的控件，然后是使用說明和示例代碼。與jQuery一樣，您可以從一個簡單的示例開始，但可以根據需要深入了解添加的內容。

這個庫Library 與眾不同有幾個原因。最重要的是，JQuery UI幾乎適用于任何瀏覽器，因此用戶不太可能抱怨應用程序沒有按預期工作。jQuery UI還提供了大量的附加組件。例如，雖然jQuery UI缺乏時間選擇器，但您可以從trentrichardson.com/examples/timepicker等地方獲得執行該任務的附加程序。

jQuery庫組的一個問題是它們變得非常大。有時候，一個庫的特性太豐富了。JQuery庫的大小會使它們在較小的設備上加載速度變慢?？梢允褂锰娲牡谌綆欤鏕ranim.js和Multiple.js的出現提供了jQuery特性的子集，有時還提供了一組有重點的附加功能特性，加載時間大大加快。

4. Parsley

表單驗證是一項重要的任務。因為現在的數據經常被機器分析，所以干凈的數據比以往任何時候都更重要。事后清理數據是費時的，而且從沒有像讓用戶首先提供正確的信息那樣準確。

與任何其他JavaScript庫相比，Parsley提供了更多的表單驗證技術。你可以選擇你需要的驗證級別，但它們可能會變得非常復雜：

10個基于web的JavaScript最優秀的庫和框架

甚至如下所示的簡單驗證也包含許多不同的驗證類型，以及執行任務所需的代碼。完成最常見的驗證是多么容易。(除非嘗試驗證復雜的數據，否則不需要進行繁重的編碼。)

10個基于web的JavaScript最優秀的庫和框架

5. QUnit

許多庫提供的測試功能有很多不足之處。即使您使用腳本，手動測試復雜的應用程序也會很麻煩，而且需要花費大量的時間——如果它能找到所有的錯誤的話。

QUnit是用于JavaScript的幾個單元測試庫之一。雖然有些人可能會認為它有點過時，但它是相對全面的，并且具有強大的社區支持和短的學習曲線。QUnit站點提供了豐富的入門信息，包括關于單元測試的完整教程。

10個基于web的JavaScript最優秀的庫和框架

6. React

通常被認為是一個庫，而React有時被稱為框架。在模型-視圖-控制器(MVC)方法的上下文中，React提供了視圖部分。它不假設您正在使用的基礎技術堆棧來建?；蚩刂茢祿Ｋ械腞eact興趣的就是在屏幕上顯示數據?？紤]到這一點，它不依賴于瀏覽器文檔對象模型(DOM)，而是使用一個快速顯示信息的輕虛擬DOM。React最棒的一點是它是聲明性的，這意味著你要告訴框架你想做什么，而不是怎么做。

您為使用MVC的速度和能力付出的代價是增加了一定程度的復雜性。即使是一個小的組件也需要相當多的代碼(如React網站上的例子所演示的)。當你和真正的大型項目一起工作時，你獲得的是靈活性和速度。

JavaScript Frameworks（框架）

1. Angular

Angular framewor框架使作為MVC的控制器部分擴展HTML成為可能?？刂破魇荄OM組件背后的行為。有了 Angular，就有可能以一種既自然又直接的方式創造新的行為。這些擴展最終看起來像是HTML的附加部分，而不是固定的東西。 Angular 網站明確了使用該產品的兩個基本原因：“速度和性能”和“難以置信的工具”。

然而，編碼可能會變得復雜，這個框架可能更適合大企業而不是小創業公司。即使是 Angular 站點上的簡單示例也依賴于快速創建復雜性的多個文件。值得注意的是， Angular framewor的版本也依賴于TypeScript，而不是純JavaScript，這增加了學習曲線，但提供了可擴展性。

幸運的是，該軟件附帶了大量教程，如本文所示，這將使有經驗的開發人員更容易快速地開始工作。

10個基于web的JavaScript最優秀的庫和框架

2. Ember.js

一個自稱為“有抱負的web開發人員的框架”的框架確實有些嚴肅。像微軟、Netflix和LinkedIn這樣的知名公司都在使用Ember.js。因為它使用模型-視圖-視圖-模型(MVVM)模式，并將最佳實踐作為框架的一部分進行合并。最重要的是，它的伸縮性非常好。有趣的是,Ember.js不僅可用于web開發，您也可以使用它來構建移動應用程序和桌面應用程序——它被用于構建Apple Music。

與許多其他框架不同，您可以使用完整的基于ember的工具套件來創建高度兼容的開發環境。Ember CLI(命令行接口)提供了對大量工具的訪問，您可以使用腳本自動化。例如，,Ember.js數據通過對象關系映射(ORM)提供面向web的數據訪問。與此同時，Ember Inspector是Firefox和Chrome瀏覽器的一個插件，它可以使調試更加容易。

盡管有它這么給力，Ember.js的快速入門教程只需要5分鐘就可以完成。當然，標準教程需要的時間要長得多，但是能產生更多受人尊敬的結果，如下所示：

10個基于web的JavaScript最優秀的庫和框架

這個框架的文檔包含您需要的所有主題，包括對象模型、模板、組件、控制器和模型的討論。還有一個博客和Ember.js社區可以提供額外的幫助。

3. Node.js

Node.js是一個異步的、事件驅動的JavaScript運行時，具有一些獨特的特性。首先，如果它沒有工作可做，它只是“去睡覺”。這聽起來并不是什么大問題，但是如果你在公共云上托管你的網站，“讓它休眠”可以幫你省下一大筆錢——可能是很多錢。此外,由于Node.js不需要鎖來完成它的工作，它不像其他框架那樣傾向于死鎖。這個產品更像jQuery而不是jQueryUI，因為您不使用它來創建用戶界面。相反，您可以創建響應事件的代碼——客戶端生成事件，服務器響應這些事件。用戶界面是顯示任何結果的獨立元素。

因為Node.js是如此簡單和快速，社區支持是首屈一指的，你可以在最不可能的地方找到它。有900萬個實例運行在超過5萬個包上。換句話說,Node.jsjs構成了您使用的許多包的基礎。

Node.js,開發人員可以構建:

后端應用程序

博客

客戶管理系統

實時服務，如聊天應用和游戲

REST api

社交網絡應用程序

實用程序和工具

4. Vue.js

Vue是一個多功能的開源JavaScript框架，它是“漸進的”，這意味著與“單一框架”不同，Vue是從底層設計的，以漸進的方式采用。在庫和全功能框架之間擴展，Vue使用“基于組件的開發模型”，可以將Vue組件混合和匹配到項目中。

關鍵的Vue特性包括組件、模板、轉換和雙向數據綁定，但是它最顯著的特性可能是它的“反應性”系統。基本上，reactivity指的是在Vue中自動更新一個JavaScript對象，并且不引人注意地更新Vue模板。

Vue是為任何具有HTML、CSS和JavaScript工作知識的人而構建的。

10個基于web的JavaScript最優秀的庫和框架

其他的選擇

別忘了還有更多的JavaScript庫、社區、集合和框架，通常都有特定的焦點區域。

例如，CodePen是一個免費的在線社區，用于測試和展示HTML、CSS和JavaScript的混合?？梢园阉醋魇乔岸嗽O計師和開發人員的社會環境、在線開發社區和具有統一界面的編輯器。每個代碼頁條目都被稱為鋼筆，您可以將它們作為集合的一部分來查看。有些收藏品很奇特，如anime.js(動畫) ，而其他的，比如有趣的js，會有一些你在其他地方看不到的有趣的小部件。它也直接與反應一起工作。

類似地，Jest是一個“零配置”的JavaScript測試解決方案，旨在使用React進行開箱即用的測試。

BIDEO.JS提供了一種顯示全屏背景視頻的方法，例如，如果您正在為旅行社構建一個站點，這將非常有用。

底線

現在應該很清楚了，問題不是找到一個JavaScript庫或框架來幫助您做一些有趣的事情——而是找到一個庫來幫助您完成您需要完成的任務。

此外，您還需要確保您所依賴的庫將在明天仍然存在。沒有人想要重新工作他們的應用程序，因為它使用的JavaScript庫不再可用。盡管現在大多數現代JavaScript庫和框架都非?？煽浚匀恍枰_保它們與用戶所依賴的所有設備和瀏覽器兼容。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

評論(0) 瀏覽(3320)

日歷

鏈接

個人資料

藍藍設計的小編 http://m.skdbbs.com

存檔

92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线
国产精品视频| 欧美成人精品激情在线观看| 国产欧美视频一区二区三区| 成人午夜在线观看| 区一区二区三区中文字幕| 97中文在线| 视频在线这里都是精品| 久久精品一区二区三区四区| 蜜臀国产一区二区三区在线播放| 色先锋资源久久综合| 欧美在线精品免播放器视频| 综合久久婷婷| 视频一区视频二区视频三区视频四区国产| 97国产在线观看| 欧美高清视频看片在线观看| 老司机2019福利精品视频导航| 欧美二区视频| 一级中文字幕一区二区| 日本一区二区三区电影免费观看| 日韩一区二区三区在线免费观看| 国产一区二区精品免费| 国产美女av一区二区三区| 欧美日韩国产影片| 色综合网站在线| 欧美色偷偷大香| 亚洲在线视频网站| 欧美亚洲另类在线一区二区三区| 欧美日韩国产综合一区二区| 欧美视频一二三| 在线三级中文| 91在线精品一区二区三区| 欧美三级乱人伦电影| 亚洲久色影视| 97天天综合网| 亚洲美腿欧美偷拍| 美女av在线播放| 国产精品影院在线| 亚洲日本欧美天堂| 亚洲午夜私人影院| 成人精品一区二区三区校园激情| 黄色日韩网站视频| 精品欧美一区二区在线观看视频| 成人永久免费| 欧美性生活大片视频| 欧美性大战xxxxx久久久| 四虎影视国产在线视频| 一区二区在线观看视频| 第一视频专区在线| 99精品国产99久久久久久白柏| 7777精品久久久大香线蕉小说| 日韩电影毛片| 亚洲欧美色图小说| 海角国产乱辈乱精品视频| 在线成人av| 国产精品对白一区二区三区| 夜夜嗨av一区二区三区四区| 精品久久久久久久一区二区蜜臀| 伊人成人在线| 黄色网页在线免费观看| 国产精品免费网站在线观看| 亚洲日韩中文字幕在线播放| 蜜乳av综合| 日韩欧美在线观看强乱免费| 色爱av美腿丝袜综合粉嫩av| 亚洲第一综合| 岛国大片在线观看| 超碰在线影院| 精品69视频一区二区三区Q| 综合久久综合| 在线亚洲+欧美+日本专区| 91精品国产91久久久久| 日韩精品一区二区三区视频在线观看| 亚洲日本黄色| 成人影院网站| 日韩欧美一级精品久久| 性欧美freehd18| 日韩丝袜情趣美女图片| 成人免费高清在线| 96sao在线精品免费视频| 福利在线午夜| 欧美性精品220| 国产精品久久久久久久久久久不卡| 欧美gv在线| 国产精品扒开腿做爽爽爽的视频| 国产+成+人+亚洲欧洲自线| 成人免费黄色网| 日韩高清不卡一区二区| 美美哒免费高清在线观看视频一区二区| 国产福利片在线观看| 精品72久久久久中文字幕| 欧美激情偷拍自拍| 色噜噜狠狠色综合欧洲selulu| 第一sis亚洲原创| 亚洲国产一区视频| 日韩av免费| 91亚洲精品视频| 福利视频网站一区二区三区| 欧美日韩激情在线一区二区三区| 日本成人不卡| 91中文字幕在线| 手机av在线播放| 天天影视网天天综合色在线播放| 日韩在线观看免费高清| 亚洲久本草在线中文字幕| 麻豆av免费在线观看| av在线资源| 久久久精品一区二区毛片免费看| 亚洲欧洲制服丝袜| 亚洲va欧美va人人爽| 免费久久精品视频| 日韩极品精品视频免费观看| 1区2区3区在线| 国产精品av电影| 嫩草国产精品入口| 亚洲一区二区四区蜜桃| 亚洲黄页网站| 美女黄视频在线观看| 欧美变态凌虐bdsm| 久久福利视频导航| 都市激情亚洲综合| 色天天综合狠狠色| 亚洲欧洲一区| 捆绑紧缚一区二区三区视频| 午夜在线a亚洲v天堂网2018| 7777精品伊人久久久大香线蕉超级流畅| 亚洲成人动漫在线播放| av在线不卡顿| 美女国产一区| 日韩高清三区| 国产在线激情视频| 色综合一区二区| 日韩一区二区在线播放| 久久久久成人精品免费播放动漫| 日韩有码在线视频| 美洲天堂一区二卡三卡四卡视频| av漫画网站在线观看| 1204国产成人精品视频| 中文字幕乱码中文乱码51精品| 欧美激情videoshd| 国产一区二区三区在线观看视频| 欧美oldwomenvideos| 国产欧美久久久精品影院| 欧美成熟毛茸茸复古| 中文字幕巨乱亚洲| 国产视频一区欧美| 香蕉久久精品日日躁夜夜躁| 中文字幕亚洲综合久久菠萝蜜| 97avcom| 9999热视频在线观看| 日韩在线观看电影完整版高清免费悬疑悬疑| a免费在线观看| 欧美无毛视频| 久久久999精品免费| 国产成人精品久久二区二区| 精品免费国产一区二区三区四区| www.日韩欧美| 欧美日韩精品免费观看视频| 亚洲精品国产精品国自产观看浪潮| 综合五月婷婷| 高清电影一区| 加勒比久久高清| 88国产精品视频一区二区三区| 色综合天天天天做夜夜夜夜做| 国产欧美大片|