search

xgqfrms / FEIQA

FEIQA: Front End Interviews Question & Answers
https://feiqa.xgqfrms.xyz
MIT License
7 stars 0 forks source link

js json string to object #49

Open xgqfrms opened 6 years ago

xgqfrms commented 6 years ago

js json string to object

https://stackoverflow.com/questions/9036429/convert-object-string-to-json

image

const json = {
    "status": 200,
    "success": true,
    "message": null,
    "data": "{\n  version: '1.0',\n  defaultSchema: 'root',\n  schemas: [\n    {\n      name: 'root',\n      cache:'false',\n      type: 'custom',\n      factory: 'org.gil.sydb.server.schema.BaseSchemaFactory',\n      operand: {\n           tables:['*']\n      }\n    },\n    {\n      name: 'news',\n      type: 'custom',\n      factory: 'org.gil.sydb.server.schema.BaseSchemaFactory',\n      operand: {\n       tables:['MockTable']\n      }\n    }\n  ]\n}\n"
};

let str = `${json.data}`;

JSON.parse(JSON.stringify(eval(`(${json.data})`)));

image

https://stackoverflow.com/questions/45015/safely-turning-a-json-string-into-an-object

xgqfrms commented 6 years ago

JSON5

https://json5.org/ https://github.com/json5/json5

https://github.com/json5/json5#json5stringify


<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="xgqfrms">
    <meta name="generator" content="VS code">
    <title>JSON5</title>
</head>

<body>
    <section>
        <h1>
            <a href="https://feiqa.xgqfrms.xyz/index.html"></a>
        </h1>
    </section>
    <!-- libs -->
    <!-- <script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script> -->
    <script src="./libs/json5.min.js"></script>
    <script type="module">
        // const JSON5 = require('json5'); 
        import * as JSON5 from "./libs/json5.min.js";
        // JSON5.stringify(value[, replacer[, space]]);
        // JSON5.stringify(value[, options]);
    </script>
</body>

</html>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON

xgqfrms commented 6 years ago

https://github.com/json5/json5/issues/187

https://cdnjs.cloudflare.com/ajax/libs/json5/0.5.1/json5.min.js https://stackoverflow.com/questions/9036429/convert-object-string-to-json/48580882#48580882

xgqfrms commented 6 years ago

shit json string

image

OK

JSON5

image

xgqfrms commented 6 years ago

https://crockford.com/javascript/ https://www.crockford.com/

xgqfrms commented 6 years ago

input & change

https://developer.mozilla.org/en-US/docs/Web/Events/change

https://www.w3schools.com/tags/ev_onchange.asp

Set custom HTML5 required field validation message

https://github.com/xyz-data/RAIO/issues/176

oninvalid & this.setCustomValidity()

https://stackoverflow.com/questions/13798313/set-custom-html5-required-field-validation-message/41239756#41239756

xgqfrms commented 6 years ago

image

ContentEditable

https://html5demos.com/contenteditable/

https://www.w3schools.com/Tags/att_global_contenteditable.asp

http://html5doctor.com/the-contenteditable-attribute/

http://www.developerdrive.com/2012/06/allowing-users-to-edit-text-content-with-html5/

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

xgqfrms commented 6 years ago

Q: How to disable the Ace editor edit?

A: editor.setReadOnly(true);

https://stackoverflow.com/questions/24757506/how-to-disable-in-ace-editor-the-selection

https://github.com/ajaxorg/ace/issues/406#issuecomment-425603533

xgqfrms commented 6 years ago

Ace & web code editor

https://cdn.xgqfrms.xyz/web-ide/ace.js

bug

relative path & reference bug

image


importScripts('https://cdn.xgqfrms.xyz/web-ide/worker-javascript.js');
xgqfrms commented 6 years ago

https://github.com/xgqfrms-GitHub/ace https://github.com/xgqfrms/cdn/tree/gh-pages/web-ide

https://cdn.xgqfrms.xyz/web-ide/index.html

xgqfrms commented 6 years ago

solution 1

new instance & open Modal

solution 2

API

https://ace.c9.io/#api=editor&nav=api

https://ace.c9.io/api/editor.html

editor.setValue(initial_value); & editor.getValue(); & editor.setReadOnly(true);


    let editor = ace.edit("editor");
    // editor.setReadOnly(true);
    editor.setTheme("ace/theme/monokai");
    editor.session.setMode("ace/mode/javascript");
    const ace_content = document.querySelector(`.ace_content`);
    const ace_box = document.querySelector(`#editor`);
    let initial_html = ``;
    let initial_text = ``;
    let initial_value = ``;
    const showText = () => {
        let text = ace_content.innerText;
        console.log(`text =\n`, text);
    };
    let edit_btn = document.querySelector(`[data-btn="edit"]`),
        save_btn = document.querySelector(`[data-btn="save"]`),
        cancel_btn = document.querySelector(`[data-btn="cancel"]`);
    edit_btn.addEventListener(`click`, () => {
        editor.setReadOnly(false);
        initial_html = ace_box.innerHTML;
        // initial_html = ace_content.innerHTML;
        initial_text = ace_content.innerText;
        initial_value = editor.getValue();
        // console.log(`initial_html =\n`, initial_html);
        console.log(`initial_text =\n`, initial_text);
        console.log(`initial_value =\n`, initial_value);
    });
    save_btn.addEventListener(`click`, () => {
        // update data
        initial_html = ace_box.innerHTML;
        // initial_html = ace_content.innerHTML;
        initial_text = ace_content.innerText;
        initial_value = editor.getValue();
        showText();
        editor.setReadOnly(true);
    });
    cancel_btn.addEventListener(`click`, () => {
        // ace_box.innerHTML = initial_html;
        // ace_content.innerHTML = initial_html;
        // ace_box.innerText = initial_text;
        editor.setValue(initial_value);
        // editor.setValue(initial_text);
        // editor.undo();
        editor.setReadOnly(true);
        // editor.destroy();
    });
xgqfrms commented 6 years ago

<meta name="renderer" content="webkit">


<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="author" content="xgqfrms">
    <meta name="generator" content="VS code">
    <title>ACE in Action</title>
    <style type="text/css" media="screen">
        #editor {
            /* position: absolute; */
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        #editor {
            width: 500px;
            height: 300px;
        }
    </style>
</head>

<body>
    <section>
        <h1>
            <a href="https://feiqa.xgqfrms.xyz/index.html"></a>
        </h1>
    </section>
</body>

</html>
xgqfrms commented 6 years ago

ACE in Action

https://cdn.xgqfrms.xyz/web-ide/index.html

xgqfrms commented 6 years ago

Reconstruct mouse target for focusin from recent event.

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent http://www.octodecillion.com/javascript-focus-event-has-wrong-target/

xgqfrms commented 6 years ago

Chrome Headless

使用 Chrome Headless 模式将 HTML 转 PDF

https://blog.csdn.net/hochenchong/article/details/80357504

xgqfrms commented 6 years ago

how to get fetch response header in fecth api

https://stackoverflow.com/questions/43344819/reading-response-headers-with-fetch-api

image

how to get ajax response header in js

https://www.yukei.net/2016/01/getting-response-headers-data-from-an-ajax-request-with-jquery/ https://stackoverflow.com/questions/1557602/jquery-and-ajax-response-header

xhr.getResponseHeader('Header')

xgqfrms commented 6 years ago

https://www.cnblogs.com/xgqfrms/p/9724866.html


let url = `http://localhost:9000/api/render`,
    obj = {
        url: "https://developer.mozilla.org/en-US/docs/Web/CSS/calc",
        output: "pdf",
        // scrollPage: true,
        // pdf: {
        //     landscape: true,
        // },
        // output: "screenshot",
        ignoreHttpsErrors: true,
    };
fetch(url,
    {
        method: "POST",
        mode: "cors",
        headers: {
            "Content-Type": "application/json; charset=utf-8",
        },
        body: JSON.stringify(obj),
    })
    .then(res => {
        let headers = res.headers;
        headers.forEach(
            (value, key) => {
                console.log(`response header =`, `${key} = ${value}`);
                // console.log(`response header =`, key, value);
            }
        );
        // console.log(`response headers =`, headers);
        return res.blob();
    })
    .then(blob => {
        // base64
        let objectURL = URL.createObjectURL(blob);
        let a = document.createElement(`a`);
        a.href = objectURL;
        console.log(`a =`, a);
        // let title = document.querySelector(`title`).innerText;
        let title = `test`;
        // png
        // a.setAttribute(`download`, `${title}.png`);
        // pdf
        a.setAttribute(`download`, `${title}.pdf`);
        a.click();
    })
    .catch((err) => {
        console.log(`There has been a problem with your fetch operation: `, err);
    });

url-to-pdf-ap

https://github.com/alvarcarto/url-to-pdf-api#2-local-development

xgqfrms commented 6 years ago

css & no margin

no header & no footer

https://stackoverflow.com/questions/46077392/additional-options-in-chrome-headless-print-to-pdf

@page {
    margin: 0;
}

@page {
    margin-top: 0;
}

@page {
    margin-bottom: 0;
}
xgqfrms commented 6 years ago

no CORS

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=D:\chrome

image

xgqfrms commented 6 years ago

media & print.css

image


url = `http://localhost:9000/api/render`,
    obj = {
        url: "http://10.1.5.202/stock/f9/fastview/index.html",
        output: "pdf",
        scrollPage: true,
        pdf: {
            landscape: true,
        },
        emulateScreenMedia: true,
        // output: "screenshot",
        ignoreHttpsErrors: true,
    };

fetch(url,
    {
        method: "POST",
        mode: "cors",
        headers: {
            "Content-Type": "application/json; charset=utf-8",
        },
        body: JSON.stringify(obj),
    })
    .then(res => res.blob())
    .then(blob => {
        // base64
        let objectURL = URL.createObjectURL(blob);
        let a = document.createElement(`a`);
        a.href = objectURL;
        let title = `test`;
        // png
        // a.setAttribute(`download`, `${title}.png`);
        // pdf
        a.setAttribute(`download`, `${title}.pdf`);
        a.click();
    })
    .catch((err) => {
        console.log(`There has been a problem with your fetch operation: `, err);
    });
xgqfrms commented 6 years ago

puppeteer api

https://github.com/GoogleChrome/puppeteer https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md

https://zhaoqize.github.io/puppeteer-api-zh_CN/#/

https://www.sitepen.com/blog/2017/10/04/browser-automation-with-puppeteer/

https://www.santoshsrinivas.com/puppeteer-api-to-control-headless-chrome/ https://puppet.com/docs/puppet/5.3/http_api/http_api_index.html

https://medium.com/@anephenix/end-to-end-testing-single-page-apps-and-node-js-apis-with-cucumber-js-and-puppeteer-ad5a519ace0

xgqfrms commented 6 years ago

https://github.com/GoogleChrome/puppeteer/issues/1908

https://stackoverflow.com/questions/44575628/alter-the-default-header-footer-when-printing-to-pdf

image

xgqfrms commented 6 years ago

https://url-to-pdf-api.herokuapp.com/api/render?emulateScreenMedia=false&url=http://123.66.45.789/stock/f9/fastview/index.html

外网

only out internet can be access & print pdf

xgqfrms commented 6 years ago

puppeteer api node

image image

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md https://github.com/GoogleChrome/puppeteer/issues/1908

https://zhaoqize.github.io/puppeteer-api-zh_CN/#/ https://zhaoqize.github.io/puppeteer-api-zh_CN/#/class-Page

https://mydev.app/ https://github.com/umaar/puppeteer-sitepen-contact-example/blob/master/index.js

xgqfrms commented 6 years ago

http://hehaibao.github.io/lottery2/index.html

xgqfrms commented 6 years ago

https://github.com/cd-dongzi/vue-node-blog http://dzblog.cn/article/5a78609ec153997e3417a6d4

xgqfrms commented 6 years ago

image

xgqfrms commented 6 years ago

how to disabled chrome print pdf header in css

https://stackoverflow.com/questions/11503217/css-disable-header-footer-from-print-preview-chrome

https://stackoverflow.com/questions/44575628/alter-the-default-header-footer-when-printing-to-pdf

https://bugs.chromium.org/p/chromium/issues/detail?id=603559

xgqfrms commented 6 years ago

http://productforums.google.com/d/topic/chrome/ZPK3_eHqq48 https://stackoverflow.com/questions/15041761/print-a-header-for-every-page-in-google-chrome

xgqfrms commented 6 years ago

image

highstock crosshairs

highstock 十字准星线

http://stepday.com/topic/?633


    tooltip: {
        crosshairs:[
            {
                enabled:true,//是否显示X轴标线
                width:3,//标线宽度
                color:'red' //标线颜色值
            },
            {
                enabled:true,//是否显示Y轴标线
                width:3,//标线宽度
                color:'green' //标线颜色值
            }
        ],
        style:{
            display:'none' //通过样式表控制不显示tooltip数据提示框
        }
    },
xgqfrms commented 6 years ago 

window.parent.location.href;
window.parent.location.pathname;
xgqfrms commented 6 years ago

js & throw new Error

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/throw


throw 'Error2'; // generates an exception with a string value
throw 42;       // generates an exception with the value 42
throw true;     // generates an exception with the value true
throw new Error('Required');  // generates an error object with the message of Required

https://stackoverflow.com/questions/9156176/what-is-the-difference-between-throw-new-error-and-throw-someobject

http://www.javascriptkit.com/javatutors/trycatch2.shtml https://humanwhocodes.com/blog/2009/03/10/the-art-of-throwing-javascript-errors-part-2/

https://www.w3schools.com/js/js_errors.asp

xgqfrms commented 6 years ago

PhantomJS

http://phantomjs.org/ https://github.com/Medium/phantomjs

https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-windows.zip

image

http://phantomjs.org/download.html https://www.howtogeek.com/118594/how-to-edit-your-system-path-for-easy-command-line-access/