blog
blog copied to clipboard
JesseZhao1990
learing summary
对于react这样的巨型项目来说，不了解其设计思路，直接钻到海量代码里，最终的结果就是消磨兴趣，从入门到放弃。我个人觉得阅读大型项目源码的思路应该是首选用google搜索一下react源码解析。大体了解react的设计思路，然后再把源代码克隆下来，通过readme了解源码的组织形式，最后亲自debug。 本文就具体解释一下如何debug react的源码。 1. 首先把react源码克隆到本地。这里有一个小建议，那就是去阅读最新版的代码，因为react最新版本的代码组织结构更清晰，更易读。之前版本用的是gulp和grunt打包工具。仅项目的各种引用关系都理的让人头疼。源码结构可以先读一下官方文档的说明：https://reactjs.org/docs/codebase-overview.html 2. 利用create-react-app创建一个自己的项目 3. 把react源码和自己刚刚创建的项目关联起来。到react源码的目录下运行yarn build。这个命令会build源码到build文件夹下面，然后cd到react文件夹下面的build文件夹下。里面有node_modules文件夹，进入此文件夹。发现有react文件夹和react-dom文件夹。分别进入到这两个文件夹。分别运行yarn link。此时创建了两个快捷方式。react和react-dom。 4. cd到自己项目的目录下，运行yarn link react react-dom 。此时在你项目里就使用了react源码下的build的相关文件。如果你对react源码有修改，经过build之后，就能里面体现在你的项目里。你可以在react源码里打断点，甚至修改react源码。然后在项目里验证你的修改。 ### 调试技巧 1. 利用浏览器的开发者工具，在适当的地方打断点，进行追踪 2. 全局搜索大法 3. 充分利用console.trace，打印出函数的调用栈，分析函数的调用关系
权限的结构应该是一个树状结构，每个节点都有一个权限id，对于单页面应用来说，前端权限控制应该是从两个方面入手 * 1.根据用户拥有的权限id的集合决定用户能访问那些前端路由 * 2.根据用户拥有的权限id的集合决定用户能看到那些按钮或者模块。 第二条比较简单，可以写一个指令来决定按钮或者模块的显示与否，有坑的地方在第一条，起初的尝试是利用router.beforeEach来在每个路由加载前进行权限验证，如果有权限则进入，没有权限则到404页面，但是这样做在刷新的时候遇到了问题，由于用户的信息是存放在vuex中的，刷新的时候用户的权限信息为空，导致只要刷新就会到404页面，当然你可以把权限存放的浏览器的sessionStorage中，每次刷新并不会清空用户的权限信息，但是这样做的话，用户手动改一下sessionStorage就能看到相关的页面，确实不算是完美的方案。幸好在vue-router2.2之后的版本有个新的api叫addRouters，可以动态的添加路由。页面加载时的我们可以先初始化一个空路由，紧接着我们请求用户的权限信息，然后根本用户的权限信息筛选出来用户能访问的路由，然后利用addRouters添加到应用的路由中。完美的方案
在UI组件库的开发过程中，如何方便的展示组件，测试组件，编写文档呢？storybook就提供了这样一种工具，利用它我们可以更方便地进行UI组件开发。 https://github.com/storybookjs/storybook
1. https://github.com/teropa/build-your-own-angularjs 2. https://github.com/atwood-cai/AngularJS-/issues/1 3. https://www.imooc.com/video/4245 4. https://github.com/kuitos/kuitos.github.io/issues/4 5. https://github.com/vincenthou/vincenthou.github.io/issues/39 6. https://github.com/mgechev/angularjs-in-patterns 7. http://www.html-js.com/article/1863
https://w3c.github.io/ServiceWorker/ http://huangxuan.me/2017/07/12/upgrading-eleme-to-pwa/ https://huangxuan.me/2017/02/09/nextgen-web-pwa/ https://huangxuan.me/sw-101-gdgdf/#/ https://pwa.alienzhou.com/
正则表达式总结
## 1. 什么是正则？ Regular Expression(正则表达式)，是使用单个字符串来描述匹配一系列符合**某个语法规则**的字符串。 有一个正则表示式的可视化工具。可以直观的理解一个正则表达式的意思： https://regexper.com/ ## 2. 实例化正则表达式的方法 * 字面量 * 构造函数 **两者之前的区别和应用场景** ## 3. 正则表达式的组成 正则表达式由原义文本字符和元字符以及修饰符组成 元字符是在正则表达式中有特殊含义的非字母字符。比如： . * + ? $ ^| \ () {} []...
DOM3级还定义了自定义事件，自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。要创建的自定义事件可以由createEvent("CustomEvent"); 返回的对象有一个initCustomEvent（）方法接收如下四个参数。 1. type：字符串，触发的事件类型，自定义。例如 “keyDown”，“selectedChange”; 2. bubble（布尔值）：标示事件是否应该冒泡； 3. cancelable(布尔值)：标示事件是否可以取消； 4. detail（对象）：任意值，保存在event对象的detail属性中； 下面举例： 当点击按钮的时候，一秒钟之后会触发一个id为target的元素的自定义事件myEvent，此自定义事件发生冒泡，依次经过target，wrap和document。 实际例子在这里：https://codepen.io/zhaojianxin/pen/KRXGwo?editors=1011 ``` 点击 ``` ``` var e = document.createEvent("CustomEvent"); e.initCustomEvent("myEvent",true,false,"hello world!"); var btn = document.getElementById('btn'); btn.addEventListener('click',function(){ setTimeout(function(){...