分类 JavaScript 相关 下的文章

<Exploring ES6> 读书笔记 - Variables and scoping

  1. var is function-scoped, let is block-scoped; //for (const x of ['a', 'b']) {} is ok

  2. let/const 有emporal dead zone (TDZ), 其实这和Java生命使用变量一直, 未声明前不可用. 但var声明但变量一旦进入这个变量声明但function, 即使还没到声明这行代码, 但是这个变量已经有了, 并且赋值为 undefined;

    let tmp = true;
    if (true) { // enter new scope, TDZ starts
    // Uninitialized binding for tmp is created
    console.log(tmp); // ReferenceError

     let tmp; // TDZ ends, `tmp` is initialized with `undefined`
     console.log(tmp); // undefined
    
     tmp = 123;
     console.log(tmp); // 123
    

    }
    console.log(tmp); // true
    例子2

    if (true) { // enter new scope, TDZ starts
    const func = function () {
    console.log(myVar); // OK!
    };

     // Here we are within the TDZ and
     // accessing `myVar` would cause a `ReferenceError`
    
     let myVar = 3; // TDZ ends
     func(); // called outside TDZ
    

    }

  3. always use const, let, 避免 var

<exploring ES6> 读书笔记 - Core ES6 features

  1. From var to const/let;

  2. From IIFEs(Immediately-Invoked Function Expression) to blocks;

  3. From concatenating strings to template literals -> ``;

  4. From function expressions to arrow functions, array function没有this;

  5. Handling multiple return values
    --Multiple return values via arrays //const [, year, month, day] = [0, 2012, 2, 2]
    --Multiple return values via objects //const {foo, bar} = {'foo':'full', 'bar':3, 'name':'eric'}

  6. From for and forEach() to for-of;

  7. Handling parameter default values -> function foo(x=0, y=0) {};

  8. From arguments to rest parameters (变长参数) foo(...args);

  9. 通过spread operator (...) 去把Array 变成非数组序列;

  10. From function expressions in object literals to method definitions;

    var obj = {
    foo: function () {
    ···
    },
    bar: function () {
    this.foo();
    }, // trailing comma is legal in ES5
    }

to

const obj = {
    foo() {
        ···
    },
    bar() {
        this.foo();
    },
}
  1. 使用 class 和 extend 定义类和继承关系

    class Employee extends Person {}

  2. From custom error constructors to subclasses of Error

    class MyError extends Error {}

  3. From objects to Maps;

  4. String 和 Array 新方法;

<exploring ES6> 读书笔记

About ECMAScript 6

  1. ECMA = European Computer Manufacturers Association, 是一个致力于信息和通讯标准化的组织. 更多信息

  2. ES6 = ECMAScript 6 是一个脚本语言规范. 最早是用来规范JavaScript的, 现如今JavaScript也是这个规范最好的实现.其它实现比如 JScript 和 ActionScript. 更多信息,比如ECMAScript 2015, ECMAScript 2016, ECMAScript 2017, ECMAScript 2018, 参见 wiki

  3. ES6 compatibility table

  4. ECMAScript 由TC39 (Ecma Technical Committee 39)委员会制定,它主要由大的浏览器厂商组成;

  5. ES6 亦 ECMAScript 2015 是多年后憋的一个大的release, 之后的ECMAScript 2016,等每年都会发布一些新的小更新;

  6. JavaScript是Oracle(从Sun继承而来)的一个商标,所以 JavaScript的官方名称是ECMAScript.

  7. 围绕 JavaScript 有: 1) JavaScript规范,即 ECMAScript 2015,2016,...; 2)JavaScript的Engine, 即规范实现者, 如V8; 3)JavaScript的使用者, 即应用开发人员;

  8. ES6是ES5的超集, 没有移除任何feature. 为什么? 难以控制的升级, 老旧代码,世界各地的各种不同的浏览器

  9. ES6的主要的features分类
    a. 更好的语法 如: Class, Module;
    b. 标准库的新功能, 如: Strings, Arrays, Promise, Map, Set;
    c. 新feature, 如: Generator, Proxy, WeakMap;

  10. Strict mode was introduced in ECMAScript 5 to clean up the language.

    'use strict';

The bodies of modules and classes are implicitly in strict mode in ECMAScript 6 – there is no need for the 'use strict' marker. Given that virtually all of our code will live in modules in the future, ECMAScript 6 effectively upgrades the whole language to strict mode.

动态加载JS 动态添加CSS 转换页面DIV 为pdf

动态加载JS

function loadScript(scriptUrl, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = scriptUrl;
    document.head.appendChild(script);
    callback();
}

loadScript("https://code.jquery.com/jquery-3.3.1.min.js", function() {
    console.log("loading script");
    setTimeout(function () {
        console.log("loading done");
            //部分DIV 变为整个页面
        $("body").html($('#sbo-rt-content').wrap('<p/>').parent().html());
            //动态添加CSS
        $(document.head).append(`<style>
            @media print {
                #sbo-rt-content {
                    background-color: white;
                    height: 100%;
                    width: 100%;
                    position: fixed;
                    top: 0;
                    left: 0;
                    margin: 0;
                    padding: 15px;
                    font-size: 14px;
                    line-height: 18px;
                }
            }
        </style>`);
            //打印
        window.print();
    }, 3000);
});

chrome extension: Run Your JavaScript

Run Your JavaScript is a chrome extension, with it you can build your chrome extension features.

what's it?
it is a chrome extension to run your own Javascript with extension's advantages.

why use it?

  1. it can simplify your development. Normally you access third party APIs in your web server by given user name or token, and your web page call your web server API, but with this extension, you can call third party APIs on chrome, like web page access them, no need extra user name & token, just login on third party web page;
  2. use chrome proxy automatically, especially with 2FA authentication proxy.
  3. Access 3rd party API without Cross-Origin Resource Sharing issue.

how use it?
write your Javascript and put it on your web server, then put the Javascript link in this extention, and give it a name, then you can expect it to run.

is it safe?
Yes, it is absolutely safe, you can view all the source code on github;

source code:
https://github.com/manecocomph/RunYourJavaScript

find it in chrome store: https://chrome.google.com/webstore/detail/run-your-javascript/aiokpplkfhfbijcmbpgpbomigegncfab