baishusama / baishusama.github.io Goto Github PK
View Code? Open in Web Editor NEW❤️个人博客地址:baishusama.github.io
❤️个人博客地址:baishusama.github.io
auth.service
虽然是全局的服务,但其实是可以放到AuthenticationModule
的,这样更清晰(高内聚)。同理的大概有auth-guard.service
,TokenInterceptor
,CsrfTokenInterceptor
。理论上也是可以实现的,因为直接由
AppModule
imports
的模块下的服务是全局的【?】。但是,后来引入了懒加载机制,
AuthenticationModule
和ProductModule
都是懒加载进来的,所以其下的服务并不可见直到模块被懒加载【?】。所以,懒加载还有什么优缺点呢?
在 electron 打包过程中遇到了报错 Electron: jQuery is not defined
jQuery-3.3.1.skeleton.js
:/*!
* jQuery JavaScript Library v3.3.1
* https://jquery.com/
*
* Includes Sizzle.js
* https://sizzlejs.com/
*
* Copyright JS Foundation and other contributors
* Released under the MIT license
* https://jquery.org/license
*
* Date: 2018-01-20T17:24Z
*/
(function(global, factory) {
'use strict';
if (typeof module === 'object' && typeof module.exports === 'object') {
// For CommonJS and CommonJS-like environments where a proper `window`
// is present, execute the factory and get jQuery.
// For environments that do not have a `window` with a `document`
// (such as Node.js), expose a factory as module.exports.
// This accentuates the need for the creation of a real `window`.
// e.g. var jQuery = require("jquery")(window);
// See ticket #14549 for more info.
module.exports = global.document
? factory(global, true)
: function(w) {
if (!w.document) {
throw new Error(
'jQuery requires a window with a document'
);
}
return factory(w);
};
} else {
factory(global);
}
// Pass this if window is not defined yet
})(typeof window !== 'undefined' ? window : this, function(window, noGlobal) {
// Edge <= 12 - 13+, Firefox <=18 - 45+, IE 10 - 11, Safari 5.1 - 9+, iOS 6 - 9.1
// throw exceptions when non-strict code (e.g., ASP.NET 4.5) accesses strict mode
// arguments.callee.caller (trac-13335). But as of jQuery 3.0 (2016), strict mode should be common
// enough that all such attempts are guarded in a try block.
'use strict';
var arr = [];
var document = window.document;
// ...
// ...此处省略一些函数定义...
// ...
var version = '3.3.1',
// Define a local copy of jQuery
jQuery = function(selector, context) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery.fn.init(selector, context);
},
// Support: Android <=4.0 only
// Make sure we trim BOM and NBSP
rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
// ...
// ...此处一万行 jQuery 功能代码...
// ...
// Register as a named AMD module, since jQuery can be concatenated with other
// files that may use define, but not via a proper concatenation script that
// understands anonymous AMD modules. A named AMD is safest and most robust
// way to register. Lowercase jquery is used because AMD module names are
// derived from file names, and jQuery is normally delivered in a lowercase
// file name. Do this after creating the global so that if an AMD module wants
// to call noConflict to hide this version of jQuery, it will work.
// Note that for maximum portability, libraries that are not jQuery should
// declare themselves as anonymous modules, and avoid setting a global if an
// AMD loader is present. jQuery is a special case. For more information, see
// https://github.com/jrburke/requirejs/wiki/Updating-existing-libraries#wiki-anon
if (typeof define === 'function' && define.amd) {
define('jquery', [], function() {
return jQuery;
});
}
var // Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$;
jQuery.noConflict = function(deep) {
if (window.$ === jQuery) {
window.$ = _$;
}
if (deep && window.jQuery === jQuery) {
window.jQuery = _jQuery;
}
return jQuery;
};
// Expose jQuery and $ identifiers, even in AMD
// (#7102#comment:10, https://github.com/jquery/jquery/pull/557)
// and CommonJS for browser emulators (#13566)
if (!noGlobal) {
window.jQuery = window.$ = jQuery;
}
return jQuery;
});
Related:nginx 代理 404
RT 操作过后,Performance 有:
可以观察到最上面 FPS 行,每次滚动都会出现红色的长条,这说明这些帧存在严重问题
"帧存在严重问题"意味着非常差的用户体验,而我自己直观的感受是每次下滚页面都十分卡顿 :(
被测试页面是一个有 20 个 items 的 list 页面,每个 items 都有 pos, entity 等数据结构为三维数组的两个复杂属性,而这些属性处于修改的需要,被属性绑定在了页面 DOM 上。
三维数组 x 2 个属性 x 20 行
猜测可能的影响因素为:
当行数只有五行时:
可以看到 FPS 的红条变得不再连续,这说明掉帧现象得到改善!
当行数只有一行时:
可以看到 FPS 行压根儿都没出现红色,帧数状况良好!
当复杂属性只有一个时:
当没有复杂属性时:
由上可以看出, 更大程度上决定帧数状况的是行数 而非复杂属性。
虽然我们知道了,行数才是决定性因素,但是一页显示多少行是由用户决定的并不是可控的。所以,我们只能考虑在用户选择显示几十行时,怎么做到尽可能优化性能使得页面保持不掉帧。
我们很容易想到一个在行数过多时的一个解决方案----常见于无限加载列表的 virtual scroll (虚拟滚动)。
虚拟滚动的基本**是,由于屏幕高度总是有限的,对于一个无限加载的列表,我们不用真的去加载全部 items(因为这种做法毫无疑问在列表长度达到一定量级时影响用户体验),我们只需要总是显示视野内的有限的几个 items 即可。
第一步,scroll @OneTab:
class SomeClass {
windowScrollSubject = new BehaviorSubject<object>(null);
get windowScroll$() {
return this.windowScrollSubject.asObservable();
}
@HostListener('window:scroll', [])
onWindowScroll() {
this.windowScrollSubject.next(null);
}
}
第二步,scroll 的时候更新???
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.