การเขียนโปรแกรม javascript

5

จะใช้ React.forwardRef ในองค์ประกอบตามคลาสได้อย่างไร

ฉันพยายามใช้ React.forwardRef แต่สะดุดวิธีทำให้มันทำงานในองค์ประกอบตามคลาส (ไม่ใช่ HOC) ตัวอย่างเอกสารใช้องค์ประกอบและส่วนประกอบที่ใช้งานได้แม้กระทั่งการตัดคลาสในฟังก์ชันสำหรับส่วนประกอบลำดับที่สูงกว่า เริ่มต้นด้วยสิ่งนี้ในref.jsไฟล์: const TextInput = React.forwardRef( (props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />) ); และแทนที่จะกำหนดเป็นดังนี้: class TextInput extends React.Component { render() { let { props, ref } = React.forwardRef((props, ref) => ({ props, ref })); return <input type="text" placeholder="Hello World" ref={ref} />; } …

115 javascript reactjs

4

ความแตกต่างระหว่างเหตุการณ์ "เปลี่ยนแปลง" และ "อินพุต" สำหรับองค์ประกอบ "อินพุต"

คนที่สามารถบอกสิ่งที่แตกต่างระหว่างchangeและinputเหตุการณ์ที่เกิดขึ้นคืออะไร? ฉันใช้ jQuery เพื่อเพิ่ม: $('input[type="text"]').on('change', function() { alert($(this).val()); }) นอกจากนี้ยังทำงานร่วมกับแทนinputchange อาจจะแตกต่างกันบ้างในการเรียงลำดับเหตุการณ์ที่สัมพันธ์กับโฟกัส?

115 javascript jquery events dom

10

จะหลีกเลี่ยงการห่อ <div> พิเศษใน React ได้อย่างไร?

วันนี้ฉันได้เริ่มเรียนรู้ ReactJS และหลังจากผ่านไปหนึ่งชั่วโมงต้องเผชิญกับปัญหา .. ฉันต้องการแทรกส่วนประกอบที่มีสองแถวภายใน div บนหน้าตัวอย่างง่ายๆของสิ่งที่ฉันกำลังทำอยู่ด้านล่าง ฉันมี html: <html> .. <div id="component-placeholder"></div> .. </html> ฟังก์ชัน Render ดังนี้: ... render: function() { return( <div className="DeadSimpleComponent"> <div className="DeadSimpleComponent__time">10:23:12</div > <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div> </div> ) } .... และด้านล่างฉันเรียกว่า render: ReactDOM.render(<DeadSimpleComponent/>, document.getElementById('component-placeholder')); HTML ที่สร้างขึ้นมีลักษณะดังนี้: <html> .. <div id="component-placeholder"> <div class="DeadSimpleComponent"> <div …

115 javascript reactjs

4

คีย์เวิร์ด“ get” ก่อนฟังก์ชันในคลาสคืออะไร

อะไรgetเฉลี่ยในชั้นเรียน ES6 นี้หรือไม่? ฉันจะอ้างอิงฟังก์ชันนี้ได้อย่างไร? ฉันควรใช้มันอย่างไร? class Polygon { constructor(height, width) { this.height = height; this.width = width; } get area() { return this.calcArea() } calcArea() { return this.height * this.width; } }

115 javascript methods getter

7

ตรวจสอบว่าค่าอยู่ในช่วงของตัวเลขหรือไม่

ฉันต้องการตรวจสอบว่าค่าอยู่ในช่วงที่ยอมรับหรือไม่ ถ้าใช่เพื่อทำอะไรบางอย่าง มิฉะนั้นอย่างอื่น ช่วงคือ0.001-0.009. ฉันรู้วิธีใช้หลายตัวifเพื่อตรวจสอบสิ่งนี้ แต่ฉันต้องการทราบว่ามีวิธีใดในการตรวจสอบในifคำสั่งเดียวหรือไม่

115 javascript if-statement

12

เลื่อนไปที่องค์ประกอบเมื่อคลิกใน Angular 4

ฉันต้องการเลื่อนไปยังเป้าหมายเมื่อกดปุ่ม ฉันกำลังคิดอะไรแบบนี้ <button (click)="scroll(#target)">Button</button> และในcomponent.tsวิธีการของฉันเช่น scroll(element) { window.scrollTo(element.yPosition) } ฉันรู้ว่ารหัสด้านบนไม่ถูกต้อง แต่เพียงเพื่อแสดงสิ่งที่ฉันคิด ฉันเพิ่งเริ่มเรียนรู้ Angular 4 โดยไม่มีประสบการณ์ Angular มาก่อน ฉันค้นหาอะไรทำนองนี้มาตลอด แต่ตัวอย่างทั้งหมดอยู่ใน AngularJs ซึ่งแตกต่างจาก Angular 4 มาก

115 javascript html angular typescript

7

ใน Angular ฉันต้องการค้นหาวัตถุในอาร์เรย์

ใน Angular ฉันมีขอบเขตวัตถุที่ส่งคืนวัตถุจำนวนมาก แต่ละคนมี ID (สิ่งนี้ถูกเก็บไว้ในไฟล์แบบแบนดังนั้นจึงไม่มี DB และดูเหมือนว่าฉันจะใช้ไม่ได้ng-resource) ในตัวควบคุมของฉัน: $scope.fish = [ {category:'freshwater', id:'1', name: 'trout', more:'false'}, {category:'freshwater', id:'2', name:'bass', more:'false'} ]; ในมุมมองของฉันฉันมีข้อมูลเพิ่มเติมเกี่ยวกับปลาที่ซ่อนอยู่โดยค่าเริ่มต้นที่มีng-showมากขึ้น showdetails(fish.fish_id)แต่เมื่อฉันคลิกแท็บการแสดงที่เรียบง่ายมากขึ้นผมอยากจะเรียกใช้ฟังก์ชัน ฟังก์ชันของฉันจะมีลักษณะดังนี้: $scope.showdetails = function(fish_id) { var fish = $scope.fish.get({id: fish_id}); fish.more = true; } ตอนนี้ในมุมมองรายละเอียดเพิ่มเติมจะปรากฏขึ้น อย่างไรก็ตามหลังจากค้นหาในเอกสารแล้วฉันไม่สามารถหาวิธีค้นหาfishอาร์เรย์นั้นได้ ดังนั้นฉันจะสอบถามอาร์เรย์ได้อย่างไร และในคอนโซลฉันจะเรียกดีบักเกอร์เพื่อให้ฉันมี$scopeวัตถุที่จะเล่นได้อย่างไร

114 javascript angularjs

8

jQuery text () และขึ้นบรรทัดใหม่

อยากได้ทักมา $(someElem).text('this\n has\n newlines); และแสดงผลด้วยบรรทัดใหม่ในเบราว์เซอร์ วิธีแก้ปัญหาเดียวที่ฉันพบคือการตั้งค่าคุณสมบัติ css 'white-space' เป็น 'pre' บน someElem เกือบจะได้ผล แต่ฉันก็มีช่องว่างระหว่างข้อความกับด้านบนของ someElem ขนาดใหญ่จนน่ารำคาญแม้ว่าฉันจะตั้งค่าช่องว่างภายในเป็น 0 มีวิธีกำจัดสิ่งนี้หรือไม่?

114 javascript jquery html

6

ฉันจะตรวจสอบเหตุการณ์ jQuery AJAX กับ Jasmine ได้อย่างไร

ฉันพยายามใช้ Jasmine เพื่อเขียนข้อกำหนด BDD สำหรับคำขอ jQuery AJAX พื้นฐาน ฉันกำลังใช้ Jasmine ในโหมดสแตนด์อโลน (เช่นผ่านSpecRunner.html) ฉันได้กำหนดค่า SpecRunner ให้โหลด jquery และไฟล์. js อื่น ๆ มีความคิดที่ทำไมสิ่งต่อไปนี้ไม่ได้ผล? has_returned ไม่เป็นความจริงแม้แต่คิดว่า "yuppi!" การแจ้งเตือนปรากฏขึ้นได้ดี describe("A jQuery ajax request should be able to fetch...", function() { it("an XML file from the filesystem", function() { $.ajax_get_xml_request = { has_returned : false …

114 javascript jquery ajax jasmine bdd

4

“ Splats” หมายความว่าอย่างไรในบทแนะนำ CoffeeScript

ดูบทช่วยสอน CoffeeScript นี้: http://jashkenas.github.com/coffee-script/ ฉันไม่ค่อยเห็นว่า Splats มีไว้เพื่ออะไร สิ่งก่อสร้างนี้คืออะไร? มาจากไหน (ในอดีต)

114 javascript coffeescript

3

จะโหลด json ลงใน angular.js ng-model ได้อย่างไร?

ฉันมีสิ่งที่ฉันคิดว่าน่าจะเป็นคำถามที่ชัดเจนมาก แต่ฉันหาคำตอบไม่ได้เลย ฉันแค่พยายามโหลดข้อมูล JSON จากเซิร์ฟเวอร์ของฉันไปยังไคลเอนต์ ตอนนี้ฉันใช้ JQuery เพื่อโหลดด้วยการโทร AJAX (รหัสด้านล่าง) <script type="text/javascript"> var global = new Array(); $.ajax({ url: "/json", success: function(reports){ global = reports; return global; } }); </script> ซึ่งอยู่ในไฟล์ html ตอนนี้ใช้งานได้ แต่ปัญหาคือฉันต้องการใช้ AngularJS ตอนนี้ในขณะที่ Angular CAN ใช้ตัวแปรฉันไม่สามารถโหลดทุกอย่างเป็นตัวแปรได้ดังนั้นฉันจึงสามารถใช้ a สำหรับแต่ละลูปได้ ดูเหมือนว่าจะเกี่ยวข้องกับ "$ Scope" ซึ่งมักจะอยู่ในไฟล์. js ปัญหาคือฉันไม่สามารถโหลดโค้ดจากหน้าอื่นเป็นไฟล์. js ทุกตัวอย่างของ Angular …

114 javascript ajax angularjs model

7

การใส่ล้อเลียนลงในบริการ AngularJS

ฉันมีบริการ AngularJS ที่เขียนไว้และฉันต้องการทดสอบหน่วย angular.module('myServiceProvider', ['fooServiceProvider', 'barServiceProvider']). factory('myService', function ($http, fooService, barService) { this.something = function() { // Do something with the injected services }; return this; }); ไฟล์ app.js ของฉันได้ลงทะเบียนสิ่งเหล่านี้: angular .module('myApp', ['fooServiceProvider','barServiceProvider','myServiceProvider'] ) ฉันสามารถทดสอบว่า DI ทำงานได้ดังนี้: describe("Using the DI framework", function() { beforeEach(module('fooServiceProvider')); beforeEach(module('barServiceProvider')); beforeEach(module('myServiceProvder')); var service; beforeEach(inject(function(fooService, barService, …

114 javascript angularjs mocking jasmine angularjs-service

7

เหตุใด JavaScript ของฉันจึงไม่ทำงานใน JSFiddle

ฉันไม่สามารถหาสิ่งที่เป็นปัญหานี้JSFiddle HTML: <input type="button" value="test" onclick="test()"> JavaScript: function test(){alert("test");} และเมื่อฉันคลิกที่ปุ่ม - ไม่มีอะไรเกิดขึ้น คอนโซลแจ้งว่า "ไม่ได้กำหนดการทดสอบ" ฉันได้อ่านเอกสาร JSFiddle - มีการระบุว่ามีการเพิ่มโค้ด JS <head>และโค้ด HTML จะถูกเพิ่มเข้ามา<body>(ดังนั้นโค้ด JS นี้จึงเร็วกว่า html และควรใช้งานได้)

114 javascript html jsfiddle

5

การขยายคำสั่งเชิงมุม

ฉันต้องการแก้ไขเล็กน้อยกับคำสั่งของบุคคลที่สาม (โดยเฉพาะAngular UI Bootstrap ) ฉันเพียงแค่ต้องการเพิ่มขอบเขตของpaneคำสั่ง: angular.module('ui.bootstrap.tabs', []) .controller('TabsController', ['$scope', '$element', function($scope, $element) { // various methods }]) .directive('tabs', function() { return { // etc... }; }) .directive('pane', ['$parse', function($parse) { return { require: '^tabs', restrict: 'EA', transclude: true, scope:{ heading:'@', disabled:'@' // <- ADDED SCOPE PROPERTY HERE }, link: …

114 javascript angularjs angularjs-directive angular-ui-bootstrap bower

6

วิธีเขียนฟังก์ชันอะซิงโครนัสสำหรับ Node.js

ฉันได้พยายามค้นคว้าว่าควรเขียนฟังก์ชันอะซิงโครนัสอย่างไร หลังจากไถเอกสารมากมายแล้วก็ยังไม่ชัดเจนสำหรับฉัน ฉันจะเขียนฟังก์ชันอะซิงโครนัสสำหรับโหนดได้อย่างไร ฉันจะใช้การจัดการเหตุการณ์ข้อผิดพลาดอย่างถูกต้องได้อย่างไร อีกวิธีในการถามคำถามของฉันคือฉันจะตีความฟังก์ชันต่อไปนี้ได้อย่างไร var async_function = function(val, callback){ process.nextTick(function(){ callback(val); }); }; นอกจากนี้ฉันพบคำถามนี้ใน SO ("ฉันจะสร้างฟังก์ชันอะซิงโครนัสแบบไม่บล็อกใน node.js ได้อย่างไร") น่าสนใจ ฉันรู้สึกว่ายังไม่ได้รับคำตอบ

114 javascript asynchronous node.js

คำถามติดแท็ก javascript