This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.
At the forefront of
vue.draggable
| The attribute name | instructions |
|---|---|
| group | :group= “name”, the same groups can be dragged from each other |
| sort | :sort= “true”, whether to enable internal sort, if set to false, the group it belongs to cannot sort, other groups can drag sort |
| delay | :delay= “0”, how long can drag after the mouse is pressed |
| touchStartThreshold | How many pixels does it take to drag an element |
| disabled | :disabled= “true”, whether to enable drag components |
| animation | It’s still a cool, digital type of animation when you drag. For example, animation=1000 means 1-second transition animation effect |
| handle | :handle=”. Mover “Can be dragged only when the mouse is moved over a mover element in the CSS |
| filter | :filter=”. Unmover “Sets unmover style elements not to be dragged |
| draggable | :draggable=”.item” Those elements can be dragged |
| ghostClass | :ghostClass=”ghostClass” Sets the placeholder class name of the drag element, your custom style may need to add! Important takes effect and sets the forceFallback property to true |
| chosenClass | :ghostClass=”hostClass” select the target style, your custom style may need to add! Important takes effect and sets the forceFallback property to true |
| dragClass | :dragClass=”dragClass” drag element style, your custom style may need to add! Important takes effect and sets the forceFallback property to true |
| dataIdAttr | dataIdAttr: ‘data-id’ |
| forceFallback | Default false, ignore HTML5 drag behavior, because there is a property in H5 that can be dragged, you want to customize ghostClass chosenClass dragClass style, recommend that forceFallback set to true |
| fallbackClass | The default is false, the class name of the DOM element to clone |
| allbackOnBody | By default false, the cloned element is added to the body of the document |
| fallbackTolerance | Drag the px that should have been moved before |
| scroll | Default is true, there is a scroll area whether to allow drag |
| scrollFn | Scroll the callback function |
| scrollSensitivity | How far away from the scroll area, scroll the scroll bar |
| scrollSpeed | The scrolling speed |
[countup.js – Digital scroll effect]
darkmode-js
Darkmode.js implements Darkmode
Darkmode.js uses a feature in CSS called mix-blending-mode, which describes how the content of an element should be blended with the content of the element’s immediate parent and the background of the element, plus Javascript assistance to determine which elements on the page need to be blackened. Which ones don’t need to be blackened.
[Using Wavesurfer.js to draw audio waveform]
Wavesurfer. js is a customizable voice audio visualization tool, built on Web Audio and H5 Canvas
Reference the wavesurfer.js package to the project
<script src="https://unpkg.com/wavesurfer.js"></script>
Copy the codeOpen up a space for wavesurfer.js for drawing
<``div id="waveform" class="waveform"></``div``>
In the Script tag, create an instance of Wavesurfer, passing the container selector and some options
var wavesurfer = WaveSurfer.create({ container: '#waveform', waveColor: 'violet' cursorColor: '# ff0000' progressColor: '# 0000 ff'});Copy the codeLoad audio. With load() in the Wavesurfer.js method, you can pass in the audio path directly, which can be online audio
wavesurfer.load('audio.wav');
Copy the code var playPause = document.querySelector('#playPause');
playPause.addEventListener('click', function() {
wavesurfer.playPause();
});
wavesurfer.on('play', function() {
document.querySelector('#play').style.display = 'none';
document.querySelector('#pause').style.display = '';
});
wavesurfer.on('pause', function() {
document.querySelector('#play').style.display = '';
document.querySelector('#pause').style.display = 'none';
});
Copy the codebtnStop.addEventListener('click', function () {
wavesurfer.stop();
});
Copy the codeTimeline, spectrum, cursor, and so on have been added to demo
vue-pdf
[js to get the upper and lower HTML elements, js to delete HTML elements]
Htmlele.childnode;
Htmlele. parentNode;
Remove the current HTML element: htmlele.removenode (true);
RemoveChild HTML elements: parele.removechild (childEle);
Object.values()
The object.values () method returns an array of all the enumerable property values of a given Object itself, in the same order as using the [for…in] loop (the difference is that the for-in loop enumerates the properties in the prototype chain).
[syntax]
Object.values(obj)
Copy the code[parameter]
-
objAn object that returns an enumerable property value.
[Return value]
An array containing all the enumerable property values of the object itself.
[description]
Object.values() returns an array of enumerable property values found on the Object. The order of properties is the same as that given by manually looping through the object’s property values.
[example]
var obj = { foo: 'bar', baz: 42 }; console.log(Object.values(obj)); // ['bar', 42] // array like object var obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.values(obj)); // ['a', 'b', 'c'] // array like object with random key ordering // when we use numeric keys, the value returned in a numerical order according to the keys var an_obj = { 100: 'a', 2: 'b', 7: 'c' }; console.log(Object.values(an_obj)); // ['b', 'c', 'a'] // getFoo is property which isn't enumerable var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; }}}); my_obj.foo = 'bar'; console.log(Object.values(my_obj)); // ['bar'] // non-object argument will be coerced to an object console.log(Object.values('foo')); // ['f', 'o', 'o']Copy the codeNode.parentElement
Returns the parent node of the current node, or NULL if the element has no parent or if the parent is not a DOM [element].
[syntax]
parentElement = node.parentElement
Copy the codeParentElement is the parentElement of the current node. It’s always a DOM [element] object, or null.
[example]
if (node.parentElement) {
node.parentElement.style.color = "red";
}
Copy the codeHTML DOM appendChild() method
The appendChild() method adds a new child node to the end of the node’s child node list.
Tip: If newChild already exists in the document tree, it will be removed from the document tree and then reinserted in its new location. If newChild is a DocumentFragment node, it is not inserted directly, but its children are inserted sequentially at the end of the current node’s childNodes[] array.
You can remove an element to another element using the appendChild() method.
<ul id="myList1"><li>Coffee</li><li>Tea</li></ul> <ul id="myList2"><li>Water</li><li>Milk</li></ul> <p </p> <button onclick="myFunction()"> </button> <script> function myFunction(){var node=document.getElementById("myList2").lastChild; document.getElementById("myList1").appendChild(node); } </script>Copy the code<script> function changeLink(){ document.getElementById('myAnchor').innerHTML="sss"; document.getElementById('myAnchor').href="//www.sss.com"; document.getElementById('myAnchor').target="_blank"; } </script> </head> <body> <a id="myAnchor" href="//www.xxxxx.com">xxxxx</a> <input type="button" onclick="changeLink()" Value =" modify link "> </body>Copy the codeVue event bus: this.
Emit with this.
on]
1. Create a Vue instance
Prototype.$bus = new Vue();Copy the code2. Launch event
Copy / / GoodsList enclosing $bus. $emit (" aaa ")Copy the code3. Listening events
Copy / / home. Vue enclosing $bus. $on (" aaa ", () = > {this. $refs. Scroll. Scroll. Refresh ()})Copy the codeConcatenates the element’s string, setting the content of the parent element with the innerHTML of the parent element
Create DOM elements and append them accordingly
AppendChild appends an element to the end of another without overwriting the content of the parent element.
JavaScript Array slice() method
The slice() method returns selected elements from an existing array.
The slice() method extracts a portion of a string and returns the extracted portion in a new string.
Note: The slice() method does not alter the original array.
JavaScript Array filter() method
The filter() method creates a new array of elements by checking all eligible elements in the specified array.
Note: Filter () does not detect an empty array.
Note: Filter () does not change the original array.
JavaScript entries () method
The Entries () method returns an iteration of an array containing the array’s key/value pairs.
The index value of the array in the iterated object is the key, and the array element is the value.
Github.com/PanJiaChen/…
- Keep-alive essentially caches a component that should be destroyed. When needed, the cached component information is read instead of re-rendering, so keep-Alive must wrap a component for it to take effect.
- Using the
includeandexcludeThose pages will be cached according to this rule, if not all pages will be cached. - If the second filtering rule is used, the contrast and must be configured
nameOtherwise, the cache cannot be properly cached.
Matching first checks the name option of the component itself, and if the name option is not available, matches its locally registered name (the key value of the parent component’s components option). The anonymous component could not be matched.
- Keep alive – internal
router-viewWhen filling in the key, be careful or there will be problems.
For example, when editing information, the user opens two tabs and uses the same component. If the user does not use the key, the same component will be reused. However, we need to render two tabs.
- Uncaching pages is just a matter of turning
includeandexcludeDo not need to cachenameDelete, because the source code will listen for these two fields to delete cached components.
mounted () { this.$watch('include', val => { pruneCache(this, name => matches(val, name)) }) this.$watch('exclude', val => { pruneCache(this, name => ! matches(val, name)) }) }Copy the codeVuex Case – Configure the specified interface cache
VUEX:
Export default const views = {state: {visitedViews: [], [] // which Views need to be cached using keep-alive, default does not add noCache will be cached (according to business requirements)}, mutations: ADD_VISITED_VIEW (state, {route, token }) { if (state.visitedViews.some(v => v.path === route.path)) return state.visitedViews.push(route) if (route.name && route.meta && ! route.meta.noCache) { state.cachedViews.push(route.name) } } }, actions: { addVisitedViews ({ commit }, { route, token }) { commit('ADD_VISITED_VIEW', { route, token }) } }, getter: CachedViews: state => state.views.visitedviews: state => state.views.visitedviews}}Copy the codeCreate a route:
// router
import Layout from '@/components/layout'
const _import_ = file => () => import('@/views/' + file + '.vue')
export const aysncRoutesMap = [
{
path: '/homepage',
component: Layout,
meta: { title: 'Homepage', icon: 'iconfont icon-yunzhuomian', role: ['admin', 'user'] },
children: [
{
path: 'home',
name: 'Homepage',
component: _import_('Homepage/index'),
meta: { title: 'Home', icon: 'nocturne icon-home', isHome: true, isCache:true}
}
]
},
{
path: '/dashboard',
component: Layout,
meta: { title: 'dashboard', role: ['admin', 'user'] },
children: [
{
path: 'dash',
name: 'Dashboard',
component: _import_('Dashboard/index'),
meta: { title: 'Dashboard', icon: 'nocturne icon-dash', isHome: false, isCache:false }
}
]
}
]
Copy the codeJavaScript Array concat() method
The concat() method is used to join two or more arrays.
The concat() method does not change an existing array, but returns a new array containing the values of the concatenated array.
JavaScript splice () method
The splice() method is used to add or remove elements from an array.
Specify how many elements should be deleted. It must be a number, but it can be “0”. If this parameter is not specified, all elements from index to the end of the original array are deleted
Note: This method alters the original array.
The return value
If only one element is deleted, an array of one element is returned. If no elements are removed, an empty array is returned.
JavaScript Array some() method
The some() method is used to check whether elements in an array satisfy the specified condition (provided by the function).
The some() method executes each element of the array in turn:
- If one element satisfies the condition, the expression returnstrueThe remaining elements will not be tested.
- If no element satisfies the condition, false is returned.
Note: Some () does not check for empty arrays.
Note: Some () does not alter the original array.
Typescript keyof, in
Keyof is slightly similar to object. keys, except that keyof is the key that fetches the interface and is saved as a union type.
In is used to take a value of the union type. Mainly used for array and object construction.
HTML DOM createElement() method
The instance
Create a button for the specified text:
var btn=document.createElement("BUTTON"); \ var t=document.createTextNode("CLICK ME"); \ btn.appendChild(t);Copy the codenew Map()
JavaScript objects are essentially collections of key-value pairs (Hash structures), but traditionally strings can only be used as keys. This puts a great limit on its use. To solve this problem, ES6 provides Map data structures. It is a collection of key-value pairs similar to objects, but the range of “keys” is not limited to strings. Values of all types (including objects) can be used as keys.
Array.prototype.forEach()
The forEach() method performs the given function once on each element of the array.
Mutation
The only way to change the state in Vuex’s store is to commit mutation. Mutations in Vuex are very similar to events: each mutation has a string event type (type) and a callback function (handler). This callback is where we actually make the state change, and it accepts state as the first argument
Action is similar to mutation, except that:
- The Action commits mutation rather than a direct state change.
- Actions can contain any asynchronous operation.
The Action function accepts a context object with the same methods and properties as the store instance, so you can submit a mutation by calling context.mit. Or get state and getters via context.state and context.getters.
ForEach () continues and breaks
ForEach () itself does not support continue and break statements
Use the return statement to implement the continue keyword:
Continue to implement
The instance
var arr = [1, 2, 3, 4, 5]; \ \ arr.forEach(function (item) {\ if (item === 3) {\ return; \ }\ console.log(item); The \}); \Copy the code
[MouseEvent]
When the mouse does something, an Event object is generated, which records all the properties of the mouse-triggered event.
Altkey: Whether the Alt key was pressed when the mouse event was triggered, true if so, fasle otherwise.
Button: The event property returns an Arabic number, 0 for left button down, 1 for scroll down, and 2 for right button down.
OffsetX, offsetY: The event attribute returns the X and Y coordinates of the mouse relative to the event source element when the event was triggered. The standard event has no corresponding attribute.
ClientX, clientY: The event property returns the horizontal and vertical coordinates of the mouse pointer relative to the browser page (or client area) when the event is triggered.
PageX, pageY: Event properties return the horizontal and vertical coordinates of the mouse pointer relative to the upper left corner of the entire page when the event is triggered.
ScreenX, screenY: The event property returns the horizontal and vertical coordinates of the mouse position relative to the user’s screen when the event is triggered. The reference point at this point is the upper left corner of the screen.
Call (), apply(), bind()
Case 1
obj.objAge; // 17 obj. MyFun () // undefinedCopy the codeCase 2
Shows () / / blind monkCopy the codeCompare the difference between this and this. The first one prints this to obj, and the second globally declared shows() function this is window;
1. Call (), apply(), and bind() are all used to redefine this!
Such as:
Obj. MyFun. Call (db); Obj. Myfun. apply(db); // obj. myfun.bind (db)(); // Dema is 99 years oldCopy the codeBind (); bind ();
It follows that bind returns a new function that you must call for it to be executed.
2. Compare call, bind, and apply parameters
Obj. Myfun. call(db,' chengdu ',' Shanghai '); Obj. Myfun. apply(db,[' chengdu ',' Shanghai ']); // obj. Myfun. bind(db,' chengdu ',' Shanghai ')(); / / DE age 99 from chengdu to Shanghai obj. MyFun. Bind (db, [' chengdu ', 'Shanghai']) (); // Dema age 99 from Chengdu, Shanghai to undefinedCopy the code
Subtle difference!
It is easy to see from the above four results:
Call, bind, and apply all take this as the first argument to the object.
Obj. Myfun. call(db,’ db ‘,… , ‘string’).
All parameters of apply must be passed to obj.myfun. apply(db,[‘ chengdu ‘,… ‘string’]) in an array.
Bind takes the same arguments as Call, except that it returns a function.
Of course, the three parameters are not limited to string type, can be a variety of types, including function, object, etc.!
Regular expression
| \ | Marks the next character as a special character, or a literal character, or a backreference, or an octal escape. For example,”n“Match character”n“. “\n“Matches a newline character. Serial”\“Match” and”(“Then match”(“. |
|---|---|
| ^ | Matches the start of the input string. If the Multiline property of the RegExp object is set, ^ also matches”\n“Or”\r“After the position. |
| $ | Matches the end of the input string. If the Multiline property of the RegExp object is set, $also matches”\n“Or”\r“Before the position. |
| * | Matches the preceding subexpression zero or more times. For example, zo* matches”z“And”zoo“. * is equivalent to {0,}. |
| + | Matches the previous subexpression one or more times. For example,”zo+“Match”zo“And”zoo“, but does not match”z“. + is equivalent to {1,}. |
| ? | Matches the preceding subexpression zero or once. For example,”do(es)?“Can match”does“Or”does“The”do“. ? Equivalent to {0,1}. |
| {n} | N is a non-negative integer. Match certain n times. For example,”o{2}“No match”Bob“The”o“But it matches.”foodTwo O’s in “. |
| {n,} | N is a non-negative integer. At least n times. For example,”o{2,}“No match”Bob“The”o“But it matches.”fooooodAll o’s in “. “o{1,}“Equivalent to”o+“. “o{0,}“Is equivalent to”o*“. |
| {n,m} | Both m and n are non-negative integers, where n<=m. At least n times and at most m times are matched. For example,”O {1, 3}“Will match”foooooodThe first three O’s in “. “O {0, 1}“Equivalent to”o?“. Note that there can be no Spaces between commas and numbers. |
| ? | When the character is immediately followed by any other qualifier (*,+,? , {n}, {n,}, {n,m}), the matching mode is non-greedy. The non-greedy mode matches as few strings as possible, while the default greedy mode matches as many strings as possible. For example, for the string”oooo“,”o+?“Will match a single”o“, and”o+“Will match all”o“. |
|---|---|
| . | Match”Any single character other than n '. Matches include"nPlease use any character like(. |
| x|y | Matches x or y. For example,”z|food“Match”z“Or”food“. “(z|f)ood“Then match”zood“Or”food“. |
| [xyz] | Collection of characters. Matches any of the contained characters. For example,”[abc]“Can match”plain“The”a“. |
| [^xyz] | A collection of negative characters. Matches any character that is not contained. For example,”[^abc]“Can match”plain“The”p“. |
| [a-z] | Character range. Matches any character in the specified range. For example,”[a-z]“Can match”a“To”z“Any lowercase character in the range. |
| [^a-z] | The range of negative characters. Matches any character that is not in the specified range. For example,”[^a-z]“Can match any not”a“To”zAny character in the “. |
| \b | Match a word boundary, which is the position between words and Spaces. For example,”er\b“Can match”never“The”er“, but does not match”verb“The”er“. |
|---|---|
| \B | Matches non-word boundaries. “er\B“Match”verb“The”er“, but does not match”never“The”er“. |
| \d | Matches a numeric character. Equivalent to [0-9]. |
|---|---|
| \D | Matches a non-numeric character. That’s the same thing as ^0 minus 9. |
| \f | Matches a feed character. This is equivalent to \x0c and \cL. |
| \n | Matches a newline character. Equivalent to \x0a and \cJ. |
| \r | Matches a carriage return. Equivalent to \x0d and \cM. |
| \s | Matches any whitespace character, including Spaces, tabs, page feeds, and so on. Equivalent to [\f\n\r\t\v]. |
| \S | Matches any non-whitespace character. Equivalent to [^ \f\n\r\t\v]. |
| \t | Matches a TAB character. Equivalent to \x09 and \cI. |
| \v | Matches a vertical TAB character. Equivalent to \x0b and \cK. |
| \w | Matches any word character including underscores. Is equivalent to”[A-Za-z0-9_]“. |
| \W | Matches any non-word character. Is equivalent to”[^A-Za-z0-9_]“. |
❤️ follow + like + favorites + comments + forward ❤️, original is not easy, encourage the author to create better articles
Likes, favorites and comments
I’m Jeskson, and thanks for your talent: likes, favorites and comments. See you next time! ☞ Thank you for learning with me.
See you next time!
Github: 1024bibi.com
“Welcome to the discussion in the comments section. The excavation authorities will draw 100 nuggets in the comments section after project Diggnation. See the event article for details.”