I am working on a Flash project (network speed test) and want to use ExternalInterface.call() at each step of the way to communicate to the HTML page on what step the Flash project is right now.
The problem is that on each and every scene's Actions, I have to import ExternalInterface like so import flash.external.*; and only then does this command work ExternalInterface.call('console.log','Upload test FINISHED!');
Can anyone show me how to import ExternalInterface only once globally?
Thanks!
You cannot import it only once. Well, that is only sort-of true.
You could create a singleton instance (or a static instance) elsewhere and use that, but instead of import flash.external.ExternalInterface everywhere, you would be doing something like import myCustomClass everywhere.
Since there is no gain in doing it that way, I would suggest you just import flash.external.ExternalInterface everywhere you need it.
Related
When using autoimport feature of nuxt3:
is there any impact (types, performance, bundle-size, tree-shaking, etc..) of using the # alias to import something rather than no import at all?
Or its only purpose is to make imports explicit and maybe help to fix some IDE/linter/ts issues?
Example:
// plugins/vuetify.ts
import { createVuetify, VuetifyOptions } from "vuetify";
import { defineNuxtPlugin, NuxtApp, Plugin } from "#app"; // this line should be optional
export const VuetifyPlugin: Plugin = defineNuxtPlugin((nuxtApp: NuxtApp) => {
const vuetify = createVuetify();
nuxtApp.vueApp.use(vuetify);
});
export default VuetifyPlugin;
I wasn't aware of the # import, do you have a reference for that specifc one?
As you kinda guessed it, there are no direct benefits of making the imports yourself. In the same way that Nuxt does the job for you regarding ref, computed, watch etc, it will try to import most of the other common stuff.
The compiler will scan your file, see what you are using in your template + script part and make the import himself on runtime. It may not guess fully dynamic imports (usually for components based on a dynamic variable for example).
Still, it should work in the exact same way performance-wise.
For the types I know that there could be some limitations (not a full coverage), but since I don't use TS, I'm not well aware of all the details.
Regarding IDEs/code editors, most of the time they will work fine but some of them may require a bit of configuration to work perfectly (since it's implicit, you still need to tell your editor what is happening), otherwise some Linters may complain a bit.
Nuxt's auto import feature is probably based on something really similar (if not identical) to this: https://github.com/antfu/unplugin-auto-import
Hence, you can see in details how this one works to get more explanation.
I want to use 3rd javascript plugins in my application like Typed.js, AOS.js, mo.js or whatsoever. I still figuring out the proper way to use those 3rd plugins. Although some of them provide a great documentation, I still overwhelmed because there is just few which provide a complete example, I still newbie in Angular
I still figuring out where to put a javascript/jquery code properly in my *.component.ts file, how to import the plugin and all the things related to make the 3rd plugins work.
And also I still looking for the way to listen to the event like mouse scroll. I read about HostListener but there is no easy explanation, so I just use it without complete understanding.
Is there any thing I could read/learn to solve those problem?
You can import the .js file using
1) import * as aos from './AOS.js';
2) create a definition file index.d.ts inside 'login' folder with methods and class.
export declare class AOS{
type: any;
method1(): string;
}
3) In your component, you can import as import { AOS } from './login';
AOS.method1();
Declaration
declare module "MyModule" {
export function Foo() {...}
export function Bar() {...}
}
I just need Foo somewhere, how should I import it ?
import * as MyModule from "MyModule";
MyModule.Foo();
or
import {Foo} from "MyModule";
Foo()
Which one is better than another ? Are there any performance implications of importing all the exports in the first way?
Some references which I read before posting questions:
https://www.exratione.com/2015/12/es6-use-of-import-property-from-module-is-not-a-great-plan/
Importing only what is necessary to your code is, of course, good practice. Say someone writes some thousand-line code importing everything, and then you try to analyze it. Do you think you would easily know which functions used in your code are imported or which is not? Obviously it is dubious and bad practice.
With regards performance, I suppose not much affected.
The import {} from ... syntax makes stubbing and spying on functions very difficult and normally requires additional libraries such as rewire.js. The caveat is tree shaking doesn't work as well. I'm inclined to keep my util modules small and maybe only include 2-3 functions per module. That way I can use the import * as ... syntax for my modules and import {} ... when possible for third party modules. Thus minimising the need for tree shaking.
If you need to use only Foo, I think it's better to import just Foo. This makes your code clearer, because by looking at that import you can tell which elements of MyModule that code is using.
It doesn't affect performance, because either way you have to read/download the whole file.
Also, it doesn't matter which option you choose when using a bundler like Rollup.js―even if you import everything from MyModule, the bundle will include only things that you actually use in your code.
In case anyone is still looking for answers, i have shared my thoughts on this.
Let say you have a JSON file and you want to import the entire module as a variable then go with import *.
If you have a module with multiple exported methods (That can be 3rd party packages), then you should go with import {} approach.
Any default export should be imported as "import any name".
About a year ago I have used Meteor, and now I want to use it again, but many things have changed.
When I follow the Blaze tutorial on Meteor.com, they add imports on top of their files:
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
import { ReactiveDict } from 'meteor/reactive-dict';
I got the app working. But when I comment the imports out, the app keeps working like it should work. Why are these imports needed?
I am still using the regular Javascript, not ES6.
Thanks!
The import statement is used to import functions, objects or primitives that have been exported from an external module, another script, etc.
The name parameter is the name of the object that will receive the exported members. The member parameters specify individual members, while the name parameter imports all of them. name may also be a function if the module exports a single default parameter rather than a series of members. Below are examples to clarify the syntax.
Import an entire module's contents. This inserts myModule into the current scope, containing all the exported bindings from "my-module.js".
For more detail about the different ways we can use import along with their usage, please check this.
They still use the old globals for backwards compatibility. However it is recommended to use the imports so if in some future release they remove the globals your code will still work. You can read more in the appropriate section of the guide.
Ok you know import is to import an exported object from another file already.
The point that you may have missed is that MDG heard the need to stop loading everything by default, or at least to provide a mean to control what is loaded in memory and what is not.
Look for the /imports special directory.
Files in that folder are no longer loaded automatically, but only through import statement.
As for the tutorial, I guess they did not explained this functionality, and because it imports only standard functionalities which are still loaded eagerly for backward compatibility, it does not change anything removing those statements.
In the ember-cli documentation it describes bridging the addon within your host application by overriding the app/component/[addon-name.js] yourself. However, the documentation doesn't explicitly state how to do this.
With trial and error I've noticed that by creating a component file in your [host app]/app/component/[name of addon.js] and simply copy/paste the addon code into there provides a venue to customize the addon. However, this is a terrible approach, I would imagine that I could simply override the functions in question...and in some cases call this.super().functionName in order to keep the over-rides simple and trim.
However, I can't get this to work. Any ideas?
Extensibility is why addons have both the addon/ and app/ trees. In the app tree for a component, the component should just be an import and export, for example:
import XSelect from 'emberx-select/components/x-select';
export default XSelect;
Source: https://github.com/thefrontside/emberx-select/blob/master/app/components/x-select.js
In this kind of case you want to create the component in [host app]/app/component/[name-of-addons-component.js] then in that component do:
import XSelect from 'emberx-select/components/x-select';
export default XSelect.extend({
//any overrides
});