blog
blog copied to clipboard
JesseZhao1990
learing summary
原文：https://code.angularjs.org/1.6.10/docs/guide/scope ### scope是什么？ > Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the...
原文：https://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives/#
英文原文：https://www.codelord.net/2016/11/30/advanced-angular-1-dot-x-component-communication-with-require/ angular1.5版本中的推出了组件的概念。它隔离了scope。但是这也意味着组件间通信变的有些不那么任性，我们需要更多的思考正确的组件间通信的问题。 angular的require机制为表单组件，特别是“组件套装”提供了一种好的通信方式（这里解释一下组件套装，组件套装是需要一起使用的组件，比如平时我们使用的antd的Tabs和TabPane，再比如element ui中的el-tabs和el-tab-pane） 那么问题来了。 require可以用来做什么？ 什么情况下我们才应该使用它？ 为什么它不是通用的解决方案？ 继续往下阅读吧，答案就在下文... ### require 是怎么工作的？ require的机制在angular中早就存在，通常被用于高级指令间的通信。在组件的概念提出之前，你可能用过require让一个指令有权访问另外一个指令的controller，它可以让指令暴露出自己的api供别的指令调用。 举一个简单的在一个元素上使用require通信的例子，当你把你的校验指令挂载到一个input元素上，让其能够访问到input的ngModelController，以便修改校验器。 对于那些需要沟通的套装组件来说，访问父controller是一个常见的并且有用的特征。比如说angular的form验证的工作方式。在form中的每个input元素都可以通过随意的引入父组件的controller（ngForm）进而去更新它。通过这种方式去通知form，告知form自己是否通过了验证之类的。 正如上边你看到的一样，require是一个非常强大的机制，是angular与生俱来的一个东西。是angular的一部分。使用它，你可以让你的组件更加干净。 ### 什么情况下应该使用require，什么情况下不应该使用require呢？ 首先需要说明的是，require并不适用在所有的场景。它仅仅是用在组件/指令中，用于访问父controller或者是在和自己处于相同元素的controller。兄弟组件不能用它来通信，父组件也不能通过他来访问子组件（至少不是直接访问，继续阅读下去吧。后文会给出一个有意思的解决方案。） 还有一个对于使用require的限制，那就是使用它的时候，你必须知道子组件想引用的其他组件的名称。无法抽象， 被引用的组件的名字是以硬编码的方式写到引用它的组件中的。 并且，我也不会匆忙地用require去替换任何简单的binding。大部分的情况下，使用bindings在组件之间传递值是不错的选择，因为这样更清晰易懂，易维护。因为你只需要瞅一眼bindings，你就能大概知道这个组件的接口。 那么require在什么场景下才能发出自己的光芒呢？其实，我们在文章的开头也说过了。就是当你创建一个套装组件或者说是需要互相交互的组件家族（a family of interacting components），通过require，可以在他们之间暴露出丰富的接口，而不用再多层组件之间写大量的bindings。 ### 一个深入使用require的例子： Angular的表单（forms）...
### js中的数据类型 原始类型 string number boolean null undefined symbol 对象 Object ### 显式类型转换 显示类型转换是通过调用下面这三个函数来进行的。 * Number( ) * String( ) * Boolean( ) #### 1. Number( ) 数值： 转换之后还是数值 字符串：...
## 引言 当写一个单页面的时候，很多开发者会遇到这样的一个问题，如何懒加载模块，换句话说就是如何在用于点击某处，或者是要进入某个模块的时候，来加载这个模块相关的js，css，和html等。由于在现代前端开发的中，这将是一个巨大的JavaScript文件，所以，在这篇稳重中，我将会分享一些我自己的经验，展示一下在angularjs中如何实现懒加载模块，进而减少你的页面的初次加载时间。 ## 为什么要在AngularJS 1.x版本实现懒加载 现在你可能会有一个疑惑，为什么要在angularjs的1.X版本区实现懒加载？ 现在angular 5 都出来了。这个疑惑非常好。不过，你要知道有很多很多的项目依旧使用的是angularjs 1.x的版本，并且运行的还可能非常稳定。对于这样的项目来说。切换到新的版本不仅仅耗费人力也相当耗费财力。在市场上，angularjs1.x依旧有很高的需求。 ## Bicycles that already exist 在前端开发的世界里，对于一个同样的问题，有大量的工具和解决方案。每个人会选择一种最符合自己的需要、最符合自己已掌握的技术栈的一种方案。这不是一个坏事情，你应该接受这些现实并且继续接着开发下去。 有些人可能选择RequireJS，有些人可能选择curl.js，有些人可能选择Browserify，也有些人更偏爱XXX，XXX代表某种你更喜欢的工具。哈哈哈。不过在这篇文章中，我会给你展示如何使用Webpack, UI-Router, 和 ocLazyLoad去实现模块的懒加载，这些场景背后的逻辑都是在ocLazyLoad的帮助下实现的。如果我们想尝试着不用ocLazyLoad而仅仅使用require.ensure 来实现模块的懒加载，会出现类似下面的报错  ## 项目结构 由于我不能给出我已经实现懒加载的项目的访问权限，所以我创建了一个精简版的小项目，我尽可能把这个小项目做的简单，因此你可以可以更清晰的看到模块和模块的关系。我也把这个小项目部署到了线上，你可以在这里观察这个项目的运行机制。再往下一点点呢，是这个项目的目录结构，展示的是git仓库里的require-ensure分支和system-import分支的目录结构。对于import-es6这个分支呢，我们还会持续的改进。 ``` project-root ├── src...
### 比较下面两种写法，那种写法能捕获到错误？  
### 背景 在公司的一个项目中，最近频繁出现一个bug，点餐的过程中，不同桌台之间的数据老是串数据，最后发现是由于服务员在不同桌台之间快速切换导致的。如果网络环境不好，前几个桌台的订单数据还没回来，后几个桌台的数据已经发出，并且在前端，订单数据是封装成了一个OrderService进行管理的。也就是说前端只保存一份订单的数据。解决这个问题的方案有很多。但是改动最小又最友好的方式，应该是属于“取消请求”的方案，从A桌台切到B桌台的时候，把A桌台的请求取消。axios自带取消请求的功能，但是由于此项目使用的是angularjs，请求的service是自己封装的。所以，只能自己动手改造一下请求的service了。在改动之前，扒拉了一下axios的源码，看看axios是怎么实现的"取消请求"的。 ### axios如何使用取消请求 ``` const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('/user/12345', { cancelToken: source.token }).catch(function (thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else {...