CK's Notepad

發表於 更新於 分類於 Disqus：

Default args

可以將在function的參數給予預設值

1
2
3
function fnWithDefaultArg(a,b=[]){
    // some codes
}

Spread operator

The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.

1
2
3
4
5
function fn(a,b,c){
  // some codes
}
var args = [1,2,3];
fn(...args); <= spread operator

A more powerful array literal

1
2
var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"]

A better push

1
2
3
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

發表於 更新於 分類於 Disqus：

現在SPA的網站越來越盛行，下載檔案的功能在ajax下是有點麻煩，但是感謝HTML5下的Blob功能。網路上就有相對應的js功能出來 所以，引用這位大大的程式 (https://github.com/eligrey/FileSaver.js)，其相關限制都有在該專案上描述

所以使用方法如下 (Client端)

1
2
3
4
5
6
7
8
9
10
$http.post('api url', query, { responseType: 'arraybuffer' }).then(function (response) {        
            var filename = (filename);
            var expectedMediaType = (file-Content-Type);
            openSaveAsDialog(filename, response.data, expectedMediaType);
});      
                
function openSaveAsDialog(filename, content, mediaType) {
        var blob = new Blob([content], { type: mediaType });
        saveAs(blob, filename);
}

重點 : responseType 要設定為 arraybuffer

(Server端) Webapi要回傳的httpresponseMessage內容如下, 不好意思程式碼是VB, 因為這個專案是用VB開發的，但是基本觀念的一樣的

1
2
3
4
5
6
7
8
9
10
Dim response As HttpResponseMessage = New HttpResponseMessage()
       ' _ms 是 MemoryStream, 這裡是因為要將NPOI所產生的excel檔做下載, 然而我將NPOI所產生出來的東西
       ' 存入到 MemoryStream裡, 重點是ByteArrayContent
       Dim _filename as string = (filename)
       If _ms IsNot Nothing Then
           response.Content = New ByteArrayContent(_ms.ToArray())
       End If
       response.Content.Headers.ContentType = New Headers.MediaTypeHeaderValue("application/octet-stream")
       response.Content.Headers.ContentDisposition = New Headers.ContentDispositionHeaderValue("attachment") With {.FileName = HttpUtility.UrlPathEncode(_filename)}
       Return Task.FromResult(response)

以上的動作就可以讓ajax的call直接做下載檔案的動作，就不用另外產生一個form然後做post到新視窗後再下載了 ^^

發表於 更新於 分類於 Disqus：

Destructuring

可以將值從陣列或是物件裡取出並設定到變數上

syntax

1
2
3
[a, b] = [1, 2]
[a, b, ...rest] = [1, 2, 3, 4, 5]
{a, b} = {a:1, b:2}

Destructuring arrays

1
2
3
4
5
6
7
8
9
var foo = ["one", "two", "three"];

// without destructuring
var one   = foo[0];
var two   = foo[1];
var three = foo[2];

// with destructuring
var [one, two, three] = foo;

其他用法 1.Multiple-value returns

1
2
3
4
5
6
function f() {
    return [1, 2];
}
var a, b;
[a, b] = f();
console.log("A is " + a + " B is " + b);

2.Ignoring some returned values

1
2
3
4
5
6
7
function f() {
    return [1, 2, 3];
}
var a, b;
[a, ,b] = f();
console.log("A is " + a + " B is " + b);
// A is 1 B is 3

3.衍伸用法: Pulling values from a regular expression match

1
2
3
4
5
6
var url = "https://developer.mozilla.org/en-US/Web/JavaScript";

var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
var [, protocol, fullhost, fullpath] = parsedURL;

console.log(protocol); // logs "https"

Destructuring objects

1
2
3
4
5
var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

另外一種用法, 將物件裡的值設定到新的變數名稱上

1
2
3
4
5
6
7
8
9
// syntax
// {object.propertyName: VariableName} = object

// Assign new variable names
var o = {p: 42, q: true};
var {p: foo, q: bar} = o;

console.log(foo); // 42
console.log(bar); // true

衍生用法: Function argument defaults

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var [missing = true] = [];
console.log(missing);
// true

var { message: msg = "Something went wrong" } = {};
console.log(msg);
// "Something went wrong"

var { x = 3 } = {};
console.log(x);
// 3

function removeBreakpoint({ url, line, column }={}) {
  // ...
}
1
2
3
4
5
6
7
8
9
10
function drawES6Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) 
{
  console.log(size, cords, radius);
  // do some chart drawing
}

drawES6Chart({
  cords: { x: 18, y: 30 },
  radius: 30
});

另外一種情境 Module (non-ES6) loading

1
const { Loader, main } = require('toolkit/loader');

REF: Several demos and usages for ES6 destructuring.

發表於 更新於 分類於 Disqus：

懶得再去微軟的網站找了，所以在此備註

CTRL+SHIFT+G 在交談中切換重要屬性 CTRL+D, DEL 刪除交談 退格鍵 封存交談 CTRL+Q 標示為已讀取 CTRL+U 標示為未讀取 CTRL+R 回覆目前郵件 CTRL+SHIFT+R 全部回覆 CTRL+F 轉寄目前郵件 CTRL+E,F3 搜尋 Alt+C 接受會議邀請 Alt+D 拒絕會議邀請 Alt+N 暫訂會議邀請 CTRL+N 建立新的電子郵件 CTRL+SHIFT+M 建立新的電子郵件 CTRL+SHIFT+V 移到檢視 CTRL+1 切換至 [郵件] CTRL+2 切換至 [行事曆] CTRL+SHIFT+I 切換至 [收件匣] CTRL+SHIFT+O 切換至 [寄件匣]

ALT+I 新增附件 CTRL+M 手動同步帳戶 F9 手動同步帳戶 CTRL+ + 放大 CTRL+ - 縮小 ALT+S 傳送郵件 Ctrl + Enter 傳送郵件 F6 在區域間移動 F7 切換鍵盤瀏覽

發表於 更新於 分類於 Disqus：

在ES2015裡面，幾個比較大的改變Part1

Arrow Function

人真的可以在懶惰一點，為了不要寫__function__這幾個字，就有 ()=>{} 的出現。這就是Arror Function 跟Lambda的表示法很像, 真的用法也是跟那個一樣

1
2
3
4
5
6
7
8
9
10
11
12
// Old
var old = function(n) {
    return n * n;
};

// with Arror Functions express 1
let new_1 = (n) => n * n;

// with arror function express 2
let new_2 = (n) => {
	return n * n;
};

另外一個要注意的是Arrow Scope的問題,

1
2
3
4
5
6
7
8
9
10
11
12
var hendrik = {
    this.name = "Hendrik";
    
    sayHello: (names) => {
        names.forEach((name)=>{
          console.log(`${this.name} greets ${name}`);
        });
    }
}
hendrik.sayHello(['frikkie']);
// output 
// hendrik greets frikkie

String templates

最快樂的事情非屬這個, 文字串的組合可以用 ` (鍵盤左上角流水符號的那個鍵), 可以讓你多行編輯文字字串 在配合 ${變數} 來將變數顯示在文字裡面。 這樣子就不用一堆的 『加號』 來串文字了，超快樂的

1
2
3
4
5
6
7
8
9
10
11
// old
function sayHello(name, surname){
    console.log('hello there ' + name + ' ' + surname + ', the time is now ' + new Date());
}

// new way 
function sayHello_new(name, surname){
    console.log(`hello there ${name} ${surname}, 
    the time is now ${new Date()}`);
}

FYI: 新版的C#/VB.net也有將此功能加入，已經可以不用string.format + 無數的{流水號}了

Let

非常重要 要將使用var來定義變數的改用let來定義變數, 這樣子就可以避免同樣名稱的變數在不同的scope被覆蓋的情形發生

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
//=== old ===
 var 
     name = 'Fido',
     breed = 'schnauzer',
     owners = ['Hendrik', 'Alice']
 ;
 
 console.log(name + '(' + breed + '):');
 
 for(var i = 0; i < owners.length; i++){
     var name = owners[i];
 
     console.log('Owner ' + name);
}

console.log(name);
//output
// Fido(schnauzer):
// Owner Hendrik
// Owner Alice
// Alice (被改變掉了)

//=== new ===
let fname = 'Fido',
    breed = 'schnauzer',
    owners = ['Hendrik', 'Alice']
;

console.log(`${fname} (${breed}):`);

for(let i = 0; i < owners.length; i++){
    let fname = owners[i];
    console.log(`Owner ${fname}`);
}

console.log(fname);
// output:
// Fido (schnauzer):
// Owner Hendrik
// Owner Alice
// Fido

const

常數，當變數一旦被指定為const時，就不可以被改變了

1
2
3
4
const pi = Math.PI;

pi = 123;
// this will cause error message

發表於 更新於 分類於 Disqus：

準備練習環境

  1. VSCode
  2. Gulp
  3. browersync
  4. Typescript

設定項目

  1. tsconfig.json
1
2
3
4
5
6
7
8
9
{
	"compilerOptions": {
		"target": "ES5",
		"module": "amd",
		"sourceMap": false,
		"watch": true,
		"outDir": "public/"
	}
}
  1. tasks.json
1
2
3
4
5
6
7
8
9
10
11
12
13
{
	"version": "0.1.0",
	"command": "gulp",
	"isShellCommand": true,
	"tasks": [
		{
			"taskName": "watch",
			"isBuildCommand": true,
			"showOutput": "silent",
			"problemMatcher": "$tsc"			
		}
	]
}
  1. gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var gulp = require('gulp'),
	browserSync = require('browser-sync').create(),
	typescript = require('gulp-tsc');
	
gulp.task('browser-sync',function(){
	browserSync.init({
		server:{
			baseDir:"./"
		}
	})	
})

gulp.task('compile',function(){
	gulp.src(['src/**/*.ts'])
	    .pipe(typescript())
		.pipe(gulp.dest('public/'))
		.pipe(browserSync.reload({stream:true}));
});

gulp.task('watch',['browser-sync'],function(){
	gulp.watch(['src/**/*.ts'],['compile']);
});

gulp.task('default',['watch']);

gulpfile會做兩件事情

  1. 當ts檔案有異動的時候做Compile並輸出到public的資料夾下
  2. 透過browsersync更新瀏覽器

這樣子就可以專心來練習javascript了

發表於 更新於 分類於 Disqus：

###ReportViewer的遠端報表的設定方式

  1. 如果需要設定登入使用者的權限時, 需要實作IReportServerCredentials, 但是如果需要就抄下面的Code 用法:
1
ReportViewer1.ServerReport.ReportServerCredentials = New CustomReportCredentials(username, password, domain)
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
Imports System.Net
Public Class CustomReportCredentials
    Implements Microsoft.Reporting.WebForms.IReportServerCredentials

    ' local variable for network credential
    Private strUserName As String
    Private strPassWord As String
    Private strDomainName As String
    Public Sub New(ByVal UserName As String, ByVal PassWord As String, ByVal DomainName As String)
        strUserName = UserName
        strPassWord = PassWord
        strDomainName = DomainName
    End Sub
    Public ReadOnly Property ImpersonationUser() As System.Security.Principal.WindowsIdentity Implements Microsoft.Reporting.WebForms.IReportServerCredentials.ImpersonationUser
        Get
            ' not use ImpersonationUser
            Return Nothing
        End Get
    End Property
    Public ReadOnly Property NetworkCredentials() As System.Net.ICredentials Implements Microsoft.Reporting.WebForms.IReportServerCredentials.NetworkCredentials
        Get
            ' use NetworkCredentials
            Return New NetworkCredential(strUserName, strPassWord, strDomainName)
        End Get
    End Property
    Public Function GetFormsCredentials(ByRef authCookie As System.Net.Cookie, ByRef userName As String, ByRef password As String, ByRef authority As String) As Boolean Implements Microsoft.Reporting.WebForms.IReportServerCredentials.GetFormsCredentials
        ' not use FormsCredentials unless you have implements a custom autentication.
        authCookie = Nothing
        password = authority = Nothing
        Return False
    End Function
End Class

  1. ServerReportUrl要指定SSRS的Report Server URL, 而不是Report Manager URL。因為這個URL的錯誤，讓我一直遇到404的錯誤. ex: http://serverIP/ReportServer

  2. ReportPath就是根據Root的相對應位置而設定，不需要.rdlc(localReport就需要搭配附檔名)

  3. 如果有參數要設定, 使用方式如下

1
2
3
Dim objParms As New System.Collections.ObjectModel.Collection(Of ReportParameter)
objParms.Add(New ReportParameter("param1", "param1 value"))
ReportViewer1.ServerReport.SetParameters(objParms)

發表於 更新於 分類於 Disqus：

##需求

  • Visual Studio 2015

##Note

所有的參考都需要手動加入, 所以新功課會是了解每一個參考裡面有的功能是什麼

1. Microsoft.AspNet.Diagnostics => MiddleWare to handle request(ex: welcomepage, errorpage)
2. Microsoft.AspNet.StaticFiles => 顯示靜態網頁

Microsoft.AspNet.Diagnostics Example

1
2
3
// app.useXXXXX
      app.UseWelcomePage();
      app.UseErrorPage();

project.json

網站所有的設定都會在這個檔案裏面做設定, 包含dependencies, webroot, exclude, frameworks, etc.

Commands

新增MVC功能

  • project.json add 「Microsoft.AspNet.Mvc」 to dependencies
  • startup.cs
1
2
3
4
5
6
7
8
9
10
public void ConfigureServices(IServiceCollection services)
{
	services.AddMvc();
	services.Configure<MvcOptions>(options => { });
}

public void Configure(IApplicationBuilder app)
{   
	app.UseMvc();
}

如果要設定mvc route時, 在startup.cs的configure裡(in c# 6 syntax)

1
2
3
4
5
6
app.UseMvc(routes=>
           {
               routes.MapRoute(
                   name: "Default",
                   template: "{controller=Home}/{action=Index}/{id?}");
           });

建立Configuration

  • dependence: 「Microsoft.Framework.Configuration.UserSecrets」
  • Useage:
1
2
3
4
5
6
7
8
9
10
11
public Startup(IHostingEnvironment env, IApplicationEnvironment appEnv)
{
   // 設定ConfiurationBuilder
 var configurationBuilder = new ConfigurationBuilder(appEnv.ApplicationBasePath);
  configurationBuilder.AddJsonFile("config.json");
  configurationBuilder.AddEnvironmentVariables();
  // 必須執行Build才能建立Configuration物件
  var config = configurationBuilder.Build(); 
  // Build後
  var value = config.get("key");	      
}

使用TagHelpers

如果想要使用MVC內建的TagHelper, 幾個需要加入的dependencies

1
2
"Microsoft.AspNet.Mvc.TagHelpers": "6.0.0-rc1-final",
"Microsoft.AspNet.Tooling.Razor": "1.0.0-rc1-final" <= 在vs編輯時會將tag的部分顯示成不同的顏色及其他功能

然後在_ViewImports.cshtml加入

1
@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"

發表於 更新於 分類於 Disqus：

最近要寫一個api，其功能需要呼叫一個exe執行檔然後取得該檔回傳的dbf檔案 但是該執行檔又需要讀取網路磁碟機的檔案。這IIS就會卡住了。不管權限怎麼設定都過不去。

所以只好繞路解決了. 解法是: 建立另外一個selfhost的webapi (console mode), 在該api下執行該執行檔就可以正常運作了，因為不是透過IIS. 然後網站去呼叫那個自行運作的webapi取回結果.

雖然有點麻煩，但是至少解決問題了。(浪費我兩天的生命)

關於selft的webapi建立方式，請參考webapi selfhost

發表於 更新於 分類於 Disqus：

Bindingsource物件是屬於winform的，所以在web環境下的design time是沒有辦法直接設定物件到datasource的屬性裡 所以這部分需要手動加進去，作法是進入 xxx.Designer.cs的InitializeComponent()加入

1
this.bindingSource1.DataSource = typeof(Object); // replace with the object you want

這樣子回到設計模式就會出現可以設定的binding物件了

^^

0%