Javascript modularity, MVC ที่ใช้เซิร์ฟเวอร์และความเป็นจริงทางธุรกิจ


32

ฉันเข้าใจว่านี่เป็นคำถามที่กว้างขวางมากแต่ฉันได้ทำงานกับแง่มุมต่าง ๆ ของปัญหานี้เป็นรายบุคคลและฉันกำลังดิ้นรนเพื่อนำแนวคิดและเทคโนโลยีทั้งหมดมารวมกัน

ฉันต้องการระบุว่าคำตอบควรมีเทคโนโลยีเหล่านี้:

  • C #
  • MVC 3 w / มีดโกน
  • Javascript ด้วย jQuery

สิ่งใดที่เหนือกว่าสิ่งใด (เช่นBackbone.js , Entity Frameworkฯลฯ ) ยินดีต้อนรับเป็นคำแนะนำหากพวกเขาช่วยตอบคำถามซึ่งก็คือ:

การใช้เทคโนโลยีที่ระบุไว้ข้างต้นเป็นกลยุทธ์ที่ดีที่สุดสำหรับการจัดระเบียบรหัสและตรรกะในขณะที่รักษาความสามารถในการปรับขนาดได้และความสามารถในการสร้าง UI ที่สมบูรณ์รวดเร็วและสะอาด

โดยหลักแล้วควรเน้นไปที่โซลูชันที่ปรับใช้ในสภาพแวดล้อมทางธุรกิจ / องค์กร ในหมายเหตุนั้นรายการเทคโนโลยีข้างต้นจะไม่เปลี่ยนแปลงดังนั้นโปรดอย่าเสนอวิธีแก้ปัญหาด้วย "คุณควรใช้xxxแทนyyyที่คุณใช้อยู่ตอนนี้"

พื้นหลัง

ฉันทำงานกับ jQuery ทุกวันได้ใช้ MVC ของ ASP.NET และทำงานกับ C # เป็นเวลานาน ดังนั้นคุณสามารถนำเสนอวิธีแก้ปัญหาโดยสมมติว่าความรู้ระดับกลางถึงระดับสูงของเทคโนโลยีเหล่านั้น

ฉันจะจัดระเบียบคำถามเป็นส่วนย่อย ๆเพื่อให้ง่ายต่อการตอบสนองต่อ:

1. โครงสร้างโครงการ

ให้ฉันทำงานกับ ASP.NET MVC (ในVisual Studio 2010 ) ฉันต้องการโซลูชันโครงสร้างไดเรกทอรีที่ให้การยอมรับเค้าโครงหลักของแอปพลิเคชันประเภทนี้ ฉันคิดว่าคล้ายกับบรันช์แต่มีรายละเอียดเพิ่มเติมเล็กน้อยเกี่ยวกับสิ่งที่แต่ละโฟลเดอร์จะมีและวิธีการทำงานกับส่วนอื่น ๆ ของแอพ

2. การเข้าถึงข้อมูล

ฉันต้องการทำให้การเข้าถึงข้อมูลเป็นโมดูลมากที่สุดเท่าที่จะทำได้ด้วยโครงสร้างประเภท API คุณสามารถสันนิษฐานได้ว่าจำนวนมากของวัตถุ POCO ( User, UserGroup, Customer, OrderHeader, OrderDetailsฯลฯ ) แต่ยังจะมีบางรายงานที่ซับซ้อนที่ต้องใช้ข้อมูล SQL ที่เข้มข้นและการแสดงผล UI ระมัดระวัง EF + LINQยอดเยี่ยมสำหรับอดีต แต่ไม่มากสำหรับหลัง ฉันไม่สามารถหาสิ่งที่ดูเหมือนจะเหมาะกับทั้งสองสถานการณ์โดยไม่ซับซ้อนเกินไปหรือง่ายเกินไป

3. การจัดการรหัสฝั่งไคลเอ็นต์และการแสดงผล UI

เช่นเดียวกับผู้พัฒนาส่วนใหญ่ก่อนที่จะหยิบ jQuery ฉันตกหลุมพรางของการแมปรหัสเข้าด้วยกันไม่ว่ามันจะต้องไปที่ไหน แม้ว่าฉันจะก้าวกระโดดมาแล้วตั้งแต่ตอนนั้นฉันยังคงต่อสู้กับการทำให้รหัสของฉันเป็นโมดูลและทำงานกับส่วนต่าง ๆ ของ UI โดยไม่ต้องทำซ้ำรหัส

ตัวอย่างเช่นรหัสทั่วไปที่ฉันเขียนอาจมีลักษณะเช่นนี้ฉันได้แสดงความคิดเห็นเกี่ยวกับสิ่งที่ทำให้ฉันรำคาญ ( โปรดทราบว่าฉันได้เปลี่ยนไปใช้การโทร AJAX ที่เลื่อนออกไปและแยกคำขอข้อมูลจริงออกจากการจัดการ DOM )

$('#doSomethingDangerous').click(function () {
    // maybe confirm something first
    if (confirm('Are you sure you want to do this?')) {   

        // show a spinner?  something global would be preferred so I don't have to repeat this on every page 
        $('#loading').show();  

        // maybe the page should notify the user of what's going on in addition to the dialog?
        $('#results').show().html('<h2>Please wait, this may take a while...</h2>');  

        $.ajax({
            url: 'blah/DoDangerousThing',
            success: function (data) {                     
                // The results will be loaded to the DOM obviously, is there a better way to pull this type of specific code out of the data access calls?
                $('#results').empty();
                $('#results').append('<b>' + data.length + '</b> users were affected by this dangerous activity');
                $('#results').append('<ul>');

                // I've recently started to use jQuery templates for this sort of logic, is that the way to go?
                $(data).each(function (i, user) {
                    $('#results').append('<li>' + user.Username + '</li>');
                });                    
                $('#results').append('</ul>');

                // Need to hide the spinner, again would prefer to have this done elsewhere
                $('#loading').hide();
            }
        });
    }
});

คำถามทั่วไป

  • MVC ไคลเอ็นต์กับเซิร์ฟเวอร์ MVC หรือไม่ โปรเจ็กต์ของฉันเป็นโครงสร้าง MVC ฝั่งเซิร์ฟเวอร์อยู่แล้วดังนั้นจึงยังคงมีความต้องการ MVC ไคลเอนต์อย่าง Backbone.js
  • ควรสร้างไฟล์ Javascript สำหรับแต่ละวัตถุ (เช่นOrderHeader.js) แล้วย่อ / รวมระหว่างการสร้างหรือไม่ หรือควรจะOrder.jsมีตรรกะที่มีOrderHeader, OrderDetails, Reportsฯลฯ ?
  • ควรจัดการกับข้อความค้นหาที่ซับซ้อนอย่างไร ตอนนี้ทฤษฎีชั้นนำของฉันคือ/Reports/Orders-By-Date/อะไรหรือตามแนวเส้นเหล่านั้นและฉันใช้แบบสอบถาม SQL แบบกำหนดเองที่แสดงชุดข้อมูลที่กำหนดเอง (หรือViewModel) ไปยังมุมมองมีดโกน แต่สิ่งที่เกี่ยวกับเพจจิ้งการเรียงลำดับ ฯลฯ ? นี่จะดีกว่าที่จะทำไคลเอนต์หรือฝั่งเซิร์ฟเวอร์? (สมมติว่าชุดข้อมูลที่มีขนาดใหญ่กว่า - แบบสอบถาม SQL 2 ถึง 3 วินาที)
  • ผมเคยอ่านผ่านทางไมโครซอฟท์โครงการผ้าไหม นี่เป็นวิธีที่ดีหรือไม่? เปรียบเทียบกับ Backbone.js หรือคนอื่น ๆ ได้อย่างไร?
  • ฉันคุ้นเคยกับสถาปัตยกรรม N-tier มากแล้วแนวคิดเหล่านี้ค่อนข้างที่จะทำให้เกิดข้อผิดพลาดหรือไม่? ดูเหมือนว่า MVC จะเป็นเหมือนส่วนย่อยของมินิฉัตรในส่วนที่จะเป็นส่วนหน้าหรือระดับบนสุดในอดีต

ยิ่งคำตอบของคุณเฉพาะเจาะจงมากเท่าไรก็ยิ่งดีเท่านั้น ฉันได้อ่านเอกสารและตัวอย่างระดับสูงมากมายฉันพยายามเข้าใจการแปลเป็นตัวอย่างในโลกแห่งความเป็นจริงมากขึ้นมากขึ้น


2
คุณใช้ความพยายามอย่างมากในคำถามนี้ แต่มันก็ไม่เหมือนคำถาม Stackoverflow สำหรับฉัน บางทีโปรแกรมเมอร์ stackexchange น่าจะเหมาะสมกว่า
แหลม

3
ฉันไม่เห็นด้วยว่าเป็นหัวข้อที่น่าสนใจ แต่ Stackoverflow ควรเป็นคำถามเกี่ยวกับวัตถุประสงค์ สิ่งที่คล้ายกับคำถามนี้นั้นเป็นคำถามหลักสำหรับเด็กที่จะ "เรียกร้องความคิดเห็นอภิปรายโต้แย้งถกเถียงหรือการอภิปรายเพิ่มเติม
แหลม

8
มีค่ายของคนที่วางแผนสำหรับขนาดใหญ่ตลอดเวลาในขณะที่ฉันเงียบ ๆ เอาธุรกิจของพวกเขาเพราะพวกเขาใช้เวลาวางแผนนานเกินไปสำหรับบางสิ่งที่ไม่เคยเกิดขึ้น
Jason Sebring

1
ฉันเห็นด้วยกับ @Pointy ว่าสิ่งนี้เป็นของโปรแกรมเมอร์สแต็ก คำถามของคุณน่าสนใจมากและฉันจะทำตามเพราะฉันมักจะมองหาคำแนะนำ แต่มันไม่ใช่คำถามวัตถุประสงค์และเป็นเพียงการจบลงในการอภิปรายพิเศษ เช่นเคยทำสิ่งที่ดีที่สุดสำหรับสถานการณ์ของคุณ ... พวกเราไม่มีใครรู้อะไรเกี่ยวกับโครงสร้างเครือข่ายของคุณจำนวนลูกค้าหรือสถิติการเข้าชมหรือกระบวนการสร้าง ... ดังนั้นคำถามคือวิธีที่คลุมเครือเกินไป ... ทั้งหมดที่ฉันรู้คือ หลีกเลี่ยงผ้าไหม ;)
one.beat.consumer

1
คำถามนี้เหมาะกับคำจำกัดความของ "กว้างมากเกินไป" ดังนั้น "ไม่ใช่คำถามจริง" หากมีสิ่งใดคำถามส่วนบุคคลควรถูกถามเป็นคำถามส่วนบุคคลที่มีพื้นฐานเล็กน้อย (มากเกินไปและผู้คนจะติดธงว่า "ไม่ใช่คำถามจริง") อย่างไรก็ตามระวังคำถามบางข้อที่คุณถามอาจถูกตั้งค่าสถานะเป็น "ไม่สร้างสรรค์" ด้วยตัวเองดังนั้นฉันจึงควรระมัดระวังเกี่ยวกับวิธีที่คุณถามคำถามเหล่านั้น
casperOne

คำตอบ:


10

TerryR เพื่อนของฉันคุณและฉันควรดื่ม เรามีปัญหาที่คล้ายกัน

1. โครงสร้างโครงการ:ฉันเห็นด้วยกับ Eduardo ว่าโครงสร้างโฟลเดอร์ในแอป MVC ทำให้บางสิ่งเป็นที่ต้องการ คุณมีโฟลเดอร์คอนโทรลเลอร์รุ่นและโฟลเดอร์มาตรฐาน แต่จากนั้นโฟลเดอร์ Views จะถูกแบ่งย่อยออกเป็นโฟลเดอร์ที่แตกต่างกันสำหรับคอนโทรลเลอร์แต่ละตัวรวมถึงโฟลเดอร์แชร์ และแต่ละ Views / ControllerName หรือ Views / Shared สามารถแบ่งออกเป็น EditorTemplates และ DisplayTemplates แต่ช่วยให้คุณตัดสินใจว่าจะจัดระเบียบโฟลเดอร์รุ่นของคุณได้อย่างไร (คุณสามารถทำได้โดยมีหรือไม่มีโฟลเดอร์ย่อย & การประกาศเนมสเปซเพิ่มเติม)

พระเจ้าห้ามไม่ให้คุณใช้พื้นที่ซึ่งซ้ำกับโครงสร้างโฟลเดอร์คอนโทรลเลอร์รุ่นและมุมมองสำหรับแต่ละพื้นที่

/Areas
    /Area1Name
        /Controllers
            FirstController.cs
            SecondController.cs
            ThirdController.cs
        /Models
            (can organize all in here or in separate folders / namespaces)
        /Views
            /First
                /DisplayTemplates
                    WidgetAbc.cshtml <-- to be used by views in Views/First
                /EditorTemplates
                    WidgetAbc.cshtml <-- to be used by views in Views/First
                PartialViewAbc.cshtml <-- to be used by FirstController
            /Second
                PartialViewDef.cshtml <-- to be used by SecondController
            /Third
                PartialViewMno.cshtml <-- to be used by ThirdController
            /Shared
                /DisplayTemplates
                    WidgetXyz.cshtml <-- to be used by any view in Area1
                /EditorTemplates
                    WidgetXyz.cshtml <-- to be used by any view in Area1
                PartialViewXyz.cshtml <-- to be used anywhere in Area1
            _ViewStart.cshtml <-- area needs its own _ViewStart.cshtml
            Web.config <-- put custom HTML Helper namespaces in here
        Area1NameRegistration.cs <-- define routes for area1 here
    /Area2Name
        /Controllers
        /Models
        /Views
        Area2NameRegistration.cs <-- define routes for area2 here

/Controllers
    AccountController.cs
    HomeController.cs
/Models
/Views
    /Account
        /DisplayTemplates
            WidgetGhi.cshtml <-- to be used views in Views/Account
        /EditorTemplates
            WidgetGhi.cshtml <-- to be used views in Views/Account
        PartialViewGhi.cshtml <-- to be used by AccountController
    /Home
        (same pattern as Account, views & templates are controller-specific)
    /Shared
        /DisplayTemplates 
            EmailAddress.cshtml <-- to be used by any view in any area
            Time.cshtml <-- to be used by any view in any area
            Url.cshtml <-- to be used by any view in any area
        /EditorTemplates
            EmailAddress.cshtml <-- to be used by any view in any area
            Time.cshtml <-- to be used by any view in any area
            Url.cshtml <-- to be used by any view in any area
        _Layout.cshtml <-- master layout page with sections
        Error.cshtml <-- custom page to show if unhandled exception occurs
    _ViewStart.cshtml <-- won't be used automatically in an area
    Web.config <-- put custom HTML Helper namespaces in here

ซึ่งหมายความว่าถ้าคุณทำงานกับ WidgetController คุณต้องมองหาโฟลเดอร์อื่น ๆ เพื่อค้นหา WidgetViewModels, WidgetViews, WidgetEditorTemplates, WidgetDisplayTemplates ฯลฯ ที่ยุ่งยากเช่นนี้ฉันติดกับมันและไม่เบี่ยงเบนไปจาก อนุสัญญา MVC เหล่านี้ เท่าที่วางโมเดลคอนโทรลเลอร์และมุมมองในโฟลเดอร์เดียวกัน แต่มีเนมสเปซที่แตกต่างกันฉันหลีกเลี่ยงสิ่งนี้เพราะฉันใช้ ReSharper มันจะขีดเส้นใต้เนมสเปซที่จะไม่ตรงกับโฟลเดอร์ที่คลาสนั้นอยู่ ฉันรู้ว่าฉันสามารถปิดคุณลักษณะ R # นี้ได้ แต่ช่วยในส่วนอื่น ๆ ของโครงการ

สำหรับไฟล์ที่ไม่ได้อยู่ในชั้นเรียน MVC จะมอบเนื้อหาและสคริปต์ให้กับคุณ เราพยายามเก็บไฟล์แบบคงที่ / ไม่ได้รวบรวมไว้ในที่เหล่านี้อีกครั้งเพื่อทำตามแบบแผน เมื่อใดก็ตามที่เรารวมไลบรารี js ที่ใช้ชุดรูปแบบ (รูปภาพและหรือ css) ไฟล์ชุดรูปแบบจะอยู่ใต้ / เนื้อหา สำหรับสคริปท์เราเพียงแค่ใส่ทั้งหมดลงใน / สคริปต์โดยตรง เดิมทีนี่คือการรับ JS Intellisense จาก VS แต่ตอนนี้เราได้รับ JS Intellisense จาก R # โดยไม่คำนึงถึงตำแหน่งใน / สคริปต์ฉันคิดว่าเราสามารถเบี่ยงเบนจากนั้นและแบ่งสคริปต์ตามโฟลเดอร์เพื่อจัดระเบียบได้ดีขึ้น คุณใช้ ReSharper หรือไม่ มันเป็นทองคำบริสุทธิ์ IMO

ทองคำอีกชิ้นเล็ก ๆ ที่ช่วยได้มากในการปรับสภาพคือ T4MVC เมื่อใช้สิ่งนี้เราไม่จำเป็นต้องพิมพ์เส้นทางสตริงสำหรับชื่อพื้นที่ชื่อตัวควบคุมชื่อการกระทำแม้แต่ไฟล์ในเนื้อหาและสคริปต์ T4MVC ขอพิมพ์สตริงมายากลทั้งหมดสำหรับคุณ นี่คือตัวอย่างเล็ก ๆ ของวิธีที่โครงสร้างโครงการของคุณไม่สำคัญหากคุณใช้ T4MVC:

// no more magic strings in route definitions
context.MapRoutes(null,
    new[] { string.Empty, "features", "features/{version}" },
    new
    {
        area = MVC.PreviewArea.Name,
        controller = MVC.PreviewArea.Features.Name,
        action = MVC.PreviewArea.Features.ActionNames.ForPreview,
        version = "december-2011-preview-1",
    },
    new { httpMethod = new HttpMethodConstraint("GET") }
);

@* T4MVC renders .min.js script versions when project is targeted for release *@
<link href="@Url.Content(Links.content.Site_css)?r=201112B" rel="stylesheet" />
<script src="@Url.Content(Links.scripts.jquery_1_7_1_js)" type="text/javascript">
</script>

@* render a route URL as if you were calling an action method directly *@
<a href="@Url.Action(MVC.MyAreaName.MyControllerName.MyActionName
    (Model.SomeId))">@Html.DisplayFor(m => m.SomeText)</a>

// call action redirects as if you were executing an action method
return RedirectToAction(MVC.Area.MyController.DoSomething(obj1.Prop, null));

2. การเข้าถึงข้อมูล:ฉันไม่มีประสบการณ์กับ PetaPoco แต่ฉันแน่ใจว่ามันคุ้มค่าที่จะเช็คเอาท์ สำหรับรายงานที่ซับซ้อนของคุณคุณได้พิจารณาบริการการรายงานของ SQL Server หรือไม่ หรือคุณกำลังรันบน db อื่นอยู่หรือไม่? ขอโทษฉันไม่ชัดเจนในสิ่งที่คุณขอ เราใช้ EF + LINQ แต่เรายังให้ความรู้เกี่ยวกับวิธีสร้างรายงานในคลาสโดเมน ดังนั้นเราจึงมีที่เก็บข้อมูลการโทรสำหรับโดเมนบริการคอนโทรลเลอร์แทนการมีที่เก็บข้อมูลการโทรของคอนโทรลเลอร์โดยตรง สำหรับรายงานเฉพาะกิจเราใช้บริการรายงานของ SQL ซึ่งไม่สมบูรณ์แบบอีกต่อไป แต่ผู้ใช้ของเราต้องการที่จะนำข้อมูลเข้าสู่ Excel ได้อย่างง่ายดายและ SSRS ทำให้เราง่ายขึ้น

3. การจัดการรหัสฝั่งไคลเอ็นต์และการแสดงผล UI:นี่คือที่ฉันคิดว่าฉันสามารถให้ความช่วยเหลือได้ นำหน้าจากหนังสือการตรวจสอบ MVC ที่ไม่เป็นการรบกวนและ AJAX ที่ไม่เป็นการรบกวน พิจารณาสิ่งนี้:

<img id="loading_spinner" src="/path/to/img" style="display:none;" />
<h2 id="loading_results" style="display:none;">
    Please wait, this may take a while...
</h2>
<div id="results">
</div>
<input id="doSomethingDangerous" class="u-std-ajax" 
    type="button" value="I'm feeling lucky" 
    data-myapp-confirm="Are you sure you want to do this?"
    data-myapp-show="loading_spinner,loading_results" 
    data-myapp-href="blah/DoDangerousThing" />

ไม่สนใจฟังก์ชันความสำเร็จ ajax ในตอนนี้ (เพิ่มเติมในภายหลัง) คุณสามารถออกไปพร้อมกับสคริปต์เดียวสำหรับการกระทำบางอย่างของคุณ:

$('.u-std-ajax').click(function () {
    // maybe confirm something first
    var clicked = this;
    var confirmMessage = $(clicked).data('myapp-confirm');
    if (confirmMessage && !confirm(confirmMessage )) { return; } 

    // show a spinner?  something global would be preferred so 
    // I dont have to repeat this on every page 
    // maybe the page should notify the user of what's going on 
    // in addition to the dialog?
    var show = $(clicked).data('myapp-show');
    if (show) {
        var i, showIds = show.split(',');
        for (i = 0; i < showIds.length; i++) {
            $('#' + showIds[i]).show();
        }
    }

    var url = $(clicked).data('myapp-href');
    if (url) {
        $.ajax({
            url: url,
            complete: function () {                     
                // Need to hide the spinner, again would prefer to 
                // have this done elsewhere
                if (show) {
                    for (i = 0; i < showIds.length; i++) {
                        $('#' + showIds[i]).hide();
                    }
                }
            }
        });
    }
});

รหัสด้านบนจะดูแลการยืนยันการแสดงปินเนอร์แสดงข้อความรอและการซ่อนข้อความปินเนอร์ / รอหลังจากการโทร ajax เสร็จสมบูรณ์ คุณกำหนดค่าพฤติกรรมโดยใช้คุณลักษณะ data- * เช่นไลบรารีที่ไม่สร้างความรำคาญ

คำถามทั่วไป

- ไคลเอ็นต์ MVC กับเซิร์ฟเวอร์ MVC? ฉันไม่ได้พยายามทำให้การดำเนินการที่คุณทำไว้ในฟังก์ชั่นความสำเร็จเป็นจริงเพราะดูเหมือนว่าคอนโทรลเลอร์ของคุณจะส่งคืน JSON หากคอนโทรลเลอร์ของคุณส่งคืน JSON คุณอาจต้องการดู KnockoutJS สิ่งที่น่าพิศวง JS รุ่น 2.0 ได้รับการปล่อยตัวในวันนี้ มันสามารถเสียบลงใน JSON ของคุณเพื่อให้การคลิกที่สังเกตได้สามารถผูกข้อมูลกับแม่แบบจาวาสคริปต์ของคุณโดยอัตโนมัติ ในทางกลับกันถ้าคุณไม่คิดว่าการใช้วิธี ajax ของคุณคืนค่า HTML แทน JSON พวกมันสามารถคืนค่า UL ที่สร้างขึ้นแล้วพร้อมกับลูก ๆ ของ LI และคุณสามารถต่อท้ายองค์ประกอบนั้นโดยใช้ data-myapp-response = "ผล". ฟังก์ชั่นความสำเร็จของคุณจะมีลักษณะเช่นนี้:

success: function(html) {
    var responseId = $(clicked).data('myapp-response');
    if (responseId) {
        $('#' + responseId).empty().html(html);
    }
}

เพื่อสรุปคำตอบที่ดีที่สุดของฉันหากคุณต้องส่งคืน JSON จากวิธีการดำเนินการของคุณคุณกำลังข้ามมุมมองฝั่งเซิร์ฟเวอร์ดังนั้นนี่ไม่ใช่เซิร์ฟเวอร์ MVC - เป็นเพียง MC หากคุณส่งคืน PartialViewResult ด้วย html ถึง ajax call นี่คือเซิร์ฟเวอร์ MVC ดังนั้นหากแอปของคุณต้องส่งคืนข้อมูล JSON สำหรับการโทร ajax ให้ใช้ไคลเอนต์ MVVM เช่น KnockoutJS

ไม่ว่าด้วยวิธีใดฉันไม่ชอบ JS ที่คุณโพสต์เพราะมันผสมการจัดวาง (แท็ก html) กับพฤติกรรม (โหลดข้อมูลแบบอะซิงโครนัส) การเลือกเซิร์ฟเวอร์ MVC ด้วยมุมมอง html บางส่วนหรือไคลเอนต์ MVVM พร้อมด้วยข้อมูล JSON viewmodel ล้วนจะแก้ปัญหานี้ให้คุณ แต่การสร้าง DOM / HTML ด้วยตนเองใน javascript เป็นการละเมิดข้อกังวล

- การสร้างไฟล์จาวาสคริเห็นได้ชัดว่าคุณสมบัติ minification ที่มีมาใน .NET 4.5 หากคุณไปเส้นทางที่ไม่เป็นการรบกวนคุณไม่ควรหยุดการโหลดไฟล์ JS ใน 1 สคริปต์ทั้งหมด ฉันจะระมัดระวังเกี่ยวกับการสร้างไฟล์ JS ที่แตกต่างกันสำหรับแต่ละประเภทเอนทิตีคุณจะจบลงด้วยการกระจายไฟล์ JS โปรดจำไว้ว่าเมื่อโหลดไฟล์สคริปต์ของคุณแล้วเบราว์เซอร์ควรทำการแคชสำหรับคำขอในอนาคต

- ข้อความค้นหาที่ซับซ้อนฉันไม่คิดว่าจะมีฟีเจอร์เช่นเลขหน้าการเรียงลำดับ ฯลฯ ว่าซับซ้อน การตั้งค่าของฉันคือการจัดการกับตรรกะของ URL และฝั่งเซิร์ฟเวอร์เพื่อให้การสืบค้น db มี จำกัด ตามที่ต้องการ อย่างไรก็ตามเราถูกปรับใช้กับ Azure ดังนั้นการเพิ่มประสิทธิภาพข้อความค้นหาจึงเป็นสิ่งสำคัญสำหรับเรา ตัวอย่างเช่น/widgets/show-{pageSize}-per-page/page-{pageNumber}/sort-by-{sortColumn}-{sortDirection}/{keyword}. EF และ LINQ to Entities สามารถจัดการการแบ่งหน้าและการเรียงลำดับด้วยวิธีการเช่น. Take (), .Skip (), .OrderBy (), และ. OrderByDescending () ดังนั้นคุณจะได้รับสิ่งที่คุณต้องการในระหว่างการเดินทาง db ฉันยังไม่พบความต้องการของลูกค้าดังนั้นฉันจึงไม่ทราบเกี่ยวกับพวกเขามากนัก ดูคำตอบอื่น ๆ สำหรับคำแนะนำเพิ่มเติมเกี่ยวกับเรื่องนั้น

- ไหมโครงการไม่เคยได้ยินเรื่องนี้จะต้องตรวจสอบออก ฉันเป็นแฟนตัวยงของ Steve Sanderson หนังสือของเขา BeginCollectionItem HtmlHelper และบล็อกของเขา ที่กล่าวว่าผมไม่ได้มีประสบการณ์กับ KnockoutJS ในการผลิต ฉันได้ดูบทแนะนำแล้ว แต่ฉันไม่พยายามที่จะผูกมัดอะไรจนกว่ามันจะเป็นเวอร์ชั่น 2.0 เป็นอย่างน้อย อย่างที่ฉันพูดถึง KnockoutJS 2.0 เพิ่งเปิดตัว

- N-tierถ้าตามระดับคุณหมายถึงเครื่องจักรที่แตกต่างกันจริง ๆ แล้วฉันไม่คิดว่าจะมีอะไรออกไปนอกหน้าต่าง โดยทั่วไป 3 ชั้นหมายถึงคุณมี 3 เครื่อง ดังนั้นคุณอาจมีลูกค้าที่อ้วนเป็นระดับการนำเสนอของคุณที่ทำงานบนเครื่องของผู้ใช้ ไคลเอ็นต์ไขมันอาจเข้าถึงระดับบริการที่ทำงานบนเซิร์ฟเวอร์แอปพลิเคชันและส่งคืน XML หรือสิ่งใด ๆ ไปยังลูกค้าระดับไขมัน และระดับบริการอาจได้รับข้อมูลจากเซิร์ฟเวอร์ SQL บนเครื่องที่ 3

MVC เป็นหนึ่งเลเยอร์ใน 1 ชั้น คอนโทรลเลอร์รุ่นและมุมมองของคุณเป็นส่วนหนึ่งของ Presentation Layer ของคุณซึ่งเป็น 1 Tier ในสถาปัตยกรรมฟิสิคัล MVC ใช้รูปแบบ Model-View-Controller ซึ่งเป็นที่ที่คุณอาจเห็นเลเยอร์เพิ่มเติม อย่างไรก็ตามอย่าพยายามคิดสามแง่มุมเหล่านี้ว่าเป็นเทียร์หรือเลเยอร์ ลองคิดถึงทั้งสามคนนี้เป็น Presentation Layer Concerns

อัปเดตหลังจากแสดงความคิดเห็นล่วงหน้า / บัส / ข้อมูล

โอเคคุณใช้เทียร์และเลเยอร์สลับกันได้ ฉันมักจะใช้คำว่า "เลเยอร์" สำหรับแผนกตรรกะ / โครงการ / แอสเซมบลีและชั้นสำหรับการแยกเครือข่ายทางกายภาพ ขอโทษสำหรับความสับสน.

คุณจะพบว่ามีคนไม่กี่คนในค่าย MVC ที่บอกว่าคุณไม่ควรใช้ "โมเดล" ใน MVC สำหรับโมเดลข้อมูลเอนทิตีของคุณและคุณไม่ควรใช้ตัวควบคุมสำหรับตรรกะทางธุรกิจ โดยที่แบบของคุณควรเป็น ViewModels ที่เฉพาะเจาะจงสำหรับการดู เมื่อใช้บางอย่างเช่น Automapper คุณจะนำเอนทิตีของคุณจากโมเดลโดเมนของคุณและ DTO ลงใน ViewModels ซึ่งสร้างขึ้นเป็นพิเศษเพื่อใช้ในมุมมอง

กฎเกณฑ์ทางธุรกิจใด ๆ ก็ควรเป็นส่วนหนึ่งของโดเมนของคุณและคุณสามารถนำไปใช้งานได้โดยใช้บริการโดเมน / รูปแบบโรงงาน / สิ่งที่เหมาะสมในเลเยอร์โดเมนของคุณไม่ใช่ในเลเยอร์การนำเสนอ MVC ผู้ควบคุมควรเป็นคนโง่แม้ว่าจะไม่ใช่คนโง่เท่ารุ่นและควรให้ความสำคัญกับโดเมนสำหรับทุกสิ่งที่ต้องการความรู้ทางธุรกิจ ผู้ควบคุมจัดการการไหลของคำร้องขอและการตอบกลับ HTTP แต่สิ่งใดก็ตามที่มีมูลค่าทางธุรกิจจริงควรอยู่เหนือระดับการจ่ายเงินของผู้ควบคุม

ดังนั้นคุณยังสามารถมีสถาปัตยกรรมแบบเลเยอร์โดยมี MVC เป็นเลเยอร์การนำเสนอ มันเป็นไคลเอนต์ของแอปพลิเคชันเลเยอร์เลเยอร์บริการหรือเลเยอร์โดเมนของคุณขึ้นอยู่กับวิธีที่คุณออกแบบ แต่ท้ายที่สุดโมเดลเอนทิตีของคุณควรเป็นส่วนหนึ่งของโดเมนไม่ใช่โมเดลใน MVC


ฉันเห็นด้วยกับคำตอบนี้โดยสิ้นเชิง! โดยเฉพาะอย่างยิ่ง: • Resharper เป็นอัจฉริยะ MVC ... จากการตรวจสอบข้อผิดพลาดไปยังการนำทาง IDE ความมีประโยชน์ของมันทำให้ฉันออกไป! • ฝั่งเซิร์ฟเวอร์ MVCเป็นวิธีที่ดีที่สุดเกือบทุกครั้ง• MVC ไม่ใช่ชั้นที่แยกกัน 3 ชั้นเป็นเลเยอร์การนำเสนอเดียว - ฉันไม่เคยคิดถึงเรื่องนี้มาก่อนด้วยวิธีนี้ แต่มันถูกต้องอย่างแน่นอน
Scott Rippey

คำตอบที่ดีมากอย่างแน่นอนสิ่งที่ฉันกำลังมองหาที่ค่าใช้จ่ายของ 300 ตัวแทนของฉัน มีเครื่องดื่มสำหรับฉันถ้าคุณอยู่ในพื้นที่โตรอนโต :)

btw ฉันคิดว่า N-tier เป็น Pres / Bus / Data เสมอไม่ว่าพวกเขาจะอยู่ที่ไหน นั่นเป็นเหตุผลที่ฉันพูดว่า MVC เกือบจะเอาสถาปัตยกรรมนั้นออกไปเพราะมันเป็นการรวม 3 สิ่งที่คุณพูดค่อนข้างเห็นด้วย แต่ก็ให้มุมมองที่ต่างออกไป

ฉันจะเตือนกับ ViewModel, model-per-view, วิธีการ ฉันเพิ่งเจอสถานการณ์ที่ฉันต้องการในภายหลังว่าฉันไม่ได้มีนามธรรมจาก DTO ถึง ViewModel โปรดดู: stackoverflow.com/q/7181980/109456

ตามกฎทั่วไปฉันไม่ชอบเห็น jQuery และแทนที่จะเขียนวัตถุด้วยอินเตอร์เฟสที่ dev ด้านฝั่งเซิร์ฟเวอร์จะสามารถเข้าใจได้อย่างรวดเร็วด้วย JQ หรือ DOM API ที่ทำธุรกิจภายใน ฉันชอบแนวคิด URLConfig ของ Django และพบว่ามีประโยชน์สำหรับการตั้งค่าวัตถุสำหรับการใช้งานบนหน้าเว็บ ฉันไม่รู้ว่า MV คืออะไร? ห้องสมุดควรทำเพื่อฉันแม้ว่า มันไม่เหมาะอย่างยิ่งสำหรับปัญหา IMO และการมอบหมายเหตุการณ์ DOM + เป็นทุกรุ่นที่ฉันต้องการสำหรับการจัดการหน้าโดยไม่ต้องผูกติดอยู่กับโครงสร้างที่เฉพาะเจาะจงมากเกินไป
Erik Reppen

6

ฉันจะไม่เขียนคำตอบแบบเต็ม แต่ต้องการแบ่งปันเคล็ดลับ

เคล็ดลับของฉัน:

1. โครงสร้างโครงการ
ฉันพบว่าโครงสร้าง MVC เริ่มต้นไม่ดีสำหรับฉัน โดยทั่วไปฉันทำงานในคอนโทรลเลอร์มุมมองและโมเดลของเอนทิตีเดียวกัน (คิดว่าผลิตภัณฑ์คำสั่งลูกค้า) ในเวลาเดียวกัน ดังนั้นฉันต้องการมีไฟล์ในโฟลเดอร์เดียวกัน แต่มี namespaces ที่แตกต่างกัน

2. ข้อมูล
ถ้าคุณไปกับ Linq-to-SQL หรือ EF คุณจะเสียใจในภายหลัง
ฉันใช้ PetaPoco ที่อนุญาตให้ฉันเรียกใช้ SQL เพื่อเรียกค้นและอัปเดตระเบียนโดยไม่ต้องเจ็บปวดจากการทำแผนที่ แต่ไม่ต้องเรียนรู้วิธีการใหม่ในการทำสิ่งต่าง ๆ และไม่มีฝันร้ายด้านประสิทธิภาพ

ฉันมีตัวสร้างโค้ดสำหรับสร้างคลาส POCO เริ่มต้นด้วยแอตทริบิวต์ PetaPoco จากนั้นเปลี่ยนคลาสเมื่อมีการเพิ่มหรือลบบางฟิลด์

PetaPocoทำงานร่วมกับคลาสแบบไดนามิกและแบบมาตรฐานดังนั้นคุณจึงไม่มีการประนีประนอมใด ๆ (ขนาดใหญ่เป็นแบบไดนามิกทั้งหมดและ Dapper คลาสมาตรฐานทั้งหมด)

ฉันยังสร้างSQL ต้นแบบโดยใช้ built-in SqlBuilder ซึ่งมีตัวเชื่อมมาตรฐานทั้งหมดสำหรับเอนทิตี แต่ไม่มี WHERE ดังนั้นฉันจึงนำ SQL เดียวกันกลับมาใช้เพื่อดึงเอนทิตีหรือรายการหนึ่ง

3. Jquery คุณสามารถทำให้บางส่วนของ UI โดดเด่นได้โดยใช้การเรียก jQuery ทั่วไป (การบรรจุข้อมูลบางอย่างภายในองค์ประกอบ HTML)

ตัวอย่างเช่นฉันมีสิ่งนี้สำหรับการลบ

var deleteLinkObj;
// delete Link
$('.jbtn-borrar').click(function () {
    deleteLinkObj = $(this);  //for future use
    $('#delete-dialog').dialog('open');
    return false; // prevents the default behaviour
});
$('#delete-dialog').dialog({
    autoOpen: false, width: 400, resizable: false, modal: true, //Dialog options
    buttons: {
        "Borrar": function () {
            $.post(deleteLinkObj[0].href, function (data) {  //Post to action
                if (data == 'OK') {
                    deleteLinkObj.closest("tr").hide('fast'); //Hide Row
                }
                else {
                    alert(data);
                }
            });
            $(this).dialog("close");
        },
        "Cancelar": function () {
            $(this).dialog("close");
        }
    }
});

ฉันแค่ต้องเพิ่มชั้นเรียน jbtn-borrarในการเชื่อมโยงหลายมิติและมันจะแสดงกล่องโต้ตอบลบบันทึกและซ่อนtr

แต่อย่าคิดมาก แอพของคุณจะเปล่งประกายด้วยสัมผัสเล็ก ๆ ในทุกมุมมอง

ไคลเอ็นต์ MVC กับเซิร์ฟเวอร์ MVC
เซิร์ฟเวอร์ MVC ใช้ประโยชน์จากมุมมองบางส่วนที่คุณสามารถใช้ในการเรนเดอร์เริ่มต้นและรีเฟรชบางส่วนด้วย Ajax โดยใช้มุมมองเดียวกัน ดูบทความที่ยอดเยี่ยมนี้

วิธีจัดการแบบสอบถามที่ซับซ้อนได้อย่างไร (เรียกว่ารายงาน)
ฉันใช้คลาสที่มีพารามิเตอร์รายงานเป็นคุณสมบัติ (มีประโยชน์สำหรับการใช้ MVC อัตโนมัติ) และGenerateวิธีการที่เรียกใช้แบบสอบถามและกรอกรายการของคลาสที่กำหนดเอง (ถ้าคุณไม่ ไม่มีคลาสที่เหมาะกับ ViewModel)
คุณสามารถใช้คลาสนี้เป็นโมเดลของมุมมองและเติมตารางด้วยรายการที่สร้างขึ้น

Silk Project
Overarchitectedของ Microsoft วิ่งเร็วเท่าที่จะทำได้ในทิศทางตรงกันข้าม


ตลกเมื่อฉันอ่านผ่าน Project Silk ฉันยังคงได้รับความรู้สึกซึ่งจู้จี้และฉันไม่สามารถวาง อาจมีการ overarchitected ว่า ...

3

1. โครงสร้างโครงการ

ฉันมี 2 ไฟล์โครงการในโซลูชันของฉัน

1) ชั้นบริการ / ธุรกิจฉันวางตรรกะทางธุรกิจและรหัสการเข้าถึงฐานข้อมูลและ POCO ทั้งหมดของฉันลงในโครงการที่แยกต่างหากนี้ ไม่จำเป็นต้องใช้เลเยอร์การเข้าถึงข้อมูลถ้าคุณใช้ ORM เป็น ORM ที่เป็นนามธรรมแล้วเลเยอร์ DB

2) เลเยอร์ UI มีมุมมอง, ตัวควบคุม, โมเดล, สคริปต์, CSS ของฉันทั้งหมด

ฉันพยายามทำให้ตัวควบคุมมุมมองสคริปต์และ CSS ทั้งหมดใช้โครงสร้างโฟลเดอร์ที่คล้ายกัน จัดโครงสร้างไฟล์ของฉันให้ตรงกับเส้นทาง URL มากที่สุด เพื่อหลีกเลี่ยงการต้องเขียนเส้นทางที่กำหนดเอง

ใช้ DisplayTemplates, EditorTemplates, มุมมองบางส่วนและโฟลเดอร์ที่ใช้ร่วมกันให้มากที่สุด

จากนั้นฉันจัดโครงสร้างสคริปต์ทั้งหมดของฉันให้ตรงกับพื้นที่เดียวกันตัวควบคุมของไฟล์ c # ของฉันดังนั้นฉันจะมีไฟล์ common.js ที่รูทไฟล์ js ต่อหน้าและไฟล์ common.js สำหรับแต่ละพื้นที่

ไฟล์ CSS ปกติแล้วฉันจะมี 2 + n (โดยที่ n คือจำนวนพื้นที่) ไฟล์ CSS ที่ 1 คือ CSS สำหรับหน้า Landing Page เท่านั้นเพื่อช่วยในการโหลดหน้าเว็บที่เร็วขึ้น (อาจไม่สำคัญสำหรับธุรกิจ / ธุรกิจ) ไฟล์ CSS ที่ 2 เป็น common.css ซึ่งมีสไตล์ทั้งหมดสำหรับหน้าอื่น ๆ ทั้งหมด จากนั้นไฟล์ common.css อื่นสำหรับแต่ละพื้นที่เช่นไฟล์ AdminArea.css ซึ่งมี CSS สำหรับหน้าผู้ดูแลระบบทุกหน้า

2. การเข้าถึงข้อมูล

ถ้าฉันใช้ Entity Framework ฉันใช้ CodeFirst เพราะมันทำงานได้ดีกับ POCOS และคุณไม่มีโมเดลที่จะดูแล n ไฮเบอร์เนตมีประสิทธิภาพมากขึ้น แต่มีช่วงการเรียนรู้แบบสเต็ป สำหรับการเพจของผลลัพธ์ DB ฉันมีมุมมองที่เป็นประโยชน์และ c # class ที่ใช้ซ้ำได้ทุกครั้ง

สำหรับการสืบค้นที่ซับซ้อนและการสร้างรายงานฉันใช้ Stored Procedure พวกเขาเขียนและบำรุงรักษาได้ง่ายกว่าและให้พลังงานกับ LINQ มากขึ้น พวกเขายังสามารถนำกลับมาใช้โดยบริการอื่น ๆ เช่น SSRS ฉันใช้ automapper เพื่อแปลงชุดข้อมูลที่ส่งคืนกลับไปเป็นเฟรมเวิร์ก entiry ของ POCO เดียวกัน

3. การจัดการรหัสฝั่งไคลเอ็นต์และการแสดงผล UI

คำตอบ Eduardo Molteni มีรหัสตัวอย่างที่ดี นอกจากนี้ฉันขอแนะนำให้ใช้ knockoutjs เพราะมันมีทั้ง templating และ bindings ที่ดี หากคุณใช้ JSON สำหรับการโทร AJAX ทั้งหมดที่ฉันใช้บ่อยๆการมีแผนที่ UI อัตโนมัติไปยังวัตถุ JS นั้นเป็นการประหยัดเวลามาก

คำถามทั่วไป

แบบสอบถามที่ซับซ้อนควรอยู่ใน proc ที่เก็บไว้ (ดูความคิดเห็นที่ emeraldcode.com)

คุณยังคงสถาปัตยกรรม N-tier ไว้โดยใช้ MVC นี้


1

ฉันเพิ่งได้รับการย้ายไปเชื่อว่าถ้าคุณวางแผนที่จะใช้สามเทคโนโลยีที่คุณอยู่คุณควรเริ่มต้นด้วยการสมมติว่าการยอมรับของออร์ชาร์ CMS ฉันเชื่อว่านี่เป็นคำตอบเดียวที่ดีที่สุดสำหรับความต้องการส่วนกลางของคุณ:

อะไรคือกลยุทธ์ที่ดีที่สุดสำหรับการจัดระเบียบรหัสและตรรกะขณะที่ยังคงความสามารถในการขยายและความสามารถในการสร้าง UI ที่สมบูรณ์รวดเร็วและสะอาด

ในสถานการณ์ Ochard สิ่งใดก็ตามที่คุณไม่สามารถจัดการผ่านกลไกการกำหนดค่าของมันคุณจะต้องจัดการผ่านการเพิ่มโมดูลออนไลน์ฟรีหรือการเขียนโมดูลของคุณเอง (ซึ่งแน่นอนคือ C #, razor, etcetera) การจัดระเบียบรหัสเป็นจุดแข็งของ Orchard

สำหรับการเข้าถึงข้อมูลมีข้อดีและข้อเสียของ ORM ที่น่าเบื่อซึ่งฉันได้คิดเช่นกันว่า micro-ORM เป็นสิ่งที่ดีที่สุด ลองใช้MassiveหรือDapper ทั้งสองได้ให้ความสำคัญกับHanselminutes ฉันจะสรุปทั้งสองโดยพูดว่า: abstractions จาก SQL เกือบจะแตกสลายอย่างต่อเนื่องเมื่อโครงการขยายตัว ในท้ายที่สุดทางออกที่ดีที่สุดสำหรับการเข้าถึงฐานข้อมูลคือนามธรรมนี้เรียกว่า SQL (บิตของการเสียดสี แต่จริง) ปล่อยให้ micro-ORM ทำงานกับมันแล้วคุณก็จะได้ทองคำ

ใส่ Orchard ร่วมกับ micro-ORMs และคุณสามารถฝานเหล็กเหมือนเนย เอ่อซึ่งหมายความว่าคุณสามารถพัฒนาได้อย่างรวดเร็วปรับขนาดและมีรหัสที่สามารถบำรุงรักษาได้ง่ายโดยทีมที่ได้รับแจก


0

ไม่แน่ใจว่าฉันพลาดคำถามนี้ไปได้อย่างไร แต่ฉันจะเพิ่มอีกสองเซ็นต์ในอีกสองปีต่อมา

MVC ไคลเอ็นต์กับเซิร์ฟเวอร์ MVC หรือไม่ โปรเจ็กต์ของฉันเป็นโครงสร้าง MVC ฝั่งเซิร์ฟเวอร์อยู่แล้วดังนั้นจึงยังคงมีความต้องการ MVC ไคลเอนต์อย่าง Backbone.js

MVC และ MV แม้กระทั่งก่อนที่มันจะถูกผลักดันไปยังฝั่งไคลเอ็นต์นั้นโดยทั่วไปได้ถูกพัฒนาให้กลายเป็นศัพท์ทางการตลาดที่สัญญาว่าข้อมูลจะถูกแยกออกจากสิ่งอื่น ๆ ซึ่งเป็นความคิดที่ดีและไม่ได้ยากสำหรับ DIY ไม่ว่าคุณจะเข้าใกล้แค่ไหนก่อนหรือขวาในช่วงกลางของการเปลี่ยนแปลง HTML ที่มีผลต่อการนำเสนอหรือความเป็นไปได้ในการโต้ตอบเป็นสถานที่ที่น่ากลัวที่สุดที่จะแยกแยะสิ่งที่ธุรกิจต้องการให้คุณทำกับข้อมูล

ไม่มีอะไรพิเศษเกี่ยวกับ "ดูตรรกะ" หลักการเดียวกันควรใช้กับตรรกะทั้งหมด และนั่นคืออย่าทำอะไรเลยตอนนี้ที่จะทำให้รู้สึกมากกว่าที่จะทำก่อนหน้านี้ เมื่อเป็ดของคุณทุกตัวอยู่ในแถวก่อนที่คุณจะส่งข้อมูลหรือเริ่มกระบวนการใหม่ระยะที่ผ่านมานั้นน่าจะสามารถใช้งานสิ่งอื่นในระบบได้อีกครั้ง

ควรสร้างไฟล์ Javascript สำหรับแต่ละวัตถุ (เช่น OrderHeader.js) จากนั้นจึงย่อ / รวมระหว่างการสร้าง? หรือควรจะมีเพียง Order.js ซึ่งมีตรรกะสำหรับ OrderHeader, OrderDetails รายงาน ฯลฯ ?

มันขึ้นอยู่กับคุณ แต่ฉันจะพยายามหลีกหนีจากไฟล์เดียวสิ่งหนึ่งชั้น ฉันไม่เคยเข้าใจเลยว่าทำไมมันจึงมีประโยชน์สำหรับอินสแตนซ์ต้องค้นหาไฟล์นามธรรมและอินเทอร์เฟซและไฟล์ที่ใช้งาน ฯลฯ ... จัดหมวดหมู่ตามความกังวลที่กว้างขึ้น ctrl + f ไม่ใช่เรื่องยากที่จะใช้ถ้ามันใช้เวลานาน

ที่กล่าวมาคุณไม่ควรรวมตัวกันของ JS เพื่อทำให้ไฟล์เล็กลงบนเว็บ เบราว์เซอร์แคช JS ดังนั้นคุณเพียงแค่บังคับให้โหลด JavaScript ซ้ำโดยติด ​​JS เก่าไว้ในไฟล์ใหม่ ยกเว้นจาวาสคริปจำนวนมากครั้งเดียวที่คุณไม่ควรมี JS ทั้งหมดในหน้านี้ก็คือเมื่อมีปริมาณจำนวนมากที่เฉพาะเจาะจงสำหรับส่วนหนึ่งของเว็บไซต์ที่ไม่มีพื้นที่ทับซ้อน / สีเทาบนหน้าเว็บที่กำหนด หน้า.

และ FFS ไม่ยุ่งยากกับการจัดการการพึ่งพากับ JavaScript บนเว็บ Require.js ในเว็บไซต์ที่มีความซับซ้อนต่ำถึงปานกลางทำให้ฉันต้องการคลับแมวน้ำทารก ติดห้องสมุดบุคคลที่สามของคุณในบล็อกด้านบน ห้องสมุดในบ้านของคุณในบล็อกที่สอง และจากนั้นรหัสการใช้งานของคุณ (ซึ่งไม่ควรเป็นสิบเท่าของรหัสห้องสมุดภายในของคุณ - คือรวบรัดและชัดเจนและเข้าใจง่าย) ใน bock ที่สามนั้น

ควรจัดการกับข้อความค้นหาที่ซับซ้อนอย่างไร ตอนนี้ทฤษฎีชั้นนำของฉันคือ / Reports / Orders-By-Date / หรือบางอย่างตามบรรทัดเหล่านั้นและฉันใช้เคียวรี SQL แบบกำหนดเองที่แสดงชุดข้อมูลที่กำหนดเอง (หรือ ViewModel) ไปที่ Razor View แต่สิ่งที่เกี่ยวกับเพจจิ้งการเรียงลำดับ ฯลฯ ? นี่จะดีกว่าที่จะทำไคลเอนต์หรือฝั่งเซิร์ฟเวอร์? (สมมติว่ามีชุดข้อมูลที่ใหญ่กว่า - แบบสอบถาม SQL ประมาณ 2 ถึง 3 วินาที) ฉันได้อ่าน Project Silk ของ Microsoft แล้ว นี่เป็นวิธีที่ดีหรือไม่? เปรียบเทียบกับ Backbone.js หรือคนอื่น ๆ ได้อย่างไร?

พูดตามตรงฉันจะพูดว่าอะไรก็ตามง่ายกว่าสำหรับคุณที่ไม่เหม็นสำหรับลูกค้า หน้าเว็บโหลดค่อนข้างเร็วเกี่ยวกับเทคโนโลยีที่ทันสมัย หากการใช้งานใน Ajax เป็นเรื่องที่เจ็บปวดมากสำหรับคุณ เพียงไปกับสิ่งที่คุณรู้ดีที่สุดแล้วคุณสามารถจินตนาการได้ในภายหลังและดูว่าคุณชอบมันสำหรับเพจอย่างไร หากคุณกำลังสร้างแอพที่ซับซ้อนใหม่ตั้งแต่เริ่มต้นให้เริ่มด้วยสิ่งที่จำเป็นและมีระเบียบเรียบร้อยในภายหลัง

ฉันคุ้นเคยกับสถาปัตยกรรม N-tier มากแล้วแนวคิดเหล่านี้ค่อนข้างที่จะทำให้เกิดข้อผิดพลาดหรือไม่? ดูเหมือนว่า MVC จะเป็นเหมือนส่วนย่อยของมินิฉัตรในส่วนที่จะเป็นส่วนหน้าหรือระดับบนสุดในอดีต

มันขึ้นอยู่กับความคิดแฟนตาซีของใครก็ตามที่เป็น MV? คือ. IMO สิ่งพิภพเล็ก ๆ มีแนวโน้มที่จะทำงานได้ดีมาก คลาสของวิดเจ็ตที่แยกข้อมูลการสื่อสารและสิ่งที่เกี่ยวข้องกับมุมมองใช้งานได้ดีภายใน บนเว็บฝั่งไคลเอ็นต์สิ่งสำคัญ IMO คือการรักษาสมดุลของการแยกความกังวลโดยไม่จำเป็นต้องแยกส่วนเป็นข้อกังวลเล็ก ๆ น้อย ๆ ซึ่งการประกอบซ้ำทำให้ยากต่อการเข้าใจและนำกลับมาใช้ใหม่และปรับเปลี่ยนสิ่งต่าง ๆ OOP "duh" พื้นฐานใช้งานได้ดีที่นี่ คุณไม่ต้องการกระบวนการที่ซับซ้อน คุณต้องการสิ่งที่มีชื่อชัดเจนที่สามารถย้ายไปรอบ ๆ และบอกให้ทำสิ่งต่าง ๆ นี่คือเคล็ดลับบางอย่างที่อยู่ด้านหน้า:

  • บอกว่าส่วนต่อประสาน (OOP)ฉันไม่ต้องการเห็น DOM หรือ jQuery หรืออย่างอื่น dev ฝั่งเซิร์ฟเวอร์บีบไม่สามารถคิดออกอย่างรวดเร็วในรหัสการใช้งานของฉัน สิ่งที่บุคคลนั้นควรรู้คือคลาสใดที่จะตบบนคอนเทนเนอร์ div และสิ่งที่สลับเป็นฟลิปเพื่อให้ชุด UI ทั่วไปค่อนข้างใช้งานได้ในหน้าเว็บที่กำหนด รูปแบบของชุดรูปแบบควรยังคงสามารถทำได้โดยการส่งผ่านวัตถุตัวเลือกที่มีเอกสาร / ความคิดเห็นดีก่อนที่จะต้องเริ่มดูที่ document.get <anything> หรือทำความเข้าใจกับสิ่งอื่น ๆ

  • โอเคคุณทำเช่นนั้นได้อย่างไร เรามีโมเดลอยู่แล้ว มันเรียกว่า DOM และเรามีการมอบหมายกิจกรรม หากคุณไม่ได้ปิดตัวเองโดยไม่เลือกเหตุการณ์ (อย่าทำอย่างนั้นเพราะมันมีประโยชน์) คุณสามารถรับทุก ๆ แม้จากร่างกายถ้าคุณต้องการ จากนั้นตรวจสอบคุณสมบัติเป้าหมายของวัตถุเหตุการณ์ที่ผ่านไปแล้วพิจารณาว่าใคร 'รับอะไรก็ได้' หากคุณกำลังสร้างเอกสาร HTML อย่างสมเหตุสมผลไม่มีเหตุผลที่จะไม่ใช้มันเป็นแบบจำลองการมอบหมาย โครงสร้างพฤติกรรมและเนื้อหาเชื่อมโยงกันตามธรรมชาติ ไม่เป็นไรที่ทั้งสองจะมีตัวระบุที่ทับซ้อนกัน

  • ไม่ต้องจ่ายเงินสำหรับการผูกข้อมูลและแน่นอนว่า "จ่าย" ฉันหมายถึง "ตบห้องสมุดลงบนโค้ดเบสของคุณเพื่อยืนยันว่าคุณทำสิ่งต่าง ๆ ได้ตลอดเวลาเพื่อรับผลประโยชน์มหัศจรรย์ที่ไม่ยากสำหรับ DIY จริง ๆ " ระบบเหตุการณ์ของ JQ ทำให้ง่ายมาก

เวลาตัวอย่าง:

function PoliticianData(){ //a constructor

    var
        that = this, //I hate 'that' but example so convention

        flavorsOfLie = {

            lies: "Oh Prism? Psh... no we're all good. There's a guy keeping an eye on that.",

            damnedLies: "50% of the people chose to not give a damn when asked whether it was better to let the terrorists win or not give a damn."

        }
    ;//end instance vars

    this.updateLies = function( lieType, newData ){
        flavorsOfLie[lieType] = newData;
        $(that).trigger({type:'update', lieType:lieType, newData: newData });
    }

    //so everytime you use the updateLies method, we can have a listener respond
    //and pass the data
}

var filthyLies = new PoliticianData();

$(filthyLies).on('update', function(e){
    stickNewDataInHTMLWithSomeFuncDefinedElsewhere(e.lieType, e.newData);
} );

filthyLies.update('damnedLies','50% of the people said they didn\'t give a damn');
//oh look, WaPo's front page just changed!
  • อย่าซ่อนเว็บแหล่งที่มาที่น่าดึงดูดของความพยายามครั้งแรกในการทำให้ฝั่งไคลเอ็นต์เป็นเรื่องง่ายสำหรับฝั่งเซิร์ฟเวอร์และแอปพลิเคชันที่บานพับในจุดวิกฤตินี้ คำขอ HTTP ไม่ได้และไม่เคยซับซ้อน พวกเขาไม่ต้องการ 18! @ # $ ing เลเยอร์ความสับสน - เหตุการณ์ - ชื่อ - ต่อ - ในแต่ละขั้นตอนเพื่อให้เข้าใจได้ง่ายขึ้น ในทำนองเดียวกันมีหลายสิ่งที่ต้องรู้เกี่ยวกับฝั่งไคลเอ็นต์ แต่ไม่มีเหตุผลที่จะซ่อนจาก HTML และ DOM ที่โต้ตอบกับมันโดยการตบโมเดลยักษ์ขนาดใหญ่ที่อยู่ด้านบน มันเป็นโมเดลยักษ์ตัวใหญ่และใช้งานได้ดีมาก สิ่งที่เราต้องทำให้สามารถจัดการได้มากขึ้นคือแนวทางปฏิบัติของ OOP ที่เหมาะสมและความรู้เกี่ยวกับ JS และ DOM

  • ชอบความยืดหยุ่น

EXTjs <==== ระดับความยืดหยุ่น ====> jQuery (ไม่จำเป็นต้องมีปลั๊กอิน)

IMO เครื่องมือที่ช่วยให้คุณทำ DIY ได้อย่างรวดเร็วเป็นตัวเลือกที่ดีกว่าเสมอ เครื่องมือที่ทำทุกอย่างเพื่อคุณเป็นเพียงตัวเลือกที่ถูกต้องเมื่อไม่มีใครอยู่เหนือหัวของคุณโดยเฉพาะอย่างยิ่งที่จะพิถีพิถันเกี่ยวกับรายละเอียดและคุณไม่สนใจที่จะควบคุมสิ่งที่ควรจะช่วยคุณ ฉันเคยเห็นปลั๊กอินจริงที่ตรวจสอบ HTML เพื่อให้แน่ใจว่าคุณไม่ได้แอบมององค์ประกอบที่แตกต่างกันโดยมีคุณลักษณะการแสดงผลที่เหมือนกันทั้งหมดในนั้น ทำไม? ฉันมีเพียงทฤษฎีเท่านั้น ฉันคิดว่ามันน่าเบื่อสำหรับผู้ที่สมบูรณ์แบบที่เกลียดความคิดของใครบางคนที่ใช้สิ่งของของพวกเขาในแบบที่ไม่ได้ตั้งใจและนั่นก็เป็นสิ่งที่ทุกคนต้องการให้คุณทำใน UI อย่างหลีกเลี่ยงไม่ได้

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.