10 eckige Interviewfragen, die von fröhlich bis traurig reichen

<p style="text-align: center;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/138/691/841/1598408736489222.jpg" class="lazy" title="1598408736489222.jpg" alt="10 eckige Interviewfragen, die von fröhlich bis traurig reichen"></p> <p>Obwohl es nur 10 Fragen gibt, decken sie alle Aspekte der Angular-Entwicklung ab, einschließlich grundlegender Wissenspunkte, während des Entwicklungsprozesses aufgetretener Probleme und offenerer Fragen, um das Grundniveau und die Projekterfahrung des Interviewers zu ermitteln. Wenn ich ein Interview hätte, a Wäre es vor einem Jahr definitiv ein Übergang von der Komödie zur Tragödie? (<em>PS: Die Antwort dient nur als Referenz~</em>). </p> <p>Verwandte Tutorial-Empfehlungen: „<a href="https://www.php.cn/course/list/20.html" target="_blank">Angular-Tutorial</a>“</p> <h3 id="Was-ist-der-Unterschied-zwischen-code-ng-show-ng-hide-code-und-code-ng-if-code">1 Was ist der Unterschied zwischen <code>ng-show/ng-hide</code> und <code>ng-if</code>? </h3> <p>Wir alle wissen, dass ng-show/ng-hide tatsächlich durch <code>display</code> versteckt und angezeigt wird. Und ng-if steuert tatsächlich das Hinzufügen und Löschen von Dom-Knoten. Wenn wir also DOM-Knoten basierend auf unterschiedlichen Bedingungen laden, ist die Leistung von ng-if besser als die von ng-show.</p> <h3 id="Erklären-Sie-was-code-rootScrope-code-ist-und-was-der-Unterschied-zwischen-code-scope-code-ist">2 Erklären Sie, was <code>$rootScrope</code> ist und was der Unterschied zwischen <code>$scope</code> ist. </h3> <p>Laienhaft ausgedrückt: alle <code>$rootScrope</code>s<code>$scope</code>. <code>父亲</code></p> <p><span class="img-wrap"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/774/670/837/1598408733715033.png" class="lazy" title="1598408733715033.png" alt="10 eckige Interviewfragen, die von fröhlich bis traurig reichen"></span></p>Sehen wir uns an, wie man <p> und <code>$rootScope</code> generiert. <code>$scope</code></p>Schritt 1: Angular analysiert <p> und erstellt <code>ng-app</code> im Speicher. <code>$rootScope</code></p>Schritt2: Angular kehrt zurück, um mit der Analyse fortzufahren, findet den <p>-Ausdruck und analysiert ihn in eine Variable. <code>{{}}</code></p>Schritt 3: Dann wird das Div mit <p> analysiert und auf eine Controller-Funktion verwiesen. Zu diesem Zeitpunkt wird die Controller-Funktion zu einer $scope-Objektinstanz. <code>ng-controller</code></p>3. Wie funktioniert der Ausdruck <h3 id="item-3">? <code>{{yourModel}}</code> </h3>Es verlässt sich auf den $interpolation-Dienst. Nach der Initialisierung des Seiten-HTML werden diese Ausdrücke gefunden und markiert, sodass jedes Mal, wenn es auf ein <p> trifft, ein <code>{{}}</code> gesetzt wird. Und <code>$watch</code> gibt eine Funktion mit Kontextparametern zurück. Wenn die Funktion schließlich ausgeführt wird, befindet sich der Ausdruck <code>$interpolation</code> in diesem Bereich. <code>$parse</code></p>4. Was ist der Digest-Zyklus in Angular? <h3 id="item-4"></h3>In jedem Digest-Zyklus vergleicht Angular immer den Wert des Modells im Bereich. Im Allgemeinen wird der Digest-Zyklus automatisch ausgelöst. Wir können auch $apply verwenden, um ihn manuell auszulösen. Für tiefergehende Recherchen können Sie zu „The Digest Loop“ wechseln und sich bewerben<p>. <a href="https://www.ng-book.com/p/The-Digest-Loop-and-apply/" rel="nofollow noreferrer" target="_blank"></a>5. Wie storniere ich </p> und stoppe ein <h3 id="Was-ist-der-Unterschied-zwischen-amp-im-Gültigkeitsbereich-code-timeout-code-code-watch-code-restrict-kann-separat-eingestellt-werden">? Was ist der Unterschied zwischen @,=,& im Gültigkeitsbereich? <code>$timeout</code><code>$watch()</code>restrict kann separat eingestellt werden: </h3> <p></p> <p><code>$watch</code> passendes Attribut </p> <h3 id="item-6"></h3> <p></p> passendes Label <ul> <li> <p><code>A</code></p> passende Klasse </li> <li> <p><code>E</code></p> passende Annotation </li> <li> <p><code>C</code> Natürlich können Sie mehrere Werte festlegen wie </p>, Machen Sie mehrere Übereinstimmungen. </li> <li>Im Gültigkeitsbereich stellen @,=,& jeweils dar, wann Werte gebunden werden <p><code>M</code></p> </li> </ul>Erhalten Sie eine festgelegte Zeichenfolge, die Sie selbst festlegen oder mit {{yourModel}} binden können;<p> <code>AEC</code></p> <p></p> Zwei-Wege Bindung, bindet einige Eigenschaften im Bereich; <ul> <li> <p><code>@</code></p> wird verwendet, um einige Ausdrücke im übergeordneten Bereich auszuführen. Üblicherweise legen wir einige Funktionen fest, die ausgeführt werden müssen</li> <li> <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>var customTimeout = $timeout(function () { // your code }, 1000); $timeout.cancel(customTimeout);</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// .$watch() 会返回一个停止注册的函数 function that we store to a variable var deregisterWatchFn = $rootScope.$watch(‘someGloballyAvailableProperty’, function (newVal) { if (newVal) { // we invoke that deregistration function, to disable the watch deregisterWatchFn(); ... } });</pre><div class="contentsignin">Nach dem Login kopieren</div></div><code>=</code></p>Codepen-Demo: https://codepen. io/Jack_Pu/pen/NrpRBK</li><li><p><code>&</code></p></li> für Einwegbindung. </ul><blockquote><p></p>7. Nennen Sie mindestens drei Möglichkeiten, die Kommunikation zwischen verschiedenen Modulen zu implementieren? </blockquote><ul><li><p>Service<code><</code></p></li></ul>events, geben Sie die gebundenen Ereignisse an. <h3 id="item-7"></h3><ul><li>Offiziell empfohlen, Debug deaktivieren, <p></p></li><li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>angular.module(&amp;#39;docsIsolationExample&amp;#39;, []) .controller(&amp;#39;Controller&amp;#39;, [&amp;#39;$scope&amp;#39;, function($scope) { $scope.alertName = function() { alert(&amp;#39;directive scope &amp;&amp;#39;); } }]) .directive(&amp;#39;myCustomer&amp;#39;, function() { return { restrict: &amp;#39;E&amp;#39;, scope: { clickHandle: &amp;#39;&amp;&amp;#39; }, template: &amp;#39;&lt;button ng-click=&quot;testClick()&quot;&gt;Click Me&lt;/button&gt;&amp;#39;, controller: function($scope) { $scope.testClick = function() { $scope.clickHandle(); } } }; });</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p></p></li>Verwenden Sie einen Bindungsausdruck, der {{::yourModel}} ist. <li><p></p></li>Reduzieren Sie die Anzahl der Beobachter. <li><p><code>$parent</code><code>$$childHead</code>Verwenden Sie ng -wiederholen Lösungen finden Sie in diesem </p>Artikel</li><li></li><li><p>使用性能测试的小工具去挖掘你的angular性能问题，我们可以使用简单的<code>console.time()</code>也可以借助开发者工具以及<a href="https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en" rel="nofollow noreferrer" target="_blank">Batarang</a></p></li></ul><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>console.time(&quot;TimerName&quot;); //your code console.timeEnd(&quot;TimerName&quot;);</pre><div class="contentsignin">Nach dem Login kopieren</div></div><h3 id="你认为在Angular中使用jQuery好么">9. 你认为在Angular中使用jQuery好么？</h3><p>这是一个开放性的问题，尽管网上会有很多这样的争论，但是普遍还是认为这并不是一个特别好的尝试。其实当我们学习Angular的时候，我们应该做到从0去接受angular的思想，数据绑定，使用angular自带的一些api，合理的路由组织和，写相关指令和服务等等。angular自带了很多api可以完全替代掉jquery中常用的api，我们可以使用<code>angular.element</code>，<code>$http</code>,<code>$timeout</code>,<code>ng-init</code>等。</p><p>我们不妨再换个角度，如果业务需求，而对于一个新人（比较熟悉jQuery）的话，或许你引入jQuery可以让它在解决问题，比如使用插件上有更多的选择，当然这是通过影响代码组织来提高工作效率，随着对于angular理解的深入，在重构时会逐渐摒弃掉当初引入jquery时的一些代码。(?Po主就是这样的人，希望不要被嘲笑，业务却是赶着走)</p><p>所以我觉得两种框架说完全不能一起用肯定是错的，但是我们还是应该尽力去<strong>遵循angular的设计</strong>。</p><h3 id="如何进行angular的单元测试">10. 如何进行angular的单元测试</h3><p>我们可以使用karam＋jasmine 进行单元测试,我们通过ngMock引入angular app然后自行添加我们的测试用例。<br/>一段简单的测试代码：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>describe(&amp;#39;calculator&amp;#39;, function () { beforeEach(module(&amp;#39;calculatorApp&amp;#39;)); var $controller; beforeEach(inject(function(_$controller_){ $controller = _$controller_; })); describe(&amp;#39;sum&amp;#39;, function () { it(&amp;#39;1 + 1 should equal 2&amp;#39;, function () { var $scope = {}; var controller = $controller(&amp;#39;CalculatorController&amp;#39;, { $scope: $scope }); $scope.x = 1; $scope.y = 2; $scope.sum(); expect($scope.z).toBe(3); }); }); });</pre><div class="contentsignin">Nach dem Login kopieren</div></div></p> <p><span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span></p> <p>关于测试，大家可以看下<a href="http://www.jackpu.com/yi-shi-yong-karmajin-xing-angularce-shi/" rel="nofollow noreferrer" target="_blank">使用karma进行angular测试</a></p> <p>除了<strong>Karam</strong> , Angular.js团队推出了一款e2e(end-to-end)的测试框架<a href="https://github.com/angular/protractor" rel="nofollow noreferrer" target="_blank">protractor</a></p> <h3 id="参考">参考</h3> <ul> <li><p><a href="https://www.toptal.com/angular-js/interview-questions" rel="nofollow noreferrer" target="_blank">11 Essential AngularJS Interview Questions</a></p></li> <li><p><a href="http://www.alexkras.com/11-tips-to-improve-angularjs-performance/#bind-once" rel="nofollow noreferrer" target="_blank">11 Tips to Improve AngularJS Performance</a></p></li> <li><p><a href="http://www.williambrownstreet.net/blog/2013/07/angularjs-my-solution-to-the-ng-repeat-performance-problem/" rel="nofollow noreferrer" target="_blank">AngularJS: My solution to the ng-repeat performance problem</a></p></li> <li><p><a href="https://www.codementor.io/angularjs/tutorial/angularjs-interview-questions-sample-answers" rel="nofollow noreferrer" target="_blank">29 AngularJS Interview Questions – Can You Answer Them All?</a></p></li> <li><p><a href="https://www.ng-book.com/p/The-Digest-Loop-and-apply/" rel="nofollow noreferrer" target="_blank">The Digest Loop and $apply</a></p></li> <li><p><a href="http://stackoverflow.com/questions/14050195/angularjs-what-is-the-difference-between-and-in-directive-scope" rel="nofollow noreferrer" target="_blank">What is the difference between '@' and '=' in directive scope</a></p></li> <li><p><a href="https://docs.angularjs.org/api/ng/service/%24compile#directive-definition-object" rel="nofollow noreferrer" target="_blank">Angular compile</a></p></li> </ul> <blockquote><p>相关推荐：<a href="https://www.php.cn/course.html" target="_blank">编程教学</a></p></blockquote> </li> </ul>

Das obige ist der detaillierte Inhalt von10 eckige Interviewfragen, die von fröhlich bis traurig reichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!