• “Es2015-es2018” Rest/Spread Properties combing
• 3. Js concept review
• Firefox UPDATE supports CSS Grids animation
• Change the position of the Node.js project
• WebView & JS Bridge Notes

“Es2015-es2018” Rest/Spread Properties combing

The 9th edition of the ECMAScript standard, officially known as ECMAScript 2018 (or ES2018 for short), was released in June 2018. Starting in ES2016, a new version of the ECMAScript specification has been released each year, but with fewer features than the previous major version. The latest version released four new RegExp, Rest/Spread attribute, Asynchronous Iteration, Promise. Prototype. Finally. In addition, ES2018 removes syntactic restrictions on escape sequences from tag templates.

Here we take a look at Rest/Spread Properties.

Spread

A very interesting feature in ES2015 is the Spread operator. This operator makes copying and merging arrays simpler. We no longer need to use concat() or slice() methods, a… The operator is sufficient:

const arr1 = [10.20.30];

// make a copy of arr1
const copy = [...arr1];

console.log(copy);    // → [10, 20, 30]

const arr2 = [40.50];

// merge arr2 with arr1
const merge = [...arr1, ...arr2];

console.log(merge);    // → [10, 20, 30, 40, 50]
Copy the code

Not only that, but we can also pass arrays as arguments to a function that needs to pass arguments individually.

const arr = [10.20.30]

// equivalent to
// console.log(Math.max(10, 20, 30));
console.log(Math.max(... arr));/ / - > 30
Copy the code

In ES2018, this syntactic sugar is further extended to include scenarios where object properties are expanded and copied. In fact, this feature has been used in projects since quite early on:

const obj1 = {
  a: 10.b: 20
};

constobj2 = { ... obj1,c: 30
};

console.log(obj2);    // → {a: 10, b: 20, c: 30}
Copy the code

In the code above… The operator is used to get the properties of obj1 and assign them to obj2. Prior to ES2018, doing so would have thrown an exception. If there are several attributes of the same key, the postassigned or generated attribute is selected:

const obj1 = {
  a: 10.b: 20
};

constobj2 = { ... obj1,a: 30
};

console.log(obj2);    // → {a: 30, b: 20}
Copy the code

Of course, we can also use extended attributes to merge two or more objects. We can also do this with object.assign () :

const obj1 = {a: 10};
const obj2 = {b: 20};
const obj3 = {c: 30};

// ES2018
console.log({... obj1, ... obj2, ... obj3});// → {a: 10, b: 20, c: 30}

// ES2015
console.log(Object.assign({}, obj1, obj2, obj3));    // → {a: 10, b: 20, c: 30}
Copy the code

Interestingly, though, extension attributes don’t always produce the same results as object.assign (). Let’s look at the following scenarios:

Object.defineProperty(Object.prototype, 'a', {
  set(value) {
    console.log('set called! '); }});const obj = {a: 10};

console.log({... obj});/ / - > {10} a:

console.log(Object.assign({}, obj));    
/ / - > set called!
/ / - > {}
Copy the code

Object.assign() executes integrated setter properties, while extension operations ignore setters.

It is worth noting that extended properties only copy enumerable properties. In the following example, the Type attribute does not appear in the copied object because its Enumerable attribute is set to false.

const car = {
  color: 'blue'
};

Object.defineProperty(car, 'type', {
  value: 'coupe'.enumerable: false
});

console.log({... car});/ / - > {color: blue ""}

Copy the code

Of course, even an Enumerable property is ignored:

const car = {
  color: 'blue'
};

const car2 = Object.create(car, {
  type: {
    value: 'coupe'.enumerable: true,}});console.log(car2.color);                      / / to blue
console.log(car2.hasOwnProperty('color'));    / / to false

console.log(car2.type);                       / / to coupe
console.log(car2.hasOwnProperty('type'));     / / to true

console.log({... car2});/ / - > {type: "coupe}"
Copy the code

In the code above, car2 inherits the color attribute from Car1. Because the extension operation only copies the attributes of the object itself, color is not included in the returned value.

One thing to keep in mind is that an extension operation makes a shallow copy of an object. If an attribute is itself an object, then the extension operation copies only the reference to that object:

const obj = {x: {y: 10}};
constcopy1 = {... obj};constcopy2 = {... obj};console.log(copy1.x === copy2.x);    / / to true
Copy the code

The x property in COPY1 references the same object in memory as the X property in copy2, so the strictly equal operator returns true.

Rest

Another useful feature introduced in ES2015 is Rest Parameters, which allow us to use… To return some values as an array. Here’s an example:

const arr = [10.20.30];
const [x, ...rest] = arr;

console.log(x);       / / - 10
console.log(rest);    / / - > [20, 30]
Copy the code

Here, the first term of arR is assigned to X, and the rest is copied to REST. This pattern is called Array destructuring, which became very popular after the Ecma Technical Committee decided to bring it to objects:

const obj = {
  a: 10.b: 20.c: 30
};

const{a, ... rest} = obj;console.log(a);       / / - 10
console.log(rest);    // → {b: 20, c: 30}
Copy the code

In this code, we copy enumerable properties structurally and copy them into the new object. Note that the REST attribute always appears at the end of the object, otherwise an exception will be thrown:

const obj = {
  a: 10.b: 20.c: 30
};

const{... rest, a} = obj;// → SyntaxError: Rest element must be last element
Copy the code

It is also important to note that using more than one REST in the same object also results in an error, unless the REST is nested:

const obj = {
  a: 10.b: {
    x: 20.y: 30.z: 40}};const {b: {x, ... rest1}, ... rest2} = obj;// no error

const{... rest, ... rest2} = obj;// → SyntaxError: Rest element must be last element
Copy the code

compatibility

Chrome	Firefox	Safari	Edge
60	55	11.1	No

Chrome Android	Firefox Android	iOS Safari	Edge Mobile	Samsung Internet	Android Webview
60	55	11.3	No	8.2	60

The compatibility of Node.js is as follows:

• 8.0.0 (requires — Harmony runtime flag)
• 8.3.0 (Fully supported)

Source address: css-tricks.com/new-es2018-…

3. Js concept review

Three.js is a 3D engine that runs in a browser and allows you to create various 3D scenes. Today we are going to do some preliminary study and combing on this part.

compatibility

Three. Js is packaged based on WebGL, so its compatibility is determined by the compatibility of WebGL in different browsers. The compatibility of WebGL is as follows:

As you can see, WebGL compatibility is pretty good.

WebGL 2, however, is less compatible,

As you can see, Safari support for WebGL 2 is not very good, and the popular tensorflow. js browser version is based on WebGL 2, so tensorflow. js is a bit weak on Safari.

Small tools

Along the way, I found a great tool for viewing WebGL 1.0/2.0 support in your current browser.

Conceptual points and relationship sorting

Firefox UPDATE supports CSS Grids animation

The CSS Grids can now be animated in Firefox UPDATE Nightly (66). Watch the videos and the Grids look pretty cool.

This effect can be achieved using CSS animations, grid-template-columns and grid-template-rows, as shown here.

Source address: twitter.com/jensimmons/…

Change the position of the Node.js project

The usual node.js project pose

Normally we would use NPM to start a new Node.js project:

$ npm init
Copy the code

NPM then asks a series of questions and generates package.json based on our answers. And then what? We inevitably copy and paste a.gitignore template from some repository on Github to use. Of course, if we’re working on an open source project, we also need to include some LICENSE files that state the protocol we’re using.

But that would be so inefficient! Can you really stand it if you do it all the time?

A more efficient way

I saw this post on Twitter this week:

These four instructions are enough to do all of the things I do manually, and more, and we’re ready to create a project. Here’s how each of the four works:

• NPX License MIT uses the license package to download the corresponding options of the protocol. In this example, MIT is the protocol.

• NPX Gitignore node uses the Gitignore package to automatically download the corresponding.gitignore file from the GitHub repository.

• NPX CovGen uses the Covgen package to generate Contributor covens.

• NPM init -y automatically selects the default options for those questions that NPM init asks.

The customnpm init

Yes, NPM supports some custom configurations. We can see the configuration of NPM by typing NPM config list on the command line. If you only want to see configuration items related to NPM init, you can use grep:

npm config list | grep init
Copy the code

I can set many default configurations: author name, author email, author URL, license, and version. To set them, you can either type the following statement on the command line or use NPM config Edit to open the configuration file in a text editor. Using the command line is simple, you can set all five defaults:

npm set init.author.name "Your name"
npm set init.author.email "[email protected]"
npm set init.author.url "https://your-url.com"
npm set init.license "MIT"
npm set init.version "1.0.0"
Copy the code

When you have a custom configuration, NPM init-y will generate the desired configuration directly.

The last

This way you can change your position to start a Node project.

Source ADDRESS: philna.sh/blog/2019/0…

WebView & JS Bridge Notes

This post is a summary of some of the documents and blog notes.

What is a WebView

To answer this question, Google the official developer documentation and see what it says:

To sum it up, a WebView is a View that presents a page. It can be seen that Android.webkit. WebView inherits from Android.view.view. As long as you have touched some native things, you can roughly know that it is similar to div. The View itself is the base class for widgets, which are components used to create interactive UIs (buttons, text fields, and so on).

So what can a WebView do?

First of all, WebView only allows you to display web content in the app’s interface, but it doesn’t have the full functionality of a normal browser, such as navigation controls and the address bar. Of course, WebViews allow developers to embed Web pages in apps, which is a good model in some scenarios.

Secondly, you can use some native technologies to provide some Bridges for WebView to obtain some native capabilities, which is commonly referred to as JS Bridges. But the reality is always harsh, and we can take a look at this:

Domestic mobile phone manufacturers of basic comes with the browser in factory, see the system application, found no built-in com. Android. Webview or com. Google. Android. Webview package, these browsers are not simply set a webview layer of shell, But directly using the Chromium kernel, as for whether the magic changed the kernel source, unknown. Domestic produced browser, such as 360 browser, QQ browser, UC browser, almost all magic changed the core. It is worth mentioning that Tencent produced the X5 kernel, known as the page rendering fluency is higher than the native kernel, the client to reduce the WebView pit at the same time, increased the front-end adaptation of the difficulty, function implementation needs to have more consideration.

JS Bridge fundamentals

JS Bridge is a module (library/component) designed to support communication between JavaScript and Native. With JS Bridge, we can use some of the capabilities provided by Native in WebView.

JavaScript can invoke native in three ways: injection mapping, interception schema, and interception method.

Take Android as an example to explain the following two ideas:

1. How to inject a mapping class:

// Define the Java interface object
public class SDK extends Object {
    @JavascriptInterface
    public void hello(String msg) {
        System.out.println("Hello World"); }}/ / call the Webview
WebView webview = (WebView) findViewById(R.id.webview);
webview.addJavascriptInterface(new SDK(), 'sdk');
webview.loadUrl('http://imnerd.org'); // Load the page after injection
Copy the code

As you can see that the addJavascriptInterface method defines the mapping, we can execute the native method via sdK.hello (). There are security issues with this method, however, and this is for demonstration only.

For comparison, let’s look at iOS, which means the same thing:

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    self.jsContext[@"hello"] = ^ () {NSLog(@"Hello World");
    };
}
Copy the code

2. Interception of schemas:

This method is easy for us to understand. We can specify the URL schema. When a URL jump occurs, if the schema matches the convention, the client will intercept the corresponding operation.

3. The way a method is intercepted

Some of the JS methods trigger callbacks in the client when executed, so the corresponding client code can be executed by identifying front-end parameters. Currently, there are four front-end methods to trigger the corresponding callback method:

JS method	Android client callback	Description iOS client callback
alert	onJsAlert	runJavaScriptAlertPanelWithMessage
prompt	onJsPrompt	runJavaScriptTextInputPanelWithPrompt
confirm	onJsConfirm	runJavaScriptConfirmPanelWithMessage

Reference Address:

Developer.android.com/reference/a… Juejin. Cn/post / 684490… Juejin. Cn/post / 684490… 75 team.com/post/androi…

The “Daily Glance” is a distillation of daily industry dynamics within the team, and the release time may be slightly delayed.

The article can be reproduced at will, but please keep this link to the original text.

Please send your resume to caijun. HCJ (at)alibaba-inc.com.